import { Head, Link } from '@inertiajs/react'; import { ArrowLeft, FileText, Paperclip, Pencil, Printer } from 'lucide-react'; import { useMemo } from 'react'; import { index as expensesIndex, show as expenseDayShow, } from '@/actions/App/Http/Controllers/ExpenseDayController'; import { ExpenseStatusBadge } from '@/components/expenses/expense-status-badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { useLanguage } from '@/contexts/language-context'; import { formatExpenseDateLongOrDash, formatExpenseDateTimeOrDash, } from '@/lib/dates'; import { expenseCategoryLabel, expensePaymentLabel, expenseTransactionActionLabel, } from '@/lib/expense-labels'; import { cn } from '@/lib/utils'; import AppLayout from '@/layouts/app-layout'; import { dashboard } from '@/routes'; function DetailItem({ label, value, emphasize = false, className }) { const isEmpty = value == null || value === '' || (typeof value === 'string' && value.trim() === ''); return (
{label}
{isEmpty ? '—' : value}
); } export default function ExpensesShow({ expense }) { const { t } = useLanguage(); const p = t.expensesPage; const breadcrumbs = useMemo( () => [ { title: t.dashboard.breadcrumb, href: dashboard() }, { title: p.breadcrumb, href: expensesIndex() }, { title: formatExpenseDateLongOrDash(expense.expense_date), href: expenseDayShow.url(expense.expense_day_id), }, { title: expense.voucher_number, href: '#' }, ], [t.dashboard.breadcrumb, p.breadcrumb, expense], ); const categoryName = expenseCategoryLabel( expense.category_slug, expense.category_name, p, ); const paymentLabel = expensePaymentLabel(expense.payment_method, p); const pageTitle = `${p.breadcrumb} · ${expense.voucher_number}`; return (

{p.breadcrumb}

{expense.voucher_number}

{formatExpenseDateLongOrDash(expense.expense_date)} {expense.created_by_name ? ` · ${p.colCreatedBy}: ${expense.created_by_name}` : null}

{!expense.is_cancelled ? ( ) : null}

{p.colAmount}

{expense.amount_afn}{' '} {p.currencyLabel}

{categoryName}

{paymentLabel}
{p.sectionDetails} {p.expenseDetailTitle}
} />
{p.sectionPayment} {p.sectionVendor}
{p.description}

{expense.description?.trim() ? expense.description : '—'}

{p.attachments} {expense.attachments?.length ? String(expense.attachments.length) : '—'} {expense.attachments?.length ? ( ) : (

—

)} {p.transactionHistory} {expense.transactions?.length ? (
{p.colAction} {p.colAmount} {p.colPerformedBy} {p.colWhen} {expense.transactions.map((row) => ( {expenseTransactionActionLabel( row.action, p, )} {row.amount_afn} {p.currencyLabel} {row.performed_by_name || '—'} {formatExpenseDateTimeOrDash( row.created_at_display ?? row.created_at, )} ))}
) : (

—

)}
); }