114 lines
3.0 KiB
TypeScript
114 lines
3.0 KiB
TypeScript
import { h, type FunctionComponent } from 'preact'
|
|
import { useRoute } from 'preact-iso'
|
|
import rek from 'rek'
|
|
import type { File, Invoice, Transaction } from '../../../shared/types.db.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 & { files?: File[]; transactions?: Transaction[] }>(() =>
|
|
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.entryId}`}>{transaction.entryId}</a>
|
|
</td>
|
|
<td>{transaction.accountNumber}</td>
|
|
<td>
|
|
{(transaction.amount as unknown as number) >= 0
|
|
? formatNumber(transaction.amount as unknown as number)
|
|
: null}
|
|
</td>
|
|
<td>
|
|
{(transaction.amount as unknown as number) < 0
|
|
? formatNumber(Math.abs(transaction.amount as unknown as number))
|
|
: null}
|
|
</td>
|
|
<td>{transaction.description}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default InvoicePage
|