MarkAsPaidDialog
Records a manual payment against an invoice: a fact block (customer, invoice, amount, balance to record), payment date, payment method chips, the 'Deposited to' bank account, a note, an offline-payment warning and confirm, plus a 'Payment recorded' success state.
import { MarkAsPaidDialog } from "@cynco-labs/ui";Example
import { MarkAsPaidDialog } from "@cynco-labs/ui";
export default function MarkAsPaidDialogDemo() {
return (
<MarkAsPaidDialog
defaultOpen
modal={false}
invoice={{
invoiceNumber: "INV-2026-0139",
customerName: "Nusantara Logistik Bhd",
total: 28400,
paidAmount: 10000,
currency: "MYR",
}}
paymentDate="2026-10-30"
paymentMethod="bank_transfer"
bankAccount="1000-001"
bankAccounts={[
{ accountCode: "1000-001", accountName: "Maybank Current Account" },
{ accountCode: "1000-002", accountName: "CIMB Business Account" },
]}
/>
);
}Use
From an invoice's Mark as paid action, for payments received offline.
Props
open, defaultOpen, modal, onOpenChange, invoice ({invoiceNumber, customerName, total, paidAmount, currency}), paymentDate, paymentMethod, bankAccounts ({accountCode, accountName}), bankAccount, note, isSubmitting, showSuccess, onConfirm; className (merged onto the dialog panel).
Notes
Dialog and DialogContent, with the fact block on bg-table-tray and sections divided by table-row-divider. The warning is Alert variant="warning", and bank accounts show their mono account code. Confirm is the primary Button, and it is disabled with no date or when a bank account is required but not chosen. Responsive: The fact block stacks its labels above the values in a narrow dialog, the method chips wrap, and the panel scrolls within the viewport.