import { h } from 'preact' import Format from 'easy-tz/format' import { useEffect, useState } from 'preact/hooks' import { useRoute } from 'preact-iso' import rek from 'rek' import Head from './head.ts' const format = Format.bind(null, null, 'YYYY.MM.DD') const InvoicesPage = () => { const [supplier, setSupplier] = useState(null) const [invoices, setInvoices] = useState([]) const [totalAmount, setTotalAmount] = useState(null) const route = useRoute() useEffect(() => { rek(`/api/suppliers/${route.params.supplier}`).then((supplier) => setSupplier(supplier)) rek(`/api/invoices?supplier=${route.params.supplier}`).then((invoices) => setInvoices(invoices)) rek(`/api/invoices/total-amount?supplier=${route.params.supplier}`).then((totalAmount) => setTotalAmount(totalAmount.amount), ) }, [route.params.supplier]) return (

: Invoices : {supplier?.name}

Invoices for {supplier?.name}

Total: {totalAmount}

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

ID	Fisken	PHM	Invoice Date	Due Date	Number	Amount	Files
{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