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 } from 'react'; import { ArrowUp, ArrowDown } from 'lucide-react'; import { usePermissions } from '@/hooks/use-permissions'; interface RidingCompany { id: number; name: string; } interface LeadStage { id: number; name: string; slug: string; description?: string; color?: string; order: number; active: boolean; requires_all_documents_approved: boolean; riding_company?: RidingCompany; ridingCompanies?: RidingCompany[]; created_at: string; updated_at: string; } interface LeadStagesIndexProps { leadStages: LeadStage[]; } export default function LeadStagesIndex({ leadStages }: LeadStagesIndexProps) { const { can } = usePermissions(); const [deleteDialog, setDeleteDialog] = useState<{ open: boolean; stage: LeadStage | null }>({ open: false, stage: null, }); const handleDelete = (stage: LeadStage) => { setDeleteDialog({ open: true, stage }); }; const confirmDelete = () => { if (deleteDialog.stage) { router.delete(`/drivers/lead-stages/${deleteDialog.stage.id}`); } }; const handleToggleStatus = (id: number) => { router.post(`/drivers/lead-stages/${id}/toggle-active`); }; const handleMoveUp = (id: number) => { router.post(`/drivers/lead-stages/${id}/move-up`, {}, { preserveScroll: true, onSuccess: () => { router.reload({ only: ['leadStages'] }); }, }); }; const handleMoveDown = (id: number) => { router.post(`/drivers/lead-stages/${id}/move-down`, {}, { preserveScroll: true, onSuccess: () => { router.reload({ only: ['leadStages'] }); }, }); }; return (

Lead Stages

Manage lead stages for tracking driver progress by riding company

{can('drivers', 'leadstages', 'export') && ( )} {can('drivers', 'leadstages', 'import') && ( )} {can('drivers', 'leadstages', 'create') && ( )}
{leadStages.length > 0 ? ( { const index = leadStages.findIndex((s) => s.id === row.id); return (
{row.order}
); }, }, { header: 'Name', accessor: (row) => ( {row.name} ), }, { header: 'Riding Companies', accessor: (row) => { if (row.ridingCompanies && row.ridingCompanies.length > 0) { return row.ridingCompanies.map(rc => rc.name).join(', '); } return row.riding_company?.name || '-'; }, }, { header: 'Color', accessor: (row) => row.color ? (
{row.color}
) : ( '-' ), }, { header: 'Requires Documents', accessor: (row) => ( {row.requires_all_documents_approved ? 'Yes' : 'No'} ), }, { header: 'Status', accessor: (row) => ( {row.active ? 'Active' : 'Inactive'} ), }, { header: 'Actions', accessor: (row) => (
{can('drivers', 'leadstages', 'read') && ( )} {can('drivers', 'leadstages', 'update') && ( <> )} {can('drivers', 'leadstages', 'delete') && ( )}
), }, ]} /> ) : (

No lead stages found.

{can('drivers', 'leadstages', 'create') && ( )}
)} setDeleteDialog({ open, stage: null })} onConfirm={confirmDelete} title="Delete Lead Stage" description={`Are you sure you want to delete "${deleteDialog.stage?.name}"? This action cannot be undone.`} />
); }