@lotics/ui 3.6.0 → 4.0.0

package/examples/tpl_calendar.tsx

@@ -0,0 +1,288 @@
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors, solid, type ColorName } from "@lotics/ui/colors";
+import { ActionMenu } from "@lotics/ui/action_menu";
+import { Badge } from "@lotics/ui/badge";
+import { Button } from "@lotics/ui/button";
+import { Card, CardHeader, CardHeaderTitle, CardHeaderMeta } from "@lotics/ui/card";
+import { Divider } from "@lotics/ui/divider";
+import { Drawer } from "@lotics/ui/drawer";
+import { ListItem } from "@lotics/ui/list_item";
+import {
+  CalendarView,
+  addDays,
+  isSameDay,
+  startOfWeek,
+  viewTitle,
+  type CalendarEvent,
+} from "@lotics/ui/calendar";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Calendar & planning — the delivery/schedule desk. One real
+// CalendarView (week grid) over the current week's deliveries / reconciliations /
+// customer visits, then a "Today" agenda card listing today's three slots.
+//
+// Grammar: zinc-50 canvas · header band (title + week label + Today) ·
+// calendar card at a real height · agenda card of pressable rows. Every slot
+// is a door: press (grid event or agenda row) opens the sequenced workspace
+// Drawer; agenda rows also carry the ⋯ quick-actions menu. Event colors carry
+// meaning: blue = delivery, emerald = reconciliation, amber = customer.
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface AgendaMeta {
+  diaDiem: string;
+  trangThai: string;
+  mau: ColorName;
+}
+
+// Mock data anchored to the real current week so the page is evergreen.
+const NOW = new Date();
+const TODAY = addDays(NOW, 0); // start of today
+const WEEK_START = startOfWeek(TODAY, 1);
+const TODAY_IDX = Math.round((TODAY.getTime() - WEEK_START.getTime()) / 86_400_000);
+// Four weekday slots for the rest of the week — never colliding with today,
+// so the agenda below always shows exactly today's three slots.
+const SLOTS = [0, 1, 2, 3, 4, 5].filter((d) => d !== TODAY_IDX).slice(0, 4);
+
+function evt(
+  id: string,
+  day: Date,
+  h: number,
+  m: number,
+  durMin: number,
+  title: string,
+  color: string,
+  data: AgendaMeta,
+): CalendarEvent<AgendaMeta> {
+  const start = new Date(day.getFullYear(), day.getMonth(), day.getDate(), h, m);
+  return { id, title, start, end: new Date(start.getTime() + durMin * 60_000), color, data };
+}
+
+const EVENTS: CalendarEvent<AgendaMeta>[] = [
+  // Today — the dispatch desk's three slots.
+  evt("hn-1", TODAY, 8, 0, 90, "Deliver APEX PLASTICS — VTD063518", solid("blue"), {
+    diaDiem: "Eastport industrial zone",
+    trangThai: "Truck loaded",
+    mau: "blue",
+  }),
+  evt("hn-2", TODAY, 10, 30, 60, "Reconcile delivery notes — HANDAN", solid("emerald"), {
+    diaDiem: "Head office",
+    trangThai: "Prepared",
+    mau: "emerald",
+  }),
+  evt("hn-3", TODAY, 15, 0, 60, "Customer sample review — VITTORIA", solid("amber"), {
+    diaDiem: "Factory sample room",
+    trangThai: "Awaiting confirmation",
+    mau: "amber",
+  }),
+  // The rest of the week.
+  evt("t-1", addDays(WEEK_START, SLOTS[0]), 8, 0, 90, "Deliver KOMASPEC — blanks 675×325", solid("blue"), {
+    diaDiem: "Northgate industrial park",
+    trangThai: "Truck loaded",
+    mau: "blue",
+  }),
+  evt("t-2", addDays(WEEK_START, SLOTS[1]), 14, 0, 60, "Reconcile delivery notes — NEWTECONS", solid("emerald"), {
+    diaDiem: "Head office",
+    trangThai: "Prepared",
+    mau: "emerald",
+  }),
+  evt("t-3", addDays(WEEK_START, SLOTS[2]), 10, 0, 60, "Kick off the VITTORIA order", solid("amber"), {
+    diaDiem: "Online meeting",
+    trangThai: "Awaiting confirmation",
+    mau: "amber",
+  }),
+  evt("t-4", addDays(WEEK_START, SLOTS[3]), 8, 30, 90, "Deliver BRIGHTCELL BATTERIES — TS1250", solid("blue"), {
+    diaDiem: "Brightcell plant, Eastport",
+    trangThai: "Truck loaded",
+    mau: "blue",
+  }),
+  // All-week banner: an internal task spanning two mid-week days.
+  {
+    id: "kk-1",
+    title: "Q2 stock count",
+    start: addDays(WEEK_START, 2),
+    end: addDays(WEEK_START, 4),
+    allDay: true,
+    color: colors.zinc[500],
+  },
+];
+
+const CAL_LABELS = {
+  today: "Today",
+  month: "Month",
+  week: "Week",
+  day: "Day",
+  previous: "Previous",
+  next: "Next",
+  allDay: "all day",
+  more: (n: number) => `+${n} more`,
+};
+
+const p2 = (n: number) => String(n).padStart(2, "0");
+const fmtTime = (d: Date) => `${p2(d.getHours())}:${p2(d.getMinutes())}`;
+const fmtDate = (d: Date) => `${p2(d.getDate())}/${p2(d.getMonth() + 1)}`;
+
+// The drawer sequences over the week's timed slots in chronological order —
+// the dispatcher's triage rhythm: open one, ◀ ▶ / ←→ through the rest. The
+// all-day banner opens the same drawer but sits outside the sequence.
+const SEQUENCE = EVENTS.filter((e) => !e.allDay).sort(
+  (a, b) => a.start.getTime() - b.start.getTime(),
+);
+
+// Quick operations for a schedule slot — the ⋯ door on each agenda row
+// (press = workspace drawer; ⋯ = these). Destructive last.
+const SLOT_ACTIONS = [
+  { key: "sua", label: "Edit slot", icon: "pencil" as const, onPress: () => {} },
+  { key: "nhac", label: "Remind owner", icon: "bell" as const, onPress: () => {} },
+  { key: "huy", label: "Cancel slot", icon: "trash" as const, danger: true, onPress: () => {} },
+];
+
+// Compact slot workspace — identity + key facts + the two real actions.
+function SlotWorkspace({ e }: { e: CalendarEvent<AgendaMeta> }) {
+  const thoiGian = e.allDay
+    ? `${fmtDate(e.start)} – ${e.end ? fmtDate(e.end) : ""} · all day`
+    : `${fmtDate(e.start)} · ${fmtTime(e.start)} – ${e.end ? fmtTime(e.end) : ""}`;
+  const rows: [string, React.ReactNode][] = [
+    ["Time", <Text key="tg" size="sm" tabular>{thoiGian}</Text>],
+    ...(e.data
+      ? ([
+          ["Location", <Text key="dd" size="sm">{e.data.diaDiem}</Text>],
+          ["Status", <Badge key="tt" label={e.data.trangThai} color={e.data.mau} />],
+        ] as [string, React.ReactNode][])
+      : []),
+  ];
+  return (
+    <>
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 24, gap: 10 }}>
+        {rows.map(([label, value], i) => (
+          <View key={label} style={{ gap: 10 }}>
+            {i > 0 ? <Divider /> : null}
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 24 }}>
+              <Text size="sm" color="muted" style={{ width: 104 }}>{label}</Text>
+              {value}
+            </View>
+          </View>
+        ))}
+      </ScrollView>
+      <View
+        style={{
+          borderTopWidth: 1,
+          borderTopColor: colors.border,
+          paddingHorizontal: 20,
+          paddingVertical: 14,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          gap: 12,
+        }}
+      >
+        <Button title="Edit slot" color="secondary" onPress={() => {}} />
+        <Button title="Open record" color="primary" onPress={() => {}} />
+      </View>
+    </>
+  );
+}
+
+export function TplCalendar() {
+  // "Today" remounts the calendar — CalendarView owns date+view internally,
+  // so a fresh mount is the supported way to jump back to the current week.
+  const [calKey, setCalKey] = useState(0);
+  const [openId, setOpenId] = useState<string | null>(null);
+
+  const openEvent = EVENTS.find((e) => e.id === openId) ?? null;
+  const seqIndex = openEvent ? SEQUENCE.findIndex((e) => e.id === openEvent.id) : -1;
+
+  const todayEvents = EVENTS.filter((e) => !e.allDay && isSameDay(e.start, TODAY)).sort(
+    (a, b) => a.start.getTime() - b.start.getTime(),
+  );
+  const todayLabel = new Intl.DateTimeFormat("vi", {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+  }).format(TODAY);
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+        <View style={{ width: "100%", maxWidth: 1040, alignSelf: "center", gap: 16 }}>
+        {/* header band */}
+        <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12 }}>
+          <View style={{ gap: 2, flex: 1 }}>
+            <Text size="xl" weight="semibold">Calendar & planning</Text>
+            <Text size="sm" color="muted">This week — deliveries, reconciliations and customer visits</Text>
+          </View>
+          <Text size="sm" color="muted" tabular>
+            {viewTitle("week", TODAY, 1, "vi")}
+          </Text>
+          <Button title="Today" color="secondary" onPress={() => setCalKey((k) => k + 1)} />
+        </View>
+
+        {/* the calendar — real week grid, internal toolbar + scroll */}
+        <Card style={{ padding: 0, height: 520, overflow: "hidden" }}>
+          <CalendarView<AgendaMeta>
+            key={calKey}
+            events={EVENTS}
+            defaultView="week"
+            defaultDate={TODAY}
+            weekStartsOn={1}
+            locale="vi"
+            labels={CAL_LABELS}
+            onEventPress={(e) => setOpenId(e.id)}
+          />
+        </Card>
+
+        {/* today — agenda */}
+        <Card style={{ padding: 0 }}>
+          <CardHeader>
+            <CardHeaderTitle>Today</CardHeaderTitle>
+            <CardHeaderMeta>{`${todayLabel} · ${todayEvents.length} slots`}</CardHeaderMeta>
+          </CardHeader>
+          <View style={{ paddingHorizontal: 16, paddingVertical: 6 }}>
+            {todayEvents.map((e) => (
+              <ListItem
+                key={e.id}
+                left={
+                  <Text size="sm" weight="medium" tabular style={{ width: 104 }}>
+                    {fmtTime(e.start)} – {e.end ? fmtTime(e.end) : ""}
+                  </Text>
+                }
+                title={e.title}
+                description={e.data?.diaDiem}
+                selected={e.id === openId}
+                onPress={() => setOpenId(e.id)}
+                right={
+                  <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+                    {e.data ? <Badge label={e.data.trangThai} color={e.data.mau} /> : null}
+                    <ActionMenu items={SLOT_ACTIONS} accessibilityLabel={`Actions for ${e.title}`} />
+                  </View>
+                }
+              />
+            ))}
+          </View>
+        </Card>
+        </View>
+      </ScrollView>
+
+      {/* the shared slot workspace — body keyed by event id; ◀ ▶ / ←→ step
+          through the week's timed slots in start-time order */}
+      {openEvent ? (
+        <Drawer
+          open
+          onOpenChange={(o) => !o && setOpenId(null)}
+          title={openEvent.title}
+          width={480}
+          onPrev={seqIndex > 0 ? () => setOpenId(SEQUENCE[seqIndex - 1].id) : undefined}
+          onNext={
+            seqIndex >= 0 && seqIndex < SEQUENCE.length - 1
+              ? () => setOpenId(SEQUENCE[seqIndex + 1].id)
+              : undefined
+          }
+          position={seqIndex >= 0 ? `${seqIndex + 1}/${SEQUENCE.length}` : undefined}
+        >
+          <SlotWorkspace key={openEvent.id} e={openEvent} />
+        </Drawer>
+      ) : null}
+    </View>
+  );
+}