CoaAccountPanel
The detail panel for a selected account: current balance, normal balance and status, flags, balance history, recent transactions and AI mapping keywords, with an inline edit form.
import { CoaAccountPanel } from "@cynco-labs/ui";Example
import { CoaAccountPanel } from "@cynco-labs/ui";
export default function CoaAccountPanelDemo() {
return (
<CoaAccountPanel
className="max-w-96"
currency="MYR"
currentBalance={248315.4}
transactionCount={86}
lastTransactionAt="2026-10-28"
account={{
accountCode: "1000-001",
accountName: "Maybank Current Account",
accountType: "asset",
normalBalance: "debit",
isActive: true,
isBankAccount: true,
isCashAccount: true,
currency: "MYR",
isMonetary: true,
mappingKeywords: ["maybank", "m2u", "duitnow", "ibg"],
}}
balanceHistory={[
{
period: "2026-10",
periodDebit: 96420.0,
periodCredit: 42885.6,
closingBalance: 248315.4,
},
]}
transactions={[
{
id: "t1",
date: "2026-10-28",
description: "Receipt INV-2026-0142",
type: "debit",
amount: 12720.0,
source: "Bank feed",
},
]}
/>
);
}Use
Right-hand panel of the Chart of Accounts page.
Props
account { accountCode, accountName, accountType, normalBalance, isActive, description?, isSystemAccount?, isBankAccount?, isCashAccount?, isRetainedEarnings?, taxRelated?, currency?, isMonetary?, mappingKeywords? }, currency?, currentBalance, transactionCount, lastTransactionAt?, balanceHistory [{ period, periodDebit, periodCredit, closingBalance }], transactions [{ id, date, description, type, amount, source? }], defaultEditing?, onClose?, className? (merged on the root) and native props.
Notes
Balance tile is a StatTile on bg-interactive-secondary. Flags and keywords use Badge variant="muted". Responsive: Fills its container (no fixed width); balance tile is a StatTile and balance history a DataList that stacks inside a narrow panel.