seahaven-ap/src/dashboard/columns.tsx

import BoltOutlinedIcon from "@mui/icons-material/BoltOutlined";
import NotificationsNoneOutlinedIcon from "@mui/icons-material/NotificationsNoneOutlined";
import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
import { Link as MuiLink } from "@mui/material";
import type { GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
import type { InvoiceColumnKey } from "@/dashboard/column-catalog";
import type { MockInvoice } from "@/mocks";
import { Link } from "@/router";

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<MockInvoice> => ({
  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<MockInvoice> => ({
  field,
  headerName,
  flex: 1,
  minWidth: 130,
  editable,
  valueFormatter: (value: string | null | undefined) => formatIsoDate(value),
});

function invoiceNumberLink(params: GridRenderCellParams<MockInvoice, string>) {
  return (
    <MuiLink
      component={Link}
      to="/invoices/:id"
      params={{ id: params.row.id }}
      underline="hover"
      data-testid={`invoice-link-${params.row.id}`}
      onClick={(event) => event.stopPropagation()}
    >
      {params.value}
    </MuiLink>
  );
}

export const pendingApprovalColumns: GridColDef<MockInvoice>[] = [
  {
    field: "invoiceNumbers",
    headerName: "Invoice #",
    flex: 1,
    minWidth: 120,
    renderCell: invoiceNumberLink,
  },
  { 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"),
];

/** Invoice Processing — For My Attention columns (AP-26). */
export const invoiceAttentionColumns: GridColDef<MockInvoice>[] = [
  {
    field: "invoiceNumbers",
    headerName: "Invoice",
    flex: 1,
    minWidth: 120,
    renderCell: invoiceNumberLink,
  },
  {
    field: "actionLabel",
    headerName: "Action",
    flex: 1.2,
    minWidth: 140,
  },
  { field: "vendorName", headerName: "Vendor", flex: 1.4, minWidth: 160 },
  dateColumn("dueDate", "Due Date"),
  moneyColumn("amountDue", "Σ Sum"),
];

const iconColumn = (
  field: "hasBolt" | "hasBell" | "hasEye",
  headerName: string,
  Icon: typeof BoltOutlinedIcon,
): GridColDef<MockInvoice> => ({
  field,
  headerName,
  width: 56,
  sortable: false,
  filterable: false,
  renderCell: (params) => (params.value ? <Icon fontSize="small" color="action" /> : null),
});

/** Full catalog column defs keyed by AP-41 HTML column keys (AP-47). */
export const catalogColumnDefs: Record<InvoiceColumnKey, GridColDef<MockInvoice>> = {
  bolt: iconColumn("hasBolt", "", BoltOutlinedIcon),
  bell: iconColumn("hasBell", "", NotificationsNoneOutlinedIcon),
  invoiceId: {
    field: "invoiceNumbers",
    headerName: "Invoice",
    flex: 1,
    minWidth: 120,
    renderCell: invoiceNumberLink,
  },
  userStatus: { field: "actionLabel", headerName: "Action", flex: 1.2, minWidth: 140 },
  vendor: { field: "vendorName", headerName: "Vendor", flex: 1.4, minWidth: 160 },
  lastUpdate: dateColumn("lastUpdate", "Last Update"),
  invoiceDate: dateColumn("invoiceDate", "Invoice Date"),
  dueDate: dateColumn("dueDate", "Due Date"),
  amount: moneyColumn("amountDue", "Sum"),
  tagging: { field: "tagging", headerName: "Tagging", flex: 0.8, minWidth: 100 },
  fs: { field: "fs", headerName: "F.S.", flex: 0.6, minWidth: 80 },
  eye: iconColumn("hasEye", "", VisibilityOutlinedIcon),
  description: { field: "description", headerName: "Description", flex: 1.4, minWidth: 160 },
  type: { field: "invoiceType", headerName: "Invoice Type", flex: 1, minWidth: 120 },
  location: { field: "location", headerName: "Location", flex: 1, minWidth: 120 },
  paymentAccount: {
    field: "paymentAccount",
    headerName: "Payment Account",
    flex: 1.2,
    minWidth: 140,
  },
  paymentDate: dateColumn("payDate", "Payment Date"),
  processingBegan: dateColumn("processingBegan", "Processing Began"),
  relatedInvoice: {
    field: "relatedInvoice",
    headerName: "Related Invoice",
    flex: 1,
    minWidth: 120,
    valueFormatter: (value: string | null) => value ?? "—",
  },
  rowCount: {
    field: "rowCount",
    headerName: "Row count",
    width: 100,
    type: "number",
  },
};

export function columnsFromCatalogKeys(keys: InvoiceColumnKey[]): GridColDef<MockInvoice>[] {
  return keys.map((key) => catalogColumnDefs[key]);
}

export const readyToPayColumns: GridColDef<MockInvoice>[] = [
  {
    field: "invoiceNumber",
    headerName: "Invoice",
    flex: 1,
    minWidth: 120,
    renderCell: invoiceNumberLink,
  },
  { field: "vendorName", headerName: "Vendor Name", flex: 1.4, minWidth: 160 },
  { field: "paymentMethod", headerName: "Payment Method", flex: 1, minWidth: 130 },
  dateColumn("sendPaymentOn", "Send Payment On"),
  dateColumn("dueDate", "Due Date"),
  dateColumn("payDate", "Pay Date", true),
  moneyColumn("amountDue", "Amount Due"),
];

export const allInvoicesColumns: GridColDef<MockInvoice>[] = [
  {
    field: "invoiceNumber",
    headerName: "Invoice #",
    flex: 1,
    minWidth: 120,
    renderCell: invoiceNumberLink,
  },
  { 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"),
];