@withpotter/components 0.13.0-next.101

package/dist/dashboard/home/widgets/home-widgets.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/home-widgets.tsx"],"sourcesContent":["'use client';\n\nimport { Fragment, useEffect, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport {\n  AnimatePresence,\n  motion,\n  useDragControls,\n  useReducedMotion,\n} from 'motion/react';\nimport { WIDGET_HEIGHT } from './types';\nimport { eases } from '@withpotter/lib/motion';\nimport { widgetDef, widgetsFor, coveredHrefs } from './registry';\nimport { WidgetFrame } from './widget-frame';\nimport { WidgetGallery } from './widget-gallery';\nimport { WidgetEmptyState } from './widget-empty';\nimport { useHomeLayout, sizeForIndex } from './use-home-layout';\nimport { MoneyBoardProvider } from './money-context';\nimport { useQuietRegulars } from './regulars-widget';\nimport type { WidgetContext, WidgetDef, WidgetId } from './types';\n\n/**\n * The board.\n *\n * REMOVAL, ported from Shopify's numbers. Theirs is\n * `transition: height .35s, transform .35s, box-shadow .35s` on\n * `cubic-bezier(0.34, 1.8, 0.64, 1)` — a back-out with a real overshoot, with\n * the NEIGHBOURS moving on the identical curve so the grid resettles instead of\n * snapping shut. We already ship that curve as `eases.overshoot`\n * (0.34, 1.56, 0.64, 1); it is fractionally gentler than theirs and it is ours,\n * so no second version of the same idea enters the system.\n *\n * `mode=\"popLayout\"` is what buys the neighbours' half of it: the leaving widget\n * is pulled out of flow immediately, so every `layout` sibling animates to its\n * new position over the same 350ms rather than waiting for the exit to finish.\n * The exit itself is Shopify's `_fade-out-shrink`, verbatim: opacity to 0,\n * `translateY(-1.25rem)`, `scale(0.9)`.\n *\n * Entrance is their `_card-entrance`: 8px rise and a fade, so a widget added\n * from the gallery arrives the way the board's own widgets do.\n *\n * BLOCKED IS NOT HERE. It renders above this component, always, and cannot be\n * removed or resized. iOS widgets are glanceable and read-only, which is a good\n * model for \"how are we doing\" and a bad one for \"what is stopping me\"; if the\n * whole page becomes arrangeable, the home quietly turns back into the report\n * it was taken apart from. Pinning the blockers is what earns everything below\n * them the freedom to move.\n */\n/**\n * One card on the board, and everything about picking it up.\n *\n * IT IS ITS OWN COMPONENT SO IT CAN HOLD A TIMER. Hold-to-lift needs\n * `useDragControls` and a pending timeout per card, and hooks cannot live\n * inside a `.map` callback — which is the only reason this is not inline.\n *\n * HOLD TO LIFT, ~140ms. A card used to detach the instant the pointer moved,\n * which made every click inside one a coin toss: brush the pointer while\n * pressing a link and you were dragging instead of following it. A short press\n * before it comes loose makes the pickup deliberate, and it is the same\n * gesture every phone home screen already teaches.\n *\n * The timer is cancelled by pointer-up and by leaving the card, so a quick\n * click never arms it — and `dragListener={false}` means Framer starts nothing\n * on its own; the hold is the only way in.\n */\nfunction BoardCard({\n  id,\n  span,\n  dimmed,\n  disabled,\n  animateLayout,\n  onLift,\n  onDrag,\n  onDrop,\n  children,\n}: {\n  id: WidgetId;\n  span: string;\n  /** False until the board has assembled — see `settled` in HomeWidgets. */\n  animateLayout: boolean;\n  /** Every card except the one in hand fades while a drag is running. */\n  dimmed: boolean;\n  disabled: boolean;\n  onLift: () => void;\n  onDrag: () => void;\n  onDrop: () => void;\n  children: ReactNode;\n}) {\n  const controls = useDragControls();\n  const holdRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const cancelHold = () => {\n    if (holdRef.current) clearTimeout(holdRef.current);\n    holdRef.current = null;\n  };\n\n  return (\n    <motion.div\n      data-widget={id}\n      layout={animateLayout}\n      initial={false}\n      animate={{ opacity: dimmed ? 0.6 : 1 }}\n      exit={{ opacity: 0, y: -20, scale: 0.9 }}\n      /**\n       * LAND, DO NOT STOP. `layout` carries the card into its new slot on the\n       * board's own overshoot curve, so it settles rather than arriving —\n       * `dragSnapToOrigin` returns the element while this animates the slot,\n       * and the two together read as one movement.\n       */\n      transition={{\n        layout: { duration: 0.35, ease: eases.overshoot },\n        opacity: { duration: 0.2, ease: eases.out },\n      }}\n      drag={!disabled}\n      dragListener={false}\n      dragControls={controls}\n      dragSnapToOrigin\n      dragElastic={0.12}\n      dragMomentum={false}\n      onPointerDown={(e) => {\n        if (disabled) return;\n        const ev = e;\n        cancelHold();\n        holdRef.current = setTimeout(() => {\n          onLift();\n          controls.start(ev);\n        }, 140);\n      }}\n      onPointerUp={cancelHold}\n      onPointerLeave={cancelHold}\n      onDrag={onDrag}\n      onDragEnd={() => {\n        cancelHold();\n        onDrop();\n      }}\n      whileDrag={{\n        // Lifted out of the page and out of its own row's stacking order, or\n        // the neighbours paint over the card being carried.\n        zIndex: 40,\n        scale: 1.02,\n        boxShadow: 'var(--shadow-xl)',\n        cursor: 'grabbing',\n      }}\n      className={span}\n    >\n      {children}\n    </motion.div>\n  );\n}\n\nexport function HomeWidgets({\n  ctx: pageCtx,\n  accountId,\n  tenantSlug,\n  galleryOpen,\n  onGalleryOpenChange,\n}: {\n  ctx: WidgetContext;\n  accountId?: string;\n  tenantSlug?: string;\n  /**\n   * The gallery is opened from the PAGE HEADER now, not from a tile in the\n   * grid. Adding a widget is a control and the header is where this app puts\n   * controls; a dashed cell sitting inside the board it edits was the odd one\n   * out, and it also cost a slot that a real card now uses.\n   */\n  galleryOpen: boolean;\n  onGalleryOpenChange: (open: boolean) => void;\n}) {\n  const reduceMotion = useReducedMotion() ?? false;\n  // The one thing the board adds to what the page resolved: whether the Gone\n  // quiet card has anybody to name. Asked here, from the card's own list, so it\n  // can gate the card's slot; a card that decided this for itself could only\n  // leave an empty frame behind.\n  const { quiet } = useQuietRegulars();\n  const ctx: WidgetContext = {\n    ...pageCtx,\n    hasQuietRegulars: quiet ? quiet.length > 0 : undefined,\n  };\n  const { widgets, placed, add, move } = useHomeLayout(\n    accountId,\n    tenantSlug,\n    ctx,\n  );\n\n  /**\n   * NOTHING ANIMATES UNTIL THE BOARD HAS FINISHED ASSEMBLING.\n   *\n   * John, 2026-08-23: \"why is it that when i open the home the gone quiet card\n   * flys, it shouldn't be flying.\"\n   *\n   * `layout` on a card is not an entrance — `initial={false}` already suppresses\n   * that — it is a promise to animate to any NEW position. On a cold open the\n   * board's composition is still resolving: the saved arrangement arrives from\n   * storage, permissions land and decide whether Team is available at all, and\n   * the setup checklist arrives and decides whether that card exists. Every one\n   * of those re-flows the grid, and `layout` faithfully flew the cards to their\n   * new slots on a 350ms overshoot — which is right after a drag and reads as a\n   * glitch on arrival, because nobody asked for it.\n   *\n   * So the board earns its motion. One frame after mount the arrangement is\n   * settled and `layout` switches on, which is when it starts being about the\n   * merchant moving something rather than about data landing. A drag, a removal\n   * and an add all still animate exactly as before; those all happen long after\n   * this flips.\n   */\n  const [settled, setSettled] = useState(false);\n  useEffect(() => {\n    // Two frames: the first paints the resolved arrangement, the second is the\n    // earliest moment at which a further change is genuinely a change.\n    const id = requestAnimationFrame(() =>\n      requestAnimationFrame(() => setSettled(true)),\n    );\n    return () => cancelAnimationFrame(id);\n  }, []);\n\n  const candidates: WidgetDef[] = widgetsFor(ctx).filter(\n    (d) => !placed.has(d.id),\n  );\n\n  /**\n   * The context each widget actually renders from, with the blockers already\n   * shown elsewhere on the board taken out.\n   *\n   * The home kept saying things twice: \"Set up payouts\" was a blocker pinned\n   * above Activity AND the entire Revenue card; \"3 products low on stock\" was a\n   * blocker AND the Low stock widget. Resolving it HERE rather than inside\n   * Activity is what keeps it honest — this is the only place that knows which\n   * widgets are actually placed, and a chore covered by a widget the merchant\n   * has since removed is not covered at all.\n   */\n  const covered = coveredHrefs(ctx, placed);\n  const boardCtx: WidgetContext =\n    covered.size === 0\n      ? ctx\n      : { ...ctx, today: ctx.today.filter((i) => !covered.has(i.href)) };\n\n  /**\n   * Which card is in the hand, and where every card sits.\n   *\n   * The rects are a ref rather than state: they are read during a drag to work\n   * out what the pointer is over, and putting them in state would re-render the\n   * whole board on every pointer move to compute a number only the drag reads.\n   * They are measured on pick-up, which is the last moment they are true — a\n   * card dropped earlier may have changed the layout since.\n   */\n  const [dragging, setDragging] = useState<WidgetId | null>(null);\n  /**\n   * The slot the card would land in, and the ONLY thing a pointer move changes.\n   *\n   * The first version reordered and PERSISTED on every `onDrag` tick, which\n   * wrote to localStorage sixty times a second and re-rendered the board under\n   * the gesture that was driving it — so the cards it was meant to shuffle sat\n   * still, because the drag kept being interrupted by its own side effects.\n   * Nothing commits until the drop; until then this index is all that moves.\n   */\n  const [overIndex, setOverIndex] = useState<number | null>(null);\n  const rects = useRef<{ id: WidgetId; cx: number; cy: number }[]>([]);\n\n  const measure = () => {\n    rects.current = widgets.flatMap((w) => {\n      const el = document.querySelector<HTMLElement>(`[data-widget=\"${w.id}\"]`);\n      if (!el) return [];\n      const r = el.getBoundingClientRect();\n      return [{ id: w.id, cx: r.left + r.width / 2, cy: r.top + r.height / 2 }];\n    });\n  };\n\n  /**\n   * The card whose centre is nearest the pointer, which is what \"drop here\"\n   * means on a grid with two different card widths.\n   *\n   * Nearest-centre rather than \"which rect contains the pointer\": a wide card\n   * dragged over the trio row is bigger than the slot under it, so hit-testing\n   * containment leaves gaps between cards where nothing is targeted and the\n   * drop silently does nothing.\n   */\n  /**\n   * Where the dragged card is NOW, read off the element itself.\n   *\n   * This replaced `info.point`, which was the bug behind drops that silently\n   * did nothing: Framer reports the pointer in PAGE coordinates while\n   * `getBoundingClientRect` returns VIEWPORT ones, and the dashboard scrolls\n   * inside an inner container — so the moment the page was scrolled the two\n   * spaces diverged and every drop hit-tested against the wrong row, usually\n   * resolving to the card's own slot.\n   *\n   * The element's own rect is in the same space as every other rect by\n   * construction, so there is no space to get wrong. It is also the more\n   * honest question: what matters is where the CARD is, not where the cursor\n   * happens to be inside it.\n   */\n  const centreOf = (id: WidgetId): { x: number; y: number } | null => {\n    const el = document.querySelector<HTMLElement>(`[data-widget=\"${id}\"]`);\n    if (!el) return null;\n    const r = el.getBoundingClientRect();\n    return { x: r.left + r.width / 2, y: r.top + r.height / 2 };\n  };\n\n  const targetAt = (x: number, y: number): WidgetId | null => {\n    let best: WidgetId | null = null;\n    let bestDist = Infinity;\n    for (const r of rects.current) {\n      const d = (r.cx - x) ** 2 + (r.cy - y) ** 2;\n      if (d < bestDist) {\n        bestDist = d;\n        best = r.id;\n      }\n    }\n    return best;\n  };\n\n  return (\n    // Wraps the gallery too: a preview showing different figures from the board\n    // it previews would be worse than no preview.\n    <MoneyBoardProvider\n      demo={\n        ctx.demo ? { data: ctx.demo.data, prior: ctx.demo.prior } : undefined\n      }\n    >\n      {/* SIX COLUMNS, 20px gap — Shopify's grid, measured. A `wide` card spans\n          three of them and two fill a row; a `narrow` spans two and three fill\n          a row. Everything collapses to one column below `md`, because 146px\n          columns are not a phone layout. */}\n      <motion.div\n        layout={settled}\n        className=\"grid grid-cols-1 gap-4 md:grid-cols-6\"\n      >\n        <AnimatePresence mode=\"popLayout\" initial={false}>\n          {widgets.map((w, index) => {\n            const def = widgetDef(w.id);\n            if (!def) return null;\n            /**\n             * THE DROP ZONE, and it is a real grid cell rather than an outline\n             * painted over one.\n             *\n             * Being in the flow is the whole point: inserting it PUSHES the\n             * cards after it along, so the board visibly opens a gap where the\n             * card will land. An absolutely-positioned overlay would have shown\n             * the target without moving anything, which is the complaint it\n             * exists to answer — the other widgets sitting still while you hold\n             * one over them.\n             *\n             * It takes the size of the slot it sits in, not of the card being\n             * carried, because that is what the card will BECOME once dropped:\n             * drag a narrow card into the top row and the zone is wide, which\n             * is the rule made visible before you commit to it.\n             */\n            const zone =\n              dragging && dragging !== w.id && overIndex === index ? (\n                <motion.div\n                  key=\"dropzone\"\n                  layout\n                  initial={{ opacity: 0, scale: 0.96 }}\n                  animate={{ opacity: 1, scale: 1 }}\n                  exit={{ opacity: 0, scale: 0.96 }}\n                  transition={{ duration: 0.16, ease: eases.out }}\n                  style={{ height: WIDGET_HEIGHT }}\n                  className={`${\n                    sizeForIndex(index) === 'wide'\n                      ? 'md:col-span-3'\n                      : 'md:col-span-2'\n                  } dropzone-breathe rounded-[var(--radius-card)] border-2 border-dashed border-brand-500 bg-brand-500/5`}\n                />\n              ) : null;\n\n            return (\n              <Fragment key={w.id}>\n                {zone}\n                <BoardCard\n                  id={w.id}\n                  animateLayout={settled}\n                  span={w.size === 'wide' ? 'md:col-span-3' : 'md:col-span-2'}\n                  dimmed={!!dragging && dragging !== w.id && !reduceMotion}\n                  disabled={reduceMotion}\n                  onLift={() => {\n                    measure();\n                    setDragging(w.id);\n                    setOverIndex(null);\n                  }}\n                  onDrag={() => {\n                    const c = centreOf(w.id);\n                    if (!c) return;\n                    const overId = targetAt(c.x, c.y);\n                    if (!overId || overId === w.id) return;\n                    const to = widgets.findIndex((x) => x.id === overId);\n                    if (to !== -1) setOverIndex(to);\n                  }}\n                  onDrop={() => {\n                    const c = centreOf(w.id);\n                    const overId = c ? targetAt(c.x, c.y) : null;\n                    const to =\n                      overId && overId !== w.id\n                        ? widgets.findIndex((x) => x.id === overId)\n                        : overIndex;\n                    setDragging(null);\n                    setOverIndex(null);\n                    if (to != null && to !== -1) move(w.id, to);\n                  }}\n                >\n                  <WidgetFrame\n                    name={def.name}\n                    onMove={(delta) =>\n                      move(\n                        w.id,\n                        widgets.findIndex((x) => x.id === w.id) + delta,\n                      )\n                    }\n                  >\n                    {/* A widget with nothing yet shows its own empty state, which\n                      is where setup now lives: the box you fix is the box that\n                      then fills with your data. */}\n                    {def.empty?.(boardCtx) ? (\n                      <WidgetEmptyState empty={def.empty(boardCtx)!} />\n                    ) : (\n                      def.render(boardCtx, w.size)\n                    )}\n                  </WidgetFrame>\n                </BoardCard>\n              </Fragment>\n            );\n          })}\n        </AnimatePresence>\n      </motion.div>\n\n      <WidgetGallery\n        open={galleryOpen}\n        onOpenChange={onGalleryOpenChange}\n        candidates={candidates}\n        ctx={ctx}\n        onAdd={(def, size) => add(def.id, size)}\n      />\n    </MoneyBoardProvider>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/dashboard/home/widgets/host-widgets.d.ts

@@ -0,0 +1,6 @@
+import type { WidgetDef } from './types';
+export declare function registerHostWidget(def: WidgetDef): void;
+/** The host's widgets, in the order they were registered. */
+export declare function hostWidgets(): WidgetDef[];
+/** A host's widget by id, or undefined. */
+export declare function hostWidget(id: string): WidgetDef | undefined;

package/dist/dashboard/home/widgets/host-widgets.js

@@ -0,0 +1,16 @@
+const HOST_WIDGETS = /* @__PURE__ */ new Map();
+function registerHostWidget(def) {
+  HOST_WIDGETS.set(def.id, def);
+}
+function hostWidgets() {
+  return [...HOST_WIDGETS.values()];
+}
+function hostWidget(id) {
+  return HOST_WIDGETS.get(id);
+}
+export {
+  hostWidget,
+  hostWidgets,
+  registerHostWidget
+};
+//# sourceMappingURL=host-widgets.js.map

package/dist/dashboard/home/widgets/host-widgets.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/host-widgets.ts"],"sourcesContent":["import type { WidgetDef } from './types';\n\n/**\n * Widgets a host adds to the board. The catalogue in registry.tsx is what this package draws; a host with\n * something of its own to say (a wallet balance, from an engine this package knows nothing of)\n * registers it once, where its dashboard layout is built. Registering the same id again replaces it.\n */\nconst HOST_WIDGETS = new Map<string, WidgetDef>();\n\nexport function registerHostWidget(def: WidgetDef): void {\n  HOST_WIDGETS.set(def.id, def);\n}\n\n/** The host's widgets, in the order they were registered. */\nexport function hostWidgets(): WidgetDef[] {\n  return [...HOST_WIDGETS.values()];\n}\n\n/** A host's widget by id, or undefined. */\nexport function hostWidget(id: string): WidgetDef | undefined {\n  return HOST_WIDGETS.get(id);\n}\n"],"mappings":"AAOA,MAAM,eAAe,oBAAI,IAAuB;AAEzC,SAAS,mBAAmB,KAAsB;AACvD,eAAa,IAAI,IAAI,IAAI,GAAG;AAC9B;AAGO,SAAS,cAA2B;AACzC,SAAO,CAAC,GAAG,aAAa,OAAO,CAAC;AAClC;AAGO,SAAS,WAAW,IAAmC;AAC5D,SAAO,aAAa,IAAI,EAAE;AAC5B;","names":[]}

package/dist/dashboard/home/widgets/member-label.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Who a row is. An engine that lists people by the address they were invited with and gives no name
+ * (Olive's) still has something to show: the part before the @, as the team page names them. Only a
+ * person with no name and no address at all is a "Team member".
+ */
+export declare function memberLabel(m: {
+    name?: string | null;
+    email?: string | null;
+    inviteEmail?: string | null;
+    role?: string;
+}): string;

package/dist/dashboard/home/widgets/member-label.js

@@ -0,0 +1,10 @@
+function memberLabel(m) {
+  const address = (m.email || m.inviteEmail || "").trim();
+  if (m.name?.trim()) return m.name.trim();
+  if (address) return address.includes("@") ? address.split("@")[0] : address;
+  return m.role === "owner" ? "Owner" : "Team member";
+}
+export {
+  memberLabel
+};
+//# sourceMappingURL=member-label.js.map

package/dist/dashboard/home/widgets/member-label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/member-label.ts"],"sourcesContent":["/**\n * Who a row is. An engine that lists people by the address they were invited with and gives no name\n * (Olive's) still has something to show: the part before the @, as the team page names them. Only a\n * person with no name and no address at all is a \"Team member\".\n */\nexport function memberLabel(m: {\n  name?: string | null;\n  email?: string | null;\n  inviteEmail?: string | null;\n  role?: string;\n}): string {\n  const address = (m.email || m.inviteEmail || '').trim();\n  if (m.name?.trim()) return m.name.trim();\n  if (address) return address.includes('@') ? address.split('@')[0] : address;\n  return m.role === 'owner' ? 'Owner' : 'Team member';\n}\n\n"],"mappings":"AAKO,SAAS,YAAY,GAKjB;AACT,QAAM,WAAW,EAAE,SAAS,EAAE,eAAe,IAAI,KAAK;AACtD,MAAI,EAAE,MAAM,KAAK,EAAG,QAAO,EAAE,KAAK,KAAK;AACvC,MAAI,QAAS,QAAO,QAAQ,SAAS,GAAG,IAAI,QAAQ,MAAM,GAAG,EAAE,CAAC,IAAI;AACpE,SAAO,EAAE,SAAS,UAAU,UAAU;AACxC;","names":[]}

package/dist/dashboard/home/widgets/middle-ellipsis.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A long address shortened in the middle, keeping both ends: the start says whose it is and the end
+ * says where it lives. Cut at the end, "fubi.box-9825bee8a691fdce..." lost the part that matters.
+ */
+export declare function middleEllipsis(text: string, max?: number): string;

package/dist/dashboard/home/widgets/middle-ellipsis.js

@@ -0,0 +1,11 @@
+function middleEllipsis(text, max = 28) {
+  if (max < 5 || text.length <= max) return text;
+  const keep = max - 1;
+  const head = Math.ceil(keep * 0.6);
+  const tail = keep - head;
+  return `${text.slice(0, head)}\u2026${text.slice(text.length - tail)}`;
+}
+export {
+  middleEllipsis
+};
+//# sourceMappingURL=middle-ellipsis.js.map

package/dist/dashboard/home/widgets/middle-ellipsis.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/middle-ellipsis.ts"],"sourcesContent":["/**\n * A long address shortened in the middle, keeping both ends: the start says whose it is and the end\n * says where it lives. Cut at the end, \"fubi.box-9825bee8a691fdce...\" lost the part that matters.\n */\nexport function middleEllipsis(text: string, max = 28): string {\n  if (max < 5 || text.length <= max) return text;\n  const keep = max - 1;\n  const head = Math.ceil(keep * 0.6);\n  const tail = keep - head;\n  return `${text.slice(0, head)}\\u2026${text.slice(text.length - tail)}`;\n}\n"],"mappings":"AAIO,SAAS,eAAe,MAAc,MAAM,IAAY;AAC7D,MAAI,MAAM,KAAK,KAAK,UAAU,IAAK,QAAO;AAC1C,QAAM,OAAO,MAAM;AACnB,QAAM,OAAO,KAAK,KAAK,OAAO,GAAG;AACjC,QAAM,OAAO,OAAO;AACpB,SAAO,GAAG,KAAK,MAAM,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM,KAAK,SAAS,IAAI,CAAC;AACtE;","names":[]}

package/dist/dashboard/home/widgets/money-context.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode } from 'react';
+import { type MoneyLanguage } from '../money-language';
+import type { MoneyFigures } from '../money-snapshot';
+import type { DashboardStats } from '@withpotter/lib/api/types';
+/**
+ * The window every money widget reports on. Lived in `home-metrics`, which was
+ * the single Performance panel these widgets replaced; it outlived the file.
+ */
+export type MetricsRange = '7d' | '30d' | '90d';
+/**
+ * ONE fetch and ONE window, for every money widget on the board.
+ *
+ * Two reasons this is a provider rather than a hook each widget calls.
+ *
+ * THE REQUEST. Home already fires around twenty requests on mount and they
+ * contend for a handful of connections. A board holding Revenue, Sales and
+ * Average order would have made that three identical requests for one payload.
+ *
+ * THE WINDOW. A home showing revenue over thirty days beside a sales count over
+ * seven is not a dashboard, it is a trap: both figures are true and the pair is
+ * a lie. The range is therefore shared state, not per-widget config. That is a
+ * deliberate departure from iOS, where each widget carries its own settings —
+ * iOS widgets are independent apps and these are three views of one answer.
+ *
+ * Small widgets do not render the control at all; they say which window they
+ * are on and inherit it.
+ */
+interface MoneyBoard {
+    range: MetricsRange;
+    setRange: (r: MetricsRange) => void;
+    data: MoneyFigures | null;
+    prior: MoneyFigures | null;
+    /** Still in flight, as opposed to loaded and genuinely empty. */
+    pending: boolean;
+    failed: boolean;
+    retry: () => void;
+    formatCurrency: (n: number) => string;
+    language: MoneyLanguage;
+    /** False when this member was not granted money. Widgets then render nothing. */
+    canView: boolean;
+}
+export declare const RANGE_LABEL: Record<MetricsRange, string>;
+export declare function useMoneyBoard(): MoneyBoard;
+export declare function MoneyBoardProvider({ children, demo, }: {
+    children: ReactNode;
+    demo?: {
+        data: DashboardStats;
+        prior: DashboardStats;
+    };
+}): import("react").JSX.Element;
+export {};

package/dist/dashboard/home/widgets/money-context.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { usePermissions } from "@withpotter/lib/use-permissions";
+import { useFormatCurrency } from "@withpotter/hooks/use-format-currency";
+import { analyticsApi } from "@withpotter/lib/api/analytics";
+import { getDateRange } from "@withpotter/pages-analytics/dashboard/(analytics)/analytics/helpers";
+import { useIntentConfig } from "@withpotter/lib/intents/use-intent-config";
+import { resolveMoneyLanguage } from "../money-language";
+const Ctx = createContext(null);
+const RANGE_LABEL = {
+  "7d": "7 days",
+  "30d": "30 days",
+  "90d": "90 days"
+};
+function useMoneyBoard() {
+  const v = useContext(Ctx);
+  if (!v) {
+    throw new Error("A money widget was rendered outside MoneyBoardProvider");
+  }
+  return v;
+}
+function MoneyBoardProvider({
+  children,
+  demo
+}) {
+  const { tenant } = useAuth();
+  const { can, loading: permsLoading } = usePermissions();
+  const formatCurrency = useFormatCurrency();
+  const intentConfig = useIntentConfig();
+  const [range, setRange] = useState("30d");
+  const [state, setState] = useState(null);
+  const [failed, setFailed] = useState(false);
+  const [reloadKey, setReloadKey] = useState(0);
+  const canView = !permsLoading && can("canViewAnalytics");
+  const slug = tenant?.slug;
+  const live = !demo;
+  useEffect(() => {
+    if (!slug || !canView || !live) return;
+    let cancelled = false;
+    const { startDate, endDate } = getDateRange(range);
+    analyticsApi.getHomeSummary(slug, { startDate, endDate }).then((summary) => {
+      if (cancelled) return;
+      setState({
+        range,
+        data: {
+          sales: summary.sales,
+          revenueTimeSeries: summary.revenueTimeSeries
+        },
+        prior: {
+          sales: summary.priorSales,
+          revenueTimeSeries: summary.priorRevenueTimeSeries
+        }
+      });
+      setFailed(false);
+    }).catch(() => !cancelled && setFailed(true));
+    return () => {
+      cancelled = true;
+    };
+  }, [slug, canView, live, range, reloadKey]);
+  const value = useMemo(() => {
+    if (demo) {
+      return {
+        range,
+        setRange,
+        data: {
+          sales: demo.data.sales,
+          revenueTimeSeries: demo.data.revenueTimeSeries
+        },
+        prior: {
+          sales: demo.prior.sales,
+          revenueTimeSeries: demo.prior.revenueTimeSeries
+        },
+        pending: false,
+        failed: false,
+        retry: () => {
+        },
+        formatCurrency,
+        language: resolveMoneyLanguage(intentConfig),
+        canView: true
+      };
+    }
+    const inWindow = state?.range === range ? state : null;
+    return {
+      range,
+      setRange,
+      data: inWindow?.data ?? null,
+      prior: inWindow?.prior ?? null,
+      pending: inWindow == null && !failed,
+      failed,
+      retry: () => {
+        setFailed(false);
+        setReloadKey((k) => k + 1);
+      },
+      formatCurrency,
+      language: resolveMoneyLanguage(intentConfig),
+      canView
+    };
+  }, [demo, range, state, failed, formatCurrency, intentConfig, canView]);
+  return /* @__PURE__ */ jsx(Ctx.Provider, { value, children });
+}
+export {
+  MoneyBoardProvider,
+  RANGE_LABEL,
+  useMoneyBoard
+};
+//# sourceMappingURL=money-context.js.map

package/dist/dashboard/home/widgets/money-context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/money-context.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from 'react';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { usePermissions } from '@withpotter/lib/use-permissions';\nimport { useFormatCurrency } from '@withpotter/hooks/use-format-currency';\nimport { analyticsApi } from '@withpotter/lib/api/analytics';\nimport { getDateRange } from '@withpotter/pages-analytics/dashboard/(analytics)/analytics/helpers';\nimport { useIntentConfig } from '@withpotter/lib/intents/use-intent-config';\nimport { resolveMoneyLanguage, type MoneyLanguage } from '../money-language';\nimport type { MoneyFigures } from '../money-snapshot';\nimport type { DashboardStats } from '@withpotter/lib/api/types';\n\n/**\n * The window every money widget reports on. Lived in `home-metrics`, which was\n * the single Performance panel these widgets replaced; it outlived the file.\n */\nexport type MetricsRange = '7d' | '30d' | '90d';\n\n/**\n * ONE fetch and ONE window, for every money widget on the board.\n *\n * Two reasons this is a provider rather than a hook each widget calls.\n *\n * THE REQUEST. Home already fires around twenty requests on mount and they\n * contend for a handful of connections. A board holding Revenue, Sales and\n * Average order would have made that three identical requests for one payload.\n *\n * THE WINDOW. A home showing revenue over thirty days beside a sales count over\n * seven is not a dashboard, it is a trap: both figures are true and the pair is\n * a lie. The range is therefore shared state, not per-widget config. That is a\n * deliberate departure from iOS, where each widget carries its own settings —\n * iOS widgets are independent apps and these are three views of one answer.\n *\n * Small widgets do not render the control at all; they say which window they\n * are on and inherit it.\n */\n\ninterface MoneyBoard {\n  range: MetricsRange;\n  setRange: (r: MetricsRange) => void;\n  data: MoneyFigures | null;\n  prior: MoneyFigures | null;\n  /** Still in flight, as opposed to loaded and genuinely empty. */\n  pending: boolean;\n  failed: boolean;\n  retry: () => void;\n  formatCurrency: (n: number) => string;\n  language: MoneyLanguage;\n  /** False when this member was not granted money. Widgets then render nothing. */\n  canView: boolean;\n}\n\nconst Ctx = createContext<MoneyBoard | null>(null);\n\nexport const RANGE_LABEL: Record<MetricsRange, string> = {\n  '7d': '7 days',\n  '30d': '30 days',\n  '90d': '90 days',\n};\n\nexport function useMoneyBoard(): MoneyBoard {\n  const v = useContext(Ctx);\n  if (!v) {\n    throw new Error('A money widget was rendered outside MoneyBoardProvider');\n  }\n  return v;\n}\n\nexport function MoneyBoardProvider({\n  children,\n  demo,\n}: {\n  children: ReactNode;\n  demo?: { data: DashboardStats; prior: DashboardStats };\n}) {\n  const { tenant } = useAuth();\n  const { can, loading: permsLoading } = usePermissions();\n  const formatCurrency = useFormatCurrency();\n  const intentConfig = useIntentConfig();\n\n  const [range, setRange] = useState<MetricsRange>('30d');\n  const [state, setState] = useState<{\n    range: MetricsRange;\n    data: MoneyFigures;\n    prior: MoneyFigures;\n  } | null>(null);\n  const [failed, setFailed] = useState(false);\n  const [reloadKey, setReloadKey] = useState(0);\n\n  const canView = !permsLoading && can('canViewAnalytics');\n  const slug = tenant?.slug;\n  const live = !demo;\n\n  useEffect(() => {\n    if (!slug || !canView || !live) return;\n    let cancelled = false;\n    const { startDate, endDate } = getDateRange(range);\n\n    analyticsApi\n      .getHomeSummary(slug, { startDate, endDate })\n      .then((summary) => {\n        if (cancelled) return;\n        // The window is stored WITH the figures, so a slow reply for a window\n        // the merchant has already left can never be shown under the new label.\n        setState({\n          range,\n          data: {\n            sales: summary.sales,\n            revenueTimeSeries: summary.revenueTimeSeries,\n          },\n          prior: {\n            sales: summary.priorSales,\n            revenueTimeSeries: summary.priorRevenueTimeSeries,\n          },\n        });\n        setFailed(false);\n      })\n      .catch(() => !cancelled && setFailed(true));\n\n    return () => {\n      cancelled = true;\n    };\n  }, [slug, canView, live, range, reloadKey]);\n\n  const value = useMemo<MoneyBoard>(() => {\n    if (demo) {\n      return {\n        range,\n        setRange,\n        data: {\n          sales: demo.data.sales,\n          revenueTimeSeries: demo.data.revenueTimeSeries,\n        },\n        prior: {\n          sales: demo.prior.sales,\n          revenueTimeSeries: demo.prior.revenueTimeSeries,\n        },\n        pending: false,\n        failed: false,\n        retry: () => {},\n        formatCurrency,\n        language: resolveMoneyLanguage(intentConfig),\n        canView: true,\n      };\n    }\n    const inWindow = state?.range === range ? state : null;\n    return {\n      range,\n      setRange,\n      data: inWindow?.data ?? null,\n      prior: inWindow?.prior ?? null,\n      pending: inWindow == null && !failed,\n      failed,\n      retry: () => {\n        setFailed(false);\n        setReloadKey((k) => k + 1);\n      },\n      formatCurrency,\n      language: resolveMoneyLanguage(intentConfig),\n      canView,\n    };\n  }, [demo, range, state, failed, formatCurrency, intentConfig, canView]);\n\n  return <Ctx.Provider value={value}>{children}</Ctx.Provider>;\n}\n"],"mappings":";AA2KS;AAzKT;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,4BAAgD;AA4CzD,MAAM,MAAM,cAAiC,IAAI;AAE1C,MAAM,cAA4C;AAAA,EACvD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AACT;AAEO,SAAS,gBAA4B;AAC1C,QAAM,IAAI,WAAW,GAAG;AACxB,MAAI,CAAC,GAAG;AACN,UAAM,IAAI,MAAM,wDAAwD;AAAA,EAC1E;AACA,SAAO;AACT;AAEO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAGG;AACD,QAAM,EAAE,OAAO,IAAI,QAAQ;AAC3B,QAAM,EAAE,KAAK,SAAS,aAAa,IAAI,eAAe;AACtD,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,eAAe,gBAAgB;AAErC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAuB,KAAK;AACtD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAIhB,IAAI;AACd,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,CAAC;AAE5C,QAAM,UAAU,CAAC,gBAAgB,IAAI,kBAAkB;AACvD,QAAM,OAAO,QAAQ;AACrB,QAAM,OAAO,CAAC;AAEd,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAM;AAChC,QAAI,YAAY;AAChB,UAAM,EAAE,WAAW,QAAQ,IAAI,aAAa,KAAK;AAEjD,iBACG,eAAe,MAAM,EAAE,WAAW,QAAQ,CAAC,EAC3C,KAAK,CAAC,YAAY;AACjB,UAAI,UAAW;AAGf,eAAS;AAAA,QACP;AAAA,QACA,MAAM;AAAA,UACJ,OAAO,QAAQ;AAAA,UACf,mBAAmB,QAAQ;AAAA,QAC7B;AAAA,QACA,OAAO;AAAA,UACL,OAAO,QAAQ;AAAA,UACf,mBAAmB,QAAQ;AAAA,QAC7B;AAAA,MACF,CAAC;AACD,gBAAU,KAAK;AAAA,IACjB,CAAC,EACA,MAAM,MAAM,CAAC,aAAa,UAAU,IAAI,CAAC;AAE5C,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,MAAM,SAAS,MAAM,OAAO,SAAS,CAAC;AAE1C,QAAM,QAAQ,QAAoB,MAAM;AACtC,QAAI,MAAM;AACR,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,MAAM;AAAA,UACJ,OAAO,KAAK,KAAK;AAAA,UACjB,mBAAmB,KAAK,KAAK;AAAA,QAC/B;AAAA,QACA,OAAO;AAAA,UACL,OAAO,KAAK,MAAM;AAAA,UAClB,mBAAmB,KAAK,MAAM;AAAA,QAChC;AAAA,QACA,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,OAAO,MAAM;AAAA,QAAC;AAAA,QACd;AAAA,QACA,UAAU,qBAAqB,YAAY;AAAA,QAC3C,SAAS;AAAA,MACX;AAAA,IACF;AACA,UAAM,WAAW,OAAO,UAAU,QAAQ,QAAQ;AAClD,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,MAAM,UAAU,QAAQ;AAAA,MACxB,OAAO,UAAU,SAAS;AAAA,MAC1B,SAAS,YAAY,QAAQ,CAAC;AAAA,MAC9B;AAAA,MACA,OAAO,MAAM;AACX,kBAAU,KAAK;AACf,qBAAa,CAAC,MAAM,IAAI,CAAC;AAAA,MAC3B;AAAA,MACA;AAAA,MACA,UAAU,qBAAqB,YAAY;AAAA,MAC3C;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,OAAO,QAAQ,gBAAgB,cAAc,OAAO,CAAC;AAEtE,SAAO,oBAAC,IAAI,UAAJ,EAAa,OAAe,UAAS;AAC/C;","names":[]}

package/dist/dashboard/home/widgets/money-widgets.d.ts

@@ -0,0 +1,10 @@
+import type { WidgetSize } from './types';
+export declare function RevenueWidget({ size }: {
+    size: WidgetSize;
+}): import("react").JSX.Element;
+export declare function SalesCountWidget({ size }: {
+    size: WidgetSize;
+}): import("react").JSX.Element;
+export declare function AvgOrderWidget({ size }: {
+    size: WidgetSize;
+}): import("react").JSX.Element;

package/dist/dashboard/home/widgets/money-widgets.js

@@ -0,0 +1,169 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpRight, ArrowDownRight } from "lucide-react";
+import {
+  computeDelta
+} from "@withpotter/pages-analytics/dashboard/(analytics)/analytics/helpers";
+import { useMoneyBoard, RANGE_LABEL } from "./money-context";
+import { Panel } from "../panel";
+import { spreadByDay } from "./revenue-series";
+const RANGES = ["7d", "30d", "90d"];
+function Delta({
+  dir,
+  pct,
+  hasBaseline
+}) {
+  if (!hasBaseline || dir === "flat") return null;
+  const good = dir === "up";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `inline-flex items-center gap-0.5 text-sm font-semibold tabular-nums ${good ? "text-[var(--success)]" : "text-[var(--error)]"}`,
+      children: [
+        good ? /* @__PURE__ */ jsx(ArrowUpRight, {}) : /* @__PURE__ */ jsx(ArrowDownRight, {}),
+        pct.toFixed(pct >= 10 ? 0 : 1),
+        "%"
+      ]
+    }
+  );
+}
+function Series({ series }) {
+  const max = series.reduce((m, p) => Math.max(m, p.value), 0);
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "mt-auto flex h-24 w-full items-end gap-px pt-3", children: series.map((p) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { height: `${Math.max(2, p.value / max * 100)}%` },
+      className: "min-w-px flex-1 rounded-t-[1px] bg-[var(--color-brand-500)]/35"
+    },
+    p.date
+  )) });
+}
+function RangeControl() {
+  const { range, setRange } = useMoneyBoard();
+  return /* @__PURE__ */ jsx("div", { className: "surface-pinned flex items-center gap-0.5 p-0.5", children: RANGES.map((r) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => setRange(r),
+      "aria-pressed": r === range,
+      className: `rounded-md px-2 py-1 text-2xs font-medium transition-colors ${r === range ? "bg-[var(--interactive-hover)] text-[var(--text-primary)]" : "text-[var(--text-tertiary)] hover:text-[var(--text-primary)]"}`,
+      children: RANGE_LABEL[r]
+    },
+    r
+  )) });
+}
+function MoneyWidget({
+  label,
+  value,
+  delta,
+  series,
+  size,
+  showRange,
+  empty,
+  caption
+}) {
+  const { range, pending, failed, retry } = useMoneyBoard();
+  const big = size !== "narrow";
+  return /* @__PURE__ */ jsxs(
+    Panel,
+    {
+      title: label,
+      control: big && showRange ? /* @__PURE__ */ jsx(RangeControl, {}) : void 0,
+      action: big ? { label: "Analytics", href: "/dashboard/analytics" } : void 0,
+      className: "h-full",
+      bodyClassName: "flex flex-col",
+      children: [
+        !big && /* @__PURE__ */ jsx("p", { className: "text-2xs text-[var(--text-muted)]", children: RANGE_LABEL[range] }),
+        pending ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "mt-2 inline-block h-[28px] w-32 animate-pulse rounded bg-[var(--bg-subtle)]"
+          }
+        ) : failed ? /* @__PURE__ */ jsxs("p", { className: "mt-2 text-sm text-[var(--text-tertiary)]", children: [
+          "Couldn\u2019t load this just now.",
+          " ",
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: retry,
+              className: "font-medium text-[var(--text-secondary)] underline underline-offset-2 hover:text-[var(--text-primary)]",
+              children: "Try again"
+            }
+          )
+        ] }) : empty ? (
+          /* An empty window is not a measurement. Cloudflare writes "Not enough
+             data" and Square writes "No data available for timeframe selected";
+             both refuse to let nothing wear the shape of a result. */
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-[var(--text-tertiary)]", children: "Not enough data" })
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap items-baseline gap-x-2", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `font-semibold leading-none tracking-[-0.02em] tabular-nums text-[var(--text-primary)] ${big ? "text-3xl" : "text-2xl"}`,
+                children: value
+              }
+            ),
+            delta && /* @__PURE__ */ jsx(Delta, { ...delta })
+          ] }),
+          caption && /* @__PURE__ */ jsx("p", { className: "mt-1 text-2xs text-[var(--text-muted)]", children: caption }),
+          size === "wide" && series?.length ? /* @__PURE__ */ jsx(Series, { series: spreadByDay(series, Number.parseInt(range, 10)) }) : null
+        ] })
+      ]
+    }
+  );
+}
+function RevenueWidget({ size }) {
+  const { data, prior, range, formatCurrency } = useMoneyBoard();
+  const revenue = data?.sales.totalRevenue ?? 0;
+  const series = data?.revenueTimeSeries ?? [];
+  const caption = revenue > 0 && prior != null && (prior.sales.totalRevenue ?? 0) === 0 ? `Nothing in the previous ${RANGE_LABEL[range]}` : void 0;
+  return /* @__PURE__ */ jsx(
+    MoneyWidget,
+    {
+      label: "Revenue",
+      size,
+      showRange: true,
+      value: formatCurrency(Math.round(revenue)),
+      delta: computeDelta(revenue, prior?.sales.totalRevenue ?? 0),
+      caption,
+      series,
+      empty: data != null && revenue === 0 && !series.some((p) => p.value > 0)
+    }
+  );
+}
+function SalesCountWidget({ size }) {
+  const { data, prior, language } = useMoneyBoard();
+  const orders = data?.sales.totalOrders ?? 0;
+  return /* @__PURE__ */ jsx(
+    MoneyWidget,
+    {
+      label: language.countLabel,
+      size,
+      value: orders.toLocaleString(),
+      delta: computeDelta(orders, prior?.sales.totalOrders ?? 0),
+      empty: data != null && orders === 0
+    }
+  );
+}
+function AvgOrderWidget({ size }) {
+  const { data, formatCurrency, language } = useMoneyBoard();
+  const aov = data?.sales.averageOrderValue ?? 0;
+  return /* @__PURE__ */ jsx(
+    MoneyWidget,
+    {
+      label: language.averageLabel,
+      size,
+      value: formatCurrency(aov),
+      empty: data != null && aov === 0
+    }
+  );
+}
+export {
+  AvgOrderWidget,
+  RevenueWidget,
+  SalesCountWidget
+};
+//# sourceMappingURL=money-widgets.js.map

package/dist/dashboard/home/widgets/money-widgets.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/money-widgets.tsx"],"sourcesContent":["'use client';\n\nimport { ArrowUpRight, ArrowDownRight } from 'lucide-react';\nimport {\n  computeDelta,\n  type DeltaDirection,\n} from '@withpotter/pages-analytics/dashboard/(analytics)/analytics/helpers';\nimport type { TimeSeriesPoint } from '@withpotter/lib/api/types';\nimport { useMoneyBoard, RANGE_LABEL, type MetricsRange } from './money-context';\nimport type { WidgetSize } from './types';\nimport { Panel } from '../panel';\nimport { spreadByDay } from './revenue-series';\n\nconst RANGES: MetricsRange[] = ['7d', '30d', '90d'];\n\nfunction Delta({\n  dir,\n  pct,\n  hasBaseline,\n}: {\n  dir: DeltaDirection;\n  pct: number;\n  hasBaseline: boolean;\n}) {\n  if (!hasBaseline || dir === 'flat') return null;\n  const good = dir === 'up';\n  return (\n    <span\n      className={`inline-flex items-center gap-0.5 text-sm font-semibold tabular-nums ${\n        good ? 'text-[var(--success)]' : 'text-[var(--error)]'\n      }`}\n    >\n      {good ? <ArrowUpRight /> : <ArrowDownRight />}\n      {pct.toFixed(pct >= 10 ? 0 : 1)}%\n    </span>\n  );\n}\n\n/** Bars, because a day is a discrete thing and a line between two invents one. */\nfunction Series({ series }: { series: TimeSeriesPoint[] }) {\n  const max = series.reduce((m, p) => Math.max(m, p.value), 0);\n  return (\n    <div aria-hidden className=\"mt-auto flex h-24 w-full items-end gap-px pt-3\">\n      {series.map((p) => (\n        <div\n          key={p.date}\n          style={{ height: `${Math.max(2, (p.value / max) * 100)}%` }}\n          className=\"min-w-px flex-1 rounded-t-[1px] bg-[var(--color-brand-500)]/35\"\n        />\n      ))}\n    </div>\n  );\n}\n\n/**\n * The range control, rendered by whichever money widget is large enough to hold\n * it. It writes to shared state, so moving it moves every money widget at once.\n * At `sm` the widget states its window as text instead: a segmented control in a\n * 148px box would be most of the box.\n */\nfunction RangeControl() {\n  const { range, setRange } = useMoneyBoard();\n  return (\n    <div className=\"surface-pinned flex items-center gap-0.5 p-0.5\">\n      {RANGES.map((r) => (\n        <button\n          key={r}\n          type=\"button\"\n          onClick={() => setRange(r)}\n          aria-pressed={r === range}\n          className={`rounded-md px-2 py-1 text-2xs font-medium transition-colors ${\n            r === range\n              ? 'bg-[var(--interactive-hover)] text-[var(--text-primary)]'\n              : 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)]'\n          }`}\n        >\n          {RANGE_LABEL[r]}\n        </button>\n      ))}\n    </div>\n  );\n}\n\n/**\n * The shared shell for every money widget.\n *\n * An empty window says so. Cloudflare writes \"Not enough data\" and Square writes\n * \"No data available for timeframe selected\"; both refuse to let nothing\n * masquerade as a measurement, and a bare `₦0` under the word Revenue tells a\n * merchant they sold nothing when the truth is that nobody could have bought\n * anything yet.\n */\nfunction MoneyWidget({\n  label,\n  value,\n  delta,\n  series,\n  size,\n  showRange,\n  empty,\n  caption,\n}: {\n  label: string;\n  value: string;\n  delta?: { dir: DeltaDirection; pct: number; hasBaseline: boolean };\n  series?: TimeSeriesPoint[];\n  size: WidgetSize;\n  /** Only one widget on the board needs to own the control. */\n  showRange?: boolean;\n  empty: boolean;\n  /** One line under the figure, when the figure alone does not say enough. */\n  caption?: string;\n}) {\n  const { range, pending, failed, retry } = useMoneyBoard();\n  const big = size !== 'narrow';\n\n  return (\n    <Panel\n      title={label}\n      control={big && showRange ? <RangeControl /> : undefined}\n      action={\n        big ? { label: 'Analytics', href: '/dashboard/analytics' } : undefined\n      }\n      className=\"h-full\"\n      bodyClassName=\"flex flex-col\"\n    >\n      {!big && (\n        <p className=\"text-2xs text-[var(--text-muted)]\">\n          {RANGE_LABEL[range]}\n        </p>\n      )}\n\n      {pending ? (\n        <span\n          aria-hidden\n          className=\"mt-2 inline-block h-[28px] w-32 animate-pulse rounded bg-[var(--bg-subtle)]\"\n        />\n      ) : failed ? (\n        <p className=\"mt-2 text-sm text-[var(--text-tertiary)]\">\n          Couldn’t load this just now.{' '}\n          <button\n            type=\"button\"\n            onClick={retry}\n            className=\"font-medium text-[var(--text-secondary)] underline underline-offset-2 hover:text-[var(--text-primary)]\"\n          >\n            Try again\n          </button>\n        </p>\n      ) : empty ? (\n        /* An empty window is not a measurement. Cloudflare writes \"Not enough\n           data\" and Square writes \"No data available for timeframe selected\";\n           both refuse to let nothing wear the shape of a result. */\n        <p className=\"mt-2 text-sm text-[var(--text-tertiary)]\">\n          Not enough data\n        </p>\n      ) : (\n        <>\n          <div className=\"mt-1 flex flex-wrap items-baseline gap-x-2\">\n            <span\n              className={`font-semibold leading-none tracking-[-0.02em] tabular-nums text-[var(--text-primary)] ${\n                big ? 'text-3xl' : 'text-2xl'\n              }`}\n            >\n              {value}\n            </span>\n            {delta && <Delta {...delta} />}\n          </div>\n          {caption && (\n            <p className=\"mt-1 text-2xs text-[var(--text-muted)]\">{caption}</p>\n          )}\n          {size === 'wide' && series?.length ? (\n            <Series series={spreadByDay(series, Number.parseInt(range, 10))} />\n          ) : null}\n        </>\n      )}\n    </Panel>\n  );\n}\n\nexport function RevenueWidget({ size }: { size: WidgetSize }) {\n  const { data, prior, range, formatCurrency } = useMoneyBoard();\n  const revenue = data?.sales.totalRevenue ?? 0;\n  const series = data?.revenueTimeSeries ?? [];\n  // With nothing to compare to there is no arrow, and a bare figure says nothing about whether it\n  // is good. Say what the comparison is when there is none to draw.\n  const caption =\n    revenue > 0 && prior != null && (prior.sales.totalRevenue ?? 0) === 0\n      ? `Nothing in the previous ${RANGE_LABEL[range]}`\n      : undefined;\n  return (\n    <MoneyWidget\n      label=\"Revenue\"\n      size={size}\n      showRange\n      value={formatCurrency(Math.round(revenue))}\n      delta={computeDelta(revenue, prior?.sales.totalRevenue ?? 0)}\n      caption={caption}\n      series={series}\n      empty={data != null && revenue === 0 && !series.some((p) => p.value > 0)}\n    />\n  );\n}\n\nexport function SalesCountWidget({ size }: { size: WidgetSize }) {\n  const { data, prior, language } = useMoneyBoard();\n  const orders = data?.sales.totalOrders ?? 0;\n  return (\n    <MoneyWidget\n      label={language.countLabel}\n      size={size}\n      // No chart. `getHomeSummary` returns one series and it is revenue's; a\n      // picture of the wrong quantity is worse than no picture.\n      value={orders.toLocaleString()}\n      delta={computeDelta(orders, prior?.sales.totalOrders ?? 0)}\n      empty={data != null && orders === 0}\n    />\n  );\n}\n\nexport function AvgOrderWidget({ size }: { size: WidgetSize }) {\n  const { data, formatCurrency, language } = useMoneyBoard();\n  const aov = data?.sales.averageOrderValue ?? 0;\n  return (\n    <MoneyWidget\n      label={language.averageLabel}\n      size={size}\n      value={formatCurrency(aov)}\n      empty={data != null && aov === 0}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/dashboard/home/widgets/owed-widget.d.ts

@@ -0,0 +1,25 @@
+/**
+ * What people owe you, and how long they have owed it.
+ *
+ * THE ONE MONEY FIGURE THE HOME WAS MISSING. Revenue answers "what came in",
+ * which is history — a merchant cannot act on it, and the analytics rule is
+ * that a number ships only if it can change what someone does next. This is
+ * the opposite kind of number: every naira here is money that has been earned
+ * and not collected, and the action is obvious and immediate.
+ *
+ * It is also the only money card on the board that is NOT derived from orders,
+ * which was the whole complaint about the board reading as four views of one
+ * table.
+ *
+ * AGEING IS THE POINT, not the total. "₦240,000 outstanding" says almost
+ * nothing on its own: debt at five days is a customer who has not got round to
+ * it, debt at ninety is a customer who is not going to pay. The API computes
+ * the buckets server-side over EVERY unpaid invoice rather than over the capped
+ * display list, so the oldest bucket is honest even when the list is not.
+ *
+ * OVERDUE IS RED, THE REST IS NOT. Money that is merely unpaid is normal
+ * business — an invoice sent yesterday is not a problem, and colouring the
+ * whole figure would make every merchant's home look like an emergency. Only
+ * the part that has passed its date gets the colour.
+ */
+export declare function OwedWidget(): import("react").JSX.Element;

package/dist/dashboard/home/widgets/owed-widget.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { analyticsApi } from "@withpotter/lib/api/analytics";
+import { useFormatCurrency } from "@withpotter/hooks/use-format-currency";
+import { Panel, PanelAction, PanelEmpty } from "../panel";
+function OwedWidget() {
+  const { tenant } = useAuth();
+  const formatCurrency = useFormatCurrency();
+  const [data, setData] = useState(null);
+  const [failed, setFailed] = useState(false);
+  const slug = tenant?.slug;
+  useEffect(() => {
+    if (!slug) return;
+    let cancelled = false;
+    analyticsApi.getOutstanding(slug, 1).then((d) => !cancelled && setData(d)).catch(() => !cancelled && setFailed(true));
+    return () => {
+      cancelled = true;
+    };
+  }, [slug]);
+  if (failed) {
+    return /* @__PURE__ */ jsx(Panel, { title: "Money owed", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-tertiary)]", children: "Couldn\u2019t load this just now." }) });
+  }
+  if (!data) {
+    return /* @__PURE__ */ jsx(Panel, { title: "Money owed", children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "mt-1 inline-block h-[28px] w-32 animate-pulse rounded bg-[var(--bg-subtle)]"
+      }
+    ) });
+  }
+  if (data.count === 0) {
+    return /* @__PURE__ */ jsx(Panel, { title: "Money owed", children: /* @__PURE__ */ jsx(
+      PanelEmpty,
+      {
+        title: "Nothing outstanding",
+        description: "Everything you have invoiced has been paid."
+      }
+    ) });
+  }
+  const oldest = [...data.ageing ?? []].filter((b) => b.amount > 0).pop();
+  return /* @__PURE__ */ jsxs(
+    Panel,
+    {
+      title: "Money owed",
+      action: { label: "Invoices", href: "/dashboard/invoices" },
+      className: "h-full",
+      bodyClassName: "flex flex-col",
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-3xl font-semibold leading-none tracking-[-0.02em] tabular-nums text-[var(--text-primary)]", children: formatCurrency(Math.round(data.totalOutstanding)) }),
+        /* @__PURE__ */ jsxs("p", { className: "mt-2 text-sm text-[var(--text-tertiary)]", children: [
+          "across ",
+          data.count,
+          " ",
+          data.count === 1 ? "invoice" : "invoices"
+        ] }),
+        data.overdueCount > 0 && /* @__PURE__ */ jsxs("p", { className: "mt-3 flex items-baseline gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-md font-semibold tabular-nums text-[var(--error)]", children: formatCurrency(Math.round(data.overdueAmount)) }),
+          /* @__PURE__ */ jsxs("span", { className: "text-sm text-[var(--text-tertiary)]", children: [
+            "overdue on ",
+            data.overdueCount
+          ] })
+        ] }),
+        oldest && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-sm text-[var(--text-muted)]", children: [
+          "Oldest ",
+          oldest.bucket
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-auto pt-3", children: /* @__PURE__ */ jsx(PanelAction, { href: "/dashboard/invoices", children: "Chase payment" }) })
+      ]
+    }
+  );
+}
+export {
+  OwedWidget
+};
+//# sourceMappingURL=owed-widget.js.map