diff --git a/index.html b/index.html index 2f77b97..635d88c 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - + Test Drive Lead Manager diff --git a/public/zino.svg b/public/zino.svg new file mode 100644 index 0000000..662b67e --- /dev/null +++ b/public/zino.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx index fb2c8d3..ed8e4a6 100644 --- a/src/components/AppShell.tsx +++ b/src/components/AppShell.tsx @@ -1,11 +1,12 @@ import { useEffect, useState, useCallback } from "react"; -import { useNavigate, useParams } from "react-router-dom"; +import { useNavigate, useParams, useSearchParams } from "react-router-dom"; import { Loader2, CheckCircle2, RefreshCw, Clock, Sparkles } from "lucide-react"; import DynamicHeader from "./DynamicHeader"; import ScreenRenderer from "./ScreenRenderer"; import { TableSkeleton } from "./Skeleton"; import DetailViewPanel from "./DetailViewPanel"; import FormModal from "./FormModal"; +import VariantB from "./variants/VariantB"; import { getHeaderConfig, getScreen, getAuditLog, getInstance, type LayoutElement, type NavItem, type AuditEntry, @@ -50,6 +51,13 @@ function stateTone(stateId: string | null) { } export default function AppShell() { + const [searchParams] = useSearchParams(); + // ?variant=current escape hatch to the old red UI; default is Variant B (Insights Studio). + if (searchParams.get("variant") === "current") return ; + return ; +} + +function CurrentAppShell() { const navigate = useNavigate(); const params = useParams(); const screenIdParam = params.screenId || null; diff --git a/src/components/FormModal.tsx b/src/components/FormModal.tsx index 17d9ca8..a67e4d4 100644 --- a/src/components/FormModal.tsx +++ b/src/components/FormModal.tsx @@ -3,6 +3,14 @@ import { X, ArrowRight, AlertCircle, CheckCircle2, ChevronDown } from "lucide-re import { getFormScreen, startWorkflow, performActivity } from "../api/viewService"; import { WORKFLOW_ID } from "../config"; +// TM brand tokens — mirror VariantB.tsx. Inline to avoid a one-off tokens +// module; if a third consumer appears (Login likely), extract then. +const ACCENT = "#e31837"; +const ACCENT_DARK = "#5f0229"; +const ACCENT_SOFT = "#fde2e8"; +const TM_BORDER = "#e4e4ed"; +const INK = "#17181a"; + interface FormField { id: string; uid: string; @@ -108,46 +116,49 @@ export default function FormModal({ activityId, instanceId, title, onClose, onSu return (
animateClose(onClose)}> -
+
e.stopPropagation()} > {success && ( -
-
- +
+
+
-
Submitted successfully
+
Submitted
)} {/* ── Header ── */} -
-
-

{formTitle}

-

- {instanceId ? "Update the details below" : "Fill in the details to submit"} -

+
+
+
+ {instanceId ? "Update" : "Create"} +
+

+ {instanceId ? formTitle : "New Lead"} +

{/* ── Body ── */} -
+
{loading ? (
{[0, 1, 2, 3].map((r) => (
-
-
+
+
))}
@@ -157,9 +168,9 @@ export default function FormModal({ activityId, instanceId, title, onClose, onSu
1 ? "grid-cols-2" : "grid-cols-1"}`}> {row.map((f) => (
-