import React from 'react'; import AppLayout from '@/layouts/app-layout' import hasAnyPermission from '@/utils/has-permissions'; import PagePagination from '@/components/page-pagination'; import { type BreadcrumbItem } from '@/types'; import { Head, usePage, useForm, Link } from '@inertiajs/react'; import { Table, TableBody, TableCard, TableCell, TableEmpty, TableHead, TableHeader, TableRow, TableFilter } from '@/components/ui/table'; import { CheckCircle, CirclePause, FileText, PlusCircle, XCircle } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { ActionButton } from '@/components/action-button'; import { ModalDelete } from '@/components/modal-delete'; import { Expense, ExpenseLink } from '@/types/expenses'; import Heading from '@/components/heading'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Pengeluaran', href: route('apps.expenses.index'), }, ]; interface IndexProps { expenses: { data: Expense[], links: ExpenseLink[], }; perPage: number; currentPage: number; [key: string]: unknown; } export default function Index() { const { expenses, perPage, currentPage } = usePage().props; const { data, setData } = useForm({ id: '', }) const [deleteModal, setDeleteModal] = React.useState(false); const handleModalDelete = (expense: Expense) => { setDeleteModal(true); setData(prevData => ({ ...prevData, id: expense.id, })) } const statusPayment = (status: string): React.ReactNode => { switch (status) { case 'paid': return
Lunas
case 'partial': return
Belum Lunas
case 'unpaid': return
Belum Dibayar
default: return 'Status Tidak Dikenal'; } }; return (
{hasAnyPermission(['expenses-create']) && }
No No Biaya No Referensi Kategori Subkategori Tanggal Jumlah Status Pengeluaran Aksi {expenses.data.length === 0 ? : expenses.data.map((expense, index) => ( {index + 1} {expense.expensee_number}
{expense.file != null && ( ) } {expense.reference_number}
{expense.expense_category.name} {expense.expense_subcategory.name} {expense.date} Rp {expense.amount} {statusPayment(expense.payment_status)}
{(hasAnyPermission(['expenses-update']) || hasAnyPermission(['expenses-delete'])) && handleModalDelete(expense)} /> }
)) }
) }