@withpotter/components 0.13.0-next.101

package/dist/mobile/screens/insights.js

@@ -0,0 +1,419 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import {
+  ChartNoAxesCombined,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  Receipt,
+  Layers,
+  Package,
+  Store,
+  TrendingDown,
+  TrendingUp,
+  Users,
+  X
+} from "lucide-react";
+import { MobileScreenFrame } from "@withpotter/components/mobile/screen-frame-host";
+function MobileInsightsScreen({
+  data,
+  loading = false,
+  formatCurrency,
+  dateRangeLabel,
+  dateRanges,
+  currentRangeKey,
+  onSelectDateRange,
+  onDateRangeClick
+}) {
+  const router = useRouter();
+  const [showRangeSheet, setShowRangeSheet] = useState(false);
+  const canPickRange = Boolean(dateRanges?.length && onSelectDateRange);
+  const sales = data?.sales;
+  const overview = data?.overview;
+  const customers = data?.customerStats;
+  const orderStats = data?.orderStats;
+  const revSeries = data?.revenueTimeSeries ?? [];
+  const totalRevenue = data?.channelSales ? data.channelSales.storefront.revenue + data.channelSales.inPerson.revenue : orderStats?.revenue || sales?.totalRevenue || 0;
+  const totalOrders = data?.channelSales ? data.channelSales.storefront.orderCount + data.channelSales.inPerson.orderCount : orderStats?.total || sales?.totalOrders || 0;
+  const averageOrderValue = totalOrders > 0 ? totalRevenue / totalOrders : sales?.averageOrderValue ?? 0;
+  const conversionRate = sales?.conversionRate ?? null;
+  return (
+    /* The frame owns the app row, the sheet, the title and the tab bar. Every
+       native screen used to draw all four itself — the same root div, the same
+       `env(safe-area-inset-top)`, the same title, the same `<BottomTabBar/>`,
+       thirteen times and already disagreeing on padding and title size. */
+    /* @__PURE__ */ jsxs(
+      MobileScreenFrame,
+      {
+        title: "Insights",
+        actions: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: canPickRange ? () => setShowRangeSheet(true) : onDateRangeClick,
+            className: "flex h-9 items-center gap-1 rounded-full px-2 text-2xs font-medium",
+            style: { color: "var(--mb-text-secondary)" },
+            children: [
+              dateRangeLabel,
+              /* @__PURE__ */ jsx(ChevronDown, {})
+            ]
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "section",
+            {
+              className: "mt-6 rounded-3xl border p-4",
+              style: {
+                borderColor: "var(--mb-border)",
+                background: "var(--mb-card)"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "p",
+                  {
+                    className: "text-2xs font-medium",
+                    style: { color: "var(--mb-text-tertiary)" },
+                    children: [
+                      "Revenue \xB7 ",
+                      dateRangeLabel
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "mt-1 text-4xl font-bold leading-tight tabular-nums",
+                    style: { color: "var(--mb-text)" },
+                    children: formatCurrency(totalRevenue)
+                  }
+                ),
+                conversionRate != null ? /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "mt-1.5 flex items-center gap-1.5 text-xs font-medium",
+                    style: {
+                      color: conversionRate >= 0 ? "var(--mb-good)" : "var(--mb-bad)"
+                    },
+                    children: [
+                      conversionRate >= 0 ? /* @__PURE__ */ jsx(TrendingUp, { className: "size-4" }) : /* @__PURE__ */ jsx(TrendingDown, { className: "size-4" }),
+                      conversionRate.toFixed(1),
+                      "% conversion"
+                    ]
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(Sparkline, { points: revSeries.map((p) => p.value) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "mt-3 grid grid-cols-2 gap-2", children: [
+            /* @__PURE__ */ jsx(KpiTile, { label: "Orders", value: totalOrders.toLocaleString() }),
+            /* @__PURE__ */ jsx(KpiTile, { label: "AOV", value: formatCurrency(averageOrderValue) }),
+            /* @__PURE__ */ jsx(
+              KpiTile,
+              {
+                label: "Conversion",
+                value: `${(conversionRate ?? 0).toFixed(1)}%`
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              KpiTile,
+              {
+                label: "Visitors",
+                value: (overview?.uniqueVisitors ?? 0).toLocaleString()
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("section", { className: "mt-6", children: [
+            /* @__PURE__ */ jsx(Caption, { children: "Reports" }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
+              /* @__PURE__ */ jsx(
+                ReportRow,
+                {
+                  icon: Receipt,
+                  label: "Sales",
+                  hint: `${formatCurrency(totalRevenue)} \xB7 ${dateRangeLabel}`,
+                  href: "/dashboard/analytics"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ReportRow,
+                {
+                  icon: Store,
+                  label: "In-person",
+                  hint: `${(data?.channelSales?.inPerson.orderCount ?? 0).toLocaleString()} paid sales \xB7 ${formatCurrency(data?.channelSales?.inPerson.revenue ?? 0)}`,
+                  href: "/dashboard/analytics?drill=in-person"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ReportRow,
+                {
+                  icon: TrendingUp,
+                  label: "Traffic",
+                  hint: `${(overview?.uniqueVisitors ?? 0).toLocaleString()} visitors`,
+                  href: "/dashboard/business/traffic"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ReportRow,
+                {
+                  icon: Users,
+                  label: "Customers",
+                  hint: `${(customers?.totalCustomers ?? 0).toLocaleString()} total \xB7 ${(customers?.subscribers ?? 0).toLocaleString()} subscribers`,
+                  href: "/dashboard/analytics/retention"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ReportRow,
+                {
+                  icon: Package,
+                  label: "Products",
+                  hint: `${data?.topContent?.length ?? 0} top sellers`,
+                  href: "/dashboard/analytics?drill=products"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ReportRow,
+                {
+                  icon: Layers,
+                  label: "Engagement",
+                  hint: "Retention & funnels",
+                  href: "/dashboard/analytics?drill=engagement"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("section", { className: "mt-6", children: [
+            /* @__PURE__ */ jsx(Caption, { children: "Saved views" }),
+            /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
+              ReportRow,
+              {
+                icon: ChartNoAxesCombined,
+                label: "Default",
+                hint: `${dateRangeLabel} \xB7 ${data ? "Live" : "Loading"}`,
+                href: "/dashboard/analytics"
+              }
+            ) })
+          ] }),
+          loading ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "mt-6 text-center text-2xs",
+              style: { color: "var(--mb-text-tertiary)" },
+              children: "Loading\u2026"
+            }
+          ) : null,
+          showRangeSheet && dateRanges && onSelectDateRange ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "fixed inset-0 z-[var(--z-modal)] flex items-end",
+              style: { background: "var(--mb-media-scrim)" },
+              onClick: () => setShowRangeSheet(false),
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "w-full rounded-t-3xl border-t p-4 pb-[calc(16px_+_env(safe-area-inset-bottom))]",
+                  style: {
+                    background: "var(--mb-card)",
+                    borderColor: "var(--mb-border)"
+                  },
+                  onClick: (e) => e.stopPropagation(),
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: "text-lg font-semibold",
+                          style: { color: "var(--mb-text)" },
+                          children: "Date range"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": "Close",
+                          onClick: () => setShowRangeSheet(false),
+                          className: "flex h-8 w-8 items-center justify-center rounded-full",
+                          style: { background: "var(--mb-elevated)" },
+                          children: /* @__PURE__ */ jsx(
+                            X,
+                            {
+                              className: "size-4",
+                              style: { color: "var(--mb-text-secondary)" }
+                            }
+                          )
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-1", children: dateRanges.map((range) => {
+                      const active = range.key === currentRangeKey;
+                      return /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            onSelectDateRange(range.key);
+                            setShowRangeSheet(false);
+                          },
+                          className: "flex w-full items-center justify-between rounded-2xl px-3 py-3 text-left text-md font-medium",
+                          style: {
+                            background: active ? "var(--mb-elevated)" : "transparent",
+                            color: active ? "var(--mb-accent)" : "var(--mb-text)"
+                          },
+                          children: [
+                            range.label,
+                            active ? /* @__PURE__ */ jsx(Check, { className: "size-4" }) : null
+                          ]
+                        },
+                        range.key
+                      );
+                    }) })
+                  ]
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    )
+  );
+}
+function Caption({ children }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: "text-3xs font-medium",
+      style: { color: "var(--mb-text-tertiary)" },
+      children
+    }
+  );
+}
+function KpiTile({ label, value }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "rounded-2xl border p-4",
+      style: { borderColor: "var(--mb-border)", background: "var(--mb-card)" },
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-3xs", style: { color: "var(--mb-text-tertiary)" }, children: label }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "mt-1 text-title font-bold tabular-nums",
+            style: { color: "var(--mb-text)" },
+            children: value
+          }
+        )
+      ]
+    }
+  );
+}
+function ReportRow({
+  icon: Icon,
+  label,
+  hint,
+  href
+}) {
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      href,
+      className: "flex w-full items-center gap-3 rounded-2xl border p-4",
+      style: {
+        borderColor: "var(--mb-border)",
+        background: "var(--mb-card)",
+        minHeight: 60
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl",
+            style: { background: "var(--mb-elevated)" },
+            children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                className: "h-4 w-4",
+                style: { color: "var(--mb-text-secondary)" }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "truncate text-sm font-medium",
+              style: { color: "var(--mb-text)" },
+              children: label
+            }
+          ),
+          hint ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "mt-0.5 truncate text-2xs",
+              style: { color: "var(--mb-text-tertiary)" },
+              children: hint
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          ChevronRight,
+          {
+            className: "size-4",
+            style: { color: "var(--mb-text-muted)" }
+          }
+        )
+      ]
+    }
+  );
+}
+function Sparkline({ points }) {
+  if (!points.length) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "mt-4 h-12 w-full rounded-xl",
+        style: { background: "var(--mb-elevated)" }
+      }
+    );
+  }
+  const max = Math.max(...points, 1);
+  const min = Math.min(...points, 0);
+  const range = max - min || 1;
+  const w = 320;
+  const h = 48;
+  const step = points.length > 1 ? w / (points.length - 1) : 0;
+  const d = points.map((v, i) => {
+    const x = i * step;
+    const y = h - (v - min) / range * h;
+    return `${i === 0 ? "M" : "L"}${x.toFixed(1)},${y.toFixed(1)}`;
+  }).join(" ");
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "mt-4 h-12 w-full",
+      viewBox: `0 0 ${w} ${h}`,
+      preserveAspectRatio: "none",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d,
+          fill: "none",
+          stroke: "var(--mb-good)",
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+export {
+  MobileInsightsScreen
+};
+//# sourceMappingURL=insights.js.map

package/dist/mobile/screens/insights.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/screens/insights.tsx"],"sourcesContent":["'use client';\n\n/**\n * Mobile screen — Insights / Analytics hub\n *\n * Visual contract: `InsightsHub` in mobile-redesign-mockups.tsx\n * Route: /dashboard/analytics (mobile)\n */\n\nimport React, { useState } from 'react';\nimport Link from 'next/link';\nimport { useRouter } from 'next/navigation';\nimport {\n  ArrowLeft,\n  ChartNoAxesCombined,\n  Check,\n  ChevronDown,\n  ChevronRight,\n  Receipt,\n  Layers,\n  Package,\n  Store,\n  TrendingDown,\n  TrendingUp,\n  Users,\n  X,\n} from 'lucide-react';\nimport type { DashboardStats } from '@withpotter/lib/api/types';\nimport { MobileScreenFrame } from '@withpotter/components/mobile/screen-frame-host';\n\nexport interface InsightsDateRangeOption {\n  key: string;\n  label: string;\n}\n\ninterface MobileInsightsScreenProps {\n  data: DashboardStats | null;\n  loading?: boolean;\n  formatCurrency: (n: number) => string;\n  dateRangeLabel: string;\n  dateRanges?: InsightsDateRangeOption[];\n  currentRangeKey?: string;\n  onSelectDateRange?: (key: string) => void;\n  onDateRangeClick?: () => void;\n}\n\nexport function MobileInsightsScreen({\n  data,\n  loading = false,\n  formatCurrency,\n  dateRangeLabel,\n  dateRanges,\n  currentRangeKey,\n  onSelectDateRange,\n  onDateRangeClick,\n}: MobileInsightsScreenProps) {\n  const router = useRouter();\n  const [showRangeSheet, setShowRangeSheet] = useState(false);\n  const canPickRange = Boolean(dateRanges?.length && onSelectDateRange);\n  const sales = data?.sales;\n  const overview = data?.overview;\n  const customers = data?.customerStats;\n  const orderStats = data?.orderStats;\n  const revSeries = data?.revenueTimeSeries ?? [];\n\n  // Prefer order-level totals (matches desktop dashboard logic). The\n  // `sales.*` aggregate from the analytics endpoint can return 0 when\n  // orders aren't all marked completed yet, so fall back order-by-order.\n  const totalRevenue = data?.channelSales\n    ? data.channelSales.storefront.revenue + data.channelSales.inPerson.revenue\n    : orderStats?.revenue || sales?.totalRevenue || 0;\n  const totalOrders = data?.channelSales\n    ? data.channelSales.storefront.orderCount + data.channelSales.inPerson.orderCount\n    : orderStats?.total || sales?.totalOrders || 0;\n  const averageOrderValue =\n    totalOrders > 0\n      ? totalRevenue / totalOrders\n      : (sales?.averageOrderValue ?? 0);\n  const conversionRate = sales?.conversionRate ?? null;\n\n  return (\n    /* The frame owns the app row, the sheet, the title and the tab bar. Every\n       native screen used to draw all four itself — the same root div, the same\n       `env(safe-area-inset-top)`, the same title, the same `<BottomTabBar/>`,\n       thirteen times and already disagreeing on padding and title size. */\n    <MobileScreenFrame\n      title=\"Insights\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={\n            canPickRange ? () => setShowRangeSheet(true) : onDateRangeClick\n          }\n          className=\"flex h-9 items-center gap-1 rounded-full px-2 text-2xs font-medium\"\n          style={{ color: 'var(--mb-text-secondary)' }}\n        >\n          {dateRangeLabel}\n          <ChevronDown />\n        </button>\n      }\n    >\n      {/* Hero — revenue card */}\n      <section\n        className=\"mt-6 rounded-3xl border p-4\"\n        style={{\n          borderColor: 'var(--mb-border)',\n          background: 'var(--mb-card)',\n        }}\n      >\n        <p\n          className=\"text-2xs font-medium\"\n          style={{ color: 'var(--mb-text-tertiary)' }}\n        >\n          Revenue · {dateRangeLabel}\n        </p>\n        <p\n          className=\"mt-1 text-4xl font-bold leading-tight tabular-nums\"\n          style={{ color: 'var(--mb-text)' }}\n        >\n          {formatCurrency(totalRevenue)}\n        </p>\n        {conversionRate != null ? (\n          <div\n            className=\"mt-1.5 flex items-center gap-1.5 text-xs font-medium\"\n            style={{\n              color: conversionRate >= 0 ? 'var(--mb-good)' : 'var(--mb-bad)',\n            }}\n          >\n            {conversionRate >= 0 ? (\n              <TrendingUp className=\"size-4\" />\n            ) : (\n              <TrendingDown className=\"size-4\" />\n            )}\n            {conversionRate.toFixed(1)}% conversion\n          </div>\n        ) : null}\n        <Sparkline points={revSeries.map((p) => p.value)} />\n      </section>\n\n      {/* KPI grid */}\n      <div className=\"mt-3 grid grid-cols-2 gap-2\">\n        <KpiTile label=\"Orders\" value={totalOrders.toLocaleString()} />\n        <KpiTile label=\"AOV\" value={formatCurrency(averageOrderValue)} />\n        <KpiTile\n          label=\"Conversion\"\n          value={`${(conversionRate ?? 0).toFixed(1)}%`}\n        />\n        <KpiTile\n          label=\"Visitors\"\n          value={(overview?.uniqueVisitors ?? 0).toLocaleString()}\n        />\n      </div>\n\n      {/* Reports */}\n      <section className=\"mt-6\">\n        <Caption>Reports</Caption>\n        <div className=\"mt-2 space-y-2\">\n          <ReportRow\n            icon={Receipt}\n            label=\"Sales\"\n            hint={`${formatCurrency(totalRevenue)} · ${dateRangeLabel}`}\n            href=\"/dashboard/analytics\"\n          />\n          <ReportRow\n            icon={Store}\n            label=\"In-person\"\n            hint={`${(data?.channelSales?.inPerson.orderCount ?? 0).toLocaleString()} paid sales · ${formatCurrency(data?.channelSales?.inPerson.revenue ?? 0)}`}\n            href=\"/dashboard/analytics?drill=in-person\"\n          />\n          <ReportRow\n            icon={TrendingUp}\n            label=\"Traffic\"\n            hint={`${(overview?.uniqueVisitors ?? 0).toLocaleString()} visitors`}\n            href=\"/dashboard/business/traffic\"\n          />\n          <ReportRow\n            icon={Users}\n            label=\"Customers\"\n            hint={`${(customers?.totalCustomers ?? 0).toLocaleString()} total · ${(customers?.subscribers ?? 0).toLocaleString()} subscribers`}\n            href=\"/dashboard/analytics/retention\"\n          />\n          <ReportRow\n            icon={Package}\n            label=\"Products\"\n            hint={`${data?.topContent?.length ?? 0} top sellers`}\n            href=\"/dashboard/analytics?drill=products\"\n          />\n          <ReportRow\n            icon={Layers}\n            label=\"Engagement\"\n            hint=\"Retention & funnels\"\n            href=\"/dashboard/analytics?drill=engagement\"\n          />\n        </div>\n      </section>\n\n      {/* Saved views placeholder */}\n      <section className=\"mt-6\">\n        <Caption>Saved views</Caption>\n        <div className=\"mt-2\">\n          <ReportRow\n            icon={ChartNoAxesCombined}\n            label=\"Default\"\n            hint={`${dateRangeLabel} · ${data ? 'Live' : 'Loading'}`}\n            href=\"/dashboard/analytics\"\n          />\n        </div>\n      </section>\n\n      {loading ? (\n        <p\n          className=\"mt-6 text-center text-2xs\"\n          style={{ color: 'var(--mb-text-tertiary)' }}\n        >\n          Loading…\n        </p>\n      ) : null}\n\n      {showRangeSheet && dateRanges && onSelectDateRange ? (\n        <div\n          className=\"fixed inset-0 z-[var(--z-modal)] flex items-end\"\n          style={{ background: 'var(--mb-media-scrim)' }}\n          onClick={() => setShowRangeSheet(false)}\n        >\n          <div\n            className=\"w-full rounded-t-3xl border-t p-4 pb-[calc(16px_+_env(safe-area-inset-bottom))]\"\n            style={{\n              background: 'var(--mb-card)',\n              borderColor: 'var(--mb-border)',\n            }}\n            onClick={(e) => e.stopPropagation()}\n          >\n            <div className=\"flex items-center justify-between\">\n              <p\n                className=\"text-lg font-semibold\"\n                style={{ color: 'var(--mb-text)' }}\n              >\n                Date range\n              </p>\n              <button\n                type=\"button\"\n                aria-label=\"Close\"\n                onClick={() => setShowRangeSheet(false)}\n                className=\"flex h-8 w-8 items-center justify-center rounded-full\"\n                style={{ background: 'var(--mb-elevated)' }}\n              >\n                <X\n                  className=\"size-4\"\n                  style={{ color: 'var(--mb-text-secondary)' }}\n                />\n              </button>\n            </div>\n            <div className=\"mt-3 space-y-1\">\n              {dateRanges.map((range) => {\n                const active = range.key === currentRangeKey;\n                return (\n                  <button\n                    key={range.key}\n                    type=\"button\"\n                    onClick={() => {\n                      onSelectDateRange(range.key);\n                      setShowRangeSheet(false);\n                    }}\n                    className=\"flex w-full items-center justify-between rounded-2xl px-3 py-3 text-left text-md font-medium\"\n                    style={{\n                      background: active ? 'var(--mb-elevated)' : 'transparent',\n                      color: active ? 'var(--mb-accent)' : 'var(--mb-text)',\n                    }}\n                  >\n                    {range.label}\n                    {active ? <Check className=\"size-4\" /> : null}\n                  </button>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      ) : null}\n    </MobileScreenFrame>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n\nfunction Caption({ children }: { children: React.ReactNode }) {\n  return (\n    <p\n      className=\"text-3xs font-medium\"\n      style={{ color: 'var(--mb-text-tertiary)' }}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction KpiTile({ label, value }: { label: string; value: string }) {\n  return (\n    <div\n      className=\"rounded-2xl border p-4\"\n      style={{ borderColor: 'var(--mb-border)', background: 'var(--mb-card)' }}\n    >\n      <p className=\"text-3xs\" style={{ color: 'var(--mb-text-tertiary)' }}>\n        {label}\n      </p>\n      <p\n        className=\"mt-1 text-title font-bold tabular-nums\"\n        style={{ color: 'var(--mb-text)' }}\n      >\n        {value}\n      </p>\n    </div>\n  );\n}\n\nfunction ReportRow({\n  icon: Icon,\n  label,\n  hint,\n  href,\n}: {\n  icon: React.ComponentType<{\n    className?: string;\n    style?: React.CSSProperties;\n  }>;\n  label: string;\n  hint?: string;\n  href: string;\n}) {\n  return (\n    <Link\n      href={href}\n      className=\"flex w-full items-center gap-3 rounded-2xl border p-4\"\n      style={{\n        borderColor: 'var(--mb-border)',\n        background: 'var(--mb-card)',\n        minHeight: 60,\n      }}\n    >\n      <div\n        className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-xl\"\n        style={{ background: 'var(--mb-elevated)' }}\n      >\n        <Icon\n          className=\"h-4 w-4\"\n          style={{ color: 'var(--mb-text-secondary)' }}\n        />\n      </div>\n      <div className=\"min-w-0 flex-1\">\n        <p\n          className=\"truncate text-sm font-medium\"\n          style={{ color: 'var(--mb-text)' }}\n        >\n          {label}\n        </p>\n        {hint ? (\n          <p\n            className=\"mt-0.5 truncate text-2xs\"\n            style={{ color: 'var(--mb-text-tertiary)' }}\n          >\n            {hint}\n          </p>\n        ) : null}\n      </div>\n      <ChevronRight\n        className=\"size-4\"\n        style={{ color: 'var(--mb-text-muted)' }}\n      />\n    </Link>\n  );\n}\n\nfunction Sparkline({ points }: { points: number[] }) {\n  if (!points.length) {\n    return (\n      <div\n        className=\"mt-4 h-12 w-full rounded-xl\"\n        style={{ background: 'var(--mb-elevated)' }}\n      />\n    );\n  }\n  const max = Math.max(...points, 1);\n  const min = Math.min(...points, 0);\n  const range = max - min || 1;\n  const w = 320;\n  const h = 48;\n  const step = points.length > 1 ? w / (points.length - 1) : 0;\n  const d = points\n    .map((v, i) => {\n      const x = i * step;\n      const y = h - ((v - min) / range) * h;\n      return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;\n    })\n    .join(' ');\n  return (\n    <svg\n      className=\"mt-4 h-12 w-full\"\n      viewBox={`0 0 ${w} ${h}`}\n      preserveAspectRatio=\"none\"\n    >\n      <path\n        d={d}\n        fill=\"none\"\n        stroke=\"var(--mb-good)\"\n        strokeWidth={2}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/screens/manage-rows.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The rows the Manage screen draws, and the two formatters and the status map
+ * only they use.
+ *
+ * Split out of `manage.tsx` under the 500-line rule: that file is a frame (the
+ * title, the sticky search-and-filter region, the day grouping) plus a list of
+ * rows, and the rows are the half that has nothing to do with the frame.
+ */
+import React from 'react';
+import type { Order } from '@withpotter/lib/api/types';
+import type { OrderDisplay } from '@withpotter/lib/intents/types';
+export declare function OrderRow({ order, formatCurrency, onConfirm, orderDisplay, }: {
+    order: Order;
+    formatCurrency: (n: number, currency?: string) => string;
+    onConfirm?: () => void;
+    orderDisplay?: OrderDisplay;
+}): React.JSX.Element;
+export declare function BookingRow({ order, orderDisplay, }: {
+    order: Order;
+    orderDisplay?: OrderDisplay;
+}): React.JSX.Element;
+export declare function ListSkeleton(): React.JSX.Element;
+export declare function EmptyState({ label, copy, }: {
+    label: string;
+    copy?: {
+        title: string;
+        description: string;
+    };
+}): React.JSX.Element;