Add lessons module, rate cycles, EC2 deploy scripts, and help content
- Lessons module: lesson types, instructors, schedule slots, enrollments, sessions (list + week grid view), lesson plans, grading scales, templates - Rate cycles: replace monthly_rate with billing_interval + billing_unit on enrollments; add weekly/monthly/quarterly rate presets to lesson types and schedule slots with auto-fill on enrollment form - Member detail page: tabbed layout for details, identity documents, enrollments - Sessions week view: custom 7-column grid replacing react-big-calendar - Music store seed: instructors, lesson types, slots, enrollments, sessions, grading scale, lesson plan template - Scrollbar styling: themed to match sidebar/app palette - deploy/: EC2 setup and redeploy scripts, nginx config, systemd service - Help: add Lessons category (overview, types, instructors, slots, enrollments, sessions, plans/grading); collapsible sidebar with independent scroll; remove POS/accounting references from docs
This commit is contained in:
Ryan Moon
@@ -0,0 +1,341 @@
|
||||
import { useState } from 'react'
|
||||
import { createFileRoute, useNavigate, Link } from '@tanstack/react-router'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import {
|
||||
sessionDetailOptions, sessionMutations, sessionKeys,
|
||||
sessionPlanItemsOptions,
|
||||
enrollmentDetailOptions,
|
||||
instructorDetailOptions, instructorListOptions,
|
||||
lessonPlanListOptions,
|
||||
} from '@/api/lessons'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { ArrowLeft, CheckSquare, Square } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { useAuthStore } from '@/stores/auth.store'
|
||||
import type { LessonPlan, LessonPlanSection } from '@/types/lesson'
|
||||
|
||||
export const Route = createFileRoute('/_authenticated/lessons/sessions/$sessionId')({
|
||||
component: SessionDetailPage,
|
||||
})
|
||||
|
||||
const STATUS_ACTIONS: Record<string, { label: string; next: string; variant: 'default' | 'destructive' | 'secondary' | 'outline' }[]> = {
|
||||
scheduled: [
|
||||
{ label: 'Mark Attended', next: 'attended', variant: 'default' },
|
||||
{ label: 'Mark Missed', next: 'missed', variant: 'destructive' },
|
||||
{ label: 'Cancel', next: 'cancelled', variant: 'secondary' },
|
||||
],
|
||||
attended: [],
|
||||
missed: [],
|
||||
makeup: [
|
||||
{ label: 'Mark Attended', next: 'attended', variant: 'default' },
|
||||
{ label: 'Cancel', next: 'cancelled', variant: 'secondary' },
|
||||
],
|
||||
cancelled: [],
|
||||
}
|
||||
|
||||
function sessionStatusBadge(status: string) {
|
||||
const variants: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
|
||||
scheduled: 'outline', attended: 'default', missed: 'destructive', makeup: 'secondary', cancelled: 'secondary',
|
||||
}
|
||||
return <Badge variant={variants[status] ?? 'outline'}>{status}</Badge>
|
||||
}
|
||||
|
||||
function formatTime(t: string) {
|
||||
const [h, m] = t.split(':').map(Number)
|
||||
const ampm = h >= 12 ? 'PM' : 'AM'
|
||||
const hour = h % 12 || 12
|
||||
return `${hour}:${String(m).padStart(2, '0')} ${ampm}`
|
||||
}
|
||||
|
||||
function SessionDetailPage() {
|
||||
const { sessionId } = Route.useParams()
|
||||
const navigate = useNavigate()
|
||||
const queryClient = useQueryClient()
|
||||
const hasPermission = useAuthStore((s) => s.hasPermission)
|
||||
const canEdit = hasPermission('lessons.edit')
|
||||
|
||||
const { data: session, isLoading } = useQuery(sessionDetailOptions(sessionId))
|
||||
|
||||
const { data: enrollment } = useQuery({
|
||||
...enrollmentDetailOptions(session?.enrollmentId ?? ''),
|
||||
enabled: !!session?.enrollmentId,
|
||||
})
|
||||
|
||||
const { data: instructorData } = useQuery({
|
||||
...instructorDetailOptions(session?.substituteInstructorId ?? enrollment?.instructorId ?? ''),
|
||||
enabled: !!(session?.substituteInstructorId ?? enrollment?.instructorId),
|
||||
})
|
||||
|
||||
const { data: instructorsList } = useQuery(instructorListOptions({ page: 1, limit: 100, order: 'asc' }))
|
||||
|
||||
const { data: planItems } = useQuery(sessionPlanItemsOptions(sessionId))
|
||||
|
||||
const { data: plansData } = useQuery({
|
||||
...lessonPlanListOptions({ enrollmentId: session?.enrollmentId ?? '', isActive: true }),
|
||||
enabled: !!session?.enrollmentId,
|
||||
})
|
||||
const activePlan: LessonPlan | undefined = plansData?.data?.[0]
|
||||
|
||||
const statusMutation = useMutation({
|
||||
mutationFn: (status: string) => sessionMutations.updateStatus(sessionId, status),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: sessionKeys.detail(sessionId) })
|
||||
toast.success('Status updated')
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const notesMutation = useMutation({
|
||||
mutationFn: (data: Record<string, unknown>) => sessionMutations.updateNotes(sessionId, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: sessionKeys.detail(sessionId) })
|
||||
toast.success('Notes saved')
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const subMutation = useMutation({
|
||||
mutationFn: (subId: string | null) => sessionMutations.update(sessionId, { substituteInstructorId: subId }),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: sessionKeys.detail(sessionId) })
|
||||
toast.success('Substitute updated')
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const linkPlanItemsMutation = useMutation({
|
||||
mutationFn: (ids: string[]) => sessionMutations.linkPlanItems(sessionId, ids),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: sessionKeys.planItems(sessionId) })
|
||||
toast.success('Plan items linked')
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
if (isLoading) return <div className="text-sm text-muted-foreground">Loading...</div>
|
||||
if (!session) return <div className="text-sm text-destructive">Session not found.</div>
|
||||
|
||||
const linkedItemIds = new Set(planItems?.map((pi) => pi.lessonPlanItemId) ?? [])
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-3xl">
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/lessons/sessions', search: {} as any })}>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<div className="flex-1">
|
||||
<h1 className="text-xl font-bold">
|
||||
{new Date(session.scheduledDate + 'T00:00:00').toLocaleDateString()} · {formatTime(session.scheduledTime)}
|
||||
</h1>
|
||||
{enrollment && (
|
||||
<Link
|
||||
to="/lessons/enrollments/$enrollmentId"
|
||||
params={{ enrollmentId: enrollment.id }}
|
||||
search={{} as any}
|
||||
className="text-sm text-primary hover:underline"
|
||||
>
|
||||
View Enrollment
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
{sessionStatusBadge(session.status)}
|
||||
</div>
|
||||
|
||||
{/* Status Actions */}
|
||||
{canEdit && (STATUS_ACTIONS[session.status]?.length ?? 0) > 0 && (
|
||||
<Card>
|
||||
<CardContent className="pt-4">
|
||||
<div className="flex gap-2">
|
||||
{STATUS_ACTIONS[session.status].map((action) => (
|
||||
<Button
|
||||
key={action.next}
|
||||
variant={action.variant}
|
||||
size="sm"
|
||||
onClick={() => statusMutation.mutate(action.next)}
|
||||
disabled={statusMutation.isPending}
|
||||
>
|
||||
{action.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Substitute Instructor */}
|
||||
{canEdit && (
|
||||
<Card>
|
||||
<CardHeader><CardTitle className="text-base">Substitute Instructor</CardTitle></CardHeader>
|
||||
<CardContent className="flex gap-3 items-center">
|
||||
<Select
|
||||
value={session.substituteInstructorId ?? 'none'}
|
||||
onValueChange={(v) => subMutation.mutate(v === 'none' ? null : v)}
|
||||
>
|
||||
<SelectTrigger className="flex-1">
|
||||
<SelectValue placeholder="No substitute" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">No substitute</SelectItem>
|
||||
{(instructorsList?.data ?? []).map((i) => (
|
||||
<SelectItem key={i.id} value={i.id}>{i.displayName}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Post-lesson Notes */}
|
||||
<NotesCard session={session} canEdit={canEdit} onSave={notesMutation.mutate} saving={notesMutation.isPending} />
|
||||
|
||||
{/* Plan Items */}
|
||||
{activePlan && (
|
||||
<PlanItemsCard
|
||||
plan={activePlan}
|
||||
linkedItemIds={linkedItemIds}
|
||||
onLink={(ids) => linkPlanItemsMutation.mutate(ids)}
|
||||
linking={linkPlanItemsMutation.isPending}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Notes Card ───────────────────────────────────────────────────────────────
|
||||
|
||||
function NotesCard({ session, canEdit, onSave, saving }: any) {
|
||||
const [instructorNotes, setInstructorNotes] = useState(session.instructorNotes ?? '')
|
||||
const [memberNotes, setMemberNotes] = useState(session.memberNotes ?? '')
|
||||
const [homeworkAssigned, setHomeworkAssigned] = useState(session.homeworkAssigned ?? '')
|
||||
const [nextLessonGoals, setNextLessonGoals] = useState(session.nextLessonGoals ?? '')
|
||||
const [topicsCovered, setTopicsCovered] = useState((session.topicsCovered ?? []).join(', '))
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-base">Post-lesson Notes</CardTitle>
|
||||
{session.notesCompletedAt && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Saved {new Date(session.notesCompletedAt).toLocaleString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Instructor Notes</Label>
|
||||
<Textarea value={instructorNotes} onChange={(e) => setInstructorNotes(e.target.value)} rows={3} disabled={!canEdit} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Member Notes (shared with student)</Label>
|
||||
<Textarea value={memberNotes} onChange={(e) => setMemberNotes(e.target.value)} rows={2} disabled={!canEdit} />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Homework Assigned</Label>
|
||||
<Input value={homeworkAssigned} onChange={(e) => setHomeworkAssigned(e.target.value)} disabled={!canEdit} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Next Lesson Goals</Label>
|
||||
<Input value={nextLessonGoals} onChange={(e) => setNextLessonGoals(e.target.value)} disabled={!canEdit} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Topics Covered</Label>
|
||||
<Input
|
||||
value={topicsCovered}
|
||||
onChange={(e) => setTopicsCovered(e.target.value)}
|
||||
placeholder="Comma-separated topics"
|
||||
disabled={!canEdit}
|
||||
/>
|
||||
</div>
|
||||
{canEdit && (
|
||||
<Button
|
||||
onClick={() => onSave({
|
||||
instructorNotes: instructorNotes || undefined,
|
||||
memberNotes: memberNotes || undefined,
|
||||
homeworkAssigned: homeworkAssigned || undefined,
|
||||
nextLessonGoals: nextLessonGoals || undefined,
|
||||
topicsCovered: topicsCovered ? topicsCovered.split(',').map((s: string) => s.trim()).filter(Boolean) : undefined,
|
||||
})}
|
||||
disabled={saving}
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save Notes'}
|
||||
</Button>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Plan Items Card ──────────────────────────────────────────────────────────
|
||||
|
||||
function PlanItemsCard({ plan, linkedItemIds, onLink, linking }: {
|
||||
plan: LessonPlan
|
||||
linkedItemIds: Set<string>
|
||||
onLink: (ids: string[]) => void
|
||||
linking: boolean
|
||||
}) {
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set(linkedItemIds))
|
||||
|
||||
function toggle(id: string) {
|
||||
if (linkedItemIds.has(id)) return // already committed
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(id)) next.delete(id)
|
||||
else next.add(id)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
const newSelections = [...selected].filter((id) => !linkedItemIds.has(id))
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader><CardTitle className="text-base">Plan Items Worked On</CardTitle></CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{(plan.sections ?? []).map((section: LessonPlanSection) => (
|
||||
<div key={section.id}>
|
||||
<p className="text-sm font-semibold text-muted-foreground mb-2">{section.title}</p>
|
||||
<div className="space-y-1">
|
||||
{(section.items ?? []).map((item) => {
|
||||
const isLinked = linkedItemIds.has(item.id)
|
||||
const isSelected = selected.has(item.id)
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
className={`flex items-center gap-2 w-full text-left px-2 py-1.5 rounded text-sm transition-colors ${
|
||||
isLinked ? 'opacity-60 cursor-default' : 'hover:bg-accent cursor-pointer'
|
||||
}`}
|
||||
onClick={() => toggle(item.id)}
|
||||
disabled={isLinked}
|
||||
>
|
||||
{isLinked || isSelected
|
||||
? <CheckSquare className="h-4 w-4 text-primary shrink-0" />
|
||||
: <Square className="h-4 w-4 text-muted-foreground shrink-0" />}
|
||||
<span>{item.title}</span>
|
||||
{isLinked && <span className="text-xs text-muted-foreground ml-auto">linked</span>}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{newSelections.length > 0 && (
|
||||
<Button onClick={() => onLink(newSelections)} disabled={linking} size="sm">
|
||||
{linking ? 'Linking...' : `Link ${newSelections.length} item${newSelections.length !== 1 ? 's' : ''}`}
|
||||
</Button>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,278 @@
|
||||
import { useState } from 'react'
|
||||
import { createFileRoute, useNavigate } from '@tanstack/react-router'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { format, startOfWeek, endOfWeek, addWeeks, subWeeks, addDays, isSameDay } from 'date-fns'
|
||||
import { sessionListOptions } from '@/api/lessons'
|
||||
import { instructorListOptions } from '@/api/lessons'
|
||||
import { usePagination } from '@/hooks/use-pagination'
|
||||
import { DataTable, type Column } from '@/components/shared/data-table'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Search, LayoutList, CalendarDays, ChevronLeft, ChevronRight } from 'lucide-react'
|
||||
import { useAuthStore } from '@/stores/auth.store'
|
||||
import type { LessonSession } from '@/types/lesson'
|
||||
|
||||
export const Route = createFileRoute('/_authenticated/lessons/sessions/')({
|
||||
validateSearch: (search: Record<string, unknown>) => ({
|
||||
view: (search.view as 'list' | 'week') || 'list',
|
||||
page: Number(search.page) || 1,
|
||||
limit: Number(search.limit) || 25,
|
||||
q: (search.q as string) || undefined,
|
||||
sort: (search.sort as string) || undefined,
|
||||
order: (search.order as 'asc' | 'desc') || 'desc',
|
||||
status: (search.status as string) || undefined,
|
||||
instructorId: (search.instructorId as string) || undefined,
|
||||
}),
|
||||
component: SessionsPage,
|
||||
})
|
||||
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
attended: 'bg-green-100 border-green-400 text-green-800',
|
||||
missed: 'bg-red-100 border-red-400 text-red-800',
|
||||
cancelled: 'bg-gray-100 border-gray-300 text-gray-500',
|
||||
makeup: 'bg-purple-100 border-purple-400 text-purple-800',
|
||||
scheduled: 'bg-blue-100 border-blue-400 text-blue-800',
|
||||
}
|
||||
|
||||
function sessionStatusBadge(status: string) {
|
||||
const variants: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
|
||||
scheduled: 'outline', attended: 'default', missed: 'destructive', makeup: 'secondary', cancelled: 'secondary',
|
||||
}
|
||||
return <Badge variant={variants[status] ?? 'outline'}>{status}</Badge>
|
||||
}
|
||||
|
||||
function formatTime(t: string) {
|
||||
const [h, m] = t.split(':').map(Number)
|
||||
const ampm = h >= 12 ? 'PM' : 'AM'
|
||||
const hour = h % 12 || 12
|
||||
return `${hour}:${String(m).padStart(2, '0')} ${ampm}`
|
||||
}
|
||||
|
||||
const listColumns: Column<LessonSession>[] = [
|
||||
{
|
||||
key: 'scheduled_date', header: 'Date', sortable: true,
|
||||
render: (s) => <>{new Date(s.scheduledDate + 'T00:00:00').toLocaleDateString()}</>,
|
||||
},
|
||||
{
|
||||
key: 'scheduled_time', header: 'Time',
|
||||
render: (s) => <>{formatTime(s.scheduledTime)}</>,
|
||||
},
|
||||
{
|
||||
key: 'member_name', header: 'Member',
|
||||
render: (s) => <span className="font-medium">{s.memberName ?? '—'}</span>,
|
||||
},
|
||||
{
|
||||
key: 'instructor_name', header: 'Instructor',
|
||||
render: (s) => <>{s.instructorName ?? '—'}</>,
|
||||
},
|
||||
{
|
||||
key: 'lesson_type', header: 'Lesson',
|
||||
render: (s) => <>{s.lessonTypeName ?? '—'}</>,
|
||||
},
|
||||
{ key: 'status', header: 'Status', sortable: true, render: (s) => sessionStatusBadge(s.status) },
|
||||
{
|
||||
key: 'notes', header: 'Notes',
|
||||
render: (s) => s.notesCompletedAt ? <Badge variant="outline" className="text-xs">Notes</Badge> : null,
|
||||
},
|
||||
]
|
||||
|
||||
const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
|
||||
|
||||
function SessionsPage() {
|
||||
const navigate = useNavigate()
|
||||
const search = Route.useSearch()
|
||||
const view = search.view ?? 'list'
|
||||
const { params, setPage, setSearch, setSort } = usePagination()
|
||||
const [searchInput, setSearchInput] = useState(params.q ?? '')
|
||||
const [statusFilter, setStatusFilter] = useState(search.status ?? '')
|
||||
const [weekStart, setWeekStart] = useState(() => startOfWeek(new Date(), { weekStartsOn: 0 }))
|
||||
const [weekInstructorId, setWeekInstructorId] = useState(search.instructorId ?? '')
|
||||
|
||||
const weekEnd = endOfWeek(weekStart, { weekStartsOn: 0 })
|
||||
|
||||
function setView(v: 'list' | 'week') {
|
||||
navigate({ to: '/lessons/sessions', search: { ...search, view: v, page: 1 } as any })
|
||||
}
|
||||
|
||||
function handleStatusChange(v: string) {
|
||||
const s = v === 'all' ? '' : v
|
||||
setStatusFilter(s)
|
||||
navigate({ to: '/lessons/sessions', search: { ...search, status: s || undefined, page: 1 } as any })
|
||||
}
|
||||
|
||||
// List query
|
||||
const listQueryParams: Record<string, unknown> = { ...params }
|
||||
if (statusFilter) listQueryParams.status = statusFilter
|
||||
const { data: listData, isLoading: listLoading } = useQuery({
|
||||
...sessionListOptions(listQueryParams),
|
||||
enabled: view === 'list',
|
||||
})
|
||||
|
||||
// Week query
|
||||
const weekQueryParams: Record<string, unknown> = {
|
||||
page: 1, limit: 100,
|
||||
sort: 'scheduled_date', order: 'asc',
|
||||
dateFrom: format(weekStart, 'yyyy-MM-dd'),
|
||||
dateTo: format(weekEnd, 'yyyy-MM-dd'),
|
||||
}
|
||||
if (weekInstructorId) weekQueryParams.instructorId = weekInstructorId
|
||||
const { data: weekData } = useQuery({
|
||||
...sessionListOptions(weekQueryParams),
|
||||
enabled: view === 'week',
|
||||
})
|
||||
|
||||
const { data: instructorsData } = useQuery({
|
||||
...instructorListOptions({ page: 1, limit: 100, order: 'asc' }),
|
||||
enabled: view === 'week',
|
||||
})
|
||||
|
||||
function handleSearchSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setSearch(searchInput)
|
||||
}
|
||||
|
||||
const weekSessions = weekData?.data ?? []
|
||||
const weekDays = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i))
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold">Sessions</h1>
|
||||
<div className="flex gap-1 border rounded-md p-1">
|
||||
<Button variant={view === 'list' ? 'default' : 'ghost'} size="sm" onClick={() => setView('list')}>
|
||||
<LayoutList className="h-4 w-4 mr-1" />List
|
||||
</Button>
|
||||
<Button variant={view === 'week' ? 'default' : 'ghost'} size="sm" onClick={() => setView('week')}>
|
||||
<CalendarDays className="h-4 w-4 mr-1" />Week
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{view === 'list' && (
|
||||
<>
|
||||
<div className="flex gap-3 flex-wrap">
|
||||
<form onSubmit={handleSearchSubmit} className="flex gap-2">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search sessions..."
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
className="pl-9 w-64"
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" variant="secondary">Search</Button>
|
||||
</form>
|
||||
<Select value={statusFilter || 'all'} onValueChange={handleStatusChange}>
|
||||
<SelectTrigger className="w-40">
|
||||
<SelectValue placeholder="All Statuses" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Statuses</SelectItem>
|
||||
<SelectItem value="scheduled">Scheduled</SelectItem>
|
||||
<SelectItem value="attended">Attended</SelectItem>
|
||||
<SelectItem value="missed">Missed</SelectItem>
|
||||
<SelectItem value="makeup">Makeup</SelectItem>
|
||||
<SelectItem value="cancelled">Cancelled</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<DataTable
|
||||
columns={listColumns}
|
||||
data={listData?.data ?? []}
|
||||
loading={listLoading}
|
||||
page={params.page}
|
||||
totalPages={listData?.pagination.totalPages ?? 1}
|
||||
total={listData?.pagination.total ?? 0}
|
||||
sort={params.sort}
|
||||
order={params.order}
|
||||
onPageChange={setPage}
|
||||
onSort={setSort}
|
||||
onRowClick={(s) => navigate({ to: '/lessons/sessions/$sessionId', params: { sessionId: s.id }, search: {} as any })}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{view === 'week' && (
|
||||
<div className="space-y-4">
|
||||
{/* Week nav + instructor filter */}
|
||||
<div className="flex items-center gap-4 flex-wrap">
|
||||
<div className="flex items-center gap-1">
|
||||
<Button variant="outline" size="icon" onClick={() => setWeekStart(subWeeks(weekStart, 1))}>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => setWeekStart(startOfWeek(new Date(), { weekStartsOn: 0 }))}>
|
||||
This Week
|
||||
</Button>
|
||||
<Button variant="outline" size="icon" onClick={() => setWeekStart(addWeeks(weekStart, 1))}>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-muted-foreground">
|
||||
{format(weekStart, 'MMM d')} – {format(weekEnd, 'MMM d, yyyy')}
|
||||
</span>
|
||||
<Select value={weekInstructorId || 'all'} onValueChange={(v) => setWeekInstructorId(v === 'all' ? '' : v)}>
|
||||
<SelectTrigger className="w-48">
|
||||
<SelectValue placeholder="All Instructors" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Instructors</SelectItem>
|
||||
{(instructorsData?.data ?? []).map((i) => (
|
||||
<SelectItem key={i.id} value={i.id}>{i.displayName}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Week grid */}
|
||||
<div className="grid grid-cols-7 gap-px bg-border rounded-lg overflow-hidden border">
|
||||
{/* Day headers */}
|
||||
{weekDays.map((day) => {
|
||||
const isToday = isSameDay(day, new Date())
|
||||
return (
|
||||
<div key={day.toISOString()} className={`bg-muted/50 px-2 py-1.5 text-center ${isToday ? 'bg-primary/10' : ''}`}>
|
||||
<p className="text-xs font-medium text-muted-foreground">{DAYS[day.getDay()]}</p>
|
||||
<p className={`text-sm font-semibold ${isToday ? 'text-primary' : ''}`}>{format(day, 'd')}</p>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{/* Session cells */}
|
||||
{weekDays.map((day) => {
|
||||
const daySessions = weekSessions.filter((s) => s.scheduledDate === format(day, 'yyyy-MM-dd'))
|
||||
const isToday = isSameDay(day, new Date())
|
||||
return (
|
||||
<div key={day.toISOString()} className={`bg-background min-h-32 p-1.5 space-y-1 ${isToday ? 'bg-primary/5' : ''}`}>
|
||||
{daySessions.length === 0 && (
|
||||
<p className="text-xs text-muted-foreground/40 text-center pt-4">—</p>
|
||||
)}
|
||||
{daySessions.map((s) => (
|
||||
<button
|
||||
key={s.id}
|
||||
onClick={() => navigate({ to: '/lessons/sessions/$sessionId', params: { sessionId: s.id }, search: {} as any })}
|
||||
className={`w-full text-left rounded border px-1.5 py-1 text-xs hover:opacity-80 transition-opacity ${STATUS_COLORS[s.status] ?? STATUS_COLORS.scheduled}`}
|
||||
>
|
||||
<p className="font-semibold">{formatTime(s.scheduledTime)}</p>
|
||||
<p className="truncate">{s.memberName ?? '—'}</p>
|
||||
{s.lessonTypeName && <p className="truncate text-[10px] opacity-70">{s.lessonTypeName}</p>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="flex gap-3 flex-wrap text-xs text-muted-foreground">
|
||||
{Object.entries(STATUS_COLORS).map(([status, cls]) => (
|
||||
<span key={status} className={`inline-flex items-center gap-1 px-2 py-0.5 rounded border ${cls}`}>
|
||||
{status}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user