Add repairs domain with tickets, line items, batches, and service templates
Full-stack implementation of instrument repair tracking: DB schema with repair_ticket, repair_line_item, repair_batch, and repair_service_template tables. Backend services and routes with pagination/search/sort. 20 API tests covering CRUD, status workflow, line items, and batch operations. Admin frontend with ticket list, detail with status progression, line item management, batch list/detail with approval workflow, and new ticket form with searchable account picker and intake photo uploads.
This commit is contained in:
Ryan Moon
@@ -0,0 +1,160 @@
|
||||
import { createFileRoute, useParams, useNavigate } from '@tanstack/react-router'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { repairBatchDetailOptions, repairBatchMutations, repairBatchKeys, repairBatchTicketsOptions } from '@/api/repairs'
|
||||
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 { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { ArrowLeft, Check, X } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { useAuthStore } from '@/stores/auth.store'
|
||||
import type { RepairTicket } from '@/types/repair'
|
||||
|
||||
export const Route = createFileRoute('/_authenticated/repair-batches/$batchId')({
|
||||
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') || 'asc',
|
||||
}),
|
||||
component: RepairBatchDetailPage,
|
||||
})
|
||||
|
||||
const ticketColumns: Column<RepairTicket>[] = [
|
||||
{ key: 'ticket_number', header: 'Ticket #', sortable: true, render: (t) => <span className="font-mono text-sm">{t.ticketNumber}</span> },
|
||||
{ key: 'customer_name', header: 'Instrument', render: (t) => <>{t.instrumentDescription ?? '-'}</> },
|
||||
{ key: 'status', header: 'Status', sortable: true, render: (t) => <Badge variant="outline">{t.status.replace('_', ' ')}</Badge> },
|
||||
{ key: 'problem', header: 'Problem', render: (t) => <span className="truncate max-w-[200px] block">{t.problemDescription}</span> },
|
||||
]
|
||||
|
||||
function RepairBatchDetailPage() {
|
||||
const { batchId } = useParams({ from: '/_authenticated/repair-batches/$batchId' })
|
||||
const navigate = useNavigate()
|
||||
const queryClient = useQueryClient()
|
||||
const hasPermission = useAuthStore((s) => s.hasPermission)
|
||||
const { params, setPage, setSort } = usePagination()
|
||||
|
||||
const { data: batch, isLoading } = useQuery(repairBatchDetailOptions(batchId))
|
||||
const { data: ticketsData, isLoading: ticketsLoading } = useQuery(repairBatchTicketsOptions(batchId, params))
|
||||
|
||||
const approveMutation = useMutation({
|
||||
mutationFn: () => repairBatchMutations.approve(batchId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: repairBatchKeys.detail(batchId) })
|
||||
toast.success('Batch approved')
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const rejectMutation = useMutation({
|
||||
mutationFn: () => repairBatchMutations.reject(batchId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: repairBatchKeys.detail(batchId) })
|
||||
toast.success('Batch rejected')
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const statusMutation = useMutation({
|
||||
mutationFn: (status: string) => repairBatchMutations.updateStatus(batchId, status),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: repairBatchKeys.detail(batchId) })
|
||||
toast.success('Status updated')
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="space-y-4"><Skeleton className="h-8 w-48" /><Skeleton className="h-64 w-full" /></div>
|
||||
}
|
||||
|
||||
if (!batch) {
|
||||
return <p className="text-muted-foreground">Batch not found</p>
|
||||
}
|
||||
|
||||
function handleTicketClick(ticket: RepairTicket) {
|
||||
navigate({ to: '/repairs/$ticketId', params: { ticketId: ticket.id }, search: {} as any })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-4xl">
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="ghost" size="sm" onClick={() => navigate({ to: '/repair-batches', search: {} as any })}>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<div className="flex-1">
|
||||
<h1 className="text-2xl font-bold">Batch #{batch.batchNumber}</h1>
|
||||
<p className="text-sm text-muted-foreground">{batch.contactName ?? 'No contact'}</p>
|
||||
</div>
|
||||
<Badge variant="outline" className="text-sm px-3 py-1">{batch.status.replace('_', ' ')}</Badge>
|
||||
<Badge variant={batch.approvalStatus === 'approved' ? 'default' : batch.approvalStatus === 'rejected' ? 'destructive' : 'secondary'} className="text-sm px-3 py-1">
|
||||
{batch.approvalStatus}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2">
|
||||
{hasPermission('repairs.admin') && batch.approvalStatus === 'pending' && (
|
||||
<>
|
||||
<Button onClick={() => approveMutation.mutate()} disabled={approveMutation.isPending}>
|
||||
<Check className="mr-2 h-4 w-4" />Approve
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={() => rejectMutation.mutate()} disabled={rejectMutation.isPending}>
|
||||
<X className="mr-2 h-4 w-4" />Reject
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{hasPermission('repairs.edit') && batch.status === 'intake' && (
|
||||
<Button variant="secondary" onClick={() => statusMutation.mutate('in_progress')}>Start Work</Button>
|
||||
)}
|
||||
{hasPermission('repairs.edit') && batch.status === 'in_progress' && (
|
||||
<Button variant="secondary" onClick={() => statusMutation.mutate('completed')}>Mark Completed</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Batch Info */}
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader><CardTitle className="text-lg">Contact</CardTitle></CardHeader>
|
||||
<CardContent className="space-y-2 text-sm">
|
||||
<div><span className="text-muted-foreground">Name:</span> {batch.contactName ?? '-'}</div>
|
||||
<div><span className="text-muted-foreground">Phone:</span> {batch.contactPhone ?? '-'}</div>
|
||||
<div><span className="text-muted-foreground">Email:</span> {batch.contactEmail ?? '-'}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader><CardTitle className="text-lg">Details</CardTitle></CardHeader>
|
||||
<CardContent className="space-y-2 text-sm">
|
||||
<div><span className="text-muted-foreground">Instruments:</span> {batch.receivedCount}/{batch.instrumentCount}</div>
|
||||
<div><span className="text-muted-foreground">Due:</span> {batch.dueDate ? new Date(batch.dueDate).toLocaleDateString() : '-'}</div>
|
||||
<div><span className="text-muted-foreground">Estimated Total:</span> {batch.estimatedTotal ? `$${batch.estimatedTotal}` : '-'}</div>
|
||||
{batch.notes && <div><span className="text-muted-foreground">Notes:</span> {batch.notes}</div>}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Tickets in batch */}
|
||||
<Card>
|
||||
<CardHeader><CardTitle className="text-lg">Tickets ({ticketsData?.pagination.total ?? 0})</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
<DataTable
|
||||
columns={ticketColumns}
|
||||
data={ticketsData?.data ?? []}
|
||||
loading={ticketsLoading}
|
||||
page={params.page}
|
||||
totalPages={ticketsData?.pagination.totalPages ?? 1}
|
||||
total={ticketsData?.pagination.total ?? 0}
|
||||
sort={params.sort}
|
||||
order={params.order}
|
||||
onPageChange={setPage}
|
||||
onSort={setSort}
|
||||
onRowClick={handleTicketClick}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user