From 7830127e966be45e226c7a70d51c49b9599ea717 Mon Sep 17 00:00:00 2001 From: Bhanu Prakash Sai Potteri Date: Sat, 23 May 2026 21:54:34 +0530 Subject: [PATCH] DV revamp: unified card, sub-section grid, chips, at-a-glance lane - Merge hero + sections into one bordered card with hairline divider - Avatar + icon-led metadata; status pill moves to right cluster - Sub-sections in left/right lanes with vertical+horizontal dividers - Status/ID/recommend chips; longtext labels and prose styling cleaned up - Empty-state placeholders per section with icons - RV: lift recording URLs into narrow lane "At a Glance" with lead age - Calendar/header/form/login: misc session-2 polish (per handoff) --- src/components/DynamicHeader.tsx | 2 +- src/components/FormModal.tsx | 4 +- src/components/variants/Calendar.tsx | 92 +-- src/components/variants/VariantB.tsx | 858 +++++++++++++++++++-------- src/hooks/usePrototypeData.ts | 35 +- src/pages/Login.tsx | 4 +- 6 files changed, 664 insertions(+), 331 deletions(-) diff --git a/src/components/DynamicHeader.tsx b/src/components/DynamicHeader.tsx index fb4d8d4..ac4f49d 100644 --- a/src/components/DynamicHeader.tsx +++ b/src/components/DynamicHeader.tsx @@ -38,7 +38,7 @@ export default function DynamicHeader({ activeScreenId, onNavigate, onSidebarCha }, []); const navItems = config?.components?.nav?.items ?? []; - const logoText = (config?.components as any)?.logo?.text || "Mahindra · Sales Ops"; + const logoText = (config?.components as any)?.logo?.text || "Mahindra · AI Sales Ops"; const handleLogout = () => { logout(); navigate("/login"); }; diff --git a/src/components/FormModal.tsx b/src/components/FormModal.tsx index 845839f..27c0458 100644 --- a/src/components/FormModal.tsx +++ b/src/components/FormModal.tsx @@ -123,13 +123,13 @@ export default function FormModal({ activityId, instanceId, title, onClose, onSu
e.stopPropagation()} > {success && (
-
+
Submitted
diff --git a/src/components/variants/Calendar.tsx b/src/components/variants/Calendar.tsx index 7c85c5d..2e5f6a6 100644 --- a/src/components/variants/Calendar.tsx +++ b/src/components/variants/Calendar.tsx @@ -299,7 +299,7 @@ export function CalendarView() { const cell = grid.get(`${dk}|${tk}|${Number(c.id)}`); if (!cell) { return ( -
+
—
); @@ -313,7 +313,7 @@ export function CalendarView() { style={ booked ? { background: ACCENT, color: "white" } - : { background: "white", color: "#a8a29e", border: `1px solid ${TM_BORDER}` } + : { background: "white", color: "#78716c", border: `1px solid ${TM_BORDER}` } } title={booked ? `${cell.customer_name ?? "Booked"} · ${c.model}` : `Available · ${c.model}`} > @@ -346,6 +346,12 @@ export function CalendarView() { function BookingPanel({ drive, car, onClose }: { drive: TestDrive | null; car: Car | undefined; onClose: () => void }) { const open = !!drive; + useEffect(() => { + if (!open) return; + const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); }; + window.addEventListener("keydown", onKey); + return () => window.removeEventListener("keydown", onKey); + }, [open, onClose]); return ( <>
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 ( <>
-
- Booking +
+ Booking
-
+
+ {day.weekday}, {day.day} {day.month} · {time} +
+
{drive.customer_name ?? "—"}
-
- - {day.weekday} {day.day} {day.month} - · - {time} -
); @@ -530,18 +490,6 @@ function StatusPill({ status, tone }: { status: string; tone: "booked" | "comple ); } -function RatingStars({ value }: { value: number }) { - const v = Math.max(0, Math.min(5, Math.round(value))); - return ( - - - {"★".repeat(v)}{"★".repeat(5 - v)} - - {v}/5 - - ); -} - function colorSwatch(color: string): string { const c = color.toLowerCase(); if (c.includes("red") || c.includes("tango")) return "#c62828"; diff --git a/src/components/variants/VariantB.tsx b/src/components/variants/VariantB.tsx index 87d63dd..1763586 100644 --- a/src/components/variants/VariantB.tsx +++ b/src/components/variants/VariantB.tsx @@ -11,7 +11,7 @@ import { ChevronLeft, ChevronRight, Search, ArrowUp, ArrowDown, X, RefreshCw, CheckCircle2, LogOut, Sparkles, Car, ClipboardList, PhoneOutgoing, CalendarCheck2, MessageSquareHeart, Trophy, ArrowLeft, ChevronDown, ChevronUp, - Plus, PlayCircle, ExternalLink, + Plus, PlayCircle, ExternalLink, Inbox, Star, ThumbsUp, ThumbsDown, User, Hash, } from "lucide-react"; import { BarChart as RBarChart, Bar, XAxis, YAxis, Tooltip, CartesianGrid, @@ -108,7 +108,7 @@ export default function VariantB() { {/* Main — clean white canvas for data */}
-
+
{detailInstanceId && activeScreenId ? ( ) : activeScreenId ? ( <> -
-
- Test-drive lifecycle -
-

- {activeNav?.label ?? "Dashboard"} -

-
+

+ {activeNav?.label ?? "Dashboard"} +

Zino -
Sales Ops
+
AI Sales Ops
@@ -188,16 +186,23 @@ function Sidebar({ ); @@ -208,9 +213,9 @@ function Sidebar({
-
+
{initials}
@@ -257,11 +262,14 @@ function DashboardContent({ return (
{/* Navy structural accent in the corner of the primary red tile */} @@ -272,20 +280,20 @@ function DashboardContent({ /> )}
{t.title}
{rv.loading || rv.dataLoading - ? + ? : display}
-
+
total this week
@@ -303,12 +311,11 @@ function DashboardContent({ .map((r) => ({ name: String(r.dimension ?? "—"), value: Number(r.value ?? 0) })) .filter((d) => d.name !== "—" && d.value > 0); return ( -
+
Insight
-
{c.title}
-
Distribution across the pipeline
+
{c.title}
{rv.loading || rv.dataLoading ? ( -
+
) : data.length === 0 ? (
No data yet
) : ( @@ -392,13 +399,12 @@ function RecordTable({ const submitSearch = (e: React.FormEvent) => { e.preventDefault(); rv.setQuery((q) => ({ ...q, page: 1, search: searchInput })); }; return ( -
-
-
-
Data
-
All records
-
- {total_count} leads · showing {from}–{to} +
+
+
+
All leads
+
+ {total_count} records · showing {from}–{to}
@@ -414,7 +420,7 @@ function RecordTable({ ))}