import { DataTable } from '@/components/core/data-table'; import { LeadStatusDeleteDialog } from '@/components/core/lead-status-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, useMemo } from 'react'; import { ArrowUp, ArrowDown, GripVertical } from 'lucide-react'; interface LeadStatus { id: number; name: string; slug: string; description?: string; color?: string; order: number; active: boolean; created_at: string; updated_at: string; } interface LeadStatusesIndexProps { leadStatuses: LeadStatus[]; driversCounts?: Record; availableLeadStatuses?: LeadStatus[]; } export default function LeadStatusesIndex({ leadStatuses, driversCounts = {}, availableLeadStatuses = [] }: LeadStatusesIndexProps) { const [deleteDialog, setDeleteDialog] = useState<{ open: boolean; status: LeadStatus | null }>({ open: false, status: null, }); const handleDelete = (status: LeadStatus) => { setDeleteDialog({ open: true, status }); }; // Filter available lead statuses for transfer (exclude the one being deleted) const availableForTransfer = useMemo(() => { if (!deleteDialog.status) { return availableLeadStatuses; } return availableLeadStatuses.filter((ls) => ls.id !== deleteDialog.status?.id); }, [availableLeadStatuses, deleteDialog.status]); const handleToggleStatus = (id: number) => { router.post(`/drivers/lead-statuses/${id}/toggle-active`); }; const handleMoveUp = (id: number) => { router.post(`/drivers/lead-statuses/${id}/move-up`, {}, { preserveScroll: true, onSuccess: () => { router.reload({ only: ['leadStatuses'] }); }, }); }; const handleMoveDown = (id: number) => { router.post(`/drivers/lead-statuses/${id}/move-down`, {}, { preserveScroll: true, onSuccess: () => { router.reload({ only: ['leadStatuses'] }); }, }); }; return (

Lead Statuses

Manage lead statuses for tracking driver progress

{leadStatuses.length > 0 ? ( { const index = leadStatuses.findIndex((s) => s.id === row.id); return (
{row.order}
); }, }, { header: 'Name', accessor: (row) => ( {row.name} ), }, { header: 'Color', accessor: (row) => row.color ? (
{row.color}
) : ( '-' ), }, { header: 'Status', accessor: (row) => ( {row.active ? 'Active' : 'Inactive'} ), }, { header: 'Actions', accessor: (row) => (
), }, ]} /> ) : (

No lead statuses found.

)} setDeleteDialog({ open, status: null })} leadStatus={deleteDialog.status} availableLeadStatuses={availableForTransfer} driversCount={deleteDialog.status ? driversCounts[deleteDialog.status.id] || 0 : 0} />
); }