@withpotter/components 0.13.0-next.101

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

@@ -0,0 +1,96 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { useFormatCurrency } from "@withpotter/hooks/use-format-currency";
+import { useTenantCurrency } from "@withpotter/hooks/use-tenant-currency";
+import {
+  createBillingApi
+} from "@withpotter/pages-core/dashboard/settings/billing/_components";
+import { Panel, PanelAction, PanelEmpty } from "../panel";
+function BillWidget() {
+  const { tenant } = useAuth();
+  const slug = tenant?.slug;
+  const currency = useTenantCurrency();
+  const formatCurrency = useFormatCurrency();
+  const api = slug ? createBillingApi(slug) : null;
+  const { data: subscription, isPending: subPending } = useQuery({
+    queryKey: ["subscription", slug],
+    queryFn: () => api.fetchSubscription(),
+    enabled: !!api
+  });
+  const { data: usage, isPending: usagePending } = useQuery({
+    queryKey: ["billing-usage", slug],
+    queryFn: () => api.fetchCurrentUsage(),
+    enabled: !!api
+  });
+  if (subPending || usagePending) {
+    return /* @__PURE__ */ jsx(Panel, { title: "Box bill", children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "mt-1 inline-block h-[28px] w-32 animate-pulse rounded bg-[var(--bg-subtle)]"
+      }
+    ) });
+  }
+  if (!subscription) {
+    return /* @__PURE__ */ jsxs(Panel, { title: "Box bill", children: [
+      /* @__PURE__ */ jsx(
+        PanelEmpty,
+        {
+          title: "No plan yet",
+          description: "Pick a plan and this shows what it costs and when it is charged."
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "mt-auto pt-3", children: /* @__PURE__ */ jsx(PanelAction, { href: "/dashboard/settings/billing/plan", children: "Choose a plan" }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    Panel,
+    {
+      title: "Box bill",
+      action: { label: "Billing", href: "/dashboard/settings/billing" },
+      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(total(subscription, usage, currency), currency) }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-[var(--text-tertiary)]", children: when(usage) }),
+        subscription.cancellation?.endsAt ? /* @__PURE__ */ jsxs("p", { className: "mt-3 text-sm text-[var(--warning)]", children: [
+          "Your plan ends ",
+          onDate(subscription.cancellation.endsAt),
+          "."
+        ] }) : subscription.trial?.active && subscription.trial.endsAt ? /* @__PURE__ */ jsxs("p", { className: "mt-3 text-sm text-[var(--text-secondary)]", children: [
+          "Trial ends ",
+          onDate(subscription.trial.endsAt),
+          "."
+        ] }) : null,
+        /* @__PURE__ */ jsx("div", { className: "mt-auto pt-3", children: /* @__PURE__ */ jsx(PanelAction, { href: "/dashboard/settings/billing", children: "See the bill" }) })
+      ]
+    }
+  );
+}
+function total(subscription, usage, currency) {
+  const planFee = subscription.plan?.prices?.[currency] ?? 0;
+  return planFee + (usage?.metrics?.feeAmount ?? 0);
+}
+function when(usage) {
+  if (usage?.isInvoiced) return "Already invoiced.";
+  const end = usage?.period?.end;
+  if (!end) return "No period is open yet.";
+  const days = daysUntil(end);
+  if (days === 0) return "This period closes today.";
+  return `Charged in ${days} ${days === 1 ? "day" : "days"}.`;
+}
+function onDate(iso) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "soon";
+  return `on ${d.toLocaleDateString(void 0, { day: "numeric", month: "long" })}`;
+}
+function daysUntil(end) {
+  const ms = new Date(end).getTime() - Date.now();
+  return Math.max(0, Math.floor(ms / 864e5));
+}
+export {
+  BillWidget
+};
+//# sourceMappingURL=bill-widget.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/bill-widget.tsx"],"sourcesContent":["'use client';\n\nimport { useQuery } from '@tanstack/react-query';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { useFormatCurrency } from '@withpotter/hooks/use-format-currency';\nimport { useTenantCurrency } from '@withpotter/hooks/use-tenant-currency';\nimport {\n  createBillingApi,\n  type CurrentUsage,\n  type Subscription,\n} from '@withpotter/pages-core/dashboard/settings/billing/_components';\nimport { Panel, PanelAction, PanelEmpty } from '../panel';\n\n/**\n * What Box costs this period, and when it lands.\n *\n * THE ONE BILL ON THIS PAGE THE MERCHANT PAYS. Every other money card here is\n * money coming IN — revenue is what arrived, \"Money owed\" is what has not\n * arrived yet. This is the other direction, and it was reachable only by\n * opening Settings, then Billing, which is three clicks from a screen whose\n * whole job is \"is anything wrong\".\n *\n * It passes the analytics rule — a number ships only if it can change what\n * someone does — on the DATE rather than on the figure. \"You will be charged\n * ₦16,000\" is history you cannot act on; \"in 2 days\" is a deadline, and the\n * two states that need a human are both here: a plan that is ending, and no\n * plan at all.\n *\n * TWO REQUESTS, NOT THREE. Whether a card is saved is the other thing worth\n * shouting about, and it costs a third call on a page this codebase has\n * already measured into a rate limiter. The subscription's own status says\n * enough — a bill that cannot be charged does not stay `active` for long — and\n * the card is one click away on the screen this points at.\n *\n * The query keys are Billing's own, so opening the home warms that page and\n * arriving there from here shows the same figures without a second fetch.\n */\nexport function BillWidget() {\n  const { tenant } = useAuth();\n  const slug = tenant?.slug;\n  const currency = useTenantCurrency();\n  const formatCurrency = useFormatCurrency();\n  const api = slug ? createBillingApi(slug) : null;\n\n  const { data: subscription, isPending: subPending } = useQuery({\n    queryKey: ['subscription', slug],\n    queryFn: () => api!.fetchSubscription(),\n    enabled: !!api,\n  });\n\n  const { data: usage, isPending: usagePending } = useQuery({\n    queryKey: ['billing-usage', slug],\n    queryFn: () => api!.fetchCurrentUsage(),\n    enabled: !!api,\n  });\n\n  // Loading and \"you owe nothing\" are different states and must not share a\n  // rendering: a zero drawn while the request is still out is a lie that\n  // corrects itself, which is worse than a blank that fills in.\n  if (subPending || usagePending) {\n    return (\n      <Panel title=\"Box bill\">\n        <span\n          aria-hidden\n          className=\"mt-1 inline-block h-[28px] w-32 animate-pulse rounded bg-[var(--bg-subtle)]\"\n        />\n      </Panel>\n    );\n  }\n\n  if (!subscription) {\n    return (\n      <Panel title=\"Box bill\">\n        <PanelEmpty\n          title=\"No plan yet\"\n          description=\"Pick a plan and this shows what it costs and when it is charged.\"\n        />\n        <div className=\"mt-auto pt-3\">\n          <PanelAction href=\"/dashboard/settings/billing/plan\">\n            Choose a plan\n          </PanelAction>\n        </div>\n      </Panel>\n    );\n  }\n\n  return (\n    <Panel\n      title=\"Box bill\"\n      action={{ label: 'Billing', href: '/dashboard/settings/billing' }}\n      className=\"h-full\"\n      bodyClassName=\"flex flex-col\"\n    >\n      <p className=\"text-3xl font-semibold leading-none tracking-[-0.02em] tabular-nums text-[var(--text-primary)]\">\n        {formatCurrency(total(subscription, usage, currency), currency)}\n      </p>\n      <p className=\"mt-2 text-sm text-[var(--text-tertiary)]\">{when(usage)}</p>\n\n      {/* The two states that need a human, and nothing else. A plan running\n          normally has no news, and a card that says so every day is a card\n          nobody reads on the day it matters. */}\n      {subscription.cancellation?.endsAt ? (\n        <p className=\"mt-3 text-sm text-[var(--warning)]\">\n          Your plan ends {onDate(subscription.cancellation.endsAt)}.\n        </p>\n      ) : subscription.trial?.active && subscription.trial.endsAt ? (\n        <p className=\"mt-3 text-sm text-[var(--text-secondary)]\">\n          Trial ends {onDate(subscription.trial.endsAt)}.\n        </p>\n      ) : null}\n\n      <div className=\"mt-auto pt-3\">\n        <PanelAction href=\"/dashboard/settings/billing\">\n          See the bill\n        </PanelAction>\n      </div>\n    </Panel>\n  );\n}\n\n/**\n * The plan and what the sales cost, which is the whole of a Box bill.\n *\n * The same sum `UpcomingBill` makes on the billing screen, deliberately: two\n * surfaces adding one bill up differently is how a merchant ends up not\n * trusting either.\n */\nfunction total(\n  subscription: Subscription,\n  usage: CurrentUsage | null | undefined,\n  currency: string,\n): number {\n  const planFee = subscription.plan?.prices?.[currency] ?? 0;\n  return planFee + (usage?.metrics?.feeAmount ?? 0);\n}\n\n/** When it lands, in the merchant's terms rather than in a date. */\nfunction when(usage: CurrentUsage | null | undefined): string {\n  if (usage?.isInvoiced) return 'Already invoiced.';\n  const end = usage?.period?.end;\n  if (!end) return 'No period is open yet.';\n  const days = daysUntil(end);\n  if (days === 0) return 'This period closes today.';\n  return `Charged in ${days} ${days === 1 ? 'day' : 'days'}.`;\n}\n\nfunction onDate(iso: string): string {\n  const d = new Date(iso);\n  if (Number.isNaN(d.getTime())) return 'soon';\n  return `on ${d.toLocaleDateString(undefined, { day: 'numeric', month: 'long' })}`;\n}\n\n/**\n * Whole days, floored at zero. \"in 0 days\" on the last day is correct and\n * reads as today, where a rounded 1 would promise tomorrow.\n */\nfunction daysUntil(end: string): number {\n  const ms = new Date(end).getTime() - Date.now();\n  return Math.max(0, Math.floor(ms / 86_400_000));\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,22 @@
+/**
+ * WHAT IS LEFT OF THE MONTH'S EMAIL, on the board.
+ *
+ * It was a card in the sidebar's foot, stacked under a referral pitch in a
+ * two-card deck ported off Lovable. John moved it here (2026-09-03) and the
+ * argument the deck itself made is the reason: a rail carries its cards on
+ * EVERY screen, so a merchant reading an order had a meter in the corner of
+ * their eye all day. The home is where a business looks up rather than down,
+ * and the board can size this, move it, or throw it away — which a rail card
+ * can never offer.
+ *
+ * EMAIL, NOT MESSAGING, and that was decided by the bar. Four things are
+ * metered on the usage screen and only two have a denominator: messaging
+ * credits answer `spendable` plus a list of purchased blocks, so a merchant
+ * who has never bought any divides by zero and the meter has nothing to fill.
+ * Email has `usedThisPeriod` against `monthlyAllowance` — 200 on every plan row
+ * — which is the same pair the usage screen prints as "0 of 200 included used".
+ *
+ * Purchased credits are NAMED, not folded into the bar. A bar that shrank when
+ * you bought more would be a bar lying about how much you have left.
+ */
+export declare function CreditsWidget(): import("react").JSX.Element;

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

@@ -0,0 +1,59 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Mail } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { apiFetch } from "@withpotter/lib/api/core";
+import { Panel } from "../panel";
+function CreditsWidget() {
+  const { tenant } = useAuth();
+  const { data } = useQuery({
+    queryKey: ["email-credits", tenant?.slug],
+    queryFn: () => apiFetch("/billing/email-credits", {
+      tenantSlug: tenant.slug
+    }).catch(() => null),
+    enabled: !!tenant?.slug,
+    staleTime: 5 * 6e4
+  });
+  const used = data?.usedThisPeriod ?? 0;
+  const allowance = data?.monthlyAllowance ?? 0;
+  const bought = data?.totalPurchased ?? 0;
+  const pct = allowance > 0 ? Math.max(0, Math.min(100, used / allowance * 100)) : 0;
+  return /* @__PURE__ */ jsx(
+    Panel,
+    {
+      title: "Email credits",
+      action: { label: "Top up", href: "/dashboard/settings/billing/credits" },
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "grid size-8 shrink-0 place-items-center rounded-lg bg-[var(--bg-muted)] text-[var(--text-secondary)]",
+            children: /* @__PURE__ */ jsx(Mail, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("p", { className: "text-md text-[var(--text-primary)]", children: [
+            used.toLocaleString(),
+            " of ",
+            allowance.toLocaleString(),
+            " used"
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-2 h-1 overflow-hidden rounded-full bg-[var(--bg-muted)]", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-full rounded-full bg-[var(--accent-primary)] transition-[width] duration-[var(--motion-slow)] ease-settle",
+              style: { width: `${pct}%` }
+            }
+          ) }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-[var(--text-tertiary)]", children: bought > 0 ? `${bought.toLocaleString()} bought on top` : "Resets with your billing period" })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  CreditsWidget
+};
+//# sourceMappingURL=credits-widget.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/credits-widget.tsx"],"sourcesContent":["'use client';\n\nimport { Mail } from 'lucide-react';\nimport { useQuery } from '@tanstack/react-query';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { apiFetch } from '@withpotter/lib/api/core';\nimport { Panel } from '../panel';\n\n/** Only the fields this card reads; the billing screen owns the full type. */\ninterface EmailCredits {\n  balance: number;\n  usedThisPeriod: number;\n  monthlyAllowance: number;\n  totalPurchased: number;\n}\n\n/**\n * WHAT IS LEFT OF THE MONTH'S EMAIL, on the board.\n *\n * It was a card in the sidebar's foot, stacked under a referral pitch in a\n * two-card deck ported off Lovable. John moved it here (2026-09-03) and the\n * argument the deck itself made is the reason: a rail carries its cards on\n * EVERY screen, so a merchant reading an order had a meter in the corner of\n * their eye all day. The home is where a business looks up rather than down,\n * and the board can size this, move it, or throw it away — which a rail card\n * can never offer.\n *\n * EMAIL, NOT MESSAGING, and that was decided by the bar. Four things are\n * metered on the usage screen and only two have a denominator: messaging\n * credits answer `spendable` plus a list of purchased blocks, so a merchant\n * who has never bought any divides by zero and the meter has nothing to fill.\n * Email has `usedThisPeriod` against `monthlyAllowance` — 200 on every plan row\n * — which is the same pair the usage screen prints as \"0 of 200 included used\".\n *\n * Purchased credits are NAMED, not folded into the bar. A bar that shrank when\n * you bought more would be a bar lying about how much you have left.\n */\nexport function CreditsWidget() {\n  const { tenant } = useAuth();\n\n  const { data } = useQuery({\n    queryKey: ['email-credits', tenant?.slug],\n    queryFn: () =>\n      apiFetch<EmailCredits>('/billing/email-credits', {\n        tenantSlug: tenant!.slug,\n      }).catch(() => null),\n    enabled: !!tenant?.slug,\n    staleTime: 5 * 60_000,\n  });\n\n  const used = data?.usedThisPeriod ?? 0;\n  const allowance = data?.monthlyAllowance ?? 0;\n  const bought = data?.totalPurchased ?? 0;\n  const pct =\n    allowance > 0 ? Math.max(0, Math.min(100, (used / allowance) * 100)) : 0;\n\n  return (\n    <Panel\n      title=\"Email credits\"\n      action={{ label: 'Top up', href: '/dashboard/settings/billing/credits' }}\n    >\n      <div className=\"flex items-start gap-3\">\n        <span\n          aria-hidden=\"true\"\n          className=\"grid size-8 shrink-0 place-items-center rounded-lg bg-[var(--bg-muted)] text-[var(--text-secondary)]\"\n        >\n          <Mail className=\"size-4\" />\n        </span>\n        <div className=\"min-w-0 flex-1\">\n          {/* HOW MUCH OF WHAT. A bare \"0 left\" is a number with no scale, and\n              a merchant cannot tell from it whether to act. */}\n          <p className=\"text-md text-[var(--text-primary)]\">\n            {used.toLocaleString()} of {allowance.toLocaleString()} used\n          </p>\n          <div className=\"mt-2 h-1 overflow-hidden rounded-full bg-[var(--bg-muted)]\">\n            <div\n              className=\"h-full rounded-full bg-[var(--accent-primary)] transition-[width] duration-[var(--motion-slow)] ease-settle\"\n              style={{ width: `${pct}%` }}\n            />\n          </div>\n          <p className=\"mt-2 text-sm text-[var(--text-tertiary)]\">\n            {bought > 0\n              ? `${bought.toLocaleString()} bought on top`\n              : 'Resets with your billing period'}\n          </p>\n        </div>\n      </div>\n    </Panel>\n  );\n}\n"],"mappings":";AAkEU,cAKA,YALA;AAhEV,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,gBAAgB;AACzB,SAAS,aAAa;AA+Bf,SAAS,gBAAgB;AAC9B,QAAM,EAAE,OAAO,IAAI,QAAQ;AAE3B,QAAM,EAAE,KAAK,IAAI,SAAS;AAAA,IACxB,UAAU,CAAC,iBAAiB,QAAQ,IAAI;AAAA,IACxC,SAAS,MACP,SAAuB,0BAA0B;AAAA,MAC/C,YAAY,OAAQ;AAAA,IACtB,CAAC,EAAE,MAAM,MAAM,IAAI;AAAA,IACrB,SAAS,CAAC,CAAC,QAAQ;AAAA,IACnB,WAAW,IAAI;AAAA,EACjB,CAAC;AAED,QAAM,OAAO,MAAM,kBAAkB;AACrC,QAAM,YAAY,MAAM,oBAAoB;AAC5C,QAAM,SAAS,MAAM,kBAAkB;AACvC,QAAM,MACJ,YAAY,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,KAAM,OAAO,YAAa,GAAG,CAAC,IAAI;AAEzE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAQ,EAAE,OAAO,UAAU,MAAM,sCAAsC;AAAA,MAEvE,+BAAC,SAAI,WAAU,0BACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAU;AAAA,YAEV,8BAAC,QAAK,WAAU,UAAS;AAAA;AAAA,QAC3B;AAAA,QACA,qBAAC,SAAI,WAAU,kBAGb;AAAA,+BAAC,OAAE,WAAU,sCACV;AAAA,iBAAK,eAAe;AAAA,YAAE;AAAA,YAAK,UAAU,eAAe;AAAA,YAAE;AAAA,aACzD;AAAA,UACA,oBAAC,SAAI,WAAU,8DACb;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,OAAO,GAAG,GAAG,IAAI;AAAA;AAAA,UAC5B,GACF;AAAA,UACA,oBAAC,OAAE,WAAU,4CACV,mBAAS,IACN,GAAG,OAAO,eAAe,CAAC,mBAC1B,mCACN;AAAA,WACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -0,0 +1,30 @@
+/**
+ * The two things about hardware worth interrupting somebody for.
+ *
+ * A machine that has stopped reporting, and a drawer that did not balance.
+ * Deliberately NOT a count of devices or a total of takings: home answers "is
+ * anything wrong", and "you own four tills" is not an answer to that. Anything
+ * that is merely true belongs on the Hardware screen.
+ *
+ * A silent heartbeat is the highest-signal alert this product can produce,
+ * because a till nobody has noticed is offline is a till not taking money.
+ *
+ * When both are quiet the card says so and stops. An empty state here is the
+ * good outcome, so it reads as reassurance rather than as an absence.
+ *
+ * ── AND IT IS WHERE YOU FIND OUT YOU CAN HAVE A TILL ──
+ *
+ * A business with NO hardware gets a third state: the offer. That job used to
+ * belong to the nav row, whose own note said it "shows before there is any
+ * hardware to show, because the empty state is where a merchant finds out they
+ * can have a till" — and the row went to Settings on 2026-09-03 (hardware is
+ * infrastructure, not a destination). The discovery it was doing had to land
+ * somewhere, and the home is where a business looks up.
+ *
+ * Three states in one card rather than a second "Sell in person" card beside
+ * it, because they are the same subject at three points in its life: you have
+ * none, you have some and they are fine, you have some and one is wrong. A
+ * separate offer card would have to disappear the moment the first terminal
+ * pairs, which is a card that exists to be deleted.
+ */
+export declare function HardwareWidget(): import("react").JSX.Element;

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

@@ -0,0 +1,115 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Tablet } from "lucide-react";
+import { useApiQuery } from "@withpotter/hooks/use-api-query";
+import { useFormatCurrency } from "@withpotter/hooks/use-format-currency";
+import { businessDevicesApi } from "@withpotter/lib/api/business-devices";
+import { deviceShiftsApi } from "@withpotter/lib/api/device-shifts";
+import { readVariance } from "@withpotter/pages-operations/dashboard/(operations)/hardware/_components/shift-money";
+import { Button } from "@withpotter/ui-kit";
+import { Panel, PanelEmpty } from "../panel";
+function HardwareWidget() {
+  const money = useFormatCurrency();
+  const { data: deviceData } = useApiQuery(
+    ["business-devices"],
+    (slug) => businessDevicesApi.list(slug),
+    { live: true }
+  );
+  const { data: shiftData } = useApiQuery(
+    ["device-shifts", "recent"],
+    (slug) => deviceShiftsApi.list(slug, { limit: 20 })
+  );
+  const offline = (deviceData?.devices ?? []).filter(
+    (device) => device.status === "active" && !device.online
+  );
+  const shortDrawers = (shiftData?.shifts ?? []).filter((shift) => {
+    const reading = readVariance(shift);
+    return reading.kind === "short" || reading.kind === "over";
+  });
+  const naira = (minor) => money(minor / 100);
+  const nothingWrong = offline.length === 0 && shortDrawers.length === 0;
+  const noHardware = deviceData ? (deviceData.devices ?? []).length === 0 : false;
+  if (noHardware) {
+    return /* @__PURE__ */ jsx(Panel, { title: "Sell in person", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-start justify-center gap-3 py-2", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "grid size-8 place-items-center rounded-lg bg-[var(--bg-muted)] text-[var(--text-secondary)]",
+          children: /* @__PURE__ */ jsx(Tablet, { className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-secondary)]", children: "Take card and transfer payments at the counter with a Box terminal." }),
+      /* @__PURE__ */ jsx(Button, { asChild: true, size: "md", variant: "secondary", children: /* @__PURE__ */ jsx(Link, { href: "/dashboard/hardware/requests/new", children: "Request a terminal" }) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(
+    Panel,
+    {
+      title: "Hardware",
+      action: { label: "All devices", href: "/dashboard/hardware" },
+      children: nothingWrong ? /* @__PURE__ */ jsx(
+        PanelEmpty,
+        {
+          icon: Tablet,
+          title: "Every machine is reporting, and every drawer balanced."
+        }
+      ) : /* @__PURE__ */ jsxs("ul", { className: "divide-y divide-[var(--border-subtle)]", children: [
+        offline.slice(0, 3).map((device) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          Link,
+          {
+            href: `/dashboard/hardware/${device.id}`,
+            className: "flex items-center justify-between gap-3 py-3 first:pt-0",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-ink", children: device.label || device.deviceId }),
+                /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-[var(--text-tertiary)]", children: "Not reporting" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "size-2 shrink-0 rounded-full bg-[var(--warning)]"
+                }
+              )
+            ]
+          }
+        ) }, device.id)),
+        shortDrawers.slice(0, 3).map((shift) => {
+          const reading = readVariance(shift);
+          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            Link,
+            {
+              href: `/dashboard/hardware/shifts/${shift.id}`,
+              className: "flex items-center justify-between gap-3 py-3 first:pt-0",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-ink", children: shift.deviceLabel ?? "A drawer" }),
+                  /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-[var(--text-tertiary)]", children: shift.openedByName ? `Counted by ${shift.openedByName}` : "Nobody signed in" })
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "shrink-0 text-sm",
+                    style: {
+                      color: reading.kind === "short" ? "var(--error)" : "var(--warning)"
+                    },
+                    children: [
+                      reading.kind === "short" ? "Short " : "Over ",
+                      "amount" in reading ? naira(reading.amount) : ""
+                    ]
+                  }
+                )
+              ]
+            }
+          ) }, shift.id);
+        })
+      ] })
+    }
+  );
+}
+export {
+  HardwareWidget
+};
+//# sourceMappingURL=hardware-widget.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/dashboard/home/widgets/hardware-widget.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport { Tablet } from 'lucide-react';\nimport { useApiQuery } from '@withpotter/hooks/use-api-query';\nimport { useFormatCurrency } from '@withpotter/hooks/use-format-currency';\nimport { businessDevicesApi } from '@withpotter/lib/api/business-devices';\nimport { deviceShiftsApi } from '@withpotter/lib/api/device-shifts';\nimport type { BusinessDevice, DeviceShift } from '@withpotter/lib/api/types';\nimport { readVariance } from '@withpotter/pages-operations/dashboard/(operations)/hardware/_components/shift-money';\nimport { Button } from '@withpotter/ui-kit';\nimport { Panel, PanelEmpty } from '../panel';\n\n/**\n * The two things about hardware worth interrupting somebody for.\n *\n * A machine that has stopped reporting, and a drawer that did not balance.\n * Deliberately NOT a count of devices or a total of takings: home answers \"is\n * anything wrong\", and \"you own four tills\" is not an answer to that. Anything\n * that is merely true belongs on the Hardware screen.\n *\n * A silent heartbeat is the highest-signal alert this product can produce,\n * because a till nobody has noticed is offline is a till not taking money.\n *\n * When both are quiet the card says so and stops. An empty state here is the\n * good outcome, so it reads as reassurance rather than as an absence.\n *\n * ── AND IT IS WHERE YOU FIND OUT YOU CAN HAVE A TILL ──\n *\n * A business with NO hardware gets a third state: the offer. That job used to\n * belong to the nav row, whose own note said it \"shows before there is any\n * hardware to show, because the empty state is where a merchant finds out they\n * can have a till\" — and the row went to Settings on 2026-09-03 (hardware is\n * infrastructure, not a destination). The discovery it was doing had to land\n * somewhere, and the home is where a business looks up.\n *\n * Three states in one card rather than a second \"Sell in person\" card beside\n * it, because they are the same subject at three points in its life: you have\n * none, you have some and they are fine, you have some and one is wrong. A\n * separate offer card would have to disappear the moment the first terminal\n * pairs, which is a card that exists to be deleted.\n */\nexport function HardwareWidget() {\n  const money = useFormatCurrency();\n\n  const { data: deviceData } = useApiQuery<{ devices: BusinessDevice[] }>(\n    ['business-devices'],\n    (slug) => businessDevicesApi.list(slug),\n    { live: true },\n  );\n\n  const { data: shiftData } = useApiQuery<{ shifts: DeviceShift[] }>(\n    ['device-shifts', 'recent'],\n    (slug) => deviceShiftsApi.list(slug, { limit: 20 }),\n  );\n\n  /**\n   * Only machines that have connected before.\n   *\n   * One that has never paired is a job half done rather than a fault, and it\n   * already says so on its own record. Putting it here would mean a merchant\n   * who registered three tills on Friday arrives on Monday to three alarms.\n   */\n  const offline = (deviceData?.devices ?? []).filter(\n    (device) => device.status === 'active' && !device.online,\n  );\n\n  const shortDrawers = (shiftData?.shifts ?? []).filter((shift) => {\n    const reading = readVariance(shift);\n    return reading.kind === 'short' || reading.kind === 'over';\n  });\n\n  /** The ledger speaks minor units; the formatter speaks major. */\n  const naira = (minor: number) => money(minor / 100);\n\n  const nothingWrong = offline.length === 0 && shortDrawers.length === 0;\n  /**\n   * Nothing owned and nothing on order.\n   *\n   * `undefined` while the request is in flight, which is why this asks for a\n   * loaded list rather than `!devices.length` — the offer must not flash at a\n   * merchant who owns four tills.\n   */\n  const noHardware = deviceData\n    ? (deviceData.devices ?? []).length === 0\n    : false;\n\n  if (noHardware) {\n    return (\n      <Panel title=\"Sell in person\">\n        <div className=\"flex h-full flex-col items-start justify-center gap-3 py-2\">\n          <span\n            aria-hidden\n            className=\"grid size-8 place-items-center rounded-lg bg-[var(--bg-muted)] text-[var(--text-secondary)]\"\n          >\n            <Tablet className=\"size-4\" />\n          </span>\n          <p className=\"text-sm text-[var(--text-secondary)]\">\n            Take card and transfer payments at the counter with a Box terminal.\n          </p>\n          <Button asChild size=\"md\" variant=\"secondary\">\n            <Link href=\"/dashboard/hardware/requests/new\">\n              Request a terminal\n            </Link>\n          </Button>\n        </div>\n      </Panel>\n    );\n  }\n\n  return (\n    <Panel\n      title=\"Hardware\"\n      action={{ label: 'All devices', href: '/dashboard/hardware' }}\n    >\n      {nothingWrong ? (\n        <PanelEmpty\n          icon={Tablet}\n          title=\"Every machine is reporting, and every drawer balanced.\"\n        />\n      ) : (\n        <ul className=\"divide-y divide-[var(--border-subtle)]\">\n          {offline.slice(0, 3).map((device) => (\n            <li key={device.id}>\n              <Link\n                href={`/dashboard/hardware/${device.id}`}\n                className=\"flex items-center justify-between gap-3 py-3 first:pt-0\"\n              >\n                <div className=\"min-w-0\">\n                  <p className=\"truncate text-sm text-ink\">\n                    {device.label || device.deviceId}\n                  </p>\n                  <p className=\"truncate text-xs text-[var(--text-tertiary)]\">\n                    Not reporting\n                  </p>\n                </div>\n                {/*\n                  Amber, not red. A machine that has gone quiet is usually\n                  switched off or off the network, and painting every one of\n                  those as an emergency is how a merchant learns to ignore the\n                  colour that means something.\n                */}\n                <span\n                  aria-hidden\n                  className=\"size-2 shrink-0 rounded-full bg-[var(--warning)]\"\n                />\n              </Link>\n            </li>\n          ))}\n\n          {shortDrawers.slice(0, 3).map((shift) => {\n            const reading = readVariance(shift);\n            return (\n              <li key={shift.id}>\n                <Link\n                  href={`/dashboard/hardware/shifts/${shift.id}`}\n                  className=\"flex items-center justify-between gap-3 py-3 first:pt-0\"\n                >\n                  <div className=\"min-w-0\">\n                    <p className=\"truncate text-sm text-ink\">\n                      {shift.deviceLabel ?? 'A drawer'}\n                    </p>\n                    <p className=\"truncate text-xs text-[var(--text-tertiary)]\">\n                      {shift.openedByName\n                        ? `Counted by ${shift.openedByName}`\n                        : 'Nobody signed in'}\n                    </p>\n                  </div>\n                  <span\n                    className=\"shrink-0 text-sm\"\n                    style={{\n                      color:\n                        reading.kind === 'short'\n                          ? 'var(--error)'\n                          : 'var(--warning)',\n                    }}\n                  >\n                    {reading.kind === 'short' ? 'Short ' : 'Over '}\n                    {'amount' in reading ? naira(reading.amount) : ''}\n                  </span>\n                </Link>\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </Panel>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,14 @@
+import type { WidgetContext } from './types';
+export declare function HomeWidgets({ ctx: pageCtx, accountId, tenantSlug, galleryOpen, onGalleryOpenChange, }: {
+    ctx: WidgetContext;
+    accountId?: string;
+    tenantSlug?: string;
+    /**
+     * The gallery is opened from the PAGE HEADER now, not from a tile in the
+     * grid. Adding a widget is a control and the header is where this app puts
+     * controls; a dashed cell sitting inside the board it edits was the odd one
+     * out, and it also cost a slot that a real card now uses.
+     */
+    galleryOpen: boolean;
+    onGalleryOpenChange: (open: boolean) => void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,237 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useRef, useState } from "react";
+import {
+  AnimatePresence,
+  motion,
+  useDragControls,
+  useReducedMotion
+} from "motion/react";
+import { WIDGET_HEIGHT } from "./types";
+import { eases } from "@withpotter/lib/motion";
+import { widgetDef, widgetsFor, coveredHrefs } from "./registry";
+import { WidgetFrame } from "./widget-frame";
+import { WidgetGallery } from "./widget-gallery";
+import { WidgetEmptyState } from "./widget-empty";
+import { useHomeLayout, sizeForIndex } from "./use-home-layout";
+import { MoneyBoardProvider } from "./money-context";
+import { useQuietRegulars } from "./regulars-widget";
+function BoardCard({
+  id,
+  span,
+  dimmed,
+  disabled,
+  animateLayout,
+  onLift,
+  onDrag,
+  onDrop,
+  children
+}) {
+  const controls = useDragControls();
+  const holdRef = useRef(null);
+  const cancelHold = () => {
+    if (holdRef.current) clearTimeout(holdRef.current);
+    holdRef.current = null;
+  };
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      "data-widget": id,
+      layout: animateLayout,
+      initial: false,
+      animate: { opacity: dimmed ? 0.6 : 1 },
+      exit: { opacity: 0, y: -20, scale: 0.9 },
+      transition: {
+        layout: { duration: 0.35, ease: eases.overshoot },
+        opacity: { duration: 0.2, ease: eases.out }
+      },
+      drag: !disabled,
+      dragListener: false,
+      dragControls: controls,
+      dragSnapToOrigin: true,
+      dragElastic: 0.12,
+      dragMomentum: false,
+      onPointerDown: (e) => {
+        if (disabled) return;
+        const ev = e;
+        cancelHold();
+        holdRef.current = setTimeout(() => {
+          onLift();
+          controls.start(ev);
+        }, 140);
+      },
+      onPointerUp: cancelHold,
+      onPointerLeave: cancelHold,
+      onDrag,
+      onDragEnd: () => {
+        cancelHold();
+        onDrop();
+      },
+      whileDrag: {
+        // Lifted out of the page and out of its own row's stacking order, or
+        // the neighbours paint over the card being carried.
+        zIndex: 40,
+        scale: 1.02,
+        boxShadow: "var(--shadow-xl)",
+        cursor: "grabbing"
+      },
+      className: span,
+      children
+    }
+  );
+}
+function HomeWidgets({
+  ctx: pageCtx,
+  accountId,
+  tenantSlug,
+  galleryOpen,
+  onGalleryOpenChange
+}) {
+  const reduceMotion = useReducedMotion() ?? false;
+  const { quiet } = useQuietRegulars();
+  const ctx = {
+    ...pageCtx,
+    hasQuietRegulars: quiet ? quiet.length > 0 : void 0
+  };
+  const { widgets, placed, add, move } = useHomeLayout(
+    accountId,
+    tenantSlug,
+    ctx
+  );
+  const [settled, setSettled] = useState(false);
+  useEffect(() => {
+    const id = requestAnimationFrame(
+      () => requestAnimationFrame(() => setSettled(true))
+    );
+    return () => cancelAnimationFrame(id);
+  }, []);
+  const candidates = widgetsFor(ctx).filter(
+    (d) => !placed.has(d.id)
+  );
+  const covered = coveredHrefs(ctx, placed);
+  const boardCtx = covered.size === 0 ? ctx : { ...ctx, today: ctx.today.filter((i) => !covered.has(i.href)) };
+  const [dragging, setDragging] = useState(null);
+  const [overIndex, setOverIndex] = useState(null);
+  const rects = useRef([]);
+  const measure = () => {
+    rects.current = widgets.flatMap((w) => {
+      const el = document.querySelector(`[data-widget="${w.id}"]`);
+      if (!el) return [];
+      const r = el.getBoundingClientRect();
+      return [{ id: w.id, cx: r.left + r.width / 2, cy: r.top + r.height / 2 }];
+    });
+  };
+  const centreOf = (id) => {
+    const el = document.querySelector(`[data-widget="${id}"]`);
+    if (!el) return null;
+    const r = el.getBoundingClientRect();
+    return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
+  };
+  const targetAt = (x, y) => {
+    let best = null;
+    let bestDist = Infinity;
+    for (const r of rects.current) {
+      const d = (r.cx - x) ** 2 + (r.cy - y) ** 2;
+      if (d < bestDist) {
+        bestDist = d;
+        best = r.id;
+      }
+    }
+    return best;
+  };
+  return (
+    // Wraps the gallery too: a preview showing different figures from the board
+    // it previews would be worse than no preview.
+    /* @__PURE__ */ jsxs(
+      MoneyBoardProvider,
+      {
+        demo: ctx.demo ? { data: ctx.demo.data, prior: ctx.demo.prior } : void 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              layout: settled,
+              className: "grid grid-cols-1 gap-4 md:grid-cols-6",
+              children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: widgets.map((w, index) => {
+                const def = widgetDef(w.id);
+                if (!def) return null;
+                const zone = dragging && dragging !== w.id && overIndex === index ? /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    layout: true,
+                    initial: { opacity: 0, scale: 0.96 },
+                    animate: { opacity: 1, scale: 1 },
+                    exit: { opacity: 0, scale: 0.96 },
+                    transition: { duration: 0.16, ease: eases.out },
+                    style: { height: WIDGET_HEIGHT },
+                    className: `${sizeForIndex(index) === "wide" ? "md:col-span-3" : "md:col-span-2"} dropzone-breathe rounded-[var(--radius-card)] border-2 border-dashed border-brand-500 bg-brand-500/5`
+                  },
+                  "dropzone"
+                ) : null;
+                return /* @__PURE__ */ jsxs(Fragment, { children: [
+                  zone,
+                  /* @__PURE__ */ jsx(
+                    BoardCard,
+                    {
+                      id: w.id,
+                      animateLayout: settled,
+                      span: w.size === "wide" ? "md:col-span-3" : "md:col-span-2",
+                      dimmed: !!dragging && dragging !== w.id && !reduceMotion,
+                      disabled: reduceMotion,
+                      onLift: () => {
+                        measure();
+                        setDragging(w.id);
+                        setOverIndex(null);
+                      },
+                      onDrag: () => {
+                        const c = centreOf(w.id);
+                        if (!c) return;
+                        const overId = targetAt(c.x, c.y);
+                        if (!overId || overId === w.id) return;
+                        const to = widgets.findIndex((x) => x.id === overId);
+                        if (to !== -1) setOverIndex(to);
+                      },
+                      onDrop: () => {
+                        const c = centreOf(w.id);
+                        const overId = c ? targetAt(c.x, c.y) : null;
+                        const to = overId && overId !== w.id ? widgets.findIndex((x) => x.id === overId) : overIndex;
+                        setDragging(null);
+                        setOverIndex(null);
+                        if (to != null && to !== -1) move(w.id, to);
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        WidgetFrame,
+                        {
+                          name: def.name,
+                          onMove: (delta) => move(
+                            w.id,
+                            widgets.findIndex((x) => x.id === w.id) + delta
+                          ),
+                          children: def.empty?.(boardCtx) ? /* @__PURE__ */ jsx(WidgetEmptyState, { empty: def.empty(boardCtx) }) : def.render(boardCtx, w.size)
+                        }
+                      )
+                    }
+                  )
+                ] }, w.id);
+              }) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            WidgetGallery,
+            {
+              open: galleryOpen,
+              onOpenChange: onGalleryOpenChange,
+              candidates,
+              ctx,
+              onAdd: (def, size) => add(def.id, size)
+            }
+          )
+        ]
+      }
+    )
+  );
+}
+export {
+  HomeWidgets
+};
+//# sourceMappingURL=home-widgets.js.map