# AgedReceivablesReport

Printable aged receivables by customer: current, 1–30, 31–60, 61–90 and 90+ days with a total column, a totals row with double rule, a % of total row, and a bucket summary with proportional bars.

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

## Usage

```tsx
import { useState } from "react";
import { AgedReceivablesReport, DocumentBrandProvider, GroupedTabButton } from "@cynco-labs/ui";

const BRAND = {
	company: {
		name: "Harmoni Perabot Sdn Bhd",
		registrationNo: "201801034567 (1290456-T)",
		sstNo: "P11-1809-32001234",
		tin: "C23456789010",
		address: ["Lot 15, Jalan Perindustrian Bukit Minyak 7", "14100 Simpang Ampat, Pulau Pinang"],
		phone: "+60 4-508 2210",
		email: "finance@harmoniperabot.my",
	},
	layout: "minimal",
	locale: "en",
	footerNote: "Thank you for your business.",
};

function Shell(p) {
	const [l, setL] = useState("minimal"),
		[g, setG] = useState("en"),
		[x, setX] = useState(p.extra ? p.extra.options[0].value : "");
	return (
		<div className="flex flex-col gap-3">
			<div className="flex flex-wrap gap-2">
				<GroupedTabButton
					className="min-w-[260px] flex-1"
					value={l}
					onValueChange={setL}
					options={[
						{ value: "minimal", label: "Minimal" },
						{ value: "classic", label: "Classic" },
						{ value: "modern", label: "Modern" },
					]}
				/>
				<GroupedTabButton
					className="w-[190px]"
					value={g}
					onValueChange={setG}
					options={[
						{ value: "en", label: "EN" },
						{ value: "ms", label: "BM" },
						{ value: "en-ms", label: "EN+BM" },
					]}
				/>
				{p.extra ? (
					<GroupedTabButton
						className="w-[230px]"
						value={x}
						onValueChange={setX}
						options={p.extra.options}
					/>
				) : null}
			</div>
			<DocumentBrandProvider brand={Object.assign({}, BRAND, { layout: l, locale: g })}>
				{p.render(x)}
			</DocumentBrandProvider>
		</div>
	);
}

const DATA = {
	period: { kind: "asAt", end: "2026-10-31" },
	currency: "MYR",
	filters: [
		{ label: "Ageing by", value: "Due date" },
		{ label: "Customers", value: "Open balances only" },
	],
	preparedBy: "Lim Wei Ling, Credit Control",
	preparedOn: "2026-11-01",
	notes:
		"Wong & Partners Architects (over 90 days) is with our solicitors; a specific allowance will be considered at year end.",
	customers: [
		{
			name: "Nusantara Logistik Bhd",
			code: "C-0012",
			detail: "C-0012 · Net 30",
			current: "64847.99",
			days1to30: "29476.35",
			days31to60: "14148.64",
			days61to90: "5895.27",
			over90: "3537.16",
			total: "117905.41",
		},
		{
			name: "Hotel Seri Pinang Sdn Bhd",
			code: "C-0027",
			detail: "C-0027 · Net 45",
			current: "38369.30",
			days1to30: "33573.11",
			days31to60: "14388.47",
			days61to90: "9592.31",
			over90: "0.00",
			total: "95923.19",
		},
		{
			name: "IKEO Home Solutions Sdn Bhd",
			code: "C-0031",
			detail: "C-0031 · Net 30",
			current: "57354.15",
			days1to30: "24580.35",
			days31to60: "0.00",
			days61to90: "0.00",
			over90: "0.00",
			total: "81934.50",
		},
		{
			name: "Rumah Idaman Interior",
			code: "C-0044",
			detail: "C-0044 · Net 30",
			current: "8792.96",
			days1to30: "13189.47",
			days31to60: "10991.20",
			days61to90: "6594.72",
			over90: "4396.48",
			total: "43964.83",
		},
		{
			name: "Syarikat Kayu Jati Utara",
			code: "C-0051",
			detail: "C-0051 · Net 60",
			current: "15287.73",
			days1to30: "10191.81",
			days31to60: "10191.81",
			days61to90: "5095.90",
			over90: "10191.81",
			total: "50959.06",
		},
		{
			name: "Penang Cohort Co-Working Sdn Bhd",
			code: "C-0058",
			detail: "C-0058 · Net 30",
			current: "17985.09",
			days1to30: "0.00",
			days31to60: "0.00",
			days61to90: "0.00",
			over90: "0.00",
			total: "17985.09",
		},
		{
			name: "Klinik Pergigian Senyum",
			code: "C-0063",
			detail: "C-0063 · COD",
			current: "0.00",
			days1to30: "0.00",
			days31to60: "2797.88",
			days61to90: "2098.40",
			over90: "2098.40",
			total: "6994.68",
		},
		{
			name: "Universiti Teknologi Lestari",
			code: "C-0070",
			detail: "C-0070 · Net 60",
			current: "22981.56",
			days1to30: "22981.56",
			days31to60: "0.00",
			days61to90: "0.00",
			over90: "0.00",
			total: "45963.12",
		},
		{
			name: "Grand Borneo Resort Sdn Bhd",
			code: "C-0074",
			detail: "C-0074 · Net 45",
			current: "17086.27",
			days1to30: "11390.83",
			days31to60: "9492.36",
			days61to90: "0.00",
			over90: "0.00",
			total: "37969.46",
		},
		{
			name: "Butterworth Office Supplies",
			code: "C-0081",
			detail: "C-0081 · Net 30",
			current: "9592.60",
			days1to30: "2398.14",
			days31to60: "0.00",
			days61to90: "0.00",
			over90: "0.00",
			total: "11990.74",
		},
		{
			name: "Taman Desa Property Management",
			code: "C-0088",
			detail: "C-0088 · Net 30",
			current: "5395.25",
			days1to30: "0.00",
			days31to60: "3596.82",
			days61to90: "0.00",
			over90: "0.00",
			total: "8992.07",
		},
		{
			name: "Wong & Partners Architects",
			code: "C-0092",
			detail: "C-0092 · Net 30",
			current: "0.00",
			days1to30: "0.00",
			days31to60: "0.00",
			days61to90: "0.00",
			over90: "3598.10",
			total: "3598.10",
		},
	],
	totals: {
		current: "257692.90",
		days1to30: "147781.62",
		days31to60: "65607.18",
		days61to90: "29276.60",
		over90: "23821.95",
		total: "524180.25",
	},
	percentages: {
		current: "49.2",
		days1to30: "28.2",
		days31to60: "12.5",
		days61to90: "5.6",
		over90: "4.5",
		total: "100.0",
	},
};

export default function AgedReceivablesReportDemo() {
	return <Shell render={() => <AgedReceivablesReport report={DATA} />} />;
}
```

## Use

Credit-control meetings, month-end receivables review, bank covenant and auditor packs.

## Props

report: AgedReceivablesData — period (kind 'asAt'), customers [{name, detail?, current, days1to30, days31to60, days61to90, over90, total}], totals {…same buckets}, percentages {…same buckets, e.g. '49.2'}, summary?, basis?, currency?, filters?, preparedBy?, preparedOn?, notes?; plus brand?, size?, stamp?, fit?, isolate?, className.

## Notes

Bucket bars deepen from light to dark grey with age (black ink only). Percentages are supplied by the ledger, not calculated. Customer detail line suits code and terms ('C-0012 · Net 30'). A4 portrait by default (very long names wrap; pass size='a4-landscape' for wide ledgers).

Category: Documents. Source: `packages/ui/src/documents/reports.tsx`.