# BankAccountRail

Accounts as instruments: all-accounts net position, grouped account rows with avatar, feed glyph, statement-gap warning, compact balance, to-categorize count and settled meter, the 6-month net-flow sparkline, and add actions.

```tsx
import { BankAccountRail } from "@cynco-labs/ui";
```

## Usage

```tsx
import { BankAccountRail } from "@cynco-labs/ui";

export default function BankAccountRailDemo() {
	return (
		<BankAccountRail
			className="max-w-60"
			selectedId="mbb"
			net={[{ amount: 270250.75, currency: "MYR" }]}
			cashFlow={[
				{ month: "May", net: 12400 },
				{ month: "Jun", net: -4300 },
				{ month: "Jul", net: 18750 },
				{ month: "Aug", net: 9100 },
				{ month: "Sep", net: -2200 },
				{ month: "Oct", net: 15800 },
			]}
			accounts={[
				{
					id: "mbb",
					accountName: "Maybank Current",
					accountType: "checking",
					balance: 207985.25,
					institution: { name: "Maybank", shortName: "MBB", primaryColor: "#FFC72C" },
					counts: { imported: 12, categorized: 20, posted: 30, reconciled: 180 },
					feed: { health: "ok", summary: "Synced 2h ago" },
				},
				{
					id: "cimb",
					accountName: "CIMB Business",
					accountType: "checking",
					balance: 96210,
					institution: { name: "CIMB Bank", shortName: "CIMB", primaryColor: "#EC1C24" },
					counts: { categorized: 4, posted: 6, reconciled: 88 },
					hasChainIssue: true,
				},
				{
					id: "card",
					accountName: "Maybank Visa Business",
					accountType: "credit_card",
					balance: -8420.5,
					institution: { name: "Maybank", shortName: "MBB", primaryColor: "#FFC72C" },
					counts: { imported: 3, posted: 10, reconciled: 41 },
				},
				{
					id: "pay",
					accountName: "Billplz Collections",
					accountType: "payment_provider",
					balance: -25524,
					counts: { imported: 2, categorized: 5, reconciled: 60 },
					feed: { health: "failed", summary: "Sync failed · 1d ago" },
				},
			]}
		/>
	);
}
```

## Use

The left rail of the Banking workspace.

## Props

accounts [{id, accountName, accountType, balance, currency, institution, counts, hasChainIssue, feed {health, summary}}], selectedId, net [{amount, currency}] (never summed across currencies), cashFlow [{month, net}], className and native props (spread on the root).

## Notes

Fills its container (constrain it, e.g. max-w-60, when used as a side rail).

Category: Accounting · Banking. Source: `packages/ui/src/accounting/banking.tsx`.