redesign console page

src/features/console/ConsolePage.tsx

@@ -0,0 +1,206 @@
+import { useMemo, useState } from 'react';
+import type { DateRange } from '@/api/insights';
+import { DateRangePicker, presetRange, type RangePreset } from '@/features/store-admin/DateRangePicker';
+import { useBranchScope } from '@/features/store-admin/BranchScope';
+import { summariseBranch } from '@/features/store-admin/posStatus';
+import {
+  useLocationProducts,
+  useLocationSummary,
+  useOwnTenant,
+  usePosHealthByBranch,
+  usePosSalesByBranch,
+  useStockRequests,
+} from '@/queries/hooks';
+import { buildAlerts, rollupHealth, totalsOf, type BranchRow } from './consoleModel';
+import { consoleScope } from './consoleScope';
+import { previousRange, useConsoleSeries } from './useConsoleSeries';
+import { BranchOverview } from './sections/BranchOverview';
+import { KpiStrip } from './sections/KpiStrip';
+import { NeedsAttention } from './sections/NeedsAttention';
+import { SalesOverview } from './sections/SalesOverview';
+import { StoreHealth } from './sections/StoreHealth';
+import { TillSync } from './sections/TillSync';
+import { YourShop } from './sections/YourShop';
+import './console.css';
+
+/**
+ * One Console, three situations.
+ *
+ * An admin across every branch, an admin looking at one, and a store user who
+ * has exactly one. They differ in wording and in which sections appear — never
+ * in which component renders — so there is no second implementation to keep in
+ * step. `consoleScope` decides those differences as data; this file lays them
+ * out.
+ *
+ * ── Where the scope comes from ──────────────────────────────────────────────
+ *
+ * `useBranchScope` alone. It already pins a store user to their own outlet and
+ * ignores the URL parameter for them, so this page never asks who the user is
+ * in order to decide what to fetch — it asks what is in scope and fetches that.
+ * Re-deriving the scope here would be a second place for the two to disagree.
+ *
+ * ── The order of the sections ───────────────────────────────────────────────
+ *
+ * How much did we take, how did it arrive and is the shop working, which
+ * branch, what the counter is doing, what to do now. Money first because it is
+ * what the page is opened for; the thing to act on last because a merchant
+ * reads down and should finish on a verb.
+ */
+export function ConsolePage() {
+  const { branches, scoped, selected, current, tenantid, isLoading, isPinned, select } =
+    useBranchScope();
+
+  const base = isPinned ? '/store' : '/admin';
+  const [preset, setPreset] = useState<RangePreset>('today');
+  const [range, setRange] = useState<DateRange>(() => presetRange('today'));
+  const prev = useMemo(() => previousRange(range), [range]);
+
+  const branchIds = useMemo(() => scoped.map((branch) => branch.locationid), [scoped]);
+  const orders = useLocationSummary(tenantid || undefined);
+  const posNow = usePosSalesByBranch(branchIds, range);
+  const posBefore = usePosSalesByBranch(branchIds, prev);
+  const posHealth = usePosHealthByBranch(branchIds);
+  const shop = useOwnTenant(tenantid || undefined);
+  const products = useLocationProducts(tenantid || undefined, selected ?? undefined, 0, {
+    allBranches: true,
+  });
+  const requests = useStockRequests(
+    tenantid ? { tenantid, locationid: selected ?? undefined, status: 'Pending' } : undefined,
+  );
+
+  const posNowData = useMemo(
+    () => posNow.flatMap((query) => (query.data ? [query.data] : [])),
+    [posNow],
+  );
+  const posBeforeData = useMemo(
+    () => posBefore.flatMap((query) => (query.data ? [query.data] : [])),
+    [posBefore],
+  );
+
+  const series = useConsoleSeries(tenantid, selected, range, posNowData, posBeforeData);
+
+  // One instant for the whole board, so two tills read a second apart are not
+  // judged against two different "nows".
+  const now = Date.now();
+
+  const rows = useMemo<BranchRow[]>(
+    () =>
+      scoped.map((branch, index) => {
+        const order = (orders.data ?? []).find((entry) => entry.locationid === branch.locationid);
+        const pos = posNow[index]?.data;
+        return {
+          branch,
+          // `getlocationsummary` carries no date filter, so it is used for the
+          // per-branch split the table needs. The dated period figures come
+          // from the order rows — see `totals` below.
+          onlineRevenue: order?.revenue ?? 0,
+          onlineOrders: order?.totalorders ?? 0,
+          cancelled: order?.cancelled ?? 0,
+          delivered: order?.delivered ?? 0,
+          counterRevenue: pos?.grosssales ?? 0,
+          counterBills: pos?.billcount ?? 0,
+          health: summariseBranch(posHealth[index]?.data ?? [], now),
+          pendingRequests: (requests.data ?? []).filter(
+            (entry) => entry.locationid === branch.locationid,
+          ).length,
+        };
+      }),
+    [scoped, orders.data, posNow, posHealth, requests.data, now],
+  );
+
+  const totals = useMemo(() => {
+    const summed = totalsOf(rows);
+    // The dated figures win where they exist: a board headed "Sep 3" must not
+    // show an all-time online total beside a one-day counter total.
+    return {
+      ...summed,
+      onlineRevenue: series.onlineRevenue,
+      onlineOrders: series.onlineOrders,
+      cancelled: series.cancelled,
+      totalRevenue: series.onlineRevenue + summed.counterRevenue,
+      totalOrders: series.onlineOrders + summed.counterBills,
+    };
+  }, [rows, series]);
+
+  const rollup = useMemo(() => rollupHealth(rows), [rows]);
+  const alerts = useMemo(() => buildAlerts(rows, base), [rows, base]);
+
+  const scope = consoleScope({
+    role: isPinned ? 'store-user' : 'admin',
+    selected,
+    branchName: current?.locationname,
+    branchCount: branches.length,
+  });
+
+  const isBusy =
+    isLoading ||
+    posNow.some((query) => query.isLoading) ||
+    posHealth.some((query) => query.isLoading) ||
+    series.isLoading;
+
+  return (
+    <div className="console">
+      <header className="console-head">
+        <div className="console-title">
+          <div className="console-title-row">
+            <h1>Console</h1>
+            <span className="console-scope">{scope.countLabel}</span>
+            <span className="console-live"><i />Live</span>
+          </div>
+          <p className="console-blurb">{scope.blurb}</p>
+        </div>
+
+        <div className="console-actions">
+          <DateRangePicker
+            preset={preset}
+            range={range}
+            onChange={(nextPreset, nextRange) => {
+              setPreset(nextPreset);
+              setRange(nextRange);
+            }}
+          />
+        </div>
+      </header>
+
+      <KpiStrip
+        totals={totals}
+        days={series.days}
+        trends={series.trends}
+        comparisonLabel={preset === 'today' ? 'yesterday' : 'previous period'}
+        isLoading={isBusy}
+      />
+
+      <div className="console-split">
+        <SalesOverview days={series.days} isLoading={isBusy} />
+        <StoreHealth
+          rows={rows}
+          totals={totals}
+          rollup={rollup}
+          isAggregate={scope.isAggregate}
+          productCount={(products.data ?? []).length}
+          base={base}
+        />
+      </div>
+
+      {scope.showBranchOverview ? (
+        <section className="panel">
+          <header className="panel-head">
+            <div>
+              <h3 className="panel-title">Branch performance</h3>
+              <p className="panel-sub">
+                Ordered by takings — open one to scope the whole board to it
+              </p>
+            </div>
+          </header>
+          <BranchOverview rows={rows} onSelect={select} />
+        </section>
+      ) : (
+        <YourShop row={rows[0]} shop={shop.data} title={scope.shopSectionTitle} base={base} />
+      )}
+
+      <TillSync rows={rows} showBranch={scope.showBranchColumn} base={base} />
+
+      <NeedsAttention alerts={alerts} isAggregate={scope.isAggregate} base={base} />
+    </div>
+  );
+}