Accounting · Expenses & parties
BillAlerts
The stack of bill alerts: possible duplicate (with Dismiss), rejection notes, unused vendor credit (Apply vendor credit), vendor list load error and corrupted line items.
import { BillAlerts } from "@cynco-labs/ui";Example
import { BillAlerts } from "@cynco-labs/ui";
export default function BillAlertsDemo() {
return (
<div className="max-w-[640px]">
<BillAlerts
isDuplicate
duplicateBill={{
vendorName: "Grand Office Supplies",
billNumber: "GOS-55102",
totalAmount: 612.3,
}}
status="rejected"
rejectionNotes="SST charged at 10% — vendor is not SST-registered. Ask for a corrected invoice."
unusedCredit={{ amount: 450, currency: "MYR" }}
vendorLoadError
lineItemsCorrupted
/>
</div>
);
}Use
Above the bill form on the bill detail page.
Props
isDuplicate, duplicateBill, status, rejectionNotes, unusedCredit {amount, currency}, vendorLoadError, lineItemsCorrupted, onDismissDuplicate, onApplyCredit; className and native div props.
Notes
Responsive by container: each alert's action drops under its text below a 28rem container.