Demo Slots calendar: week grid, model filter, right-panel booking details with car images

src/api/viewService.ts

@@ -381,3 +381,35 @@ export interface AuditEntry {
 export function getAuditLog(instanceId: string): Promise<AuditEntry[]> {
   return request("GET", `/app/${APP_ID}/view/audit?instance_id=${encodeURIComponent(instanceId)}`);
 }
+
+// ---------------------------------------------------------------------------
+// RDBMS lookup records — used by the demo calendar to pull rows from the
+// `mahindra_demo` schema via the lookup-field config on the INIT activity.
+// ---------------------------------------------------------------------------
+
+export interface RdbmsLookupResponse {
+  records: Record<string, unknown>[];
+  total: number;
+  limit: number;
+  offset: number;
+}
+
+export interface RdbmsLookupQuery {
+  workflowId: number;
+  activityId: string;
+  fieldId: string;
+  limit?: number;
+  offset?: number;
+  search?: string;
+}
+
+export function fetchRdbmsLookupRecords(templateUuid: string, q: RdbmsLookupQuery): Promise<RdbmsLookupResponse> {
+  return request("POST", `/app/${APP_ID}/rdbms-templates/${encodeURIComponent(templateUuid)}/records`, {
+    workflow_id: q.workflowId,
+    activity_id: q.activityId,
+    field_id: q.fieldId,
+    limit: q.limit ?? 1000,
+    offset: q.offset ?? 0,
+    search: q.search ?? "",
+  });
+}

src/components/variants/Calendar.tsx

@@ -0,0 +1,562 @@
+import { useEffect, useMemo, useState } from "react";
+import { ChevronLeft, ChevronRight, Phone, X, Calendar as CalendarIcon } from "lucide-react";
+import { fetchRdbmsLookupRecords } from "../../api/viewService";
+import { CALENDAR_LOOKUPS, WORKFLOW_NUMERIC_ID, ACTIVITY_IDS } from "../../config";
+
+const ACCENT      = "#e31837";
+const ACCENT_SOFT = "#fde2e8";
+const TM_NAVY     = "#061f5c";
+const TM_BORDER   = "#e4e4ed";
+const INK         = "#17181a";
+const IST_OFFSET_MIN = 330;
+
+interface TestDrive {
+  id: number;
+  dealer_id: number;
+  car_id: number;
+  slot_start: string;
+  slot_end: string;
+  status: "available" | "booked";
+  customer_name?: string | null;
+  customer_phone?: string | null;
+  booked_at?: string | null;
+  completed_at?: string | null;
+  feedback_rating?: number | null;
+  feedback_liked_most?: string | null;
+  feedback_concern?: string | null;
+  feedback_would_recommend?: boolean | null;
+  feedback_collected_at?: string | null;
+  notes?: string | null;
+}
+
+interface Car {
+  id: number;
+  model: string;
+  variant?: string | null;
+  color?: string | null;
+  price_inr?: number | string | null;
+}
+
+function carSlug(model: string): string {
+  return model.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+}
+function carImageUrl(model: string): string {
+  return `${import.meta.env.BASE_URL}cars/${carSlug(model)}.jpg`;
+}
+function fmtPriceInr(v: number | string | null | undefined): string {
+  if (v == null || v === "") return "—";
+  const n = typeof v === "string" ? Number(v) : v;
+  if (!Number.isFinite(n)) return String(v);
+  return n.toLocaleString("en-IN", { style: "currency", currency: "INR", maximumFractionDigits: 0 });
+}
+
+function toIST(iso: string): Date {
+  // Shift UTC to IST by adding 5:30. Returns a Date whose UTC fields equal IST wall-clock.
+  return new Date(new Date(iso).getTime() + IST_OFFSET_MIN * 60_000);
+}
+function istDayKey(iso: string): string {
+  const d = toIST(iso);
+  return `${d.getUTCFullYear()}-${String(d.getUTCMonth() + 1).padStart(2, "0")}-${String(d.getUTCDate()).padStart(2, "0")}`;
+}
+function istTimeKey(iso: string): string {
+  const d = toIST(iso);
+  return `${String(d.getUTCHours()).padStart(2, "0")}:${String(d.getUTCMinutes()).padStart(2, "0")}`;
+}
+function fmtDayLabel(key: string): { weekday: string; day: string; month: string } {
+  const [y, m, d] = key.split("-").map(Number);
+  const dt = new Date(Date.UTC(y, m - 1, d));
+  return {
+    weekday: dt.toLocaleDateString("en-US", { weekday: "short", timeZone: "UTC" }),
+    day: String(d).padStart(2, "0"),
+    month: dt.toLocaleDateString("en-US", { month: "short", timeZone: "UTC" }),
+  };
+}
+function addDaysKey(key: string, days: number): string {
+  const [y, m, d] = key.split("-").map(Number);
+  const dt = new Date(Date.UTC(y, m - 1, d + days));
+  return `${dt.getUTCFullYear()}-${String(dt.getUTCMonth() + 1).padStart(2, "0")}-${String(dt.getUTCDate()).padStart(2, "0")}`;
+}
+
+export function CalendarView() {
+  const [drives, setDrives] = useState<TestDrive[]>([]);
+  const [cars, setCars] = useState<Car[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [weekStart, setWeekStart] = useState<string | null>(null);
+  const [selected, setSelected] = useState<TestDrive | null>(null);
+  const [modelFilter, setModelFilter] = useState<string>("");
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    Promise.all([
+      fetchRdbmsLookupRecords(CALENDAR_LOOKUPS.TEST_DRIVES.rdbmsTemplateUuid, {
+        workflowId: WORKFLOW_NUMERIC_ID,
+        activityId: ACTIVITY_IDS.INIT_ACTIVITY,
+        fieldId: CALENDAR_LOOKUPS.TEST_DRIVES.fieldId,
+        limit: 1000,
+      }),
+      fetchRdbmsLookupRecords(CALENDAR_LOOKUPS.CARS.rdbmsTemplateUuid, {
+        workflowId: WORKFLOW_NUMERIC_ID,
+        activityId: ACTIVITY_IDS.INIT_ACTIVITY,
+        fieldId: CALENDAR_LOOKUPS.CARS.fieldId,
+        limit: 100,
+      }),
+    ])
+      .then(([td, c]) => {
+        if (cancelled) return;
+        setDrives((td.records as unknown as TestDrive[]) ?? []);
+        setCars((c.records as unknown as Car[]) ?? []);
+        const days = (td.records as unknown as TestDrive[])
+          .map((r) => istDayKey(r.slot_start))
+          .sort();
+        setWeekStart(days[0] ?? null);
+      })
+      .catch((e: any) => !cancelled && setError(e?.message ?? "Failed to load"))
+      .finally(() => !cancelled && setLoading(false));
+    return () => { cancelled = true; };
+  }, []);
+
+  const carById = useMemo(() => {
+    const m = new Map<number, Car>();
+    cars.forEach((c) => m.set(Number(c.id), c));
+    return m;
+  }, [cars]);
+
+  const models = useMemo(() => {
+    const set = new Set<string>();
+    cars.forEach((c) => c.model && set.add(c.model));
+    return Array.from(set).sort();
+  }, [cars]);
+
+  const visibleCars = useMemo(
+    () => (modelFilter ? cars.filter((c) => c.model === modelFilter) : cars),
+    [cars, modelFilter],
+  );
+
+  const weekDays = useMemo(() => {
+    if (!weekStart) return [];
+    return Array.from({ length: 7 }, (_, i) => addDaysKey(weekStart, i));
+  }, [weekStart]);
+
+  // time-slot keys present in the data, sorted
+  const timeSlots = useMemo(() => {
+    const set = new Set<string>();
+    drives.forEach((d) => set.add(istTimeKey(d.slot_start)));
+    return Array.from(set).sort();
+  }, [drives]);
+
+  // index drives by (day, time, car) for O(1) lookup
+  const grid = useMemo(() => {
+    const m = new Map<string, TestDrive>();
+    drives.forEach((d) => {
+      const key = `${istDayKey(d.slot_start)}|${istTimeKey(d.slot_start)}|${d.car_id}`;
+      m.set(key, d);
+    });
+    return m;
+  }, [drives]);
+
+  const visibleCarIds = useMemo(() => new Set(visibleCars.map((c) => Number(c.id))), [visibleCars]);
+
+  // For the visible week, count bookings per day for the header summary.
+  const bookingsByDay = useMemo(() => {
+    const m = new Map<string, number>();
+    drives.forEach((d) => {
+      if (d.status !== "booked") return;
+      if (!visibleCarIds.has(Number(d.car_id))) return;
+      const k = istDayKey(d.slot_start);
+      m.set(k, (m.get(k) ?? 0) + 1);
+    });
+    return m;
+  }, [drives, visibleCarIds]);
+
+  const totalBookings = useMemo(
+    () => drives.filter((d) => d.status === "booked" && visibleCarIds.has(Number(d.car_id))).length,
+    [drives, visibleCarIds],
+  );
+
+  if (loading) {
+    return <div className="text-stone-400 text-sm">Loading calendar…</div>;
+  }
+  if (error) {
+    return (
+      <div className="px-4 py-3 text-sm" style={{ background: ACCENT_SOFT, color: "#5f0229", border: `1px solid ${ACCENT}` }}>
+        Couldn't load calendar: {error}
+      </div>
+    );
+  }
+  if (!weekStart || timeSlots.length === 0) {
+    return <div className="text-stone-400 text-sm">No slots configured.</div>;
+  }
+
+  return (
+    <>
+      {/* Header — page title + week nav */}
+      <div className="mb-6 flex items-end justify-between gap-4 flex-wrap">
+        <div>
+          <div className="text-[11px] font-semibold uppercase tracking-[0.15em]" style={{ color: ACCENT }}>
+            Test-drive lifecycle
+          </div>
+          <h1 className="text-[24px] font-semibold tracking-tight leading-tight mt-1.5" style={{ color: INK }}>
+            Slots calendar
+          </h1>
+        </div>
+        <div className="flex items-center gap-3 flex-wrap">
+          <div className="relative">
+            <select
+              value={modelFilter}
+              onChange={(e) => setModelFilter(e.target.value)}
+              className="h-9 pl-3 pr-8 text-[12.5px] font-semibold bg-white appearance-none cursor-pointer focus:outline-none"
+              style={{ border: `1px solid ${TM_BORDER}`, color: INK, borderRadius: 4 }}
+            >
+              <option value="">All models</option>
+              {models.map((m) => <option key={m} value={m}>{m}</option>)}
+            </select>
+            <span className="absolute right-2.5 top-1/2 -translate-y-1/2 text-stone-400 pointer-events-none text-[10px]">▾</span>
+          </div>
+          <button
+            onClick={() => setWeekStart((k) => k && addDaysKey(k, -7))}
+            className="h-9 w-9 inline-flex items-center justify-center bg-white hover:bg-stone-50 transition-colors"
+            style={{ border: `1px solid ${TM_BORDER}`, color: INK }}
+            aria-label="Previous week"
+          >
+            <ChevronLeft size={16} />
+          </button>
+          <div className="text-[13px] font-semibold tabular-nums px-3" style={{ color: INK }}>
+            {fmtDayLabel(weekDays[0]).day} {fmtDayLabel(weekDays[0]).month} — {fmtDayLabel(weekDays[6]).day} {fmtDayLabel(weekDays[6]).month}
+          </div>
+          <button
+            onClick={() => setWeekStart((k) => k && addDaysKey(k, 7))}
+            className="h-9 w-9 inline-flex items-center justify-center bg-white hover:bg-stone-50 transition-colors"
+            style={{ border: `1px solid ${TM_BORDER}`, color: INK }}
+            aria-label="Next week"
+          >
+            <ChevronRight size={16} />
+          </button>
+        </div>
+      </div>
+
+      {/* Legend */}
+      <div className="mb-4 flex items-center gap-5 text-[11.5px] text-stone-500">
+        <div className="flex items-center gap-2">
+          <span className="w-3 h-3" style={{ background: ACCENT }} />
+          Booked
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="w-3 h-3 bg-white" style={{ border: `1px solid ${TM_BORDER}` }} />
+          Available
+        </div>
+        <div className="ml-auto text-stone-400">
+          {totalBookings} bookings across {weekDays.length} days
+        </div>
+      </div>
+
+      {/* Grid */}
+      <div className="bg-white overflow-x-auto" style={{ border: `1px solid ${TM_BORDER}` }}>
+        <table className="w-full" style={{ tableLayout: "fixed", borderCollapse: "collapse" }}>
+          <colgroup>
+            <col style={{ width: 80 }} />
+            {weekDays.map((d) => <col key={d} />)}
+          </colgroup>
+          <thead>
+            <tr>
+              <th className="text-left px-3 py-3 text-[10px] font-semibold uppercase tracking-[0.12em] text-stone-400" style={{ borderBottom: `1px solid ${TM_BORDER}` }}>
+                IST
+              </th>
+              {weekDays.map((dk) => {
+                const lbl = fmtDayLabel(dk);
+                const count = bookingsByDay.get(dk) ?? 0;
+                return (
+                  <th key={dk} className="text-left px-3 py-3" style={{ borderBottom: `1px solid ${TM_BORDER}`, borderLeft: `1px solid ${TM_BORDER}` }}>
+                    <div className="flex items-baseline justify-between gap-2">
+                      <div>
+                        <div className="text-[10px] font-semibold uppercase tracking-[0.12em] text-stone-400">{lbl.weekday}</div>
+                        <div className="text-[15px] font-bold leading-none mt-1 tabular-nums" style={{ color: INK }}>
+                          {lbl.day} <span className="text-[11px] font-medium text-stone-400 ml-0.5">{lbl.month}</span>
+                        </div>
+                      </div>
+                      {count > 0 && (
+                        <span className="text-[10px] font-bold tabular-nums text-white px-1.5 py-0.5" style={{ background: ACCENT }}>
+                          {count}
+                        </span>
+                      )}
+                    </div>
+                  </th>
+                );
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            {timeSlots.map((tk) => (
+              <tr key={tk}>
+                <td className="px-3 py-3 align-top text-[12px] font-semibold tabular-nums text-stone-500" style={{ borderTop: `1px solid ${TM_BORDER}` }}>
+                  {tk}
+                </td>
+                {weekDays.map((dk) => (
+                  <td key={dk + tk} className="px-2 py-2 align-top" style={{ borderTop: `1px solid ${TM_BORDER}`, borderLeft: `1px solid ${TM_BORDER}` }}>
+                    <div className="grid grid-cols-1 gap-1">
+                      {visibleCars.map((c) => {
+                        const cell = grid.get(`${dk}|${tk}|${Number(c.id)}`);
+                        if (!cell) {
+                          return (
+                            <div key={c.id} className="h-7 px-2 flex items-center text-[10.5px] text-stone-300" style={{ border: `1px dashed ${TM_BORDER}` }}>
+                              —
+                            </div>
+                          );
+                        }
+                        const booked = cell.status === "booked";
+                        return (
+                          <button
+                            key={c.id}
+                            onClick={() => booked && setSelected(cell)}
+                            className={`h-7 px-2 flex items-center justify-between gap-2 text-[10.5px] font-medium transition-colors ${booked ? "cursor-pointer" : "cursor-default"}`}
+                            style={
+                              booked
+                                ? { background: ACCENT, color: "white" }
+                                : { background: "white", color: "#a8a29e", border: `1px solid ${TM_BORDER}` }
+                            }
+                            title={booked ? `${cell.customer_name ?? "Booked"} · ${c.model}` : `Available · ${c.model}`}
+                          >
+                            <span className="truncate">{c.model}</span>
+                            {booked && cell.customer_name && (
+                              <span className="truncate font-semibold text-white/90">
+                                {cell.customer_name.split(" ")[0]}
+                              </span>
+                            )}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <BookingPanel
+        drive={selected}
+        car={selected ? carById.get(Number(selected.car_id)) : undefined}
+        onClose={() => setSelected(null)}
+      />
+    </>
+  );
+}
+
+function BookingPanel({ drive, car, onClose }: { drive: TestDrive | null; car: Car | undefined; onClose: () => void }) {
+  const open = !!drive;
+  return (
+    <>
+      <div
+        className={`fixed inset-0 z-40 transition-opacity duration-200 ${open ? "opacity-100" : "opacity-0 pointer-events-none"}`}
+        style={{ background: "rgba(6,31,92,0.35)" }}
+        onClick={onClose}
+      />
+      <aside
+        className={`fixed top-0 right-0 bottom-0 z-50 w-full max-w-md bg-white shadow-2xl flex flex-col transition-transform duration-200 ease-out ${open ? "translate-x-0" : "translate-x-full"}`}
+        style={{ borderLeft: `1px solid ${TM_BORDER}` }}
+        role="dialog"
+        aria-hidden={!open}
+      >
+        {drive && <BookingPanelBody drive={drive} car={car} onClose={onClose} />}
+      </aside>
+    </>
+  );
+}
+
+function BookingPanelBody({ drive, car, onClose }: { drive: TestDrive; car: Car | undefined; onClose: () => void }) {
+  const day = fmtDayLabel(istDayKey(drive.slot_start));
+  const time = `${istTimeKey(drive.slot_start)} – ${istTimeKey(drive.slot_end)} IST`;
+  const hasFeedback = drive.feedback_rating != null || !!drive.feedback_liked_most || !!drive.feedback_concern || drive.feedback_would_recommend != null;
+  const completed = !!drive.completed_at;
+  return (
+    <>
+      <div className="relative px-6 py-5 text-white shrink-0" style={{ background: TM_NAVY }}>
+        <span className="absolute top-0 left-0 bottom-0 w-1.5" style={{ background: ACCENT }} />
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <div className="text-[11px] font-semibold uppercase tracking-[0.15em]" style={{ color: ACCENT_SOFT }}>
+              Booking
+            </div>
+            <div className="text-[22px] font-bold leading-tight mt-1">
+              {drive.customer_name ?? "—"}
+            </div>
+            <div className="mt-2 text-[12.5px] text-white/80 flex items-center gap-2 flex-wrap">
+              <CalendarIcon size={13} />
+              <span className="font-semibold">{day.weekday} {day.day} {day.month}</span>
+              <span className="text-white/40">·</span>
+              <span className="tabular-nums">{time}</span>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-white/70 hover:text-white transition-colors shrink-0"
+            aria-label="Close"
+          >
+            <X size={18} />
+          </button>
+        </div>
+      </div>
+
+      <div className="overflow-y-auto flex-1">
+        {/* Car image hero */}
+        {car && (
+          <div className="relative w-full bg-stone-100" style={{ aspectRatio: "16 / 9" }}>
+            <img
+              src={carImageUrl(car.model)}
+              alt={car.model}
+              className="absolute inset-0 w-full h-full object-cover"
+              onError={(e) => {
+                const img = e.currentTarget as HTMLImageElement;
+                const fallback = `${import.meta.env.BASE_URL}cars/xuv700.jpg`;
+                if (img.src.endsWith(fallback)) { img.style.display = "none"; return; }
+                img.src = fallback;
+              }}
+            />
+            <div className="absolute inset-x-0 bottom-0 px-5 py-3" style={{ background: "linear-gradient(to top, rgba(6,31,92,0.85), transparent)" }}>
+              <div className="text-white text-[18px] font-bold leading-none">{car.model}</div>
+              {car.variant && <div className="text-white/80 text-[12px] mt-1">{car.variant}</div>}
+            </div>
+          </div>
+        )}
+
+        <PanelSection label="Vehicle">
+          <Row label="Model">
+            <span className="font-semibold" style={{ color: INK }}>{car?.model ?? "—"}</span>
+          </Row>
+          <Row label="Variant">{car?.variant || "—"}</Row>
+          <Row label="Color">
+            {car?.color ? (
+              <span className="inline-flex items-center gap-2">
+                <span className="w-3 h-3 rounded-full" style={{ background: colorSwatch(car.color), border: "1px solid rgba(0,0,0,0.1)" }} />
+                {car.color}
+              </span>
+            ) : "—"}
+          </Row>
+          <Row label="Ex-showroom">
+            <span className="font-semibold tabular-nums" style={{ color: INK }}>{fmtPriceInr(car?.price_inr)}</span>
+          </Row>
+        </PanelSection>
+
+        <PanelSection label="Customer">
+          <Row label="Name">
+            <span className="font-semibold" style={{ color: INK }}>{drive.customer_name ?? "—"}</span>
+          </Row>
+          <Row label="Phone">
+            {drive.customer_phone ? (
+              <a href={`tel:${drive.customer_phone}`} className="inline-flex items-center gap-1.5 font-semibold" style={{ color: ACCENT }}>
+                <Phone size={12} />
+                {drive.customer_phone}
+              </a>
+            ) : "—"}
+          </Row>
+        </PanelSection>
+
+        <PanelSection label="Booking">
+          <Row label="Status">
+            <StatusPill status={completed ? "Completed" : "Booked"} tone={completed ? "completed" : "booked"} />
+          </Row>
+          <Row label="Slot">
+            <span className="font-semibold tabular-nums" style={{ color: INK }}>{day.weekday} {day.day} {day.month}, {time}</span>
+          </Row>
+          <Row label="Booked at">
+            {drive.booked_at ? new Date(drive.booked_at).toLocaleString("en-IN", { dateStyle: "medium", timeStyle: "short" }) : "—"}
+          </Row>
+          {completed && (
+            <Row label="Completed at">
+              {new Date(drive.completed_at!).toLocaleString("en-IN", { dateStyle: "medium", timeStyle: "short" })}
+            </Row>
+          )}
+          {drive.notes && <Row label="Notes">{drive.notes}</Row>}
+        </PanelSection>
+
+        <PanelSection label="Feedback">
+          {hasFeedback ? (
+            <>
+              {drive.feedback_rating != null && (
+                <Row label="Rating">
+                  <RatingStars value={Number(drive.feedback_rating)} />
+                </Row>
+              )}
+              {drive.feedback_would_recommend != null && (
+                <Row label="Recommends">
+                  <StatusPill
+                    status={drive.feedback_would_recommend ? "Yes" : "No"}
+                    tone={drive.feedback_would_recommend ? "completed" : "failed"}
+                  />
+                </Row>
+              )}
+              {drive.feedback_liked_most && <Row label="Liked most">{drive.feedback_liked_most}</Row>}
+              {drive.feedback_concern && <Row label="Concern">{drive.feedback_concern}</Row>}
+              {drive.feedback_collected_at && (
+                <Row label="Collected at">
+                  {new Date(drive.feedback_collected_at).toLocaleString("en-IN", { dateStyle: "medium", timeStyle: "short" })}
+                </Row>
+              )}
+            </>
+          ) : (
+            <div className="text-[12.5px] text-stone-400 italic px-1">
+              {completed ? "No feedback captured yet." : "Feedback will appear here after the drive is completed."}
+            </div>
+          )}
+        </PanelSection>
+      </div>
+    </>
+  );
+}
+
+function PanelSection({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <section className="px-6 py-5" style={{ borderBottom: `1px solid ${TM_BORDER}` }}>
+      <div className="text-[10px] font-bold uppercase tracking-[0.15em] text-stone-400 mb-3">{label}</div>
+      <div className="space-y-3">{children}</div>
+    </section>
+  );
+}
+
+function StatusPill({ status, tone }: { status: string; tone: "booked" | "completed" | "failed" }) {
+  const palette: Record<string, { bg: string; fg: string; dot: string }> = {
+    booked:    { bg: ACCENT_SOFT, fg: "#5f0229", dot: ACCENT },
+    completed: { bg: "#e8f5ec",  fg: "#0f5132", dot: "#2f855a" },
+    failed:    { bg: "#fde8e8",  fg: "#7f1d1d", dot: "#dc2626" },
+  };
+  const p = palette[tone];
+  return (
+    <span className="inline-flex items-center gap-1.5 px-2 py-1 text-[11px] font-bold uppercase tracking-[0.04em]" style={{ background: p.bg, color: p.fg, borderRadius: 4 }}>
+      <span className="w-1.5 h-1.5 rounded-full" style={{ background: p.dot }} />
+      {status}
+    </span>
+  );
+}
+
+function RatingStars({ value }: { value: number }) {
+  const v = Math.max(0, Math.min(5, Math.round(value)));
+  return (
+    <span className="inline-flex items-center gap-1.5">
+      <span className="text-[14px] tabular-nums" style={{ color: ACCENT, letterSpacing: 1 }}>
+        {"★".repeat(v)}<span className="text-stone-300">{"★".repeat(5 - v)}</span>
+      </span>
+      <span className="text-[11px] font-semibold tabular-nums text-stone-500">{v}/5</span>
+    </span>
+  );
+}
+
+function colorSwatch(color: string): string {
+  const c = color.toLowerCase();
+  if (c.includes("red") || c.includes("tango")) return "#c62828";
+  if (c.includes("white")) return "#f5f5f5";
+  if (c.includes("black") || c.includes("napoli") || c.includes("stealth")) return "#1a1a1a";
+  if (c.includes("silver") || c.includes("grey") || c.includes("gray")) return "#9ca3af";
+  if (c.includes("blue")) return "#1e3a8a";
+  return "#9ca3af";
+}
+
+function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-baseline gap-4 text-[13px]">
+      <div className="w-24 shrink-0 text-[11px] font-semibold uppercase tracking-[0.05em] text-stone-500">{label}</div>
+      <div className="flex-1 min-w-0 break-words" style={{ color: INK }}>{children}</div>
+    </div>
+  );
+}

src/components/variants/VariantB.tsx

@@ -25,7 +25,8 @@ import {
   type ActionButton, type AnalyticsSpec, type ScreenButton,
 } from "../../hooks/usePrototypeData";
 import FormModal from "../FormModal";
-import { SCREEN_TO_DV, DETAIL_VIEW_IDS, ACTIVITY_IDS, STATE_IDS } from "../../config";
+import { SCREEN_TO_DV, DETAIL_VIEW_IDS, ACTIVITY_IDS, STATE_IDS, DEMO_SLOTS_SCREEN_UUID } from "../../config";
+import { CalendarView } from "./Calendar";
 
 // ---------------------------------------------------------------------------
 // Palette — Tech Mahindra brand. Red is the identity color (the "Tech" in
@@ -155,6 +156,8 @@ export default function VariantB() {
               onAction={(a) => setFormModal(a)}
               breadcrumbLabel={activeNav?.label ?? "Pipeline"}
             />
+          ) : activeScreenId === DEMO_SLOTS_SCREEN_UUID ? (
+            <CalendarView />
           ) : activeScreenId ? (
             <>
               <div className="mb-8">

src/config.ts

@@ -51,6 +51,21 @@ export const STATE_IDS = {
   END_STATE: "33cce5a0-f493-4fac-a1b7-7b68fbcbffce",
 } as const;
 
+// Demo calendar — backed by mahindra_demo schema via rdbms-template lookups on
+// the INIT activity (storage_columns=id, display_columns=everything we need).
+export const WORKFLOW_NUMERIC_ID = 29347;
+export const DEMO_SLOTS_SCREEN_UUID = "98b1b946-f67d-4faa-b50f-4566f7e194d0";
+export const CALENDAR_LOOKUPS = {
+  TEST_DRIVES: {
+    rdbmsTemplateUuid: "c71a16b0-8fc6-4ef2-b52d-2672e4dad8db",
+    fieldId: "test_drives_lookup",
+  },
+  CARS: {
+    rdbmsTemplateUuid: "3efdfe0f-8ed9-4fbc-95ce-0f3788622c9c",
+    fieldId: "cars_lookup",
+  },
+} as const;
+
 // Roles
 export const ROLES = {
   SALES_AGENT: "Sales Agent",