import { Head, router } from '@inertiajs/react'; import { Ban, Plus, Trash2 } from 'lucide-react'; import { useMemo, useState } from 'react'; import { toast } from 'sonner'; import OrderController from '@/actions/App/Http/Controllers/OrderController'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from '@/components/ui/dialog'; 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'; import { Textarea } from '@/components/ui/textarea'; const priceFormatter = new Intl.NumberFormat('fr-FR'); function formatFcfa(amount: number): string { return `${priceFormatter.format(amount)} FCFA`; } type OrderItem = { id: number; quantity: number; unit_price: number; notes: string | null; product: { id: number; name: string }; }; type Order = { id: number; type: 'dine_in' | 'takeaway' | 'phone'; status: | 'pending' | 'preparing' | 'ready' | 'served' | 'completed' | 'cancelled'; total: number; customer_phone: string | null; notes: string | null; table: { id: number; number: string } | null; server: { id: number; name: string }; items: OrderItem[]; created_at: string; }; type ProductOption = { id: number; name: string; price: number; }; type TableOption = { id: number; number: string; status: string; }; type Props = { orders: Order[]; products: ProductOption[]; tables: TableOption[]; }; const typeLabels: Record = { dine_in: 'Sur place', takeaway: 'À emporter', phone: 'Téléphone / WhatsApp', }; const statusLabels: Record = { pending: 'En attente', preparing: 'En préparation', ready: 'Prête', served: 'Servie', completed: 'Terminée', cancelled: 'Annulée', }; const statusBadgeVariant: Record< Order['status'], 'default' | 'secondary' | 'outline' | 'destructive' > = { pending: 'outline', preparing: 'secondary', ready: 'default', served: 'default', completed: 'secondary', cancelled: 'destructive', }; export default function OrdersIndex({ orders, products, tables }: Props) { const [creating, setCreating] = useState(false); const cancel = (order: Order) => { router.post( OrderController.cancel.url(order.id), {}, { preserveScroll: true, onError: (errors) => toast.error( errors.domain ?? "Impossible d'annuler cette commande.", ), }, ); }; const complete = (order: Order) => { router.post( OrderController.complete.url(order.id), {}, { preserveScroll: true, onError: (errors) => toast.error(errors.domain ?? 'Action impossible.'), }, ); }; return ( <>

Commandes

Suivez les commandes en cours et leur préparation.

{ setCreating(false); router.reload({ only: ['orders'] }); }} />
{orders.length === 0 ? (

Aucune commande pour le moment.

) : (
{orders.map((order) => (
Commande #{order.id}

{typeLabels[order.type]} {order.table && ` · Table ${order.table.number}`} {' · '} {order.server.name}

{statusLabels[order.status]}
    {order.items.map((item) => (
  • {item.quantity}×{' '} {item.product.name} {formatFcfa( item.quantity * item.unit_price, )}
    • ))}
Total {formatFcfa(order.total)}
{order.status === 'served' && ( )} {!['completed', 'cancelled'].includes( order.status, ) && ( )}
))}
)}
); } type CartLine = { productId: number; quantity: number; }; function NewOrderForm({ products, tables, onCreated, }: { products: ProductOption[]; tables: TableOption[]; onCreated: () => void; }) { const [type, setType] = useState('takeaway'); const [tableId, setTableId] = useState(''); const [customerPhone, setCustomerPhone] = useState(''); const [notes, setNotes] = useState(''); const [cart, setCart] = useState([]); const [processing, setProcessing] = useState(false); const [errors, setErrors] = useState>({}); const freeTables = tables.filter((t) => t.status === 'free'); const total = useMemo(() => { return cart.reduce((sum, line) => { const product = products.find((p) => p.id === line.productId); return sum + (product?.price ?? 0) * line.quantity; }, 0); }, [cart, products]); const addLine = () => { const firstAvailable = products.find( (p) => !cart.some((line) => line.productId === p.id), ); if (!firstAvailable) return; setCart([...cart, { productId: firstAvailable.id, quantity: 1 }]); }; const updateLine = (index: number, patch: Partial) => { setCart( cart.map((line, i) => (i === index ? { ...line, ...patch } : line)), ); }; const removeLine = (index: number) => { setCart(cart.filter((_, i) => i !== index)); }; const submit = () => { setProcessing(true); setErrors({}); router.post( OrderController.store.url(), { type, restaurant_table_id: type === 'dine_in' ? tableId : null, customer_phone: customerPhone || null, notes: notes || null, items: cart.map((line) => ({ product_id: line.productId, quantity: line.quantity, })), }, { preserveScroll: true, onSuccess: () => onCreated(), onError: (validationErrors) => { setErrors(validationErrors as Record); if (validationErrors.domain) { toast.error(validationErrors.domain); } }, onFinish: () => setProcessing(false), }, ); }; return ( <> Nouvelle commande Composez la commande à transmettre en cuisine ou au bar.
{errors.type && (

{errors.type}

)}
{type === 'dine_in' && (
{errors.restaurant_table_id && (

{errors.restaurant_table_id}

)}
)} {type === 'phone' && (
setCustomerPhone(e.target.value)} placeholder="Ex : 07 00 00 00 00" />
)}
{cart.length === 0 && (

Ajoutez au moins un article.

)} {cart.map((line, index) => (
updateLine(index, { quantity: Number(e.target.value), }) } className="w-20" />
))} {errors.items && (

{errors.items}

)}