BalancesPage.tsx
2.19 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { inventory } from '@/api/client'
import type { Location, StockBalance } from '@/types/api'
import { PageHeader } from '@/components/PageHeader'
import { Loading } from '@/components/Loading'
import { ErrorBox } from '@/components/ErrorBox'
import { DataTable, type Column } from '@/components/DataTable'
import { useT } from '@/i18n/LocaleContext'
interface Row extends Record<string, unknown> {
id: string
itemCode: string
locationCode: string
quantity: string | number
}
export function BalancesPage() {
const t = useT()
const [rows, setRows] = useState<Row[]>([])
const [error, setError] = useState<Error | null>(null)
const [loading, setLoading] = useState(true)
useEffect(() => {
Promise.all([inventory.listBalances(), inventory.listLocations()])
.then(([balances, locs]: [StockBalance[], Location[]]) => {
const byId = new Map(locs.map((l) => [l.id, l.code]))
setRows(
balances.map((b) => ({
id: b.id,
itemCode: b.itemCode,
locationCode: byId.get(b.locationId) ?? b.locationId,
quantity: b.quantity,
})),
)
})
.catch((e: unknown) => setError(e instanceof Error ? e : new Error(String(e))))
.finally(() => setLoading(false))
}, [])
const columns: Column<Row>[] = [
{ header: t('label.item'), key: 'itemCode', render: (r) => <span className="font-mono">{r.itemCode}</span> },
{
header: t('label.location'),
key: 'locationCode',
render: (r) => <span className="font-mono">{r.locationCode}</span>,
},
{
header: t('label.quantity'),
key: 'quantity',
render: (r) => <span className="font-mono tabular-nums">{String(r.quantity)}</span>,
},
]
return (
<div>
<PageHeader
title={t('page.balances.title')}
subtitle={t('page.balances.subtitle')}
actions={<Link to="/balances/adjust" className="btn-primary">{t('action.adjustStock')}</Link>}
/>
{loading && <Loading />}
{error && <ErrorBox error={error} />}
{!loading && !error && <DataTable rows={rows} columns={columns} />}
</div>
)
}