51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
|
/* Copyright (C) 2024 Manuel Bustillo*/
|
||
|
|
|
||
|
|
'use client'
|
||
|
|
|
||
|
|
import React, { useState } from "react"
|
||
|
|
import { Expense } from '@/app/lib/definitions';
|
||
|
|
import TableOfContents from "../components/table-of-contents";
|
||
|
|
|
||
|
|
export default function ExpensesTable() {
|
||
|
|
const [expenses, setExpenses] = useState<Array<Expense>>([]);
|
||
|
|
|
||
|
|
function loadExpenses() {
|
||
|
|
fetch("/api/expenses")
|
||
|
|
.then((response) => response.json())
|
||
|
|
.then((data) => {
|
||
|
|
setExpenses(data.map((record: any) => {
|
||
|
|
return ({
|
||
|
|
id: record.id,
|
||
|
|
name: record.name,
|
||
|
|
amount: record.amount,
|
||
|
|
pricingType: record.pricing_type
|
||
|
|
});
|
||
|
|
}));
|
||
|
|
}, (error) => {
|
||
|
|
return [];
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
expenses.length === 0 && loadExpenses();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<TableOfContents
|
||
|
|
headers={['Name', 'Amount', 'Pricing Type']}
|
||
|
|
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>
|
||
|
|
</tr>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|