@withpotter/components 0.13.0-next.101

package/dist/mobile/screens/customer-detail.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/screens/customer-detail.tsx"],"sourcesContent":["'use client';\n\n/**\n * Mobile screen — Customer detail\n *\n * Visual contract: `CustomerProfileFull` in mobile-redesign-mockups.tsx\n * Route: /dashboard/customers/[customerId] (mobile)\n */\n\nimport React, { useState } from 'react';\nimport Link from 'next/link';\nimport { useRouter } from 'next/navigation';\nimport {\n  ArrowLeft,\n  Archive,\n  Ban,\n  ChevronRight,\n  Edit2,\n  Gift,\n  GitMerge,\n  Mail,\n  MessageCircle,\n  MoreHorizontal,\n  Phone,\n  Plus,\n  RefreshCw,\n  Trash2,\n  UserCheck,\n} from 'lucide-react';\nimport type {\n  CustomerStatus,\n  Member,\n  MemberAddress,\n  MemberAddressInput,\n  Order,\n} from '@withpotter/lib/api/types';\nimport { BOX_HIDE_SMS } from '@withpotter/lib/box-channels';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { TextField } from '@withpotter/components/mobile/primitives';\n\ninterface MobileCustomerDetailScreenProps {\n  customer: Member;\n  orders?: Order[];\n  bookingCount?: number;\n  subscriptionCount?: number;\n  noteCount?: number;\n  loyaltyPoints?: number;\n  loyaltyTier?: string;\n  loyaltyProgressPct?: number;\n  loyaltyHint?: string;\n  formatCurrency: (n: number, currency?: string) => string;\n  activeTab: string;\n  onTabChange: (id: string) => void;\n  onMessage?: () => void;\n  onAdjustPoints?: () => void;\n  onNewOrder?: () => void;\n  onToggleAcceptsMarketing?: (next: boolean) => void;\n  // Management actions — surfaced in the \"More\" sheet.\n  onConvertGuest?: () => void;\n  onStatusChange?: (status: CustomerStatus) => void;\n  onMerge?: () => void;\n  onExportData?: () => void;\n  onDelete?: () => void;\n  // Address book\n  savingAddress?: boolean;\n  onAddAddress?: (data: MemberAddressInput) => Promise<boolean>;\n  onUpdateAddress?: (\n    id: string,\n    data: Partial<MemberAddressInput>,\n  ) => Promise<boolean>;\n  onRemoveAddress?: (id: string) => void;\n  children?: React.ReactNode; // tab body\n}\n\nfunction initials(name?: string | null, email?: string): string {\n  const src = (name || email || '').trim();\n  if (!src) return '?';\n  const parts = src.split(/\\s+|@/).filter(Boolean);\n  return ((parts[0]?.[0] ?? '') + (parts[1]?.[0] ?? '')).toUpperCase();\n}\n\nexport function MobileCustomerDetailScreen({\n  customer,\n  orders = [],\n  bookingCount = 0,\n  subscriptionCount = 0,\n  noteCount = 0,\n  loyaltyPoints,\n  loyaltyTier,\n  loyaltyProgressPct,\n  loyaltyHint,\n  formatCurrency,\n  activeTab,\n  onTabChange,\n  onMessage,\n  onAdjustPoints,\n  onNewOrder,\n  onToggleAcceptsMarketing,\n  onConvertGuest,\n  onStatusChange,\n  onMerge,\n  onExportData,\n  onDelete,\n  savingAddress,\n  onAddAddress,\n  onUpdateAddress,\n  onRemoveAddress,\n  children,\n}: MobileCustomerDetailScreenProps) {\n  const router = useRouter();\n  const [showActions, setShowActions] = useState(false);\n  // null = closed; 'new' = add form; otherwise the address being edited.\n  const [editingAddress, setEditingAddress] = useState<\n    MemberAddress | 'new' | null\n  >(null);\n  const canManageAddresses = !!onAddAddress;\n  const tabs = [\n    { id: 'timeline', label: 'Timeline' },\n    { id: 'orders', label: 'Orders', n: orders.length },\n    { id: 'bookings', label: 'Bookings', n: bookingCount },\n    { id: 'subscriptions', label: 'Memberships', n: subscriptionCount },\n    { id: 'notes', label: 'Notes', n: noteCount },\n  ];\n  const lastNote = customer.notes?.[customer.notes.length - 1];\n  const lastOrderRel = customer.lastOrderAt\n    ? relTime(customer.lastOrderAt)\n    : '—';\n  const sinceMonth = new Date(customer.createdAt).toLocaleDateString('en-US', {\n    month: 'short',\n    year: 'numeric',\n  });\n\n  return (\n    <div\n      className=\"relative flex min-h-dvh flex-col\"\n      style={{\n        paddingTop: 'env(safe-area-inset-top)',\n        background: 'var(--mb-canvas)',\n      }}\n    >\n      {/* Header */}\n      <div className=\"flex h-12 items-center justify-between px-2\">\n        <button\n          type=\"button\"\n          onClick={() => router.push('/dashboard/customers')}\n          aria-label=\"Back\"\n          className=\"flex h-9 w-9 items-center justify-center\"\n        >\n          <ArrowLeft className=\"size-5\" style={{ color: 'var(--mb-text)' }} />\n        </button>\n        <p\n          className=\"text-lg font-semibold\"\n          style={{ color: 'var(--mb-text)' }}\n        >\n          Customer\n        </p>\n        <button\n          type=\"button\"\n          onClick={() => setShowActions(true)}\n          aria-label=\"More actions\"\n          className=\"flex h-9 w-9 items-center justify-center\"\n        >\n          <MoreHorizontal\n            className=\"size-4\"\n            style={{ color: 'var(--mb-text-secondary)' }}\n          />\n        </button>\n      </div>\n\n      <div className=\"flex-1 overflow-y-auto px-4 pb-32\">\n        {/* Identity */}\n        <section\n          className=\"mt-6 rounded-3xl border p-4\"\n          style={{\n            borderColor:\n              'color-mix(in srgb, var(--mb-accent) 28%, transparent)',\n            background: 'color-mix(in srgb, var(--mb-accent) 8%, transparent)',\n          }}\n        >\n          <div className=\"flex items-start gap-3\">\n            <div\n              className=\"flex h-14 w-14 items-center justify-center rounded-2xl text-lg font-bold\"\n              style={{\n                background: 'var(--mb-accent)',\n                color: 'var(--mb-accent-fg)',\n              }}\n            >\n              {initials(customer.name, customer.email)}\n            </div>\n            <div className=\"min-w-0 flex-1\">\n              <p\n                className=\"truncate text-base font-semibold\"\n                style={{ color: 'var(--mb-text)' }}\n              >\n                {customer.name || customer.email}\n              </p>\n              <div className=\"mt-1 flex flex-wrap items-center gap-1.5\">\n                <Badge tone=\"good\" label={prettyType(customer.type)} />\n                {(customer.totalSpent ?? 0) > 100_000 ? (\n                  <Badge tone=\"warn\" label=\"VIP\" />\n                ) : null}\n                <span\n                  className=\"text-3xs\"\n                  style={{ color: 'var(--mb-text-tertiary)' }}\n                >\n                  · since {sinceMonth}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          {/* Without SMS, Message opened the email composer beside an Email\n              button: one envelope, and it opens the composer. */}\n          <div\n            className={`mt-4 grid gap-1.5 ${BOX_HIDE_SMS ? 'grid-cols-3' : 'grid-cols-4'}`}\n          >\n            <ContactAction\n              icon={Mail}\n              label=\"Email\"\n              href={\n                customer.email && !BOX_HIDE_SMS\n                  ? `mailto:${customer.email}`\n                  : undefined\n              }\n              onClick={BOX_HIDE_SMS && customer.email ? onMessage : undefined}\n            />\n            <ContactAction\n              icon={Phone}\n              label=\"Call\"\n              href={customer.phone ? `tel:${customer.phone}` : undefined}\n            />\n            {!BOX_HIDE_SMS && (\n              <ContactAction\n                icon={MessageCircle}\n                label=\"Message\"\n                onClick={onMessage}\n              />\n            )}\n            <ContactAction\n              icon={Edit2}\n              label=\"Edit\"\n              href={`/dashboard/customers/${customer.id}/edit`}\n            />\n          </div>\n        </section>\n\n        {/* Metrics */}\n        <section className=\"mt-6 grid grid-cols-3 gap-2\">\n          <Metric\n            label=\"Lifetime\"\n            value={formatCurrency(customer.totalSpent ?? 0)}\n          />\n          <Metric label=\"Orders\" value={String(customer.totalOrders ?? 0)} />\n          <Metric label=\"Last\" value={lastOrderRel} />\n        </section>\n\n        {/* Loyalty card */}\n        {loyaltyPoints != null ? (\n          <section\n            className=\"mt-6 rounded-3xl border p-4\"\n            style={{\n              borderColor:\n                'color-mix(in srgb, var(--mb-warn) 32%, transparent)',\n              background: 'color-mix(in srgb, var(--mb-warn) 6%, transparent)',\n            }}\n          >\n            <div className=\"flex items-center gap-3\">\n              <div\n                className=\"flex h-10 w-10 items-center justify-center rounded-xl\"\n                style={{\n                  background:\n                    'color-mix(in srgb, var(--mb-warn) 18%, transparent)',\n                }}\n              >\n                <Gift className=\"size-4\" style={{ color: 'var(--mb-warn)' }} />\n              </div>\n              <div className=\"min-w-0 flex-1\">\n                <div className=\"flex items-baseline gap-2\">\n                  <p\n                    className=\"text-base font-bold tabular-nums\"\n                    style={{ color: 'var(--mb-text)' }}\n                  >\n                    {loyaltyPoints.toLocaleString()}\n                  </p>\n                  <p\n                    className=\"text-2xs\"\n                    style={{ color: 'var(--mb-text-tertiary)' }}\n                  >\n                    points{loyaltyTier ? ` · ${loyaltyTier} tier` : ''}\n                  </p>\n                </div>\n                {loyaltyHint ? (\n                  <p\n                    className=\"mt-0.5 text-3xs\"\n                    style={{ color: 'var(--mb-text-tertiary)' }}\n                  >\n                    {loyaltyHint}\n                  </p>\n                ) : null}\n              </div>\n              <ChevronRight\n                className=\"size-4\"\n                style={{ color: 'var(--mb-text-muted)' }}\n              />\n            </div>\n            {loyaltyProgressPct != null ? (\n              <div\n                className=\"mt-3 h-1.5 w-full overflow-hidden rounded-full\"\n                style={{ background: 'var(--mb-elevated)' }}\n              >\n                <div\n                  className=\"h-full rounded-full\"\n                  style={{\n                    width: `${Math.max(0, Math.min(100, loyaltyProgressPct))}%`,\n                    background: 'var(--mb-warn)',\n                  }}\n                />\n              </div>\n            ) : null}\n          </section>\n        ) : null}\n\n        {/* Tabs */}\n        <div className=\"mt-5 flex gap-1 overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden\">\n          {tabs.map((t) => {\n            const active = t.id === activeTab;\n            return (\n              <button\n                key={t.id}\n                type=\"button\"\n                onClick={() => onTabChange(t.id)}\n                className=\"shrink-0 px-3 py-2 text-xs font-medium\"\n                style={{\n                  color: active ? 'var(--mb-text)' : 'var(--mb-text-tertiary)',\n                  borderBottom: active\n                    ? '2px solid var(--mb-text)'\n                    : '2px solid transparent',\n                }}\n              >\n                {t.label}\n                {t.n != null ? (\n                  <span\n                    className=\"ml-1 text-3xs\"\n                    style={{ color: 'var(--mb-text-tertiary)' }}\n                  >\n                    ({t.n})\n                  </span>\n                ) : null}\n              </button>\n            );\n          })}\n        </div>\n\n        {/* Slot for tab content (consumer renders) */}\n        {children ? <div className=\"mt-4\">{children}</div> : null}\n\n        {/* Tags */}\n        <section className=\"mt-6\">\n          <div className=\"flex items-center justify-between\">\n            <Caption>Tags</Caption>\n          </div>\n          <div className=\"mt-2 flex flex-wrap gap-1.5\">\n            {customer.tags?.length ? (\n              customer.tags.map((t) => (\n                <span\n                  key={t}\n                  className=\"rounded-full border px-2.5 py-1 text-3xs font-medium\"\n                  style={{\n                    borderColor: 'var(--mb-border)',\n                    background: 'var(--mb-elevated)',\n                    color: 'var(--mb-text-secondary)',\n                  }}\n                >\n                  {t}\n                </span>\n              ))\n            ) : (\n              <p\n                className=\"text-2xs\"\n                style={{ color: 'var(--mb-text-tertiary)' }}\n              >\n                No tags yet.\n              </p>\n            )}\n          </div>\n        </section>\n\n        {/* Addresses */}\n        <section className=\"mt-6\">\n          <div className=\"flex items-center justify-between\">\n            <Caption>Addresses</Caption>\n            {canManageAddresses ? (\n              <button\n                type=\"button\"\n                onClick={() => setEditingAddress('new')}\n                className=\"flex items-center gap-1 text-2xs font-medium\"\n                style={{ color: 'var(--mb-accent)' }}\n              >\n                <Plus />\n                Add\n              </button>\n            ) : null}\n          </div>\n          <div className=\"mt-2 flex flex-col gap-2\">\n            {customer.addresses?.length ? (\n              customer.addresses.map((a) => (\n                <Button\n                  variant=\"secondary\"\n                  size=\"icon\"\n                  className=\"items-start text-left\"\n                  key={a.id}\n                  disabled={!canManageAddresses}\n                  onClick={() => canManageAddresses && setEditingAddress(a)}\n                  style={{\n                    borderColor: 'var(--mb-border)',\n                    background: 'var(--mb-card)',\n                  }}\n                >\n                  <div className=\"min-w-0 flex-1\">\n                    <div className=\"flex items-center gap-1.5\">\n                      {a.label ? (\n                        <span\n                          className=\"text-sm font-medium\"\n                          style={{ color: 'var(--mb-text)' }}\n                        >\n                          {a.label}\n                        </span>\n                      ) : null}\n                      {a.isDefault ? (\n                        <Badge tone=\"info\" label=\"Default\" />\n                      ) : null}\n                    </div>\n                    <p\n                      className=\"mt-0.5 text-xs leading-relaxed\"\n                      style={{ color: 'var(--mb-text-secondary)' }}\n                    >\n                      {a.line1}\n                      {a.line2 ? `, ${a.line2}` : ''}\n                      <br />\n                      {[a.city, a.state, a.postalCode]\n                        .filter(Boolean)\n                        .join(', ')}\n                      {a.country ? ` · ${a.country}` : ''}\n                    </p>\n                  </div>\n                  {canManageAddresses ? (\n                    <ChevronRight\n                      className=\"mt-0.5 size-4 shrink-0\"\n                      style={{ color: 'var(--mb-text-muted)' }}\n                    />\n                  ) : null}\n                </Button>\n              ))\n            ) : (\n              <p\n                className=\"text-2xs\"\n                style={{ color: 'var(--mb-text-tertiary)' }}\n              >\n                No addresses yet.\n              </p>\n            )}\n          </div>\n        </section>\n\n        {/* Marketing toggle */}\n        <section className=\"mt-6\">\n          <Caption>Marketing</Caption>\n          <div\n            className=\"mt-2 flex items-center justify-between rounded-2xl border p-4\"\n            style={{\n              borderColor: 'var(--mb-border)',\n              background: 'var(--mb-card)',\n            }}\n          >\n            <div>\n              <p\n                className=\"text-sm font-medium\"\n                style={{ color: 'var(--mb-text)' }}\n              >\n                Accepts marketing\n              </p>\n              <p\n                className=\"text-2xs\"\n                style={{ color: 'var(--mb-text-tertiary)' }}\n              >\n                {BOX_HIDE_SMS ? 'Email' : 'Email + SMS'}\n              </p>\n            </div>\n            <Toggle\n              checked={!!customer.acceptsMarketing}\n              onChange={onToggleAcceptsMarketing}\n            />\n          </div>\n        </section>\n\n        {/* Recent note */}\n        {lastNote ? (\n          <section className=\"mt-6\">\n            <Caption>Recent note</Caption>\n            <div\n              className=\"mt-2 rounded-2xl border p-4\"\n              style={{\n                borderColor: 'var(--mb-border)',\n                background: 'var(--mb-card)',\n              }}\n            >\n              <p\n                className=\"text-xs leading-relaxed\"\n                style={{ color: 'var(--mb-text-secondary)' }}\n              >\n                {lastNote.text}\n              </p>\n              <p\n                className=\"mt-2 text-3xs\"\n                style={{ color: 'var(--mb-text-tertiary)' }}\n              >\n                {lastNote.authorName ?? 'Staff'} · {relTime(lastNote.createdAt)}\n              </p>\n            </div>\n          </section>\n        ) : null}\n      </div>\n\n      {/* Floating action bar */}\n      <div\n        className=\"fixed inset-x-3 bottom-3 z-30 grid grid-cols-3 gap-2 rounded-[26px] border p-2\"\n        style={{\n          borderColor: 'var(--mb-border)',\n          background: 'color-mix(in srgb, var(--mb-card) 95%, transparent)',\n          backdropFilter: 'blur(12px)',\n          marginBottom: 'env(safe-area-inset-bottom)',\n        }}\n      >\n        <button\n          type=\"button\"\n          onClick={onMessage}\n          className=\"flex h-12 items-center justify-center gap-1.5 rounded-2xl border text-2xs font-medium\"\n          style={{\n            borderColor: 'var(--mb-border)',\n            background: 'var(--mb-elevated)',\n            color: 'var(--mb-text)',\n          }}\n        >\n          {React.createElement(BOX_HIDE_SMS ? Mail : MessageCircle, {\n            className: 'size-4',\n          })}\n          {BOX_HIDE_SMS ? 'Email' : 'Message'}\n        </button>\n        <button\n          type=\"button\"\n          onClick={onAdjustPoints}\n          className=\"flex h-12 items-center justify-center gap-1.5 rounded-2xl border text-2xs font-medium\"\n          style={{\n            borderColor: 'var(--mb-border)',\n            background: 'var(--mb-elevated)',\n            color: 'var(--mb-text)',\n          }}\n        >\n          <Gift className=\"size-4\" />\n          Adjust pts\n        </button>\n        <button\n          type=\"button\"\n          onClick={onNewOrder}\n          className=\"flex h-12 items-center justify-center gap-1.5 rounded-2xl text-2xs font-semibold\"\n          style={{\n            background: 'var(--mb-accent)',\n            color: 'var(--mb-accent-fg)',\n          }}\n        >\n          <Plus className=\"size-4\" />\n          New order\n        </button>\n      </div>\n\n      {/* Actions sheet */}\n      {showActions ? (\n        <ActionSheet onClose={() => setShowActions(false)}>\n          <ActionRow\n            icon={Edit2}\n            label=\"Edit details\"\n            onClick={() =>\n              router.push(`/dashboard/customers/${customer.id}/edit`)\n            }\n          />\n          {customer.type === 'guest' && onConvertGuest ? (\n            <ActionRow\n              icon={UserCheck}\n              label=\"Convert to registered\"\n              onClick={onConvertGuest}\n            />\n          ) : null}\n          {customer.status === 'active' ? (\n            <ActionRow\n              icon={Ban}\n              label=\"Suspend\"\n              onClick={() => onStatusChange?.('suspended')}\n            />\n          ) : customer.status === 'suspended' ? (\n            <ActionRow\n              icon={RefreshCw}\n              label=\"Reactivate\"\n              onClick={() => onStatusChange?.('active')}\n            />\n          ) : null}\n          {customer.status !== 'archived' ? (\n            <ActionRow\n              icon={Archive}\n              label=\"Archive\"\n              onClick={() => onStatusChange?.('archived')}\n            />\n          ) : (\n            <ActionRow\n              icon={RefreshCw}\n              label=\"Restore\"\n              onClick={() => onStatusChange?.('active')}\n            />\n          )}\n          {onMerge ? (\n            <ActionRow\n              icon={GitMerge}\n              label=\"Merge duplicate\"\n              onClick={onMerge}\n            />\n          ) : null}\n          {onExportData ? (\n            <ActionRow label=\"Export data\" onClick={onExportData} />\n          ) : null}\n          {onDelete ? (\n            <ActionRow\n              icon={Trash2}\n              label=\"Delete permanently\"\n              destructive\n              onClick={onDelete}\n            />\n          ) : null}\n        </ActionSheet>\n      ) : null}\n\n      {/* Address add / edit sheet */}\n      {editingAddress ? (\n        <AddressFormSheet\n          address={editingAddress === 'new' ? null : editingAddress}\n          saving={!!savingAddress}\n          onClose={() => setEditingAddress(null)}\n          onSave={async (data) => {\n            const ok =\n              editingAddress === 'new'\n                ? await onAddAddress?.(data)\n                : await onUpdateAddress?.(editingAddress.id, data);\n            if (ok) setEditingAddress(null);\n          }}\n          onRemove={\n            editingAddress !== 'new' && onRemoveAddress\n              ? () => {\n                  onRemoveAddress(editingAddress.id);\n                  setEditingAddress(null);\n                }\n              : undefined\n          }\n        />\n      ) : null}\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Helpers\n// ─────────────────────────────────────────────────────────────\n\nfunction Caption({ children }: { children: React.ReactNode }) {\n  // Plain sentence-case section label — no uppercase eyebrow.\n  return (\n    <p\n      className=\"text-xs font-semibold\"\n      style={{ color: 'var(--mb-text-secondary)' }}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction Metric({ 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 className=\"mt-1 text-md font-bold\" style={{ color: 'var(--mb-text)' }}>\n        {value}\n      </p>\n    </div>\n  );\n}\n\nfunction Badge({\n  tone,\n  label,\n}: {\n  tone: 'good' | 'warn' | 'info';\n  label: string;\n}) {\n  const color =\n    tone === 'good'\n      ? 'var(--mb-good)'\n      : tone === 'warn'\n        ? 'var(--mb-warn)'\n        : 'var(--mb-accent)';\n  return (\n    <span\n      className=\"rounded-full border px-2 py-0.5 text-3xs font-semibold\"\n      style={{\n        borderColor: `color-mix(in srgb, ${color} 50%, transparent)`,\n        background: `color-mix(in srgb, ${color} 12%, transparent)`,\n        color,\n      }}\n    >\n      {label}\n    </span>\n  );\n}\n\nfunction ContactAction({\n  icon: Icon,\n  label,\n  href,\n  onClick,\n}: {\n  icon: React.ComponentType<{\n    className?: string;\n    style?: React.CSSProperties;\n  }>;\n  label: string;\n  href?: string;\n  onClick?: () => void;\n}) {\n  const inner = (\n    <div\n      className=\"flex h-14 w-full flex-col items-center justify-center gap-1 rounded-2xl border\"\n      style={{\n        borderColor: 'var(--mb-border)',\n        background: 'var(--mb-card)',\n      }}\n    >\n      <Icon className=\"h-4 w-4\" style={{ color: 'var(--mb-text-secondary)' }} />\n      <p\n        className=\"text-3xs font-medium\"\n        style={{ color: 'var(--mb-text-secondary)' }}\n      >\n        {label}\n      </p>\n    </div>\n  );\n  if (href) {\n    return (\n      <a href={href} className=\"block\">\n        {inner}\n      </a>\n    );\n  }\n  return (\n    <button type=\"button\" onClick={onClick} className=\"block w-full\">\n      {inner}\n    </button>\n  );\n}\n\nfunction Toggle({\n  checked,\n  onChange,\n}: {\n  checked: boolean;\n  onChange?: (next: boolean) => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={checked}\n      onClick={() => onChange?.(!checked)}\n      className=\"relative h-6 w-10 shrink-0 rounded-full transition-colors\"\n      style={{\n        background: checked ? 'var(--mb-accent)' : 'var(--mb-elevated)',\n      }}\n    >\n      <span\n        className=\"absolute top-0.5 h-5 w-5 rounded-full bg-white transition\"\n        style={{ left: checked ? 18 : 2 }}\n      />\n    </button>\n  );\n}\n\nconst ActionSheetContext = React.createContext<() => void>(() => {});\n\nfunction ActionSheet({\n  onClose,\n  children,\n}: {\n  onClose: () => void;\n  children: React.ReactNode;\n}) {\n  return (\n    <ActionSheetContext.Provider value={onClose}>\n      <div className=\"fixed inset-0 z-[var(--z-modal)] flex flex-col justify-end\">\n        <button\n          type=\"button\"\n          aria-label=\"Close\"\n          onClick={onClose}\n          className=\"absolute inset-0\"\n          style={{ background: 'var(--mb-media-scrim)' }}\n        />\n        <div\n          className=\"relative rounded-t-[26px] border-t p-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]\"\n          style={{\n            borderColor: 'var(--mb-border)',\n            background: 'var(--mb-card)',\n          }}\n        >\n          <div\n            className=\"mx-auto mb-2 mt-1 h-1 w-9 rounded-full\"\n            style={{ background: 'var(--mb-border)' }}\n          />\n          {children}\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"mt-1 flex h-12 w-full items-center justify-center rounded-2xl text-sm font-semibold\"\n            style={{\n              background: 'var(--mb-elevated)',\n              color: 'var(--mb-text)',\n            }}\n          >\n            Cancel\n          </button>\n        </div>\n      </div>\n    </ActionSheetContext.Provider>\n  );\n}\n\nfunction ActionRow({\n  icon: Icon,\n  label,\n  destructive,\n  onClick,\n}: {\n  /** Optional: import and export rows ship as text. See CLAUDE.md. */\n  icon?: React.ComponentType<{\n    className?: string;\n    style?: React.CSSProperties;\n  }>;\n  label: string;\n  destructive?: boolean;\n  onClick?: () => void;\n}) {\n  const close = React.useContext(ActionSheetContext);\n  const color = destructive ? 'var(--mb-bad)' : 'var(--mb-text)';\n  return (\n    <button\n      type=\"button\"\n      onClick={() => {\n        onClick?.();\n        close();\n      }}\n      className=\"flex h-12 w-full items-center gap-3 rounded-2xl px-4 text-md font-medium\"\n      style={{ color }}\n    >\n      {Icon && <Icon className=\"h-[18px] w-[18px]\" style={{ color }} />}\n      {label}\n    </button>\n  );\n}\n\nfunction AddressFormSheet({\n  address,\n  saving,\n  onClose,\n  onSave,\n  onRemove,\n}: {\n  address: MemberAddress | null;\n  saving: boolean;\n  onClose: () => void;\n  onSave: (data: MemberAddressInput) => void;\n  onRemove?: () => void;\n}) {\n  const [draft, setDraft] = useState<MemberAddressInput>(() => ({\n    label: address?.label ?? '',\n    firstName: address?.firstName ?? '',\n    lastName: address?.lastName ?? '',\n    line1: address?.line1 ?? '',\n    line2: address?.line2 ?? '',\n    city: address?.city ?? '',\n    state: address?.state ?? '',\n    postalCode: address?.postalCode ?? '',\n    country: address?.country ?? '',\n    phone: address?.phone ?? '',\n    isDefault: address?.isDefault ?? false,\n  }));\n  const set = (patch: Partial<MemberAddressInput>) =>\n    setDraft((d) => ({ ...d, ...patch }));\n  const canSave =\n    draft.line1.trim() &&\n    draft.city.trim() &&\n    draft.state.trim() &&\n    draft.country.trim();\n\n  return (\n    <div className=\"fixed inset-0 z-[var(--z-modal)] flex flex-col justify-end\">\n      <button\n        type=\"button\"\n        aria-label=\"Close\"\n        onClick={onClose}\n        className=\"absolute inset-0\"\n        style={{ background: 'var(--mb-media-scrim)' }}\n      />\n      <div\n        className=\"relative max-h-[88dvh] overflow-y-auto rounded-t-[26px] border-t p-4 pb-[max(1rem,env(safe-area-inset-bottom))]\"\n        style={{\n          borderColor: 'var(--mb-border)',\n          background: 'var(--mb-card)',\n        }}\n      >\n        <div\n          className=\"mx-auto mb-3 h-1 w-9 rounded-full\"\n          style={{ background: 'var(--mb-border)' }}\n        />\n        <p\n          className=\"mb-3 text-lg font-semibold\"\n          style={{ color: 'var(--mb-text)' }}\n        >\n          {address ? 'Edit address' : 'Add address'}\n        </p>\n        <div className=\"flex flex-col gap-2.5\">\n          <TextField\n            bare\n            placeholder=\"Label (e.g. Home, Work)\"\n            value={draft.label ?? ''}\n            onChange={(v) => set({ label: v })}\n          />\n          <TextField\n            bare\n            placeholder=\"Street address\"\n            value={draft.line1}\n            onChange={(v) => set({ line1: v })}\n          />\n          <TextField\n            bare\n            placeholder=\"Apartment, suite (optional)\"\n            value={draft.line2 ?? ''}\n            onChange={(v) => set({ line2: v })}\n          />\n          <div className=\"grid grid-cols-2 gap-2.5\">\n            <TextField\n              bare\n              placeholder=\"City\"\n              value={draft.city}\n              onChange={(v) => set({ city: v })}\n            />\n            <TextField\n              bare\n              placeholder=\"State\"\n              value={draft.state}\n              onChange={(v) => set({ state: v })}\n            />\n            <TextField\n              bare\n              placeholder=\"Postal code\"\n              value={draft.postalCode ?? ''}\n              onChange={(v) => set({ postalCode: v })}\n            />\n            <TextField\n              bare\n              placeholder=\"Country\"\n              value={draft.country}\n              onChange={(v) => set({ country: v })}\n            />\n          </div>\n          <TextField\n            bare\n            placeholder=\"Phone (optional)\"\n            value={draft.phone ?? ''}\n            onChange={(v) => set({ phone: v })}\n          />\n          <Button\n            variant=\"secondary\"\n            size=\"icon\"\n            className=\"justify-between\"\n            onClick={() => set({ isDefault: !draft.isDefault })}\n            style={{\n              borderColor: 'var(--mb-border)',\n              background: 'var(--mb-canvas)',\n            }}\n          >\n            <span\n              className=\"text-sm font-medium\"\n              style={{ color: 'var(--mb-text)' }}\n            >\n              Set as default address\n            </span>\n            <Toggle\n              checked={!!draft.isDefault}\n              onChange={(v) => set({ isDefault: v })}\n            />\n          </Button>\n        </div>\n\n        <button\n          type=\"button\"\n          disabled={!canSave || saving}\n          onClick={() => canSave && onSave(draft)}\n          className=\"mt-4 flex h-12 w-full items-center justify-center rounded-2xl text-md font-semibold disabled:opacity-50\"\n          style={{\n            background: 'var(--mb-accent)',\n            color: 'var(--mb-accent-fg)',\n          }}\n        >\n          {saving ? 'Saving…' : address ? 'Save address' : 'Add address'}\n        </button>\n        {onRemove ? (\n          <button\n            type=\"button\"\n            onClick={onRemove}\n            className=\"mt-2 flex h-12 w-full items-center justify-center rounded-2xl text-md font-medium\"\n            style={{ color: 'var(--mb-bad)' }}\n          >\n            Remove address\n          </button>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nfunction prettyType(t: string): string {\n  return t.charAt(0).toUpperCase() + t.slice(1);\n}\n\nfunction relTime(dateStr: string): string {\n  const ms = Date.now() - new Date(dateStr).getTime();\n  const day = Math.floor(ms / (1000 * 60 * 60 * 24));\n  if (day < 1) return 'today';\n  if (day < 7) return `${day}d`;\n  if (day < 30) return `${Math.floor(day / 7)}w`;\n  return new Date(dateStr).toLocaleDateString('en-US', {\n    month: 'short',\n    day: 'numeric',\n  });\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/screens/customers.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Mobile screen — Customers list
+ *
+ * Visual contract: `CustomersList` in mobile-redesign-mockups.tsx
+ * Route: /dashboard/customers (mobile)
+ */
+import React from 'react';
+import type { Member } from '@withpotter/lib/api/types';
+export interface CustomersTypeFilter {
+    key: string;
+    label: string;
+    count?: number;
+}
+export interface MobileCustomersScreenProps {
+    members: Member[];
+    total: number;
+    loading: boolean;
+    searchQuery: string;
+    onSearchChange: (v: string) => void;
+    selectedType: string;
+    onTypeChange: (key: string) => void;
+    typeFilters: CustomersTypeFilter[];
+    formatCurrency: (n: number) => string;
+    onFilterPress?: () => void;
+    manageSegmentsHref?: string;
+    createHref?: string;
+}
+export declare function MobileCustomersScreen({ members, total, loading, searchQuery, onSearchChange, selectedType, onTypeChange, typeFilters, formatCurrency, onFilterPress, manageSegmentsHref, createHref, }: MobileCustomersScreenProps): React.JSX.Element;

package/dist/mobile/screens/customers.js

@@ -0,0 +1,284 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { MobileScreenFrame } from "@withpotter/components/mobile/screen-frame-host";
+import Link from "next/link";
+import { ChevronRight, Filter, Layers, UserPlus } from "lucide-react";
+import { ProgressiveList, SearchField } from "@withpotter/components/mobile/primitives";
+import { Button } from "@withpotter/ui-kit/button";
+const TYPE_TONE = {
+  vip: "var(--mb-warn)",
+  regular: "var(--mb-good)",
+  lead: "var(--mb-accent)",
+  subscriber: "var(--mb-accent)",
+  guest: "var(--mb-text-tertiary)"
+};
+function initials(name, email) {
+  const src = (name || email || "").trim();
+  if (!src) return "?";
+  const parts = src.split(/\s+|@/).filter(Boolean);
+  return (parts[0]?.[0] ?? "") + (parts[1]?.[0] ?? "");
+}
+function metaFor(m, formatCurrency) {
+  if ((m.totalOrders ?? 0) > 0) {
+    return `${m.totalOrders} order${m.totalOrders === 1 ? "" : "s"} \xB7 ${formatCurrency(m.totalSpent ?? 0)}`;
+  }
+  if (m.type === "subscriber") return "Newsletter \xB7 no orders";
+  if (m.type === "lead") return "New \xB7 joined " + relTime(m.createdAt);
+  if (m.type === "guest") return "Guest \xB7 no orders";
+  return "No activity yet";
+}
+function relTime(dateStr) {
+  const ms = Date.now() - new Date(dateStr).getTime();
+  const day = Math.floor(ms / (1e3 * 60 * 60 * 24));
+  if (day < 1) return "today";
+  if (day < 7) return `${day}d ago`;
+  if (day < 30) return `${Math.floor(day / 7)}w ago`;
+  return new Date(dateStr).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric"
+  });
+}
+const TYPE_LABEL = {
+  vip: "VIP",
+  regular: "Reg",
+  lead: "Lead",
+  subscriber: "News",
+  guest: "Guest"
+};
+function MobileCustomersScreen({
+  members,
+  total,
+  loading,
+  searchQuery,
+  onSearchChange,
+  selectedType,
+  onTypeChange,
+  typeFilters,
+  formatCurrency,
+  onFilterPress,
+  manageSegmentsHref = "/dashboard/marketing/audiences",
+  createHref = "/dashboard/customers/new"
+}) {
+  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: "Customers",
+        actions: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "icon", asChild: true, children: /* @__PURE__ */ jsx(Link, { href: createHref, "aria-label": "Add customer", children: /* @__PURE__ */ jsx(UserPlus, { className: "size-4" }) }) }),
+        children: [
+          /* @__PURE__ */ jsx(
+            SearchField,
+            {
+              className: "mt-4",
+              placeholder: "Search by name, email, phone",
+              value: searchQuery,
+              onChange: onSearchChange,
+              trailing: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onFilterPress,
+                  disabled: !onFilterPress,
+                  "aria-label": "Filter",
+                  className: "disabled:opacity-50",
+                  children: /* @__PURE__ */ jsx(
+                    Filter,
+                    {
+                      className: "size-4",
+                      style: { color: "var(--mb-text-tertiary)" }
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "mt-3 flex gap-2 overflow-x-auto pb-1 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", children: typeFilters.map((c) => {
+            const isActive = c.key === selectedType;
+            return /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "secondary",
+                className: "shrink-0 text-2xs",
+                onClick: () => onTypeChange(c.key),
+                style: {
+                  borderColor: isActive ? "var(--mb-accent)" : "var(--mb-border)",
+                  background: isActive ? "color-mix(in srgb, var(--mb-accent) 14%, transparent)" : "var(--mb-card)",
+                  color: isActive ? "var(--mb-accent)" : "var(--mb-text-secondary)"
+                },
+                children: [
+                  c.label,
+                  c.count != null ? /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "rounded-full px-1.5 text-3xs font-semibold tabular-nums",
+                      style: {
+                        background: isActive ? "color-mix(in srgb, var(--mb-accent) 18%, transparent)" : "var(--mb-elevated)"
+                      },
+                      children: c.count
+                    }
+                  ) : null
+                ]
+              },
+              c.key
+            );
+          }) }),
+          /* @__PURE__ */ jsx("div", { className: "mt-4 flex items-center justify-between", children: /* @__PURE__ */ jsxs(
+            "p",
+            {
+              className: "text-3xs font-medium",
+              style: { color: "var(--mb-text-tertiary)" },
+              children: [
+                total,
+                " customer",
+                total === 1 ? "" : "s"
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-2", children: loading && members.length === 0 ? /* @__PURE__ */ jsx(ListSkeleton, {}) : members.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {}) : /* @__PURE__ */ jsx(ProgressiveList, { initial: 5, step: 10, className: "space-y-2", children: members.map((m) => {
+            const tone = TYPE_TONE[m.type] ?? "var(--mb-text-tertiary)";
+            const label = TYPE_LABEL[m.type] ?? m.type;
+            return /* @__PURE__ */ jsxs(
+              Link,
+              {
+                href: `/dashboard/customers/${m.id}`,
+                className: "flex w-full items-center gap-3 rounded-2xl border p-4",
+                style: {
+                  borderColor: "var(--mb-border)",
+                  background: "var(--mb-card)",
+                  minHeight: 72
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-sm font-semibold uppercase",
+                      style: {
+                        background: "color-mix(in srgb, var(--mb-accent) 16%, transparent)",
+                        color: "var(--mb-accent)"
+                      },
+                      children: initials(m.name, m.email)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: "truncate text-md font-medium",
+                        style: { color: "var(--mb-text)" },
+                        children: m.name || m.email
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: "mt-0.5 truncate text-2xs",
+                        style: { color: "var(--mb-text-tertiary)" },
+                        children: metaFor(m, formatCurrency)
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "rounded-full border px-2 py-0.5 text-3xs font-semibold",
+                      style: {
+                        borderColor: `color-mix(in srgb, ${tone} 50%, transparent)`,
+                        background: `color-mix(in srgb, ${tone} 12%, transparent)`,
+                        color: tone
+                      },
+                      children: label
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    ChevronRight,
+                    {
+                      className: "size-4",
+                      style: { color: "var(--mb-text-muted)" }
+                    }
+                  )
+                ]
+              },
+              m.id
+            );
+          }) }) }),
+          /* @__PURE__ */ jsxs(
+            Link,
+            {
+              href: manageSegmentsHref,
+              className: "mt-4 flex h-11 w-full items-center justify-center gap-2 rounded-2xl border text-sm font-medium",
+              style: {
+                borderColor: "var(--mb-border)",
+                background: "var(--mb-elevated)",
+                color: "var(--mb-text)"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Layers, { className: "size-4" }),
+                "Manage segments"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  );
+}
+function ListSkeleton() {
+  return /* @__PURE__ */ jsx(Fragment, { children: [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "rounded-2xl border p-4",
+      style: {
+        borderColor: "var(--mb-border)",
+        background: "var(--mb-card)",
+        minHeight: 72
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-11 w-11 rounded-full",
+            style: { background: "var(--mb-elevated)" }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-3 w-1/2 rounded-full",
+              style: { background: "var(--mb-elevated)" }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-2 w-2/3 rounded-full",
+              style: { background: "var(--mb-elevated)" }
+            }
+          )
+        ] })
+      ] })
+    },
+    i
+  )) });
+}
+function EmptyState() {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex flex-col items-center gap-2 rounded-2xl border px-4 py-12 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 customers yet" }),
+        /* @__PURE__ */ jsx("p", { className: "text-2xs", style: { color: "var(--mb-text-tertiary)" }, children: "New customers will appear here as they sign up." })
+      ]
+    }
+  );
+}
+export {
+  MobileCustomersScreen
+};
+//# sourceMappingURL=customers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/screens/customers.tsx"],"sourcesContent":["'use client';\n\n/**\n * Mobile screen — Customers list\n *\n * Visual contract: `CustomersList` in mobile-redesign-mockups.tsx\n * Route: /dashboard/customers (mobile)\n */\n\nimport React from 'react';\nimport { MobileScreenFrame } from '@withpotter/components/mobile/screen-frame-host';\nimport Link from 'next/link';\nimport { ChevronRight, Filter, Layers, UserPlus } from 'lucide-react';\nimport { ProgressiveList, SearchField } from '@withpotter/components/mobile/primitives';\nimport type { Member } from '@withpotter/lib/api/types';\nimport { Button } from '@withpotter/ui-kit/button';\n\nexport interface CustomersTypeFilter {\n  key: string;\n  label: string;\n  count?: number;\n}\n\nexport interface MobileCustomersScreenProps {\n  members: Member[];\n  total: number;\n  loading: boolean;\n  searchQuery: string;\n  onSearchChange: (v: string) => void;\n  selectedType: string;\n  onTypeChange: (key: string) => void;\n  typeFilters: CustomersTypeFilter[];\n  formatCurrency: (n: number) => string;\n  onFilterPress?: () => void;\n  manageSegmentsHref?: string;\n  createHref?: string;\n}\n\nconst TYPE_TONE: Record<string, string> = {\n  vip: 'var(--mb-warn)',\n  regular: 'var(--mb-good)',\n  lead: 'var(--mb-accent)',\n  subscriber: 'var(--mb-accent)',\n  guest: 'var(--mb-text-tertiary)',\n};\n\nfunction initials(name?: string | null, email?: string): string {\n  const src = (name || email || '').trim();\n  if (!src) return '?';\n  const parts = src.split(/\\s+|@/).filter(Boolean);\n  return (parts[0]?.[0] ?? '') + (parts[1]?.[0] ?? '');\n}\n\nfunction metaFor(m: Member, formatCurrency: (n: number) => string): string {\n  if ((m.totalOrders ?? 0) > 0) {\n    return `${m.totalOrders} order${m.totalOrders === 1 ? '' : 's'} · ${formatCurrency(m.totalSpent ?? 0)}`;\n  }\n  if (m.type === 'subscriber') return 'Newsletter · no orders';\n  if (m.type === 'lead') return 'New · joined ' + relTime(m.createdAt);\n  if (m.type === 'guest') return 'Guest · no orders';\n  return 'No activity yet';\n}\n\nfunction relTime(dateStr: string): string {\n  const ms = Date.now() - new Date(dateStr).getTime();\n  const day = Math.floor(ms / (1000 * 60 * 60 * 24));\n  if (day < 1) return 'today';\n  if (day < 7) return `${day}d ago`;\n  if (day < 30) return `${Math.floor(day / 7)}w ago`;\n  return new Date(dateStr).toLocaleDateString('en-US', {\n    month: 'short',\n    day: 'numeric',\n  });\n}\n\nconst TYPE_LABEL: Record<string, string> = {\n  vip: 'VIP',\n  regular: 'Reg',\n  lead: 'Lead',\n  subscriber: 'News',\n  guest: 'Guest',\n};\n\nexport function MobileCustomersScreen({\n  members,\n  total,\n  loading,\n  searchQuery,\n  onSearchChange,\n  selectedType,\n  onTypeChange,\n  typeFilters,\n  formatCurrency,\n  onFilterPress,\n  manageSegmentsHref = '/dashboard/marketing/audiences',\n  createHref = '/dashboard/customers/new',\n}: MobileCustomersScreenProps) {\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=\"Customers\"\n      actions={\n        <Button variant=\"secondary\" size=\"icon\" asChild>\n          <Link href={createHref} aria-label=\"Add customer\">\n            <UserPlus className=\"size-4\" />\n          </Link>\n        </Button>\n      }\n    >\n      {/* Search */}\n      <SearchField\n        className=\"mt-4\"\n        placeholder=\"Search by name, email, phone\"\n        value={searchQuery}\n        onChange={onSearchChange}\n        trailing={\n          <button\n            type=\"button\"\n            onClick={onFilterPress}\n            disabled={!onFilterPress}\n            aria-label=\"Filter\"\n            className=\"disabled:opacity-50\"\n          >\n            <Filter\n              className=\"size-4\"\n              style={{ color: 'var(--mb-text-tertiary)' }}\n            />\n          </button>\n        }\n      />\n\n      {/* Type chips */}\n      <div className=\"mt-3 flex gap-2 overflow-x-auto pb-1 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden\">\n        {typeFilters.map((c) => {\n          const isActive = c.key === selectedType;\n          return (\n            <Button\n              variant=\"secondary\"\n              className=\"shrink-0 text-2xs\"\n              key={c.key}\n              onClick={() => onTypeChange(c.key)}\n              style={{\n                borderColor: isActive ? 'var(--mb-accent)' : 'var(--mb-border)',\n                background: isActive\n                  ? 'color-mix(in srgb, var(--mb-accent) 14%, transparent)'\n                  : 'var(--mb-card)',\n                color: isActive\n                  ? 'var(--mb-accent)'\n                  : 'var(--mb-text-secondary)',\n              }}\n            >\n              {c.label}\n              {c.count != null ? (\n                <span\n                  className=\"rounded-full px-1.5 text-3xs font-semibold tabular-nums\"\n                  style={{\n                    background: isActive\n                      ? 'color-mix(in srgb, var(--mb-accent) 18%, transparent)'\n                      : 'var(--mb-elevated)',\n                  }}\n                >\n                  {c.count}\n                </span>\n              ) : null}\n            </Button>\n          );\n        })}\n      </div>\n\n      {/* Count + select toggle */}\n      <div className=\"mt-4 flex items-center justify-between\">\n        <p\n          className=\"text-3xs font-medium\"\n          style={{ color: 'var(--mb-text-tertiary)' }}\n        >\n          {total} customer{total === 1 ? '' : 's'}\n        </p>\n      </div>\n\n      {/* List */}\n      <div className=\"mt-2 space-y-2\">\n        {loading && members.length === 0 ? (\n          <ListSkeleton />\n        ) : members.length === 0 ? (\n          <EmptyState />\n        ) : (\n          <ProgressiveList initial={5} step={10} className=\"space-y-2\">\n            {members.map((m) => {\n              const tone = TYPE_TONE[m.type] ?? 'var(--mb-text-tertiary)';\n              const label = TYPE_LABEL[m.type] ?? m.type;\n              return (\n                <Link\n                  key={m.id}\n                  href={`/dashboard/customers/${m.id}`}\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: 72,\n                  }}\n                >\n                  <div\n                    className=\"flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-sm font-semibold uppercase\"\n                    style={{\n                      background:\n                        'color-mix(in srgb, var(--mb-accent) 16%, transparent)',\n                      color: 'var(--mb-accent)',\n                    }}\n                  >\n                    {initials(m.name, m.email)}\n                  </div>\n                  <div className=\"min-w-0 flex-1\">\n                    <p\n                      className=\"truncate text-md font-medium\"\n                      style={{ color: 'var(--mb-text)' }}\n                    >\n                      {m.name || m.email}\n                    </p>\n                    <p\n                      className=\"mt-0.5 truncate text-2xs\"\n                      style={{ color: 'var(--mb-text-tertiary)' }}\n                    >\n                      {metaFor(m, formatCurrency)}\n                    </p>\n                  </div>\n                  <span\n                    className=\"rounded-full border px-2 py-0.5 text-3xs font-semibold\"\n                    style={{\n                      borderColor: `color-mix(in srgb, ${tone} 50%, transparent)`,\n                      background: `color-mix(in srgb, ${tone} 12%, transparent)`,\n                      color: tone,\n                    }}\n                  >\n                    {label}\n                  </span>\n                  <ChevronRight\n                    className=\"size-4\"\n                    style={{ color: 'var(--mb-text-muted)' }}\n                  />\n                </Link>\n              );\n            })}\n          </ProgressiveList>\n        )}\n      </div>\n\n      {/* Manage segments */}\n      <Link\n        href={manageSegmentsHref}\n        className=\"mt-4 flex h-11 w-full items-center justify-center gap-2 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        <Layers className=\"size-4\" />\n        Manage segments\n      </Link>\n    </MobileScreenFrame>\n  );\n}\n\nfunction ListSkeleton() {\n  return (\n    <>\n      {[0, 1, 2, 3, 4].map((i) => (\n        <div\n          key={i}\n          className=\"rounded-2xl border p-4\"\n          style={{\n            borderColor: 'var(--mb-border)',\n            background: 'var(--mb-card)',\n            minHeight: 72,\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div\n              className=\"h-11 w-11 rounded-full\"\n              style={{ background: 'var(--mb-elevated)' }}\n            />\n            <div className=\"min-w-0 flex-1 space-y-2\">\n              <div\n                className=\"h-3 w-1/2 rounded-full\"\n                style={{ background: 'var(--mb-elevated)' }}\n              />\n              <div\n                className=\"h-2 w-2/3 rounded-full\"\n                style={{ background: 'var(--mb-elevated)' }}\n              />\n            </div>\n          </div>\n        </div>\n      ))}\n    </>\n  );\n}\n\nfunction EmptyState() {\n  return (\n    <div\n      className=\"flex flex-col items-center gap-2 rounded-2xl border px-4 py-12 text-center\"\n      style={{ borderColor: 'var(--mb-border)', background: 'var(--mb-card)' }}\n    >\n      <p className=\"text-sm font-medium\" style={{ color: 'var(--mb-text)' }}>\n        No customers yet\n      </p>\n      <p className=\"text-2xs\" style={{ color: 'var(--mb-text-tertiary)' }}>\n        New customers will appear here as they sign up.\n      </p>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/screens/domains.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { TenantDomain } from '@withpotter/pages-core/dashboard/settings/domains/_components/helpers';
+/**
+ * Mobile screen — Domains
+ *
+ * Domains had no mobile screen at all, which is why the route rendered the
+ * desktop body with no shell around it: `PageHeader` and `DetailHeader` are
+ * both `lg`-only, so a phone got a bare card floating at the top of the page
+ * with no title, no action and no tab bar. Every other route in the dashboard
+ * branches to a screen like this one.
+ *
+ * The row is the same idea as the desktop one, cut to a phone: a tone-coloured
+ * hint carrying the condition, and the renewal only when it is worth a glance.
+ */
+export interface MobileDomainsScreenProps {
+    domains: TenantDomain[];
+    loading: boolean;
+    /** The free Box address, always reachable. */
+    defaultHost: string;
+    onOpen: (domainId: string) => void;
+    onAdd: () => void;
+}
+export declare function MobileDomainsScreen({ domains, loading, defaultHost, onOpen, onAdd, }: MobileDomainsScreenProps): React.JSX.Element;

package/dist/mobile/screens/domains.js

@@ -0,0 +1,146 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MobileScreenFrame } from "@withpotter/components/mobile/screen-frame-host";
+import { Globe, Plus } from "lucide-react";
+import {
+  ListRow,
+  Section,
+  SectionHeader,
+  StickyCtaBar,
+  stickyCtaScrollPadding
+} from "@withpotter/components/mobile/primitives";
+import { DOMAIN_STATUS_LABELS } from "@withpotter/pages-core/dashboard/settings/domains/_components/helpers";
+import {
+  daysUntil,
+  expiryStageFor,
+  formatDate
+} from "@withpotter/pages-core/dashboard/settings/domains/_components/lifecycle";
+function condition(domain) {
+  if (domain.isTransferring) return { tone: "warn", hint: "Moving here" };
+  if (domain.pendingOrderId) return { tone: "warn", hint: "Renewing" };
+  if (domain.status === "expired") return { tone: "bad", hint: "Run out" };
+  if (domain.status === "failed") {
+    return { tone: "bad", hint: "Records not found" };
+  }
+  if (domain.status !== "active") {
+    return {
+      tone: "warn",
+      hint: DOMAIN_STATUS_LABELS[domain.status] ?? "Setting up"
+    };
+  }
+  if (domain.health === "no_certificate") {
+    return { tone: "warn", hint: "Visitors are being warned" };
+  }
+  if (domain.health === "dns_broken") {
+    return { tone: "bad", hint: "Not reaching your store" };
+  }
+  if (domain.health === "not_responding") {
+    return { tone: "bad", hint: "Store not answering" };
+  }
+  if (domain.health === "serving_errors") {
+    return { tone: "bad", hint: "Showing an error page" };
+  }
+  if (domain.expiresAt && !domain.isExternal) {
+    const stage = expiryStageFor(domain.expiresAt);
+    if (stage === "expiring") {
+      const left = daysUntil(domain.expiresAt);
+      return {
+        tone: "bad",
+        hint: left <= 0 ? "Runs out today" : `Runs out in ${left} days`
+      };
+    }
+    if (stage !== "healthy") return { tone: "bad", hint: "Past its date" };
+    return { tone: "good", hint: `Renews ${formatDate(domain.expiresAt)}` };
+  }
+  return { tone: "good", hint: "Working" };
+}
+function MobileDomainsScreen({
+  domains,
+  loading,
+  defaultHost,
+  onOpen,
+  onAdd
+}) {
+  const hasPrimary = domains.some((domain) => domain.isPrimary);
+  return (
+    // The screen owns its own frame, title and tab bar. MobileShell is only a
+    // theme provider ("Each screen handles its own layout"), so a route that
+    // does not draw these gets none of them, which is exactly what Domains had:
+    // a bare card at the top of a phone with no title and no way anywhere.
+    /* 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: "Domains", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex-1 px-4",
+          style: { paddingBottom: stickyCtaScrollPadding(true) },
+          children: [
+            loading ? /* @__PURE__ */ jsx(Section, { children: /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "py-8 text-center text-sm",
+                style: { color: "var(--mb-text-tertiary)" },
+                children: "Loading your addresses"
+              }
+            ) }) : domains.length === 0 ? null : /* @__PURE__ */ jsxs(Section, { children: [
+              /* @__PURE__ */ jsx(SectionHeader, { title: "Your addresses" }),
+              domains.map((domain, index) => {
+                const { tone, hint } = condition(domain);
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "motion-safe:animate-[slide-up_var(--motion-normal)_var(--motion-ease-out)_both]",
+                    style: { animationDelay: `${Math.min(index, 6) * 40}ms` },
+                    children: /* @__PURE__ */ jsx(
+                      ListRow,
+                      {
+                        icon: Globe,
+                        label: domain.domain,
+                        hint: domain.isPrimary ? `Primary \xB7 ${hint}` : hint,
+                        tone,
+                        onClick: () => onOpen(domain.id)
+                      }
+                    )
+                  },
+                  domain.id
+                );
+              })
+            ] }),
+            /* @__PURE__ */ jsxs(Section, { children: [
+              /* @__PURE__ */ jsx(SectionHeader, { title: "Always works" }),
+              /* @__PURE__ */ jsx(
+                ListRow,
+                {
+                  icon: Globe,
+                  label: defaultHost,
+                  hint: hasPrimary ? "Free backup address" : "Primary \xB7 Free",
+                  tone: "good"
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(StickyCtaBar, { respectTabBar: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onAdd,
+          className: "flex w-full items-center justify-center gap-2 rounded-xl py-3 text-sm font-semibold",
+          style: { background: "var(--mb-accent)", color: "#fff" },
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+            "Add domain"
+          ]
+        }
+      ) })
+    ] })
+  );
+}
+export {
+  MobileDomainsScreen
+};
+//# sourceMappingURL=domains.js.map