import { useTranslation } from '@/hooks/use-translation'; import React, { useMemo, useState } from 'react'; import { Head, Link, router, usePage, useForm } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from '@/components/ui/dialog'; import { Label } from '@/components/ui/label'; import { Input } from '@/components/ui/input'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Textarea } from '@/components/ui/textarea'; import { Edit, Trash2, RefreshCw, Printer, CheckCircle, DollarSign } from 'lucide-react'; import { BreadcrumbItem, Invoice } from '@/types'; import { formatCurrency } from '@/lib/utils'; interface Props { invoice: Invoice; } const statusColors: Record = { draft: 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400', open: 'bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400', partial: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400', paid: 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400', overdue: 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400', cancelled: 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400', }; const statusLabels: Record = { draft: 'Draft', open: 'Open', partial: 'Partial', paid: 'Paid', overdue: 'Overdue', cancelled: 'Cancelled', }; export default function InvoicesShow({ invoice }: Readonly) { const { t } = useTranslation(); const { currency } = usePage().props as any; const [markPaidOpen, setMarkPaidOpen] = useState(false); const { data, setData, post, processing, reset } = useForm({ payment_method: 'check', amount: (parseFloat(invoice.total) - parseFloat(invoice.amount_paid)).toFixed(2), note: '', }); const breadcrumbs: BreadcrumbItem[] = useMemo(() => [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Invoices', href: '/admin/invoices' }, { title: invoice.invoice_number, href: `/admin/invoices/${invoice.id}` }, ], [invoice.id, invoice.invoice_number]); const handleDelete = () => { if (confirm(`Are you sure you want to delete invoice ${invoice.invoice_number}?`)) { router.delete(`/admin/invoices/${invoice.id}`); } }; const handleGenerateNext = () => { if (confirm('Generate the next recurring invoice now?')) { router.post(`/admin/invoices/${invoice.id}/generate-next`); } }; const handleMarkAsPaid = (e: React.FormEvent) => { e.preventDefault(); post(`/admin/invoices/${invoice.id}/mark-as-paid`, { onSuccess: () => { setMarkPaidOpen(false); reset(); }, }); }; const formatAmount = (amount: string) => { return formatCurrency(parseFloat(amount), currency); }; const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric', }); }; const getPaymentStatusClass = (status: string) => { if (status === 'completed') { return 'bg-green-50 text-green-700 border-green-300 dark:bg-green-900/20 dark:text-green-400'; } if (status === 'pending') { return 'bg-yellow-50 text-yellow-700 border-yellow-300 dark:bg-yellow-900/20 dark:text-yellow-400'; } return 'bg-gray-50 text-gray-700 border-gray-300 dark:bg-gray-900/20 dark:text-gray-400'; }; const formatPaymentMethod = (method: string) => { if (method === 'credit_card') return 'Credit Card'; if (method === 'wire_transfer') return 'Wire Transfer'; return method.charAt(0).toUpperCase() + method.slice(1); }; return (
{/* Header */}

Invoice {invoice.invoice_number}

{invoice.member?.first_name} {invoice.member?.last_name}

{invoice.recurring && ( )} {invoice.status !== 'paid' && invoice.status !== 'cancelled' && (
{t('Mark Invoice as Paid')} {t('Record a manual payment for this invoice. A payment record will be created.')}
setData('amount', e.target.value)} placeholder={t('Payment amount')} />

Remaining balance: {formatAmount((parseFloat(invoice.total) - parseFloat(invoice.amount_paid)).toString())}