@lotics/ui 3.6.0 → 4.1.0

package/examples/tpl_approvals.tsx

@@ -0,0 +1,375 @@
+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 { 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 { CheckboxInput } from "@lotics/ui/checkbox_input";
+import { DetailRow } from "@lotics/ui/detail_row";
+import { Dialog, DialogFooter, DialogHeader, DialogHeaderTitle } from "@lotics/ui/dialog";
+import { Divider } from "@lotics/ui/divider";
+import { Drawer, DrawerFooter } from "@lotics/ui/drawer";
+import { EmptyState } from "@lotics/ui/empty_state";
+import { Counter } from "@lotics/ui/counter";
+import { FilterPill, selectSummary } from "@lotics/ui/filter_pill";
+import { FloatingActionBar } from "@lotics/ui/floating_action_bar";
+import { FormField } from "@lotics/ui/form_field";
+import { KPIStrip } from "@lotics/ui/kpi_strip";
+import { PickerMenu } from "@lotics/ui/picker_menu";
+import { Popover, PopoverContent, PopoverFooter, PopoverTrigger } from "@lotics/ui/popover";
+import { RangeSlider, rangeSummary } from "@lotics/ui/range_slider";
+import { PressableRow } from "@lotics/ui/pressable_row";
+import { Screen } from "@lotics/ui/screen_router";
+import { ChipGroup } from "@lotics/ui/chip_group";
+import { TextInputField } from "@lotics/ui/text_input_field";
+import { Timeline } from "@lotics/ui/timeline";
+import { formatMoney } from "@lotics/ui/format_money";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Approvals — the work is a VERDICT, not a process step. The
+// design splits routine from exception: in-policy requests approve in one
+// click (or in bulk via checkboxes + the floating bar); over-policy
+// requests lose the checkbox and force the drawer, where the policy band
+// shows exactly what's being overridden, and approval is a Dialog with
+// the consequence spelled out. Reject always asks one question — why —
+// in a popover. The row press opens the sequenced request workspace.
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface Request {
+  id: string;
+  type: "purchase" | "discount" | "expense";
+  requester: string;
+  role: string;
+  summary: string;
+  amount: number;
+  /** The policy ceiling for this request kind/requester. */
+  limit: number;
+  ageDays: number;
+  note: string;
+}
+
+const REQUESTS: Request[] = [
+  { id: "REQ-0231", type: "purchase", requester: "Maria Lopez", role: "Procurement", summary: "Corrugated sheets — restock for the June run", amount: 18_400_000, limit: 20_000_000, ageDays: 1, note: "Supplier quote attached; same unit price as May." },
+  { id: "REQ-0232", type: "purchase", requester: "James Wu", role: "Production", summary: "Die-cut blade replacement set", amount: 6_750_000, limit: 20_000_000, ageDays: 2, note: "Current blades past rated cycles." },
+  { id: "REQ-0234", type: "purchase", requester: "Maria Lopez", role: "Procurement", summary: "Ink — spot color for ATLAS order", amount: 23_400_000, limit: 20_000_000, ageDays: 6, note: "Rush order; only one supplier stocks this color." },
+  { id: "REQ-0236", type: "purchase", requester: "David Park", role: "Warehouse", summary: "Pallet wrap, 40 rolls", amount: 3_120_000, limit: 20_000_000, ageDays: 1, note: "Routine restock." },
+  { id: "REQ-0228", type: "discount", requester: "Sarah Chen", role: "Sales", summary: "CRESTLINE — 8% on repeat order SR-2026-0091", amount: 4_980_000, limit: 6_000_000, ageDays: 3, note: "Customer at 96% on-time payment; volume up 20% QoQ." },
+  { id: "REQ-0237", type: "discount", requester: "Daniel Reed", role: "Sales", summary: "NEW client trial — 15% on first order", amount: 9_300_000, limit: 6_000_000, ageDays: 4, note: "Competitor quote attached; strategic account." },
+  { id: "REQ-0229", type: "expense", requester: "Emma Davis", role: "Sales", summary: "Client visit — Haiphong, 2 days", amount: 2_840_000, limit: 5_000_000, ageDays: 2, note: "Itinerary attached." },
+  { id: "REQ-0233", type: "expense", requester: "James Wu", role: "Production", summary: "Forklift repair — emergency callout", amount: 7_600_000, limit: 5_000_000, ageDays: 5, note: "Invoice from the service vendor attached." },
+  { id: "REQ-0235", type: "expense", requester: "David Park", role: "Warehouse", summary: "Safety gloves and boots, Q3", amount: 1_950_000, limit: 5_000_000, ageDays: 1, note: "Annual PPE refresh." },
+];
+
+const TYPE_LABEL: Record<Request["type"], string> = { purchase: "Purchase", discount: "Discount", expense: "Expense" };
+
+// Distinct facet values, derived from the data — the secondary filter dimensions.
+const REQUESTERS = [...new Set(REQUESTS.map((r) => r.requester))].map((n) => ({ label: n, value: n }));
+const ROLES = [...new Set(REQUESTS.map((r) => r.role))].map((n) => ({ label: n, value: n }));
+const AMT_MIN = 0;
+const AMT_MAX = 25_000_000;
+
+const overPolicy = (r: Request) => r.amount > r.limit;
+const overPct = (r: Request) => Math.round(((r.amount - r.limit) / r.limit) * 100);
+
+function RejectGate({ id, onReject }: { id: string; onReject: () => void }) {
+  const [reason, setReason] = useState("");
+  return (
+    <Popover side="top" align="end">
+      <PopoverTrigger>
+        <Button title="Reject" color="muted" />
+      </PopoverTrigger>
+      <PopoverContent style={{ width: 300 }} disableBodyScroll>
+        <View style={{ gap: 12 }}>
+          <View style={{ gap: 2 }}>
+            <Text size="sm" weight="semibold">{`Reject ${id}`}</Text>
+            <Text size="xs" color="muted">The requester sees this reason — say what would change the decision.</Text>
+          </View>
+          <FormField label="Reason">
+            <TextInputField value={reason} onChangeText={setReason} placeholder="e.g. defer to July budget…" />
+          </FormField>
+        </View>
+        <PopoverFooter>
+          <Button title="Reject request" color="danger" onPress={onReject} />
+        </PopoverFooter>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function OverrideGate({ r, onApprove }: { r: Request; onApprove: () => void }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button title="Approve over policy" color="primary" onPress={() => setOpen(true)} />
+      <Dialog width={460} open={open} onOpenChange={setOpen}>
+        <Screen route="">
+          <DialogHeader>
+            <DialogHeaderTitle>{`Approve ${r.id} over policy`}</DialogHeaderTitle>
+          </DialogHeader>
+          <View style={{ padding: 24, gap: 10 }}>
+            <Text size="sm" color="muted">
+              {`This ${TYPE_LABEL[r.type].toLowerCase()} is ${formatMoney(r.amount - r.limit)} (+${overPct(r)}%) above the ${formatMoney(r.limit)} policy ceiling. Your approval is recorded as a policy override and appears in the monthly exceptions report.`}
+            </Text>
+          </View>
+          <DialogFooter>
+            <Button title="Cancel" color="secondary" onPress={() => setOpen(false)} />
+            <Button title="Approve and record override" color="primary" onPress={() => { setOpen(false); onApprove(); }} />
+          </DialogFooter>
+        </Screen>
+      </Dialog>
+    </>
+  );
+}
+
+function RequestWorkspace({ r, onDecide }: { r: Request; onDecide: () => void }) {
+  return (
+    <>
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 24, gap: 14 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          <Badge label={TYPE_LABEL[r.type]} color="blue" />
+          {overPolicy(r) ? <Badge label={`Over limit +${overPct(r)}%`} color="red" /> : <Badge label="In policy" color="emerald" />}
+        </View>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+          <Avatar name={r.requester} size={32} />
+          <View style={{ gap: 0 }}>
+            <Text size="sm" weight="medium">{r.requester}</Text>
+            <Text size="xs" color="muted">{r.role}</Text>
+          </View>
+        </View>
+        <Text size="sm">{r.summary}</Text>
+        <Text size="sm" color="muted">{r.note}</Text>
+        <Divider />
+        {/* the policy band — the one comparison the verdict rests on */}
+        <View style={{ gap: 6 }}>
+          <DetailRow label="Requested">
+            <Text size="sm" weight="semibold" tabular>{formatMoney(r.amount)}</Text>
+          </DetailRow>
+          <Divider />
+          <DetailRow label="Policy ceiling">
+            <Text size="sm" tabular>{formatMoney(r.limit)}</Text>
+          </DetailRow>
+          <Divider />
+          <DetailRow label="Headroom">
+            <Text size="sm" tabular color={overPolicy(r) ? "danger" : "default"}>
+              {overPolicy(r) ? `−${formatMoney(r.amount - r.limit)} (+${overPct(r)}%)` : formatMoney(r.limit - r.amount)}
+            </Text>
+          </DetailRow>
+        </View>
+        <View style={{ gap: 8, paddingTop: 4 }}>
+          <Text size="sm" weight="semibold">History</Text>
+          <Timeline
+            items={[
+              { id: "submit", icon: "send", iconColor: solid("blue"), label: `Submitted by ${r.requester}`, right: <Text size="xs" color="muted" tabular>{`${r.ageDays}d ago`}</Text> },
+              { id: "routed", icon: "check", iconColor: solid("emerald"), label: "Budget line verified — routed to you", right: <Text size="xs" color="muted" tabular>{`${Math.max(0, r.ageDays - 1)}d ago`}</Text> },
+            ]}
+          />
+        </View>
+      </ScrollView>
+      <DrawerFooter>
+        <RejectGate id={r.id} onReject={onDecide} />
+        {overPolicy(r) ? <OverrideGate r={r} onApprove={onDecide} /> : <Button title="Approve" color="primary" onPress={onDecide} />}
+      </DrawerFooter>
+    </>
+  );
+}
+
+export function TplApprovals() {
+  const [pending, setPending] = useState<Request[]>(REQUESTS);
+  const [tab, setTab] = useState("all");
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [openId, setOpenId] = useState<string | null>(null);
+  const [reqSel, setReqSel] = useState<string[]>([]);
+  const [roleSel, setRoleSel] = useState<string[]>([]);
+  const [amt, setAmt] = useState<[number, number]>([AMT_MIN, AMT_MAX]);
+  const [minDays, setMinDays] = useState(0);
+
+  const visible = pending.filter(
+    (r) =>
+      (tab === "all" || r.type === tab) &&
+      (reqSel.length === 0 || reqSel.includes(r.requester)) &&
+      (roleSel.length === 0 || roleSel.includes(r.role)) &&
+      r.amount >= amt[0] &&
+      r.amount <= amt[1] &&
+      r.ageDays >= minDays,
+  );
+  const open = pending.find((r) => r.id === openId) ?? null;
+  const seqIndex = open ? visible.findIndex((r) => r.id === open.id) : -1;
+
+  const over = pending.filter(overPolicy).length;
+  const oldest = pending.reduce((m, r) => Math.max(m, r.ageDays), 0);
+  const totalValue = pending.reduce((s, r) => s + r.amount, 0);
+
+  // A decision removes the request from the inbox — approve and reject both
+  // resolve it here; the record lives on in its own register.
+  const decide = (ids: string[]) => {
+    setPending((prev) => prev.filter((r) => !ids.includes(r.id)));
+    setSelected((prev) => new Set([...prev].filter((id) => !ids.includes(id))));
+    setOpenId(null);
+  };
+
+  const routineVisible = visible.filter((r) => !overPolicy(r));
+  const allRoutineSelected = routineVisible.length > 0 && routineVisible.every((r) => selected.has(r.id));
+
+  const counts = (t: string) => pending.filter((r) => t === "all" || r.type === t).length;
+
+  const fmtAmt = (n: number) => formatMoney(n, { compact: true });
+  const reqSummary = selectSummary(reqSel, REQUESTERS);
+  const roleSummary = selectSummary(roleSel, ROLES, { max: 3 });
+  const amtSummary = rangeSummary(amt, fmtAmt, [AMT_MIN, AMT_MAX]);
+  const daysSummary = minDays > 0 ? `≥ ${minDays}d` : undefined;
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+        <View style={{ width: "100%", maxWidth: 980, alignSelf: "center", gap: 16 }}>
+          {/* header band */}
+          <View style={{ gap: 2 }}>
+            <Text size="xl" weight="semibold">Approvals</Text>
+            <Text size="sm" color="muted">Decide, don't process — routine requests in bulk, exceptions with full attention</Text>
+          </View>
+
+          <KPIStrip
+            items={[
+              { label: "Awaiting decision", value: pending.length, format: "number" },
+              { label: "Over policy", value: over, format: "number", tone: over > 0 ? "danger" : "default", info: "Requests above their policy ceiling — no checkbox, no one-click: each one opens its workspace and approval is recorded as an override." },
+              { label: "Oldest waiting", value: oldest, format: "number", caption: "days — requesters are blocked" },
+              { label: "Requested value", value: totalValue, format: "currency", compact: true },
+            ]}
+          />
+
+          {/* layered filter band — the hot dimension (type) inline as chips,
+              secondary dimensions collapsed into FilterPills so the band stays
+              scannable as more facets are added */}
+          <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8, alignItems: "center" }}>
+            <ChipGroup
+              accessibilityLabel="Request type"
+              options={[
+                { label: `All · ${counts("all")}`, value: "all" },
+                { label: `Purchases · ${counts("purchase")}`, value: "purchase" },
+                { label: `Discounts · ${counts("discount")}`, value: "discount" },
+                { label: `Expenses · ${counts("expense")}`, value: "expense" },
+              ]}
+              value={tab}
+              onValueChange={(t) => { setTab(t); setOpenId(null); }}
+            />
+            <FilterPill label="Requester" summary={reqSummary} onClear={() => setReqSel([])} clearLabel="Clear requester filter">
+              <PickerMenu multi enableSelectAll options={REQUESTERS} value={reqSel} onValueChange={setReqSel} />
+            </FilterPill>
+            <FilterPill label="Role" summary={roleSummary} onClear={() => setRoleSel([])} clearLabel="Clear role filter">
+              <PickerMenu multi options={ROLES} value={roleSel} onValueChange={setRoleSel} />
+            </FilterPill>
+            <FilterPill label="Amount" summary={amtSummary} onClear={() => setAmt([AMT_MIN, AMT_MAX])} clearLabel="Clear amount filter">
+              <RangeSlider
+                min={AMT_MIN}
+                max={AMT_MAX}
+                step={500_000}
+                value={amt}
+                onValueChange={setAmt}
+                format={fmtAmt}
+                accessibilityLabel="Amount"
+              />
+            </FilterPill>
+            <FilterPill label="Waiting" summary={daysSummary} onClear={() => setMinDays(0)} clearLabel="Clear waiting filter">
+              <View style={{ gap: 10 }}>
+                <Text size="sm" color="muted">Waiting at least</Text>
+                <Counter
+                  value={minDays}
+                  min={0}
+                  max={14}
+                  onValueChange={setMinDays}
+                  accessibilityLabel="minimum days waiting"
+                  format={(n) => `${n} ${n === 1 ? "day" : "days"}`}
+                />
+              </View>
+            </FilterPill>
+          </View>
+
+          <Card style={{ padding: 0 }}>
+            <CardHeader>
+              <CheckboxInput
+                accessibilityLabel="Select all in-policy requests"
+                checked={allRoutineSelected}
+                indeterminate={!allRoutineSelected && routineVisible.some((r) => selected.has(r.id))}
+                onChange={(on) => setSelected(on ? new Set([...selected, ...routineVisible.map((r) => r.id)]) : new Set([...selected].filter((id) => !routineVisible.some((r) => r.id === id))))}
+                disabled={routineVisible.length === 0}
+              />
+              <CardHeaderTitle info="Press a row to open the request; tick in-policy rows to approve in bulk. Over-policy rows have no checkbox — they must be opened.">
+                Inbox
+              </CardHeaderTitle>
+            </CardHeader>
+            {visible.length === 0 ? (
+              <EmptyState message="Inbox zero" hint="Nothing awaits your decision in this view" />
+            ) : null}
+            {visible.map((r, i) => (
+              <View key={r.id}>
+                {i > 0 ? <Divider /> : null}
+                <PressableRow onPress={() => setOpenId(r.id)} selected={open?.id === r.id} marked={selected.has(r.id)}>
+                  {overPolicy(r) ? (
+                    // matches the 24px Checkbox footprint so rows stay aligned
+                    <View style={{ width: 24 }} />
+                  ) : (
+                    <CheckboxInput
+                      accessibilityLabel={`Select ${r.id}`}
+                      checked={selected.has(r.id)}
+                      onChange={(on) => setSelected((prev) => { const next = new Set(prev); if (on) next.add(r.id); else next.delete(r.id); return next; })}
+                    />
+                  )}
+                  <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel={`Open request ${r.id}`}
+                    onPress={() => setOpenId(r.id)}
+                    style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 12, minHeight: 52 }}
+                  >
+                    <Avatar name={r.requester} size={28} />
+                    <View style={{ flex: 1, gap: 0 }}>
+                      <Text size="sm" numberOfLines={1}>{r.summary}</Text>
+                      <Text size="xs" color="muted">{`${r.requester} · ${TYPE_LABEL[r.type]} · ${r.ageDays}d waiting`}</Text>
+                    </View>
+                    <Text size="sm" tabular align="right" style={{ width: 104 }}>{formatMoney(r.amount)}</Text>
+                    <View style={{ width: 104 }}>
+                      {overPolicy(r) ? <Badge variant="dot" label={`Over +${overPct(r)}%`} color="red" /> : <Badge variant="dot" label="In policy" color="emerald" />}
+                    </View>
+                  </Pressable>
+                  {/* routine verdict = one click; the exception path lives in the drawer.
+                      Fixed-width keeps the trailing column constant so the amount +
+                      status columns line up across in-policy and over-policy rows. */}
+                  {overPolicy(r) ? (
+                    <Button title="Review" color="muted" onPress={() => setOpenId(r.id)} style={{ width: 96 }} />
+                  ) : (
+                    <Button title="Approve" color="secondary" onPress={() => decide([r.id])} style={{ width: 96 }} />
+                  )}
+                </PressableRow>
+              </View>
+            ))}
+            <CardFooter>
+              <Text size="xs" color="muted" tabular style={{ flex: 1 }}>
+                {visible.length === 0 ? "Inbox zero — nothing awaits your decision" : `${visible.length} requests · approving an over-policy request is always recorded as an override`}
+              </Text>
+            </CardFooter>
+          </Card>
+        </View>
+      </ScrollView>
+
+      {/* bulk-approve the ticked in-policy requests */}
+      <FloatingActionBar count={selected.size} label="in-policy requests" onClear={() => setSelected(new Set())}>
+        <Button title={`Approve ${selected.size}`} color="primary" onPress={() => decide([...selected])} />
+      </FloatingActionBar>
+
+      {open !== null ? (
+        <Drawer
+          open
+          onOpenChange={(o) => !o && setOpenId(null)}
+          title={open.id}
+          width={460}
+          onPrev={seqIndex > 0 ? () => setOpenId(visible[seqIndex - 1].id) : undefined}
+          onNext={seqIndex >= 0 && seqIndex < visible.length - 1 ? () => setOpenId(visible[seqIndex + 1].id) : undefined}
+          position={seqIndex >= 0 ? `${seqIndex + 1}/${visible.length}` : undefined}
+        >
+          <RequestWorkspace key={open.id} r={open} onDecide={() => decide([open.id])} />
+        </Drawer>
+      ) : null}
+    </View>
+  );
+}