@lotics/ui 3.6.0 → 4.1.0

package/examples/tpl_dispatch.tsx

@@ -0,0 +1,289 @@
+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 { ActionMenu } from "@lotics/ui/action_menu";
+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 { DetailRow } from "@lotics/ui/detail_row";
+import { Divider } from "@lotics/ui/divider";
+import { Drawer, DrawerFooter } from "@lotics/ui/drawer";
+import { EmptyState } from "@lotics/ui/empty_state";
+import { KPIStrip } from "@lotics/ui/kpi_strip";
+import { MenuListItem } from "@lotics/ui/menu_list_item";
+import { Popover, PopoverContent, PopoverTrigger } from "@lotics/ui/popover";
+import { Peek } from "@lotics/ui/peek";
+import { PressableRow } from "@lotics/ui/pressable_row";
+import { ProgressBar } from "@lotics/ui/progress_bar";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Dispatch board — the work is ALLOCATION: fit a pool of demand
+// into limited capacity (deliveries → trucks; same shape for jobs →
+// machines, visits → technicians, bookings → rooms). The pool sits left;
+// each resource is a card whose load meter answers "does it fit?" before
+// you ask. Assigning is a popover that names the remaining capacity per
+// option and disables what doesn't fit — the gate is the data. Rows open
+// the same stop drawer from either side; assignment moves rows live.
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface Stop {
+  id: string;
+  customer: string;
+  destination: string;
+  volume: number; // m³
+  due: string;
+  truck: string | null;
+}
+
+interface Truck {
+  id: string;
+  driver: string;
+  capacity: number; // m³
+  phone: string;
+  licence: string;
+}
+
+const TRUCKS: Truck[] = [
+  { id: "VL-01", driver: "Tom Becker", capacity: 12, phone: "+1 415 555 0142", licence: "Class C · exp 2027-03" },
+  { id: "VL-02", driver: "Ray Santos", capacity: 12, phone: "+1 415 555 0188", licence: "Class C · exp 2026-11" },
+  { id: "VL-03", driver: "Ken Adachi", capacity: 8, phone: "+1 415 555 0107", licence: "Class C · exp 2028-01" },
+];
+
+const STOPS: Stop[] = [
+  { id: "SR-2026-0027", customer: "BRIGHTCELL BATTERIES", destination: "Arden industrial park", volume: 4.2, due: "am", truck: "VL-01" },
+  { id: "SR-2026-0031", customer: "ATLAS COMPONENTS", destination: "Eastport free zone", volume: 5.6, due: "am", truck: "VL-01" },
+  { id: "SR-2026-0033", customer: "KING LUN PLASTICS", destination: "Brookfield district 4", volume: 6.1, due: "am", truck: "VL-02" },
+  { id: "SR-2026-0035", customer: "VITTORIA ACCESSORIES", destination: "Centerville depot", volume: 3.4, due: "pm", truck: null },
+  { id: "SR-2026-0036", customer: "CRESTLINE FURNITURE", destination: "Dalton port gate 2", volume: 7.8, due: "pm", truck: null },
+  { id: "SR-2026-0038", customer: "MERIDIAN CONSTRUCTION", destination: "Fairview site B", volume: 2.2, due: "am", truck: null },
+  { id: "SR-2026-0039", customer: "NORTHWIND PACKAGING", destination: "Hillcrest yard", volume: 4.9, due: "pm", truck: null },
+  { id: "SR-2026-0040", customer: "BRIGHTCELL BATTERIES", destination: "Arden industrial park", volume: 1.6, due: "pm", truck: null },
+];
+
+const fmt = (n: number) => `${n.toLocaleString("en-US", { maximumFractionDigits: 1 })} m³`;
+
+function StopRow({ s, openId, onOpen, right }: { s: Stop; openId: string | null; onOpen: () => void; right?: React.ReactNode }) {
+  return (
+    <PressableRow onPress={onOpen} selected={openId === s.id} style={{ gap: 8 }}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={`Open stop ${s.id}`}
+        onPress={onOpen}
+        style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 12, minHeight: 52 }}
+      >
+        <View style={{ flex: 1, gap: 0 }}>
+          <Text size="sm" numberOfLines={1}>{s.destination}</Text>
+          <Text size="xs" color="muted" numberOfLines={1}>{`${s.id} · ${s.customer}`}</Text>
+        </View>
+        <Badge variant="dot" label={s.due === "am" ? "Morning" : "Afternoon"} color={s.due === "am" ? "blue" : "zinc"} />
+        <Text size="sm" tabular align="right" style={{ width: 56 }}>{fmt(s.volume)}</Text>
+      </Pressable>
+      {right}
+    </PressableRow>
+  );
+}
+
+export function TplDispatch() {
+  const [stops, setStops] = useState<Stop[]>(STOPS);
+  const [openId, setOpenId] = useState<string | null>(null);
+
+  const assign = (stopId: string, truckId: string | null) => {
+    setStops((prev) => prev.map((s) => (s.id === stopId ? { ...s, truck: truckId } : s)));
+    setOpenId(null);
+  };
+
+  const pool = stops.filter((s) => s.truck === null);
+  const stopsOf = (truckId: string) => stops.filter((s) => s.truck === truckId);
+  const loadOf = (truckId: string) => stopsOf(truckId).reduce((sum, s) => sum + s.volume, 0);
+  const freeOf = (t: Truck) => t.capacity - loadOf(t.id);
+
+  const totalCapacity = TRUCKS.reduce((s, t) => s + t.capacity, 0);
+  const totalLoad = TRUCKS.reduce((s, t) => s + loadOf(t.id), 0);
+  const poolVolume = pool.reduce((s, x) => s + x.volume, 0);
+
+  // The drawer walks whichever list the stop was opened from.
+  const open = stops.find((s) => s.id === openId) ?? null;
+  const walk = open ? (open.truck === null ? pool : stopsOf(open.truck)) : [];
+  const seqIndex = open ? walk.findIndex((s) => s.id === open.id) : -1;
+
+  /** The fit-aware assign control — every option states its remaining
+   * capacity; an option that can't take the stop is disabled, not hidden,
+   * so "why can't I?" answers itself. */
+  const AssignControl = ({ s }: { s: Stop }) => (
+    <Popover side="bottom" align="end">
+      <PopoverTrigger>
+        <Button title="Assign" color="secondary" />
+      </PopoverTrigger>
+      <PopoverContent style={{ width: 320 }}>
+        <View style={{ paddingHorizontal: 12, paddingTop: 10, paddingBottom: 6 }}>
+          <Text size="xs" color="muted" transform="uppercase">{`${s.id} · ${fmt(s.volume)} → which truck?`}</Text>
+        </View>
+        <View style={{ paddingHorizontal: 6, paddingBottom: 8, gap: 2 }}>
+          {TRUCKS.map((t) => {
+            const fits = freeOf(t) >= s.volume;
+            return (
+              <MenuListItem
+                key={t.id}
+                title={`${t.id} · ${t.driver}`}
+                description={fits ? `${fmt(freeOf(t))} free of ${fmt(t.capacity)}` : `won't fit — ${fmt(freeOf(t))} free`}
+                disabled={!fits}
+                onPress={() => assign(s.id, t.id)}
+              />
+            );
+          })}
+        </View>
+      </PopoverContent>
+    </Popover>
+  );
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+      <View style={{ width: "100%", maxWidth: 1100, alignSelf: "center", gap: 16 }}>
+        {/* header band */}
+        <View style={{ gap: 2 }}>
+          <Text size="xl" weight="semibold">Dispatch board</Text>
+          <Text size="sm" color="muted">Fit the day's demand into the fleet — assign until the pool is empty</Text>
+        </View>
+
+        <KPIStrip
+          items={[
+            { label: "Unassigned", value: pool.length, format: "number", tone: pool.length > 0 ? "warning" : "default", caption: `${fmt(poolVolume)} waiting` },
+            { label: "Fleet load", value: Math.round((totalLoad / totalCapacity) * 100), format: "percentage", info: "Volume assigned across every truck vs total fleet capacity. The board's job is moving this toward 100% without breaking a single truck's limit." },
+            { label: "Stops planned", value: stops.length - pool.length, format: "number", caption: `across ${TRUCKS.length} trucks` },
+            { label: "Headroom", value: Math.round((totalCapacity - totalLoad) * 10) / 10, format: "number", caption: "m³ free fleet-wide" },
+          ]}
+        />
+
+        <View style={{ flexDirection: "row", gap: 16, alignItems: "flex-start", flexWrap: "wrap" }}>
+          {/* the demand pool */}
+          <Card style={{ padding: 0, flexGrow: 1, flexBasis: 400 }}>
+            <CardHeader>
+              <CardHeaderTitle info="Today's deliveries with no truck yet. Assign… names each truck's remaining capacity and disables what won't fit.">
+                Unassigned
+              </CardHeaderTitle>
+            </CardHeader>
+            {pool.length === 0 ? (
+              <EmptyState message="Everything is on a truck" hint="The pool refills as new orders reach the delivery stage" />
+            ) : (
+              pool.map((s, i) => (
+                <View key={s.id}>
+                  {i > 0 ? <Divider /> : null}
+                  <StopRow s={s} openId={openId} onOpen={() => setOpenId(s.id)} right={<AssignControl s={s} />} />
+                </View>
+              ))
+            )}
+            <CardFooter>
+              <Text size="xs" color="muted" tabular style={{ flex: 1 }}>{`${pool.length} stops · ${fmt(poolVolume)}`}</Text>
+            </CardFooter>
+          </Card>
+
+          {/* the capacity lanes */}
+          <View style={{ flexGrow: 2, flexBasis: 560, gap: 16 }}>
+            {TRUCKS.map((t) => {
+              const load = loadOf(t.id);
+              const truckStops = stopsOf(t.id);
+              return (
+                <Card key={t.id} style={{ padding: 0 }}>
+                  <CardHeader>
+                    <CardHeaderTitle info="The load meter is the gate: assignment options that would push it past capacity are disabled at the source.">
+                      {t.id}
+                    </CardHeaderTitle>
+                    <Peek
+                      accessibilityLabel={`Driver ${t.driver}`}
+                      side="bottom"
+                      align="end"
+                      content={
+                        <View style={{ gap: 12 }}>
+                          <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+                            <Avatar name={t.driver} size={36} />
+                            <View style={{ gap: 1 }}>
+                              <Text size="sm" weight="semibold">{t.driver}</Text>
+                              <Text size="xs" color="muted">{`Driver · ${t.id}`}</Text>
+                            </View>
+                          </View>
+                          <Divider />
+                          <View style={{ gap: 8 }}>
+                            <DetailRow label="Vehicle" labelWidth={64} labelSize="xs"><Text size="sm" style={{ flex: 1 }} userSelect="auto">{`${t.id} · ${fmt(t.capacity)} capacity`}</Text></DetailRow>
+                            <DetailRow label="Today" labelWidth={64} labelSize="xs"><Text size="sm" style={{ flex: 1 }} userSelect="auto">{`${truckStops.length} stops · ${fmt(load)} loaded`}</Text></DetailRow>
+                            <DetailRow label="Phone" labelWidth={64} labelSize="xs"><Text size="sm" style={{ flex: 1 }} userSelect="auto">{t.phone}</Text></DetailRow>
+                            <DetailRow label="Licence" labelWidth={64} labelSize="xs"><Text size="sm" style={{ flex: 1 }} userSelect="auto">{t.licence}</Text></DetailRow>
+                          </View>
+                          <Button title="Open driver record" color="secondary" onPress={() => {}} />
+                        </View>
+                      }
+                    >
+                      <Text size="xs" color="muted">{t.driver}</Text>
+                    </Peek>
+                  </CardHeader>
+                  <View style={{ paddingHorizontal: 20, paddingVertical: 14 }}>
+                    <ProgressBar title="Load" value={load} max={t.capacity} format="fraction" color={solid("blue")} completeColor={solid("amber")} />
+                  </View>
+                  {truckStops.map((s, i) => (
+                    <View key={s.id}>
+                      {i > 0 ? <Divider /> : null}
+                      <StopRow
+                        s={s}
+                        openId={openId}
+                        onOpen={() => setOpenId(s.id)}
+                        right={
+                          <ActionMenu
+                            accessibilityLabel={`Actions for ${s.id}`}
+                            items={[{ key: "unassign", label: "Return to pool", icon: "arrow-left", onPress: () => assign(s.id, null) }]}
+                          />
+                        }
+                      />
+                    </View>
+                  ))}
+                  <CardFooter>
+                    <Text size="xs" color="muted" tabular style={{ flex: 1 }}>
+                      {truckStops.length === 0 ? "Empty — assign from the pool" : `${truckStops.length} stops · ${fmt(load)} of ${fmt(t.capacity)}`}
+                    </Text>
+                    <Button title="Print run sheet" color="muted" onPress={() => {}} />
+                  </CardFooter>
+                </Card>
+              );
+            })}
+          </View>
+        </View>
+      </View>
+
+      {open !== null ? (
+        <Drawer
+          open
+          onOpenChange={(o) => !o && setOpenId(null)}
+          title={open.id}
+          width={440}
+          onPrev={seqIndex > 0 ? () => setOpenId(walk[seqIndex - 1].id) : undefined}
+          onNext={seqIndex >= 0 && seqIndex < walk.length - 1 ? () => setOpenId(walk[seqIndex + 1].id) : undefined}
+          position={seqIndex >= 0 ? `${seqIndex + 1}/${walk.length}` : undefined}
+        >
+          <View key={open.id} style={{ flex: 1, padding: 24, gap: 14 }}>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+              {open.truck ? <Badge label={`On ${open.truck}`} color="blue" /> : <Badge label="Unassigned" color="amber" />}
+              <Badge label={open.due === "am" ? "Morning window" : "Afternoon window"} />
+            </View>
+            <View style={{ gap: 6 }}>
+              <DetailRow label="Customer">
+                <Text size="sm">{open.customer}</Text>
+              </DetailRow>
+              <Divider />
+              <DetailRow label="Destination">
+                <Text size="sm">{open.destination}</Text>
+              </DetailRow>
+              <Divider />
+              <DetailRow label="Volume">
+                <Text size="sm" tabular>{fmt(open.volume)}</Text>
+              </DetailRow>
+            </View>
+          </View>
+          <DrawerFooter>
+            {open.truck !== null ? <Button title="Return to pool" color="secondary" onPress={() => assign(open.id, null)} /> : null}
+            <Button title="Open order record" color="primary" onPress={() => {}} />
+          </DrawerFooter>
+        </Drawer>
+      ) : null}
+    </ScrollView>
+  );
+}