import { h, type FunctionComponent } from 'preact' // @ts-ignore import Format from 'easy-tz/format' import { useRoute } from 'preact-iso' import rek from 'rek' import Head from './head.ts' import usePromise from '../../shared/hooks/use_promise.ts' import type { File, Invoice, Supplier } from '../../../shared/types.db.ts' import { formatPrice } from '../utils/format_number.ts' const format = Format.bind(null, null, 'YYYY.MM.DD') const InvoicesPage: FunctionComponent = () => { const route = useRoute() const [supplier, { data: invoices }, totalAmount] = usePromise< [Supplier, { data: (Invoice & { files?: File[] })[] }, number] >(() => Promise.all([ rek(`/api/suppliers/${route.params.supplier}`), rek(`/api/invoices?supplierId=${route.params.supplier}`), rek(`/api/invoices/total-amount?supplierId=${route.params.supplier}`).then( (totalAmount: { totalAmount: number }) => totalAmount.totalAmount, ), ]), ) return (

: Fakturor : {supplier?.name}

Fakturor från {supplier?.name}

Total: {formatPrice(totalAmount)}

{invoices.map((invoice) => ( ))}

ID	Fisken	PHM	Fakturadatum	Förfallodag	Nummer	Belopp	Filer
{invoice.id}	{invoice.fiskenNumber}	{invoice.phmNumber}	{format(invoice.invoiceDate)}	{invoice.dueDate && format(invoice.dueDate)}	{invoice.invoiceNumber}	{invoice.amount}	{invoice.files?.map((file) => ( {file.filename} ))}

) } export default InvoicesPage