status

src/features/store-admin/pages/SalesPage.tsx

@@ -141,19 +141,28 @@ export function SalesPage() {
   const importedBills = useMemo(() => everyOrder.filter(isCounterSale), [everyOrder]);
   const allDeliveries = deliveries.data ?? [];
 
+  /* How far each order has actually got. The order row is only ever told
+     pending/delivered/cancelled, so the six stages in between are read off the
+     deliveries list — same window, same query, no extra fetch. See gap D in
+     `orderProgress.ts`.
+
+     Built here, above the filter, because the filter and the tab counts now
+     read the same resolved word the table renders. */
+  const stages = useMemo(() => deliveryStageFrom(allDeliveries), [allDeliveries]);
+
   /*
-   * Filtered on the ORDER ladder, deliberately, even though the chip now shows
-   * the delivery stage.
+   * Filtered on the word the row actually SHOWS.
    *
-   * `ORDER_STATUS_TABS` has no Picked or Arrived tab — an order never reaches
-   * those words — so filtering on the stage would drop every order in progress
-   * out of every tab except All. Under Pending the rows are the outstanding
-   * orders, which is what Pending means here, and the chip says how far along
-   * each one is. The tab counts stay on the same footing for the same reason.
+   * This used to filter on `row.orderstatus` while the chip rendered
+   * `orderStage(...)`, on the reasoning that the order strip had no Picked or
+   * Arrived tab to put those rows in. That reasoning held the wrong end: a row
+   * labelled Picked sat under the Pending tab, there was no Picked tab to look
+   * in, and the counts described a set the operator could not see. The strip
+   * carries those tabs now, so the filter follows the column.
    */
   const orderRows = useMemo(
-    () => allOrders.filter((row) => matchesStatus(status, row.orderstatus)),
-    [allOrders, status],
+    () => allOrders.filter((row) => matchesStatus(status, orderStage(row, stages).status)),
+    [allOrders, status, stages],
   );
   const deliveryRows = useMemo(
     () => allDeliveries.filter((row) => matchesStatus(status, row.orderstatus)),
@@ -219,17 +228,31 @@ export function SalesPage() {
    */
   const statusTabs = tab === 'deliveries' ? DELIVERY_STATUS_TABS : ORDER_STATUS_TABS;
 
-  /** Counts for the tab strip, from the unfiltered set. */
+  /**
+   * Counts for the tab strip, from the unfiltered set.
+   *
+   * Read through the same resolution the rows are filtered and rendered by. A
+   * count taken from `row.orderstatus` while the tab selects on the stage is a
+   * number describing a different set from the one that appears when it is
+   * pressed — Pending would say 41 and then show 6.
+   */
   const tabCounts = useMemo(() => {
-    const source = tab === 'deliveries' ? allDeliveries : allOrders;
+    const statusOf =
+      tab === 'deliveries'
+        ? (row: DeliveryRow | OrderRow) => row.orderstatus
+        : (row: DeliveryRow | OrderRow) => orderStage(row as OrderRow, stages).status;
+
+    const source: (DeliveryRow | OrderRow)[] =
+      tab === 'deliveries' ? allDeliveries : allOrders;
     const tabs = tab === 'deliveries' ? DELIVERY_STATUS_TABS : ORDER_STATUS_TABS;
+
     return Object.fromEntries(
       tabs.map((entry) => [
         entry.key,
-        source.filter((row) => matchesStatus(entry.key, row.orderstatus)).length,
+        source.filter((row) => matchesStatus(entry.key, statusOf(row))).length,
       ]),
     ) as Record<StatusKey, number>;
-  }, [tab, allOrders, allDeliveries]);
+  }, [tab, allOrders, allDeliveries, stages]);
 
   const counterTotals = useMemo(() => {
     const fromTills = posSummary.reduce(
@@ -285,12 +308,6 @@ export function SalesPage() {
      for a rider again, and without this the delivery row left behind keeps
      them out of every assign surface for good — see `releasedFrom`. */
   const released = useMemo(() => releasedFrom(allDeliveries), [allDeliveries]);
-  /* How far each order has actually got. The order row is only ever told
-     pending/delivered/cancelled, so the six stages in between are read off the
-     deliveries list — same window, same query, no extra fetch. See gap D in
-     `orderProgress.ts`. */
-  const stages = useMemo(() => deliveryStageFrom(allDeliveries), [allDeliveries]);
-
   const branchOf = useMemo(
     () => (row: OrderRow) => branches.find((branch) => branch.locationid === row.locationid),
     [branches],