// Finance (FRM) — journal entries, invoicing, and statements. No setup screens.
const FIN_TODAY = new Date('2026-05-15');
// Reusable pagination hook + control for finance lists
function usePaged(rows, pageSize = 8) {
const [page, setPage] = useState(1);
const total = rows.length;
const pages = Math.max(1, Math.ceil(total / pageSize));
const cur = Math.min(page, pages);
const start = (cur - 1) * pageSize;
const slice = rows.slice(start, start + pageSize);
useEffect(() => { setPage(1); }, [total]);
return { slice, page: cur, pages, setPage, total, start, end: Math.min(start + pageSize, total) };
}
function Pagination({ pg }) {
if (!pg || pg.total === 0) return null;
return (
Showing {pg.start + 1}–{pg.end} of {pg.total}
{Array.from({ length: pg.pages }, (_, i) => i + 1).map(n => (
))}
);
}
// ─── Overview ──────────────────────────────────────────────
function FinanceOverview({ onNavigate }) {
const D = window.HitcentsData;
const p = D.FIN_PNL;
const totalRev = p.revenue.reduce((s, r) => s + r.amount, 0);
const netIncome = totalRev - p.cogs.reduce((s, r) => s + r.amount, 0) - p.opex.reduce((s, r) => s + r.amount, 0);
const cash = D.FIN_BANK_ACCOUNTS.filter(a => a.type !== 'Credit card').reduce((s, a) => s + a.balance, 0);
const ar = D.FIN_INVOICES.filter(i => i.status === 'Sent' || i.status === 'Overdue').reduce((s, i) => s + window.invoiceTotal(i), 0);
const ap = D.FIN_BILLS.filter(b => b.status === 'Open' || b.status === 'Overdue').reduce((s, b) => s + b.amount, 0);
const overdueInv = D.FIN_INVOICES.filter(i => i.status === 'Overdue');
const overdueBills = D.FIN_BILLS.filter(b => b.status === 'Overdue');
return (
Finance
Financial overview · {p.period} · accrual basis
a.type !== 'Credit card').length} accounts`} tone="up" />
= 0 ? 'profit' : 'net loss'} tone={netIncome >= 0 ? 'up' : 'down'} />
Cash accounts
{D.FIN_BANK_ACCOUNTS.map(a => (
{a.name}
{a.bank} ··{a.last4}
{a.balance < 0 ? `(${fmtMoneyFull(Math.abs(a.balance))})` : fmtMoneyFull(a.balance)}
))}
Recent transactions
{D.FIN_TRANSACTIONS.slice(0, 6).map(t => (
{fmtDateShort(t.date)}
{t.desc}
{t.amount < 0 ? '−' : '+'}{fmtMoneyFull(Math.abs(t.amount))}
))}
{overdueInv.map(i => {
const c = getCustomer(i.customer);
return (
onNavigate('fin-invoices')}>
{fmtMoneyFull(window.invoiceTotal(i))}
);
})}
{overdueBills.map(b => (
onNavigate('fin-bills')}>
{b.vendor}
{b.id} past due
{fmtMoneyFull(b.amount)}
))}
Revenue{fmtMoneyFull(totalRev)}
Expenses{fmtMoneyFull(totalRev - netIncome)}
Net income= 0 ? 'var(--green)' : 'var(--red)' }}>{netIncome < 0 ? `(${fmtMoneyFull(Math.abs(netIncome))})` : fmtMoneyFull(netIncome)}
);
}
// ─── Invoices (A/R) screen ─────────────────────────────────
function FinanceInvoices() {
return (
Invoices
Accounts receivable · customer billing
);
}
// ─── Bills (A/P) screen ────────────────────────────────────
function FinanceBills() {
return (
Bills
Accounts payable · vendor bills & expenses
);
}
// ─── Banking screen ────────────────────────────────────────
function FinanceBanking() {
return (
Banking
Cash accounts & transaction reconciliation
);
}
// ─── General Ledger screen ─────────────────────────────────
function FinanceLedger() {
const [view, setView] = useState('journal');
return (
General ledger
Journal · chart of accounts · trial balance
{[['journal', 'Journal'], ['coa', 'Chart of accounts'], ['tb', 'Trial balance']].map(([id, label]) => (
))}
{view === 'journal' &&
}
{view === 'coa' &&
}
{view === 'tb' &&
}
);
}
// ─── Reporting periods ─────────────────────────────────────
// `factor` scales the base monthly flow figures (P&L, cash flow).
// `asOf` drives point-in-time reports (balance sheet, aging).
// `begin` is opening cash for the cash-flow statement.
const FIN_PERIODS = [
{ id: 'this-month', label: 'This month', sub: 'May 2026', flow: 'May 2026', factor: 1.00, asOf: '2026-05-31', begin: 1259734 },
{ id: 'last-month', label: 'Last month', sub: 'April 2026', flow: 'April 2026', factor: 0.92, asOf: '2026-04-30', begin: 1196400 },
{ id: 'q2', label: 'Q2 2026', sub: 'Apr – Jun 2026', flow: 'Q2 2026', factor: 2.96, asOf: '2026-06-30', begin: 1196400 },
{ id: 'q1', label: 'Q1 2026', sub: 'Jan – Mar 2026', flow: 'Q1 2026', factor: 2.74, asOf: '2026-03-31', begin: 1042000 },
{ id: 'ytd', label: 'Year to date', sub: 'Jan – May 2026', flow: 'YTD 2026', factor: 5.69, asOf: '2026-05-31', begin: 1042000 },
{ id: 'fy2025', label: 'FY 2025', sub: 'Full year 2025', flow: 'FY 2025', factor: 10.4, asOf: '2025-12-31', begin: 612000 },
];
function monthsBetween(a, b) {
const d1 = new Date(a), d2 = new Date(b);
return Math.max(1, (d2.getFullYear() - d1.getFullYear()) * 12 + (d2.getMonth() - d1.getMonth()) + 1);
}
// Deterministic ±6% wobble so scaled line items don't look uniform.
function finWobble(name, k) {
const seed = [...String(name)].reduce((s, c) => s + c.charCodeAt(0), 0);
return 1 + ((((seed * (k + 1)) % 13) - 6) / 100);
}
function finScale(amount, name, period) {
return Math.round(amount * period.factor * finWobble(name, period.k) / 100) * 100;
}
function PeriodPicker({ period, setPeriod, custom, setCustom }) {
const isCustom = period.id === 'custom';
return (
);
}
function makeCustomPeriod(start, end) {
const months = monthsBetween(start, end);
return {
id: 'custom', k: 7,
flow: `${fmtDateShort(start)} – ${fmtDateShort(end)}`,
sub: `${months} month${months > 1 ? 's' : ''}`,
factor: months * 0.97,
asOf: end,
begin: 1042000,
};
}
// ─── Reports screen ────────────────────────────────────────
function FinanceReports() {
const [view, setView] = useState('pnl');
const [period, setPeriod] = useState({ ...FIN_PERIODS[0], k: 0 });
const [custom, setCustom] = useState({ start: '2026-01-01', end: '2026-05-31' });
const pointInTime = view === 'balance' || view === 'aging' || view === 'apaging';
return (
Reports
Financial statements & analysis
{[['pnl', 'P&L'], ['balance', 'Balance sheet'], ['cashflow', 'Cash flow'], ['aging', 'A/R aging'], ['apaging', 'A/P aging']].map(([id, label]) => (
))}
{pointInTime
? <> As of {fmtDate(period.asOf)}
: <> Reporting period: {period.flow}}
{view === 'pnl' &&
}
{view === 'balance' &&
}
{view === 'cashflow' &&
}
{view === 'aging' &&
}
{view === 'apaging' &&
}
);
}
// ─── Journal ───────────────────────────────────────────────
function JournalView() {
const D = window.HitcentsData;
const [entries, setEntries] = useState(D.FIN_JOURNAL);
const [open, setOpen] = useState(null);
const [addOpen, setAddOpen] = useState(false);
const [q, setQ] = useState('');
const rows = entries.filter(e => !q || `${e.id} ${e.ref} ${e.memo}`.toLowerCase().includes(q.toLowerCase()));
const pg = usePaged(rows, 8);
return (
<>
| Entry | Date | Reference | Memo | Amount | Status |
|---|
{pg.slice.map(e => {
const amt = e.lines.reduce((s, l) => s + l.debit, 0);
return (
setOpen(e)}>
| {e.id} |
{fmtDateShort(e.date)} |
{e.ref} |
{e.memo} |
{fmtMoneyFull(amt)} |
{e.posted ? 'Posted' : 'Draft'} |
);
})}
setOpen(null)} title="Journal entry" width={560}>
{open && }
{addOpen && setAddOpen(false)} onCreate={(je) => { D.FIN_JOURNAL.unshift(je); setEntries([je, ...entries]); setAddOpen(false); setOpen(je); }} />}
);
}
function JournalDetail({ entry }) {
const totalDr = entry.lines.reduce((s, l) => s + l.debit, 0);
const totalCr = entry.lines.reduce((s, l) => s + l.credit, 0);
return (
{entry.id}
{fmtDate(entry.date)} · {entry.ref}
{entry.posted ? 'Posted' : 'Draft'}
{entry.memo}
| Account | Debit | Credit |
|---|
{entry.lines.map((l, i) => {
const a = window.finAccount(l.code);
return (
| {l.code} {a?.name} |
{l.debit ? fmtMoneyFull(l.debit) : ''} |
{l.credit ? fmtMoneyFull(l.credit) : ''} |
);
})}
| Total |
{fmtMoneyFull(totalDr)} |
{fmtMoneyFull(totalCr)} |
{totalDr === totalCr ? 'Balanced' : 'Out of balance'}
);
}
// ─── Invoices ──────────────────────────────────────────────
function InvoicesView() {
const D = window.HitcentsData;
const [invoices, setInvoices] = useState(D.FIN_INVOICES);
const [open, setOpen] = useState(null);
const [addOpen, setAddOpen] = useState(false);
const [statusFilter, setStatusFilter] = useState('all');
const rows = invoices.filter(i => statusFilter === 'all' || i.status === statusFilter);
const pg = usePaged(rows, 6);
const outstanding = invoices.filter(i => i.status === 'Sent' || i.status === 'Overdue').reduce((s, i) => s + window.invoiceTotal(i), 0);
const overdue = invoices.filter(i => i.status === 'Overdue').reduce((s, i) => s + window.invoiceTotal(i), 0);
return (
<>
i.status === 'Sent' || i.status === 'Overdue').length} open invoices`} />
i.status === 'Overdue').length} past due`} tone={overdue > 0 ? 'down' : 'up'} />
i.status === 'Paid').reduce((s, i) => s + window.invoiceTotal(i), 0))} delta="collected" tone="up" />
i.status === 'Draft').length} delta="not yet sent" />
| Invoice | Customer | Issued | Due | Amount | Status |
|---|
{pg.slice.map(inv => {
const c = getCustomer(inv.customer);
const tone = inv.status === 'Paid' ? 'green' : inv.status === 'Overdue' ? 'red' : inv.status === 'Sent' ? 'blue' : 'neutral';
return (
setOpen(inv)}>
| {inv.id} |
|
{fmtDateShort(inv.issued)} |
{fmtDateShort(inv.due)} |
{fmtMoneyFull(window.invoiceTotal(inv))} |
{inv.status} |
);
})}
setOpen(null)} title="Invoice" width={580}>
{open && { open.status = status; setInvoices([...invoices]); setOpen({ ...open, status }); }} />}
{addOpen && setAddOpen(false)} onCreate={(inv) => { D.FIN_INVOICES.unshift(inv); setInvoices([inv, ...invoices]); setAddOpen(false); setOpen(inv); }} />}
);
}
function InvoiceDetail({ invoice: inv, onStatus }) {
const c = getCustomer(inv.customer);
const total = window.invoiceTotal(inv);
return (
{inv.id}
{c?.name} · {c?.hq}
{inv.status}
| Description | Account | Qty | Price | Amount |
|---|
{inv.lines.map((l, i) => {
const acct = l.code ? window.finAccount(l.code) : null;
return (
| {l.desc} |
{acct ? {acct.code} : '—'}{acct ? ` · ${acct.name}` : ''} |
{l.qty} |
{fmtMoneyFull(l.price)} |
{fmtMoneyFull(l.qty * l.price)} |
);
})}
| Total due |
{fmtMoneyFull(total)} |
{inv.notes &&
{inv.notes}
}
{inv.status === 'Draft' && }
{(inv.status === 'Sent' || inv.status === 'Overdue') && }
);
}
// ─── P&L ───────────────────────────────────────────────────
function PnLView({ period }) {
const p = window.HitcentsData.FIN_PNL;
const revenue = p.revenue.map(r => ({ ...r, amount: finScale(r.amount, r.name, period) }));
const cogs = p.cogs.map(r => ({ ...r, amount: finScale(r.amount, r.name, period) }));
const opex = p.opex.map(r => ({ ...r, amount: finScale(r.amount, r.name, period) }));
const totalRev = revenue.reduce((s, r) => s + r.amount, 0);
const totalCogs = cogs.reduce((s, r) => s + r.amount, 0);
const grossProfit = totalRev - totalCogs;
const totalOpex = opex.reduce((s, r) => s + r.amount, 0);
const netIncome = grossProfit - totalOpex;
return (
Profit & Loss
{period.flow} · accrual basis
= 0} />
);
}
function FinGroup({ label, rows, total, muted }) {
return (
{label}
{rows.map((r, i) => (
{r.name}
{fmtMoneyFull(r.amount)}
))}
Total {label.toLowerCase()}
{fmtMoneyFull(total)}
);
}
function FinTotal({ label, value, sub, strong, positive = true }) {
return (
{label}
{sub && {sub}}
{value < 0 ? `(${fmtMoneyFull(Math.abs(value))})` : fmtMoneyFull(value)}
);
}
// ─── Balance sheet ─────────────────────────────────────────
function BalanceSheetView({ period }) {
const b = window.HitcentsData.FIN_BALANCE;
// Balance sheet grows toward the "as of" date; use a stock factor (~half the flow factor, floored).
const sf = { k: period.k, factor: Math.max(0.78, Math.min(1.25, 0.86 + period.factor * 0.035)) };
const assets = b.assets.map(r => ({ ...r, amount: finScale(r.amount, r.name, sf) }));
const liabilities = b.liabilities.map(r => ({ ...r, amount: finScale(r.amount, r.name, sf) }));
const totalAssets = assets.reduce((s, r) => s + r.amount, 0);
const totalLiab = liabilities.reduce((s, r) => s + r.amount, 0);
// Common stock is fixed; retained earnings plugs to keep the sheet balanced.
const commonStock = b.equity.find(e => /common/i.test(e.name))?.amount || 500000;
const retained = totalAssets - totalLiab - commonStock;
const equity = [{ name: 'Common stock', amount: commonStock }, { name: 'Retained earnings', amount: retained }];
const totalEquity = commonStock + retained;
const balanced = totalAssets === totalLiab + totalEquity;
return (
Balance Sheet
As of {fmtDate(period.asOf)}
{balanced ? 'Assets = Liabilities + Equity' : 'Out of balance'}
);
}
// ─── A/R Aging ─────────────────────────────────────────────
function AgingView({ asOf }) {
const D = window.HitcentsData;
const ref = asOf ? new Date(asOf) : FIN_TODAY;
const open = D.FIN_INVOICES.filter(i => i.status === 'Sent' || i.status === 'Overdue');
function daysPastDue(due) {
return Math.floor((ref - new Date(due)) / 86400000);
}
const buckets = ['Current', '1–30', '31–60', '61–90', '90+'];
function bucketOf(due) {
const d = daysPastDue(due);
if (d <= 0) return 'Current';
if (d <= 30) return '1–30';
if (d <= 60) return '31–60';
if (d <= 90) return '61–90';
return '90+';
}
// group by customer
const byCust = {};
open.forEach(inv => {
const cid = inv.customer;
byCust[cid] = byCust[cid] || { Current: 0, '1–30': 0, '31–60': 0, '61–90': 0, '90+': 0, total: 0 };
const amt = window.invoiceTotal(inv);
byCust[cid][bucketOf(inv.due)] += amt;
byCust[cid].total += amt;
});
const totals = buckets.reduce((acc, b) => { acc[b] = Object.values(byCust).reduce((s, c) => s + c[b], 0); return acc; }, {});
const grand = Object.values(byCust).reduce((s, c) => s + c.total, 0);
return (
<>
{buckets.map(b => (
0 ? 'down' : undefined} />
)).slice(0, 4)}
| Customer |
{buckets.map(b => {b === 'Current' ? 'Current' : b} | )}
Total |
{Object.entries(byCust).sort((a, b) => b[1].total - a[1].total).map(([cid, row]) => {
const c = getCustomer(cid);
return (
|
{buckets.map(b => (
0 ? 'var(--red)' : b === '61–90' && row[b] > 0 ? 'var(--amber)' : 'var(--text)' }}>
{row[b] ? fmtMoneyFull(row[b]) : —}
|
))}
{fmtMoneyFull(row.total)} |
);
})}
| Total |
{buckets.map(b => {fmtMoneyFull(totals[b])} | )}
{fmtMoneyFull(grand)} |
);
}
function JournalEntryModal({ onClose, onCreate }) {
const D = window.HitcentsData;
const [date, setDate] = useState('2026-05-15');
const [ref, setRef] = useState('');
const [memo, setMemo] = useState('');
const [lines, setLines] = useState([
{ code: '1000', debit: 0, credit: 0 },
{ code: '4000', debit: 0, credit: 0 },
]);
function setLine(i, patch) { setLines(ls => ls.map((l, idx) => idx === i ? { ...l, ...patch } : l)); }
function addLine() { setLines(ls => [...ls, { code: '1000', debit: 0, credit: 0 }]); }
function removeLine(i) { setLines(ls => ls.length > 2 ? ls.filter((_, idx) => idx !== i) : ls); }
const totalDr = lines.reduce((s, l) => s + (+l.debit || 0), 0);
const totalCr = lines.reduce((s, l) => s + (+l.credit || 0), 0);
const balanced = totalDr === totalCr && totalDr > 0;
function submit(posted) {
if (!balanced) return;
const id = `JE-${1043 + Math.floor(Math.random() * 900)}`;
onCreate({ id, date, ref: ref.trim() || 'Manual', memo: memo.trim() || 'Manual journal entry', posted, lines: lines.map(l => ({ code: l.code, debit: +l.debit || 0, credit: +l.credit || 0 })) });
}
return (
e.stopPropagation()} style={{ width: 720, maxWidth: '94vw', maxHeight: '88vh', background: 'var(--bg-card)', borderRadius: 14, border: '1px solid var(--border)', boxShadow: 'var(--shadow-lg)', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
New journal entry
Debits must equal credits before posting.
);
}
function InvoiceModal({ onClose, onCreate }) {
const D = window.HitcentsData;
const [customer, setCustomer] = useState('c1');
const [issued, setIssued] = useState('2026-05-15');
const [due, setDue] = useState('2026-06-14');
const [notes, setNotes] = useState('Net 30');
const [lines, setLines] = useState([{ desc: '', qty: 1, price: 0, code: '4000' }]);
function setLine(i, patch) { setLines(ls => ls.map((l, idx) => idx === i ? { ...l, ...patch } : l)); }
function addLine() { setLines(ls => [...ls, { desc: '', qty: 1, price: 0, code: '4000' }]); }
function removeLine(i) { setLines(ls => ls.length > 1 ? ls.filter((_, idx) => idx !== i) : ls); }
const total = lines.reduce((s, l) => s + (+l.qty || 0) * (+l.price || 0), 0);
const canCreate = total > 0 && lines.some(l => l.desc.trim());
function submit(status) {
const id = `INV-${2049 + Math.floor(Math.random() * 900)}`;
onCreate({ id, customer, issued, due, status, notes: notes.trim(), lines: lines.filter(l => l.desc.trim()).map(l => ({ desc: l.desc.trim(), qty: +l.qty || 1, price: +l.price || 0, code: l.code })) });
}
const c = getCustomer(customer);
const revenueAccounts = D.FIN_ACCOUNTS.filter(a => a.type === 'Revenue' || a.type === 'Asset');
return (
e.stopPropagation()} style={{ width: 720, maxWidth: '94vw', maxHeight: '88vh', background: 'var(--bg-card)', borderRadius: 14, border: '1px solid var(--border)', boxShadow: 'var(--shadow-lg)', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
New invoice
Bill a customer for products or services.
);
}
// ─── Bills (A/P) ───────────────────────────────────────────
function BillsView() {
const D = window.HitcentsData;
const [bills, setBills] = useState(D.FIN_BILLS);
const [open, setOpen] = useState(null);
const [addOpen, setAddOpen] = useState(false);
const [statusFilter, setStatusFilter] = useState('all');
const rows = bills.filter(b => statusFilter === 'all' || b.status === statusFilter);
const pg = usePaged(rows, 6);
const outstanding = bills.filter(b => b.status === 'Open' || b.status === 'Overdue').reduce((s, b) => s + b.amount, 0);
const overdue = bills.filter(b => b.status === 'Overdue').reduce((s, b) => s + b.amount, 0);
return (
<>
b.status === 'Open' || b.status === 'Overdue').length} open bills`} />
b.status === 'Overdue').length} past due`} tone={overdue > 0 ? 'down' : 'up'} />
b.status === 'Paid').reduce((s, b) => s + b.amount, 0))} delta="settled" tone="up" />
{ const d = (new Date(b.due) - FIN_TODAY) / 86400000; return (b.status === 'Open') && d >= 0 && d <= 7; }).reduce((s, b) => s + b.amount, 0))} delta="upcoming" />
| Bill | Vendor | Category | Issued | Due | Amount | Status |
|---|
{pg.slice.map(b => {
const tone = b.status === 'Paid' ? 'green' : b.status === 'Overdue' ? 'red' : 'blue';
return (
setOpen(b)}>
| {b.id} |
{b.vendor} |
{b.category} |
{fmtDateShort(b.issued)} |
{fmtDateShort(b.due)} |
{fmtMoneyFull(b.amount)} |
{b.status} |
);
})}
setOpen(null)} title="Bill" width={520}>
{open && (
{open.vendorId && getVendor(open.vendorId) && (
)}
{open.splits && open.splits.length > 0 && (
<>
Account allocation
{open.splits.map((s, i) => {
const a = window.finAccount(s.code);
return (
| {s.code} |
{a?.name || '—'} |
{fmtMoneyFull(s.amount)} |
);
})}
{open.splits.length > 1 && (
| Total |
{fmtMoneyFull(open.amount)} |
)}
)}
{open.files && open.files.length > 0 && (
<>
Attachments
{open.files.map((f, i) => (
PDF
{f.name}
{fileBytes(f.size)}
))}
)}
{open.status !== 'Paid' && (
)}
)}
{addOpen && setAddOpen(false)} onCreate={(bill) => { D.FIN_BILLS.unshift(bill); setBills([bill, ...bills]); setAddOpen(false); setOpen(bill); }} />}
);
}
function BillModal({ onClose, onCreate }) {
const D = window.HitcentsData;
const expenseAccts = D.FIN_ACCOUNTS.filter(a => a.type === 'Expense');
const vendors = D.VENDORS || [];
const [draft, setDraft] = useState({
vendorId: '', vendor: '', otherVendor: false,
issued: '2026-05-15', due: '2026-06-14',
});
const [splits, setSplits] = useState([{ code: expenseAccts[0]?.code || '5000', amount: 0 }]);
const [files, setFiles] = useState([]);
const [dragOver, setDragOver] = useState(false);
const fileRef = useRef(null);
function set(p) { setDraft(d => ({ ...d, ...p })); }
function setSplit(i, patch) { setSplits(s => s.map((x, idx) => idx === i ? { ...x, ...patch } : x)); }
function addSplit() { setSplits(s => [...s, { code: expenseAccts[0]?.code || '5000', amount: 0 }]); }
function removeSplit(i) { setSplits(s => s.length > 1 ? s.filter((_, idx) => idx !== i) : s); }
function addFiles(list) {
const next = Array.from(list || []).map(f => ({ name: f.name, size: f.size }));
if (next.length) setFiles(fs => [...next, ...fs]);
}
const total = splits.reduce((s, x) => s + (+x.amount || 0), 0);
const vendorName = draft.otherVendor ? draft.vendor.trim() : (getVendor(draft.vendorId)?.name || '');
const canCreate = vendorName && total > 0;
function submit() {
const firstAcct = window.finAccount(splits[0].code);
onCreate({
id: `BILL-${7013 + Math.floor(Math.random() * 900)}`,
vendorId: draft.otherVendor ? null : (draft.vendorId || null),
vendor: vendorName,
category: splits.length > 1 ? 'Split allocation' : (firstAcct?.name || '—'),
issued: draft.issued, due: draft.due,
amount: total, status: 'Open',
splits: splits.filter(s => +s.amount > 0).map(s => ({ code: s.code, amount: +s.amount })),
files,
});
}
return (
e.stopPropagation()} style={{ width: 600, maxWidth: '94vw', maxHeight: '88vh', background: 'var(--bg-card)', borderRadius: 14, border: '1px solid var(--border)', boxShadow: 'var(--shadow-lg)', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
New bill
Record a payable, allocate it to accounts, attach the invoice.
{draft.otherVendor ? (
set({ vendor: e.target.value })} style={{ flex: 1 }} />
) : (
)}
Account allocation{splits.length > 1 && · split across {splits.length}}
{splits.map((s, i) => (
$
setSplit(i, { amount: +e.target.value })}
style={{ width: '100%', paddingLeft: 22, border: '1px solid var(--border-strong)', borderRadius: 7, padding: '7px 9px 7px 22px', fontSize: 12.5, textAlign: 'right' }} />
))}
{vendorName || 'Vendor'}
Bill total {fmtMoneyFull(total)}
Attachment
{ addFiles(e.target.files); e.target.value = ''; }} />
fileRef.current?.click()}
onDragOver={e => { e.preventDefault(); setDragOver(true); }}
onDragLeave={() => setDragOver(false)}
onDrop={e => { e.preventDefault(); setDragOver(false); addFiles(e.dataTransfer.files); }}>
Attach the bill PDF
Drag a file here or click to browse
{files.length > 0 && (
{files.map((f, i) => (
PDF
{f.name}
{fileBytes(f.size)}
))}
)}
);
}
// ─── Banking ───────────────────────────────────────────────
function BankingView() {
const D = window.HitcentsData;
const [txns, setTxns] = useState(D.FIN_TRANSACTIONS);
const [acctFilter, setAcctFilter] = useState('all');
const [stmt, setStmt] = useState({}); // statement ending balance per account id
function toggleRec(id) { setTxns(ts => ts.map(t => t.id === id ? { ...t, reconciled: !t.reconciled } : t)); }
const rows = txns.filter(t => acctFilter === 'all' || t.account === acctFilter);
const pg = usePaged(rows, 8);
const unrec = txns.filter(t => !t.reconciled).length;
// Reconciliation math for one account (book vs. bank, cleared vs. outstanding)
function reconFor(acctId) {
const acct = D.FIN_BANK_ACCOUNTS.find(a => a.id === acctId);
const all = txns.filter(t => t.account === acctId);
const sumAll = all.reduce((s, t) => s + t.amount, 0);
const begin = acct.balance - sumAll;
const clearedDep = all.filter(t => t.reconciled && t.amount > 0).reduce((s, t) => s + t.amount, 0);
const clearedPay = all.filter(t => t.reconciled && t.amount < 0).reduce((s, t) => s + t.amount, 0);
const clearedBalance = begin + clearedDep + clearedPay;
const outstanding = all.filter(t => !t.reconciled);
const outstandingTotal = outstanding.reduce((s, t) => s + t.amount, 0);
const statement = stmt[acctId] != null ? stmt[acctId] : clearedBalance;
return { acct, begin, clearedDep, clearedPay, clearedBalance, outstanding, outstandingTotal, statement, bookBalance: acct.balance };
}
const selected = acctFilter !== 'all' ? reconFor(acctFilter) : null;
return (
<>
{D.FIN_BANK_ACCOUNTS.map(a => {
const r = reconFor(a.id);
const balanced = Math.abs((stmt[a.id] != null ? stmt[a.id] : r.clearedBalance) - r.clearedBalance) < 0.5;
return (
setAcctFilter(acctFilter === a.id ? 'all' : a.id)}>
{a.name}
{a.bank} ··{a.last4}
{a.type}
{a.balance < 0 ? `(${fmtMoneyFull(Math.abs(a.balance))})` : fmtMoneyFull(a.balance)}
{r.outstanding.length > 0
? {r.outstanding.length} uncleared · {fmtMoneyFull(Math.abs(r.outstandingTotal))}
: All cleared}
);
})}
Reconcile · {selected.acct.name}
Match your ledger to the bank statement
Beginning balance{fmtMoneyFull(selected.begin)}
+ Cleared deposits{fmtMoneyFull(selected.clearedDep)}
− Cleared payments{fmtMoneyFull(Math.abs(selected.clearedPay))}
Cleared balance{fmtMoneyFull(selected.clearedBalance)}
Statement ending balance
$
setStmt(s => ({ ...s, [acctFilter]: +e.target.value }))}
style={{ width: '100%', textAlign: 'right', padding: '6px 8px 6px 18px', border: '1px solid var(--border-strong)', borderRadius: 7, fontSize: 12.5 }} />
Outstanding items{selected.outstanding.length} · {fmtMoneyFull(Math.abs(selected.outstandingTotal))}
{(() => {
const diff = selected.statement - selected.clearedBalance;
const ok = Math.abs(diff) < 0.5;
return (
{ok
? <> Reconciled — difference $0
: <> Out of balance by {fmtMoneyFull(Math.abs(diff))}}
);
})()}
)}
Transactions
{unrec > 0 && {unrec} to reconcile}
{acctFilter !== 'all' && }
| Date | Description | Account | Category | Amount | Reconciled |
|---|
{pg.slice.map(t => {
const a = D.FIN_BANK_ACCOUNTS.find(x => x.id === t.account);
return (
| {fmtDateShort(t.date)} |
{t.desc} |
{a?.name} |
{t.category === 'Transfer' ? Transfer : {t.category}} |
{t.amount < 0 ? '−' : '+'}{fmtMoneyFull(Math.abs(t.amount))} |
|
);
})}
);
}
// ─── Chart of accounts (editable) ──────────────────────────
function ChartOfAccountsView() {
const D = window.HitcentsData;
const types = ['Asset', 'Liability', 'Equity', 'Revenue', 'Expense'];
const [, bump] = useState(0);
const [modal, setModal] = useState(null); // { mode:'add'|'edit', account }
const rerender = () => bump(n => n + 1);
function saveAccount(orig, draft) {
if (orig) {
orig.name = draft.name; orig.type = draft.type; orig.code = draft.code;
} else {
D.FIN_ACCOUNTS.push({ code: draft.code, name: draft.name, type: draft.type });
D.FIN_ACCOUNTS.sort((a, b) => a.code.localeCompare(b.code));
}
rerender();
}
function removeAccount(acct) {
if (!confirm(`Delete account ${acct.code} · ${acct.name}?`)) return;
const i = D.FIN_ACCOUNTS.indexOf(acct);
if (i >= 0) D.FIN_ACCOUNTS.splice(i, 1);
rerender();
}
return (
<>
{D.FIN_ACCOUNTS.length} accounts
| Code | Account | Type | Balance | |
|---|
{types.map(type => {
const accts = D.FIN_ACCOUNTS.filter(a => a.type === type);
return (
| {type} |
{accts.map(a => (
| {a.code} |
{a.name} |
{a.type} |
{fmtMoneyFull(D.FIN_BALANCES[a.code] || 0)} |
|
))}
);
})}
{modal && setModal(null)}
onSave={(draft) => { saveAccount(modal.account, draft); setModal(null); }} />}
);
}
function AccountModal({ mode, account, types, onClose, onSave }) {
const D = window.HitcentsData;
const [draft, setDraft] = useState(account
? { code: account.code, name: account.name, type: account.type }
: { code: '', name: '', type: 'Expense' });
function set(p) { setDraft(d => ({ ...d, ...p })); }
const codeTaken = D.FIN_ACCOUNTS.some(a => a.code === draft.code && a !== account);
const canSave = draft.code.trim() && draft.name.trim() && !codeTaken;
// Suggest the next available code in the chosen type's band
function suggestCode(type) {
const band = { Asset: '1', Liability: '2', Equity: '3', Revenue: '4', Expense: '6' }[type] || '9';
const inBand = D.FIN_ACCOUNTS.filter(a => a.code.startsWith(band)).map(a => +a.code).sort((x, y) => x - y);
const next = (inBand.length ? inBand[inBand.length - 1] + 10 : +(band + '000'));
return String(next);
}
return (
e.stopPropagation()} style={{ width: 460, maxWidth: '94vw', background: 'var(--bg-card)', borderRadius: 14, border: '1px solid var(--border)', boxShadow: 'var(--shadow-lg)', overflow: 'hidden' }}>
{mode === 'edit' ? 'Edit account' : 'New account'}
);
}
// ─── Trial balance ─────────────────────────────────────────
function TrialBalanceView() {
const D = window.HitcentsData;
const debitTypes = ['Asset', 'Expense'];
const rows = D.FIN_ACCOUNTS.map(a => {
const bal = D.FIN_BALANCES[a.code] || 0;
const isDebit = debitTypes.includes(a.type);
return { ...a, debit: isDebit ? bal : 0, credit: isDebit ? 0 : bal };
});
const totalDr = rows.reduce((s, r) => s + r.debit, 0);
const totalCr = rows.reduce((s, r) => s + r.credit, 0);
const balanced = totalDr === totalCr;
return (
Trial balance
As of {fmtDate('2026-05-31')}
| Code | Account | Debit | Credit |
|---|
{rows.map(r => (
| {r.code} |
{r.name} |
{r.debit ? fmtMoneyFull(r.debit) : ''} |
{r.credit ? fmtMoneyFull(r.credit) : ''} |
))}
| Total |
{fmtMoneyFull(totalDr)} |
{fmtMoneyFull(totalCr)} |
);
}
// ─── Cash flow statement ───────────────────────────────────
function CashFlowView({ period }) {
const cf = window.HitcentsData.FIN_CASHFLOW;
const operating = cf.operating.map(r => ({ ...r, amount: finScale(r.amount, r.name, period) }));
const investing = cf.investing.map(r => ({ ...r, amount: finScale(r.amount, r.name, period) }));
const financing = cf.financing.map(r => ({ ...r, amount: finScale(r.amount, r.name, period) }));
const op = operating.reduce((s, r) => s + r.amount, 0);
const inv = investing.reduce((s, r) => s + r.amount, 0);
const fin = financing.reduce((s, r) => s + r.amount, 0);
const net = op + inv + fin;
const begin = period.begin || cf.beginningCash;
return (
Statement of Cash Flows
{period.flow} · indirect method
= 0} />
Beginning cash{fmtMoneyFull(begin)}
);
}
// ─── A/P aging ─────────────────────────────────────────────
function APAgingView({ asOf }) {
const D = window.HitcentsData;
const ref = asOf ? new Date(asOf) : FIN_TODAY;
const open = D.FIN_BILLS.filter(b => b.status === 'Open' || b.status === 'Overdue');
const buckets = ['Current', '1–30', '31–60', '61–90', '90+'];
function bucketOf(due) {
const d = Math.floor((ref - new Date(due)) / 86400000);
if (d <= 0) return 'Current';
if (d <= 30) return '1–30';
if (d <= 60) return '31–60';
if (d <= 90) return '61–90';
return '90+';
}
const byVendor = {};
open.forEach(b => {
byVendor[b.vendor] = byVendor[b.vendor] || { Current: 0, '1–30': 0, '31–60': 0, '61–90': 0, '90+': 0, total: 0 };
byVendor[b.vendor][bucketOf(b.due)] += b.amount;
byVendor[b.vendor].total += b.amount;
});
const totals = buckets.reduce((acc, bk) => { acc[bk] = Object.values(byVendor).reduce((s, v) => s + v[bk], 0); return acc; }, {});
const grand = Object.values(byVendor).reduce((s, v) => s + v.total, 0);
return (
| Vendor | {buckets.map(b => {b} | )}Total |
|---|
{Object.entries(byVendor).sort((a, b) => b[1].total - a[1].total).map(([v, row]) => (
| {v} |
{buckets.map(b => 0 ? 'var(--red)' : 'var(--text)' }}>{row[b] ? fmtMoneyFull(row[b]) : —} | )}
{fmtMoneyFull(row.total)} |
))}
| Total |
{buckets.map(b => {fmtMoneyFull(totals[b])} | )}
{fmtMoneyFull(grand)} |
);
}
Object.assign(window, {
FinanceOverview, FinanceInvoices, FinanceBills, FinanceBanking, FinanceLedger, FinanceReports,
});