QuotationBoardCard
One quotation on the Kanban board: customer, quotation number, status, total and relative age ('3d ago', 'Yesterday').
import { QuotationBoardCard } from "@cynco-labs/ui";Example
import { QuotationBoardCard } from "@cynco-labs/ui";
export default function QuotationBoardCardDemo() {
return (
<div className="grid gap-2 grid-cols-[repeat(auto-fit,minmax(13rem,1fr))]">
<QuotationBoardCard
now="2026-10-30"
quotation={{
id: "1",
quotationNumber: "QT-2026-0088",
customerName: "Syarikat Maju Jaya Sdn Bhd",
totalAmount: 18600,
status: "sent",
createdAt: "2026-10-27",
}}
/>
<QuotationBoardCard
now="2026-10-30"
quotation={{
id: "2",
quotationNumber: "QT-2026-0085",
customerName: "Bayu Dental Clinic",
totalAmount: 7450,
status: "accepted",
createdAt: "2026-10-14",
}}
/>
<QuotationBoardCard
now="2026-10-30"
quotation={{
id: "3",
quotationNumber: "QT-2026-0079",
customerName: "Rimba Hijau Landscaping",
totalAmount: 2300,
status: "expired",
createdAt: "2026-08-29",
}}
/>
</div>
);
}Use
Inside QuotationBoardColumn, or anywhere you show a quotation at a glance.
Props
quotation ({id, quotationNumber, customerName, totalAmount, currency, status, createdAt}), now (reference date for the relative time), onOpen; className and native button props.
Notes
A bg-card rounded-xl button that hovers to interactive-secondary-hover. The status is a DocStatus chip, with Converted on the refresh glyph. Responsive: the status moves under the name when the card is very narrow.