@lotics/ui 7.8.0 → 7.9.0

package/examples/tpl_dispatch.tsx

@@ -1,289 +0,0 @@
-import { useState } from "react";
-import { Pressable, ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors, solid } from "@lotics/ui/colors";
-import { ActionMenu } from "@lotics/ui/action_menu";
-import { Avatar } from "@lotics/ui/avatar";
-import { Badge } from "@lotics/ui/badge";
-import { Button } from "@lotics/ui/button";
-import { Card, CardFooter, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
-import { DetailRow } from "@lotics/ui/detail_row";
-import { Divider } from "@lotics/ui/divider";
-import { Drawer, DrawerFooter } from "@lotics/ui/drawer";
-import { EmptyState } from "@lotics/ui/empty_state";
-import { KPIStrip } from "@lotics/ui/kpi_strip";
-import { MenuListItem } from "@lotics/ui/menu_list_item";
-import { Popover, PopoverContent, PopoverTrigger } from "@lotics/ui/popover";
-import { Peek } from "@lotics/ui/peek";
-import { PressableRow } from "@lotics/ui/pressable_row";
-import { ProgressBar } from "@lotics/ui/progress_bar";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Dispatch board — the work is ALLOCATION: fit a pool of demand
-// into limited capacity (deliveries → trucks; same shape for jobs →
-// machines, visits → technicians, bookings → rooms). The pool sits left;
-// each resource is a card whose load meter answers "does it fit?" before
-// you ask. Assigning is a popover that names the remaining capacity per
-// option and disables what doesn't fit — the gate is the data. Rows open
-// the same stop drawer from either side; assignment moves rows live.
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface Stop {
-  id: string;
-  customer: string;
-  destination: string;
-  volume: number; // m³
-  due: string;
-  truck: string | null;
-}
-
-interface Truck {
-  id: string;
-  driver: string;
-  capacity: number; // m³
-  phone: string;
-  licence: string;
-}
-
-const TRUCKS: Truck[] = [
-  { id: "VL-01", driver: "Tom Becker", capacity: 12, phone: "+1 415 555 0142", licence: "Class C · exp 2027-03" },
-  { id: "VL-02", driver: "Ray Santos", capacity: 12, phone: "+1 415 555 0188", licence: "Class C · exp 2026-11" },
-  { id: "VL-03", driver: "Ken Adachi", capacity: 8, phone: "+1 415 555 0107", licence: "Class C · exp 2028-01" },
-];
-
-const STOPS: Stop[] = [
-  { id: "SR-2026-0027", customer: "BRIGHTCELL BATTERIES", destination: "Arden industrial park", volume: 4.2, due: "am", truck: "VL-01" },
-  { id: "SR-2026-0031", customer: "ATLAS COMPONENTS", destination: "Eastport free zone", volume: 5.6, due: "am", truck: "VL-01" },
-  { id: "SR-2026-0033", customer: "KING LUN PLASTICS", destination: "Brookfield district 4", volume: 6.1, due: "am", truck: "VL-02" },
-  { id: "SR-2026-0035", customer: "VITTORIA ACCESSORIES", destination: "Centerville depot", volume: 3.4, due: "pm", truck: null },
-  { id: "SR-2026-0036", customer: "CRESTLINE FURNITURE", destination: "Dalton port gate 2", volume: 7.8, due: "pm", truck: null },
-  { id: "SR-2026-0038", customer: "MERIDIAN CONSTRUCTION", destination: "Fairview site B", volume: 2.2, due: "am", truck: null },
-  { id: "SR-2026-0039", customer: "NORTHWIND PACKAGING", destination: "Hillcrest yard", volume: 4.9, due: "pm", truck: null },
-  { id: "SR-2026-0040", customer: "BRIGHTCELL BATTERIES", destination: "Arden industrial park", volume: 1.6, due: "pm", truck: null },
-];
-
-const fmt = (n: number) => `${n.toLocaleString("en-US", { maximumFractionDigits: 1 })} m³`;
-
-function StopRow({ s, openId, onOpen, right }: { s: Stop; openId: string | null; onOpen: () => void; right?: React.ReactNode }) {
-  return (
-    <PressableRow onPress={onOpen} selected={openId === s.id} style={{ gap: 8 }}>
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel={`Open stop ${s.id}`}
-        onPress={onOpen}
-        style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 12, minHeight: 52 }}
-      >
-        <View style={{ flex: 1, gap: 0 }}>
-          <Text size="sm" numberOfLines={1}>{s.destination}</Text>
-          <Text size="xs" color="muted" numberOfLines={1}>{`${s.id} · ${s.customer}`}</Text>
-        </View>
-        <Badge variant="dot" label={s.due === "am" ? "Morning" : "Afternoon"} color={s.due === "am" ? "blue" : "zinc"} />
-        <Text size="sm" tabular align="right" style={{ width: 56 }}>{fmt(s.volume)}</Text>
-      </Pressable>
-      {right}
-    </PressableRow>
-  );
-}
-
-export function TplDispatch() {
-  const [stops, setStops] = useState<Stop[]>(STOPS);
-  const [openId, setOpenId] = useState<string | null>(null);
-
-  const assign = (stopId: string, truckId: string | null) => {
-    setStops((prev) => prev.map((s) => (s.id === stopId ? { ...s, truck: truckId } : s)));
-    setOpenId(null);
-  };
-
-  const pool = stops.filter((s) => s.truck === null);
-  const stopsOf = (truckId: string) => stops.filter((s) => s.truck === truckId);
-  const loadOf = (truckId: string) => stopsOf(truckId).reduce((sum, s) => sum + s.volume, 0);
-  const freeOf = (t: Truck) => t.capacity - loadOf(t.id);
-
-  const totalCapacity = TRUCKS.reduce((s, t) => s + t.capacity, 0);
-  const totalLoad = TRUCKS.reduce((s, t) => s + loadOf(t.id), 0);
-  const poolVolume = pool.reduce((s, x) => s + x.volume, 0);
-
-  // The drawer walks whichever list the stop was opened from.
-  const open = stops.find((s) => s.id === openId) ?? null;
-  const walk = open ? (open.truck === null ? pool : stopsOf(open.truck)) : [];
-  const seqIndex = open ? walk.findIndex((s) => s.id === open.id) : -1;
-
-  /** The fit-aware assign control — every option states its remaining
-   * capacity; an option that can't take the stop is disabled, not hidden,
-   * so "why can't I?" answers itself. */
-  const AssignControl = ({ s }: { s: Stop }) => (
-    <Popover side="bottom" align="end">
-      <PopoverTrigger>
-        <Button title="Assign" color="secondary" />
-      </PopoverTrigger>
-      <PopoverContent style={{ width: 320 }}>
-        <View style={{ paddingHorizontal: 12, paddingTop: 10, paddingBottom: 6 }}>
-          <Text size="xs" color="muted" transform="uppercase">{`${s.id} · ${fmt(s.volume)} → which truck?`}</Text>
-        </View>
-        <View style={{ paddingHorizontal: 6, paddingBottom: 8, gap: 2 }}>
-          {TRUCKS.map((t) => {
-            const fits = freeOf(t) >= s.volume;
-            return (
-              <MenuListItem
-                key={t.id}
-                title={`${t.id} · ${t.driver}`}
-                description={fits ? `${fmt(freeOf(t))} free of ${fmt(t.capacity)}` : `won't fit — ${fmt(freeOf(t))} free`}
-                disabled={!fits}
-                onPress={() => assign(s.id, t.id)}
-              />
-            );
-          })}
-        </View>
-      </PopoverContent>
-    </Popover>
-  );
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 1100, alignSelf: "center", gap: 16 }}>
-        {/* header band */}
-        <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">Dispatch board</Text>
-          <Text size="sm" color="muted">Fit the day's demand into the fleet — assign until the pool is empty</Text>
-        </View>
-
-        <KPIStrip
-          items={[
-            { label: "Unassigned", value: pool.length, format: "number", tone: pool.length > 0 ? "warning" : "default", caption: `${fmt(poolVolume)} waiting` },
-            { label: "Fleet load", value: Math.round((totalLoad / totalCapacity) * 100), format: "percentage", info: "Volume assigned across every truck vs total fleet capacity. The board's job is moving this toward 100% without breaking a single truck's limit." },
-            { label: "Stops planned", value: stops.length - pool.length, format: "number", caption: `across ${TRUCKS.length} trucks` },
-            { label: "Headroom", value: Math.round((totalCapacity - totalLoad) * 10) / 10, format: "number", caption: "m³ free fleet-wide" },
-          ]}
-        />
-
-        <View style={{ flexDirection: "row", gap: 16, alignItems: "flex-start", flexWrap: "wrap" }}>
-          {/* the demand pool */}
-          <Card style={{ padding: 0, flexGrow: 1, flexBasis: 400 }}>
-            <CardHeader>
-              <CardHeaderTitle info="Today's deliveries with no truck yet. Assign… names each truck's remaining capacity and disables what won't fit.">
-                Unassigned
-              </CardHeaderTitle>
-            </CardHeader>
-            {pool.length === 0 ? (
-              <EmptyState message="Everything is on a truck" hint="The pool refills as new orders reach the delivery stage" />
-            ) : (
-              pool.map((s, i) => (
-                <View key={s.id}>
-                  {i > 0 ? <Divider /> : null}
-                  <StopRow s={s} openId={openId} onOpen={() => setOpenId(s.id)} right={<AssignControl s={s} />} />
-                </View>
-              ))
-            )}
-            <CardFooter>
-              <Text size="xs" color="muted" tabular style={{ flex: 1 }}>{`${pool.length} stops · ${fmt(poolVolume)}`}</Text>
-            </CardFooter>
-          </Card>
-
-          {/* the capacity lanes */}
-          <View style={{ flexGrow: 2, flexBasis: 560, gap: 16 }}>
-            {TRUCKS.map((t) => {
-              const load = loadOf(t.id);
-              const truckStops = stopsOf(t.id);
-              return (
-                <Card key={t.id} style={{ padding: 0 }}>
-                  <CardHeader>
-                    <CardHeaderTitle info="The load meter is the gate: assignment options that would push it past capacity are disabled at the source.">
-                      {t.id}
-                    </CardHeaderTitle>
-                    <Peek
-                      accessibilityLabel={`Driver ${t.driver}`}
-                      side="bottom"
-                      align="end"
-                      content={
-                        <View style={{ gap: 12 }}>
-                          <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-                            <Avatar name={t.driver} size={36} />
-                            <View style={{ gap: 1 }}>
-                              <Text size="sm" weight="semibold">{t.driver}</Text>
-                              <Text size="xs" color="muted">{`Driver · ${t.id}`}</Text>
-                            </View>
-                          </View>
-                          <Divider />
-                          <View style={{ gap: 8 }}>
-                            <DetailRow label="Vehicle" labelWidth={64} labelSize="xs"><Text size="sm" style={{ flex: 1 }} userSelect="auto">{`${t.id} · ${fmt(t.capacity)} capacity`}</Text></DetailRow>
-                            <DetailRow label="Today" labelWidth={64} labelSize="xs"><Text size="sm" style={{ flex: 1 }} userSelect="auto">{`${truckStops.length} stops · ${fmt(load)} loaded`}</Text></DetailRow>
-                            <DetailRow label="Phone" labelWidth={64} labelSize="xs"><Text size="sm" style={{ flex: 1 }} userSelect="auto">{t.phone}</Text></DetailRow>
-                            <DetailRow label="Licence" labelWidth={64} labelSize="xs"><Text size="sm" style={{ flex: 1 }} userSelect="auto">{t.licence}</Text></DetailRow>
-                          </View>
-                          <Button title="Open driver record" color="secondary" onPress={() => {}} />
-                        </View>
-                      }
-                    >
-                      <Text size="xs" color="muted">{t.driver}</Text>
-                    </Peek>
-                  </CardHeader>
-                  <View style={{ paddingHorizontal: 20, paddingVertical: 14 }}>
-                    <ProgressBar title="Load" value={load} max={t.capacity} format="fraction" color={solid("blue")} completeColor={solid("amber")} />
-                  </View>
-                  {truckStops.map((s, i) => (
-                    <View key={s.id}>
-                      {i > 0 ? <Divider /> : null}
-                      <StopRow
-                        s={s}
-                        openId={openId}
-                        onOpen={() => setOpenId(s.id)}
-                        right={
-                          <ActionMenu
-                            accessibilityLabel={`Actions for ${s.id}`}
-                            items={[{ key: "unassign", label: "Return to pool", icon: "arrow-left", onPress: () => assign(s.id, null) }]}
-                          />
-                        }
-                      />
-                    </View>
-                  ))}
-                  <CardFooter>
-                    <Text size="xs" color="muted" tabular style={{ flex: 1 }}>
-                      {truckStops.length === 0 ? "Empty — assign from the pool" : `${truckStops.length} stops · ${fmt(load)} of ${fmt(t.capacity)}`}
-                    </Text>
-                    <Button title="Print run sheet" color="muted" onPress={() => {}} />
-                  </CardFooter>
-                </Card>
-              );
-            })}
-          </View>
-        </View>
-      </View>
-
-      {open !== null ? (
-        <Drawer
-          open
-          onOpenChange={(o) => !o && setOpenId(null)}
-          title={open.id}
-          width={440}
-          onPrev={seqIndex > 0 ? () => setOpenId(walk[seqIndex - 1].id) : undefined}
-          onNext={seqIndex >= 0 && seqIndex < walk.length - 1 ? () => setOpenId(walk[seqIndex + 1].id) : undefined}
-          position={seqIndex >= 0 ? `${seqIndex + 1}/${walk.length}` : undefined}
-        >
-          <View key={open.id} style={{ flex: 1, padding: 24, gap: 14 }}>
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-              {open.truck ? <Badge label={`On ${open.truck}`} color="blue" /> : <Badge label="Unassigned" color="amber" />}
-              <Badge label={open.due === "am" ? "Morning window" : "Afternoon window"} />
-            </View>
-            <View style={{ gap: 6 }}>
-              <DetailRow label="Customer">
-                <Text size="sm">{open.customer}</Text>
-              </DetailRow>
-              <Divider />
-              <DetailRow label="Destination">
-                <Text size="sm">{open.destination}</Text>
-              </DetailRow>
-              <Divider />
-              <DetailRow label="Volume">
-                <Text size="sm" tabular>{fmt(open.volume)}</Text>
-              </DetailRow>
-            </View>
-          </View>
-          <DrawerFooter>
-            {open.truck !== null ? <Button title="Return to pool" color="secondary" onPress={() => assign(open.id, null)} /> : null}
-            <Button title="Open order record" color="primary" onPress={() => {}} />
-          </DrawerFooter>
-        </Drawer>
-      ) : null}
-    </ScrollView>
-  );
-}

package/examples/tpl_inventory.tsx

@@ -1,299 +0,0 @@
-import { useState } from "react";
-import { ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors, solid } from "@lotics/ui/colors";
-import { Badge } from "@lotics/ui/badge";
-import { Button } from "@lotics/ui/button";
-import { ChipGroup } from "@lotics/ui/chip_group";
-import { FilterChip } from "@lotics/ui/filter_chip";
-import { RangeSlider, rangeSummary } from "@lotics/ui/range_slider";
-import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
-import { Card } from "@lotics/ui/card";
-import { DetailRow } from "@lotics/ui/detail_row";
-import { Divider } from "@lotics/ui/divider";
-import { Drawer, DrawerFooter } from "@lotics/ui/drawer";
-import { EmptyState } from "@lotics/ui/empty_state";
-import { formatMoney } from "@lotics/ui/format_money";
-import { KPIStrip } from "@lotics/ui/kpi_strip";
-import { ActionMenu } from "@lotics/ui/action_menu";
-import { Table, TableRow, TableCell, type TableColumn } from "@lotics/ui/table";
-import { ProgressBar } from "@lotics/ui/progress_bar";
-import { SearchInput } from "@lotics/ui/search_input";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Warehouse — inventory. The stock register: each SKU is a row with
-// a stock-level bar (on hand vs minimum) that reads danger when under min, and
-// "Reorder" appears ONLY on under-min rows — the one action of the screen.
-//
-// Grammar: zinc-50 canvas · header + Stock count/Receive stock · ONE KPI Card ·
-// search + ChipGroup lens filtering live · register Card = eyebrow band → Divider
-// rows. Bar color: red under min, emerald at/over (ProgressBar completeColor).
-// Door: each SKU row press-opens the workspace Drawer, sequenced over the
-// filtered ordering (◀ ▶ / ←→) — open once, work the whole register.
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface SkuRow {
-  sku: string;
-  ten: string;
-  viTri: string;
-  ton: number;
-  dinhMuc: number;
-  giaTri: number;
-  /** dd/mm nearest expiry lot — feeds the "Expiring soon" KPI. */
-  hetHan?: string;
-}
-
-const TON_KHO: SkuRow[] = [
-  { sku: "RM-0012", ten: "Kraft paper 175gsm, 1.6m width", viTri: "A1-03", ton: 42, dinhMuc: 100, giaTri: 18_900_000 },
-  { sku: "RM-0018", ten: "Medium paper 115gsm, 1.4m width", viTri: "A1-05", ton: 260, dinhMuc: 150, giaTri: 96_200_000 },
-  { sku: "RM-0024", ten: "Flexo printing ink, blue", viTri: "B2-01", ton: 18, dinhMuc: 40, giaTri: 7_560_000, hetHan: "28/06" },
-  { sku: "RM-0031", ten: "Starch adhesive, 25kg bag", viTri: "B2-04", ton: 65, dinhMuc: 50, giaTri: 13_650_000, hetHan: "15/07" },
-  { sku: "SUP-0007", ten: "Clear packing tape 48mm", viTri: "C1-02", ton: 480, dinhMuc: 200, giaTri: 4_320_000 },
-  { sku: "SUP-0011", ten: "PP strapping 12mm, 10kg roll", viTri: "C1-06", ton: 36, dinhMuc: 120, giaTri: 9_180_000 },
-  { sku: "FG-0203", ten: "Carton box 600×400×400, 5-ply", viTri: "D3-01", ton: 1_250, dinhMuc: 800, giaTri: 23_750_000 },
-  { sku: "FG-0218", ten: "Carton box 350×250×200, 3-ply", viTri: "D3-04", ton: 2_040, dinhMuc: 1_000, giaTri: 16_320_000 },
-  { sku: "FG-0226", ten: "Offset box 250×180×90, 4-color print", viTri: "D4-02", ton: 640, dinhMuc: 500, giaTri: 28_800_000 },
-  { sku: "SUP-0019", ten: "Staples 35mm, box of 5,000", viTri: "C2-03", ton: 22, dinhMuc: 60, giaTri: 1_980_000, hetHan: "30/06" },
-];
-
-const LOC = [
-  { id: "all", label: "All" },
-  { id: "under_min", label: "Below minimum" },
-  { id: "stocked", label: "Stocked" },
-] as const;
-
-// Columns defined ONCE — Table renders the header + each cell's width; the
-// Reorder button + ⋯ live in the trailing gutter.
-const COLUMNS: TableColumn[] = [
-  { key: "ten", label: "Item", flex: 1, sortable: true },
-  { key: "viTri", label: "Location", width: 76, sortable: true },
-  { key: "ton", label: "Stock level", width: 168, sortable: true },
-  { key: "giaTri", label: "Stock value", width: 116, align: "right", sortable: true },
-];
-
-const AMT_MAX = 100_000_000;
-const fmtAmt = (n: number) => formatMoney(n, { compact: true });
-
-function SkuLine({ r, selected, onPress }: { r: SkuRow; selected: boolean; onPress: () => void }) {
-  const duoiMuc = r.ton < r.dinhMuc;
-  return (
-    <TableRow
-      onPress={onPress}
-      selected={selected}
-      minHeight={56}
-      accessibilityLabel={`Open ${r.sku} — ${r.ten}`}
-      trailing={
-        <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 6 }}>
-          {duoiMuc ? <Button title="Reorder" color="muted" onPress={() => {}} /> : null}
-          <ActionMenu
-            accessibilityLabel={`Actions for ${r.sku}`}
-            items={[
-              { key: "adjust", label: "Adjust stock", icon: "pencil", onPress: () => {} },
-              { key: "count", label: "Request stock count", icon: "calculator", onPress: () => {} },
-            ]}
-          />
-        </View>
-      }
-    >
-      <TableCell>
-        <View style={{ gap: 2 }}>
-          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-            <Text size="sm" weight="medium" tabular>{r.sku}</Text>
-            {r.hetHan ? <Badge label={`EXP ${r.hetHan}`} color="amber" /> : null}
-          </View>
-          <Text size="xs" color="muted" numberOfLines={1}>{r.ten}</Text>
-        </View>
-      </TableCell>
-      <TableCell>
-        <Badge label={r.viTri} color="zinc" />
-      </TableCell>
-      <TableCell>
-        <View style={{ gap: 4, alignSelf: "stretch" }}>
-          <ProgressBar value={r.ton} max={r.dinhMuc} format="none" color={solid("red")} completeColor={solid("emerald")} />
-          <Text size="xs" color={duoiMuc ? "danger" : "muted"} tabular>
-            {`On hand ${r.ton.toLocaleString("en-US")} / Min ${r.dinhMuc.toLocaleString("en-US")}`}
-          </Text>
-        </View>
-      </TableCell>
-      <TableCell>
-        <Text size="sm" tabular>{formatMoney(r.giaTri)}</Text>
-      </TableCell>
-    </TableRow>
-  );
-}
-
-// The SKU workspace behind a register row — compact: identity + key facts +
-// the reorder action. Body is keyed by sku from the caller so it resets as
-// ◀ ▶ steps the sequence.
-function SkuWorkspace({ r }: { r: SkuRow }) {
-  const duoiMuc = r.ton < r.dinhMuc;
-  return (
-    <>
-      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 24, gap: 20 }}>
-        <View style={{ gap: 8 }}>
-          <View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
-            <Text size="lg" weight="semibold" tabular>{r.sku}</Text>
-            <Badge label={duoiMuc ? "Below minimum" : "Stocked"} color={duoiMuc ? "red" : "emerald"} />
-            {r.hetHan ? <Badge label={`EXP ${r.hetHan}`} color="amber" /> : null}
-          </View>
-          <Text size="sm" color="muted">{r.ten}</Text>
-        </View>
-        <Divider />
-        <View style={{ gap: 8 }}>
-          <DetailRow label="Bin location" labelWidth={120} minHeight={24}><Badge label={r.viTri} color="zinc" /></DetailRow>
-          <DetailRow label="Stock value" labelWidth={120} minHeight={24}><Text size="sm" tabular>{formatMoney(r.giaTri)}</Text></DetailRow>
-          {r.hetHan ? <DetailRow label="Nearest expiry" labelWidth={120} minHeight={24}><Text size="sm" tabular>{r.hetHan}</Text></DetailRow> : null}
-        </View>
-        <ProgressBar
-          title="Stock level"
-          value={r.ton}
-          max={r.dinhMuc}
-          format="fraction"
-          color={solid("red")}
-          completeColor={solid("emerald")}
-        />
-      </ScrollView>
-      {/* pinned footer — the row's actions; Reorder only when below minimum */}
-      <DrawerFooter>
-        <Text size="xs" color="muted" style={{ flex: 1 }}>
-          {duoiMuc ? "Stock is below the minimum — reorder to restore the safety level." : "Stock is at or above the minimum."}
-        </Text>
-        <Button title="Adjust stock" color="secondary" onPress={() => {}} />
-        {duoiMuc ? <Button title="Reorder" color="primary" onPress={() => {}} /> : null}
-      </DrawerFooter>
-    </>
-  );
-}
-
-export function TplInventory() {
-  const [loc, setLoc] = useState<string>("all");
-  const [tim, setTim] = useState("");
-  const [openSku, setOpenSku] = useState<string | null>(null);
-  const [sort, setSort] = useState<SortState | null>(null);
-  const onSort = (key: string) => setSort(cycleSort(sort, key));
-  const [amt, setAmt] = useState<[number, number]>([0, AMT_MAX]);
-
-  const duoiDinhMuc = TON_KHO.filter((r) => r.ton < r.dinhMuc);
-  const tongGiaTri = TON_KHO.reduce((s, r) => s + r.giaTri, 0);
-  const sapHetHan = TON_KHO.filter((r) => r.hetHan !== undefined);
-
-  const counts: Record<string, number> = {
-    all: TON_KHO.length,
-    under_min: duoiDinhMuc.length,
-    stocked: TON_KHO.length - duoiDinhMuc.length,
-  };
-
-  const q = tim.trim().toLowerCase();
-  const rows = TON_KHO.filter((r) => {
-    if (loc === "under_min" && r.ton >= r.dinhMuc) return false;
-    if (loc === "stocked" && r.ton < r.dinhMuc) return false;
-    if (r.giaTri < amt[0] || r.giaTri > amt[1]) return false;
-    if (q && !r.sku.toLowerCase().includes(q) && !r.ten.toLowerCase().includes(q)) return false;
-    return true;
-  });
-  const amtSummary = rangeSummary(amt, fmtAmt, [0, AMT_MAX]);
-
-  // Sort the filtered set — one column at a time (Stock level sorts by how far
-  // below minimum: ton / dinhMuc, so the threshold breaches surface together).
-  const sorted = sortBy(rows, sort, (r, key) =>
-    key === "viTri" ? r.viTri
-    : key === "ton" ? r.ton / r.dinhMuc
-    : key === "giaTri" ? r.giaTri
-    : r.ten.toLowerCase(),
-  );
-
-  // The drawer sequences over the CURRENTLY-VISIBLE ordering. If the open SKU
-  // falls out of the filter, the chevrons disappear but the drawer stays on it.
-  const openRow = openSku === null ? null : TON_KHO.find((r) => r.sku === openSku) ?? null;
-  const seqIndex = openRow ? sorted.findIndex((r) => r.sku === openRow.sku) : -1;
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 960, alignSelf: "center", gap: 16 }}>
-        {/* header band */}
-        <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12 }}>
-          <View style={{ gap: 2, flex: 1 }}>
-            <Text size="xl" weight="semibold">Warehouse — inventory</Text>
-            <Text size="sm" color="muted">Track stock against minimums — reorder the moment a SKU dips below</Text>
-          </View>
-          <Button title="Stock count" color="secondary" onPress={() => {}} />
-          <Button title="Receive stock" color="primary" onPress={() => {}} />
-        </View>
-
-        {/* KPI strip: ONE card, 4 hairline-divided columns. Counts that the
-            tabs below already filter drill into the matching tab. */}
-        <KPIStrip
-          items={[
-            {
-              label: "Total SKUs",
-              value: TON_KHO.length,
-              format: "number",
-            },
-            { label: "Stock value", value: tongGiaTri, format: "currency", compact: true },
-            {
-              label: "Below minimum",
-              value: duoiDinhMuc.length,
-              format: "number",
-              tone: "danger",
-              info: "SKUs whose stock is under their reorder minimum — the Below minimum tab filters the register to them.",
-
-            },
-            { label: "Expiring soon", value: sapHetHan.length, format: "number" },
-          ]}
-        />
-
-        {/* toolbar: live search + a stock-level lens. Wraps when narrow; every
-            control is 40px so a wrapped band reads as clean rows. */}
-        <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
-          <View style={{ flexGrow: 1, flexBasis: 240, minWidth: 200, maxWidth: 360 }}>
-            <SearchInput
-              placeholder="Search SKU, item name…"
-              value={tim}
-              onChangeText={setTim}
-              accessibilityLabel="Search stock"
-            />
-          </View>
-          <ChipGroup
-            accessibilityLabel="Filter by stock level"
-            options={LOC.map((l) => ({ label: `${l.label} · ${counts[l.id]}`, value: l.id }))}
-            value={loc}
-            onValueChange={setLoc}
-          />
-          <FilterChip label="Stock value" summary={amtSummary} onClear={() => setAmt([0, AMT_MAX])} clearLabel="Clear stock value filter">
-            <RangeSlider min={0} max={AMT_MAX} step={5_000_000} value={amt} onValueChange={setAmt} format={fmtAmt} accessibilityLabel="Stock value" />
-          </FilterChip>
-        </View>
-
-        {/* the stock register: eyebrow band → Divider-separated SKU rows */}
-        <Card style={{ padding: 0 }}>
-          <Table columns={COLUMNS} trailing={150} sort={sort} onSort={onSort}>
-            {sorted.map((r) => (
-              <SkuLine key={r.sku} r={r} selected={r.sku === openSku} onPress={() => setOpenSku(r.sku)} />
-            ))}
-          </Table>
-          {rows.length === 0 ? (
-            <>
-              <Divider />
-              <EmptyState message="No items match the current filters" hint="Try a different keyword or switch the filter tab" />
-            </>
-          ) : null}
-        </Card>
-      </View>
-
-      {/* the SKU workspace — sequenced over the visible register ordering */}
-      {openRow ? (
-        <Drawer
-          open
-          onOpenChange={(o) => !o && setOpenSku(null)}
-          title={openRow.ten}
-          width={480}
-          onPrev={seqIndex > 0 ? () => setOpenSku(sorted[seqIndex - 1].sku) : undefined}
-          onNext={seqIndex >= 0 && seqIndex < sorted.length - 1 ? () => setOpenSku(sorted[seqIndex + 1].sku) : undefined}
-          position={seqIndex >= 0 ? `${seqIndex + 1}/${sorted.length}` : undefined}
-        >
-          <SkuWorkspace key={openRow.sku} r={openRow} />
-        </Drawer>
-      ) : null}
-    </ScrollView>
-  );
-}