import { DataTable } from '@/components/core/data-table'; import { DeleteDialog } from '@/components/core/delete-dialog'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import AppLayout from '@/layouts/app-layout'; import { Head, Link, router } from '@inertiajs/react'; import { useState, useEffect } from 'react'; import { formatDate } from '@/utils/date-format'; interface RidingCompany { id: number; name: string; } interface DriverStage { id: number; name?: string; riding_company_id?: number; riding_company_ids?: number[]; riding_companies?: RidingCompany[]; stage_order: number; status: string; completed_at?: string; notes?: string; created_at: string; } interface DriverStagesIndexProps { driverStages: DriverStage[]; } export default function DriverStagesIndex({ driverStages }: DriverStagesIndexProps) { const [deleteDialog, setDeleteDialog] = useState<{ open: boolean; stage: DriverStage | null }>({ open: false, stage: null, }); // Reload page when window gains focus to check for deleted drivers useEffect(() => { const handleFocus = () => { router.reload({ only: ['driverStages'], preserveState: true, preserveScroll: true }); }; window.addEventListener('focus', handleFocus); return () => window.removeEventListener('focus', handleFocus); }, []); const handleDelete = (stage: DriverStage) => { setDeleteDialog({ open: true, stage }); }; const confirmDelete = () => { if (deleteDialog.stage) { router.delete(`/drivers/driver-stages/${deleteDialog.stage.id}`); } }; const handleComplete = (id: number) => { router.post(`/drivers/driver-stages/${id}/complete`); }; const getStatusBadge = (status: string) => { const variants: Record = { completed: 'default', pending: 'secondary', in_progress: 'outline', rejected: 'destructive', }; return ( {status.replace('_', ' ').toUpperCase()} ); }; return (

Driver Stages

Manage driver onboarding stages

{driverStages.length > 0 ? ( row.name || `Stage ${row.stage_order}`, }, { header: 'Riding Companies', accessor: (row) => { if (row.riding_companies && row.riding_companies.length > 0) { return row.riding_companies.map((rc: RidingCompany) => rc.name).join(', '); } if (row.riding_company_ids && row.riding_company_ids.length > 0) { return `${row.riding_company_ids.length} company(ies)`; } return row.riding_company_id ? '1 company' : '-'; }, }, { header: 'Order', accessor: (row) => row.stage_order, }, { header: 'Status', accessor: (row) => getStatusBadge(row.status), }, { header: 'Completed At', accessor: (row) => row.completed_at ? formatDate(row.completed_at) : '-', }, { header: 'Actions', accessor: (row) => (
{row.status !== 'completed' && ( )}
), }, ]} /> ) : (

No driver stages found.

)} setDeleteDialog({ open, stage: null })} onConfirm={confirmDelete} title="Delete Driver Stage" description={`Are you sure you want to delete this driver stage? This action cannot be undone.`} />
); }