Accounting · Tax, assets & operations
PurchaseOrderLinkedBills
Bills linked to a purchase order: bill number, issue date, amount and bill status.
import { PurchaseOrderLinkedBills } from "@cynco-labs/ui";Example
import { PurchaseOrderLinkedBills } from "@cynco-labs/ui";
export default function PurchaseOrderLinkedBillsDemo() {
return (
<div className="max-w-[460px]">
<PurchaseOrderLinkedBills
bills={[
{
id: "b1",
billNumber: "BILL-2026-0311",
status: "paid",
totalAmount: "5520.00",
issueDate: "2026-10-02",
},
{
id: "b2",
billNumber: "BILL-2026-0327",
status: "awaiting_payment",
totalAmount: "1802.00",
issueDate: "2026-10-19",
},
{ id: "b3", billNumber: null, status: "draft", totalAmount: null, issueDate: null },
]}
/>
</div>
);
}Use
PO detail sidebar.
Props
bills [{id, billNumber, status, totalAmount, currency, issueDate}]; optional currency, onOpen(id); optional className and native div props on the root.
Notes
Responsive by container: rows wrap amount and status under the bill number when narrow.