@withpotter/components 0.13.0-next.101

package/dist/mobile/screens/check-in.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Mobile screen — Check-in
+ * Visual contract: `CheckInDashboard` in mobile-redesign-mockups.tsx
+ *
+ * Props are intentionally minimal so the page route owns scan logic and
+ * data fetching; this screen only renders the live counter, scanner
+ * viewfinder CTA, manual entry input, and recent scans feed.
+ */
+import React from 'react';
+export interface MobileCheckInRecentScan {
+    id: string;
+    name: string;
+    tier?: string;
+    /** Human-readable timestamp ("just now", "1m ago", or formatted time). */
+    time: string;
+    ok: boolean;
+}
+interface MobileCheckInScreenProps {
+    eventTitle?: string;
+    totalAttendees: number;
+    checkedInCount: number;
+    /** Manual code entry value */
+    scanInput: string;
+    onScanInputChange: (value: string) => void;
+    /** Called when the user taps "Check in" or presses enter */
+    onSubmitManualCode: () => void;
+    isSubmitting?: boolean;
+    /** Called when the user taps the scanner viewfinder area or "Open scanner". */
+    onOpenScanner: () => void;
+    /** Optional: open a modal/sheet to pick the active event */
+    onChangeEvent?: () => void;
+    /** Optional: open the attendees search sheet */
+    onSearchAttendees?: () => void;
+    recentScans: MobileCheckInRecentScan[];
+    /** Inline result for the most recent manual submission. */
+    lastResult?: {
+        message: string;
+        success: boolean;
+    } | null;
+    onBack?: () => void;
+}
+export declare function MobileCheckInScreen({ eventTitle, totalAttendees, checkedInCount, scanInput, onScanInputChange, onSubmitManualCode, isSubmitting, onOpenScanner, onChangeEvent, onSearchAttendees, recentScans, lastResult, onBack, }: MobileCheckInScreenProps): React.JSX.Element;
+export {};

package/dist/mobile/screens/check-in.js

@@ -0,0 +1,438 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  CheckCircle2,
+  ChevronDown,
+  QrCode,
+  Search,
+  Type,
+  XCircle
+} from "lucide-react";
+import {
+  BackBar,
+  Caption,
+  useMobileBack
+} from "@withpotter/components/mobile/primitives";
+import { Input } from "@withpotter/ui-kit";
+function MobileCheckInScreen({
+  eventTitle = "All Events",
+  totalAttendees,
+  checkedInCount,
+  scanInput,
+  onScanInputChange,
+  onSubmitManualCode,
+  isSubmitting,
+  onOpenScanner,
+  onChangeEvent,
+  onSearchAttendees,
+  recentScans,
+  lastResult,
+  onBack
+}) {
+  const goBack = useMobileBack(onBack);
+  const remaining = Math.max(0, totalAttendees - checkedInCount);
+  const pct = totalAttendees > 0 ? Math.round(checkedInCount / totalAttendees * 100) : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex min-h-dvh flex-col",
+      style: {
+        paddingTop: "env(safe-area-inset-top)",
+        background: "var(--mb-canvas)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          BackBar,
+          {
+            title: "Check-in",
+            onBack: goBack,
+            trailing: onSearchAttendees ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Search attendees",
+                onClick: onSearchAttendees,
+                className: "flex h-9 w-9 items-center justify-center rounded-full",
+                style: { background: "var(--mb-elevated)" },
+                children: /* @__PURE__ */ jsx(Search, { className: "size-4", style: { color: "var(--mb-text)" } })
+              }
+            ) : void 0
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex-1 overflow-y-auto px-4 pb-6",
+            style: {
+              paddingBottom: "calc(env(safe-area-inset-bottom) + 24px)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "section",
+                {
+                  className: "mt-6 rounded-3xl border p-4",
+                  style: {
+                    borderColor: "color-mix(in srgb, var(--mb-good) 28%, transparent)",
+                    background: "color-mix(in srgb, var(--mb-good) 8%, transparent)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "p",
+                      {
+                        className: "text-3xs font-semibold",
+                        style: { color: "var(--mb-good)" },
+                        children: [
+                          "Live \xB7 ",
+                          eventTitle
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-end gap-2", children: [
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: "text-6xl font-bold leading-none tabular-nums",
+                          style: { color: "var(--mb-text)" },
+                          children: checkedInCount
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        "p",
+                        {
+                          className: "pb-1 text-md tabular-nums",
+                          style: { color: "var(--mb-text-secondary)" },
+                          children: [
+                            "/ ",
+                            totalAttendees
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      "p",
+                      {
+                        className: "mt-1 text-xs",
+                        style: { color: "var(--mb-text-secondary)" },
+                        children: [
+                          pct,
+                          "% checked in \xB7 ",
+                          remaining,
+                          " still to arrive"
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              onChangeEvent ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: onChangeEvent,
+                  className: "mt-3 flex h-11 w-full items-center justify-between rounded-2xl border px-3 text-sm",
+                  style: {
+                    borderColor: "var(--mb-border)",
+                    background: "var(--mb-card)",
+                    color: "var(--mb-text)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: eventTitle }),
+                    /* @__PURE__ */ jsx(
+                      ChevronDown,
+                      {
+                        className: "size-4",
+                        style: { color: "var(--mb-text-secondary)" }
+                      }
+                    )
+                  ]
+                }
+              ) : null,
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: onOpenScanner,
+                  "aria-label": "Open scanner",
+                  className: "relative mt-4 block w-full overflow-hidden rounded-3xl border",
+                  style: {
+                    borderColor: "var(--mb-border)",
+                    background: "#000",
+                    aspectRatio: "1 / 1"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "absolute inset-0",
+                        style: {
+                          background: "radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--mb-accent) 18%, transparent) 0%, rgba(0,0,0,0) 60%), radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--mb-good) 12%, transparent) 0%, rgba(0,0,0,0) 60%)"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: "relative",
+                        style: { width: "60%", aspectRatio: "1 / 1" },
+                        children: [
+                          [
+                            { t: 0, l: 0, r: void 0, b: void 0, bw: "3px 0 0 3px" },
+                            { t: 0, r: 0, l: void 0, b: void 0, bw: "3px 3px 0 0" },
+                            { b: 0, l: 0, t: void 0, r: void 0, bw: "0 0 3px 3px" },
+                            { b: 0, r: 0, t: void 0, l: void 0, bw: "0 3px 3px 0" }
+                          ].map((c, i) => /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "absolute h-7 w-7",
+                              style: {
+                                top: c.t,
+                                left: c.l,
+                                right: c.r,
+                                bottom: c.b,
+                                borderColor: "var(--mb-accent)",
+                                borderStyle: "solid",
+                                borderWidth: c.bw
+                              }
+                            },
+                            i
+                          )),
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "absolute left-0 right-0",
+                              style: {
+                                top: "50%",
+                                height: 2,
+                                background: "var(--mb-accent)"
+                              }
+                            }
+                          )
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "absolute inset-x-0 bottom-3 text-center text-2xs font-medium",
+                        style: {
+                          color: "color-mix(in srgb, var(--mb-accent-fg) 85%, transparent)"
+                        },
+                        children: "Tap to open scanner"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("section", { className: "mt-6", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+                    /* @__PURE__ */ jsx(
+                      QrCode,
+                      {
+                        className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2",
+                        style: { color: "var(--mb-text-tertiary)" }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        type: "text",
+                        inputMode: "text",
+                        autoCapitalize: "characters",
+                        value: scanInput,
+                        onChange: (e) => onScanInputChange(e.target.value),
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter") {
+                            e.preventDefault();
+                            onSubmitManualCode();
+                          }
+                        },
+                        placeholder: "Enter ticket code",
+                        className: "h-11 w-full pl-9 pr-3",
+                        style: {
+                          borderColor: "var(--mb-border)",
+                          background: "var(--mb-card)",
+                          color: "var(--mb-text)"
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onSubmitManualCode,
+                      disabled: !scanInput.trim() || isSubmitting,
+                      className: "h-11 rounded-2xl px-4 text-sm font-semibold disabled:opacity-50",
+                      style: {
+                        background: "var(--mb-accent)",
+                        color: "var(--mb-accent-fg)"
+                      },
+                      children: "Check in"
+                    }
+                  )
+                ] }),
+                lastResult ? /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "mt-2 flex items-center gap-2 rounded-2xl px-3 py-2 text-xs",
+                    style: {
+                      background: lastResult.success ? "color-mix(in srgb, var(--mb-good) 10%, transparent)" : "color-mix(in srgb, var(--mb-bad) 10%, transparent)",
+                      color: lastResult.success ? "var(--mb-good)" : "var(--mb-bad)"
+                    },
+                    children: [
+                      lastResult.success ? /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4 shrink-0" }) : /* @__PURE__ */ jsx(XCircle, { className: "size-4 shrink-0" }),
+                      /* @__PURE__ */ jsx("span", { className: "min-w-0", children: lastResult.message })
+                    ]
+                  }
+                ) : null
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-3 grid grid-cols-2 gap-2", children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onSearchAttendees,
+                    disabled: !onSearchAttendees,
+                    className: "flex h-11 items-center justify-center gap-1.5 rounded-2xl border text-sm font-medium disabled:opacity-50",
+                    style: {
+                      borderColor: "var(--mb-border)",
+                      background: "var(--mb-elevated)",
+                      color: "var(--mb-text)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Search, { className: "size-4" }),
+                      "Search by name"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      const el = document.querySelector(
+                        'input[placeholder="Enter ticket code"]'
+                      );
+                      el?.focus();
+                    },
+                    className: "flex h-11 items-center justify-center gap-1.5 rounded-2xl border text-sm font-medium",
+                    style: {
+                      borderColor: "var(--mb-border)",
+                      background: "var(--mb-elevated)",
+                      color: "var(--mb-text)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Type, { className: "size-4" }),
+                      "Enter ticket #"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("section", { className: "mt-6", children: [
+                /* @__PURE__ */ jsx(Caption, { children: "Recent scans" }),
+                recentScans.length === 0 ? /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "mt-2 rounded-2xl border p-6 text-center",
+                    style: {
+                      borderColor: "var(--mb-border)",
+                      background: "var(--mb-card)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: "text-sm font-medium",
+                          style: { color: "var(--mb-text)" },
+                          children: "No scans yet this session"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: "mt-1 text-xs",
+                          style: { color: "var(--mb-text-tertiary)" },
+                          children: "Scan a ticket QR code or enter a code above to check in attendees."
+                        }
+                      )
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-2", children: recentScans.map((scan) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex items-center gap-3 rounded-2xl border p-4",
+                    style: {
+                      borderColor: "var(--mb-border)",
+                      background: "var(--mb-card)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full",
+                          style: {
+                            background: scan.ok ? "color-mix(in srgb, var(--mb-good) 15%, transparent)" : "color-mix(in srgb, var(--mb-bad) 15%, transparent)"
+                          },
+                          children: scan.ok ? /* @__PURE__ */ jsx(
+                            CheckCircle2,
+                            {
+                              className: "size-4",
+                              style: { color: "var(--mb-good)" }
+                            }
+                          ) : /* @__PURE__ */ jsx(
+                            XCircle,
+                            {
+                              className: "size-4",
+                              style: { color: "var(--mb-bad)" }
+                            }
+                          )
+                        }
+                      ),
+                      /* @__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: scan.name
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          "p",
+                          {
+                            className: "mt-0.5 truncate text-2xs",
+                            style: { color: "var(--mb-text-tertiary)" },
+                            children: [
+                              scan.tier ? `${scan.tier} \xB7 ` : "",
+                              scan.time
+                            ]
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "text-2xs font-semibold",
+                          style: {
+                            color: scan.ok ? "var(--mb-good)" : "var(--mb-bad)"
+                          },
+                          children: scan.ok ? "Admitted" : "Rejected"
+                        }
+                      )
+                    ]
+                  },
+                  scan.id
+                )) })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  MobileCheckInScreen
+};
+//# sourceMappingURL=check-in.js.map

package/dist/mobile/screens/check-in.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/screens/check-in.tsx"],"sourcesContent":["'use client';\n\n/**\n * Mobile screen — Check-in\n * Visual contract: `CheckInDashboard` in mobile-redesign-mockups.tsx\n *\n * Props are intentionally minimal so the page route owns scan logic and\n * data fetching; this screen only renders the live counter, scanner\n * viewfinder CTA, manual entry input, and recent scans feed.\n */\n\nimport React from 'react';\nimport {\n  CheckCircle2,\n  ChevronDown,\n  QrCode,\n  Search,\n  Type,\n  XCircle,\n} from 'lucide-react';\nimport {\n  BackBar,\n  Caption,\n  useMobileBack,\n} from '@withpotter/components/mobile/primitives';\nimport { Input } from '@withpotter/ui-kit';\n\nexport interface MobileCheckInRecentScan {\n  id: string;\n  name: string;\n  tier?: string;\n  /** Human-readable timestamp (\"just now\", \"1m ago\", or formatted time). */\n  time: string;\n  ok: boolean;\n}\n\ninterface MobileCheckInScreenProps {\n  eventTitle?: string;\n  totalAttendees: number;\n  checkedInCount: number;\n  /** Manual code entry value */\n  scanInput: string;\n  onScanInputChange: (value: string) => void;\n  /** Called when the user taps \"Check in\" or presses enter */\n  onSubmitManualCode: () => void;\n  isSubmitting?: boolean;\n  /** Called when the user taps the scanner viewfinder area or \"Open scanner\". */\n  onOpenScanner: () => void;\n  /** Optional: open a modal/sheet to pick the active event */\n  onChangeEvent?: () => void;\n  /** Optional: open the attendees search sheet */\n  onSearchAttendees?: () => void;\n  recentScans: MobileCheckInRecentScan[];\n  /** Inline result for the most recent manual submission. */\n  lastResult?: { message: string; success: boolean } | null;\n  onBack?: () => void;\n}\n\nexport function MobileCheckInScreen({\n  eventTitle = 'All Events',\n  totalAttendees,\n  checkedInCount,\n  scanInput,\n  onScanInputChange,\n  onSubmitManualCode,\n  isSubmitting,\n  onOpenScanner,\n  onChangeEvent,\n  onSearchAttendees,\n  recentScans,\n  lastResult,\n  onBack,\n}: MobileCheckInScreenProps) {\n  const goBack = useMobileBack(onBack);\n  const remaining = Math.max(0, totalAttendees - checkedInCount);\n  const pct =\n    totalAttendees > 0\n      ? Math.round((checkedInCount / totalAttendees) * 100)\n      : 0;\n\n  return (\n    <div\n      className=\"flex min-h-dvh flex-col\"\n      style={{\n        paddingTop: 'env(safe-area-inset-top)',\n        background: 'var(--mb-canvas)',\n      }}\n    >\n      <BackBar\n        title=\"Check-in\"\n        onBack={goBack}\n        trailing={\n          onSearchAttendees ? (\n            <button\n              type=\"button\"\n              aria-label=\"Search attendees\"\n              onClick={onSearchAttendees}\n              className=\"flex h-9 w-9 items-center justify-center rounded-full\"\n              style={{ background: 'var(--mb-elevated)' }}\n            >\n              <Search className=\"size-4\" style={{ color: 'var(--mb-text)' }} />\n            </button>\n          ) : undefined\n        }\n      />\n\n      <div\n        className=\"flex-1 overflow-y-auto px-4 pb-6\"\n        style={{\n          paddingBottom: 'calc(env(safe-area-inset-bottom) + 24px)',\n        }}\n      >\n        {/* Live counter */}\n        <section\n          className=\"mt-6 rounded-3xl border p-4\"\n          style={{\n            borderColor: 'color-mix(in srgb, var(--mb-good) 28%, transparent)',\n            background: 'color-mix(in srgb, var(--mb-good) 8%, transparent)',\n          }}\n        >\n          <p\n            className=\"text-3xs font-semibold\"\n            style={{ color: 'var(--mb-good)' }}\n          >\n            Live · {eventTitle}\n          </p>\n          <div className=\"mt-2 flex items-end gap-2\">\n            <p\n              className=\"text-6xl font-bold leading-none tabular-nums\"\n              style={{ color: 'var(--mb-text)' }}\n            >\n              {checkedInCount}\n            </p>\n            <p\n              className=\"pb-1 text-md tabular-nums\"\n              style={{ color: 'var(--mb-text-secondary)' }}\n            >\n              / {totalAttendees}\n            </p>\n          </div>\n          <p\n            className=\"mt-1 text-xs\"\n            style={{ color: 'var(--mb-text-secondary)' }}\n          >\n            {pct}% checked in · {remaining} still to arrive\n          </p>\n        </section>\n\n        {/* Event picker */}\n        {onChangeEvent ? (\n          <button\n            type=\"button\"\n            onClick={onChangeEvent}\n            className=\"mt-3 flex h-11 w-full items-center justify-between rounded-2xl border px-3 text-sm\"\n            style={{\n              borderColor: 'var(--mb-border)',\n              background: 'var(--mb-card)',\n              color: 'var(--mb-text)',\n            }}\n          >\n            <span className=\"truncate\">{eventTitle}</span>\n            <ChevronDown\n              className=\"size-4\"\n              style={{ color: 'var(--mb-text-secondary)' }}\n            />\n          </button>\n        ) : null}\n\n        {/* Scanner viewfinder */}\n        <button\n          type=\"button\"\n          onClick={onOpenScanner}\n          aria-label=\"Open scanner\"\n          className=\"relative mt-4 block w-full overflow-hidden rounded-3xl border\"\n          style={{\n            borderColor: 'var(--mb-border)',\n            background: '#000',\n            aspectRatio: '1 / 1',\n          }}\n        >\n          <span\n            className=\"absolute inset-0\"\n            style={{\n              background:\n                'radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--mb-accent) 18%, transparent) 0%, rgba(0,0,0,0) 60%), radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--mb-good) 12%, transparent) 0%, rgba(0,0,0,0) 60%)',\n            }}\n          />\n          <span className=\"absolute inset-0 flex items-center justify-center\">\n            <span\n              className=\"relative\"\n              style={{ width: '60%', aspectRatio: '1 / 1' }}\n            >\n              {(\n                [\n                  { t: 0, l: 0, r: undefined, b: undefined, bw: '3px 0 0 3px' },\n                  { t: 0, r: 0, l: undefined, b: undefined, bw: '3px 3px 0 0' },\n                  { b: 0, l: 0, t: undefined, r: undefined, bw: '0 0 3px 3px' },\n                  { b: 0, r: 0, t: undefined, l: undefined, bw: '0 3px 3px 0' },\n                ] as Array<{\n                  t?: number;\n                  l?: number;\n                  r?: number;\n                  b?: number;\n                  bw: string;\n                }>\n              ).map((c, i) => (\n                <span\n                  key={i}\n                  className=\"absolute h-7 w-7\"\n                  style={{\n                    top: c.t,\n                    left: c.l,\n                    right: c.r,\n                    bottom: c.b,\n                    borderColor: 'var(--mb-accent)',\n                    borderStyle: 'solid',\n                    borderWidth: c.bw,\n                  }}\n                />\n              ))}\n              <span\n                className=\"absolute left-0 right-0\"\n                style={{\n                  top: '50%',\n                  height: 2,\n                  background: 'var(--mb-accent)',\n                }}\n              />\n            </span>\n          </span>\n          <span\n            className=\"absolute inset-x-0 bottom-3 text-center text-2xs font-medium\"\n            style={{\n              color: 'color-mix(in srgb, var(--mb-accent-fg) 85%, transparent)',\n            }}\n          >\n            Tap to open scanner\n          </span>\n        </button>\n\n        {/* Manual code entry */}\n        <section className=\"mt-6\">\n          <div className=\"flex gap-2\">\n            <div className=\"relative flex-1\">\n              <QrCode\n                className=\"pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2\"\n                style={{ color: 'var(--mb-text-tertiary)' }}\n              />\n              <Input\n                type=\"text\"\n                inputMode=\"text\"\n                autoCapitalize=\"characters\"\n                value={scanInput}\n                onChange={(e) => onScanInputChange(e.target.value)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') {\n                    e.preventDefault();\n                    onSubmitManualCode();\n                  }\n                }}\n                placeholder=\"Enter ticket code\"\n                className=\"h-11 w-full pl-9 pr-3\"\n                style={{\n                  borderColor: 'var(--mb-border)',\n                  background: 'var(--mb-card)',\n                  color: 'var(--mb-text)',\n                }}\n              />\n            </div>\n            <button\n              type=\"button\"\n              onClick={onSubmitManualCode}\n              disabled={!scanInput.trim() || isSubmitting}\n              className=\"h-11 rounded-2xl px-4 text-sm font-semibold disabled:opacity-50\"\n              style={{\n                background: 'var(--mb-accent)',\n                color: 'var(--mb-accent-fg)',\n              }}\n            >\n              Check in\n            </button>\n          </div>\n          {lastResult ? (\n            <div\n              className=\"mt-2 flex items-center gap-2 rounded-2xl px-3 py-2 text-xs\"\n              style={{\n                background: lastResult.success\n                  ? 'color-mix(in srgb, var(--mb-good) 10%, transparent)'\n                  : 'color-mix(in srgb, var(--mb-bad) 10%, transparent)',\n                color: lastResult.success ? 'var(--mb-good)' : 'var(--mb-bad)',\n              }}\n            >\n              {lastResult.success ? (\n                <CheckCircle2 className=\"size-4 shrink-0\" />\n              ) : (\n                <XCircle className=\"size-4 shrink-0\" />\n              )}\n              <span className=\"min-w-0\">{lastResult.message}</span>\n            </div>\n          ) : null}\n        </section>\n\n        <div className=\"mt-3 grid grid-cols-2 gap-2\">\n          <button\n            type=\"button\"\n            onClick={onSearchAttendees}\n            disabled={!onSearchAttendees}\n            className=\"flex h-11 items-center justify-center gap-1.5 rounded-2xl border text-sm font-medium disabled:opacity-50\"\n            style={{\n              borderColor: 'var(--mb-border)',\n              background: 'var(--mb-elevated)',\n              color: 'var(--mb-text)',\n            }}\n          >\n            <Search className=\"size-4\" />\n            Search by name\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => {\n              const el = document.querySelector<HTMLInputElement>(\n                'input[placeholder=\"Enter ticket code\"]',\n              );\n              el?.focus();\n            }}\n            className=\"flex h-11 items-center justify-center gap-1.5 rounded-2xl border text-sm font-medium\"\n            style={{\n              borderColor: 'var(--mb-border)',\n              background: 'var(--mb-elevated)',\n              color: 'var(--mb-text)',\n            }}\n          >\n            <Type className=\"size-4\" />\n            Enter ticket #\n          </button>\n        </div>\n\n        {/* Recent scans */}\n        <section className=\"mt-6\">\n          <Caption>Recent scans</Caption>\n          {recentScans.length === 0 ? (\n            <div\n              className=\"mt-2 rounded-2xl border p-6 text-center\"\n              style={{\n                borderColor: 'var(--mb-border)',\n                background: 'var(--mb-card)',\n              }}\n            >\n              <p\n                className=\"text-sm font-medium\"\n                style={{ color: 'var(--mb-text)' }}\n              >\n                No scans yet this session\n              </p>\n              <p\n                className=\"mt-1 text-xs\"\n                style={{ color: 'var(--mb-text-tertiary)' }}\n              >\n                Scan a ticket QR code or enter a code above to check in\n                attendees.\n              </p>\n            </div>\n          ) : (\n            <div className=\"mt-2 space-y-2\">\n              {recentScans.map((scan) => (\n                <div\n                  key={scan.id}\n                  className=\"flex items-center gap-3 rounded-2xl border p-4\"\n                  style={{\n                    borderColor: 'var(--mb-border)',\n                    background: 'var(--mb-card)',\n                  }}\n                >\n                  <div\n                    className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-full\"\n                    style={{\n                      background: scan.ok\n                        ? 'color-mix(in srgb, var(--mb-good) 15%, transparent)'\n                        : 'color-mix(in srgb, var(--mb-bad) 15%, transparent)',\n                    }}\n                  >\n                    {scan.ok ? (\n                      <CheckCircle2\n                        className=\"size-4\"\n                        style={{ color: 'var(--mb-good)' }}\n                      />\n                    ) : (\n                      <XCircle\n                        className=\"size-4\"\n                        style={{ color: 'var(--mb-bad)' }}\n                      />\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                      {scan.name}\n                    </p>\n                    <p\n                      className=\"mt-0.5 truncate text-2xs\"\n                      style={{ color: 'var(--mb-text-tertiary)' }}\n                    >\n                      {scan.tier ? `${scan.tier} · ` : ''}\n                      {scan.time}\n                    </p>\n                  </div>\n                  <span\n                    className=\"text-2xs font-semibold\"\n                    style={{\n                      color: scan.ok ? 'var(--mb-good)' : 'var(--mb-bad)',\n                    }}\n                  >\n                    {scan.ok ? 'Admitted' : 'Rejected'}\n                  </span>\n                </div>\n              ))}\n            </div>\n          )}\n        </section>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/screens/customer-detail.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Mobile screen — Customer detail
+ *
+ * Visual contract: `CustomerProfileFull` in mobile-redesign-mockups.tsx
+ * Route: /dashboard/customers/[customerId] (mobile)
+ */
+import React from 'react';
+import type { CustomerStatus, Member, MemberAddressInput, Order } from '@withpotter/lib/api/types';
+interface MobileCustomerDetailScreenProps {
+    customer: Member;
+    orders?: Order[];
+    bookingCount?: number;
+    subscriptionCount?: number;
+    noteCount?: number;
+    loyaltyPoints?: number;
+    loyaltyTier?: string;
+    loyaltyProgressPct?: number;
+    loyaltyHint?: string;
+    formatCurrency: (n: number, currency?: string) => string;
+    activeTab: string;
+    onTabChange: (id: string) => void;
+    onMessage?: () => void;
+    onAdjustPoints?: () => void;
+    onNewOrder?: () => void;
+    onToggleAcceptsMarketing?: (next: boolean) => void;
+    onConvertGuest?: () => void;
+    onStatusChange?: (status: CustomerStatus) => void;
+    onMerge?: () => void;
+    onExportData?: () => void;
+    onDelete?: () => void;
+    savingAddress?: boolean;
+    onAddAddress?: (data: MemberAddressInput) => Promise<boolean>;
+    onUpdateAddress?: (id: string, data: Partial<MemberAddressInput>) => Promise<boolean>;
+    onRemoveAddress?: (id: string) => void;
+    children?: React.ReactNode;
+}
+export declare function MobileCustomerDetailScreen({ customer, orders, bookingCount, subscriptionCount, noteCount, loyaltyPoints, loyaltyTier, loyaltyProgressPct, loyaltyHint, formatCurrency, activeTab, onTabChange, onMessage, onAdjustPoints, onNewOrder, onToggleAcceptsMarketing, onConvertGuest, onStatusChange, onMerge, onExportData, onDelete, savingAddress, onAddAddress, onUpdateAddress, onRemoveAddress, children, }: MobileCustomerDetailScreenProps): React.JSX.Element;
+export {};