@lotics/ui 3.6.0 → 4.1.0

package/examples/tpl_run.tsx

@@ -0,0 +1,235 @@
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors, type ColorName } from "@lotics/ui/colors";
+import { Badge } from "@lotics/ui/badge";
+import { Button } from "@lotics/ui/button";
+import { Card, CardFooter } from "@lotics/ui/card";
+import { ChipGroup } from "@lotics/ui/chip_group";
+import { CompletionState } from "@lotics/ui/completion_state";
+import { DetailRow } from "@lotics/ui/detail_row";
+import { Divider } from "@lotics/ui/divider";
+import { Drawer, DrawerFooter } from "@lotics/ui/drawer";
+import { KPIStrip } from "@lotics/ui/kpi_strip";
+import { Table, TableRow, TableCell, type TableColumn } from "@lotics/ui/table";
+import { formatMoney } from "@lotics/ui/format_money";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Run & post — stage a bulk operation, PREVIEW what it will do row by
+// row with a validation verdict, then commit the valid and HOLD the errors. Here:
+// a billing run (generate the period's invoices); the same shape serves a payroll
+// run, period-close postings, an MRP run, depreciation. Each row carries a status
+// — ready · needs review (posts, flagged) · blocked (held) — with the reason
+// inline; blockers are resolved in the drawer, which moves them back into the
+// postable set. The footer "Post" is GATED: you can never post a blocked line, and
+// the run can't apply more than it previews. CompletionState closes the run.
+// ─────────────────────────────────────────────────────────────────────────────
+
+type RunStatus = "ready" | "review" | "blocked";
+
+interface RunLine {
+  id: string;
+  customer: string;
+  ref: string;
+  amount: number;
+  status: RunStatus;
+  /** Why it's flagged / held — shown inline and in the drawer. */
+  issue?: string;
+}
+
+const STATUS: Record<RunStatus, { label: string; color: ColorName }> = {
+  ready: { label: "Ready", color: "emerald" },
+  review: { label: "Needs review", color: "amber" },
+  blocked: { label: "Blocked", color: "red" },
+};
+
+const LINES: RunLine[] = [
+  { id: "SO-4021", customer: "ATLAS COMPONENTS", ref: "Order SO-4021", amount: 31_414_670, status: "ready" },
+  { id: "SO-4024", customer: "Northwind Packaging", ref: "Order SO-4024", amount: 18_900_000, status: "ready" },
+  { id: "SO-4025", customer: "CRESTLINE FURNITURE", ref: "Order SO-4025", amount: 4_000_000, status: "review", issue: "PO number missing — invoice will post without it" },
+  { id: "SO-4027", customer: "King Lun Plastics", ref: "Order SO-4027", amount: 23_400_000, status: "ready" },
+  { id: "SO-4030", customer: "Vittoria Accessories", ref: "Order SO-4030", amount: 22_500_000, status: "review", issue: "Customer over credit limit by ₫8.4M" },
+  { id: "SO-4031", customer: "Harbor Industries", ref: "Order SO-4031", amount: 13_650_000, status: "blocked", issue: "Customer tax ID missing — cannot issue a tax invoice" },
+  { id: "SO-4033", customer: "Summit Logistics", ref: "Order SO-4033", amount: 9_180_000, status: "ready" },
+  { id: "SO-4035", customer: "Beacon Supplies", ref: "Order SO-4035", amount: 28_800_000, status: "blocked", issue: "Customer on credit hold — release the hold to invoice" },
+  { id: "SO-4036", customer: "Meridian Foods", ref: "Order SO-4036", amount: 16_320_000, status: "ready" },
+];
+
+const FILTERS: { value: string; label: string }[] = [
+  { value: "all", label: "All" },
+  { value: "ready", label: "Ready" },
+  { value: "review", label: "Needs review" },
+  { value: "blocked", label: "Blocked" },
+];
+
+const COLUMNS: TableColumn[] = [
+  { key: "customer", label: "Customer", flex: 1 },
+  { key: "amount", label: "Amount", width: 150, align: "right" },
+  { key: "status", label: "Verdict", width: 230 },
+];
+
+function RunRow({ line, status, onPress }: { line: RunLine; status: RunStatus; onPress: () => void }) {
+  const meta = STATUS[status];
+  return (
+    <TableRow onPress={onPress} accessibilityLabel={`Inspect ${line.customer}`}>
+      <TableCell>
+        <View style={{ gap: 0 }}>
+          <Text size="sm" weight="medium" numberOfLines={1}>{line.customer}</Text>
+          <Text size="xs" color="muted" tabular>{line.ref}</Text>
+        </View>
+      </TableCell>
+      <TableCell>
+        <Text size="sm" tabular>{formatMoney(line.amount)}</Text>
+      </TableCell>
+      <TableCell>
+        <View style={{ gap: 2 }}>
+          <Badge variant="dot" label={meta.label} color={meta.color} />
+          {status !== "ready" && line.issue ? (
+            <Text size="xs" color={status === "blocked" ? "danger" : "muted"} numberOfLines={1}>{line.issue}</Text>
+          ) : null}
+        </View>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function InspectLine({ line, status, onResolve }: { line: RunLine; status: RunStatus; onResolve: () => void }) {
+  const meta = STATUS[status];
+  return (
+    <>
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 24, gap: 16 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          <Badge variant="dot" label={meta.label} color={meta.color} />
+          <Text size="xs" color="muted" tabular style={{ flex: 1, textAlign: "right" }}>{line.ref}</Text>
+        </View>
+        <Text size="md" weight="medium">{line.customer}</Text>
+        <View style={{ gap: 6 }}>
+          <DetailRow label="Invoice total"><Text size="sm" weight="semibold" tabular>{formatMoney(line.amount)}</Text></DetailRow>
+          <Divider />
+          <DetailRow label="Source"><Text size="sm" tabular>{line.ref}</Text></DetailRow>
+        </View>
+        {status !== "ready" && line.issue ? (
+          <View style={{ gap: 4, padding: 14, borderRadius: 10, backgroundColor: status === "blocked" ? colors.red[50] : colors.amber[50] }}>
+            <Text size="xs" weight="semibold" color={status === "blocked" ? "danger" : "default"} transform="uppercase">
+              {status === "blocked" ? "Blocked" : "Needs review"}
+            </Text>
+            <Text size="sm">{line.issue}</Text>
+          </View>
+        ) : (
+          <Text size="sm" color="muted">No issues — this invoice will post in the run.</Text>
+        )}
+      </ScrollView>
+      <DrawerFooter>
+        {status === "blocked" ? (
+          <Button title="Resolve & include" color="primary" onPress={onResolve} />
+        ) : (
+          <Button title="Open order record" color="primary" onPress={() => {}} />
+        )}
+      </DrawerFooter>
+    </>
+  );
+}
+
+export function TplRun() {
+  const [resolved, setResolved] = useState<Set<string>>(new Set());
+  const [filter, setFilter] = useState("all");
+  const [openId, setOpenId] = useState<string | null>(null);
+  const [posted, setPosted] = useState(false);
+
+  // A resolved blocker re-enters the run as ready; a review still posts.
+  const statusOf = (l: RunLine): RunStatus => (resolved.has(l.id) && l.status === "blocked" ? "ready" : l.status);
+
+  const counts = { ready: 0, review: 0, blocked: 0 } as Record<RunStatus, number>;
+  LINES.forEach((l) => { counts[statusOf(l)] += 1; });
+
+  const postable = LINES.filter((l) => statusOf(l) !== "blocked");
+  const blocked = LINES.filter((l) => statusOf(l) === "blocked");
+  const postValue = postable.reduce((s, l) => s + l.amount, 0);
+
+  const visible = LINES.filter((l) => filter === "all" || statusOf(l) === filter);
+  const open = openId === null ? null : LINES.find((l) => l.id === openId) ?? null;
+
+  if (posted) {
+    return (
+      <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+        <View style={{ width: "100%", maxWidth: 1000, alignSelf: "center" }}>
+          <Card style={{ padding: 0 }}>
+            <CompletionState
+              title="Billing run posted"
+              summary={`${postable.length} invoices · ${formatMoney(postValue)}${blocked.length ? ` · ${blocked.length} held for fixes` : ""}`}
+            >
+              <Button title="Start a new run" color="muted" onPress={() => { setPosted(false); setResolved(new Set()); setFilter("all"); }} />
+              <Button title="View posted invoices" color="primary" onPress={() => {}} />
+            </CompletionState>
+          </Card>
+        </View>
+      </ScrollView>
+    );
+  }
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+      <View style={{ width: "100%", maxWidth: 1000, alignSelf: "center", gap: 16 }}>
+        {/* header */}
+        <View style={{ gap: 2 }}>
+          <Text size="xl" weight="semibold">June billing run</Text>
+          <Text size="sm" color="muted">Preview every invoice the run will create, clear the blockers, then post — blocked lines are held, never posted</Text>
+        </View>
+
+        {/* the run summary — the verdict breakdown the commit gates on */}
+        <KPIStrip
+          items={[
+            { label: "Ready", value: counts.ready, format: "number" },
+            { label: "Needs review", value: counts.review, format: "number", tone: counts.review > 0 ? "warning" : "default", info: "Soft issues — these post, but the flag is recorded (missing PO, over credit limit)." },
+            { label: "Blocked", value: counts.blocked, format: "number", tone: counts.blocked > 0 ? "danger" : "default", info: "Hard blockers — held out of the run until resolved (no tax ID, on credit hold)." },
+            { label: "Value to post", value: postValue, format: "currency", compact: true, caption: `${postable.length} invoices` },
+          ]}
+        />
+
+        {/* preview register — filter to the verdict you're working */}
+        <Card style={{ padding: 0 }}>
+          <View style={{ paddingHorizontal: 20, paddingVertical: 12 }}>
+            <ChipGroup
+              accessibilityLabel="Filter by verdict"
+              options={FILTERS.map((f) => ({
+                label: f.value === "all" ? `All · ${LINES.length}` : `${f.label} · ${counts[f.value as RunStatus]}`,
+                value: f.value,
+              }))}
+              value={filter}
+              onValueChange={setFilter}
+            />
+          </View>
+          <Table columns={COLUMNS}>
+            {visible.map((l) => (
+              <RunRow key={l.id} line={l} status={statusOf(l)} onPress={() => setOpenId(l.id)} />
+            ))}
+          </Table>
+          <CardFooter>
+            <Text size="xs" color={blocked.length > 0 ? "danger" : "muted"} style={{ flex: 1 }}>
+              {blocked.length > 0
+                ? `${blocked.length} blocked held back — resolve to include them`
+                : "All lines clear — nothing held back"}
+            </Text>
+            <Button
+              title={`Post ${postable.length} invoices`}
+              color="primary"
+              disabled={postable.length === 0}
+              onPress={() => setPosted(true)}
+            />
+          </CardFooter>
+        </Card>
+      </View>
+
+      {open !== null ? (
+        <Drawer open onOpenChange={(o) => !o && setOpenId(null)} title={open.customer} width={440}>
+          <InspectLine
+            key={open.id}
+            line={open}
+            status={statusOf(open)}
+            onResolve={() => { setResolved((prev) => new Set(prev).add(open.id)); setOpenId(null); }}
+          />
+        </Drawer>
+      ) : null}
+    </ScrollView>
+  );
+}

package/examples/tpl_settings.tsx

@@ -0,0 +1,178 @@
+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, CardFooter, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
+import { Picker } from "@lotics/ui/picker";
+import { Switch } from "@lotics/ui/switch";
+import { Divider } from "@lotics/ui/divider";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Settings — the workspace settings screen; the Action Layout doc
+// made visible. Three banded cards on the zinc-50 canvas:
+//   General     → Divider-separated rows, label left / control right (text+Edit, Pickers)
+//   Notifications → title+description left, live Switch right
+//   Danger zone → separated red heading + description + ONE labeled
+//                    danger button (never icon-only, never next to Save)
+// ─────────────────────────────────────────────────────────────────────────────
+
+const NGON_NGU = [
+  { label: "Vietnamese", value: "vi" },
+  { label: "English", value: "en" },
+];
+
+const MUI_GIO = [
+  { label: "(GMT+7) Ho Chi Minh City", value: "Asia/Ho_Chi_Minh" },
+  { label: "(GMT+7) Bangkok", value: "Asia/Bangkok" },
+  { label: "(GMT+8) Singapore", value: "Asia/Singapore" },
+  { label: "(GMT+9) Tokyo", value: "Asia/Tokyo" },
+];
+
+const THONG_BAO = [
+  {
+    id: "donHang",
+    label: "New orders",
+    description: "Notify immediately when an order is created in this workspace.",
+  },
+  {
+    id: "nhacViec",
+    label: "Due-task reminders",
+    description: "Send an 8:00 AM reminder for tasks due today.",
+  },
+  {
+    id: "tomTat",
+    label: "Weekly digest",
+    description: "A summary of the whole team's activity, sent Monday morning.",
+  },
+] as const;
+
+type ThongBaoId = (typeof THONG_BAO)[number]["id"];
+
+/** One hairline settings row: label (+ optional description) left, control right. */
+function SettingRow({
+  label,
+  description,
+  children,
+}: {
+  label: string;
+  description?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <View
+      style={{
+        paddingHorizontal: 20,
+        paddingVertical: 14,
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 16,
+      }}
+    >
+      <View style={{ flex: 1, gap: 2 }}>
+        <Text size="sm" weight="medium">{label}</Text>
+        {description ? <Text size="xs" color="muted">{description}</Text> : null}
+      </View>
+      {children}
+    </View>
+  );
+}
+
+export function TplSettings() {
+  const [ngonNgu, setNgonNgu] = useState("vi");
+  const [muiGio, setMuiGio] = useState("Asia/Ho_Chi_Minh");
+  const [thongBao, setThongBao] = useState<Record<ThongBaoId, boolean>>({
+    donHang: true,
+    nhacViec: true,
+    tomTat: false,
+  });
+
+  return (
+    <ScrollView
+      style={{ flex: 1, backgroundColor: colors.zinc[50] }}
+      contentContainerStyle={{ padding: 28 }}
+    >
+      <View style={{ width: "100%", maxWidth: 880, alignSelf: "center", gap: 16 }}>
+        {/* header band */}
+        <View style={{ gap: 2 }}>
+          <Text size="xl" weight="semibold">Settings</Text>
+          <Text size="sm" color="muted">
+            General settings, notifications and the workspace danger zone
+          </Text>
+        </View>
+
+        {/* General */}
+        <Card style={{ padding: 0 }}>
+          <CardHeader>
+            <CardHeaderTitle description="Display name, language and timezone applied to every member">
+              General
+            </CardHeaderTitle>
+          </CardHeader>
+          <SettingRow label="Workspace name">
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+              <Text size="sm">Crestline Logistics</Text>
+              <Button title="Edit" color="muted" onPress={() => {}} />
+            </View>
+          </SettingRow>
+          <Divider />
+          <SettingRow label="Language" description="Interface language and outgoing email">
+            <Picker
+              options={NGON_NGU}
+              value={ngonNgu}
+              onValueChange={setNgonNgu}
+              style={{ width: 220 }}
+            />
+          </SettingRow>
+          <Divider />
+          <SettingRow label="Timezone" description="Used for due dates, calendars and reminders">
+            <Picker
+              options={MUI_GIO}
+              value={muiGio}
+              onValueChange={setMuiGio}
+              style={{ width: 220 }}
+            />
+          </SettingRow>
+        </Card>
+
+        {/* Notifications */}
+        <Card style={{ padding: 0 }}>
+          <CardHeader>
+            <CardHeaderTitle description="Pick what deserves a notification — everything else stays in-app">
+              Notifications
+            </CardHeaderTitle>
+          </CardHeader>
+          {THONG_BAO.map((tb, i) => (
+            <View key={tb.id}>
+              {i > 0 ? <Divider /> : null}
+              <SettingRow label={tb.label} description={tb.description}>
+                <Switch
+                  accessibilityLabel={tb.label}
+                  value={thongBao[tb.id]}
+                  onChange={(value) => setThongBao((prev) => ({ ...prev, [tb.id]: value }))}
+                />
+              </SettingRow>
+            </View>
+          ))}
+        </Card>
+
+        {/* Danger zone — separated, explicit label, confirm before executing */}
+        <Card style={{ padding: 0 }}>
+          <CardHeader>
+            {/* bespoke title node: CardHeaderTitle has no danger color, and the
+                red heading is the point of this band */}
+            <View style={{ flex: 1, gap: 2 }}>
+              <Text size="sm" weight="semibold" color="danger">Danger zone</Text>
+              <Text size="xs" color="muted">
+                Permanently deletes the workspace with every table, record and attachment. This
+                cannot be undone.
+              </Text>
+            </View>
+          </CardHeader>
+          <CardFooter>
+            <Button title="Delete workspace" color="danger" onPress={() => {}} />
+          </CardFooter>
+        </Card>
+      </View>
+    </ScrollView>
+  );
+}