import { Head, router } from '@inertiajs/react'; import { Lock, Unlock, Wallet } from 'lucide-react'; import { useEffect, useState } from 'react'; import { toast } from 'sonner'; import CashierController from '@/actions/App/Http/Controllers/CashierController'; 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'; const priceFormatter = new Intl.NumberFormat('fr-FR'); function formatFcfa(amount: number): string { return `${priceFormatter.format(amount)} FCFA`; } type PaymentMethod = | 'cash' | 'card' | 'orange_money' | 'mtn_momo' | 'moov_money' | 'wave'; const methodLabels: Record = { cash: 'Espèces', card: 'Carte bancaire', orange_money: 'Orange Money', mtn_momo: 'MTN MoMo', moov_money: 'Moov Money', wave: 'Wave', }; type Payment = { id: number; method: PaymentMethod; amount: number; }; type Session = { id: number; opening_amount: number; status: 'open' | 'closed'; opened_at: string; payments: Payment[]; }; type OrderItem = { id: number; quantity: number; unit_price: number; product: { id: number; name: string }; }; type PendingOrder = { id: number; type: 'dine_in' | 'takeaway' | 'phone'; status: string; total: number; table: { id: number; number: string } | null; items: OrderItem[]; payments: Payment[]; }; type Props = { session: Session | null; pendingOrders: PendingOrder[]; }; const typeLabels: Record = { dine_in: 'Sur place', takeaway: 'À emporter', phone: 'Téléphone / WhatsApp', }; function amountPaid(order: PendingOrder): number { return order.payments.reduce((sum, p) => sum + p.amount, 0); } function balanceDue(order: PendingOrder): number { return Math.max(0, order.total - amountPaid(order)); } export default function CashierIndex({ session, pendingOrders }: Props) { const [opening, setOpening] = useState(false); const [closing, setClosing] = useState(false); const [payingOrder, setPayingOrder] = useState(null); return ( <>

Caisse

Encaissement des commandes et suivi de la session de caisse.

{session ? ( ) : ( )}
Session de caisse {session ? (

Fond de caisse initial

{formatFcfa(session.opening_amount)}

Encaissé cette session

{formatFcfa( session.payments.reduce( (sum, p) => sum + p.amount, 0, ), )}

Statut

Ouverte
) : (

Aucune session de caisse ouverte. Ouvrez une session pour commencer à encaisser.

)}

Commandes en attente d'encaissement

{pendingOrders.length === 0 ? (

Aucune commande en attente de paiement.

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

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

{amountPaid(order) > 0 && ( Partiellement payée )}
    {order.items.map((item) => (
  • {item.quantity}×{' '} {item.product.name} {formatFcfa( item.quantity * item.unit_price, )}
    • ))}
Total {formatFcfa(order.total)}
{amountPaid(order) > 0 && (
Déjà payé {formatFcfa( amountPaid(order), )}
)}
Reste à payer {formatFcfa( balanceDue(order), )}
))}
)}
{session && ( p.method === 'cash') .reduce((sum, p) => sum + p.amount, 0) } /> )} !open && setPayingOrder(null)} /> ); } function OpenSessionDialog({ open, onOpenChange, }: { open: boolean; onOpenChange: (open: boolean) => void; }) { const [openingAmount, setOpeningAmount] = useState('0'); const [processing, setProcessing] = useState(false); const submit = () => { setProcessing(true); router.post( CashierController.openSession.url(), { opening_amount: Number(openingAmount) }, { preserveScroll: true, onSuccess: () => onOpenChange(false), onError: (errors) => toast.error( errors.domain ?? "Impossible d'ouvrir la session.", ), onFinish: () => setProcessing(false), }, ); }; return ( Ouvrir une session de caisse Indiquez le fond de caisse initial en espèces.
setOpeningAmount(e.target.value)} />
); } function CloseSessionDialog({ open, onOpenChange, sessionId, expectedHint, }: { open: boolean; onOpenChange: (open: boolean) => void; sessionId: number; expectedHint: number; }) { const [closingAmount, setClosingAmount] = useState(''); const [processing, setProcessing] = useState(false); const submit = () => { setProcessing(true); router.post( CashierController.closeSession.url(sessionId), { closing_amount: Number(closingAmount) }, { preserveScroll: true, onSuccess: () => onOpenChange(false), onError: (errors) => toast.error( errors.domain ?? 'Impossible de clôturer la session.', ), onFinish: () => setProcessing(false), }, ); }; return ( Clôturer la session de caisse Comptez les espèces en caisse et saisissez le montant constaté. Montant espèces attendu :{' '} {formatFcfa(expectedHint)}.
setClosingAmount(e.target.value)} />
); } function CollectPaymentDialog({ order, onOpenChange, }: { order: PendingOrder | null; onOpenChange: (open: boolean) => void; }) { const [method, setMethod] = useState('cash'); const [amount, setAmount] = useState(''); const [processing, setProcessing] = useState(false); useEffect(() => { if (order) { setAmount(String(balanceDue(order))); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [order?.id]); const submit = () => { if (!order) return; setProcessing(true); router.post( CashierController.collectPayment.url(order.id), { method, amount: Number(amount) }, { preserveScroll: true, onSuccess: () => { onOpenChange(false); setAmount(''); setMethod('cash'); }, onError: (errors) => toast.error( errors.domain ?? "Impossible d'encaisser ce paiement.", ), onFinish: () => setProcessing(false), }, ); }; return ( { if (!open) setAmount(''); onOpenChange(open); }} > Encaisser la commande #{order?.id} {order && `Reste à payer : ${formatFcfa(balanceDue(order))}.`}
setAmount(e.target.value)} />
); }