import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from '@/components/ui/alert-dialog'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { EmptyState } from '@/components/ui/empty-state'; import { Input } from '@/components/ui/input'; import { Pagination } from '@/components/ui/pagination'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import AppLayout from '@/layouts/app-layout'; import { type BreadcrumbItem } from '@/types'; import { Head, Link, usePage } from '@inertiajs/react'; import { PencilIcon, PlusIcon, Trash2Icon } from 'lucide-react'; import { useEffect, useState } from 'react'; import { Toaster, toast } from 'sonner'; interface Transaction { id: string; invoice_number: string; registration_number: string; patient_name: string; insurance_name: string | null; cashier_name: string | null; transaction_datetime: string; payment_datetime: string | null; grand_total: string; paid_amount: string; insurance_covered_amount: string; patient_responsibility: string; payment_method: string; status: string; created_at: string; } interface PageProps { transactions: { data: Transaction[]; links: Array<{ url: string | null; label: string; active: boolean; }>; }; status?: string; } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Transaksi', href: '/transactions' }, ]; export default function TransactionIndex() { const { transactions, status } = usePage().props; const [searchTerm, setSearchTerm] = useState(''); const [filteredTransactions, setFilteredTransactions] = useState(transactions.data); useEffect(() => { if (status) { toast.success(status); } }, [status]); useEffect(() => { const results = transactions.data.filter((transaction) => Object.values(transaction).some((value) => value && value.toString().toLowerCase().includes(searchTerm.toLowerCase())), ); setFilteredTransactions(results); }, [searchTerm, transactions.data]); const getPaymentMethodBadgeVariant = (method: string) => { switch (method) { case 'cash': return 'default'; case 'credit_card': return 'success'; case 'debit_card': return 'info'; case 'insurance': return 'warning'; default: return 'outline'; } }; const getStatusBadgeVariant = (status: string) => { switch (status) { case 'completed': return 'default'; case 'pending': return 'warning'; case 'cancelled': return 'destructive'; default: return 'outline'; } }; return (

Data Transaksi

setSearchTerm(e.target.value)} />
{filteredTransactions.length === 0 ? ( Tambah Transaksi } /> ) : ( <>
No. Invoice No. Registrasi Nama Pasien Asuransi Petugas Kasir Tanggal Transaksi Status Aksi {filteredTransactions.map((transaction) => ( {transaction.invoice_number} {transaction.registration_number} {transaction.patient_name} {transaction.insurance_name || 'Tanpa Asuransi'} {transaction.cashier_name || 'N/A'} {new Date(transaction.transaction_datetime).toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit', })} {transaction.status.replace('_', ' ')} Apakah Anda yakin? Data transaksi akan dihapus permanen. Tindakan ini tidak dapat dibatalkan. Batal Hapus ))}
{transactions.links.length > 3 && (
)} )}
); }