import { Card, CardContent } from '@/components/ui/card'; import { Separator } from '@/components/ui/separator'; import { Table, TableBody, TableCard, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import AppLayout from '@/layouts/app-layout'; import { type BreadcrumbItem } from '@/types'; import { Expense } from '@/types/expenses'; import { Head, usePage } from '@inertiajs/react'; import { Calendar, FileText, NotebookPen, ReceiptText, ShoppingBag, User2 } from 'lucide-react'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Pengeluaran', href: route('apps.expenses.index'), }, { title: 'Detail Pengeluaran', href: '#', }, ]; interface ShowProps { expense: Expense; [key: string]: unknown; } export default function Show() { const { expense } = usePage().props; console.log(expense); return (

Detail Biaya Pengeluaran

Informasi lengkap pengeluaran operasional

No. Biaya

{expense.expensee_number}

Informasi Pengeluaran

Tanggal

{expense.date}

Kategori

{expense.expense_category.name} > {expense.expense_subcategory.name}

No. Referensi

{expense.reference_number}

Dibuat Oleh

{expense.user_created.name}

Detail Lainnya

Jumlah

Rp {expense.amount}

Deskripsi

{expense.description}

Bukti Pembayaran

{expense.file && }
Riwayat Pembayaran
No Tanggal Pembayaran Metode Pembayaran Akun Bank Jumlah Bayar {expense.expense_payments.map((payment, index) => ( {index + 1} {payment.paid_at} {payment.payment_method} {payment.bank_account ? <> {payment.bank_account?.bank_name} - {payment.bank_account?.account_name} [{payment.bank_account?.account_number}] : '-' } Rp {payment.amount} ))} Total Bayar Rp {expense.total_payment} Sisa Bayar Rp {expense.remaining_payment}
); }