import { h } 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' const TransactionsPage = () => { const [financialYears, setFinancialYears] = useState([]) const [transactions, setTransactions] = useState([]) const location = useLocation() const onSubmit = useCallback((e: SubmitEvent) => { e.preventDefault() const values = serializeForm(e.target as HTMLFormElement) const search = !isEmpty(values) ? '?' + qs.stringify(values) : '' location.route(`/transactions${search}`) }, []) useEffect(() => { rek('/api/financial-years').then((financialYears) => { setFinancialYears(financialYears) }) }, []) useEffect(() => { const search = location.url.split('?')[1] || '' rek(`/api/transactions${search ? '?' + search : ''}`).then((transactions) => { setTransactions(transactions) }) }, [location.url]) return (

: Transactions

Transactions

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

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

) } export default TransactionsPage