104 lines
2.7 KiB
TypeScript
104 lines
2.7 KiB
TypeScript
import { h, type FunctionComponent } from 'preact'
|
|
import { useRoute } from 'preact-iso'
|
|
import rek from 'rek'
|
|
import type { Invoice } from '../../../shared/types.ts'
|
|
import usePromise from '../../shared/hooks/use_promise.ts'
|
|
import { formatNumber } from '../utils/format_number.ts'
|
|
import Head from './head.ts'
|
|
|
|
const InvoicePage: FunctionComponent = () => {
|
|
const invoice = usePromise<Invoice>(() => rek(`/api/invoices/${route.params.id}`))
|
|
const route = useRoute()
|
|
|
|
return (
|
|
<section>
|
|
<Head>
|
|
<title> : Invoice : {invoice?.id}</title>
|
|
</Head>
|
|
|
|
<h1>Invoice</h1>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>what</th>
|
|
<th>who</th>
|
|
</tr>
|
|
</thead>
|
|
{invoice && (
|
|
<tbody>
|
|
<tr>
|
|
<td>ID</td>
|
|
<td>{invoice.id}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Date</td>
|
|
<td>{invoice.invoiceDate}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Due Date</td>
|
|
<td>{invoice.dueDate}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Fisken</td>
|
|
<td>{invoice.fiskenNumber}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>PHM</td>
|
|
<td>{invoice.phmNumber}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Amount</td>
|
|
<td>{invoice.amount}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Files</td>
|
|
<td>
|
|
{invoice.files?.map((file) => (
|
|
<a href={`/uploads/invoices/${file.filename}`} target='blank'>
|
|
{file.filename}
|
|
</a>
|
|
))}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ID</td>
|
|
<td>{invoice.id}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ID</td>
|
|
<td>{invoice.id}</td>
|
|
</tr>
|
|
</tbody>
|
|
)}
|
|
</table>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Entry</th>
|
|
<th>Account</th>
|
|
<th>Debit</th>
|
|
<th>Credit</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{invoice?.transactions?.map((transaction) => (
|
|
<tr>
|
|
<td>
|
|
<a href={`/entries/${transaction.entry_id}`}>{transaction.entry_id}</a>
|
|
</td>
|
|
<td>{transaction.account_number}</td>
|
|
<td>{transaction.amount >= 0 ? formatNumber(transaction.amount) : null}</td>
|
|
<td>{transaction.amount < 0 ? formatNumber(Math.abs(transaction.amount)) : null}</td>
|
|
<td>{transaction.description}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default InvoicePage
|