@lotics/ui 3.6.0 → 4.1.0

package/examples/tpl_shifts.tsx

@@ -0,0 +1,421 @@
+import { useState } from "react";
+import { Pressable, ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors, solid, withAlpha } 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 { Dialog, DialogFooter, DialogHeader, DialogHeaderTitle } from "@lotics/ui/dialog";
+import { Divider } from "@lotics/ui/divider";
+import { Drawer } 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 { PressableRow } from "@lotics/ui/pressable_row";
+import { ProgressBar } from "@lotics/ui/progress_bar";
+import { Screen } from "@lotics/ui/screen_router";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Shift staffing — two-sided allocation: members SIGN UP, the
+// manager DECIDES and FILLS. Three bands reuse the execution grammar:
+// the coverage board is the overview (shifts × days, each cell its
+// filled/required state — press to open the slot), the signup rail is the
+// APPROVALS pattern (in-hours = one-click Accept; overtime = consequence
+// Dialog; decline = ⋯), and the slot drawer fills gaps with the DISPATCH
+// fit-gate (every candidate names its hours; same-slot members excluded,
+// double-shift days flagged). Accepting and assigning move the board live.
+// ─────────────────────────────────────────────────────────────────────────────
+
+const DAYS = [
+  { key: "mon", label: "Mon", date: "15/06" },
+  { key: "tue", label: "Tue", date: "16/06" },
+  { key: "wed", label: "Wed", date: "17/06" },
+  { key: "thu", label: "Thu", date: "18/06" },
+  { key: "fri", label: "Fri", date: "19/06" },
+  { key: "sat", label: "Sat", date: "20/06" },
+  { key: "sun", label: "Sun", date: "21/06" },
+] as const;
+
+const SHIFTS = [
+  { key: "morning", label: "Morning", hours: "06–14" },
+  { key: "afternoon", label: "Afternoon", hours: "14–22" },
+  { key: "night", label: "Night", hours: "22–06" },
+] as const;
+
+type DayKey = (typeof DAYS)[number]["key"];
+type ShiftKey = (typeof SHIFTS)[number]["key"];
+type SlotId = `${DayKey}-${ShiftKey}`;
+
+const MEMBERS = [
+  "Sarah Chen", "David Park", "Maria Lopez", "James Wu", "Emma Davis",
+  "Daniel Reed", "Olivia Grant", "Victor Lane", "Nora Walsh", "Tom Becker",
+  "Ray Santos", "Ken Adachi",
+];
+
+/** Required headcount per slot — weekends run lighter, nights always 2. */
+const required = (d: DayKey, s: ShiftKey): number =>
+  s === "night" ? 2 : d === "sat" || d === "sun" ? 2 : 3;
+
+const slotId = (d: DayKey, s: ShiftKey): SlotId => `${d}-${s}`;
+const SHIFT_HOURS = 8;
+const WEEK_LIMIT = 40;
+
+// The week as the manager finds it: mornings mostly staffed, the back half
+// of the week and nights still open.
+const INITIAL_ASSIGNED: Record<SlotId, string[]> = {
+  "mon-morning": ["Sarah Chen", "David Park", "Maria Lopez"],
+  "mon-afternoon": ["James Wu", "Emma Davis", "Daniel Reed"],
+  "mon-night": ["Tom Becker", "Ray Santos"],
+  "tue-morning": ["Sarah Chen", "Olivia Grant", "Victor Lane"],
+  "tue-afternoon": ["James Wu", "Nora Walsh"],
+  "tue-night": ["Ken Adachi"],
+  "wed-morning": ["David Park", "Maria Lopez", "Olivia Grant"],
+  "wed-afternoon": ["Emma Davis", "Daniel Reed", "Sarah Chen"],
+  "wed-night": ["Tom Becker", "Ray Santos"],
+  "thu-morning": ["Sarah Chen", "Victor Lane", "James Wu"],
+  "thu-afternoon": ["Nora Walsh"],
+  "thu-night": [],
+  "fri-morning": ["David Park", "Maria Lopez"],
+  "fri-afternoon": ["James Wu"],
+  "fri-night": ["Ken Adachi"],
+  "sat-morning": ["Olivia Grant", "Victor Lane"],
+  "sat-afternoon": ["Emma Davis"],
+  "sat-night": [],
+  "sun-morning": ["Nora Walsh", "Sarah Chen"],
+  "sun-afternoon": ["James Wu"],
+  "sun-night": ["Tom Becker"],
+} as Record<SlotId, string[]>;
+
+interface Signup {
+  id: string;
+  member: string;
+  day: DayKey;
+  shift: ShiftKey;
+}
+
+const INITIAL_SIGNUPS: Signup[] = [
+  { id: "su1", member: "Daniel Reed", day: "thu", shift: "afternoon" },
+  { id: "su2", member: "Ken Adachi", day: "thu", shift: "night" },
+  { id: "su3", member: "Ray Santos", day: "thu", shift: "night" },
+  { id: "su4", member: "Sarah Chen", day: "fri", shift: "afternoon" },
+  { id: "su5", member: "Tom Becker", day: "sat", shift: "night" },
+  { id: "su6", member: "Maria Lopez", day: "sun", shift: "afternoon" },
+  { id: "su7", member: "James Wu", day: "sat", shift: "night" },
+];
+
+const dayOf = (k: DayKey) => DAYS.find((d) => d.key === k)!;
+const shiftOf = (k: ShiftKey) => SHIFTS.find((s) => s.key === k)!;
+const slotLabel = (d: DayKey, s: ShiftKey) => `${dayOf(d).label} ${dayOf(d).date} · ${shiftOf(s).label} ${shiftOf(s).hours}`;
+
+function KVRow({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 28 }}>
+      <Text size="sm" color="muted" style={{ flex: 1 }}>{label}</Text>
+      {children}
+    </View>
+  );
+}
+
+/** Overtime acceptance is a consequence gate, not a click. */
+function OvertimeGate({ label, hoursAfter, onConfirm }: { label: string; hoursAfter: number; onConfirm: () => void }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button title="Accept overtime" color="primary" onPress={() => setOpen(true)} />
+      <Dialog width={440} open={open} onOpenChange={setOpen}>
+        <Screen route="">
+          <DialogHeader>
+            <DialogHeaderTitle>Accept into overtime</DialogHeaderTitle>
+          </DialogHeader>
+          <View style={{ padding: 24 }}>
+            <Text size="sm" color="muted">
+              {`${label} would be at ${hoursAfter}h this week — over the ${WEEK_LIMIT}h limit. Accepting books the extra hours as overtime and is recorded in the weekly staffing report.`}
+            </Text>
+          </View>
+          <DialogFooter>
+            <Button title="Cancel" color="secondary" onPress={() => setOpen(false)} />
+            <Button title="Accept and book overtime" color="primary" onPress={() => { setOpen(false); onConfirm(); }} />
+          </DialogFooter>
+        </Screen>
+      </Dialog>
+    </>
+  );
+}
+
+export function TplShifts() {
+  const [assigned, setAssigned] = useState<Record<SlotId, string[]>>(INITIAL_ASSIGNED);
+  const [signups, setSignups] = useState<Signup[]>(INITIAL_SIGNUPS);
+  const [openSlot, setOpenSlot] = useState<SlotId | null>(null);
+
+  const hoursOf = (member: string) =>
+    Object.values(assigned).reduce((h, list) => h + (list.includes(member) ? SHIFT_HOURS : 0), 0);
+
+  const accept = (su: Signup) => {
+    setAssigned((prev) => ({ ...prev, [slotId(su.day, su.shift)]: [...prev[slotId(su.day, su.shift)], su.member] }));
+    setSignups((prev) => prev.filter((s) => s.id !== su.id));
+  };
+  const decline = (su: Signup) => setSignups((prev) => prev.filter((s) => s.id !== su.id));
+  const assign = (slot: SlotId, member: string) =>
+    setAssigned((prev) => ({ ...prev, [slot]: [...prev[slot], member] }));
+  const unassign = (slot: SlotId, member: string) =>
+    setAssigned((prev) => ({ ...prev, [slot]: prev[slot].filter((m) => m !== member) }));
+
+  const allSlots: { day: DayKey; shift: ShiftKey }[] = SHIFTS.flatMap((s) => DAYS.map((d) => ({ day: d.key, shift: s.key })));
+  const totalRequired = allSlots.reduce((n, x) => n + required(x.day, x.shift), 0);
+  const totalFilled = allSlots.reduce((n, x) => n + Math.min(assigned[slotId(x.day, x.shift)].length, required(x.day, x.shift)), 0);
+  const unfilled = allSlots.filter((x) => assigned[slotId(x.day, x.shift)].length < required(x.day, x.shift)).length;
+  const scheduled = new Set(Object.values(assigned).flat()).size;
+
+  // The drawer walks the board in reading order (shift rows × days).
+  const openIdx = openSlot ? allSlots.findIndex((x) => slotId(x.day, x.shift) === openSlot) : -1;
+  const open = openIdx >= 0 ? allSlots[openIdx] : null;
+  const openAssigned = openSlot ? assigned[openSlot] : [];
+  const openRequired = open ? required(open.day, open.shift) : 0;
+  const openSignups = open ? signups.filter((s) => s.day === open.day && s.shift === open.shift) : [];
+
+  const coverageColor = (filled: number, req: number) =>
+    filled >= req ? solid("emerald") : filled === 0 ? solid("red") : solid("amber");
+
+  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">Shift staffing · week 15–21/06</Text>
+          <Text size="sm" color="muted">Members sign up, you allocate — fill every slot without burning anyone out</Text>
+        </View>
+
+        <KPIStrip
+          items={[
+            { label: "Coverage", value: Math.round((totalFilled / totalRequired) * 100), format: "percentage", info: "Filled positions vs required across every slot this week. The board's job is 100% with nobody over 40h." },
+            { label: "Unfilled slots", value: unfilled, format: "number", tone: unfilled > 0 ? "danger" : "default", caption: "red and amber cells below" },
+            { label: "Pending signups", value: signups.length, format: "number", tone: signups.length > 0 ? "warning" : "default", info: "Members asking for shifts — accept in one click when it keeps them inside 40h; overtime needs the consequence dialog." },
+            { label: "Scheduled members", value: scheduled, format: "number", caption: `of ${MEMBERS.length} on the roster` },
+          ]}
+        />
+
+        {/* the coverage board — shifts × days, every cell a door */}
+        <Card style={{ padding: 0 }}>
+          <CardHeader>
+            <CardHeaderTitle info="Filled / required per slot. Green is covered, amber is short, red is empty — press any cell to work that slot.">
+              Coverage board
+            </CardHeaderTitle>
+          </CardHeader>
+          <View style={{ paddingHorizontal: 20, paddingVertical: 16, gap: 6 }}>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+              <View style={{ width: 110 }} />
+              {DAYS.map((d) => (
+                <View key={d.key} style={{ flex: 1, alignItems: "center" }}>
+                  <Text size="xs" color="muted" transform="uppercase">{d.label}</Text>
+                  <Text size="xs" color="muted" tabular>{d.date}</Text>
+                </View>
+              ))}
+            </View>
+            {SHIFTS.map((s) => (
+              <View key={s.key} style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+                <View style={{ width: 110 }}>
+                  <Text size="sm">{s.label}</Text>
+                  <Text size="xs" color="muted" tabular>{s.hours}</Text>
+                </View>
+                {DAYS.map((d) => {
+                  const id = slotId(d.key, s.key);
+                  const filled = assigned[id].length;
+                  const req = required(d.key, s.key);
+                  const color = coverageColor(filled, req);
+                  const isOpen = openSlot === id;
+                  return (
+                    <Pressable
+                      key={d.key}
+                      accessibilityRole="button"
+                      accessibilityLabel={`${slotLabel(d.key, s.key)}: ${filled} of ${req} filled`}
+                      onPress={() => setOpenSlot(id)}
+                      style={{
+                        flex: 1,
+                        minHeight: 44,
+                        borderRadius: 8,
+                        alignItems: "center",
+                        justifyContent: "center",
+                        backgroundColor: withAlpha(color, filled >= req ? 0.12 : 0.16),
+                        borderWidth: 2,
+                        borderColor: isOpen ? colors.zinc[900] : "transparent",
+                      }}
+                    >
+                      <Text size="sm" weight="medium" tabular>{`${filled}/${req}`}</Text>
+                    </Pressable>
+                  );
+                })}
+              </View>
+            ))}
+          </View>
+          <CardFooter>
+            <Text size="xs" color="muted" tabular style={{ flex: 1 }}>
+              {`${totalFilled} of ${totalRequired} positions filled · accepting a signup or adding a member updates the board live`}
+            </Text>
+          </CardFooter>
+        </Card>
+
+        {/* the signup inbox — verdicts, with hours as the policy band */}
+        <Card style={{ padding: 0 }}>
+          <CardHeader>
+            <CardHeaderTitle info="Members asking for shifts, oldest first. The hours column shows the week AFTER accepting — inside 40h is one click; overtime gets a consequence dialog; ⋯ declines.">
+              Pending signups
+            </CardHeaderTitle>
+          </CardHeader>
+          {signups.length === 0 ? (
+            <EmptyState message="No pending signups" hint="New requests appear here the moment members ask for a shift" />
+          ) : (
+            signups.map((su, i) => {
+              const hoursAfter = hoursOf(su.member) + SHIFT_HOURS;
+              const overtime = hoursAfter > WEEK_LIMIT;
+              const slotFull = assigned[slotId(su.day, su.shift)].length >= required(su.day, su.shift);
+              return (
+                <View key={su.id}>
+                  {i > 0 ? <Divider /> : null}
+                  <PressableRow onPress={() => setOpenSlot(slotId(su.day, su.shift))} selected={openSlot === slotId(su.day, su.shift)}>
+                    <Pressable
+                      accessibilityRole="button"
+                      accessibilityLabel={`Open slot for ${su.member}'s signup`}
+                      onPress={() => setOpenSlot(slotId(su.day, su.shift))}
+                      style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 12, minHeight: 52 }}
+                    >
+                      <Avatar name={su.member} size={28} />
+                      <View style={{ flex: 1, gap: 0 }}>
+                        <Text size="sm" numberOfLines={1}>{su.member}</Text>
+                        <Text size="xs" color="muted">{slotLabel(su.day, su.shift)}</Text>
+                      </View>
+                      {slotFull ? <Badge variant="dot" label="Slot already full" color="zinc" /> : null}
+                      <Text size="sm" tabular color={overtime ? "danger" : "muted"} style={{ width: 96 }} align="right">
+                        {`${hoursOf(su.member)}h → ${hoursAfter}h`}
+                      </Text>
+                      <View style={{ width: 92 }}>
+                        {overtime ? <Badge variant="dot" label="Overtime" color="red" /> : <Badge variant="dot" label="In hours" color="emerald" />}
+                      </View>
+                    </Pressable>
+                    {overtime ? (
+                      <OvertimeGate label={su.member} hoursAfter={hoursAfter} onConfirm={() => accept(su)} />
+                    ) : (
+                      <Button title="Accept" color="secondary" onPress={() => accept(su)} />
+                    )}
+                    <ActionMenu
+                      accessibilityLabel={`Actions for ${su.member}'s signup`}
+                      items={[{ key: "decline", label: "Decline signup", icon: "ban", danger: true, onPress: () => decline(su) }]}
+                    />
+                  </PressableRow>
+                </View>
+              );
+            })
+          )}
+          <CardFooter>
+            <Text size="xs" color="muted" tabular style={{ flex: 1 }}>
+              {`${signups.length} pending · first come, first served unless coverage says otherwise`}
+            </Text>
+          </CardFooter>
+        </Card>
+      </View>
+
+      {open !== null && openSlot !== null ? (
+        <Drawer
+          open
+          onOpenChange={(o) => !o && setOpenSlot(null)}
+          title={slotLabel(open.day, open.shift)}
+          width={460}
+          onPrev={openIdx > 0 ? () => setOpenSlot(slotId(allSlots[openIdx - 1].day, allSlots[openIdx - 1].shift)) : undefined}
+          onNext={openIdx < allSlots.length - 1 ? () => setOpenSlot(slotId(allSlots[openIdx + 1].day, allSlots[openIdx + 1].shift)) : undefined}
+          position={`${openIdx + 1}/${allSlots.length}`}
+        >
+          <ScrollView key={openSlot} style={{ flex: 1 }} contentContainerStyle={{ padding: 24, gap: 16 }}>
+            <ProgressBar
+              title="Coverage"
+              value={openAssigned.length}
+              max={openRequired}
+              format="fraction"
+              color={solid("amber")}
+              completeColor={solid("emerald")}
+            />
+            <View style={{ gap: 8 }}>
+              <Text size="sm" weight="semibold">On this shift</Text>
+              {openAssigned.length === 0 ? (
+                <Text size="sm" color="muted">Nobody yet — accept a signup or add a member below.</Text>
+              ) : (
+                openAssigned.map((m) => (
+                  <View key={m} style={{ flexDirection: "row", alignItems: "center", gap: 10, minHeight: 36 }}>
+                    <Avatar name={m} size={28} />
+                    <Text size="sm" style={{ flex: 1 }}>{m}</Text>
+                    <Text size="xs" color="muted" tabular>{`${hoursOf(m)}h this week`}</Text>
+                    <ActionMenu
+                      accessibilityLabel={`Actions for ${m}`}
+                      items={[{ key: "remove", label: "Remove from shift", icon: "ban", danger: true, onPress: () => unassign(openSlot, m) }]}
+                    />
+                  </View>
+                ))
+              )}
+            </View>
+            {openSignups.length > 0 ? (
+              <View style={{ gap: 8 }}>
+                <Text size="sm" weight="semibold">Asked for this shift</Text>
+                {openSignups.map((su) => {
+                  const hoursAfter = hoursOf(su.member) + SHIFT_HOURS;
+                  return (
+                    <View key={su.id} style={{ flexDirection: "row", alignItems: "center", gap: 10, minHeight: 36 }}>
+                      <Avatar name={su.member} size={28} />
+                      <Text size="sm" style={{ flex: 1 }}>{su.member}</Text>
+                      <Text size="xs" color={hoursAfter > WEEK_LIMIT ? "danger" : "muted"} tabular>{`→ ${hoursAfter}h`}</Text>
+                      {hoursAfter > WEEK_LIMIT ? (
+                        <OvertimeGate label={su.member} hoursAfter={hoursAfter} onConfirm={() => accept(su)} />
+                      ) : (
+                        <Button title="Accept" color="secondary" onPress={() => accept(su)} />
+                      )}
+                    </View>
+                  );
+                })}
+              </View>
+            ) : null}
+            <Divider />
+            <KVRow label="Required">
+              <Text size="sm" tabular>{`${openRequired} members`}</Text>
+            </KVRow>
+          </ScrollView>
+          <View style={{ borderTopWidth: 1, borderTopColor: colors.border, paddingHorizontal: 20, paddingVertical: 14, flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 12 }}>
+            {/* the dispatch fit-gate: every candidate names its week; the
+                slot's own members are excluded, overtime is visible */}
+            <Popover side="top" align="end">
+              <PopoverTrigger>
+                <Button title="Add member" color="secondary" />
+              </PopoverTrigger>
+              <PopoverContent style={{ width: 320 }}>
+                <View style={{ paddingHorizontal: 12, paddingTop: 10, paddingBottom: 6 }}>
+                  <Text size="xs" color="muted" transform="uppercase">{`Fill ${slotLabel(open.day, open.shift)}`}</Text>
+                </View>
+                <ScrollView style={{ maxHeight: 280 }} contentContainerStyle={{ paddingHorizontal: 6, paddingBottom: 8, gap: 2 }}>
+                  {MEMBERS.filter((m) => !openAssigned.includes(m)).map((m) => {
+                    const after = hoursOf(m) + SHIFT_HOURS;
+                    const sameDay = SHIFTS.some((s) => s.key !== open.shift && assigned[slotId(open.day, s.key)].includes(m));
+                    return (
+                      <MenuListItem
+                        key={m}
+                        icon={<Avatar name={m} size={28} />}
+                        title={m}
+                        description={
+                          after > WEEK_LIMIT
+                            ? `${hoursOf(m)}h → ${after}h — overtime`
+                            : sameDay
+                              ? `${hoursOf(m)}h this week — already works ${dayOf(open.day).label}`
+                              : `${hoursOf(m)}h this week`
+                        }
+                        onPress={() => assign(openSlot, m)}
+                      />
+                    );
+                  })}
+                </ScrollView>
+              </PopoverContent>
+            </Popover>
+            <Button title="Open shift record" color="primary" onPress={() => {}} />
+          </View>
+        </Drawer>
+      ) : null}
+    </ScrollView>
+  );
+}