@lotics/ui 3.5.0 → 4.0.0

package/examples/tpl_inventory.tsx

@@ -0,0 +1,299 @@
+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 { FilterPill } from "@lotics/ui/filter_pill";
+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}
+          />
+          <FilterPill 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" />
+          </FilterPill>
+        </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>
+  );
+}