Joshua OosthuizenandClaude Sonnet 5
4acbc03b35
Root company app (src/, client/) — GL foundation, AR, and AP: - Segmented Chart of Accounts (Sage 300-style), double-entry PostingService with three-layer balance enforcement (app validation, CHECK constraints, deferred DB trigger), gap-free document numbering, RBAC with branch restrictions. - Accounts Receivable: Customers, Invoices, Credit Notes, Receipts with allocation, all posting through PostingService. - Accounts Payable: Suppliers, Supplier Invoices, Debit Notes, Payments with allocation, mirroring AR's posting pattern. - Tax Codes shared between AR and AP. - Company-app login is a token handoff from the Account Manager (RS256, single-use, company-scoped) rather than a local password. - Frontend reskinned to the approved mockup: navy sidebar, dashboard, tree-view Chart of Accounts, Customer/Supplier 360 pages. Account Manager (manager/, manager/client/) — central login gateway: - Password + TOTP 2FA + Google/Microsoft OAuth, company picker, and the RS256 handoff token issuance that the company app verifies. Covered by unit + integration tests against a real Postgres database (GL balance invariants, AR/AP posting correctness and allocation limits, the full handoff exchange including replay/cross-company/expiry/forgery rejection). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Tq2DbEvzHzs13jDFhLaX44
66 lines
2.6 KiB
TypeScript
66 lines
2.6 KiB
TypeScript
import { useNavigate } from 'react-router-dom';
|
|
import { Box, Button, Card, Stack, Typography } from '@mui/material';
|
|
import { DataGrid, type GridColDef } from '@mui/x-data-grid';
|
|
import { useInvoices } from '../../../hooks/useARInvoices';
|
|
import { useBranchStore } from '../../../store/branchStore';
|
|
import { useAuth } from '../../../hooks/useAuth';
|
|
import { StatusChip } from '../../../components/common/StatusChip';
|
|
import { MoneyCell } from '../../../components/common/MoneyCell';
|
|
import type { ARInvoice } from '../../../types/api';
|
|
|
|
export function InvoicesListPage() {
|
|
const navigate = useNavigate();
|
|
const selected = useBranchStore((state) => state.selected);
|
|
const { data: invoices, isLoading } = useInvoices(selected);
|
|
const { hasPermission } = useAuth();
|
|
|
|
const columns: GridColDef<ARInvoice>[] = [
|
|
{ field: 'invoiceNumber', headerName: 'Invoice #', width: 180 },
|
|
{ field: 'customer', headerName: 'Customer', flex: 1, valueGetter: (_v, row) => row.customer?.name },
|
|
{ field: 'invoiceDate', headerName: 'Date', width: 120, valueFormatter: (value: string) => value?.slice(0, 10) },
|
|
{ field: 'dueDate', headerName: 'Due', width: 120, valueFormatter: (value: string) => value?.slice(0, 10) },
|
|
{
|
|
field: 'total',
|
|
headerName: 'Total',
|
|
width: 120,
|
|
align: 'right',
|
|
headerAlign: 'right',
|
|
renderCell: (params) => <MoneyCell value={params.row.total} />,
|
|
},
|
|
{
|
|
field: 'balance',
|
|
headerName: 'Balance',
|
|
width: 120,
|
|
align: 'right',
|
|
headerAlign: 'right',
|
|
renderCell: (params) => <MoneyCell value={params.row.balance} />,
|
|
},
|
|
{ field: 'status', headerName: 'Status', width: 120, renderCell: (params) => <StatusChip status={params.row.status} /> },
|
|
];
|
|
|
|
return (
|
|
<Box>
|
|
<Stack direction="row" sx={{ mb: 2, justifyContent: 'space-between', alignItems: 'center' }}>
|
|
<Typography variant="h5">Invoices</Typography>
|
|
{hasPermission('ar.invoice.manage') && (
|
|
<Button variant="contained" onClick={() => navigate('/ar/invoices/new')}>
|
|
New Invoice
|
|
</Button>
|
|
)}
|
|
</Stack>
|
|
<Card sx={{ height: 650 }}>
|
|
<DataGrid
|
|
rows={invoices ?? []}
|
|
columns={columns}
|
|
loading={isLoading}
|
|
density="compact"
|
|
disableRowSelectionOnClick
|
|
onRowClick={(params) => navigate(`/ar/invoices/${params.row.id}`)}
|
|
sx={{ border: 'none', '& .MuiDataGrid-row': { cursor: 'pointer' } }}
|
|
initialState={{ sorting: { sortModel: [{ field: 'invoiceDate', sort: 'desc' }] } }}
|
|
/>
|
|
</Card>
|
|
</Box>
|
|
);
|
|
}
|