import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import SearchableSelect from '@/components/ui/select-search'; import { router } from '@inertiajs/react'; import axios from 'axios'; import { Loader2, ReceiptText } from 'lucide-react'; import * as React from 'react'; import { toast } from 'sonner'; import type { LedgerRow } from './types'; interface Props { open: boolean; onOpenChange: (v: boolean) => void; row: LedgerRow; } function fmtAmount(n: number): string { return n.toLocaleString('fr-TN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); } /** * "Joindre un reçu" — lightweight traceability for a manual cash-out row. * Picks who received the cash and generates a Receipt linked to the row; the * user lands on the receipt page to print / have it signed. No per-person * ledger, no allocation workflow — the row stays a plain manual sortie. */ type Mode = 'equipier' | 'externe' | 'existant'; interface AvailableReceipt { // Index signature exigée par SearchableSelect. [key: string]: unknown; id: number; name: string; amount: number; } export function AttachReceiptDialog({ open, onOpenChange, row }: Props) { const [mode, setMode] = React.useState('equipier'); const [teamMembers, setTeamMembers] = React.useState<{ id: number; name: string }[]>([]); const [receiverId, setReceiverId] = React.useState(''); const [receiverName, setReceiverName] = React.useState(''); const [receipts, setReceipts] = React.useState([]); const [receiptId, setReceiptId] = React.useState(''); const [note, setNote] = React.useState(''); const [submitting, setSubmitting] = React.useState(false); React.useEffect(() => { if (open && teamMembers.length === 0) { axios .get<{ id: number; name: string }[]>('/fond-de-caisse/team-members') .then((res) => setTeamMembers(res.data)) .catch(() => toast.error("Impossible de charger l'équipe")); } }, [open, teamMembers.length]); // Reçus déjà existants et encore libres — chargés à la demande. React.useEffect(() => { if (open && mode === 'existant' && receipts.length === 0) { axios .get('/fond-de-caisse/available-receipts') .then((res) => setReceipts(res.data)) .catch(() => toast.error('Impossible de charger les reçus disponibles')); } }, [open, mode, receipts.length]); // Un montant différent n'est pas bloquant (acompte, arrondi), mais doit se voir. const pickedReceipt = receipts.find((r) => String(r.id) === receiptId); const amountMismatch = pickedReceipt !== undefined && Math.abs(pickedReceipt.amount - row.amount) > 0.01; /** * Radix pose `pointer-events: none` sur le tant qu'un Dialog est * ouvert et ne le retire qu'à la FERMETURE. Or cette action redirige vers * la page du reçu : le dialog est démonté par la navigation sans jamais se * fermer, et la page d'arrivée reste entièrement inerte (« je ne peux plus * rien cliquer »). Filet de sécurité : on restaure toujours au démontage. */ React.useEffect( () => () => { document.body.style.pointerEvents = ''; }, [], ); const submit = () => { if (mode === 'equipier' && !receiverId) { toast.error("Choisissez qui a reçu l'argent."); return; } if (mode === 'externe' && receiverName.trim() === '') { toast.error('Saisissez le nom de la personne qui a reçu l\'argent.'); return; } if (mode === 'existant' && !receiptId) { toast.error('Choisissez le reçu à rattacher.'); return; } setSubmitting(true); // Fermé AVANT la navigation, pas dans onSuccess : à ce moment-là la // redirection a déjà eu lieu et le nettoyage de Radix ne tourne plus. onOpenChange(false); router.post( route('fond-de-caisse.attach-receipt', { id: row.id }), { receipt_id: mode === 'existant' ? Number(receiptId) : undefined, receiver_user_id: mode === 'equipier' ? Number(receiverId) : undefined, receiver_name: mode === 'externe' ? receiverName.trim() : undefined, note: note || undefined, }, { preserveScroll: true, onFinish: () => setSubmitting(false), }, ); }; return ( ); }