88 lines
2.5 KiB
TypeScript
88 lines
2.5 KiB
TypeScript
import { h, type FunctionComponent } from 'preact'
|
|
import { useRoute } from 'preact-iso'
|
|
import rek from 'rek'
|
|
import type { Entry, 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 EntryPage: FunctionComponent = () => {
|
|
const route = useRoute()
|
|
const entry = usePromise<Entry & { amount: number; journal: string; transactions?: Transaction[] }>(() =>
|
|
rek(`/api/entries/${route.params.id}`),
|
|
)
|
|
|
|
return (
|
|
<section>
|
|
<Head>
|
|
<title>
|
|
{' '}
|
|
: Verifikat {entry.journal} {entry.number}{' '}
|
|
</title>
|
|
</Head>
|
|
<h1>
|
|
Verifikat {entry.journal} {entry.number}
|
|
</h1>
|
|
|
|
<table className='grid'>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Journal</th>
|
|
<th>Nummer</th>
|
|
<th>Bokföringsdatum</th>
|
|
<th>Transaktionsdatum</th>
|
|
<th>Belopp</th>
|
|
<th>Beskrivning</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<a href={`/entries/${entry.id}`}>{entry.id}</a>
|
|
</td>
|
|
<td>{entry.journal}</td>
|
|
<td>{entry.number}</td>
|
|
<td>{(entry.entryDate as unknown as string)?.slice(0, 10)}</td>
|
|
<td>{(entry.transactionDate as unknown as string)?.slice(0, 10)}</td>
|
|
<td className='tar'>{entry.amount}</td>
|
|
<td>{entry.description}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h2>Transaktioner</h2>
|
|
<table className='grid'>
|
|
<thead>
|
|
<tr>
|
|
<th>Konto</th>
|
|
<th>Debit</th>
|
|
<th>Kredit</th>
|
|
<th>Beskrivning</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{entry?.transactions?.map((transaction) => (
|
|
<tr>
|
|
<td>{transaction.accountNumber}</td>
|
|
<td className='tar'>
|
|
{(transaction.amount as unknown as number) >= 0
|
|
? formatNumber(transaction.amount as unknown as number)
|
|
: null}
|
|
</td>
|
|
<td className='tar'>
|
|
{(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 EntryPage
|