@aglyn/plugins-commerce 1.0.0-beta.189 → 1.0.0-beta.191

package/src/lib/components/console/host-orders-card.component.js

@@ -18,10 +18,14 @@ import { _ as _extends } from "@swc/helpers/_/_extends";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as CommerceModel from "../../model/index.js";
 import { CardDisplay } from "@aglyn/shared-ui-jsx";
-import { ScrollTable } from "@aglyn/shared-ui-jsx/components/scroll-table.component";
+import ListFilterChips from "@aglyn/shared-ui-jsx/components/list-filter-chips.component";
+import { ListTable } from "@aglyn/shared-ui-jsx/components/list-table.component";
+import { hiddenFilterVisibility } from "@aglyn/shared-ui-jsx/const/list-filter";
+import { inMemoryListField, upsertListFilterClause } from "@aglyn/shared-ui-jsx/const/list-grid-filter";
+import { useListRowsFilter } from "@aglyn/shared-ui-jsx/hooks/use-list-rows-filter";
 import { useSnackbar } from "@aglyn/shared-ui-snackstack";
 import { checkEntitlement, ORDERS_CUSTOMER_PARAM, ORDERS_ORDER_PARAM, pluginDocsHelp } from "@aglyn/aglyn";
-import { Alert, AlertTitle, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, MenuItem, Stack, TableBody, TableCell, TableHead, TableRow, TextField, Tooltip, Typography } from "@mui/material";
+import { Alert, AlertTitle, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, MenuItem, Stack, TextField, Tooltip, Typography } from "@mui/material";
 import { collection, doc, getDoc, limit, orderBy, query } from "firebase/firestore";
 import { useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -33,13 +37,83 @@ import OrderDetailDialog, { DISPUTE_COLOR } from "./order-detail-dialog.componen
 /**
  * How far back the table, its filters and its export reach.
  *
- * This window cannot be paged the way a plain list can. Five filters and the
- * CSV export all run over what was read, so a page of ten would quietly narrow
- * every one of them — a status filter would search a tenth of the orders and
- * report confidently on what it found. Bounding the read and saying where the
+ * This window cannot be paged the way a plain list can. The Filters panel,
+ * the search and the CSV export all run over what was read, so a page of ten
+ * would quietly narrow every one of them — a status filter would search a
+ * tenth of the orders and report confidently on what it found. Bounding the read and saying where the
  * bound falls keeps the filters honest about their own scope.
  */ const ORDERS_WINDOW = 200;
 /** A name map for the filter menu; it renders no product rows of its own. */ const PRODUCT_NAME_WINDOW = 100;
+/*
+ * What the orders grid's Filters panel offers. The card holds its whole
+ * window, so the panel and the search answer over every order it read.
+ *
+ * Status and Channel are the order's own enumerations; Disputes is apart
+ * from Status on purpose, because the two are orthogonal: an OPEN dispute
+ * sits on an order that is still `paid`, and a lost one on `refunded`
+ * beside every ordinary refund. Product is the ids of every line item, so
+ * a cart, POS or draft order is found by any product it holds. The date is
+ * the field the query orders by, which every order writer stamps.
+ */ const ORDER_FILTER_FIELDS = [
+    inMemoryListField('orderLabel', 'text'),
+    inMemoryListField('customerEmail', 'text'),
+    inMemoryListField('channelKey', 'select'),
+    inMemoryListField('statusKey', 'select'),
+    inMemoryListField('createdAtMs', 'date'),
+    _extends({}, inMemoryListField('productIds', 'select'), {
+        tokensPath: 'productIds',
+        verbatimTokens: true
+    }),
+    inMemoryListField('disputeKey', 'select')
+];
+const ORDER_FILTER_HEADERS = {
+    orderLabel: 'Order',
+    customerEmail: 'Customer',
+    channelKey: 'Channel',
+    statusKey: 'Status',
+    createdAtMs: 'Date',
+    productIds: 'Product',
+    disputeKey: 'Disputes'
+};
+const ORDER_STATUS_OPTIONS = Object.keys(CommerceModel.ORDER_STATUS_LABELS).map((status)=>({
+        value: status,
+        label: CommerceModel.ORDER_STATUS_LABELS[status]
+    }));
+const ORDER_CHANNEL_OPTIONS = Object.keys(CommerceModel.ORDER_CHANNEL_LABELS).map((channel)=>({
+        value: channel,
+        label: CommerceModel.ORDER_CHANNEL_LABELS[channel]
+    }));
+/*
+ * `lost` is the badge's tone, not the raw dispute status: a dispute that was
+ * WON also closes with money untouched, and listing it as charged back would
+ * tell a merchant they lost a case they won.
+ */ const ORDER_DISPUTE_OPTIONS = [
+    {
+        value: 'open',
+        label: 'Open dispute'
+    },
+    {
+        value: 'lost',
+        label: 'Charged back'
+    }
+];
+/** What the quick search reads on an order row. */ const ORDER_SEARCH_FIELDS = [
+    'orderLabel',
+    'customerEmail',
+    'itemName'
+];
+/** The filter-only columns never show. */ const ORDER_HIDDEN_COLUMNS = hiddenFilterVisibility(ORDER_FILTER_FIELDS, [
+    'orderLabel',
+    'customerEmail',
+    'channelKey',
+    'statusKey',
+    'createdAtMs'
+]);
+/** The clause the dispute banner's "Show them" sets. */ const OPEN_DISPUTE_CLAUSE = {
+    field: 'disputeKey',
+    op: 'equals',
+    value: 'open'
+};
 /**
  * Orders console (AGL-287): filterable list over webhook-written order
  * docs with a detail dialog (timeline, fulfill, refund, cancel, notes,
@@ -97,28 +171,23 @@ import OrderDetailDialog, { DISPUTE_COLOR } from "./order-detail-dialog.componen
     // The query returns the window already newest-first; re-sorting it here
     // would only restate the order it arrived in.
     const orders = orderWindow.rows;
-    // Filters + CSV export (AGL-96) over the loaded window.
-    const [productFilter, setProductFilter] = useState('');
-    const [dateFilter, setDateFilter] = useState('');
-    const [statusFilter, setStatusFilter] = useState('');
-    const [channelFilter, setChannelFilter] = useState('');
-    /**
-   * Disputes filter (AGL-1796), separate from Status on purpose: the two are
-   * orthogonal. An OPEN dispute sits on an order that is still `paid`, and a
-   * lost one sits on `refunded` beside every ordinary refund — so folding
-   * either into the Status select would make that control lie about what it
-   * selects.
-   */ const [disputeFilter, setDisputeFilter] = useState('');
     /*
-   * Customer filter (AGL-2622): the buyer's address, matched as a substring
-   * of `customerEmail` so a domain finds every buyer at a company. Seeded
-   * from the URL, because the CRM's contact page links here with the
-   * person's address to answer "what has this customer ordered" — the
-   * orders count on the record is the number, and this list is the rows.
+   * The grid's clauses (AGL-96, AGL-3317), held here so two things outside
+   * the grid can set one: the CRM's contact page links with the buyer's
+   * address to answer "what has this customer ordered" (AGL-2622), seeded as
+   * a Customer clause matched as a substring so a domain finds every buyer at
+   * a company; and the dispute banner's "Show them".
    */ const searchParams = useSearchParams();
-    const [customerFilter, setCustomerFilter] = useState(()=>{
-        var _ref;
-        return (_ref = searchParams == null ? void 0 : searchParams.get(ORDERS_CUSTOMER_PARAM)) != null ? _ref : '';
+    const [clauses, setClauses] = useState(()=>{
+        var _searchParams_get;
+        const customer = searchParams == null ? void 0 : (_searchParams_get = searchParams.get(ORDERS_CUSTOMER_PARAM)) == null ? void 0 : _searchParams_get.trim();
+        return customer ? [
+            {
+                field: 'customerEmail',
+                op: 'contains',
+                value: customer
+            }
+        ] : [];
     });
     const [selectedId, setSelectedId] = useState(null);
     /*
@@ -157,51 +226,64 @@ import OrderDetailDialog, { DISPUTE_COLOR } from "./order-detail-dialog.componen
     const [draft, setDraft] = useState(null);
     const { data: user } = useUser();
     const { enqueueSnackbar } = useSnackbar();
-    const visibleOrders = useMemo(()=>{
-        const now = Date.now() / 1000;
-        return orders.filter((order)=>{
-            var _order_customerEmail, _lifted_channel, _order_createdAtMs;
-            var _CommerceModel_describeOrderDispute;
+    /**
+   * Each order with the values the grid shows and filters by. `liftLegacyOrder`
+   * names a status and channel on a row that predates them, and Product
+   * reads the line items first (AGL-1747): the flat `productId` is written
+   * only by the two buy-now Stripe paths.
+   */ const orderRows = useMemo(()=>orders.map((order)=>{
+            var _lifted_lineItems, _ref, _ref1, _ref2, _lifted_channel;
+            var _lifted_lineItems_, _lifted_lineItems1;
             const lifted = CommerceModel.liftLegacyOrder(order);
-            // Line items first (AGL-1747): the flat `productId` is written only by
-            // the two buy-now Stripe paths, so matching on it alone hid every cart,
-            // POS and draft order behind the product filter.
-            if (productFilter && !CommerceModel.orderContainsProduct(lifted, productFilter)) {
-                return false;
-            }
-            if (statusFilter && lifted.status !== statusFilter) return false;
-            if (customerFilter && !String((_order_customerEmail = order.customerEmail) != null ? _order_customerEmail : '').toLowerCase().includes(customerFilter.trim().toLowerCase())) {
-                return false;
-            }
-            if (channelFilter && ((_lifted_channel = lifted.channel) != null ? _lifted_channel : 'online') !== channelFilter) {
-                return false;
-            }
-            if (disputeFilter === 'open' && !CommerceModel.orderHasOpenDispute(lifted)) {
-                return false;
-            }
-            // `lost` is the tone, not the raw status: a dispute that was WON also
-            // closes with money untouched, and listing it under "charged back"
-            // would tell a merchant they lost a case they won.
-            if (disputeFilter === 'lost' && ((_CommerceModel_describeOrderDispute = CommerceModel.describeOrderDispute(lifted)) == null ? void 0 : _CommerceModel_describeOrderDispute.tone) !== 'lost') {
-                return false;
-            }
-            // The same field the query orders by. `createdAt` is not universal
-            // across order writers, and a row missing it read as epoch zero — which
-            // both date filters excluded outright.
-            const created = ((_order_createdAtMs = order.createdAtMs) != null ? _order_createdAtMs : 0) / 1000;
-            if (dateFilter === '7d' && now - created > 7 * 86400) return false;
-            if (dateFilter === '30d' && now - created > 30 * 86400) return false;
-            return true;
-        });
-    }, [
+            const dispute = CommerceModel.describeOrderDispute(lifted);
+            const productIds = [
+                ...new Set([
+                    ...((_lifted_lineItems = lifted.lineItems) != null ? _lifted_lineItems : []).map((line)=>line.productId),
+                    order.productId
+                ].filter((id)=>typeof id === 'string' && id !== ''))
+            ];
+            return _extends({}, order, {
+                orderLabel: CommerceModel.formatOrderNumber(lifted, order.$id),
+                itemName: (_ref = (_ref1 = (_ref2 = (_lifted_lineItems1 = lifted.lineItems) == null ? void 0 : (_lifted_lineItems_ = _lifted_lineItems1[0]) == null ? void 0 : _lifted_lineItems_.name) != null ? _ref2 : productNames[order.productId]) != null ? _ref1 : order.productId) != null ? _ref : '',
+                statusKey: lifted.status,
+                channelKey: (_lifted_channel = lifted.channel) != null ? _lifted_channel : 'online',
+                netCents: CommerceModel.orderNetCents(lifted),
+                disputeBadge: dispute,
+                productIds,
+                disputeKey: CommerceModel.orderHasOpenDispute(lifted) ? 'open' : (dispute == null ? void 0 : dispute.tone) === 'lost' ? 'lost' : ''
+            });
+        }), [
         orders,
-        productFilter,
-        dateFilter,
-        statusFilter,
-        channelFilter,
-        disputeFilter,
-        customerFilter
+        productNames
+    ]);
+    const productOptions = useMemo(()=>productWindow.rows.map((product)=>{
+            var _product_name;
+            return {
+                value: String(product.$id),
+                label: String((_product_name = product.name) != null ? _product_name : product.$id)
+            };
+        }), [
+        productWindow
+    ]);
+    const filterOptions = useMemo(()=>({
+            statusKey: ORDER_STATUS_OPTIONS,
+            channelKey: ORDER_CHANNEL_OPTIONS,
+            productIds: productOptions,
+            disputeKey: ORDER_DISPUTE_OPTIONS
+        }), [
+        productOptions
     ]);
+    const listFilter = useListRowsFilter({
+        rows: orderRows,
+        fields: ORDER_FILTER_FIELDS,
+        options: filterOptions,
+        headers: ORDER_FILTER_HEADERS,
+        search: ORDER_SEARCH_FIELDS,
+        clauses,
+        onChange: setClauses
+    });
+    const visibleOrders = listFilter.rows;
+    const showingOpenDisputes = clauses.some((clause)=>clause.field === OPEN_DISPUTE_CLAUSE.field && clause.op === OPEN_DISPUTE_CLAUSE.op && clause.value === OPEN_DISPUTE_CLAUSE.value);
     /**
    * Raised over EVERY loaded order, not the visible ones (AGL-1796). A
    * merchant filtered to "delivered" still has a deadline running on a `paid`
@@ -340,6 +422,168 @@ import OrderDetailDialog, { DISPUTE_COLOR } from "./order-detail-dialog.componen
     /** What the draft dialog can actually offer. */ const selectableProducts = useMemo(()=>productWindow.rows.filter((product)=>!product.deletedAt), [
         productWindow
     ]);
+    /*
+   * The six columns `/product/commerce` advertises, in the order the mockup
+   * shows them — every fact scannable on its own, Channel included.
+   */ const orderColumns = useMemo(()=>[
+            {
+                field: 'orderLabel',
+                headerName: 'Order',
+                flex: 1,
+                minWidth: 160,
+                renderCell: ({ row })=>{
+                    var _ref;
+                    var _row_lineItems;
+                    const extraItems = Math.max(0, ((_ref = (_row_lineItems = row.lineItems) == null ? void 0 : _row_lineItems.length) != null ? _ref : 0) - 1);
+                    return /*#__PURE__*/ _jsxs(Stack, {
+                        sx: {
+                            minWidth: 0
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                noWrap: true,
+                                children: row.orderLabel
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                noWrap: true,
+                                children: extraItems ? `${row.itemName} +${extraItems} more` : row.itemName
+                            })
+                        ]
+                    });
+                }
+            },
+            {
+                field: 'customerEmail',
+                headerName: 'Customer',
+                flex: 1,
+                minWidth: 180,
+                renderCell: ({ row })=>/*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        noWrap: true,
+                        children: row.customerEmail || '—'
+                    })
+            },
+            {
+                field: 'channelKey',
+                headerName: 'Channel',
+                width: 120,
+                renderCell: ({ row })=>/*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        children: CommerceModel.orderChannelLabel(row.channelKey)
+                    })
+            },
+            {
+                field: 'netCents',
+                headerName: 'Total',
+                type: 'number',
+                width: 150,
+                align: 'right',
+                headerAlign: 'right',
+                renderCell: ({ row })=>{
+                    var _ref, _ref1;
+                    var _row_totals;
+                    return /*#__PURE__*/ _jsxs(Stack, {
+                        sx: {
+                            alignItems: 'flex-end',
+                            minWidth: 0,
+                            width: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                children: `$${(row.netCents / 100).toFixed(2)}`
+                            }),
+                            row.refundedCents ? /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                noWrap: true,
+                                children: `$${(((_ref = (_ref1 = (_row_totals = row.totals) == null ? void 0 : _row_totals.totalCents) != null ? _ref1 : row.amountCents) != null ? _ref : 0) / 100).toFixed(2)} less refunds`
+                            }) : null
+                        ]
+                    });
+                }
+            },
+            {
+                field: 'statusKey',
+                headerName: 'Status',
+                width: 230,
+                renderCell: ({ row })=>{
+                    var _CommerceModel_ORDER_STATUS_LABELS_row_statusKey, _CommerceModel_ORDER_STATUS_COLOR_row_statusKey;
+                    // A lost chargeback leaves `status: 'refunded'` (AGL-1787), so the
+                    // status pill cannot tell the two apart either — which is why the
+                    // dispute chip sits beside it rather than being folded into it.
+                    const dispute = row.disputeBadge;
+                    return /*#__PURE__*/ _jsxs(Stack, {
+                        sx: {
+                            minWidth: 0
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                spacing: 0.5,
+                                sx: {
+                                    alignItems: 'center'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(Chip, {
+                                        label: (_CommerceModel_ORDER_STATUS_LABELS_row_statusKey = CommerceModel.ORDER_STATUS_LABELS[row.statusKey]) != null ? _CommerceModel_ORDER_STATUS_LABELS_row_statusKey : row.statusKey,
+                                        size: "small",
+                                        color: (_CommerceModel_ORDER_STATUS_COLOR_row_statusKey = CommerceModel.ORDER_STATUS_COLOR[row.statusKey]) != null ? _CommerceModel_ORDER_STATUS_COLOR_row_statusKey : 'default',
+                                        variant: "outlined"
+                                    }),
+                                    dispute ? /*#__PURE__*/ _jsx(Tooltip, {
+                                        title: dispute.detail,
+                                        children: /*#__PURE__*/ _jsx(Chip, {
+                                            label: dispute.label,
+                                            size: "small",
+                                            color: DISPUTE_COLOR[dispute.tone],
+                                            variant: "filled"
+                                        })
+                                    }) : null
+                                ]
+                            }),
+                            (dispute == null ? void 0 : dispute.evidenceDaysLeft) !== undefined ? /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                component: "div",
+                                color: dispute.evidenceDaysLeft < 0 ? 'error' : 'warning.main',
+                                children: dispute.evidenceDaysLeft < 0 ? 'Evidence deadline passed' : `Evidence due in ${dispute.evidenceDaysLeft} day${dispute.evidenceDaysLeft === 1 ? '' : 's'}`
+                            }) : null
+                        ]
+                    });
+                }
+            },
+            {
+                field: 'createdAtMs',
+                headerName: 'Date',
+                width: 130,
+                renderCell: ({ row })=>{
+                    var _ref;
+                    var _row_createdAt_toDate, _row_createdAt;
+                    const createdAt = (_ref = (_row_createdAt = row.createdAt) == null ? void 0 : (_row_createdAt_toDate = _row_createdAt.toDate) == null ? void 0 : _row_createdAt_toDate.call(_row_createdAt)) != null ? _ref : row.createdAtMs ? new Date(row.createdAtMs) : null;
+                    return /*#__PURE__*/ _jsxs(Stack, {
+                        sx: {
+                            minWidth: 0
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                noWrap: true,
+                                children: createdAt ? createdAt.toLocaleDateString() : '—'
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                noWrap: true,
+                                children: createdAt ? createdAt.toLocaleTimeString() : ''
+                            })
+                        ]
+                    });
+                }
+            }
+        ], []);
     return /*#__PURE__*/ _jsxs(CardDisplay, {
         header: 'Orders',
         help: pluginDocsHelp('commerce', {
@@ -416,10 +660,10 @@ import OrderDetailDialog, { DISPUTE_COLOR } from "./order-detail-dialog.componen
                     }) : null,
                     openDisputes.count > 0 ? /*#__PURE__*/ _jsxs(Alert, {
                         severity: openDisputes.overdue ? 'error' : 'warning',
-                        action: disputeFilter === 'open' ? undefined : /*#__PURE__*/ _jsx(Button, {
+                        action: showingOpenDisputes ? undefined : /*#__PURE__*/ _jsx(Button, {
                             size: "small",
                             color: "inherit",
-                            onClick: ()=>setDisputeFilter('open'),
+                            onClick: ()=>setClauses(upsertListFilterClause(clauses, OPEN_DISPUTE_CLAUSE.field, OPEN_DISPUTE_CLAUSE)),
                             children: 'Show them'
                         }),
                         children: [
@@ -433,130 +677,10 @@ import OrderDetailDialog, { DISPUTE_COLOR } from "./order-detail-dialog.componen
                         direction: "row",
                         spacing: 1,
                         sx: {
-                            alignItems: 'center'
+                            alignItems: 'center',
+                            justifyContent: 'flex-end'
                         },
                         children: [
-                            /*#__PURE__*/ _jsxs(TextField, {
-                                select: true,
-                                size: "small",
-                                label: "Product",
-                                value: productFilter,
-                                onChange: (event)=>setProductFilter(event.target.value),
-                                sx: {
-                                    minWidth: 160
-                                },
-                                children: [
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "",
-                                        children: 'All products'
-                                    }),
-                                    productWindow.rows.map((product)=>{
-                                        var _product_name;
-                                        return /*#__PURE__*/ _jsx(MenuItem, {
-                                            value: product.$id,
-                                            children: (_product_name = product.name) != null ? _product_name : product.$id
-                                        }, product.$id);
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsxs(TextField, {
-                                select: true,
-                                size: "small",
-                                label: "Period",
-                                value: dateFilter,
-                                onChange: (event)=>setDateFilter(event.target.value),
-                                sx: {
-                                    minWidth: 130
-                                },
-                                children: [
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "",
-                                        children: 'All time'
-                                    }),
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "7d",
-                                        children: 'Last 7 days'
-                                    }),
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "30d",
-                                        children: 'Last 30 days'
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsxs(TextField, {
-                                select: true,
-                                size: "small",
-                                label: "Status",
-                                value: statusFilter,
-                                onChange: (event)=>setStatusFilter(event.target.value),
-                                sx: {
-                                    minWidth: 130
-                                },
-                                children: [
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "",
-                                        children: 'All statuses'
-                                    }),
-                                    Object.keys(CommerceModel.ORDER_STATUS_LABELS).map((status)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                            value: status,
-                                            children: CommerceModel.ORDER_STATUS_LABELS[status]
-                                        }, status))
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsxs(TextField, {
-                                select: true,
-                                size: "small",
-                                label: "Channel",
-                                value: channelFilter,
-                                onChange: (event)=>setChannelFilter(event.target.value),
-                                sx: {
-                                    minWidth: 120
-                                },
-                                children: [
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "",
-                                        children: 'All channels'
-                                    }),
-                                    Object.keys(CommerceModel.ORDER_CHANNEL_LABELS).map((channel)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                            value: channel,
-                                            children: CommerceModel.ORDER_CHANNEL_LABELS[channel]
-                                        }, channel))
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx(TextField, {
-                                size: "small",
-                                label: "Customer",
-                                placeholder: "Email",
-                                value: customerFilter,
-                                onChange: (event)=>setCustomerFilter(event.target.value),
-                                sx: {
-                                    minWidth: 180
-                                }
-                            }),
-                            /*#__PURE__*/ _jsxs(TextField, {
-                                select: true,
-                                size: "small",
-                                label: "Disputes",
-                                value: disputeFilter,
-                                onChange: (event)=>setDisputeFilter(event.target.value),
-                                sx: {
-                                    minWidth: 140
-                                },
-                                children: [
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "",
-                                        children: 'All orders'
-                                    }),
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "open",
-                                        children: 'Open dispute'
-                                    }),
-                                    /*#__PURE__*/ _jsx(MenuItem, {
-                                        value: "lost",
-                                        children: 'Charged back'
-                                    })
-                                ]
-                            }),
                             /*#__PURE__*/ _jsx(Button, {
                                 size: "small",
                                 onClick: handleExportCsv,
@@ -571,153 +695,25 @@ import OrderDetailDialog, { DISPUTE_COLOR } from "./order-detail-dialog.componen
                             })
                         ]
                     }),
-                    /*#__PURE__*/ _jsxs(ScrollTable, {
-                        size: "small",
+                    /*#__PURE__*/ _jsx(ListFilterChips, _extends({}, listFilter.chipsProps)),
+                    /*#__PURE__*/ _jsx(ListTable, _extends({
                         "aria-label": "Orders",
-                        children: [
-                            /*#__PURE__*/ _jsx(TableHead, {
-                                children: /*#__PURE__*/ _jsxs(TableRow, {
-                                    children: [
-                                        /*#__PURE__*/ _jsx(TableCell, {
-                                            children: 'Order'
-                                        }),
-                                        /*#__PURE__*/ _jsx(TableCell, {
-                                            children: 'Customer'
-                                        }),
-                                        /*#__PURE__*/ _jsx(TableCell, {
-                                            children: 'Channel'
-                                        }),
-                                        /*#__PURE__*/ _jsx(TableCell, {
-                                            align: "right",
-                                            children: 'Total'
-                                        }),
-                                        /*#__PURE__*/ _jsx(TableCell, {
-                                            children: 'Status'
-                                        }),
-                                        /*#__PURE__*/ _jsx(TableCell, {
-                                            children: 'Date'
-                                        })
-                                    ]
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(TableBody, {
-                                children: visibleOrders.map((order)=>{
-                                    var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _CommerceModel_ORDER_STATUS_LABELS_lifted_status, _CommerceModel_ORDER_STATUS_COLOR_lifted_status;
-                                    var _order_createdAt_toDate, _order_createdAt, _lifted_lineItems_, _lifted_lineItems, _lifted_lineItems1, _lifted_totals;
-                                    const lifted = CommerceModel.liftLegacyOrder(order);
-                                    // A lost chargeback leaves `status: 'refunded'` (AGL-1787),
-                                    // so the status pill on this row cannot tell the two apart
-                                    // either — which is why the dispute chip sits beside it
-                                    // rather than being folded into the status.
-                                    const dispute = CommerceModel.describeOrderDispute(lifted);
-                                    const createdAt = (_order_createdAt = order.createdAt) == null ? void 0 : (_order_createdAt_toDate = _order_createdAt.toDate) == null ? void 0 : _order_createdAt_toDate.call(_order_createdAt);
-                                    const itemName = (_ref = (_ref1 = (_ref2 = (_lifted_lineItems = lifted.lineItems) == null ? void 0 : (_lifted_lineItems_ = _lifted_lineItems[0]) == null ? void 0 : _lifted_lineItems_.name) != null ? _ref2 : productNames[order.productId]) != null ? _ref1 : order.productId) != null ? _ref : '';
-                                    const extraItems = Math.max(0, ((_ref3 = (_lifted_lineItems1 = lifted.lineItems) == null ? void 0 : _lifted_lineItems1.length) != null ? _ref3 : 0) - 1);
-                                    return /*#__PURE__*/ _jsxs(TableRow, {
-                                        hover: true,
-                                        onClick: ()=>setSelectedId(order.$id),
-                                        sx: {
-                                            cursor: 'pointer'
-                                        },
-                                        children: [
-                                            /*#__PURE__*/ _jsxs(TableCell, {
-                                                children: [
-                                                    /*#__PURE__*/ _jsx(Typography, {
-                                                        variant: "body2",
-                                                        children: CommerceModel.formatOrderNumber(lifted, order.$id)
-                                                    }),
-                                                    /*#__PURE__*/ _jsx(Typography, {
-                                                        variant: "caption",
-                                                        color: "text.secondary",
-                                                        children: extraItems ? `${itemName} +${extraItems} more` : itemName
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ _jsx(TableCell, {
-                                                children: /*#__PURE__*/ _jsx(Typography, {
-                                                    variant: "body2",
-                                                    noWrap: true,
-                                                    children: order.customerEmail || '—'
-                                                })
-                                            }),
-                                            /*#__PURE__*/ _jsx(TableCell, {
-                                                children: /*#__PURE__*/ _jsx(Typography, {
-                                                    variant: "body2",
-                                                    children: CommerceModel.orderChannelLabel(lifted.channel)
-                                                })
-                                            }),
-                                            /*#__PURE__*/ _jsxs(TableCell, {
-                                                align: "right",
-                                                children: [
-                                                    /*#__PURE__*/ _jsx(Typography, {
-                                                        variant: "body2",
-                                                        children: `$${(CommerceModel.orderNetCents(lifted) / 100).toFixed(2)}`
-                                                    }),
-                                                    order.refundedCents ? /*#__PURE__*/ _jsx(Typography, {
-                                                        variant: "caption",
-                                                        color: "text.secondary",
-                                                        children: `$${(((_ref4 = (_ref5 = (_lifted_totals = lifted.totals) == null ? void 0 : _lifted_totals.totalCents) != null ? _ref5 : order.amountCents) != null ? _ref4 : 0) / 100).toFixed(2)} less refunds`
-                                                    }) : null
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ _jsxs(TableCell, {
-                                                children: [
-                                                    /*#__PURE__*/ _jsxs(Stack, {
-                                                        direction: "row",
-                                                        spacing: 0.5,
-                                                        sx: {
-                                                            alignItems: 'center'
-                                                        },
-                                                        children: [
-                                                            /*#__PURE__*/ _jsx(Chip, {
-                                                                label: (_CommerceModel_ORDER_STATUS_LABELS_lifted_status = CommerceModel.ORDER_STATUS_LABELS[lifted.status]) != null ? _CommerceModel_ORDER_STATUS_LABELS_lifted_status : lifted.status,
-                                                                size: "small",
-                                                                color: (_CommerceModel_ORDER_STATUS_COLOR_lifted_status = CommerceModel.ORDER_STATUS_COLOR[lifted.status]) != null ? _CommerceModel_ORDER_STATUS_COLOR_lifted_status : 'default',
-                                                                variant: "outlined"
-                                                            }),
-                                                            dispute ? /*#__PURE__*/ _jsx(Tooltip, {
-                                                                title: dispute.detail,
-                                                                children: /*#__PURE__*/ _jsx(Chip, {
-                                                                    label: dispute.label,
-                                                                    size: "small",
-                                                                    color: DISPUTE_COLOR[dispute.tone],
-                                                                    variant: "filled"
-                                                                })
-                                                            }) : null
-                                                        ]
-                                                    }),
-                                                    (dispute == null ? void 0 : dispute.evidenceDaysLeft) !== undefined ? /*#__PURE__*/ _jsx(Typography, {
-                                                        variant: "caption",
-                                                        component: "div",
-                                                        color: dispute.evidenceDaysLeft < 0 ? 'error' : 'warning.main',
-                                                        children: dispute.evidenceDaysLeft < 0 ? 'Evidence deadline passed' : `Evidence due in ${dispute.evidenceDaysLeft} day${dispute.evidenceDaysLeft === 1 ? '' : 's'}`
-                                                    }) : null
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ _jsxs(TableCell, {
-                                                children: [
-                                                    /*#__PURE__*/ _jsx(Typography, {
-                                                        variant: "body2",
-                                                        noWrap: true,
-                                                        children: createdAt ? createdAt.toLocaleDateString() : '—'
-                                                    }),
-                                                    /*#__PURE__*/ _jsx(Typography, {
-                                                        variant: "caption",
-                                                        color: "text.secondary",
-                                                        children: createdAt ? createdAt.toLocaleTimeString() : ''
-                                                    })
-                                                ]
-                                            })
-                                        ]
-                                    }, order.$id);
-                                })
-                            })
-                        ]
-                    }),
+                        rows: visibleOrders,
+                        columns: listFilter.filterColumns(orderColumns),
+                        onOpen: (id)=>setSelectedId(id)
+                    }, listFilter.gridProps, {
+                        initialState: {
+                            columns: {
+                                columnVisibilityModel: ORDER_HIDDEN_COLUMNS
+                            }
+                        },
+                        noRowsLabel: "No orders match these filters"
+                    })),
                     orderWindow.truncated ? /*
-             * Where the filters and the export stop. Both run over what was
-             * read, so a store past this window would otherwise see a status
-             * filter return nothing and read it as having no such orders.
+             * Where the filters, the search and the export stop. All run over
+             * what was read, so a store past this window would otherwise see
+             * a status filter return nothing and read it as having no such
+             * orders.
              */ /*#__PURE__*/ _jsx(Typography, {
                         variant: "caption",
                         color: "text.secondary",