import { Form, Head, router } from '@inertiajs/react'; import { ArrowRightLeft, CircleCheck, Combine, Plus, Trash2, Users, } from 'lucide-react'; import { useEffect, useState } from 'react'; import { toast } from 'sonner'; import TableController from '@/actions/App/Http/Controllers/TableController'; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '@/components/ui/alert-dialog'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from '@/components/ui/dialog'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import InputError from '@/components/input-error'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import SubmitSpinner from '@/components/submit-spinner'; type Table = { id: number; number: string; capacity: number; status: 'free' | 'occupied' | 'reserved'; occupied_since: string | null; table_group_id: number | null; }; type Props = { tables: Table[]; }; const statusLabels: Record = { free: 'Libre', occupied: 'Occupée', reserved: 'Réservée', }; const statusBadgeVariant: Record< Table['status'], 'default' | 'secondary' | 'outline' > = { free: 'secondary', occupied: 'default', reserved: 'outline', }; const statusCardClass: Record = { free: 'border-border', occupied: 'border-primary/40 bg-primary/5', reserved: 'border-amber-400/50 bg-amber-50 dark:bg-amber-950/20', }; function useOccupationDuration(occupiedSince: string | null): string | null { const [now, setNow] = useState(() => Date.now()); useEffect(() => { if (!occupiedSince) return; const interval = setInterval(() => setNow(Date.now()), 30_000); return () => clearInterval(interval); }, [occupiedSince]); if (!occupiedSince) return null; const minutes = Math.max( 0, Math.round((now - new Date(occupiedSince).getTime()) / 60_000), ); if (minutes < 60) return `${minutes} min`; return `${Math.floor(minutes / 60)} h ${minutes % 60} min`; } export default function TablesIndex({ tables }: Props) { const [creating, setCreating] = useState(false); const [transferring, setTransferring] = useState(null); const [merging, setMerging] = useState
(null); const [deleting, setDeleting] = useState
(null); const freeTables = tables.filter((t) => t.status === 'free'); const runAction = (url: string) => { router.post( url, {}, { preserveScroll: true, onError: (errors) => toast.error(errors.domain ?? 'Action impossible.'), }, ); }; return ( <>

Tables

Vue d'ensemble du plan de salle de votre maquis.

{ setCreating(false); router.reload({ only: ['tables'] }); }} resetOnSuccess > {({ processing, errors }) => ( <> Nouvelle table Ajoutez une table à votre plan de salle.
)}
{tables.length === 0 ? (

Aucune table pour le moment.

) : (
{tables.map((table) => ( runAction( TableController.occupy.url(table.id), ) } onReserve={() => runAction( TableController.reserve.url(table.id), ) } onFree={() => runAction( TableController.free.url(table.id), ) } onTransfer={() => setTransferring(table)} onMerge={() => setMerging(table)} onDelete={() => setDeleting(table)} /> ))}
)}
!open && setTransferring(null)} > {transferring && (
{ setTransferring(null); router.reload({ only: ['tables'] }); }} > {({ processing, errors }) => ( <> Transférer la table{' '} {transferring.number} Déplacez l'occupation vers une table libre.
)} )} !open && setMerging(null)} > {merging && (
{ setMerging(null); router.reload({ only: ['tables'] }); }} > {({ processing, errors }) => ( <> Fusionner avec la table{' '} {merging.number} Sélectionnez une ou plusieurs tables libres à fusionner avec celle-ci.
{freeTables .filter((t) => t.id !== merging.id) .map((t) => ( ))}
)} )} !open && setDeleting(null)} > Supprimer la table {deleting?.number} ? Cette action est irréversible. La table ne peut être supprimée que si elle est libre. Annuler { if (!deleting) return; router.delete( TableController.destroy.url(deleting.id), { onSuccess: () => setDeleting(null), onError: (errors) => { setDeleting(null); toast.error( errors.domain ?? 'Impossible de supprimer cette table.', ); }, preserveScroll: true, }, ); }} > Supprimer ); } function TableCard({ table, onOccupy, onReserve, onFree, onTransfer, onMerge, onDelete, }: { table: Table; onOccupy: () => void; onReserve: () => void; onFree: () => void; onTransfer: () => void; onMerge: () => void; onDelete: () => void; }) { const duration = useOccupationDuration(table.occupied_since); return (
Table {table.number} {statusLabels[table.status]}
{table.capacity} couverts
{duration && (
Occupée depuis {duration}
)} {table.table_group_id && (
Fusionnée
)} {table.status === 'free' && ( <> Marquer occupée Réserver Supprimer )} {table.status === 'occupied' && ( <> Libérer Transférer Fusionner )} {table.status === 'reserved' && ( <> Marquer occupée Annuler la réservation )} ); }