fix: correct TanStack Router search types for all navigate/Link calls
Some checks failed
Build & Release / build (push) Failing after 33s

Each destination route's search must match its validateSearch shape exactly:
- Detail pages (tab-based): { tab: '...' }
- List pages with extra filters: include status, instructorId, view, categoryId etc.
- Form pages (enrollments/new, repairs/new): include only their specific fields
- use-pagination.ts: fix search reducer to use (prev: any) instead of invalid cast

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ryan Moon
2026-04-05 10:37:34 -05:00
parent a84530e80e
commit 505f8fd4e4
13 changed files with 24 additions and 24 deletions

View File

@@ -23,12 +23,12 @@ export function usePagination() {
function setParams(updates: Partial<PaginationSearch>) {
navigate({
search: ((prev: Record<string, unknown>) => ({
search: (prev: any) => ({
...prev,
...updates,
// Reset to page 1 when search or sort changes
page: updates.q !== undefined || updates.sort !== undefined ? 1 : (updates.page ?? (prev as PaginationSearch).page),
})) as (prev: Record<string, unknown>) => Record<string, unknown>,
}),
replace: true,
})
}

View File

@@ -41,7 +41,7 @@ function AccountEnrollmentsTab() {
<div className="flex items-center justify-between">
<p className="text-sm text-muted-foreground">{data?.pagination.total ?? 0} enrollment(s)</p>
{hasPermission('lessons.edit') && (
<Button size="sm" onClick={() => navigate({ to: '/lessons/enrollments/new', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
<Button size="sm" onClick={() => navigate({ to: '/lessons/enrollments/new', search: { memberId: undefined, accountId: undefined } })}>
<Plus className="h-4 w-4 mr-1" />Enroll a Member
</Button>
)}
@@ -55,7 +55,7 @@ function AccountEnrollmentsTab() {
total={data?.data?.length ?? 0}
onPageChange={() => {}}
onSort={() => {}}
onRowClick={(e) => navigate({ to: '/lessons/enrollments/$enrollmentId', params: { enrollmentId: e.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}
onRowClick={(e) => navigate({ to: '/lessons/enrollments/$enrollmentId', params: { enrollmentId: e.id }, search: { tab: 'details' } })}
/>
</div>
)

View File

@@ -281,7 +281,7 @@ function MembersTab() {
<DropdownMenuItem onClick={() => navigate({
to: '/members/$memberId',
params: { memberId: m.id },
search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const },
search: { tab: 'details' },
})}>
<Pencil className="mr-2 h-4 w-4" />
Edit

View File

@@ -192,7 +192,7 @@ function ProductDetailPage() {
<div className="space-y-6">
{/* Header */}
<div className="flex items-center gap-3">
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/inventory', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/inventory', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const, categoryId: undefined, isActive: undefined, type: undefined, lowStock: undefined } })}>
<ArrowLeft className="h-4 w-4" />
</Button>
<div className="min-w-0">

View File

@@ -71,7 +71,7 @@ function InventoryPage() {
queryClient.invalidateQueries({ queryKey: productKeys.all })
toast.success('Product created')
setCreateOpen(false)
navigate({ to: '/inventory/$productId', params: { productId: product.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })
navigate({ to: '/inventory/$productId', params: { productId: product.id }, search: { tab: 'details' } })
},
onError: (err) => toast.error(err.message),
})
@@ -246,7 +246,7 @@ function InventoryPage() {
order={params.order}
onPageChange={setPage}
onSort={setSort}
onRowClick={(p) => navigate({ to: '/inventory/$productId', params: { productId: p.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}
onRowClick={(p) => navigate({ to: '/inventory/$productId', params: { productId: p.id }, search: { tab: 'details' } })}
/>
</div>
)

View File

@@ -131,7 +131,7 @@ function EnrollmentDetailPage() {
return (
<div className="space-y-6">
<div className="flex items-center gap-4">
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/lessons/enrollments', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/lessons/enrollments', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'desc' as const, status: undefined, instructorId: undefined } })}>
<ArrowLeft className="h-4 w-4 mr-1" />Back
</Button>
<div className="flex-1">
@@ -344,7 +344,7 @@ function SessionsTab({ enrollmentId, onGenerate, generating }: { enrollmentId: s
total={data?.data?.length ?? 0}
onPageChange={() => {}}
onSort={() => {}}
onRowClick={(s) => navigate({ to: '/lessons/sessions/$sessionId', params: { sessionId: s.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}
onRowClick={(s) => navigate({ to: '/lessons/sessions/$sessionId', params: { sessionId: s.id }, search: {} })}
/>
</div>
)
@@ -383,7 +383,7 @@ function LessonPlanTab({ enrollmentId, memberId, canEdit }: { enrollmentId: stri
queryClient.invalidateQueries({ queryKey: lessonPlanKeys.all })
toast.success('Plan created from template')
setTemplatePickerOpen(false)
navigate({ to: '/lessons/plans/$planId', params: { planId: plan.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })
navigate({ to: '/lessons/plans/$planId', params: { planId: plan.id }, search: {} })
},
onError: (err) => toast.error(err.message),
})
@@ -401,7 +401,7 @@ function LessonPlanTab({ enrollmentId, memberId, canEdit }: { enrollmentId: stri
{Math.round(activePlan.progress)}% complete
</p>
</div>
<Button variant="outline" size="sm" onClick={() => navigate({ to: '/lessons/plans/$planId', params: { planId: activePlan.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
<Button variant="outline" size="sm" onClick={() => navigate({ to: '/lessons/plans/$planId', params: { planId: activePlan.id }, search: {} })}>
View Plan
</Button>
</div>

View File

@@ -80,7 +80,7 @@ function EnrollmentsListPage() {
<div className="flex items-center justify-between">
<h1 className="text-2xl font-bold">Enrollments</h1>
{hasPermission('lessons.edit') && (
<Button onClick={() => navigate({ to: '/lessons/enrollments/new', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
<Button onClick={() => navigate({ to: '/lessons/enrollments/new', search: { memberId: undefined, accountId: undefined } })}>
<Plus className="mr-2 h-4 w-4" />New Enrollment
</Button>
)}
@@ -125,7 +125,7 @@ function EnrollmentsListPage() {
order={params.order}
onPageChange={setPage}
onSort={setSort}
onRowClick={(e) => navigate({ to: '/lessons/enrollments/$enrollmentId', params: { enrollmentId: e.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}
onRowClick={(e) => navigate({ to: '/lessons/enrollments/$enrollmentId', params: { enrollmentId: e.id }, search: { tab: 'details' } })}
/>
</div>
)

View File

@@ -108,7 +108,7 @@ function NewEnrollmentPage() {
},
onSuccess: (enrollment) => {
toast.success('Enrollment created')
navigate({ to: '/lessons/enrollments/$enrollmentId', params: { enrollmentId: enrollment.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })
navigate({ to: '/lessons/enrollments/$enrollmentId', params: { enrollmentId: enrollment.id }, search: { tab: 'details' } })
},
onError: (err) => toast.error(err.message),
})
@@ -141,7 +141,7 @@ function NewEnrollmentPage() {
return (
<div className="space-y-6 max-w-2xl">
<div className="flex items-center gap-3">
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/lessons/enrollments', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/lessons/enrollments', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'desc' as const, status: undefined, instructorId: undefined } })}>
<ArrowLeft className="h-4 w-4" />
</Button>
<h1 className="text-2xl font-bold">New Enrollment</h1>
@@ -282,7 +282,7 @@ function NewEnrollmentPage() {
<Button type="submit" disabled={mutation.isPending || !selectedMember || !selectedSlotId || !startDate} size="lg">
{mutation.isPending ? 'Creating...' : 'Create Enrollment'}
</Button>
<Button variant="secondary" type="button" size="lg" onClick={() => navigate({ to: '/lessons/enrollments', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
<Button variant="secondary" type="button" size="lg" onClick={() => navigate({ to: '/lessons/enrollments', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'desc' as const, status: undefined, instructorId: undefined } })}>
Cancel
</Button>
</div>

View File

@@ -152,7 +152,7 @@ function InstructorsTab({ canAdmin, search: _search }: { canAdmin: boolean; sear
order={params.order}
onPageChange={setPage}
onSort={setSort}
onRowClick={(i) => navigate({ to: '/lessons/schedule/instructors/$instructorId', params: { instructorId: i.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}
onRowClick={(i) => navigate({ to: '/lessons/schedule/instructors/$instructorId', params: { instructorId: i.id }, search: { tab: 'overview' } })}
/>
</div>
)

View File

@@ -126,7 +126,7 @@ function SessionDetailPage() {
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: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/lessons/sessions', search: { view: 'list' as const, page: 1, limit: 25, q: undefined, sort: undefined, order: 'desc' as const, status: undefined, instructorId: undefined } })}>
<ArrowLeft className="h-4 w-4" />
</Button>
<div className="flex-1">

View File

@@ -293,7 +293,7 @@ function MemberDetailPage() {
<div className="flex items-center justify-between">
<p className="text-sm text-muted-foreground">{enrollmentsData?.pagination.total ?? 0} enrollment(s)</p>
{hasPermission('lessons.edit') && (
<Button size="sm" onClick={() => navigate({ to: '/lessons/enrollments/new', search: { memberId } })}>
<Button size="sm" onClick={() => navigate({ to: '/lessons/enrollments/new', search: { memberId, accountId: undefined } })}>
<Plus className="h-4 w-4 mr-1" />Enroll
</Button>
)}
@@ -307,7 +307,7 @@ function MemberDetailPage() {
total={enrollmentsData?.data?.length ?? 0}
onPageChange={() => {}}
onSort={() => {}}
onRowClick={(e) => navigate({ to: '/lessons/enrollments/$enrollmentId', params: { enrollmentId: e.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}
onRowClick={(e) => navigate({ to: '/lessons/enrollments/$enrollmentId', params: { enrollmentId: e.id }, search: { tab: 'details' } })}
/>
</div>
)}

View File

@@ -84,7 +84,7 @@ function MembersListPage() {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => navigate({ to: '/members/$memberId', params: { memberId: row.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
<DropdownMenuItem onClick={() => navigate({ to: '/members/$memberId', params: { memberId: row.id }, search: { tab: 'details' } })}>
<Pencil className="mr-2 h-4 w-4" />
Edit
</DropdownMenuItem>
@@ -134,7 +134,7 @@ function MembersListPage() {
order={params.order}
onPageChange={setPage}
onSort={setSort}
onRowClick={(member) => navigate({ to: '/members/$memberId', params: { memberId: member.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}
onRowClick={(member) => navigate({ to: '/members/$memberId', params: { memberId: member.id }, search: { tab: 'details' } })}
/>
</div>
)

View File

@@ -137,7 +137,7 @@ function RepairsListPage() {
<div className="flex items-center justify-between">
<h1 className="text-2xl font-bold">Repairs</h1>
{hasPermission('repairs.edit') && (
<Button onClick={() => navigate({ to: '/repairs/new', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
<Button onClick={() => navigate({ to: '/repairs/new', search: { batchId: undefined, batchName: undefined, accountId: undefined, contactName: undefined } })}>
<Plus className="mr-2 h-4 w-4" />
New Repair
</Button>