@lotics/ui 3.5.0 → 4.0.0

package/examples/tpl_order.tsx

@@ -0,0 +1,483 @@
+import { useRef, 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, CardFooter, CardHeader, CardHeaderMeta, CardHeaderTitle } from "@lotics/ui/card";
+import { Divider } from "@lotics/ui/divider";
+import { Badge } from "@lotics/ui/badge";
+import { Icon } from "@lotics/ui/icon";
+import { FormField } from "@lotics/ui/form_field";
+import { TextInputField } from "@lotics/ui/text_input_field";
+import { Picker } from "@lotics/ui/picker";
+import { Combobox } from "@lotics/ui/combobox";
+import type { PickerOption } from "@lotics/ui/picker";
+import { DatePicker } from "@lotics/ui/date_picker";
+import { NumberInput } from "@lotics/ui/number_input";
+import { DetailRow } from "@lotics/ui/detail_row";
+import { Callout, CalloutText } from "@lotics/ui/callout";
+import { EmptyState } from "@lotics/ui/empty_state";
+import { SectionHeading, SectionHeadingTitle } from "@lotics/ui/section_heading";
+import { Dialog, DialogFooter, DialogHeader, DialogHeaderTitle } from "@lotics/ui/dialog";
+import { Screen } from "@lotics/ui/screen_router";
+import { FileDropzone } from "@lotics/ui/file_dropzone";
+import type { DisplayFile } from "@lotics/ui/file_thumbnail";
+import { FileThumbnailGrid } from "@lotics/ui/file_thumbnail_grid";
+import { FileGalleryModal } from "@lotics/ui/file_gallery_modal";
+import { formatMoney } from "@lotics/ui/format_money";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Document entry — the real-world transactional form: a header in a
+// responsive two-column grid, a RELATED record attached by FIND-OR-CREATE
+// (`Combobox` allowCustom → existing match attaches, "Create…" opens a modal
+// mini-form), and LINE ITEMS built with the create → preview → edit composition
+// (add / duplicate / remove, live totals). The adhoc-button-heavy screen: every
+// section earns its actions. Money via formatMoney; no new primitives.
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface Customer {
+  id: string;
+  name: string;
+  code: string;
+  taxId: string;
+  contact: string;
+  city: string;
+}
+
+const KNOWN_CUSTOMERS: Customer[] = [
+  { id: "cus_01", name: "Northwind Traders", code: "KH-0148", taxId: "031245678", contact: "Mara Lindqvist", city: "Gothenburg" },
+  { id: "cus_02", name: "Harbor Freight Lines", code: "KH-0203", taxId: "0312998820", contact: "Diego Alvarez", city: "Rotterdam" },
+  { id: "cus_03", name: "Summit Packaging Co.", code: "KH-0231", taxId: "0301557742", contact: "Priya Nair", city: "Singapore" },
+  { id: "cus_04", name: "Atlas Distribution", code: "KH-0117", taxId: "0309887611", contact: "Tom Becker", city: "Hamburg" },
+  { id: "cus_05", name: "Bluewater Logistics", code: "KH-0294", taxId: "0312004455", contact: "Lena Fischer", city: "Antwerp" },
+  { id: "cus_06", name: "Meridian Retail Group", code: "KH-0309", taxId: "0301889234", contact: "Sara Cohen", city: "Tel Aviv" },
+];
+
+const PRODUCTS: PickerOption[] = [
+  { value: "p_box", label: "Corrugated box · B-flute" },
+  { value: "p_pallet", label: "Export pallet · 1200×1000" },
+  { value: "p_wrap", label: "Stretch wrap · 500mm" },
+  { value: "p_strap", label: "PET strapping · 16mm" },
+  { value: "p_label", label: "Thermal label roll · 100×150" },
+  { value: "p_tape", label: "Reinforced tape · 48mm" },
+];
+
+const UNIT_PRICE: Record<string, number> = {
+  p_box: 18500,
+  p_pallet: 245000,
+  p_wrap: 86000,
+  p_strap: 142000,
+  p_label: 39000,
+  p_tape: 21500,
+};
+
+const TERMS: PickerOption[] = [
+  { value: "receipt", label: "Due on receipt" },
+  { value: "15", label: "Net 15" },
+  { value: "30", label: "Net 30" },
+  { value: "45", label: "Net 45" },
+];
+
+const WAREHOUSES: PickerOption[] = [
+  { value: "north", label: "North DC" },
+  { value: "central", label: "Central hub" },
+  { value: "port", label: "Port cross-dock" },
+];
+
+const PRIORITY: PickerOption[] = [
+  { value: "standard", label: "Standard" },
+  { value: "rush", label: "Rush" },
+];
+
+interface Line {
+  id: string;
+  product: string;
+  qty: number;
+  price: number;
+  editing: boolean;
+  /** True until first Save — a freshly-added line, so Cancel discards it
+   *  (there is no prior committed state to revert to). */
+  isNew: boolean;
+}
+
+const half = { flexGrow: 1, flexBasis: 240 } as const;
+const full = { flexGrow: 1, flexBasis: "100%" } as const;
+
+const productLabel = (value: string) => PRODUCTS.find((p) => p.value === value)?.label ?? "—";
+
+export function TplOrder() {
+  const id = useRef(1);
+  const nextId = (prefix: string) => `${prefix}_${(id.current += 1)}`;
+
+  // ── header
+  const [orderDate, setOrderDate] = useState("2026-06-15");
+  const [deliverBy, setDeliverBy] = useState("2026-06-22");
+  const [terms, setTerms] = useState("30");
+  const [warehouse, setWarehouse] = useState("central");
+  const [poNumber, setPoNumber] = useState("");
+  const [priority, setPriority] = useState("standard");
+
+  // ── find-or-create customer
+  const [created, setCreated] = useState<Customer[]>([]);
+  const [customer, setCustomer] = useState<Customer | null>(null);
+  // Swap mode: re-open the picker WITHOUT detaching the current customer, so
+  // Change is non-destructive — only an actual pick (or create) replaces it.
+  const [changing, setChanging] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [draft, setDraft] = useState({ name: "", taxId: "", contact: "", city: "" });
+
+  // ── line items
+  const [lines, setLines] = useState<Line[]>([
+    { id: "ln_1", product: "p_box", qty: 240, price: UNIT_PRICE.p_box, editing: false, isNew: false },
+    { id: "ln_2", product: "p_wrap", qty: 30, price: UNIT_PRICE.p_wrap, editing: false, isNew: false },
+  ]);
+  // Pre-edit snapshots so Cancel can revert an existing line's values.
+  const [backup, setBackup] = useState<Record<string, Line>>({});
+
+  // ── attachments
+  const [files, setFiles] = useState<DisplayFile[]>([]);
+  const [activeFile, setActiveFile] = useState<number | null>(null);
+
+  const customerOptions: PickerOption<string, Customer>[] = [...KNOWN_CUSTOMERS, ...created].map((c) => ({
+    value: c.id,
+    label: c.name,
+    data: c,
+  }));
+
+  const onPickCustomer = (opt: PickerOption<string, Customer>) => {
+    const match = [...KNOWN_CUSTOMERS, ...created].find((c) => c.id === opt.value);
+    if (match) {
+      setCustomer(match);
+      setChanging(false);
+      return;
+    }
+    // The custom row: opt.value is the raw query the rep typed. Open the create
+    // form pre-filled with it — find-or-create's "create" branch.
+    setDraft({ name: opt.value, taxId: "", contact: "", city: "" });
+    setCreating(true);
+  };
+
+  const createCustomer = () => {
+    const c: Customer = {
+      id: nextId("cus"),
+      name: draft.name.trim() || "New customer",
+      code: `KH-${String(310 + created.length + 1).padStart(4, "0")}`,
+      taxId: draft.taxId.trim(),
+      contact: draft.contact.trim(),
+      city: draft.city.trim(),
+    };
+    setCreated((prev) => [...prev, c]);
+    setCustomer(c);
+    setCreating(false);
+    setChanging(false);
+  };
+
+  const patchLine = (lid: string, patch: Partial<Line>) =>
+    setLines((prev) => prev.map((l) => (l.id === lid ? { ...l, ...patch } : l)));
+  const removeLine = (lid: string) => setLines((prev) => prev.filter((l) => l.id !== lid));
+  const dropBackup = (lid: string) =>
+    setBackup((b) => {
+      const next = { ...b };
+      delete next[lid];
+      return next;
+    });
+  const addLine = () =>
+    setLines((prev) => [...prev, { id: nextId("ln"), product: "", qty: 1, price: 0, editing: true, isNew: true }]);
+  const beginEdit = (l: Line) => {
+    setBackup((b) => ({ ...b, [l.id]: l }));
+    patchLine(l.id, { editing: true });
+  };
+  const saveLine = (lid: string) => {
+    dropBackup(lid);
+    patchLine(lid, { editing: false, isNew: false });
+  };
+  const cancelLine = (l: Line) => {
+    if (l.isNew) {
+      removeLine(l.id);
+      return;
+    }
+    const prior = backup[l.id];
+    if (prior) setLines((prev) => prev.map((x) => (x.id === l.id ? { ...prior, editing: false } : x)));
+    dropBackup(l.id);
+  };
+  const duplicateLine = (l: Line) =>
+    setLines((prev) => {
+      const at = prev.findIndex((x) => x.id === l.id);
+      const copy = { ...l, id: nextId("ln"), editing: false, isNew: false };
+      return [...prev.slice(0, at + 1), copy, ...prev.slice(at + 1)];
+    });
+
+  const subtotal = lines.reduce((sum, l) => sum + l.qty * l.price, 0);
+  const tax = Math.round(subtotal * 0.1);
+  const total = subtotal + tax;
+  const ready = customer !== null && lines.length > 0 && lines.every((l) => l.product !== "" && !l.editing);
+
+  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={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+          <Text size="xl" weight="semibold">New order</Text>
+          <Badge label="Draft" color="zinc" />
+          <View style={{ flex: 1 }} />
+          <Text size="sm" color="muted" tabular>SO-2026-0418</Text>
+        </View>
+
+        {/* order details — the two-column responsive grid */}
+        <Card style={{ padding: 0 }}>
+          <CardHeader>
+            <CardHeaderTitle info="Defaults pull from the customer once attached; adjust per order. Short related fields pair as two columns, long values take the full row.">
+              Order details
+            </CardHeaderTitle>
+          </CardHeader>
+          <CardBody>
+            <View style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16 }}>
+              <FormField label="Order date" style={half}>
+                <DatePicker value={orderDate} onValueChange={setOrderDate} locale="en-US" />
+              </FormField>
+              <FormField label="Requested delivery" style={half}>
+                <DatePicker value={deliverBy} onValueChange={setDeliverBy} locale="en-US" />
+              </FormField>
+              <FormField label="Payment terms" style={half}>
+                <Picker options={TERMS} value={terms} onValueChange={setTerms} placeholder="Select terms" accessibilityLabel="Payment terms" />
+              </FormField>
+              <FormField label="Fulfil from" style={half}>
+                <Picker options={WAREHOUSES} value={warehouse} onValueChange={setWarehouse} placeholder="Select warehouse" accessibilityLabel="Fulfil from" />
+              </FormField>
+              <FormField label="PO number" optional optionalLabel="Optional" style={half}>
+                <TextInputField value={poNumber} onChangeText={setPoNumber} placeholder="Buyer's reference" />
+              </FormField>
+              <FormField label="Priority" style={half}>
+                <Picker options={PRIORITY} value={priority} onValueChange={setPriority} placeholder="Select priority" accessibilityLabel="Priority" />
+              </FormField>
+            </View>
+          </CardBody>
+        </Card>
+
+        {/* customer — find-or-create */}
+        <Card style={{ padding: 0 }}>
+          <CardHeader>
+            <CardHeaderTitle info="Search the customer book to attach an existing record, or create one inline without leaving the order.">
+              Customer
+            </CardHeaderTitle>
+            {customer ? <CardHeaderMeta>{customer.code}</CardHeaderMeta> : null}
+          </CardHeader>
+          <CardBody>
+            {customer && !changing ? (
+              <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 12 }}>
+                <View style={{ flex: 1, gap: 2 }}>
+                  <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                    <Icon name="building-2" size={16} color={colors.zinc[500]} />
+                    <Text weight="medium">{customer.name}</Text>
+                    {created.some((c) => c.id === customer.id) ? <Badge label="New" color="emerald" /> : null}
+                  </View>
+                  <DetailRow label="Tax ID" labelWidth={96}><Text size="sm" tabular>{customer.taxId || "—"}</Text></DetailRow>
+                  <DetailRow label="Contact" labelWidth={96}><Text size="sm">{customer.contact || "—"}</Text></DetailRow>
+                  <DetailRow label="City" labelWidth={96}><Text size="sm">{customer.city || "—"}</Text></DetailRow>
+                </View>
+                <Button title="Change" color="muted" icon="pencil" onPress={() => setChanging(true)} />
+              </View>
+            ) : (
+              <View style={{ gap: 10 }}>
+                {customer ? (
+                  <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                    <Text size="xs" color="muted" style={{ flex: 1 }}>
+                      Replacing <Text size="xs" weight="medium" color="default">{customer.name}</Text> — pick another or create a new one
+                    </Text>
+                    <Button title="Cancel" color="muted" onPress={() => setChanging(false)} />
+                  </View>
+                ) : null}
+                <Combobox
+                  icon="search"
+                  options={customerOptions}
+                  onValueChange={onPickCustomer}
+                  getOptionDescription={(o) => (o.data ? `${o.data.code} · ${o.data.city}` : undefined)}
+                  reflectSelection={false}
+                  allowCustom
+                  customOptionPlacement="top"
+                  customOptionLabel={(q) => `Create new customer “${q}”`}
+                  placeholder="Search customers by name…"
+                  emptyText="No customer matches — type a name to create one"
+                  accessibilityLabel="Attach customer"
+                  autoFocus={changing}
+                />
+                {!customer ? (
+                  <Text size="xs" color="muted">
+                    No match? Pick “Create new customer …” to add it without leaving this order.
+                  </Text>
+                ) : null}
+              </View>
+            )}
+          </CardBody>
+        </Card>
+
+        {/* line items — create → preview → edit, each line its own card; the
+            heading is grouped with its cards at a tighter gap so it hugs them. */}
+        <View style={{ gap: 12 }}>
+        <SectionHeading>
+          <SectionHeadingTitle>Line items</SectionHeadingTitle>
+          <Button title="Add line" color="primary" icon="plus" onPress={addLine} />
+        </SectionHeading>
+
+        {lines.length === 0 ? (
+          <Card>
+            <EmptyState icon="receipt" message="No line items yet" hint="Add the products and quantities for this order" action={<Button title="Add line" color="primary" icon="plus" onPress={addLine} />} />
+          </Card>
+        ) : (
+          lines.map((l) => (
+            <Card key={l.id} style={{ padding: 0 }}>
+              {l.editing ? (
+                <>
+                  <CardBody>
+                    <View style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16 }}>
+                      <FormField label="Product" style={full}>
+                        <Picker
+                          options={PRODUCTS}
+                          value={l.product}
+                          onValueChange={(v) => patchLine(l.id, { product: v, price: l.price || UNIT_PRICE[v] || 0 })}
+                          placeholder="Select a product"
+                          accessibilityLabel="Product"
+                        />
+                      </FormField>
+                      <FormField label="Quantity" style={half}>
+                        <NumberInput value={l.qty} onValueChange={(v) => patchLine(l.id, { qty: v ?? 0 })} min={0} accessibilityLabel="Quantity" />
+                      </FormField>
+                      <FormField label="Unit price" style={half}>
+                        <NumberInput value={l.price} onValueChange={(v) => patchLine(l.id, { price: v ?? 0 })} min={0} accessibilityLabel="Unit price" />
+                      </FormField>
+                    </View>
+                    <Text size="sm" color="muted">Line total <Text weight="medium" color="default">{formatMoney(l.qty * l.price)}</Text></Text>
+                  </CardBody>
+                  <CardFooter>
+                    {l.isNew ? null : (
+                      <Button title="Remove" color="danger-secondary" icon="trash" onPress={() => removeLine(l.id)} />
+                    )}
+                    <View style={{ flex: 1 }} />
+                    <Button title="Cancel" color="secondary" onPress={() => cancelLine(l)} />
+                    <Button title="Save line" color="primary" disabled={l.product === ""} onPress={() => saveLine(l.id)} />
+                  </CardFooter>
+                </>
+              ) : (
+                <>
+                  <CardBody>
+                    <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+                      <View style={{ flex: 1, gap: 2 }}>
+                        <Text weight="medium">{productLabel(l.product)}</Text>
+                        <Text size="sm" color="muted" tabular>{l.qty} × {formatMoney(l.price)}</Text>
+                      </View>
+                      <Text weight="medium" tabular>{formatMoney(l.qty * l.price)}</Text>
+                    </View>
+                  </CardBody>
+                  <CardFooter>
+                    <Button title="Duplicate" color="muted" icon="copy" onPress={() => duplicateLine(l)} />
+                    <Button title="Remove" color="danger-secondary" icon="trash" onPress={() => removeLine(l.id)} />
+                    <View style={{ flex: 1 }} />
+                    <Button title="Edit" color="secondary" icon="pencil" onPress={() => beginEdit(l)} />
+                  </CardFooter>
+                </>
+              )}
+            </Card>
+          ))
+        )}
+        </View>
+
+        {/* summary — totals + attachment + the Action-Layout commit bar */}
+        <Card style={{ padding: 0 }}>
+          <CardHeader>
+            <CardHeaderTitle>Summary</CardHeaderTitle>
+            <CardHeaderMeta>{lines.length} {lines.length === 1 ? "line" : "lines"}</CardHeaderMeta>
+          </CardHeader>
+          <CardBody>
+            <DetailRow label="Subtotal" labelWidth={120}><Text tabular>{formatMoney(subtotal)}</Text></DetailRow>
+            <DetailRow label="VAT (10%)" labelWidth={120}><Text tabular color="muted">{formatMoney(tax)}</Text></DetailRow>
+            <Divider />
+            <DetailRow label="Total" labelWidth={120}><Text weight="semibold" size="lg" tabular>{formatMoney(total)}</Text></DetailRow>
+          </CardBody>
+          <Divider />
+          <CardBody style={{ gap: 12 }}>
+            <Text size="xs" color="muted" transform="uppercase">Attachments</Text>
+            {files.length > 0 ? (
+              <FileThumbnailGrid
+                files={files}
+                itemSize={84}
+                onFilePress={(f) => setActiveFile(files.findIndex((x) => x.id === f.id))}
+                onRemove={(id) => setFiles((prev) => prev.filter((x) => x.id !== id))}
+              />
+            ) : null}
+            <FileDropzone
+              height={100}
+              label="Drop the signed quote or PO"
+              hint="or click to browse · PDF, images"
+              dropLabel="Release to attach"
+              accept="application/pdf,image/*"
+              accessibilityLabel="Attach documents"
+              onFiles={(dropped) =>
+                setFiles((prev) => [
+                  ...prev,
+                  ...dropped.map((f, i) => ({
+                    id: `${f.name}-${prev.length + i}`,
+                    filename: f.name,
+                    mimeType: f.type || "application/octet-stream",
+                    url: URL.createObjectURL(f),
+                  })),
+                ])
+              }
+            />
+          </CardBody>
+          {!ready ? (
+            <CardBody>
+              <Callout tone="info">
+                <CalloutText>
+                  {customer === null
+                    ? "Attach a customer and add at least one line to create the order."
+                    : lines.some((l) => l.editing)
+                      ? "Save every line item before creating the order."
+                      : "Add at least one line item to create the order."}
+                </CalloutText>
+              </Callout>
+            </CardBody>
+          ) : null}
+          <CardFooter>
+            <Text size="xs" color="muted" style={{ flex: 1 }}>
+              {customer ? `${customer.name} · ${lines.length} ${lines.length === 1 ? "line" : "lines"} · ${formatMoney(total)}` : "No customer attached yet"}
+            </Text>
+            <Button title="Cancel" color="muted" onPress={() => {}} />
+            <Button title="Create order" color="primary" disabled={!ready} onPress={() => {}} />
+          </CardFooter>
+        </Card>
+      </View>
+
+      {/* find-or-create: the "create" branch — a focused modal mini-form */}
+      <Dialog width={520} open={creating} onOpenChange={setCreating}>
+        <Screen route="">
+          <DialogHeader>
+            <DialogHeaderTitle>New customer</DialogHeaderTitle>
+          </DialogHeader>
+          <View style={{ paddingHorizontal: 24, paddingBottom: 8, gap: 4 }}>
+            <Callout tone="info"><CalloutText>Creating here attaches the customer to this order and adds it to the customer book.</CalloutText></Callout>
+            <View style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16, paddingTop: 12 }}>
+              <FormField label="Customer name" style={full}>
+                <TextInputField value={draft.name} onChangeText={(v) => setDraft((d) => ({ ...d, name: v }))} placeholder="Legal name" autoFocus />
+              </FormField>
+              <FormField label="Tax ID" style={half}>
+                <TextInputField value={draft.taxId} onChangeText={(v) => setDraft((d) => ({ ...d, taxId: v }))} placeholder="10 or 13 digits" inputMode="numeric" />
+              </FormField>
+              <FormField label="City" style={half}>
+                <TextInputField value={draft.city} onChangeText={(v) => setDraft((d) => ({ ...d, city: v }))} placeholder="City" />
+              </FormField>
+              <FormField label="Contact person" optional optionalLabel="Optional" style={full}>
+                <TextInputField value={draft.contact} onChangeText={(v) => setDraft((d) => ({ ...d, contact: v }))} placeholder="Who receives quotes" />
+              </FormField>
+            </View>
+          </View>
+          <DialogFooter>
+            <Button title="Cancel" color="secondary" onPress={() => setCreating(false)} />
+            <Button title="Create and attach" color="primary" disabled={draft.name.trim() === ""} onPress={createCustomer} />
+          </DialogFooter>
+        </Screen>
+      </Dialog>
+
+      <FileGalleryModal files={files} activeIndex={activeFile} onIndexChange={setActiveFile} captionHint="ESC to close · ←/→ to move" />
+    </ScrollView>
+  );
+}