"use client"; import { useState } from "react"; import { useLang } from "@/context/LanguageContext"; import { Alert, Button, Card, DatePicker, EmptyState, Input, Modal, PageHeader, PageLoader, Pagination, Select, StatCard, Textarea, usePagination, } from "@/components/ui"; import { api, useApi } from "@/lib/client"; import { downloadCsv, formatBDT, formatDate } from "@/lib/utils"; import { PAYMENT_METHODS } from "@/lib/constants"; import { emsConfirm } from "@/components/ConfirmDialog"; import { DistributionDonut, MoneyBarsChart } from "@/components/charts"; import { IconDollar, IconDownload, IconEdit, IconFile, IconPlus, IconTrash, IconTrend, IconWallet, } from "@/components/icons"; type EntryType = "INCOME" | "EXPENSE"; /** premium donut palette — teal family first for income, warm for expense */ const DONUT_COLORS = ["#24695c", "#5ec8b4", "#2e6b8f", "#8f6b2e", "#7a4b8f", "#b0446e", "#4b8f6b", "#8f4b4b"]; interface Head { id: number; name: string; nameBn: string | null; type: EntryType; isActive: boolean; entryCount: number; total: number; createdAt: string; } interface Entry { id: number; voucherNo: string; type: EntryType; amount: string; date: string; method: string; party: string | null; note: string | null; headId: number; head: { name: string; nameBn: string | null; type: EntryType }; createdBy: { name: string } | null; createdAt: string; } interface HeadRow { name: string; nameBn: string | null; total: number; count: number; } interface Report { range: { from: string; to: string }; totals: { income: number; expense: number; balance: number; count: number }; incomeByHead: HeadRow[]; expenseByHead: HeadRow[]; headsCount: number; monthly: { key: string; label: string; income: number; expense: number }[]; } interface Me { user: { institution: { name: string } | null } | null; } type Tab = "overview" | "heads" | "vouchers" | "report"; const emptyHead = { name: "", nameBn: "", type: "INCOME" as EntryType }; const emptyVoucher = { type: "INCOME" as EntryType, headId: "", date: "", amount: "", method: "CASH", party: "", note: "" }; function defaultFrom(): string { const now = new Date(); const d = new Date(now.getFullYear(), now.getMonth() - 11, 1); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-01`; } function today(): string { const d = new Date(); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`; } export default function PortalAccountsPage() { const { t, locale } = useLang(); const [tab, setTab] = useState("overview"); const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null); const [busy, setBusy] = useState(false); // Report range (applied on demand so switching tabs keeps the chosen period) const [rangeForm, setRangeForm] = useState({ from: defaultFrom(), to: today() }); const [appliedRange, setAppliedRange] = useState({ from: defaultFrom(), to: today() }); const report = useApi(`/api/portal/accounts/report?from=${appliedRange.from}&to=${appliedRange.to}`); const headsData = useApi<{ heads: Head[] }>("/api/portal/accounts/heads"); const entriesData = useApi<{ entries: Entry[]; totals: { income: number; expense: number } }>( "/api/portal/accounts/entries", ); const me = useApi("/api/auth/me"); // head modal const [headModal, setHeadModal] = useState(false); const [editingHead, setEditingHead] = useState(null); const [headForm, setHeadForm] = useState(emptyHead); // voucher modal const [voucherModal, setVoucherModal] = useState(false); const [voucherForm, setVoucherForm] = useState(emptyVoucher); // voucher filters (client-side) const [filterType, setFilterType] = useState(""); const [filterHeadId, setFilterHeadId] = useState(""); const [filterFrom, setFilterFrom] = useState(""); const [filterTo, setFilterTo] = useState(""); const heads = headsData.data?.heads ?? []; const allEntries = entriesData.data?.entries ?? []; const filteredEntries = allEntries.filter((e) => { if (filterType && e.type !== filterType) return false; if (filterHeadId && String(e.headId) !== filterHeadId) return false; if (filterFrom && e.date.slice(0, 10) < filterFrom) return false; if (filterTo && e.date.slice(0, 10) > filterTo) return false; return true; }); const entriesPager = usePagination(filteredEntries, 10); const headsPager = usePagination(heads, 10); function reloadAll() { report.reload(); headsData.reload(); entriesData.reload(); } /* ---------- Heads ---------- */ function openHeadCreate() { setEditingHead(null); setHeadForm(emptyHead); setHeadModal(true); } function openHeadEdit(h: Head) { setEditingHead(h); setHeadForm({ name: h.name, nameBn: h.nameBn ?? "", type: h.type }); setHeadModal(true); } async function submitHead(e: React.FormEvent) { e.preventDefault(); setBusy(true); setMessage(null); try { if (editingHead) { await api(`/api/portal/accounts/heads/${editingHead.id}`, { method: "PATCH", body: JSON.stringify({ name: headForm.name, nameBn: headForm.nameBn }), }); } else { await api("/api/portal/accounts/heads", { method: "POST", body: JSON.stringify(headForm), }); } setHeadModal(false); setMessage({ type: "success", text: t.common.savedSuccessfully }); reloadAll(); } catch (err) { setMessage({ type: "error", text: err instanceof Error && err.message === "NAME_EXISTS" ? t.portal.accountsPage.headExists : t.common.tryAgain, }); } finally { setBusy(false); } } async function removeHead(h: Head) { if (!(await emsConfirm({ message: t.common.confirmDelete, danger: true }))) return; try { await api(`/api/portal/accounts/heads/${h.id}`, { method: "DELETE" }); reloadAll(); } catch (err) { setMessage({ type: "error", text: err instanceof Error && err.message === "HEAD_IN_USE" ? t.portal.accountsPage.headInUse : t.common.tryAgain, }); } } /* ---------- Vouchers ---------- */ function openVoucher(type: EntryType = "INCOME") { setVoucherForm({ ...emptyVoucher, type, date: today() }); setVoucherModal(true); } async function submitVoucher(e: React.FormEvent) { e.preventDefault(); setBusy(true); setMessage(null); try { const res = await api<{ entry: Entry }>("/api/portal/accounts/entries", { method: "POST", body: JSON.stringify({ headId: Number(voucherForm.headId), amount: Number(voucherForm.amount), date: voucherForm.date, method: voucherForm.method, party: voucherForm.party, note: voucherForm.note, }), }); setVoucherModal(false); setMessage({ type: "success", text: `${t.portal.accountsPage.voucherCreated}: ${res.entry.voucherNo}` }); reloadAll(); } catch { setMessage({ type: "error", text: t.common.tryAgain }); } finally { setBusy(false); } } async function removeEntry(e: Entry) { if (!(await emsConfirm({ message: t.portal.accountsPage.deleteVoucherConfirm, danger: true }))) return; try { await api(`/api/portal/accounts/entries/${e.id}`, { method: "DELETE" }); setMessage({ type: "success", text: t.portal.accountsPage.voucherDeleted }); reloadAll(); } catch { setMessage({ type: "error", text: t.common.tryAgain }); } } /* ---------- Report helpers ---------- */ function exportStatementCsv(r: Report) { const rows: (string | number)[][] = [ [t.portal.accountsPage.statementOf], [t.portal.accountsPage.reportPeriod, `${r.range.from}`, "→", r.range.to], [], [t.portal.accountsPage.incomeStatement], [t.common.category, t.portal.accountsPage.voucherCount, t.common.amount], ...r.incomeByHead.map((h) => [locale === "bn" && h.nameBn ? h.nameBn : h.name, h.count, h.total]), [t.portal.accountsPage.grandTotal, r.incomeByHead.reduce((s, h) => s + h.count, 0), r.totals.income], [], [t.portal.accountsPage.expenseStatement], [t.common.category, t.portal.accountsPage.voucherCount, t.common.amount], ...r.expenseByHead.map((h) => [locale === "bn" && h.nameBn ? h.nameBn : h.name, h.count, h.total]), [t.portal.accountsPage.grandTotal, r.expenseByHead.reduce((s, h) => s + h.count, 0), r.totals.expense], [], [t.portal.accountsPage.surplus, r.totals.balance], [], [t.portal.accountsPage.monthlyBreakdown], [t.common.month, t.portal.accountsPage.income, t.portal.accountsPage.expense, t.portal.accountsPage.surplus], ...r.monthly.map((m) => [m.label, m.income, m.expense, m.income - m.expense]), ]; downloadCsv(`accounts-statement-${r.range.from}-to-${r.range.to}`, rows); } function exportVouchersCsv() { const rows: (string | number)[][] = [ [ t.portal.accountsPage.voucherNo, t.common.date, t.portal.accountsPage.head, t.common.type, t.portal.accountsPage.party, t.common.method, t.common.amount, t.common.note, ], ...filteredEntries.map((e) => [ e.voucherNo, e.date.slice(0, 10), locale === "bn" && e.head.nameBn ? e.head.nameBn : e.head.name, e.type === "INCOME" ? t.portal.accountsPage.income : t.portal.accountsPage.expense, e.party ?? "", t.methods[e.method as keyof typeof t.methods], Number(e.amount), e.note ?? "", ]), ]; downloadCsv("accounts-vouchers", rows); } function printStatement(r: Report) { const instName = me.data?.user?.institution?.name ?? "IncrelogEMS"; const headName = (h: HeadRow) => (locale === "bn" && h.nameBn ? h.nameBn : h.name); const money = (n: number) => formatBDT(n, locale); const headTable = (rows: HeadRow[], total: number) => ` ${rows .map( (h) => ``, ) .join("")}
${t.common.category}${t.portal.accountsPage.voucherCount}${t.common.amount}
${headName(h)}${h.count}${money(h.total)}
${t.portal.accountsPage.grandTotal}${rows.reduce((s, h) => s + h.count, 0)}${money(total)}
`; const html = ` ${t.portal.accountsPage.reportTitle}

${instName}

${t.portal.accountsPage.statementOf} — ${t.portal.accountsPage.reportPeriod}: ${formatDate(r.range.from, locale)} → ${formatDate(r.range.to, locale)} | ${t.portal.accountsPage.generatedOn}: ${formatDate(new Date().toISOString(), locale)}

${t.portal.accountsPage.totalIncome}${money(r.totals.income)}
${t.portal.accountsPage.totalExpense}${money(r.totals.expense)}
${t.portal.accountsPage.surplus}${money(r.totals.balance)}

${t.portal.accountsPage.incomeStatement}

${headTable(r.incomeByHead, r.totals.income)}

${t.portal.accountsPage.expenseStatement}

${headTable(r.expenseByHead, r.totals.expense)}

${t.portal.accountsPage.monthlyBreakdown}

${r.monthly .map( (m) => ``, ) .join("")}
${t.common.month}${t.portal.accountsPage.income}${t.portal.accountsPage.expense}${t.portal.accountsPage.surplus}
${m.label}${money(m.income)}${money(m.expense)}${money(m.income - m.expense)}
`; const w = window.open("", "_blank", "width=900,height=700"); if (!w) return; w.document.write(html); w.document.close(); w.focus(); setTimeout(() => w.print(), 350); } const r = report.data; const voucherHeads = heads.filter((h) => h.isActive && h.type === voucherForm.type); const tabs: { id: Tab; label: string }[] = [ { id: "overview", label: t.portal.accountsPage.tabOverview }, { id: "heads", label: t.portal.accountsPage.tabHeads }, { id: "vouchers", label: t.portal.accountsPage.tabVouchers }, { id: "report", label: t.portal.accountsPage.tabReport }, ]; return (
openVoucher()}> {t.portal.accountsPage.newVoucher} } /> {message && (
setMessage(null)}>{message.text}
)} {/* Tabs */}
    {tabs.map((x) => (
    • ))}
{tab === "overview" && ( <>
} accent="teal" />
} accent="orange" />
} accent={(r?.totals.balance ?? 0) >= 0 ? "blue" : "red"} />
} accent="purple" hint={`${heads.length} ${t.portal.accountsPage.tabHeads}`} />
}> m.label)} series={[ { name: t.portal.accountsPage.income, data: (r?.monthly ?? []).map((m) => m.income), colors: ["#5ec8b4", "#24695c"] }, { name: t.portal.accountsPage.expense, data: (r?.monthly ?? []).map((m) => m.expense), colors: ["#f8c47e", "#f29d38"] }, ]} formatValue={(n) => formatBDT(n, locale)} />
}> {allEntries.length === 0 ? ( } title={t.portal.accountsPage.noVouchers} /> ) : (
{allEntries.slice(0, 6).map((e) => ( ))}
{t.portal.accountsPage.voucherNo} {t.portal.accountsPage.head} {t.common.amount}

{e.voucherNo}

{formatDate(e.date, locale)}

 {e.type === "INCOME" ? t.portal.accountsPage.income : t.portal.accountsPage.expense} {" "} {locale === "bn" && e.head.nameBn ? e.head.nameBn : e.head.name} {e.type === "INCOME" ? "+" : "−"}{formatBDT(e.amount, locale)}
)}
)} {tab === "heads" && (
{t.portal.accountsPage.tabHeads}
{headsData.loading ? (
) : heads.length === 0 ? (
} title={t.portal.accountsPage.noHeads} />
) : ( <>
{headsPager.paged.map((h) => ( ))}
{t.portal.accountsPage.headName} {t.common.type} {t.portal.accountsPage.entriesCount} {t.common.total} {t.common.actions}

{locale === "bn" && h.nameBn ? h.nameBn : h.name}

{!h.isActive && {t.common.inactive}} 		{h.type === "INCOME" ? t.portal.accountsPage.income : t.portal.accountsPage.expense} {h.entryCount} {formatBDT(h.total, locale)}
)}
)} {tab === "vouchers" && (
setFilterFrom(e.target.value)} />
setFilterTo(e.target.value)} />
{entriesData.loading ? (
) : filteredEntries.length === 0 ? (
} title={t.portal.accountsPage.noVouchers} />
) : ( <>
{entriesPager.paged.map((e) => ( ))}
{t.portal.accountsPage.voucherNo} {t.common.date} {t.portal.accountsPage.head} {t.portal.accountsPage.party} {t.common.method} {t.common.amount} {t.common.actions}
{e.voucherNo} {formatDate(e.date, locale)} {e.type === "INCOME" ? t.portal.accountsPage.income : t.portal.accountsPage.expense} {locale === "bn" && e.head.nameBn ? e.head.nameBn : e.head.name} {e.party ?? "—"} {t.methods[e.method as keyof typeof t.methods]} {e.type === "INCOME" ? "+" : "−"}{formatBDT(e.amount, locale)}
)}
)} {tab === "report" && (
{/* Range picker */}
setRangeForm({ ...rangeForm, from: e.target.value })} />
setRangeForm({ ...rangeForm, to: e.target.value })} />
{r && ( <> )}
{report.loading ? ( ) : !r ? (
) : r.totals.count === 0 ? (
} title={t.portal.accountsPage.noReportData} />
) : ( <>
} accent="teal" />
} accent="orange" />
} accent={r.totals.balance >= 0 ? "blue" : "red"} />
}> h.total > 0).map((h, i) => ({ label: locale === "bn" && h.nameBn ? h.nameBn : h.name, value: h.total, color: DONUT_COLORS[i % DONUT_COLORS.length], }))} formatValue={(n) => formatBDT(n, locale)} centerLabel={t.portal.accountsPage.income} centerValue={formatBDT(r.totals.income, locale)} />
}> h.total > 0).map((h, i) => ({ label: locale === "bn" && h.nameBn ? h.nameBn : h.name, value: h.total, color: DONUT_COLORS[(i + 3) % DONUT_COLORS.length], }))} formatValue={(n) => formatBDT(n, locale)} centerLabel={t.portal.accountsPage.expense} centerValue={formatBDT(r.totals.expense, locale)} />
}>
{r.incomeByHead.map((h) => ( ))}
{t.common.category} {t.portal.accountsPage.voucherCount} {t.common.amount}
{locale === "bn" && h.nameBn ? h.nameBn : h.name} {h.count} {formatBDT(h.total, locale)}
{t.portal.accountsPage.grandTotal} {r.incomeByHead.reduce((s, h) => s + h.count, 0)} {formatBDT(r.totals.income, locale)}
}>
{r.expenseByHead.map((h) => ( ))}
{t.common.category} {t.portal.accountsPage.voucherCount} {t.common.amount}
{locale === "bn" && h.nameBn ? h.nameBn : h.name} {h.count} {formatBDT(h.total, locale)}
{t.portal.accountsPage.grandTotal} {r.expenseByHead.reduce((s, h) => s + h.count, 0)} {formatBDT(r.totals.expense, locale)}
}>
{r.monthly.map((m) => ( ))}
{t.common.month} {t.portal.accountsPage.income} {t.portal.accountsPage.expense} {t.portal.accountsPage.surplus}
{m.label} {m.income > 0 ? formatBDT(m.income, locale) : "—"} {m.expense > 0 ? formatBDT(m.expense, locale) : "—"} = 0 ? "ems-text-teal" : "text-danger"}`}> {m.income || m.expense ? formatBDT(m.income - m.expense, locale) : "—"}
{t.portal.accountsPage.grandTotal} {formatBDT(r.totals.income, locale)} {formatBDT(r.totals.expense, locale)} {formatBDT(r.totals.balance, locale)}
)}
)} {/* Head modal */} setHeadModal(false)} title={editingHead ? t.portal.accountsPage.editHead : t.portal.accountsPage.newHead}>
setHeadForm({ ...headForm, name: e.target.value })} />
setHeadForm({ ...headForm, nameBn: e.target.value })} />
{!editingHead && (
)}
{/* Voucher modal */} setVoucherModal(false)} title={t.portal.accountsPage.newVoucher}>
setVoucherForm({ ...voucherForm, date: e.target.value })} />
setVoucherForm({ ...voucherForm, amount: e.target.value })} />
setVoucherForm({ ...voucherForm, party: e.target.value })} />