46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
/* Copyright (C) 2024 Manuel Bustillo*/
|
|
|
|
'use client'
|
|
|
|
import { AbstractApi } from '@/app/api/abstract-api';
|
|
import { Expense, ExpenseSerializer } from '@/app/lib/expense';
|
|
import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
|
|
import TableOfContents from "../components/table-of-contents";
|
|
|
|
|
|
export default function ExpensesTable({ expenses, onUpdate, onEdit }: {
|
|
expenses: Expense[],
|
|
onUpdate: () => void,
|
|
onEdit: (expense: Expense) => void,
|
|
}) {
|
|
|
|
const api = new AbstractApi<Expense>();
|
|
const serializer = new ExpenseSerializer();
|
|
|
|
return (
|
|
<TableOfContents
|
|
headers={['Name', 'Amount (€)', 'Pricing Type', 'Actions']}
|
|
caption='Expenses'
|
|
elements={expenses}
|
|
rowRender={(expense) => (
|
|
<tr key={expense.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
|
|
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
|
{expense.name}
|
|
</th>
|
|
<td className="px-6 py-4">
|
|
{expense.amount}
|
|
</td>
|
|
<td>
|
|
{expense.pricingType}
|
|
</td>
|
|
<td>
|
|
<div className="flex flex-row items-center">
|
|
<TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, expense, onUpdate) }} />
|
|
<PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(expense)} />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
/>
|
|
);
|
|
} |