import { h, type FunctionComponent } from 'preact' import { useCallback, useEffect, useState } from 'preact/hooks' import { useLocation } from 'preact-iso' import { isEmpty } from 'lowline' import qs from 'mini-qs' import rek from 'rek' import Head from './head.ts' import serializeForm from '../../shared/utils/serialize_form.ts' import { formatNumber } from '../utils/format_number.ts' import type { Transaction, FinancialYear } from '../../../shared/types.db.ts' const TransactionsPage: FunctionComponent = () => { const [financialYears, setFinancialYears] = useState([]) const [{ data: transactions }, setTransactions] = useState<{ data: (Transaction & { entryDescription: string })[] }>({ data: [], }) const location = useLocation() const onSubmit = useCallback((e: SubmitEvent) => { e.preventDefault() const values = serializeForm(e.target as HTMLFormElement) as Record const search = !isEmpty(values) ? '?' + qs.stringify(values) : '' location.route(`/transactions${search}`) }, []) useEffect(() => { rek('/api/financial-years').then(setFinancialYears) }, []) useEffect(() => { const search = location.url.split('?')[1] || '' rek(`/api/transactions${search ? '?' + search : ''}`).then(setTransactions) }, [location.url]) return (

: Transactions

Transactions

{transactions.map((transaction) => ( ))}

Date	Account	Debit	Credit	Description	Entry	Entry Description	Invoice
{(transaction.transactionDate as unknown as string)?.slice(0, 10)}	{transaction.accountNumber}	{(transaction.amount as unknown as number) >= 0 ? formatNumber(transaction.amount as unknown as number) : null}	{(transaction.amount as unknown as number) < 0 ? formatNumber(Math.abs(transaction.amount as unknown as number)) : null}	{transaction.description}	{transaction.entryId}	{transaction.entryDescription}	{transaction.invoiceId}

) } export default TransactionsPage