@lotics/ui 3.5.0 → 4.0.0

package/examples/tpl_dashboard.tsx

@@ -0,0 +1,554 @@
+import { useState } from "react";
+import { Pressable, ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors, ramp, solid, tint } from "@lotics/ui/colors";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionHeader,
+  AccordionMeta,
+  AccordionTitle,
+} from "@lotics/ui/accordion";
+import { ActionMenu, type ActionMenuItem } from "@lotics/ui/action_menu";
+import { Avatar } from "@lotics/ui/avatar";
+import { Badge } from "@lotics/ui/badge";
+import { BarChart } from "@lotics/ui/bar_chart";
+import { LineChart } from "@lotics/ui/line_chart";
+import { PieChart } from "@lotics/ui/pie_chart";
+import { RingGauge } from "@lotics/ui/ring_gauge";
+import { Sparkline } from "@lotics/ui/sparkline";
+import { TrendFooter } from "@lotics/ui/trend_footer";
+import { Button } from "@lotics/ui/button";
+import { Card, CardHeader, CardHeaderTitle, CardHeaderMeta } from "@lotics/ui/card";
+import {
+  DateRangeFilterField,
+  type DateRangeFilterFieldLabels,
+} from "@lotics/ui/date_range_filter_field";
+import { type DateFilterValue } from "@lotics/ui/date_filter";
+import { Divider } from "@lotics/ui/divider";
+import { Drawer } from "@lotics/ui/drawer";
+import { PressableRow } from "@lotics/ui/pressable_row";
+import { type IconName } from "@lotics/ui/icon";
+import { KPIStrip } from "@lotics/ui/kpi_strip";
+import { Peek } from "@lotics/ui/peek";
+import { StackedProgressBar } from "@lotics/ui/stacked_progress_bar";
+import { formatMoney } from "@lotics/ui/format_money";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Executive dashboard — the executive operations dashboard. One
+// screen that answers "how is this month going, where is it stuck, who pays
+// the bills".
+//
+// Bands: header + period badge · KPI strip (KPIStrip) · revenue by
+// month (BarChart, emerald = money) next to the sales pipeline
+// (StackedProgressBar, blue = pipeline) · Needs attention (Accordion rows —
+// icon + label + count Badge; expanding opens the records behind the
+// count, each record carries its domain ⋯ ActionMenu) · Top customers
+// (Avatar + revenue + margin badge; the name Peeks the dossier).
+// ─────────────────────────────────────────────────────────────────────────────
+
+const DOANH_THU_THANG = [
+  { label: "Jan", month: "2026-01", value: 842 },
+  { label: "Feb", month: "2026-02", value: 918 },
+  { label: "Mar", month: "2026-03", value: 1054 },
+  { label: "Apr", month: "2026-04", value: 986 },
+  { label: "May", month: "2026-05", value: 1152 },
+  { label: "Jun", month: "2026-06", value: 1284 },
+];
+
+// Per-period KPI datasets — the date filter actually filters. Custom ranges
+// outside the mock months keep the latest dataset (mock limitation).
+const KY_DU_LIEU: Record<
+  string,
+  {
+    doanhThu: number;
+    doanhThuTrend: number;
+    doanhThuCaption: string;
+    bienLai: number;
+    bienLaiTrend: number;
+    bienLaiCaption: string;
+    donDangXuLy: number;
+    donCaption: string;
+    congNo: number;
+    congNoCaption: string;
+  }
+> = {
+  "2026-04": {
+    doanhThu: 986_000_000, doanhThuTrend: -6, doanhThuCaption: "Mar: ₫1.05B",
+    bienLai: 16.8, bienLaiTrend: -1, bienLaiCaption: "Mar: 17.4%",
+    donDangXuLy: 31, donCaption: "2 orders past delivery date",
+    congNo: 512_000_000, congNoCaption: "8 customers overdue · up 4%",
+  },
+  "2026-05": {
+    doanhThu: 1_152_000_000, doanhThuTrend: 17, doanhThuCaption: "Apr: ₫986M",
+    bienLai: 17.1, bienLaiTrend: 2, bienLaiCaption: "Apr: 16.8%",
+    donDangXuLy: 34, donCaption: "3 orders past delivery date",
+    congNo: 449_000_000, congNoCaption: "5 customers overdue · down 12%",
+  },
+  "2026-06": {
+    doanhThu: 1_284_000_000, doanhThuTrend: 11, doanhThuCaption: "May: ₫1.15B",
+    bienLai: 18.4, bienLaiTrend: 1, bienLaiCaption: "May: 17.1%",
+    donDangXuLy: 37, donCaption: "4 orders past delivery date",
+    congNo: 486_000_000, congNoCaption: "6 customers overdue · up 8%",
+  },
+};
+const KY_CUOI = "2026-06";
+
+const NHAN_BO_LOC: Partial<DateRangeFilterFieldLabels> = {
+  year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM",
+  today: "Today", yesterday: "Yesterday", tomorrow: "Tomorrow", thisWeek: "This week",
+  thisMonth: "This month", lastMonth: "Last month", custom: "Custom", from: "From", to: "To",
+  selectDateRange: "Select date range", selectDate: "Select date",
+  clear: "Clear", done: "Done", placeholder: "All time",
+};
+
+function thangRange(year: number, monthIndex: number): DateFilterValue {
+  return {
+    start: { date: new Date(year, monthIndex, 1), time: null },
+    end: { date: new Date(year, monthIndex + 1, 0), time: null },
+  };
+}
+
+/** "YYYY-MM" when the range is exactly one calendar month, else null. */
+function thangKey(value: DateFilterValue): string | null {
+  const s = value.start.date;
+  const e = value.end.date;
+  if (!s || !e) return null;
+  const wholeMonth =
+    s.getDate() === 1 &&
+    s.getMonth() === e.getMonth() &&
+    s.getFullYear() === e.getFullYear() &&
+    e.getDate() === new Date(e.getFullYear(), e.getMonth() + 1, 0).getDate();
+  return wholeMonth ? `${s.getFullYear()}-${String(s.getMonth() + 1).padStart(2, "0")}` : null;
+}
+
+const PHEU_STAGES = [
+  { key: "tiepcan", label: "Prospecting", count: 46 },
+  { key: "baogia", label: "Quote sent", count: 28 },
+  { key: "damphan", label: "Negotiation", count: 14 },
+  { key: "chot", label: "Closed won", count: 9 },
+];
+// One hue, shaded along the funnel — closed-won (the win) is the strongest.
+const PHEU_RAMP = ramp("blue", PHEU_STAGES.length).reverse();
+const PHEU = PHEU_STAGES.map((p, i) => ({ ...p, color: PHEU_RAMP[i] }));
+
+// Margin per month — the LineChart series.
+const BIEN_LAI_THANG = [
+  { x: "Jan", y: 15.9 }, { x: "Feb", y: 16.4 }, { x: "Mar", y: 17.4 },
+  { x: "Apr", y: 16.8 }, { x: "May", y: 17.1 }, { x: "Jun", y: 18.4 },
+];
+
+// Revenue mix by customer industry — the PieChart slices.
+const CO_CAU = [
+  { label: "Machining", value: 392, color: solid("blue") },
+  { label: "Furniture", value: 286, color: solid("emerald") },
+  { label: "Plastics", value: 248, color: solid("amber") },
+  { label: "Other", value: 358, color: solid("zinc") },
+];
+
+const KHACH_DAN_DAU = [
+  { ten: "Atlas Components", nganh: "Export machining", doanhThu: 312_400_000, bienLai: 22, trend: [38, 44, 51, 47, 56, 62] },
+  { ten: "Crestline Plastics", nganh: "Household plastics", doanhThu: 248_900_000, bienLai: 19, trend: [42, 39, 45, 41, 44, 43] },
+  { ten: "Brightline Batteries", nganh: "Electrical — batteries", doanhThu: 186_200_000, bienLai: 11, trend: [40, 36, 33, 31, 28, 26] },
+  { ten: "Vittoria Accessories", nganh: "Bicycle accessories", doanhThu: 154_700_000, bienLai: 24, trend: [18, 22, 25, 24, 29, 33] },
+  { ten: "Northwind Furniture", nganh: "Export furniture", doanhThu: 121_500_000, bienLai: 9, trend: [25, 23, 20, 22, 19, 17] },
+];
+
+// Each alert carries the records behind its count — pressing the row opens
+// them inline. The count alone says "6 overdue"; the drill-down answers
+// "which 6, how bad, what do I open next". Every expanded record gets the
+// alert's domain actions via its ⋯ menu — no dead rows.
+interface AlertDetail {
+  key: string;
+  icon: IconName;
+  iconColor: string;
+  label: string;
+  count: number;
+  hint: string;
+  tone?: "warning";
+  records: { id: string; name: string; value: string; note: string; noteTone: "danger" | "muted" }[];
+  rowActions: Omit<ActionMenuItem, "onPress">[];
+  action: string;
+}
+
+const CAN_CHU_Y: AlertDetail[] = [
+  {
+    key: "congno",
+    icon: "circle-alert",
+    iconColor: solid("red"),
+    label: "Receivables overdue past 30 days",
+    count: 6,
+    hint: formatMoney(286_500_000),
+    records: [
+      { id: "INV-2026-0231", name: "Brightline Batteries", value: formatMoney(86_400_000), note: "42 days late", noteTone: "danger" },
+      { id: "INV-2026-0246", name: "Northwind Furniture", value: formatMoney(64_200_000), note: "35 days late", noteTone: "danger" },
+      { id: "INV-2026-0252", name: "Crestline Plastics", value: formatMoney(52_800_000), note: "31 days late", noteTone: "danger" },
+    ],
+    rowActions: [
+      { key: "nhac", label: "Send payment reminder", icon: "bell" },
+      { key: "doichieu", label: "Send statement", icon: "mail" },
+      { key: "mo", label: "Open invoice", icon: "external-link" },
+    ],
+    action: "Open Receivables",
+  },
+  {
+    key: "trethoigiao",
+    icon: "package",
+    iconColor: solid("red"),
+    label: "Orders past delivery date",
+    count: 4,
+    hint: "Earliest overdue since 04/06",
+    records: [
+      { id: "SO-2026-0418", name: "Atlas Components", value: "Due 04/06", note: "8 days late", noteTone: "danger" },
+      { id: "SO-2026-0431", name: "Vittoria Accessories", value: "Due 06/06", note: "6 days late", noteTone: "danger" },
+      { id: "SO-2026-0436", name: "Crestline Plastics", value: "Due 09/06", note: "3 days late", noteTone: "danger" },
+    ],
+    rowActions: [
+      { key: "baokhach", label: "Notify customer", icon: "mail" },
+      { key: "doingay", label: "Reschedule delivery", icon: "calendar" },
+      { key: "mo", label: "Open order", icon: "external-link" },
+    ],
+    action: "Open Orders",
+  },
+  {
+    key: "ketsx",
+    icon: "clock",
+    iconColor: solid("amber"),
+    label: "Work orders stuck over 2 days",
+    count: 2,
+    tone: "warning",
+    hint: "Printing stage",
+    records: [
+      { id: "WO-2026-0102", name: "Atlas 5-ply box", value: "Printing stage", note: "Stuck 4 days", noteTone: "danger" },
+      { id: "WO-2026-0107", name: "Crestline A3 carton", value: "Printing stage", note: "Stuck 3 days", noteTone: "muted" },
+    ],
+    rowActions: [
+      { key: "nhacto", label: "Notify Printing team", icon: "bell" },
+      { key: "mo", label: "Open work order", icon: "external-link" },
+    ],
+    action: "Open Production",
+  },
+  {
+    key: "baogiacho",
+    icon: "file-text",
+    iconColor: solid("amber"),
+    label: "Quotes awaiting approval",
+    count: 3,
+    tone: "warning",
+    hint: "Send by 13/06",
+    records: [
+      { id: "QT-2026-0089", name: "Atlas Components", value: formatMoney(148_000_000), note: "Waiting 2 days", noteTone: "muted" },
+      { id: "QT-2026-0091", name: "Eastgate Trading Co.", value: formatMoney(96_500_000), note: "Waiting 1 day", noteTone: "muted" },
+      { id: "QT-2026-0092", name: "Crestline Plastics", value: formatMoney(54_200_000), note: "Today", noteTone: "muted" },
+    ],
+    rowActions: [
+      { key: "duyet", label: "Approve quote", icon: "check" },
+      { key: "mo", label: "Open quote", icon: "external-link" },
+      { key: "tuchoi", label: "Reject", icon: "x", danger: true },
+    ],
+    action: "Open Quotes",
+  },
+];
+
+// Customer dossier behind the leaderboard name — context glance, the row's
+// job is reading, not working the record.
+function KhachPeek({ kh }: { kh: (typeof KHACH_DAN_DAU)[number] }) {
+  return (
+    <View style={{ gap: 10 }}>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+        <Avatar name={kh.ten} size={32} />
+        <View style={{ gap: 1, flex: 1 }}>
+          <Text size="sm" weight="semibold">{kh.ten}</Text>
+          <Text size="xs" color="muted">{kh.nganh}</Text>
+        </View>
+      </View>
+      <Divider />
+      {([
+        ["6-month revenue", formatMoney(kh.doanhThu)],
+        ["Margin", `${kh.bienLai}%`],
+      ] as const).map(([label, value]) => (
+        <View key={label} style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+          <Text size="sm" color="muted" style={{ flex: 1 }}>{label}</Text>
+          <Text size="sm" tabular>{value}</Text>
+        </View>
+      ))}
+      <Divider />
+      <Button title="Open customer" color="secondary" onPress={() => {}} />
+    </View>
+  );
+}
+
+function LegendRow({ stage, total }: { stage: (typeof PHEU)[number]; total: number }) {
+  const pct = Math.round((stage.count / total) * 100);
+  return (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+      <View style={{ width: 8, height: 8, borderRadius: 999, backgroundColor: stage.color }} />
+      <Text size="sm" style={{ flex: 1 }}>{stage.label}</Text>
+      <Text size="sm" weight="medium" tabular>{stage.count}</Text>
+      <Text size="xs" color="muted" tabular style={{ width: 36 }} align="right">
+        {pct}%
+      </Text>
+    </View>
+  );
+}
+
+export function TplDashboard() {
+  const tongPheu = PHEU.reduce((sum, s) => sum + s.count, 0);
+  const [openAlert, setOpenAlert] = useState<string | null>(null);
+  // A pressed record opens its own drawer, sequenced within the alert's list.
+  const [openRec, setOpenRec] = useState<{ alertKey: string; idx: number } | null>(null);
+  const recAlert = openRec ? CAN_CHU_Y.find((a) => a.key === openRec.alertKey) ?? null : null;
+  const rec = recAlert ? recAlert.records[openRec!.idx] : null;
+  const [period, setPeriod] = useState<DateFilterValue>(() => thangRange(2026, 5));
+
+  const key = thangKey(period);
+  const ky = (key ? KY_DU_LIEU[key] : undefined) ?? KY_DU_LIEU[KY_CUOI];
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+      <View style={{ width: "100%", maxWidth: 960, alignSelf: "center", gap: 16 }}>
+        {/* header band — the period filter lives here: presets + custom
+            range in the popover (and time, via includeTime, where a
+            screen needs it) */}
+        <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12 }}>
+          <View style={{ gap: 2, flex: 1 }}>
+            <Text size="xl" weight="semibold">Executive dashboard</Text>
+            <Text size="sm" color="muted">Revenue, the sales pipeline and what needs handling — refreshed every morning</Text>
+          </View>
+          <DateRangeFilterField value={period} onValueChange={setPeriod} locale="en-GB" labels={NHAN_BO_LOC} />
+        </View>
+
+        {/* KPI strip follows the selected period; Receivables/Orders drill into the alerts below */}
+        <KPIStrip
+          items={[
+            { label: "Revenue", value: ky.doanhThu, format: "currency", compact: true, trend: ky.doanhThuTrend, caption: ky.doanhThuCaption },
+            { label: "Margin", value: ky.bienLai, format: "percentage", trend: ky.bienLaiTrend, caption: ky.bienLaiCaption },
+            { label: "Orders in progress", value: ky.donDangXuLy, caption: ky.donCaption, info: "Orders past intake and not yet settled. Overdue ones are listed under Needs attention below." },
+            { label: "Receivables", value: ky.congNo, format: "currency", compact: true, tone: "warning", caption: ky.congNoCaption, info: "Unpaid invoices at the end of the period. The overdue list sits under Needs attention below." },
+          ]}
+        />
+
+        {/* chart row 1: revenue by month (BarChart + TrendFooter) · margin trend (LineChart) */}
+        <View style={{ flexDirection: "row", gap: 16, alignItems: "stretch" }}>
+          <Card style={{ padding: 0, flex: 3 }}>
+            <CardHeader>
+              <CardHeaderTitle info="Revenue recognized by invoice date, before discounts">
+                Revenue by month
+              </CardHeaderTitle>
+              <CardHeaderMeta>Unit: ₫ million</CardHeaderMeta>
+            </CardHeader>
+            <View style={{ paddingHorizontal: 20, paddingVertical: 16, gap: 12 }}>
+              {/* the filtered month pops; the rest recede to context */}
+              <BarChart
+                data={DOANH_THU_THANG.map((m) => ({
+                  ...m,
+                  color: key === null || m.month === key ? solid("emerald") : tint("emerald", 0.4),
+                }))}
+                formatNumber={(n) => n.toLocaleString("en-GB")}
+              />
+              <TrendFooter value={11} periodLabel="vs last month" detail="May: ₫1.15B" />
+            </View>
+          </Card>
+
+          <Card style={{ padding: 0, flex: 2 }}>
+            <CardHeader>
+              <CardHeaderTitle info="Gross margin per month — revenue minus snapshotted cost of goods">
+                Margin trend
+              </CardHeaderTitle>
+              <CardHeaderMeta>%</CardHeaderMeta>
+            </CardHeader>
+            <View style={{ paddingHorizontal: 20, paddingVertical: 16, flex: 1, justifyContent: "center" }}>
+              <LineChart points={BIEN_LAI_THANG} height={150} lineColor={solid("blue")} formatNumber={(n) => `${n}%`} />
+            </View>
+          </Card>
+        </View>
+
+        {/* chart row 2: pipeline funnel · revenue mix · on-time delivery */}
+        <View style={{ flexDirection: "row", gap: 16, alignItems: "stretch" }}>
+          <Card style={{ padding: 0, flex: 3 }}>
+            <CardHeader>
+              <CardHeaderTitle info="Open opportunities at each stage, updated from Quotes">
+                Sales pipeline
+              </CardHeaderTitle>
+              <CardHeaderMeta>{`${tongPheu} opportunities`}</CardHeaderMeta>
+            </CardHeader>
+            <View style={{ paddingHorizontal: 20, paddingVertical: 16, gap: 14, flex: 1 }}>
+              <StackedProgressBar
+                segments={PHEU.map((s) => ({ key: s.key, value: s.count, color: s.color }))}
+                total={tongPheu}
+              />
+              <View style={{ gap: 10 }}>
+                {PHEU.map((s) => <LegendRow key={s.key} stage={s} total={tongPheu} />)}
+              </View>
+              <View style={{ flex: 1 }} />
+              <Text size="xs" color="muted">Quote-to-close rate: 32% — up on last quarter</Text>
+            </View>
+          </Card>
+
+          <Card style={{ padding: 0, flex: 3 }}>
+            <CardHeader>
+              <CardHeaderTitle info="Period revenue split by customer industry">
+                Revenue mix
+              </CardHeaderTitle>
+              <CardHeaderMeta>₫ million</CardHeaderMeta>
+            </CardHeader>
+            <View style={{ paddingHorizontal: 20, paddingVertical: 16, flex: 1, justifyContent: "center" }}>
+              <PieChart slices={CO_CAU} size={140} showLegend formatNumber={(n) => n.toLocaleString("en-GB")} />
+            </View>
+          </Card>
+
+          <Card style={{ padding: 0, flex: 2 }}>
+            <CardHeader>
+              <CardHeaderTitle info="Deliveries that arrived on or before the needed-by date this period">
+                On-time delivery
+              </CardHeaderTitle>
+            </CardHeader>
+            <View style={{ paddingHorizontal: 20, paddingVertical: 16, flex: 1, alignItems: "center", justifyContent: "center" }}>
+              <RingGauge value={87} label="On time" caption="33 of 38 deliveries" color={solid("emerald")} />
+            </View>
+          </Card>
+        </View>
+
+        {/* needs attention — each row expands in place to the records behind its count */}
+        <Card style={{ padding: 0 }}>
+          <CardHeader>
+            <CardHeaderTitle info="Backlog past its threshold, worst first — press a row to see the records behind the count">
+              Needs attention
+            </CardHeaderTitle>
+          </CardHeader>
+          <View style={{ paddingHorizontal: 20, paddingVertical: 6 }}>
+            {CAN_CHU_Y.map((a) => (
+              <Accordion
+                key={a.key}
+                expanded={openAlert === a.key}
+                onToggle={() => setOpenAlert(openAlert === a.key ? null : a.key)}
+              >
+                  <AccordionHeader accessibilityLabel={a.label}>
+                    <AccordionTitle icon={a.icon} iconColor={a.iconColor}>{a.label}</AccordionTitle>
+                    <AccordionMeta>{a.hint}</AccordionMeta>
+                    <Badge label={String(a.count)} color={a.tone === "warning" ? "amber" : "red"} />
+                  </AccordionHeader>
+                  <AccordionContent>
+                    {/* drill-down sub-rows: inset PressableRow so the wash spans
+                        the whole row incl. the ⋯; no dividers — the rounded
+                        hover separates them. Press = workspace, ⋯ = quick ops. */}
+                    {a.records.map((r, j) => (
+                        <PressableRow
+                          key={r.id}
+                          variant="inset"
+                          onPress={() => setOpenRec({ alertKey: a.key, idx: j })}
+                          selected={openRec?.alertKey === a.key && openRec?.idx === j}
+                          style={{ gap: 8, minHeight: 40 }}
+                        >
+                          <Pressable
+                            accessibilityRole="button"
+                            accessibilityLabel={`Open ${r.id}`}
+                            onPress={() => setOpenRec({ alertKey: a.key, idx: j })}
+                            style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 16 }}
+                          >
+                            <Text size="sm" weight="medium" tabular style={{ width: 124 }}>{r.id}</Text>
+                            <Text size="sm" numberOfLines={1} style={{ flex: 1 }}>{r.name}</Text>
+                            <Text size="sm" tabular>{r.value}</Text>
+                            <Text size="xs" color={r.noteTone} tabular style={{ width: 88 }} align="right">{r.note}</Text>
+                          </Pressable>
+                          <ActionMenu
+                            accessibilityLabel={`Actions for ${r.id}`}
+                            items={a.rowActions.map((act) => ({ ...act, onPress: () => {} }))}
+                          />
+                        </PressableRow>
+                    ))}
+                    <View style={{ paddingTop: 8, paddingBottom: 2, flexDirection: "row", alignItems: "center", gap: 12 }}>
+                      <Text size="xs" color="muted" style={{ flex: 1 }}>
+                        {a.count > a.records.length
+                          ? `Showing ${a.records.length} of ${a.count} — open the list to see all`
+                          : "Full list"}
+                      </Text>
+                      <Button title={a.action} color="secondary" onPress={() => {}} />
+                    </View>
+                  </AccordionContent>
+              </Accordion>
+            ))}
+          </View>
+        </Card>
+
+        {/* top customers */}
+        <Card style={{ padding: 0 }}>
+          <CardHeader>
+            <CardHeaderTitle info="Top customers by trailing 6-month revenue, with each customer's margin">
+              Top customers
+            </CardHeaderTitle>
+            <CardHeaderMeta>Trailing 6-month revenue</CardHeaderMeta>
+          </CardHeader>
+          {KHACH_DAN_DAU.map((kh, i) => (
+            <View key={kh.ten}>
+              {i > 0 ? <Divider /> : null}
+              <View style={{ paddingHorizontal: 20, paddingVertical: 12, flexDirection: "row", alignItems: "center", gap: 12 }}>
+                <Avatar name={kh.ten} size={32} />
+                <View style={{ flex: 1, gap: 0, alignItems: "flex-start" }}>
+                  <Peek accessibilityLabel={`Customer profile for ${kh.ten}`} content={<KhachPeek kh={kh} />}>
+                    <Text size="sm" weight="medium" numberOfLines={1}>{kh.ten}</Text>
+                  </Peek>
+                  <Text size="xs" color="muted" numberOfLines={1}>{kh.nganh}</Text>
+                </View>
+                <Sparkline data={kh.trend} width={84} height={24} color={kh.trend[5] >= kh.trend[0] ? solid("emerald") : solid("red")} />
+                <Text size="sm" weight="medium" tabular>{formatMoney(kh.doanhThu)}</Text>
+                {/* margin is a METRIC, not a status — the dot variant signals
+                    its quality (healthy ≥15% vs thin) without a heavy chip */}
+                <View style={{ width: 104, alignItems: "flex-end" }}>
+                  <Badge variant="dot" label={`${kh.bienLai}% margin`} color={kh.bienLai >= 15 ? "emerald" : "amber"} />
+                </View>
+              </View>
+            </View>
+          ))}
+        </Card>
+      </View>
+
+      {recAlert && rec && openRec ? (
+        <Drawer
+          open
+          onOpenChange={(open) => !open && setOpenRec(null)}
+          title={rec.id}
+          width={440}
+          onPrev={openRec.idx > 0 ? () => setOpenRec({ alertKey: openRec.alertKey, idx: openRec.idx - 1 }) : undefined}
+          onNext={openRec.idx < recAlert.records.length - 1 ? () => setOpenRec({ alertKey: openRec.alertKey, idx: openRec.idx + 1 }) : undefined}
+          position={`${openRec.idx + 1}/${recAlert.records.length}`}
+        >
+          <View key={rec.id} style={{ flex: 1, padding: 24, gap: 12 }}>
+            <Badge label={recAlert.label} color={recAlert.tone === "warning" ? "amber" : "red"} />
+            <View style={{ gap: 10, paddingTop: 4 }}>
+              <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+                <Text size="sm" color="muted" style={{ flex: 1 }}>Customer</Text>
+                <Text size="sm" weight="medium">{rec.name}</Text>
+              </View>
+              <Divider />
+              <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+                <Text size="sm" color="muted" style={{ flex: 1 }}>Amount / due</Text>
+                <Text size="sm" tabular>{rec.value}</Text>
+              </View>
+              <Divider />
+              <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+                <Text size="sm" color="muted" style={{ flex: 1 }}>Status</Text>
+                <Text size="sm" color={rec.noteTone} tabular>{rec.note}</Text>
+              </View>
+            </View>
+          </View>
+          <View
+            style={{
+              borderTopWidth: 1,
+              borderTopColor: colors.border,
+              paddingHorizontal: 20,
+              paddingVertical: 14,
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "flex-end",
+              gap: 12,
+            }}
+          >
+            <Button title={recAlert.rowActions[0]?.label ?? "Remind"} color="secondary" onPress={() => {}} />
+            <Button title="Open record" color="primary" onPress={() => {}} />
+          </View>
+        </Drawer>
+      ) : null}
+    </ScrollView>
+  );
+}