import { Button } from '@/components/ui/button'; import { useTranslation } from '@/hooks/use-translation'; import { Head, Link, router, usePage } from '@inertiajs/react'; import { ArrowLeft, ExternalLink, Printer } from 'lucide-react'; interface Statement { reservation_id: number; contract_id: string | null; client: string; property: string; property_public_name: string; check_in: string | null; check_out: string | null; currency: string; total_to_pay: string; already_paid: string; left_to_pay: string; } interface PaymentRow { id: number; date: string; amount: string; currency: string; original_amount?: string | null; original_currency?: string | null; payment_mode: string; remark: string | null; collected_by: string; signed_by: string | null; signature_status: string | null; receipt_encrypted_id: string | null; } interface Props { statement: Statement; payments: PaymentRow[]; isAuthenticated: boolean; encryptedId: string; stampUrl: string; companyInfo: { companyName: string; matricule: string; ville: string; address: string; zip_code: string }; } const modeLabel = (m: string, locale: string) => { const fr: Record = { CASH: 'Espèces', CHÈQUE: 'Chèque', VIREMENT: 'Virement', PAYMEE: 'Paymee', TPE: 'TPE' }; const en: Record = { CASH: 'Cash', CHÈQUE: 'Cheque', VIREMENT: 'Transfer', PAYMEE: 'Paymee', TPE: 'POS' }; return (locale === 'en' ? en : fr)[m] ?? m; }; const signatureChip = (status: string | null, locale: string) => { if (status === 'signed') { return ( {locale === 'en' ? 'Signed' : 'Signé'} ); } if (status === 'pending') { return ( {locale === 'en' ? 'Pending' : 'En attente'} ); } return —; }; export default function ReleveStatement() { const { statement, payments, isAuthenticated, stampUrl, companyInfo } = usePage().props; const { locale } = useTranslation(); const fr = locale !== 'en'; return ( <> {/* Print-only styles: hide app chrome */} {isAuthenticated && (
)}
{/* Logo */}
The Landlord
{/* Title */}

{fr ? 'Relevé des paiements' : 'Payment statement'}

{fr ? 'Récapitulatif des sommes encaissées pour la réservation' : 'Summary of amounts collected for the reservation'}

{/* Reservation block */}
{fr ? 'Logement' : 'Property'}: {statement.property || '—'} {statement.property_public_name && statement.property_public_name !== statement.property && ( ({statement.property_public_name}) )}
{fr ? 'Client' : 'Client'}: {statement.client}
{(statement.check_in || statement.check_out) && (
{fr ? 'Séjour' : 'Stay'}: {statement.check_in ?? '?'} → {statement.check_out ?? '?'}
)} {statement.contract_id && (
{fr ? 'N° de contrat' : 'Contract #'}: {statement.contract_id}
)}
{/* Totals */}
{fr ? 'Total à payer' : 'Total to pay'} {statement.total_to_pay} {statement.currency}
{fr ? 'Déjà encaissé' : 'Already collected'} {statement.already_paid} {statement.currency}
{fr ? 'Reste à encaisser' : 'Balance due'} 0 ? 'text-amber-700' : 'text-green-700'}> {statement.left_to_pay} {statement.currency}
{/* Payments table */}

{fr ? 'Détail des encaissements' : 'Payment breakdown'}

{payments.length === 0 ? (

{fr ? 'Aucun paiement enregistré pour cette réservation.' : 'No payment recorded for this reservation yet.'}

) : (
{payments.map((p) => ( ))}
{fr ? 'Date' : 'Date'} {fr ? 'Montant' : 'Amount'} {fr ? 'Mode' : 'Method'} {fr ? 'Reçu par' : 'Collected by'} {fr ? 'Signé par' : 'Signed by'} {fr ? 'Note' : 'Note'} {fr ? 'Statut' : 'Status'} {fr ? 'Reçu' : 'Receipt'}
{p.date} {p.amount} {p.currency} {modeLabel(p.payment_mode, locale)} {p.collected_by} {p.signed_by ?? '—'} {p.remark ?? '—'} {signatureChip(p.signature_status, locale)} {p.receipt_encrypted_id ? ( {fr ? 'Voir' : 'View'} ) : ( — )}
{fr ? 'Total' : 'Total'} {statement.already_paid}{' '} {statement.currency}
)} {/* Mandataire signature & stamp */}

{(fr ? 'Pour ' : 'For ') + (companyInfo?.companyName || 'TheLandlord')}

{fr

{fr ? 'Signature et cachet' : 'Signature and stamp'}

{companyInfo?.matricule && (

M.F: {companyInfo.matricule}

)}
{/* Footer */}

The Landlord

Code T.V.A : 1631526MA000

Email : contact@thelandlord.tn

Téléphone : +216 58 59 59 00

); }