@godxjp/ui 31.31.7 → 32.0.0

package/docs/showcase/case6-agency-handy.tsx

@@ -1,1120 +0,0 @@
-/**
- * Showcase · case6 — 代理店ハンディ (Agency Handy, mobile)
- *
- * The Acme consolidation-warehouse handheld app (390×844, gloves-on, scan-heavy),
- * rebuilt ENTIRELY from real @godxjp/ui primitives — the reference-design "Handy Agency"
- * design recreated as a skeleton (intent + look), not a transcription of its prototype DOM.
- *
- * Composition map (Handy prototype block → @godxjp/ui primitive):
- *   phone shell ................. composed frame (status bar / header / scroll / sticky bar / tabbar)
- *   header text-action .......... Button(ghost, size=sm) — iOS "Chọn" select-mode entry
- *   filter chips ................ ToggleGroup(type=single) — 32px count pills
- *   outbound segmented .......... ToggleGroup(type=single) — Chờ niêm phong / Chờ bàn giao / Đã bàn giao
- *   list-card recipe ............ Card + composed 3-line row + Badge(tone) + select-mode Checkbox
- *   status badge (1:1) .......... Badge tone — attention/info/muted/success/warning, color-locked
- *   select-mode bar ............. primary-soft toolbar strip (count + actions) above tabbar
- *   big scan Button ............. sticky-actions primary "Quét / Tìm mã" (flex-2, dominant)
- *   ItemLookupSheet ............. Sheet(side=bottom) — viewfinder placeholder + manual mono input
- *   package-picker Sheet ........ Sheet(side=bottom) — list of PKG rows + create-new row
- *   ItemFormModal Sheet ......... Sheet(side=bottom) — barcode + qty + radio-row "Đích đến"
- *   detail rows ................. Descriptions + Descriptions.Item(mono) — item detail
- *   confirm Dialog .............. AlertDialog — Seal / Handoff (verb confirm, not "OK")
- *   toast ....................... Toaster + toast.success — "Đã bàn giao … · 16:24"
- *   four list states ............ Loading(Skeleton) · Empty(EmptyState) · Error(Alert) · populated
- *
- * DNA applied: comfortable 44px touch density, mono codes (RC-/JAN/PKG-/A-03-02),
- * fixed color signaling (attention 朱 = Chưa phân loại + fixable errors, info 群青 = open,
- * muted = in-package/draft, success 若竹 = sealed, warning 山吹 = delivered), tabular-nums,
- * scan-first (primary action widest), bottom-sheet-driven, vi-first quiet copy, no emoji.
- */
-import * as React from "react";
-import {
-  Boxes,
-  Check,
-  Inbox,
-  Package,
-  PackagePlus,
-  Plus,
-  RefreshCw,
-  ScanLine,
-  Search,
-  Truck,
-  X,
-} from "lucide-react";
-
-import { Button, Heading, Text } from "@godxjp/ui/general";
-import { Flex, MobileShell, ResponsiveGrid } from "@godxjp/ui/layout";
-import {
-  Badge,
-  type BadgeProps,
-  Card,
-  CardContent,
-  Descriptions,
-  EmptyState,
-} from "@godxjp/ui/data-display";
-import { Checkbox, Input, RadioGroup, ToggleGroup, ToggleGroupItem } from "@godxjp/ui/data-entry";
-import {
-  AlertDialog,
-  Alert,
-  AlertTitle,
-  AlertDescription,
-  Sheet,
-  SheetBody,
-  SheetContent,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  Skeleton,
-  Toaster,
-  toast,
-} from "@godxjp/ui/feedback";
-
-type BadgeTone = NonNullable<BadgeProps["tone"]>;
-
-// ── Status vocabulary — 1:1 color-locked (Handy §6b: "same word in different colors is a bug") ──
-type ItemStatus = "unsorted" | "shelf" | "packed";
-const ITEM_STATUS: Record<ItemStatus, { label: string; tone: BadgeTone }> = {
-  unsorted: { label: "Chưa phân loại", tone: "destructive" }, // 朱 attention via destructive-adjacent? -> use warning? see note
-  shelf: { label: "Trên giá hàng", tone: "info" }, //  群青 open
-  packed: { label: "Trong kiện", tone: "muted" }, // draft / in-package
-};
-
-// Attention (朱) is the fixable-but-needs-action signal. Badge tones expose
-// success/warning/destructive/info/muted/neutral — there is no dedicated "attention"
-// tone, so non-destructive "Chưa phân loại" maps to warning (山吹), reserving
-// destructive (茜) for the irreversible logout confirm only. (see gapNotes)
-ITEM_STATUS.unsorted.tone = "warning";
-
-type PackingStatus = "active" | "open" | "draft" | "sealed" | "delivered";
-const PACKING_STATUS: Record<PackingStatus, { label: string; tone: BadgeTone }> = {
-  active: { label: "Đang làm", tone: "info" },
-  open: { label: "Đang mở", tone: "info" },
-  draft: { label: "Nháp", tone: "muted" },
-  sealed: { label: "Đã niêm phong", tone: "success" },
-  delivered: { label: "Đã bàn giao", tone: "muted" },
-};
-
-// ── Mock data ───────────────────────────────────────────────────────────────
-
-interface HandyItem {
-  id: string;
-  name: string;
-  rc: string;
-  jan: string;
-  status: ItemStatus;
-  qty: number;
-  receivedAt: string;
-}
-
-const ITEMS: HandyItem[] = [
-  {
-    id: "1",
-    name: "Sữa rửa mặt Hada Labo",
-    rc: "RC-204881",
-    jan: "4987241135219",
-    status: "unsorted",
-    qty: 3,
-    receivedAt: "14:02",
-  },
-  {
-    id: "2",
-    name: "Kem chống nắng Anessa",
-    rc: "RC-204882",
-    jan: "4909978141004",
-    status: "shelf",
-    qty: 1,
-    receivedAt: "13:48",
-  },
-  {
-    id: "3",
-    name: "Vitamin DHC B-Complex",
-    rc: "RC-204879",
-    jan: "4511413404164",
-    status: "shelf",
-    qty: 2,
-    receivedAt: "13:31",
-  },
-  {
-    id: "4",
-    name: "Bàn chải Ora2 Me",
-    rc: "RC-204875",
-    jan: "4903301242697",
-    status: "packed",
-    qty: 4,
-    receivedAt: "11:20",
-  },
-];
-
-interface Packing {
-  id: string;
-  code: string;
-  customer: string;
-  city: string;
-  items: number;
-  status: PackingStatus;
-  slot?: string;
-}
-
-const PACKINGS: Packing[] = [
-  {
-    id: "p1",
-    code: "PKG-000041",
-    customer: "Bùi Hà",
-    city: "Hà Nội",
-    items: 8,
-    status: "active",
-    slot: "A-03-02",
-  },
-  { id: "p2", code: "PKG-000040", customer: "Lê Minh", city: "TP.HCM", items: 5, status: "open" },
-  {
-    id: "p3",
-    code: "PKG-000038",
-    customer: "Trần Linh",
-    city: "Đà Nẵng",
-    items: 12,
-    status: "draft",
-  },
-];
-
-const OUTBOUND: Packing[] = [
-  {
-    id: "o1",
-    code: "PKG-000037",
-    customer: "Phạm An",
-    city: "Hà Nội",
-    items: 9,
-    status: "sealed",
-    slot: "B-01-04",
-  },
-  {
-    id: "o2",
-    code: "PKG-000036",
-    customer: "Vũ Nga",
-    city: "TP.HCM",
-    items: 6,
-    status: "sealed",
-    slot: "B-02-01",
-  },
-];
-
-const TABS = [
-  { id: "inbound", label: "Nhập kho", icon: Inbox },
-  { id: "packing", label: "Đóng gói", icon: Package },
-  { id: "outbound", label: "Xuất kho", icon: Truck },
-] as const;
-
-const FILTERS = [
-  { id: "all", label: "Tất cả", count: 42 },
-  { id: "unsorted", label: "Chưa phân loại", count: 9 },
-  { id: "shelf", label: "Trên giá hàng", count: 33 },
-] as const;
-
-// ── Small composed parts ─────────────────────────────────────────────────────
-
-function MonoCode({ children }: { children: React.ReactNode }) {
-  return (
-    <Text size="xs" mono tone="muted" tabular>
-      {children}
-    </Text>
-  );
-}
-
-/** The Handy list-card recipe: full-tap row, name + mono codes + badge/meta. */
-function ItemListCard({
-  item,
-  selectMode,
-  selected,
-  onToggle,
-}: {
-  item: HandyItem;
-  selectMode: boolean;
-  selected: boolean;
-  onToggle: () => void;
-}) {
-  const st = ITEM_STATUS[item.status];
-  return (
-    <Card
-      density="tight"
-      className={
-        "rounded-xl transition-colors " +
-        (selected
-          ? "border-primary bg-[color-mix(in_oklch,var(--primary)_8%,transparent)]"
-          : "hover:border-primary")
-      }
-    >
-      <CardContent solo>
-        <Flex align="start" gap="md">
-          <Flex direction="col" gap="xs">
-            {selectMode ? (
-              <Checkbox
-                checked={selected}
-                onCheckedChange={onToggle}
-                aria-label={`選択 ${item.name}`}
-                className="size-5"
-              />
-            ) : null}
-            <Flex direction="col" gap="sm" className="min-w-0 flex-1">
-              <Text as="div" size="sm" weight="bold" truncate>
-                {item.name}
-              </Text>
-              <Flex wrap align="center" gap="sm">
-                <MonoCode>{item.rc}</MonoCode>
-                <MonoCode>JAN {item.jan}</MonoCode>
-              </Flex>
-              <Flex align="center" justify="between" gap="sm">
-                <Badge tone={st.tone} variant="outline" className="rounded-full">
-                  {st.label}
-                </Badge>
-                <Text size="xs" tone="muted" tabular className="shrink-0">
-                  ×{item.qty} · {item.receivedAt}
-                </Text>
-              </Flex>
-            </Flex>
-          </Flex>
-        </Flex>
-      </CardContent>
-    </Card>
-  );
-}
-
-function PackingListCard({ packing, onTap }: { packing: Packing; onTap?: () => void }) {
-  const st = PACKING_STATUS[packing.status];
-  return (
-    <Card
-      density="tight"
-      role={onTap ? "button" : undefined}
-      tabIndex={onTap ? 0 : undefined}
-      onClick={onTap}
-      className={
-        "rounded-xl transition-colors " + (onTap ? "hover:border-primary cursor-pointer" : "")
-      }
-    >
-      <CardContent solo>
-        <Flex direction="col" gap="xs">
-          <Flex align="center" justify="between" gap="sm">
-            <Text as="code" size="sm" weight="bold" tabular>
-              {packing.code}
-            </Text>
-            <Badge tone={st.tone} variant="outline" className="rounded-full">
-              {st.label}
-            </Badge>
-          </Flex>
-          <Flex align="center" justify="between" gap="sm">
-            <Text size="xs" tone="muted" truncate>
-              {packing.customer} · {packing.city}
-            </Text>
-            <Text size="xs" tone="muted" tabular className="shrink-0">
-              ×{packing.items}
-              {packing.slot ? ` · ${packing.slot}` : ""}
-            </Text>
-          </Flex>
-        </Flex>
-      </CardContent>
-    </Card>
-  );
-}
-
-/** Three uppercase muted section header + right-aligned mono count. */
-function SectionHeader({ children, count }: { children: React.ReactNode; count?: number }) {
-  return (
-    <Flex align="center" justify="between">
-      <Text size="2xs" weight="medium" tone="muted" className="tracking-wider uppercase">
-        {children}
-      </Text>
-      {count != null ? (
-        <Text size="2xs" mono tone="muted" tabular>
-          {count}
-        </Text>
-      ) : null}
-    </Flex>
-  );
-}
-
-// ── Phone shell ──────────────────────────────────────────────────────────────
-
-/**
- * This file used to BUILD the shell: a `Card` + `CardContent flush` phone frame, a
- * `ui-card-inset-x h-9` status row, an `h-14 border-b` header, a `flex-1 overflow-y-auto` body, a
- * `shrink-0 border-t` action strip and a `ResponsiveGrid` tab bar. It reproduced the look and
- * neither behaviour that matters on a device — the document still scrolled, and nothing padded out
- * of `env(safe-area-inset-*)`. All five bands are now `MobileShell` slots.
- */
-
-function StatusBar() {
-  return (
-    <>
-      <Text size="sm" weight="medium" tabular>
-        9:41
-      </Text>
-      <Text size="sm" weight="medium" tabular tone="muted">
-        Acme Handy
-      </Text>
-    </>
-  );
-}
-
-function TabBar({ active, onChange }: { active: string; onChange: (id: string) => void }) {
-  // The tab bar's own tiling — equal width, no seam, no gutter — is the `tabBar` slot's contract,
-  // so there is no grid and no column count here any more.
-  return (
-    <>
-      {TABS.map((t) => {
-        const isActive = t.id === active;
-        const Icon = t.icon;
-        return (
-          <Button
-            key={t.id}
-            variant="ghost"
-            onClick={() => onChange(t.id)}
-            aria-current={isActive ? "page" : undefined}
-            className={
-              "text-[length:var(--font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)))] h-full flex-col rounded-none font-medium " +
-              (isActive ? "text-primary" : "text-muted-foreground")
-            }
-          >
-            <Icon className="size-5" aria-hidden="true" strokeWidth={1.5} />
-            <span className="whitespace-nowrap">{t.label}</span>
-          </Button>
-        );
-      })}
-    </>
-  );
-}
-
-// ── Sheets ───────────────────────────────────────────────────────────────────
-
-function ItemLookupSheet({
-  open,
-  onOpenChange,
-}: {
-  open: boolean;
-  onOpenChange: (v: boolean) => void;
-}) {
-  const [code, setCode] = React.useState("");
-  return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent side="bottom" className="rounded-t-2xl">
-        <SheetHeader>
-          <SheetTitle>Quét hoặc nhập mã</SheetTitle>
-        </SheetHeader>
-        <SheetBody>
-          <Flex direction="col" gap="md">
-            {/* Viewfinder placeholder — a Card surface, not a hand-rolled illustration */}
-            <Card variant="muted" className="border-2 border-dashed">
-              <CardContent solo>
-                <Flex direction="col" align="center" gap="sm" className="h-40 justify-center">
-                  <ScanLine
-                    className="size-7 text-[color:var(--attention,var(--warning))]"
-                    aria-hidden="true"
-                    strokeWidth={1.5}
-                  />
-                  <Text size="sm" tone="muted">
-                    Đưa mã vạch vào khung
-                  </Text>
-                </Flex>
-              </CardContent>
-            </Card>
-            <Flex direction="col" gap="sm">
-              <Text size="sm" weight="medium">
-                Hoặc nhập mã thủ công
-              </Text>
-              <Flex gap="sm">
-                <Input
-                  value={code}
-                  onChange={(e) => setCode(e.target.value)}
-                  placeholder="RC- / PKG- / JAN"
-                  className="font-mono"
-                  inputMode="text"
-                  autoComplete="off"
-                />
-                <Button
-                  onClick={() => {
-                    onOpenChange(false);
-                    setCode("");
-                    toast.success("Đã tìm thấy RC-204881 · Sữa rửa mặt Hada Labo");
-                  }}
-                  disabled={code.trim() === ""}
-                >
-                  <Search aria-hidden="true" />
-                  Tìm
-                </Button>
-              </Flex>
-            </Flex>
-          </Flex>
-        </SheetBody>
-        <SheetFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Đóng
-          </Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  );
-}
-
-function PackagePickerSheet({
-  open,
-  onOpenChange,
-  count,
-}: {
-  open: boolean;
-  onOpenChange: (v: boolean) => void;
-  count: number;
-}) {
-  return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent side="bottom" className="rounded-t-2xl">
-        <SheetHeader>
-          <SheetTitle>Gán vào kiện</SheetTitle>
-        </SheetHeader>
-        <SheetBody>
-          <Flex direction="col" gap="sm">
-            <SectionHeader count={PACKINGS.length}>Kiện đang mở</SectionHeader>
-            {PACKINGS.map((p) => (
-              <PackingListCard
-                key={p.id}
-                packing={p}
-                onTap={() => {
-                  onOpenChange(false);
-                  toast.success(`Đã gán ${count} item vào ${p.code}`);
-                }}
-              />
-            ))}
-            <Button
-              variant="outline"
-              onClick={() => {
-                onOpenChange(false);
-                toast.success(`Đã tạo kiện mới với ${count} item`);
-              }}
-              className="text-primary hover:border-primary h-11 w-full border-2 border-dashed"
-            >
-              <PackagePlus aria-hidden="true" strokeWidth={1.5} />
-              Tạo kiện mới với {count} item này
-            </Button>
-          </Flex>
-        </SheetBody>
-        <SheetFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Huỷ
-          </Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  );
-}
-
-const DESTINATIONS = [
-  { id: "unsorted", label: "Chưa phân loại", hint: "Để xử lý sau" },
-  { id: "shelf", label: "Giá hàng", hint: "Lên kệ lưu trữ" },
-  { id: "open", label: "Kiện đang mở", hint: "Gói cùng đơn hiện tại" },
-  { id: "new", label: "Tạo kiện mới", hint: "Mở kiện mới cho item" },
-] as const;
-
-function ItemFormSheet({
-  open,
-  onOpenChange,
-}: {
-  open: boolean;
-  onOpenChange: (v: boolean) => void;
-}) {
-  const [dest, setDest] = React.useState<string>("unsorted");
-  const [qty, setQty] = React.useState("1");
-  return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent side="bottom" className="max-h-[calc(80vh)] rounded-t-2xl">
-        <SheetHeader>
-          <SheetTitle>Thêm hàng mới</SheetTitle>
-        </SheetHeader>
-        <SheetBody>
-          <Flex direction="col" gap="md">
-            <Flex direction="col" gap="xs">
-              <Text size="sm" weight="medium">
-                Mã vạch
-              </Text>
-              <Input defaultValue="JAN 4987241135219" readOnly className="font-mono" />
-            </Flex>
-            <Flex direction="col" gap="xs">
-              <Text size="sm" weight="medium">
-                Tên hàng (tùy chọn)
-              </Text>
-              <Input placeholder="Nhập tên hàng" autoComplete="off" />
-            </Flex>
-            <Flex direction="col" gap="xs">
-              <Text size="sm" weight="medium">
-                Số lượng
-              </Text>
-              <Input
-                type="number"
-                value={qty}
-                min={1}
-                onChange={(e) => setQty(e.target.value)}
-                className="w-24 tabular-nums"
-              />
-            </Flex>
-            <Flex direction="col" gap="sm">
-              <Text size="sm" weight="medium">
-                Đích đến
-              </Text>
-              <RadioGroup
-                id="handy-dest"
-                value={dest}
-                onValueChange={setDest}
-                orientation="vertical"
-                options={DESTINATIONS.map((d) => ({
-                  value: d.id,
-                  label: d.label,
-                  description: d.hint,
-                }))}
-              />
-            </Flex>
-          </Flex>
-        </SheetBody>
-        <SheetFooter className="flex-row">
-          <Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>
-            Huỷ
-          </Button>
-          <Button
-            className="flex-[2]"
-            onClick={() => {
-              onOpenChange(false);
-              toast.success("Đã lưu hàng mới");
-            }}
-          >
-            Lưu
-          </Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  );
-}
-
-// ── Tab bodies ───────────────────────────────────────────────────────────────
-
-type ListState = "ready" | "loading" | "empty" | "error";
-
-/**
- * The SCROLL REGION of the inbound screen — and nothing else. The sticky bar and the tab bar are
- * `MobileShell` bands now, so this component no longer owns a scroll box, a `flex-1`, or a border.
- */
-function InboundTab({
-  state,
-  onRetry,
-  selectMode,
-  selected,
-  setSelected,
-  onScan,
-}: {
-  state: ListState;
-  onRetry: () => void;
-  selectMode: boolean;
-  selected: Set<string>;
-  setSelected: React.Dispatch<React.SetStateAction<Set<string>>>;
-  onScan: () => void;
-}) {
-  const [filter, setFilter] = React.useState<string>("all");
-
-  const visible = ITEMS.filter((i) =>
-    filter === "all"
-      ? true
-      : filter === "unsorted"
-        ? i.status === "unsorted"
-        : i.status === "shelf",
-  );
-
-  return (
-    <Flex direction="col" gap="md">
-      {/* Filter chips — horizontal scroll, count pills */}
-      <ToggleGroup
-        type="single"
-        value={filter}
-        onValueChange={(v) => {
-          if (v) setFilter(v);
-        }}
-        className="w-full overflow-x-auto"
-      >
-        <Flex justify="start" gap="sm">
-          {FILTERS.map((f) => (
-            <ToggleGroupItem
-              key={f.id}
-              value={f.id}
-              className="text-[length:var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))] h-9 shrink-0 rounded-full whitespace-nowrap"
-              // The library's OWN counter pill, not a `Text` at 70% opacity (gh#643). The
-              // hand-rolled one measured 2.15:1 on the selected chip's --primary fill, because
-              // `opacity-70` blends whatever ink it inherits back towards the fill underneath it —
-              // `tone="inherit"` cannot help with that. `.ui-toggle[data-state="on"]
-              // .ui-toggle-count` inverts instead (--primary on --primary-foreground, 6.32:1) and
-              // folds the number into the accessible name.
-              count={f.count}
-            >
-              {f.label}
-            </ToggleGroupItem>
-          ))}
-        </Flex>
-      </ToggleGroup>
-
-      {state === "loading" ? (
-        <Flex direction="col" gap="md" aria-busy="true">
-          {Array.from({ length: 3 }).map((_, i) => (
-            <Card key={i} density="tight" className="rounded-xl">
-              <CardContent solo>
-                <Flex direction="col" gap="md">
-                  <Skeleton className="h-4 w-3/5" />
-                  <Skeleton className="h-3 w-2/5" />
-                  <Skeleton className="h-5 w-24 rounded-full" />
-                </Flex>
-              </CardContent>
-            </Card>
-          ))}
-        </Flex>
-      ) : state === "error" ? (
-        <Alert tone="warning">
-          <AlertTitle>Không tải được danh sách</AlertTitle>
-          <AlertDescription>
-            <Flex direction="col" align="start" gap="sm">
-              Kiểm tra kết nối rồi thử lại.
-              <Button variant="outline" size="sm" onClick={onRetry}>
-                <RefreshCw aria-hidden="true" />
-                Thử lại
-              </Button>
-            </Flex>
-          </AlertDescription>
-        </Alert>
-      ) : state === "empty" || visible.length === 0 ? (
-        <EmptyState
-          icon={Boxes}
-          title="Chưa có hàng trong mục này"
-          description="Quét mã để nhập hàng mới vào kho."
-          action={
-            <Button size="sm" onClick={onScan}>
-              <ScanLine aria-hidden="true" />
-              Quét / Tìm mã
-            </Button>
-          }
-        />
-      ) : (
-        <Flex direction="col" gap="md">
-          {visible.map((item) => (
-            <ItemListCard
-              key={item.id}
-              item={item}
-              selectMode={selectMode}
-              selected={selected.has(item.id)}
-              onToggle={() =>
-                setSelected((prev) => {
-                  const next = new Set(prev);
-                  if (next.has(item.id)) next.delete(item.id);
-                  else next.add(item.id);
-                  return next;
-                })
-              }
-            />
-          ))}
-        </Flex>
-      )}
-    </Flex>
-  );
-}
-
-/**
- * The inbound screen's `actions` band: the scan-first pair at rest, the contextual pair in select
- * mode. It lives OUTSIDE the scroll region, so it needs no `position: sticky` and no bottom padding
- * on the list to clear it, and `MobileShell` gives it the home-indicator inset when no tab bar
- * follows.
- */
-function InboundActions({
-  selectMode,
-  selected,
-  onExitSelect,
-  onScan,
-  onAdd,
-  onAssign,
-}: {
-  selectMode: boolean;
-  selected: Set<string>;
-  onExitSelect: () => void;
-  onScan: () => void;
-  onAdd: () => void;
-  onAssign: () => void;
-}) {
-  if (!selectMode) {
-    return (
-      <>
-        <Button className="flex-[2]" onClick={onScan}>
-          <ScanLine aria-hidden="true" />
-          Quét / Tìm mã
-        </Button>
-        <Button variant="outline" className="flex-1" onClick={onAdd}>
-          <Plus aria-hidden="true" />
-          Thêm hàng
-        </Button>
-      </>
-    );
-  }
-  return (
-    <Flex direction="col" gap="sm" className="w-full">
-      <Flex align="center" justify="between">
-        <Text size="sm" tabular>
-          <Text as="span" weight="bold">
-            {selected.size}
-          </Text>{" "}
-          item đã chọn
-        </Text>
-        <Button variant="ghost" size="sm" onClick={onExitSelect}>
-          Xong
-        </Button>
-      </Flex>
-      <Flex gap="sm">
-        <Button className="flex-[2]" disabled={selected.size === 0} onClick={onAssign}>
-          <Package aria-hidden="true" />
-          Gán vào kiện…
-        </Button>
-        <Button variant="outline" className="flex-1" disabled={selected.size === 0}>
-          Kiện mới
-        </Button>
-      </Flex>
-    </Flex>
-  );
-}
-
-function PackingTab() {
-  const active = PACKINGS.find((p) => p.status === "active");
-  const others = PACKINGS.filter((p) => p.status !== "active");
-  return (
-    <Flex direction="col" gap="md">
-      {active ? (
-        <Card
-          density="tight"
-          accent="primary"
-          className="border-primary bg-[color-mix(in_oklch,var(--primary)_6%,transparent)]"
-        >
-          <CardContent solo>
-            <Flex direction="col" gap="xs">
-              <Flex align="center" justify="between">
-                <Text size="2xs" weight="medium" tone="muted" className="tracking-wider uppercase">
-                  Kiện đang làm
-                </Text>
-                <Badge tone="info" variant="outline" className="rounded-full">
-                  {PACKING_STATUS.active.label}
-                </Badge>
-              </Flex>
-              <Text as="div" size="lg" weight="bold" mono tabular>
-                {active.code}
-              </Text>
-              <Text size="xs" tone="muted" tabular as="div">
-                {active.customer} · {active.city} · ×{active.items} · {active.slot}
-              </Text>
-            </Flex>
-          </CardContent>
-        </Card>
-      ) : null}
-
-      <SectionHeader count={others.length}>Kiện đang mở</SectionHeader>
-      <Flex direction="col" gap="md">
-        {others.map((p) => (
-          <PackingListCard key={p.id} packing={p} onTap={() => undefined} />
-        ))}
-      </Flex>
-    </Flex>
-  );
-}
-
-function PackingActions({ onScan }: { onScan: () => void }) {
-  return (
-    <Flex direction="col" gap="sm" className="w-full">
-      <Button onClick={onScan}>
-        <ScanLine aria-hidden="true" />
-        Quét item vào kiện
-      </Button>
-      <Button variant="outline">
-        <Plus aria-hidden="true" />
-        Tạo kiện trống
-      </Button>
-    </Flex>
-  );
-}
-
-/**
- * `seg` is lifted to the page: the segmented control lives in the scroll region while the verb it
- * selects lives in the `actions` band, and the two are different MobileShell slots.
- */
-function OutboundTab({ seg, setSeg }: { seg: string; setSeg: (v: string) => void }) {
-  return (
-    <Flex direction="col" gap="md">
-      {/* Segmented — outbound status */}
-      <ToggleGroup
-        type="single"
-        value={seg}
-        onValueChange={(v) => {
-          if (v) setSeg(v);
-        }}
-        className="bg-secondary/60 w-full rounded-xl"
-      >
-        <ResponsiveGrid columns={3} gap="xs">
-          <ToggleGroupItem
-            value="seal"
-            className="text-[length:var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))] h-9 rounded-xl whitespace-nowrap"
-          >
-            Chờ niêm phong
-          </ToggleGroupItem>
-          <ToggleGroupItem
-            value="handoff"
-            className="text-[length:var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))] h-9 rounded-xl whitespace-nowrap"
-          >
-            Chờ bàn giao
-          </ToggleGroupItem>
-          <ToggleGroupItem
-            value="done"
-            className="text-[length:var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))] h-9 rounded-xl whitespace-nowrap"
-          >
-            Đã bàn giao
-          </ToggleGroupItem>
-        </ResponsiveGrid>
-      </ToggleGroup>
-
-      <SectionHeader count={OUTBOUND.length}>
-        {seg === "seal"
-          ? "Sẵn sàng niêm phong"
-          : seg === "handoff"
-            ? "Chờ bàn giao"
-            : "Đã bàn giao"}
-      </SectionHeader>
-      <Flex direction="col" gap="md">
-        {OUTBOUND.map((p) => (
-          <Card key={p.id} density="tight" className="rounded-xl">
-            <CardContent solo>
-              <Flex direction="col" gap="md">
-                <Flex align="center" justify="between" gap="sm">
-                  <Text as="code" size="sm" weight="bold" tabular>
-                    {p.code}
-                  </Text>
-                  <Badge tone="success" variant="outline" className="rounded-full">
-                    Sẵn sàng niêm phong
-                  </Badge>
-                </Flex>
-                <Flex align="center" justify="between" gap="sm">
-                  <Text size="xs" tone="muted" tabular truncate>
-                    {p.customer} · {p.city}
-                  </Text>
-                  <Text size="xs" tone="muted" tabular className="shrink-0">
-                    ×{p.items} · {p.slot}
-                  </Text>
-                </Flex>
-                <div>
-                  <Descriptions columns={1}>
-                    <Descriptions.Item label="Vị trí" mono>
-                      {p.slot}
-                    </Descriptions.Item>
-                    <Descriptions.Item label="Số kiện" mono>
-                      ×{p.items}
-                    </Descriptions.Item>
-                  </Descriptions>
-                </div>
-              </Flex>
-            </CardContent>
-          </Card>
-        ))}
-      </Flex>
-    </Flex>
-  );
-}
-
-function OutboundActions({
-  seg,
-  onSeal,
-  onHandoff,
-}: {
-  seg: string;
-  onSeal: () => void;
-  onHandoff: () => void;
-}) {
-  return seg === "handoff" ? (
-    <Button className="flex-1" onClick={onHandoff}>
-      <Truck aria-hidden="true" />
-      Xác nhận bàn giao
-    </Button>
-  ) : (
-    <Button className="flex-1" onClick={onSeal}>
-      <Check aria-hidden="true" />
-      Quét mã kiện · Niêm phong
-    </Button>
-  );
-}
-
-// ── Root ─────────────────────────────────────────────────────────────────────
-
-export default function AgencyHandyShowcase() {
-  const [tab, setTab] = React.useState<string>("inbound");
-  const [listState, setListState] = React.useState<ListState>("ready");
-
-  const [selectMode, setSelectMode] = React.useState(false);
-  const [selected, setSelected] = React.useState<Set<string>>(new Set());
-  const [seg, setSeg] = React.useState<string>("seal");
-
-  const [lookupOpen, setLookupOpen] = React.useState(false);
-  const [formOpen, setFormOpen] = React.useState(false);
-  const [pickerOpen, setPickerOpen] = React.useState(false);
-
-  const [sealOpen, setSealOpen] = React.useState(false);
-  const [handoffOpen, setHandoffOpen] = React.useState(false);
-
-  const headerTitle = tab === "inbound" ? "Nhập kho" : tab === "packing" ? "Đóng gói" : "Xuất kho";
-
-  const exitSelect = () => {
-    setSelectMode(false);
-    setSelected(new Set());
-  };
-
-  // SELECT MODE REPLACES THE APP BAR — it does not stack a second strip under it. That is the
-  // platform pattern on both iOS and Android, and it is what the `header` slot is for: one bar to
-  // read at a time. This file once rendered the title bar AND a contextual strip, because
-  // there was no bar to swap.
-  const header = selectMode ? (
-    <Flex align="center" justify="between" gap="xs" className="w-full">
-      <Button variant="ghost" size="icon-sm" aria-label="Thoát chế độ chọn" onClick={exitSelect}>
-        <X className="size-4" aria-hidden="true" strokeWidth={1.5} />
-      </Button>
-      <Text size="sm" mono tabular>
-        {selected.size} đã chọn
-      </Text>
-      <Button
-        variant="ghost"
-        size="sm"
-        onClick={() => setSelected(new Set(ITEMS.map((i) => i.id)))}
-      >
-        Chọn tất cả
-      </Button>
-    </Flex>
-  ) : (
-    <Flex align="center" justify="between" gap="xs" className="w-full">
-      <Heading level={3} as="h1" className="whitespace-nowrap">
-        {headerTitle}
-      </Heading>
-      <Flex align="center" gap="xs">
-        {tab === "inbound" ? (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => {
-              setSelectMode(true);
-              setSelected(new Set());
-            }}
-          >
-            <Check aria-hidden="true" />
-            Chọn
-          </Button>
-        ) : null}
-        {/* State switcher — exposes the 4 list states at rest (showcase affordance) */}
-        {tab === "inbound" ? (
-          <ToggleGroup
-            type="single"
-            value={listState}
-            onValueChange={(v) => {
-              if (v) setListState(v as ListState);
-            }}
-            aria-label="List state (showcase)"
-          >
-            <Flex gap="xs">
-              {(["ready", "loading", "empty", "error"] as const).map((s) => (
-                <ToggleGroupItem
-                  key={s}
-                  value={s}
-                  className="text-[length:var(--font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)))] size-7 rounded-md uppercase"
-                  title={s}
-                >
-                  {s[0]}
-                </ToggleGroupItem>
-              ))}
-            </Flex>
-          </ToggleGroup>
-        ) : null}
-      </Flex>
-    </Flex>
-  );
-
-  const actions =
-    tab === "inbound" ? (
-      <InboundActions
-        selectMode={selectMode}
-        selected={selected}
-        onExitSelect={exitSelect}
-        onScan={() => setLookupOpen(true)}
-        onAdd={() => setFormOpen(true)}
-        onAssign={() => setPickerOpen(true)}
-      />
-    ) : tab === "packing" ? (
-      <PackingActions onScan={() => setLookupOpen(true)} />
-    ) : (
-      <OutboundActions
-        seg={seg}
-        onSeal={() => setSealOpen(true)}
-        onHandoff={() => setHandoffOpen(true)}
-      />
-    );
-
-  return (
-    <>
-      <Toaster />
-      {/* The whole phone is ONE primitive now: five bands, no Card frame, no hand-rolled scroll box,
-       * no `min-h-screen` wrapper. The shell is the document's only scroll container and every band
-       * pads itself out of the device safe areas. */}
-      <MobileShell
-        statusBar={<StatusBar />}
-        header={header}
-        actions={actions}
-        tabBar={
-          <TabBar
-            active={tab}
-            onChange={(id) => {
-              setTab(id);
-              exitSelect();
-            }}
-          />
-        }
-      >
-        {tab === "inbound" ? (
-          <InboundTab
-            state={listState}
-            onRetry={() => setListState("ready")}
-            selectMode={selectMode}
-            selected={selected}
-            setSelected={setSelected}
-            onScan={() => setLookupOpen(true)}
-          />
-        ) : tab === "packing" ? (
-          <PackingTab />
-        ) : (
-          <OutboundTab seg={seg} setSeg={setSeg} />
-        )}
-      </MobileShell>
-
-      {/* Sheets */}
-      <ItemLookupSheet open={lookupOpen} onOpenChange={setLookupOpen} />
-      <ItemFormSheet open={formOpen} onOpenChange={setFormOpen} />
-      <PackagePickerSheet open={pickerOpen} onOpenChange={setPickerOpen} count={selected.size} />
-
-      {/* Confirm dialogs — verb confirm, surface summary; forward step = primary */}
-      <AlertDialog
-        open={sealOpen}
-        onOpenChange={setSealOpen}
-        title="Niêm phong kiện?"
-        description="PKG-000037 · 9 item · vị trí B-01-04. Sau khi niêm phong không thể thêm item."
-        confirmLabel="Niêm phong"
-        cancelLabel="Huỷ"
-        onConfirm={() => {
-          toast.success("Đã niêm phong PKG-000037 · 16:24");
-        }}
-      />
-      <AlertDialog
-        open={handoffOpen}
-        onOpenChange={setHandoffOpen}
-        title="Xác nhận bàn giao?"
-        description="PKG-000037 lên xe giao. Thao tác này có thể hoàn tác trong 10 phút."
-        confirmLabel="Xác nhận"
-        cancelLabel="Huỷ"
-        onConfirm={() => {
-          toast.success("Đã bàn giao PKG-000037 · 16:24");
-        }}
-      />
-    </>
-  );
-}