a84530e80e
Some checks failed
Build & Release / build (push) Failing after 32s
Newer TanStack Router enforces strict types on search params — 'search: {} as Record<string, unknown>' no longer satisfies routes with validateSearch. Replace all occurrences with the correct search shape for each destination route (pagination defaults for list routes, tab/field defaults for detail routes).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
92 lines
3.3 KiB
TypeScript
92 lines
3.3 KiB
TypeScript
import { useState } from 'react'
|
|
import { createFileRoute, useNavigate } from '@tanstack/react-router'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import { lessonPlanListOptions } 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 { Search } from 'lucide-react'
|
|
import type { LessonPlan } from '@/types/lesson'
|
|
|
|
export const Route = createFileRoute('/_authenticated/lessons/plans/')({
|
|
validateSearch: (search: Record<string, unknown>) => ({
|
|
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',
|
|
}),
|
|
component: LessonPlansPage,
|
|
})
|
|
|
|
const columns: Column<LessonPlan>[] = [
|
|
{ key: 'title', header: 'Title', sortable: true, render: (p) => <span className="font-medium">{p.title}</span> },
|
|
{
|
|
key: 'progress', header: 'Progress', sortable: true,
|
|
render: (p) => (
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-24 bg-muted rounded-full h-2">
|
|
<div className="bg-primary h-2 rounded-full" style={{ width: `${p.progress}%` }} />
|
|
</div>
|
|
<span className="text-xs text-muted-foreground">{Math.round(p.progress)}%</span>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: 'is_active', header: 'Status',
|
|
render: (p) => <Badge variant={p.isActive ? 'default' : 'secondary'}>{p.isActive ? 'Active' : 'Inactive'}</Badge>,
|
|
},
|
|
{
|
|
key: 'created_at', header: 'Created', sortable: true,
|
|
render: (p) => <>{new Date(p.createdAt).toLocaleDateString()}</>,
|
|
},
|
|
]
|
|
|
|
function LessonPlansPage() {
|
|
const navigate = useNavigate()
|
|
const { params, setPage, setSearch, setSort } = usePagination()
|
|
const [searchInput, setSearchInput] = useState(params.q ?? '')
|
|
|
|
const { data, isLoading } = useQuery(lessonPlanListOptions(params))
|
|
|
|
function handleSearchSubmit(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
setSearch(searchInput)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<h1 className="text-2xl font-bold">Lesson Plans</h1>
|
|
|
|
<form onSubmit={handleSearchSubmit} className="flex gap-2 max-w-sm">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Search lesson plans..."
|
|
value={searchInput}
|
|
onChange={(e) => setSearchInput(e.target.value)}
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
<Button type="submit" variant="secondary">Search</Button>
|
|
</form>
|
|
|
|
<DataTable
|
|
columns={columns}
|
|
data={data?.data ?? []}
|
|
loading={isLoading}
|
|
page={params.page}
|
|
totalPages={data?.pagination.totalPages ?? 1}
|
|
total={data?.pagination.total ?? 0}
|
|
sort={params.sort}
|
|
order={params.order}
|
|
onPageChange={setPage}
|
|
onSort={setSort}
|
|
onRowClick={(p) => navigate({ to: '/lessons/plans/$planId', params: { planId: p.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|