fix(web): keep pay date editable on the approved grid

src/dashboard/DashboardGrids.tsx

@@ -5,7 +5,7 @@ import { ColumnsDrawer } from "@/dashboard/ColumnsDrawer";
 import { InvoiceFilterToolbar } from "@/dashboard/InvoiceFilterToolbar";
 import { CreatePayRunButton } from "@/dashboard/CreatePayRunButton";
 import { InvoiceDataGrid } from "@/dashboard/InvoiceDataGrid";
-import { columnsFromCatalogKeys } from "@/dashboard/columns";
+import { columnsForApprovedGrid, columnsFromCatalogKeys } from "@/dashboard/columns";
 import {
   loadColumnPrefs,
   resetColumnPrefs,
@@ -85,6 +85,10 @@ export function DashboardGrids() {
     () => columnsFromCatalogKeys(columnPrefs.visibleOrder),
     [columnPrefs.visibleOrder],
   );
+  const approvedColumns = useMemo(
+    () => columnsForApprovedGrid(columnPrefs.visibleOrder),
+    [columnPrefs.visibleOrder],
+  );
 
   const openInvoice = (params: GridRowParams<MockInvoice>) => {
     navigate("/invoices/:id", { params: { id: params.row.id } });
@@ -281,7 +285,7 @@ export function DashboardGrids() {
           <InvoiceDataGrid
             data-testid="grid-ready"
             rows={filteredApproved}
-            columns={catalogColumns}
+            columns={approvedColumns}
             checkboxSelection
             rowSelectionModel={selection}
             onRowSelectionModelChange={(model) => setSelection(model)}

src/dashboard/approved-columns.ts

@@ -0,0 +1,16 @@
+import type { GridColDef } from "@mui/x-data-grid";
+import type { MockInvoice } from "@/mocks";
+
+/** Keep one editable pay-date column on the approved grid. */
+export function withEditablePayDate(
+  columns: GridColDef<MockInvoice>[],
+  payDateColumn: GridColDef<MockInvoice>,
+): GridColDef<MockInvoice>[] {
+  const next = columns.map((column) =>
+    column.field === "payDate" ? { ...column, editable: true } : column,
+  );
+  if (next.some((column) => column.field === "payDate")) {
+    return next;
+  }
+  return [...next, { ...payDateColumn, editable: true }];
+}

src/dashboard/columns.test.ts

@@ -1,4 +1,7 @@
+import type { GridColDef } from "@mui/x-data-grid";
 import { describe, expect, it } from "vitest";
+import { withEditablePayDate } from "@/dashboard/approved-columns";
+import type { MockInvoice } from "@/mocks";
 import { formatRelativeFromIsoDate, formatSlashDate } from "@/dashboard/invoice-date-format";
 
 describe("invoice column date helpers (AP-47)", () => {
@@ -26,3 +29,22 @@ describe("invoice column date helpers (AP-47)", () => {
     expect(formatRelativeFromIsoDate("2026-10-11", now)).toBe("in 2 months");
   });
 });
+
+describe("withEditablePayDate", () => {
+  const hidden: GridColDef<MockInvoice> = { field: "vendorName", headerName: "Vendor" };
+  const payDate: GridColDef<MockInvoice> = { field: "payDate", headerName: "Payment Date" };
+
+  it("appends an editable pay date when the catalog hides Payment Date", () => {
+    const columns = withEditablePayDate([hidden], payDate);
+    expect(columns.filter((column) => column.field === "payDate")).toEqual([
+      { field: "payDate", headerName: "Payment Date", editable: true },
+    ]);
+  });
+
+  it("keeps a single editable pay date when Payment Date is already visible", () => {
+    const columns = withEditablePayDate([hidden, { ...payDate, editable: false }], payDate);
+    const matches = columns.filter((column) => column.field === "payDate");
+    expect(matches).toHaveLength(1);
+    expect(matches[0]?.editable).toBe(true);
+  });
+});

src/dashboard/columns.tsx

@@ -4,6 +4,7 @@ import NotificationsNoneOutlinedIcon from "@mui/icons-material/NotificationsNone
 import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
 import { Box, Link as MuiLink, Stack, Typography } from "@mui/material";
 import type { GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
+import { withEditablePayDate } from "@/dashboard/approved-columns";
 import type { InvoiceColumnKey } from "@/dashboard/column-catalog";
 import { formatRelativeFromIsoDate, formatSlashDate } from "@/dashboard/invoice-date-format";
 import type { MockInvoice } from "@/mocks";
@@ -250,6 +251,11 @@ export function columnsFromCatalogKeys(keys: InvoiceColumnKey[]): GridColDef<Moc
   return keys.map((key) => catalogColumnDefs[key]);
 }
 
+/** Approved tab keeps an editable pay date even when the catalog hides Payment Date. */
+export function columnsForApprovedGrid(keys: InvoiceColumnKey[]): GridColDef<MockInvoice>[] {
+  return withEditablePayDate(columnsFromCatalogKeys(keys), catalogColumnDefs.paymentDate);
+}
+
 export const readyToPayColumns: GridColDef<MockInvoice>[] = [
   {
     field: "invoiceNumber",