Accounting · Expenses & parties
PartyTimeline
The party Activity story: month-grouped invoices/bills, payments and bank lines with day, kind dot, reference, due date, status, Overdue chip and amount (with MYR equivalent for foreign documents).
import { PartyTimeline } from "@cynco-labs/ui";Example
import { PartyTimeline } from "@cynco-labs/ui";
export default function PartyTimelineDemo() {
return (
<div className="max-w-[620px]">
<PartyTimeline
role="customer"
events={[
{
id: "e1",
kind: "payment",
date: "2026-10-28",
title: "DuitNow transfer",
reference: "INV-2026-0142",
amount: -8500,
status: "completed",
},
{
id: "e2",
kind: "document",
date: "2026-10-21",
title: "INV-2026-0156",
reference: "PO-MESRA-3381",
dueDate: "2026-11-20",
amount: 12480.5,
status: "finalized",
},
{
id: "e3",
kind: "document",
date: "2026-10-06",
title: "INV-2026-0149",
dueDate: "2026-11-05",
amount: 3450,
currency: "SGD",
baseAmount: 11316.0,
status: "finalized",
},
{
id: "e4",
kind: "document",
date: "2026-09-15",
title: "INV-2026-0131",
reference: "PO-MESRA-3302",
dueDate: "2026-10-15",
amount: 6680,
status: "overdue",
overdue: true,
},
{
id: "e5",
kind: "bank",
date: "2026-09-09",
title: "Maybank · IBG MESRA SDN BHD",
amount: -4200,
},
{
id: "e6",
kind: "payment",
date: "2026-09-02",
title: "Cheque 004512",
reference: "INV-2026-0117",
amount: -6000,
status: "completed",
},
]}
/>
</div>
);
}Use
Activity tab of customer and vendor pages.
Props
events [{kind, date, title, reference, status, dueDate, overdue, amount, currency, baseAmount}], role, currency; className and native div props.
Notes
Responsive by container: below a 28rem container the day joins the detail line and titles wrap to two lines.