import type { GridColDef } from "@mui/x-data-grid"; import type { MockInvoice } from "@/mocks"; const currencyFormatter = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", }); const dateFormatter = new Intl.DateTimeFormat("en-US", { year: "numeric", month: "short", day: "numeric", }); function formatIsoDate(value: string | null | undefined): string { if (!value) { return "—"; } const parsed = new Date(`${value}T00:00:00`); if (Number.isNaN(parsed.getTime())) { return value; } return dateFormatter.format(parsed); } function formatCurrency(value: number | null | undefined): string { if (value == null) { return "—"; } return currencyFormatter.format(value); } const moneyColumn = (field: keyof MockInvoice, headerName: string): GridColDef => ({ field, headerName, flex: 1, minWidth: 120, type: "number", valueFormatter: (value: number | null | undefined) => formatCurrency(value), }); const dateColumn = ( field: keyof MockInvoice, headerName: string, editable = false, ): GridColDef => ({ field, headerName, flex: 1, minWidth: 130, editable, valueFormatter: (value: string | null | undefined) => formatIsoDate(value), }); export const pendingApprovalColumns: GridColDef[] = [ { field: "invoiceNumbers", headerName: "Invoice #", flex: 1, minWidth: 120 }, { field: "vendorName", headerName: "Vendor", flex: 1.4, minWidth: 160 }, dateColumn("dueDate", "Due Date"), dateColumn("sendPaymentOn", "Send Payment On"), { field: "paymentMethod", headerName: "Payment Method", flex: 1, minWidth: 130 }, moneyColumn("amountDue", "Amount Due"), moneyColumn("amount", "Amount"), ]; export const readyToPayColumns: GridColDef[] = [ dateColumn("dueDate", "Due Date"), dateColumn("payDate", "Pay Date", true), { field: "vendorName", headerName: "Vendor", flex: 1.4, minWidth: 160 }, { field: "invoiceNumber", headerName: "Invoice #", flex: 1, minWidth: 120 }, moneyColumn("amountDue", "Amount Due"), ]; export const allInvoicesColumns: GridColDef[] = [ { field: "invoiceNumber", headerName: "Invoice #", flex: 1, minWidth: 120 }, { field: "vendorName", headerName: "Vendor", flex: 1.4, minWidth: 160 }, { field: "status", headerName: "Status", flex: 1, minWidth: 140 }, dateColumn("dueDate", "Due Date"), dateColumn("payDate", "Pay Date"), { field: "paymentMethod", headerName: "Payment Method", flex: 1, minWidth: 130 }, moneyColumn("amountDue", "Amount Due"), moneyColumn("amount", "Amount"), ];