CreditDebitNoteList
The credit and debit notes list: Note, Type, Customer, Amount, Status, Date and a row menu.
import { CreditDebitNoteList } from "@cynco-labs/ui";Example
import { CreditDebitNoteList } from "@cynco-labs/ui";
export default function CreditDebitNoteListDemo() {
return (
<CreditDebitNoteList
notes={[
{
id: "1",
noteNumber: "CN-2026-0018",
noteType: "credit",
customerName: "Tropika Kopi Enterprise",
totalAmount: 1620,
status: "partially_applied",
date: "2026-10-21",
},
{
id: "2",
noteNumber: "DN-2026-0007",
noteType: "debit",
customerName: "Nusantara Logistik Bhd",
totalAmount: 864,
status: "partially_paid",
date: "2026-10-18",
},
{
id: "3",
noteNumber: "CN-2026-0017",
noteType: "credit",
customerName: "Bayu Dental Clinic",
totalAmount: 350,
status: "fully_applied",
date: "2026-10-09",
},
{
id: "4",
noteNumber: null,
noteType: "credit",
customerName: "Kedai Runcit Pak Ali",
totalAmount: 48.6,
status: "draft",
date: "2026-10-29",
},
]}
/>
);
}Use
The Credit & Debit Notes page.
Props
notes ({id, noteNumber, noteType, customerName, totalAmount, currency, status, date}) and onOpen(id); className.
Notes
On the table tray, with statuses shown through DocStatus. The note type is a neutral tag with a coloured square: hue goes in the square, never the label. A draft note shows 'Draft' in place of its number. Responsive: built on DataList: a table from 48rem of container width, a stacked card per note below (note number and amount, then type and status, then customer and date).