QuotationBoardColumn
One Kanban column of the quotations board (Draft, Sent / Viewed, Accepted, or Rejected / Expired): icon, label and count above a tray of cards with a column Total, or an empty message.
import { QuotationBoardColumn } from "@cynco-labs/ui";Example
import { QuotationBoardColumn } from "@cynco-labs/ui";
export default function QuotationBoardColumnDemo() {
return (
<div className="grid gap-3 grid-cols-[repeat(auto-fit,minmax(13rem,1fr))]">
<QuotationBoardColumn
column="active"
now="2026-10-30"
quotations={[
{
id: "1",
quotationNumber: "QT-2026-0088",
customerName: "Syarikat Maju Jaya Sdn Bhd",
totalAmount: 18600,
status: "sent",
createdAt: "2026-10-27",
},
{
id: "2",
quotationNumber: "QT-2026-0087",
customerName: "Tropika Kopi Enterprise",
totalAmount: 4280,
status: "viewed",
createdAt: "2026-10-29",
},
{
id: "3",
quotationNumber: "QT-2026-0084",
customerName: "Nusantara Logistik Bhd",
totalAmount: 52000,
status: "sent",
createdAt: "2026-10-12",
},
]}
/>
<QuotationBoardColumn
column="accepted"
now="2026-10-30"
quotations={[
{
id: "4",
quotationNumber: "QT-2026-0085",
customerName: "Bayu Dental Clinic",
totalAmount: 7450,
status: "accepted",
createdAt: "2026-10-14",
},
{
id: "5",
quotationNumber: "QT-2026-0080",
customerName: "Cahaya Print Services",
totalAmount: 3120,
status: "converted",
createdAt: "2026-09-30",
},
]}
/>
<QuotationBoardColumn column="draft" quotations={[]} />
</div>
);
}Use
Board view of the Quotations page, with four columns side by side.
Props
column ('draft' | 'active' | 'accepted' | 'terminal'), quotations, currency, now, onOpen; className and native section props.
Notes
Responsive: Fluid width (no fixed minimum): lay the columns out in an auto-fit grid or a ScrollRow.