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
67 lines
2.5 KiB
TypeScript
67 lines
2.5 KiB
TypeScript
import { useState } from 'react';
|
|
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 { useCustomers } from '../../../hooks/useCustomers';
|
|
import { useBranchStore } from '../../../store/branchStore';
|
|
import { useAuth } from '../../../hooks/useAuth';
|
|
import { StatusChip } from '../../../components/common/StatusChip';
|
|
import { MoneyCell } from '../../../components/common/MoneyCell';
|
|
import type { Customer } from '../../../types/api';
|
|
import { CustomerDialog } from './CustomerDialog';
|
|
|
|
export function CustomersListPage() {
|
|
const navigate = useNavigate();
|
|
const selected = useBranchStore((state) => state.selected);
|
|
const { data: customers, isLoading } = useCustomers(selected);
|
|
const { hasPermission } = useAuth();
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
|
|
const columns: GridColDef<Customer>[] = [
|
|
{ field: 'code', headerName: 'Code', width: 140 },
|
|
{ field: 'name', headerName: 'Name', flex: 1 },
|
|
{ field: 'email', headerName: 'Email', flex: 1 },
|
|
{ field: 'phone', headerName: 'Phone', width: 160 },
|
|
{
|
|
field: 'creditLimit',
|
|
headerName: 'Credit Limit',
|
|
width: 140,
|
|
align: 'right',
|
|
headerAlign: 'right',
|
|
renderCell: (params) => <MoneyCell value={params.row.creditLimit} />,
|
|
},
|
|
{ field: 'paymentTermsDays', headerName: 'Terms (days)', width: 130 },
|
|
{
|
|
field: 'isActive',
|
|
headerName: 'Status',
|
|
width: 100,
|
|
renderCell: (params) => <StatusChip status={params.row.isActive ? 'ACTIVE' : 'CLOSED'} />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<Box>
|
|
<Stack direction="row" sx={{ mb: 2, justifyContent: 'space-between', alignItems: 'center' }}>
|
|
<Typography variant="h5">Customers</Typography>
|
|
{hasPermission('ar.customer.manage') && (
|
|
<Button variant="contained" onClick={() => setDialogOpen(true)}>
|
|
New Customer
|
|
</Button>
|
|
)}
|
|
</Stack>
|
|
<Card sx={{ height: 650 }}>
|
|
<DataGrid
|
|
rows={customers ?? []}
|
|
columns={columns}
|
|
loading={isLoading}
|
|
density="compact"
|
|
disableRowSelectionOnClick
|
|
onRowClick={(params) => navigate(`/ar/customers/${params.row.id}`)}
|
|
sx={{ border: 'none', '& .MuiDataGrid-row': { cursor: 'pointer' } }}
|
|
/>
|
|
</Card>
|
|
<CustomerDialog open={dialogOpen} onClose={() => setDialogOpen(false)} />
|
|
</Box>
|
|
);
|
|
}
|