@lotics/ui 3.6.0 → 4.1.0

package/examples/tpl_billing.tsx

@@ -0,0 +1,344 @@
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors } from "@lotics/ui/colors";
+import { Button } from "@lotics/ui/button";
+import { Card, CardBody, CardHeader, CardHeaderMeta, CardHeaderTitle } from "@lotics/ui/card";
+import { Badge } from "@lotics/ui/badge";
+import { Link } from "@lotics/ui/link";
+import { Icon } from "@lotics/ui/icon";
+import { Divider } from "@lotics/ui/divider";
+import { NumberInput } from "@lotics/ui/number_input";
+import { Picker } from "@lotics/ui/picker";
+import type { PickerOption } from "@lotics/ui/picker";
+import { Callout, CalloutText } from "@lotics/ui/callout";
+import { Dialog, DialogFooter, DialogHeader, DialogHeaderTitle } from "@lotics/ui/dialog";
+import { Alert } from "@lotics/ui/alert";
+import { formatMoney } from "@lotics/ui/format_money";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Billing & invoicing — the charges→invoice→collect flow as ONE
+// banded card, not a stack of disconnected cards. It's a single document, so it
+// reads as one: the bill-to, each invoice, the collect total, and the deposit
+// are BANDS separated by hairline Dividers. The INVOICE DOCUMENT is the unit —
+// each band is anchored by its own title + status badge and owns its editable
+// charge lines (amount + how it's paid), its live total, and its issue action,
+// so a charge never lives apart from the document it bills on. Issuing a real
+// e-invoice is irreversible and needs a bill-to tax ID, so it's gated inline
+// (never a dead end) and confirmed in a Dialog. A refundable DEPOSIT is its own
+// (tinted) band — collected separately, never folded into the total due.
+// ─────────────────────────────────────────────────────────────────────────────
+
+type Method = "cash" | "transfer" | "card";
+const METHODS: PickerOption<Method>[] = [
+  { value: "cash", label: "Cash" },
+  { value: "transfer", label: "Bank transfer" },
+  { value: "card", label: "Card" },
+];
+
+interface Charge {
+  key: string;
+  label: string;
+  /** The expected list price — offered as a one-tap fill while the line is unset. */
+  standard: number;
+  amount: number;
+  method: Method | "";
+}
+
+interface Invoice {
+  key: string;
+  title: string;
+  charges: Charge[];
+  /** Lookup code once issued to the e-invoice provider; "" = not issued. */
+  ref: string;
+}
+
+const INITIAL: Invoice[] = [
+  {
+    key: "service",
+    title: "Service",
+    ref: "",
+    charges: [
+      { key: "labor", label: "Labor", standard: 1_200_000, amount: 1_200_000, method: "cash" },
+      { key: "parts", label: "Parts", standard: 0, amount: 0, method: "" },
+    ],
+  },
+  {
+    key: "inspection",
+    title: "Inspection",
+    ref: "",
+    charges: [{ key: "insp", label: "Inspection fee", standard: 150_000, amount: 150_000, method: "" }],
+  },
+  {
+    key: "disposal",
+    title: "Disposal",
+    ref: "INV-2026-0414",
+    charges: [{ key: "disp", label: "Disposal fee", standard: 80_000, amount: 80_000, method: "transfer" }],
+  },
+];
+
+type Status = "none" | "draft" | "issued";
+const invoiceTotal = (inv: Invoice) => inv.charges.reduce((s, c) => s + c.amount, 0);
+const invoiceStatus = (inv: Invoice): Status => (inv.ref ? "issued" : invoiceTotal(inv) > 0 ? "draft" : "none");
+const missingMethods = (inv: Invoice) => inv.charges.filter((c) => c.amount > 0 && !c.method);
+
+/** One charge: label, an amount that reads blank until entered (a one-tap
+ *  Standard fill + "Set 0" while unset), and the payment method — which turns
+ *  required the moment the line carries an amount. */
+function ChargeLine({
+  charge, onAmount, onMethod, disabled,
+}: {
+  charge: Charge;
+  onAmount: (v: number) => void;
+  onMethod: (m: Method) => void;
+  disabled: boolean;
+}) {
+  const unset = charge.amount <= 0;
+  const needsMethod = charge.amount > 0 && !charge.method;
+  return (
+    <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 10, flexWrap: "wrap" }}>
+      <Text size="sm" color="muted" style={{ width: 116, paddingTop: 10 }}>{charge.label}</Text>
+      <View style={{ flexGrow: 1, flexBasis: 130, gap: 4 }}>
+        <NumberInput
+          value={unset ? null : charge.amount}
+          onValueChange={(v) => onAmount(v ?? 0)}
+          min={0}
+          disabled={disabled}
+          accessibilityLabel={`${charge.label} amount`}
+        />
+        {unset && !disabled ? (
+          <View style={{ flexDirection: "row", gap: 8, flexWrap: "wrap" }}>
+            {charge.standard > 0 ? (
+              <Button title={`Standard ${formatMoney(charge.standard)}`} color="secondary" onPress={() => onAmount(charge.standard)} />
+            ) : null}
+            <Button title="Set 0" color="secondary" onPress={() => onAmount(0)} />
+          </View>
+        ) : null}
+      </View>
+      <View style={{ flexBasis: 168, gap: 4 }}>
+        <Picker
+          options={METHODS}
+          value={charge.method || null}
+          onValueChange={onMethod}
+          placeholder="How paid…"
+          disabled={disabled || unset}
+          accessibilityLabel={`Payment method · ${charge.label}`}
+        />
+        {needsMethod ? <Text size="xs" color="danger">Choose a method</Text> : null}
+      </View>
+    </View>
+  );
+}
+
+/** One invoice document, rendered as a BAND inside the single billing card: a
+ *  title + status header, its charge lines, and a total + issue row. The leading
+ *  Divider sets it off from the band above without a second card. */
+function InvoiceBand({
+  inv, taxId, onAmount, onMethod, onIssue,
+}: {
+  inv: Invoice;
+  taxId: string;
+  onAmount: (chKey: string, v: number) => void;
+  onMethod: (chKey: string, m: Method) => void;
+  onIssue: (inv: Invoice) => void;
+}) {
+  const total = invoiceTotal(inv);
+  const status = invoiceStatus(inv);
+  const missing = missingMethods(inv);
+  const canIssue = total > 0 && missing.length === 0 && !!taxId;
+  const blockReason = !taxId ? "Add the customer's tax ID to issue." : missing.length ? "Choose a payment method for every charged line." : "";
+  return (
+    <>
+      <Divider />
+      <CardBody style={{ gap: 10 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          <Text weight="semibold">{inv.title}</Text>
+          <View style={{ flex: 1 }} />
+          {status === "issued" ? (
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+              <Badge variant="dot" label="Issued" color="emerald" />
+              <Link size="xs" onPress={() => {}} accessibilityLabel={`Open invoice ${inv.ref}`}>{inv.ref}</Link>
+            </View>
+          ) : status === "draft" ? (
+            <Badge variant="dot" label="Draft" color="amber" />
+          ) : (
+            <Badge variant="dot" label="Nothing to bill" color="zinc" />
+          )}
+        </View>
+        {inv.charges.map((c) => (
+          <ChargeLine
+            key={c.key}
+            charge={c}
+            disabled={status === "issued"}
+            onAmount={(v) => onAmount(c.key, v)}
+            onMethod={(m) => onMethod(c.key, m)}
+          />
+        ))}
+        {total > 0 ? (
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap", paddingTop: 2 }}>
+            <Text size="sm" color="muted" style={{ flex: 1 }}>
+              Total <Text weight="semibold" color="default" tabular>{formatMoney(total)}</Text>
+            </Text>
+            {status === "issued" ? (
+              <>
+                <Button title="Re-issue" color="secondary" disabled={!canIssue} onPress={() => onIssue(inv)} />
+              </>
+            ) : (
+              <Button title="Issue invoice" color="primary" disabled={!canIssue} onPress={() => onIssue(inv)} />
+            )}
+          </View>
+        ) : null}
+        {total > 0 && status !== "issued" && !canIssue ? <Text size="xs" color="muted">{blockReason}</Text> : null}
+      </CardBody>
+    </>
+  );
+}
+
+export function TplBilling() {
+  const [invoices, setInvoices] = useState<Invoice[]>(INITIAL);
+  // The bill-to: issuing an e-invoice needs a tax ID. Toggle it to see the gate.
+  const [taxId, setTaxId] = useState("0312456780");
+  const [deposit, setDeposit] = useState(0);
+  const [confirm, setConfirm] = useState<Invoice | null>(null);
+  const seq = useState(() => ({ n: 414 }))[0];
+
+  const patchCharge = (invKey: string, chKey: string, patch: Partial<Charge>) =>
+    setInvoices((prev) =>
+      prev.map((inv) =>
+        inv.key !== invKey ? inv : { ...inv, charges: inv.charges.map((c) => (c.key === chKey ? { ...c, ...patch } : c)) },
+      ),
+    );
+
+  const grandTotal = invoices.reduce((s, inv) => s + invoiceTotal(inv), 0);
+  const allMissing = invoices.flatMap(missingMethods);
+  const issuedCount = invoices.filter((i) => invoiceStatus(i) === "issued").length;
+
+  const issue = (inv: Invoice) => {
+    seq.n += 1;
+    const ref = `INV-2026-${String(seq.n).padStart(4, "0")}`;
+    setInvoices((prev) => prev.map((x) => (x.key === inv.key ? { ...x, ref } : x)));
+    setConfirm(null);
+  };
+
+  const printReceipt = () => {
+    if (allMissing.length > 0) {
+      Alert.alert(
+        "Missing payment method",
+        `Choose how these charges were paid before printing the receipt:\n\n${allMissing.map((c) => `• ${c.label} (${formatMoney(c.amount)})`).join("\n")}`,
+        [{ text: "OK" }],
+      );
+      return;
+    }
+    Alert.alert("Receipt", `Printing receipt for ${formatMoney(grandTotal)}.`, [{ text: "OK" }]);
+  };
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+      <View style={{ width: "100%", maxWidth: 640, alignSelf: "center", gap: 16 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+          <Text size="xl" weight="semibold">Billing</Text>
+          <Badge label="Order #4821" color="zinc" />
+        </View>
+
+        {/* ONE banded card — bill-to · each invoice · collect · deposit */}
+        <Card style={{ padding: 0 }}>
+          <CardHeader>
+            <CardHeaderTitle info="One document: the bill-to, each invoice, the total, and the deposit are bands of the same card.">
+              Phí &amp; hóa đơn
+            </CardHeaderTitle>
+            <CardHeaderMeta>{formatMoney(grandTotal)}</CardHeaderMeta>
+          </CardHeader>
+
+          {/* bill-to band — issuing needs a tax ID; the toggle shows the gate */}
+          <CardBody>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
+              <Icon name="building-2" size={16} color={colors.zinc[500]} />
+              <Text weight="medium">Harbor Freight Lines</Text>
+              <Text size="sm" color="muted">·</Text>
+              {taxId ? (
+                <Text size="sm" color="muted" tabular>MST {taxId}</Text>
+              ) : (
+                <Text size="sm" color="danger">No tax ID — required to issue</Text>
+              )}
+              <View style={{ flex: 1 }} />
+              <Button title={taxId ? "Remove tax ID" : "Add tax ID"} color="muted" onPress={() => setTaxId((t) => (t ? "" : "0312456780"))} />
+            </View>
+          </CardBody>
+
+          {/* invoice bands */}
+          {invoices.map((inv) => (
+            <InvoiceBand
+              key={inv.key}
+              inv={inv}
+              taxId={taxId}
+              onAmount={(chKey, v) => patchCharge(inv.key, chKey, { amount: v })}
+              onMethod={(chKey, m) => patchCharge(inv.key, chKey, { method: m })}
+              onIssue={setConfirm}
+            />
+          ))}
+
+          {/* collect band */}
+          <Divider />
+          <CardBody style={{ gap: 10 }}>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+              <Text weight="semibold" style={{ flex: 1 }}>Tổng thu</Text>
+              <Text weight="semibold" size="lg" tabular>{formatMoney(grandTotal)}</Text>
+            </View>
+            {allMissing.length > 0 ? (
+              <Callout tone="warning">
+                <CalloutText>
+                  {allMissing.length} charged {allMissing.length === 1 ? "line has" : "lines have"} no payment method — set them before printing the receipt.
+                </CalloutText>
+              </Callout>
+            ) : null}
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+              <Text size="xs" color="muted" style={{ flex: 1 }}>{issuedCount} of {invoices.length} issued</Text>
+              <Button title="Print receipt" color="primary" disabled={grandTotal <= 0} onPress={printReceipt} />
+            </View>
+          </CardBody>
+
+          {/* deposit band — tinted + labelled separate, never part of the total */}
+          <Divider />
+          <CardBody style={{ backgroundColor: colors.zinc[50], gap: 8 }}>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+              <Text weight="semibold">Deposit</Text>
+              <Badge label="Collected separately" color="zinc" />
+            </View>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
+              <Text size="sm" color="muted" style={{ width: 116 }}>Refundable</Text>
+              <View style={{ flexGrow: 1, flexBasis: 130 }}>
+                <NumberInput value={deposit || null} onValueChange={(v) => setDeposit(v ?? 0)} min={0} accessibilityLabel="Deposit amount" />
+              </View>
+              <Button
+                title="Deposit receipt"
+                color="secondary"
+                disabled={deposit <= 0}
+                onPress={() => Alert.alert("Deposit receipt", `Printing deposit receipt for ${formatMoney(deposit)}.`, [{ text: "OK" }])}
+              />
+            </View>
+          </CardBody>
+        </Card>
+      </View>
+
+      {/* issuing an e-invoice is irreversible — confirm in a Dialog (stage gate) */}
+      <Dialog width={460} open={confirm !== null} onOpenChange={(o) => { if (!o) setConfirm(null); }}>
+        <DialogHeader>
+          <DialogHeaderTitle>{confirm?.ref ? "Re-issue invoice?" : "Issue e-invoice?"}</DialogHeaderTitle>
+        </DialogHeader>
+        <View style={{ paddingHorizontal: 24, paddingVertical: 12 }}>
+          <Callout tone="warning">
+            <CalloutText>
+              {confirm
+                ? `Issue a real e-invoice for "${confirm.title}" (${formatMoney(invoiceTotal(confirm))}) to the provider. This writes a lookup code to the record and can't be undone.`
+                : ""}
+            </CalloutText>
+          </Callout>
+        </View>
+        <DialogFooter>
+          <Button title="Cancel" color="secondary" onPress={() => setConfirm(null)} />
+          <Button title="Issue" color="primary" onPress={() => confirm && issue(confirm)} />
+        </DialogFooter>
+      </Dialog>
+    </ScrollView>
+  );
+}

package/examples/tpl_calendar.tsx

@@ -0,0 +1,288 @@
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors, solid, type ColorName } from "@lotics/ui/colors";
+import { ActionMenu } from "@lotics/ui/action_menu";
+import { Badge } from "@lotics/ui/badge";
+import { Button } from "@lotics/ui/button";
+import { Card, CardHeader, CardHeaderTitle, CardHeaderMeta } from "@lotics/ui/card";
+import { Divider } from "@lotics/ui/divider";
+import { Drawer } from "@lotics/ui/drawer";
+import { ListItem } from "@lotics/ui/list_item";
+import {
+  CalendarView,
+  addDays,
+  isSameDay,
+  startOfWeek,
+  viewTitle,
+  type CalendarEvent,
+} from "@lotics/ui/calendar";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Calendar & planning — the delivery/schedule desk. One real
+// CalendarView (week grid) over the current week's deliveries / reconciliations /
+// customer visits, then a "Today" agenda card listing today's three slots.
+//
+// Grammar: zinc-50 canvas · header band (title + week label + Today) ·
+// calendar card at a real height · agenda card of pressable rows. Every slot
+// is a door: press (grid event or agenda row) opens the sequenced workspace
+// Drawer; agenda rows also carry the ⋯ quick-actions menu. Event colors carry
+// meaning: blue = delivery, emerald = reconciliation, amber = customer.
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface AgendaMeta {
+  diaDiem: string;
+  trangThai: string;
+  mau: ColorName;
+}
+
+// Mock data anchored to the real current week so the page is evergreen.
+const NOW = new Date();
+const TODAY = addDays(NOW, 0); // start of today
+const WEEK_START = startOfWeek(TODAY, 1);
+const TODAY_IDX = Math.round((TODAY.getTime() - WEEK_START.getTime()) / 86_400_000);
+// Four weekday slots for the rest of the week — never colliding with today,
+// so the agenda below always shows exactly today's three slots.
+const SLOTS = [0, 1, 2, 3, 4, 5].filter((d) => d !== TODAY_IDX).slice(0, 4);
+
+function evt(
+  id: string,
+  day: Date,
+  h: number,
+  m: number,
+  durMin: number,
+  title: string,
+  color: string,
+  data: AgendaMeta,
+): CalendarEvent<AgendaMeta> {
+  const start = new Date(day.getFullYear(), day.getMonth(), day.getDate(), h, m);
+  return { id, title, start, end: new Date(start.getTime() + durMin * 60_000), color, data };
+}
+
+const EVENTS: CalendarEvent<AgendaMeta>[] = [
+  // Today — the dispatch desk's three slots.
+  evt("hn-1", TODAY, 8, 0, 90, "Deliver APEX PLASTICS — VTD063518", solid("blue"), {
+    diaDiem: "Eastport industrial zone",
+    trangThai: "Truck loaded",
+    mau: "blue",
+  }),
+  evt("hn-2", TODAY, 10, 30, 60, "Reconcile delivery notes — HANDAN", solid("emerald"), {
+    diaDiem: "Head office",
+    trangThai: "Prepared",
+    mau: "emerald",
+  }),
+  evt("hn-3", TODAY, 15, 0, 60, "Customer sample review — VITTORIA", solid("amber"), {
+    diaDiem: "Factory sample room",
+    trangThai: "Awaiting confirmation",
+    mau: "amber",
+  }),
+  // The rest of the week.
+  evt("t-1", addDays(WEEK_START, SLOTS[0]), 8, 0, 90, "Deliver KOMASPEC — blanks 675×325", solid("blue"), {
+    diaDiem: "Northgate industrial park",
+    trangThai: "Truck loaded",
+    mau: "blue",
+  }),
+  evt("t-2", addDays(WEEK_START, SLOTS[1]), 14, 0, 60, "Reconcile delivery notes — NEWTECONS", solid("emerald"), {
+    diaDiem: "Head office",
+    trangThai: "Prepared",
+    mau: "emerald",
+  }),
+  evt("t-3", addDays(WEEK_START, SLOTS[2]), 10, 0, 60, "Kick off the VITTORIA order", solid("amber"), {
+    diaDiem: "Online meeting",
+    trangThai: "Awaiting confirmation",
+    mau: "amber",
+  }),
+  evt("t-4", addDays(WEEK_START, SLOTS[3]), 8, 30, 90, "Deliver BRIGHTCELL BATTERIES — TS1250", solid("blue"), {
+    diaDiem: "Brightcell plant, Eastport",
+    trangThai: "Truck loaded",
+    mau: "blue",
+  }),
+  // All-week banner: an internal task spanning two mid-week days.
+  {
+    id: "kk-1",
+    title: "Q2 stock count",
+    start: addDays(WEEK_START, 2),
+    end: addDays(WEEK_START, 4),
+    allDay: true,
+    color: colors.zinc[500],
+  },
+];
+
+const CAL_LABELS = {
+  today: "Today",
+  month: "Month",
+  week: "Week",
+  day: "Day",
+  previous: "Previous",
+  next: "Next",
+  allDay: "all day",
+  more: (n: number) => `+${n} more`,
+};
+
+const p2 = (n: number) => String(n).padStart(2, "0");
+const fmtTime = (d: Date) => `${p2(d.getHours())}:${p2(d.getMinutes())}`;
+const fmtDate = (d: Date) => `${p2(d.getDate())}/${p2(d.getMonth() + 1)}`;
+
+// The drawer sequences over the week's timed slots in chronological order —
+// the dispatcher's triage rhythm: open one, ◀ ▶ / ←→ through the rest. The
+// all-day banner opens the same drawer but sits outside the sequence.
+const SEQUENCE = EVENTS.filter((e) => !e.allDay).sort(
+  (a, b) => a.start.getTime() - b.start.getTime(),
+);
+
+// Quick operations for a schedule slot — the ⋯ door on each agenda row
+// (press = workspace drawer; ⋯ = these). Destructive last.
+const SLOT_ACTIONS = [
+  { key: "sua", label: "Edit slot", icon: "pencil" as const, onPress: () => {} },
+  { key: "nhac", label: "Remind owner", icon: "bell" as const, onPress: () => {} },
+  { key: "huy", label: "Cancel slot", icon: "trash" as const, danger: true, onPress: () => {} },
+];
+
+// Compact slot workspace — identity + key facts + the two real actions.
+function SlotWorkspace({ e }: { e: CalendarEvent<AgendaMeta> }) {
+  const thoiGian = e.allDay
+    ? `${fmtDate(e.start)} – ${e.end ? fmtDate(e.end) : ""} · all day`
+    : `${fmtDate(e.start)} · ${fmtTime(e.start)} – ${e.end ? fmtTime(e.end) : ""}`;
+  const rows: [string, React.ReactNode][] = [
+    ["Time", <Text key="tg" size="sm" tabular>{thoiGian}</Text>],
+    ...(e.data
+      ? ([
+          ["Location", <Text key="dd" size="sm">{e.data.diaDiem}</Text>],
+          ["Status", <Badge key="tt" label={e.data.trangThai} color={e.data.mau} />],
+        ] as [string, React.ReactNode][])
+      : []),
+  ];
+  return (
+    <>
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 24, gap: 10 }}>
+        {rows.map(([label, value], i) => (
+          <View key={label} style={{ gap: 10 }}>
+            {i > 0 ? <Divider /> : null}
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 24 }}>
+              <Text size="sm" color="muted" style={{ width: 104 }}>{label}</Text>
+              {value}
+            </View>
+          </View>
+        ))}
+      </ScrollView>
+      <View
+        style={{
+          borderTopWidth: 1,
+          borderTopColor: colors.border,
+          paddingHorizontal: 20,
+          paddingVertical: 14,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          gap: 12,
+        }}
+      >
+        <Button title="Edit slot" color="secondary" onPress={() => {}} />
+        <Button title="Open record" color="primary" onPress={() => {}} />
+      </View>
+    </>
+  );
+}
+
+export function TplCalendar() {
+  // "Today" remounts the calendar — CalendarView owns date+view internally,
+  // so a fresh mount is the supported way to jump back to the current week.
+  const [calKey, setCalKey] = useState(0);
+  const [openId, setOpenId] = useState<string | null>(null);
+
+  const openEvent = EVENTS.find((e) => e.id === openId) ?? null;
+  const seqIndex = openEvent ? SEQUENCE.findIndex((e) => e.id === openEvent.id) : -1;
+
+  const todayEvents = EVENTS.filter((e) => !e.allDay && isSameDay(e.start, TODAY)).sort(
+    (a, b) => a.start.getTime() - b.start.getTime(),
+  );
+  const todayLabel = new Intl.DateTimeFormat("vi", {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+  }).format(TODAY);
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+        <View style={{ width: "100%", maxWidth: 1040, 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">Calendar & planning</Text>
+            <Text size="sm" color="muted">This week — deliveries, reconciliations and customer visits</Text>
+          </View>
+          <Text size="sm" color="muted" tabular>
+            {viewTitle("week", TODAY, 1, "vi")}
+          </Text>
+          <Button title="Today" color="secondary" onPress={() => setCalKey((k) => k + 1)} />
+        </View>
+
+        {/* the calendar — real week grid, internal toolbar + scroll */}
+        <Card style={{ padding: 0, height: 520, overflow: "hidden" }}>
+          <CalendarView<AgendaMeta>
+            key={calKey}
+            events={EVENTS}
+            defaultView="week"
+            defaultDate={TODAY}
+            weekStartsOn={1}
+            locale="vi"
+            labels={CAL_LABELS}
+            onEventPress={(e) => setOpenId(e.id)}
+          />
+        </Card>
+
+        {/* today — agenda */}
+        <Card style={{ padding: 0 }}>
+          <CardHeader>
+            <CardHeaderTitle>Today</CardHeaderTitle>
+            <CardHeaderMeta>{`${todayLabel} · ${todayEvents.length} slots`}</CardHeaderMeta>
+          </CardHeader>
+          <View style={{ paddingHorizontal: 16, paddingVertical: 6 }}>
+            {todayEvents.map((e) => (
+              <ListItem
+                key={e.id}
+                left={
+                  <Text size="sm" weight="medium" tabular style={{ width: 104 }}>
+                    {fmtTime(e.start)} – {e.end ? fmtTime(e.end) : ""}
+                  </Text>
+                }
+                title={e.title}
+                description={e.data?.diaDiem}
+                selected={e.id === openId}
+                onPress={() => setOpenId(e.id)}
+                right={
+                  <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+                    {e.data ? <Badge label={e.data.trangThai} color={e.data.mau} /> : null}
+                    <ActionMenu items={SLOT_ACTIONS} accessibilityLabel={`Actions for ${e.title}`} />
+                  </View>
+                }
+              />
+            ))}
+          </View>
+        </Card>
+        </View>
+      </ScrollView>
+
+      {/* the shared slot workspace — body keyed by event id; ◀ ▶ / ←→ step
+          through the week's timed slots in start-time order */}
+      {openEvent ? (
+        <Drawer
+          open
+          onOpenChange={(o) => !o && setOpenId(null)}
+          title={openEvent.title}
+          width={480}
+          onPrev={seqIndex > 0 ? () => setOpenId(SEQUENCE[seqIndex - 1].id) : undefined}
+          onNext={
+            seqIndex >= 0 && seqIndex < SEQUENCE.length - 1
+              ? () => setOpenId(SEQUENCE[seqIndex + 1].id)
+              : undefined
+          }
+          position={seqIndex >= 0 ? `${seqIndex + 1}/${SEQUENCE.length}` : undefined}
+        >
+          <SlotWorkspace key={openEvent.id} e={openEvent} />
+        </Drawer>
+      ) : null}
+    </View>
+  );
+}