@rebasepro/app 0.0.1-canary.4829d6e

package/src/components/Debug/crm-dashboard/CrmDashboardDemo.tsx

@@ -0,0 +1,1102 @@
+import React, { useState, useEffect, useMemo, useCallback } from "react";
+import {
+    Typography,
+    Button,
+    cls,
+    Container,
+    Card,
+    Alert,
+    defaultBorderMixin,
+    Separator,
+    TextField,
+    Select,
+    SelectItem
+} from "@rebasepro/ui";
+import {
+    RefreshCw,
+    UserPlus,
+    X,
+    Check,
+    Briefcase,
+    Mail,
+    Phone,
+    User,
+    Calendar,
+    AlertTriangle,
+    Plus
+} from "lucide-react";
+
+import { DashboardMetrics } from "./DashboardMetrics";
+import { PipelineOverview } from "./PipelineOverview";
+import { RecentActivity } from "./RecentActivity";
+import { TasksView } from "./TasksView";
+import { CalendarWidget } from "./CalendarWidget";
+
+/* ── Types ────────────────────────────────────────────── */
+
+interface Client {
+    id: string;
+    name: string;
+    email: string;
+    phone: string;
+    stage: string;
+    picture?: string;
+}
+
+interface Task {
+    id: string;
+    values: {
+        title: string;
+        status: string;
+        resolution: string | null;
+        dueDate: string | null;
+        stageId: string | null;
+        description: string | null;
+        notes: string | null;
+        clientId: string | null;
+        client?: { name?: string } | null;
+        priority?: string | null;
+        createdAt: string | null;
+    };
+}
+
+interface Activity {
+    id: string;
+    values: {
+        type: string;
+        description: string;
+        createdAt: string;
+        metadata?: {
+            taskId?: string;
+            taskTitle?: string;
+            subject?: string;
+            body?: string;
+            to?: string;
+            mode?: string;
+        };
+    };
+}
+
+interface PipelineOption {
+    id: string;
+    name: string;
+    isDefault: boolean;
+    color: string;
+}
+
+interface PipelineStage {
+    stageKey: string;
+    label: string;
+    shortLabel: string;
+    color: string;
+    icon: string;
+    sortOrder: number;
+    isTerminal: boolean;
+    isLostStage: boolean;
+    count: number;
+}
+
+/* ── Color map ────────────────────────────────────────── */
+
+const COLOR_MAP: Record<string, string> = {
+    blue: "#3b82f6",
+    indigo: "#6366f1",
+    purple: "#8b5cf6",
+    yellow: "#eab308",
+    teal: "#14b8a6",
+    green: "#22c55e",
+    orange: "#f97316",
+    gray: "#6b7280",
+    red: "#ef4444",
+    pink: "#ec4899",
+    sky: "#0ea5e9",
+    amber: "#f59e0b"
+};
+
+function resolveColor(colorName: string): string {
+    return COLOR_MAP[colorName] ?? COLOR_MAP.gray;
+}
+
+/* ── Stage Labels ──────────────────────────────────────── */
+
+const STAGE_LABELS: Record<string, string> = {
+    incoming: "Incoming",
+    email_sent: "Intro Email",
+    discovery_call: "Discovery",
+    agreements: "Agreements",
+    onboarding: "Onboarding",
+    active: "Active",
+    delivered: "Delivered",
+    completed: "Done"
+};
+
+const PIPELINES: PipelineOption[] = [
+    { id: "main", name: "Main Sales Pipeline", isDefault: true, color: "blue" },
+    { id: "partnerships", name: "Partnerships Funnel", isDefault: false, color: "indigo" }
+];
+
+const INITIAL_STAGES: Record<string, Omit<PipelineStage, "count">[]> = {
+    main: [
+        { stageKey: "incoming", label: "Incoming", shortLabel: "Inbound", color: "blue", icon: "inbox", sortOrder: 1, isTerminal: false, isLostStage: false },
+        { stageKey: "email_sent", label: "Intro Email", shortLabel: "Intro", color: "indigo", icon: "mail", sortOrder: 2, isTerminal: false, isLostStage: false },
+        { stageKey: "discovery_call", label: "Discovery", shortLabel: "Disco", color: "purple", icon: "phone", sortOrder: 3, isTerminal: false, isLostStage: false },
+        { stageKey: "agreements", label: "Agreements", shortLabel: "Contracts", color: "yellow", icon: "file-text", sortOrder: 4, isTerminal: false, isLostStage: false },
+        { stageKey: "onboarding", label: "Onboarding", shortLabel: "Onboard", color: "teal", icon: "user-check", sortOrder: 5, isTerminal: false, isLostStage: false },
+        { stageKey: "active", label: "Active", shortLabel: "Active", color: "green", icon: "activity", sortOrder: 6, isTerminal: false, isLostStage: false },
+        { stageKey: "delivered", label: "Delivered", shortLabel: "Done", color: "orange", icon: "check-circle", sortOrder: 7, isTerminal: true, isLostStage: false },
+        { stageKey: "completed", label: "Done", shortLabel: "Closed", color: "red", icon: "archive", sortOrder: 8, isTerminal: true, isLostStage: true }
+    ],
+    partnerships: [
+        { stageKey: "incoming", label: "Outreach", shortLabel: "Outbound", color: "blue", icon: "send", sortOrder: 1, isTerminal: false, isLostStage: false },
+        { stageKey: "discovery_call", label: "First Meeting", shortLabel: "Meet", color: "purple", icon: "users", sortOrder: 2, isTerminal: false, isLostStage: false },
+        { stageKey: "agreements", label: "Proposal", shortLabel: "Prop", color: "yellow", icon: "file", sortOrder: 3, isTerminal: false, isLostStage: false },
+        { stageKey: "active", label: "Partnered", shortLabel: "Live", color: "green", icon: "handshake", sortOrder: 4, isTerminal: true, isLostStage: false }
+    ]
+};
+
+const INITIAL_CLIENTS: Client[] = [
+    { id: "client-1", name: "Alice Johnson", email: "alice@johnson.com", phone: "+1 (555) 0192", stage: "discovery_call" },
+    { id: "client-2", name: "Bob Smith", email: "bob@smith.co", phone: "+1 (555) 0143", stage: "email_sent" },
+    { id: "client-3", name: "Carol White", email: "carol@whitecorp.com", phone: "+1 (555) 0188", stage: "agreements" },
+    { id: "client-4", name: "David Brown", email: "david.b@brown.net", phone: "+1 (555) 0177", stage: "onboarding" },
+    { id: "client-5", name: "Eva Green", email: "eva@greenllc.com", phone: "+1 (555) 0165", stage: "active" },
+    { id: "client-6", name: "Frank Miller", email: "frank@miller.org", phone: "+1 (555) 0112", stage: "completed" },
+];
+
+const INITIAL_TASKS: Task[] = [
+    {
+        id: "task-1",
+        values: {
+            title: "Schedule discovery call",
+            status: "pending",
+            resolution: null,
+            dueDate: new Date(Date.now() + 86400000).toISOString().split('T')[0],
+            stageId: "discovery_call",
+            clientId: "client-1",
+            priority: "high",
+            description: "Set up a 30-min Zoom call to discuss requirements and partnership scope.",
+            notes: "Alice is in EST timezone, prefers morning slots.",
+            createdAt: new Date(Date.now() - 172800000).toISOString()
+        }
+    },
+    {
+        id: "task-2",
+        values: {
+            title: "Draft partnership agreement",
+            status: "pending",
+            resolution: null,
+            dueDate: new Date(Date.now() - 172800000).toISOString().split('T')[0], // overdue
+            stageId: "agreements",
+            clientId: "client-3",
+            priority: "high",
+            description: "Draft enterprise contract incorporating customized SLA definitions.",
+            notes: "Carol requested special uptime guarantees in Appendix A.",
+            createdAt: new Date(Date.now() - 345600000).toISOString()
+        }
+    },
+    {
+        id: "task-3",
+        values: {
+            title: "Send onboarding checklist",
+            status: "pending",
+            resolution: null,
+            dueDate: new Date(Date.now() + 172800000).toISOString().split('T')[0],
+            stageId: "onboarding",
+            clientId: "client-4",
+            priority: "medium",
+            description: "Assemble welcome packet, Slack community invite link, and environment setup guidelines.",
+            notes: "Must carbon copy David's CTO on all setup emails.",
+            createdAt: new Date(Date.now() - 86400000).toISOString()
+        }
+    },
+    {
+        id: "task-4",
+        values: {
+            title: "Follow up on intro email",
+            status: "pending",
+            resolution: null,
+            dueDate: new Date(Date.now() - 86400000).toISOString().split('T')[0], // overdue
+            stageId: "email_sent",
+            clientId: "client-2",
+            priority: "medium",
+            description: "Check if Bob had time to review the technical proposal sent last week.",
+            notes: "Call if no email response by Friday.",
+            createdAt: new Date(Date.now() - 259200000).toISOString()
+        }
+    },
+    {
+        id: "task-5",
+        values: {
+            title: "Review deliverables and request feedback",
+            status: "pending",
+            resolution: null,
+            dueDate: new Date(Date.now() + 432000000).toISOString().split('T')[0],
+            stageId: "active",
+            clientId: "client-5",
+            priority: "low",
+            description: "Schedule final demo review, submit deliverables reports, and email feedback questionnaire.",
+            notes: "",
+            createdAt: new Date(Date.now() - 86400000).toISOString()
+        }
+    }
+];
+
+const INITIAL_COMPLETED_TASKS: Task[] = [
+    {
+        id: "task-comp-1",
+        values: {
+            title: "Review inbound request form",
+            status: "completed",
+            resolution: "verified",
+            dueDate: new Date(Date.now() - 259200000).toISOString().split('T')[0],
+            stageId: "incoming",
+            clientId: "client-1",
+            priority: "medium",
+            description: "Analyze initial request details submitted via web form.",
+            notes: "",
+            createdAt: new Date(Date.now() - 345600000).toISOString()
+        }
+    },
+    {
+        id: "task-comp-2",
+        values: {
+            title: "Send pricing brochure",
+            status: "completed",
+            resolution: "sent",
+            dueDate: new Date(Date.now() - 172800000).toISOString().split('T')[0],
+            stageId: "email_sent",
+            clientId: "client-2",
+            priority: "medium",
+            description: "Send standard PDF booklet outlining custom packages and service tiers.",
+            notes: "",
+            createdAt: new Date(Date.now() - 259200000).toISOString()
+        }
+    }
+];
+
+const INITIAL_ACTIVITIES: Activity[] = [
+    {
+        id: "act-1",
+        values: {
+            type: "email_sent",
+            description: "Intro Email sent to Bob Smith",
+            createdAt: new Date(Date.now() - 3600000).toISOString(),
+            metadata: {
+                subject: "Welcome to Rebase — Pricing Tiers & Guidelines",
+                body: "Hi Bob,\n\nThanks for your interest in Rebase! I have attached our standard pricing sheet and product documentation for your review.\n\nLet's schedule a brief 15-minute call next week to answer any questions you might have.\n\nBest regards,\nFrancesco",
+                to: "bob@smith.co",
+                mode: "simulated"
+            }
+        }
+    },
+    {
+        id: "act-2",
+        values: {
+            type: "agreements_sent",
+            description: "Agreements sent to Carol White",
+            createdAt: new Date(Date.now() - 14400000).toISOString(),
+            metadata: {
+                taskId: "task-2",
+                taskTitle: "Draft partnership agreement"
+            }
+        }
+    },
+    {
+        id: "act-3",
+        values: {
+            type: "incoming",
+            description: "Incoming lead Alice Johnson created",
+            createdAt: new Date(Date.now() - 86400000).toISOString()
+        }
+    },
+    {
+        id: "act-4",
+        values: {
+            type: "note",
+            description: "Added a note for David Brown: 'Prefers Slack for communications'",
+            createdAt: new Date(Date.now() - 172800000).toISOString()
+        }
+    }
+];
+
+/* ── Helpers ────────────────────────────────────────────── */
+
+function getGreeting(): string {
+    const hour = new Date().getHours();
+    if (hour < 12) return "Good morning";
+    if (hour < 18) return "Good afternoon";
+    return "Good evening";
+}
+
+function getFormattedDate(): string {
+    return new Date().toLocaleDateString("en-US", {
+        weekday: "long",
+        month: "long",
+        day: "numeric"
+    });
+}
+
+/* ── Main Component ─────────────────────────────────────── */
+
+export function CrmDashboardDemo() {
+    const [loading, setLoading] = useState(true);
+    const [activitiesLoading, setActivitiesLoading] = useState(true);
+
+    // Persisted states for mock DB
+    const [clients, setClients] = useState<Client[]>(INITIAL_CLIENTS);
+    const [tasks, setTasks] = useState<Task[]>(INITIAL_TASKS);
+    const [completedTasks, setCompletedTasks] = useState<Task[]>(INITIAL_COMPLETED_TASKS);
+    const [activities, setActivities] = useState<Activity[]>(INITIAL_ACTIVITIES);
+
+    const [selectedPipelineId, setSelectedPipelineId] = useState<string>("main");
+
+    // Local Toast/Notifications
+    const [toastMessage, setToastMessage] = useState<string | null>(null);
+
+    // Drawer state (Mock side panel)
+    const [activeSideEntity, setActiveSideEntity] = useState<{
+        type: "task" | "client" | "new_client";
+        id?: string;
+    } | null>(null);
+
+    // Email viewer state
+    const [emailViewerOpen, setEmailViewerOpen] = useState(false);
+    const [selectedEmail, setSelectedEmail] = useState<{ to: string; subject: string; body: string; html?: string; mode?: string } | null>(null);
+
+    // Form states for adding new client
+    const [newClientName, setNewClientName] = useState("");
+    const [newClientEmail, setNewClientEmail] = useState("");
+    const [newClientPhone, setNewClientPhone] = useState("");
+    const [newClientStage, setNewClientStage] = useState("incoming");
+
+    // Toggling tasks loading animation state
+    const [togglingIds, setTogglingIds] = useState<Set<string>>(new Set());
+    const [recentlyToggledIds, setRecentlyToggledIds] = useState<Set<string>>(new Set());
+
+    // Completed section pagination
+    const [completedLoaded, setCompletedLoaded] = useState(false);
+    const [loadingCompleted, setLoadingCompleted] = useState(false);
+
+    // Trigger initial load skeletons
+    useEffect(() => {
+        const timer1 = setTimeout(() => setLoading(false), 450);
+        const timer2 = setTimeout(() => setActivitiesLoading(false), 600);
+        return () => {
+            clearTimeout(timer1);
+            clearTimeout(timer2);
+        };
+    }, []);
+
+    // Show custom toast alert
+    const showToast = useCallback((msg: string) => {
+        setToastMessage(msg);
+        const timer = setTimeout(() => setToastMessage(null), 3000);
+        return () => clearTimeout(timer);
+    }, []);
+
+    // Load completed tasks simulation
+    const handleExpandCompleted = useCallback(() => {
+        if (completedLoaded) return;
+        setLoadingCompleted(true);
+        setTimeout(() => {
+            setCompletedLoaded(true);
+            setLoadingCompleted(false);
+        }, 300);
+    }, [completedLoaded]);
+
+    const handleLoadMoreCompleted = useCallback(() => {
+        setLoadingCompleted(true);
+        setTimeout(() => {
+            setLoadingCompleted(false);
+            showToast("Loaded additional completed tasks.");
+        }, 300);
+    }, [showToast]);
+
+    // Handle pipeline change
+    const handlePipelineChange = useCallback((pipelineId: string) => {
+        setSelectedPipelineId(pipelineId);
+        setLoading(true);
+        setTimeout(() => {
+            setLoading(false);
+            showToast(`Switched to ${PIPELINES.find(p => p.id === pipelineId)?.name}`);
+        }, 200);
+    }, [showToast]);
+
+    // Derived maps
+    const clientsMap = useMemo(() => {
+        const map = new Map<string, { name: string; picture?: string }>();
+        clients.forEach(c => map.set(c.id, { name: c.name }));
+        return map;
+    }, [clients]);
+
+    const tasksMap = useMemo(() => {
+        const map = new Map<string, any>();
+        tasks.forEach(t => map.set(t.id, t));
+        completedTasks.forEach(t => map.set(t.id, t));
+        return map;
+    }, [tasks, completedTasks]);
+
+    // Task status toggling logic
+    const handleToggleTask = useCallback((taskId: string, currentStatus: string) => {
+        setTogglingIds(prev => new Set(prev).add(taskId));
+
+        setTimeout(() => {
+            if (currentStatus === "pending") {
+                // Complete task
+                const task = tasks.find(t => t.id === taskId);
+                if (task) {
+                    setTasks(prev => prev.filter(t => t.id !== taskId));
+                    const completedTask: Task = {
+                        ...task,
+                        values: { ...task.values, status: "completed", resolution: "done" }
+                    };
+                    setCompletedTasks(prev => [completedTask, ...prev]);
+
+                    // Add activity
+                    const newAct: Activity = {
+                        id: `act-${Date.now()}`,
+                        values: {
+                            type: "task_completed",
+                            description: `Task completed: "${task.values.title}"`,
+                            createdAt: new Date().toISOString(),
+                            metadata: {
+                                taskId: task.id,
+                                taskTitle: task.values.title
+                            }
+                        }
+                    };
+                    setActivities(prev => [newAct, ...prev]);
+                    showToast(`Completed task: "${task.values.title}"`);
+                }
+            } else {
+                // Re-open task
+                const task = completedTasks.find(t => t.id === taskId);
+                if (task) {
+                    setCompletedTasks(prev => prev.filter(t => t.id !== taskId));
+                    const pendingTask: Task = {
+                        ...task,
+                        values: { ...task.values, status: "pending", resolution: null }
+                    };
+                    setTasks(prev => [pendingTask, ...prev]);
+
+                    // Add activity
+                    const newAct: Activity = {
+                        id: `act-${Date.now()}`,
+                        values: {
+                            type: "task_created",
+                            description: `Task re-opened: "${task.values.title}"`,
+                            createdAt: new Date().toISOString(),
+                            metadata: {
+                                taskId: task.id,
+                                taskTitle: task.values.title
+                            }
+                        }
+                    };
+                    setActivities(prev => [newAct, ...prev]);
+                    showToast(`Re-opened task: "${task.values.title}"`);
+                }
+            }
+            setTogglingIds(prev => {
+                const next = new Set(prev);
+                next.delete(taskId);
+                return next;
+            });
+        }, 200);
+    }, [tasks, completedTasks, showToast]);
+
+    // Activity specific handlers
+    const handleCompleteTaskFromActivity = useCallback((activity: any) => {
+        const taskId = activity.values?.metadata?.taskId;
+        if (taskId) {
+            handleToggleTask(taskId, "pending");
+        }
+    }, [handleToggleTask]);
+
+    const handleViewEmail = useCallback((activity: any) => {
+        if (activity.values?.metadata?.subject) {
+            setSelectedEmail({
+                to: activity.values.metadata.to || "",
+                subject: activity.values.metadata.subject,
+                body: activity.values.metadata.body || "",
+                html: activity.values.metadata.html || "",
+                mode: activity.values.metadata.mode || "simulated"
+            });
+            setEmailViewerOpen(true);
+        }
+    }, []);
+
+    const handleOpenTask = useCallback((activity: any) => {
+        const taskId = activity.values?.metadata?.taskId;
+        if (taskId) {
+            setActiveSideEntity({ type: "task", id: taskId });
+        }
+    }, []);
+
+    // Side panel open helpers
+    const openTaskDrawer = useCallback((taskId: string) => {
+        setActiveSideEntity({ type: "task", id: taskId });
+    }, []);
+
+    const openClientDrawer = useCallback((clientId: string) => {
+        setActiveSideEntity({ type: "client", id: clientId });
+    }, []);
+
+    const openNewClientDrawer = useCallback(() => {
+        setActiveSideEntity({ type: "new_client" });
+    }, []);
+
+    // Create client simulation
+    const handleCreateClient = () => {
+        if (!newClientName.trim()) return;
+
+        const newId = `client-${Date.now()}`;
+        const newClient: Client = {
+            id: newId,
+            name: newClientName,
+            email: newClientEmail || `${newClientName.toLowerCase().replace(/\s+/g, ".")}@example.com`,
+            phone: newClientPhone || "+1 (555) 0100",
+            stage: newClientStage
+        };
+
+        setClients(prev => [...prev, newClient]);
+
+        // Add auto task
+        const newTask: Task = {
+            id: `task-${Date.now()}`,
+            values: {
+                title: `Complete discovery onboarding for ${newClientName}`,
+                status: "pending",
+                resolution: null,
+                dueDate: new Date(Date.now() + 259200000).toISOString().split('T')[0], // 3 days from now
+                stageId: newClientStage,
+                clientId: newId,
+                priority: "medium",
+                description: `Initial welcome packet and service review task for ${newClientName}.`,
+                notes: "",
+                createdAt: new Date().toISOString()
+            }
+        };
+        setTasks(prev => [newTask, ...prev]);
+
+        // Add activity
+        const newAct: Activity = {
+            id: `act-${Date.now()}`,
+            values: {
+                type: "incoming",
+                description: `New client "${newClientName}" registered in "${STAGE_LABELS[newClientStage] || newClientStage}"`,
+                createdAt: new Date().toISOString()
+            }
+        };
+        setActivities(prev => [newAct, ...prev]);
+
+        showToast(`Created client "${newClientName}"`);
+
+        // Reset inputs
+        setNewClientName("");
+        setNewClientEmail("");
+        setNewClientPhone("");
+        setNewClientStage("incoming");
+        setActiveSideEntity(null);
+    };
+
+    // Simulated navigation / pipeline filtering
+    const handleNavigate = useCallback((path: string) => {
+        if (path.includes("stage=")) {
+            // Simulated stage click filtering
+            showToast(`Stage link clicked: simulated filtering.`);
+        } else {
+            showToast(`Simulated navigation to: ${path}`);
+        }
+    }, [showToast]);
+
+    // Derived counts/funnel overview data
+    const activeStagesData = useMemo(() => {
+        const stagesList = INITIAL_STAGES[selectedPipelineId] || [];
+        return stagesList.map(s => {
+            const count = clients.filter(c => c.stage === s.stageKey).length;
+            return { ...s, count } as PipelineStage;
+        });
+    }, [clients, selectedPipelineId]);
+
+    const sortedStages = useMemo(() => {
+        return [...activeStagesData].sort((a, b) => a.sortOrder - b.sortOrder);
+    }, [activeStagesData]);
+
+    const activeStagesList = useMemo(() =>
+        sortedStages.filter(s => !s.isTerminal && !s.isLostStage),
+        [sortedStages]
+    );
+
+    const closedStagesList = useMemo(() =>
+        sortedStages.filter(s => s.isTerminal || s.isLostStage),
+        [sortedStages]
+    );
+
+    const totalInPipeline = useMemo(() => {
+        return clients.filter(c => c.stage !== "completed").length;
+    }, [clients]);
+
+    const insights = useMemo(() => {
+        const activeClients = clients.filter(c => c.stage !== "completed" && c.stage !== "delivered").length;
+        const overdueTaskCount = tasks.filter(t => {
+            if (t.values.status !== "pending") return false;
+            if (!t.values.dueDate) return false;
+            return new Date(t.values.dueDate) < new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
+        }).length;
+
+        return {
+            pipelines: PIPELINES,
+            activeClients,
+            potentialRevenue: activeClients * 2500,
+            contractedRevenue: clients.filter(c => c.stage === "completed" || c.stage === "active").length * 8000,
+            overdueTaskCount
+        };
+    }, [clients, tasks]);
+
+    const totalRevenue = insights.contractedRevenue + insights.potentialRevenue;
+
+    /* ── Render Drawer Sub-panels ──────────────────────────── */
+
+    const renderDrawerTask = (taskId?: string) => {
+        const task = tasksMap.get(taskId || "");
+        if (!task) return <Typography variant="body2" color="secondary">Task not found.</Typography>;
+
+        const isCompleted = task.values.status === "completed";
+        const clientInfo = task.values.clientId ? clients.find(c => c.id === task.values.clientId) : null;
+        const stageName = task.values.stageId ? STAGE_LABELS[task.values.stageId] : "None";
+
+        return (
+            <div className="flex-1 space-y-4">
+                <div>
+                    <Typography variant="caption" color="secondary" className="uppercase text-[9px] tracking-wider font-semibold block mb-1">Task Title</Typography>
+                    <div className="flex items-start gap-2.5">
+                        <span className="pt-1">
+                            <input
+                                type="checkbox"
+                                checked={isCompleted}
+                                onChange={() => handleToggleTask(task.id, task.values.status)}
+                                className="h-4 w-4 rounded border-surface-300 text-primary focus:ring-primary"
+                            />
+                        </span>
+                        <Typography variant="h6" className={isCompleted ? "line-through text-text-disabled dark:text-text-disabled-dark" : "text-text-primary dark:text-text-primary-dark"}>
+                            {task.values.title}
+                        </Typography>
+                    </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4 py-2 border-y border-surface-200 dark:border-surface-700">
+                    <div>
+                        <Typography variant="caption" color="secondary" className="uppercase text-[9px] tracking-wider block">Due Date</Typography>
+                        <Typography variant="body2" className="font-medium mt-0.5 inline-flex items-center gap-1">
+                            <Calendar className="h-3.5 w-3.5 text-surface-400" />
+                            {task.values.dueDate || "No due date"}
+                        </Typography>
+                    </div>
+                    <div>
+                        <Typography variant="caption" color="secondary" className="uppercase text-[9px] tracking-wider block">Priority</Typography>
+                        <Typography variant="body2" className="font-medium mt-0.5">
+                            {task.values.priority === "high" ? (
+                                <span className="text-red-500 font-semibold uppercase text-xs">High</span>
+                            ) : task.values.priority === "medium" ? (
+                                <span className="text-amber-500 font-semibold uppercase text-xs">Medium</span>
+                            ) : (
+                                <span className="text-surface-450 dark:text-surface-500 uppercase text-xs">Low</span>
+                            )}
+                        </Typography>
+                    </div>
+                </div>
+
+                {clientInfo && (
+                    <div>
+                        <Typography variant="caption" color="secondary" className="uppercase text-[9px] tracking-wider font-semibold block mb-1">Related Client</Typography>
+                        <Card
+                            className="p-3 hover:bg-surface-accent-100 dark:hover:bg-surface-800 cursor-pointer transition-colors duration-150"
+                            onClick={() => openClientDrawer(clientInfo.id)}
+                        >
+                            <div className="flex items-center gap-2.5">
+                                <div className="w-8 h-8 rounded-full bg-surface-200 dark:bg-surface-700 text-surface-500 flex items-center justify-center font-bold">
+                                    {clientInfo.name[0].toUpperCase()}
+                                </div>
+                                <div className="flex-1 min-w-0">
+                                    <Typography variant="body2" className="font-medium truncate">{clientInfo.name}</Typography>
+                                    <Typography variant="caption" color="secondary" className="truncate text-[11px] block">{clientInfo.email}</Typography>
+                                </div>
+                            </div>
+                        </Card>
+                    </div>
+                )}
+
+                <div>
+                    <Typography variant="caption" color="secondary" className="uppercase text-[9px] tracking-wider block mb-0.5">Pipeline Stage</Typography>
+                    <Typography variant="body2" className="font-medium">{stageName}</Typography>
+                </div>
+
+                {task.values.description && (
+                    <div>
+                        <Typography variant="caption" color="secondary" className="uppercase text-[9px] tracking-wider block mb-0.5">Description</Typography>
+                        <div className="p-3 bg-surface-50 dark:bg-surface-900 rounded-md border border-surface-200 dark:border-surface-700">
+                            <Typography variant="body2" className="whitespace-pre-wrap text-text-primary dark:text-text-primary-dark">
+                                {task.values.description}
+                            </Typography>
+                        </div>
+                    </div>
+                )}
+
+                {task.values.notes && (
+                    <div>
+                        <Typography variant="caption" color="secondary" className="uppercase text-[9px] tracking-wider block mb-0.5">Notes</Typography>
+                        <Typography variant="body2" color="secondary" className="italic whitespace-pre-wrap">
+                            &ldquo;{task.values.notes}&rdquo;
+                        </Typography>
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    const renderDrawerClient = (clientId?: string) => {
+        const client = clients.find(c => c.id === clientId);
+        if (!client) return <Typography variant="body2" color="secondary">Client not found.</Typography>;
+
+        const clientTasks = tasks.filter(t => t.values.clientId === client.id);
+        const stageName = STAGE_LABELS[client.stage] || client.stage;
+
+        return (
+            <div className="flex-1 space-y-4">
+                <div className="flex items-center gap-3">
+                    <div className="w-12 h-12 rounded-full bg-primary/10 text-primary dark:text-primary-light flex items-center justify-center text-xl font-bold">
+                        {client.name[0].toUpperCase()}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                        <Typography variant="h6" className="truncate">{client.name}</Typography>
+                        <div className="flex items-center gap-1.5 mt-0.5">
+                            <span className="w-2 h-2 rounded-full bg-green-500" />
+                            <Typography variant="caption" color="secondary">{stageName}</Typography>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="space-y-2.5 py-3 border-y border-surface-200 dark:border-surface-700">
+                    <div className="flex items-center gap-2 text-surface-600 dark:text-surface-300">
+                        <Mail className="h-4 w-4 text-surface-400" />
+                        <Typography variant="body2">{client.email}</Typography>
+                    </div>
+                    <div className="flex items-center gap-2 text-surface-600 dark:text-surface-300">
+                        <Phone className="h-4 w-4 text-surface-400" />
+                        <Typography variant="body2">{client.phone}</Typography>
+                    </div>
+                </div>
+
+                <div>
+                    <Typography variant="caption" color="secondary" className="uppercase text-[9px] tracking-wider font-semibold block mb-2">Pending Client Tasks</Typography>
+                    {clientTasks.length === 0 ? (
+                        <Typography variant="body2" color="secondary" className="italic">No pending tasks for this client.</Typography>
+                    ) : (
+                        <div className="space-y-1.5">
+                            {clientTasks.map(t => (
+                                <Card
+                                    key={t.id}
+                                    className="p-2.5 hover:bg-surface-accent-100 dark:hover:bg-surface-800 cursor-pointer transition-colors duration-150"
+                                    onClick={() => openTaskDrawer(t.id)}
+                                >
+                                    <div className="flex items-start gap-2">
+                                        <input
+                                            type="checkbox"
+                                            checked={t.values.status === "completed"}
+                                            onChange={(e) => {
+                                                e.stopPropagation();
+                                                handleToggleTask(t.id, t.values.status);
+                                            }}
+                                            className="h-3.5 w-3.5 mt-0.5 rounded border-surface-300 text-primary"
+                                        />
+                                        <div className="flex-1 min-w-0">
+                                            <Typography variant="body2" className="truncate font-medium leading-snug">{t.values.title}</Typography>
+                                            {t.values.dueDate && (
+                                                <Typography variant="caption" color="secondary" className="text-[10px] block mt-0.5">Due: {t.values.dueDate}</Typography>
+                                            )}
+                                        </div>
+                                    </div>
+                                </Card>
+                            ))}
+                        </div>
+                    )}
+                </div>
+
+                <div className="pt-2">
+                    <Typography variant="caption" color="secondary" className="uppercase text-[9px] tracking-wider font-semibold block mb-2">Quick Actions</Typography>
+                    <div className="grid grid-cols-2 gap-2">
+                        <Button
+                            variant="outlined"
+                            size="small"
+                            onClick={() => {
+                                // Add simulated call note
+                                const newAct: Activity = {
+                                    id: `act-${Date.now()}`,
+                                    values: {
+                                        type: "zoom_setup",
+                                        description: `Scheduled discovery meeting with ${client.name}`,
+                                        createdAt: new Date().toISOString()
+                                    }
+                                };
+                                setActivities(prev => [newAct, ...prev]);
+                                showToast("Simulated action: Call scheduled");
+                            }}
+                        >
+                            Schedule Call
+                        </Button>
+                        <Button
+                            variant="outlined"
+                            size="small"
+                            onClick={() => {
+                                // Add simulated email note
+                                const newAct: Activity = {
+                                    id: `act-${Date.now()}`,
+                                    values: {
+                                        type: "email_sent",
+                                        description: `Email sent to ${client.name}`,
+                                        createdAt: new Date().toISOString(),
+                                        metadata: {
+                                            subject: "Following up on discovery call",
+                                            body: `Hi ${client.name.split(" ")[0]},\n\nJust wanted to follow up and see if you had any questions on the brochure.\n\nBest,\nFrancesco`,
+                                            to: client.email,
+                                            mode: "simulated"
+                                        }
+                                    }
+                                };
+                                setActivities(prev => [newAct, ...prev]);
+                                showToast("Simulated action: Email sent");
+                            }}
+                        >
+                            Send Email
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const renderDrawerNewClient = () => {
+        return (
+            <div className="flex-1 flex flex-col justify-between">
+                <div className="space-y-4">
+                    <Typography variant="subtitle1" className="mb-2">New Lead Details</Typography>
+
+                    <TextField
+                        label="Client Name"
+                        required
+                        value={newClientName}
+                        onChange={e => setNewClientName(e.target.value)}
+                        placeholder="e.g. George Clark"
+                    />
+
+                    <TextField
+                        label="Email Address"
+                        value={newClientEmail}
+                        onChange={e => setNewClientEmail(e.target.value)}
+                        placeholder="e.g. george@clark.com"
+                    />
+
+                    <TextField
+                        label="Phone Number"
+                        value={newClientPhone}
+                        onChange={e => setNewClientPhone(e.target.value)}
+                        placeholder="e.g. +1 (555) 0122"
+                    />
+
+                    <div>
+                        <Typography variant="caption" color="secondary" className="uppercase text-[9px] tracking-wider block mb-1">Pipeline Stage</Typography>
+                        <Select
+                            value={newClientStage}
+                            onValueChange={(v) => setNewClientStage(v as string)}
+                            size="small"
+                            renderValue={(v) => STAGE_LABELS[v as string] || v as string}
+                            position="popper"
+                        >
+                            {Object.entries(STAGE_LABELS).map(([key, val]) => (
+                                <SelectItem key={key} value={key}>{val}</SelectItem>
+                            ))}
+                        </Select>
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-2 pt-6 border-t border-surface-200 dark:border-surface-700 mt-6">
+                    <Button
+                        variant="outlined"
+                        color="neutral"
+                        className="flex-1"
+                        onClick={() => setActiveSideEntity(null)}
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        variant="filled"
+                        color="primary"
+                        className="flex-1"
+                        onClick={handleCreateClient}
+                        disabled={!newClientName.trim()}
+                    >
+                        Create
+                    </Button>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="relative w-full border rounded-xl bg-surface-50 dark:bg-surface-800 border-surface-200 dark:border-surface-700 shadow-sm flex flex-row">
+            {/* Dashboard main workspace */}
+            <div className="flex-1 flex flex-col p-4 md:p-6 transition-all duration-300">
+                {/* Header */}
+                <div className="flex flex-col sm:flex-row sm:items-end justify-between mb-6 gap-4">
+                    <div>
+                        <Typography variant="h4" className="tracking-tight">
+                            {getGreeting()} 👋
+                        </Typography>
+                        <Typography variant="body2" color="secondary" className="mt-0.5">
+                            {getFormattedDate()} — here&apos;s your crm overview.
+                        </Typography>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <Button
+                            variant="text"
+                            color="primary"
+                            size="small"
+                            onClick={() => {
+                                setLoading(true);
+                                setActivitiesLoading(true);
+                                setTimeout(() => {
+                                    setLoading(false);
+                                    setActivitiesLoading(false);
+                                    showToast("Data refreshed.");
+                                }, 300);
+                            }}
+                            disabled={loading}
+                            startIcon={<RefreshCw className={cls("h-4 w-4", loading && "animate-spin")} />}
+                        >
+                            Refresh
+                        </Button>
+                        <Button
+                            variant="filled"
+                            color="primary"
+                            size="small"
+                            onClick={openNewClientDrawer}
+                            startIcon={<UserPlus className="h-4 w-4" />}
+                        >
+                            New Client
+                        </Button>
+                    </div>
+                </div>
+
+                {/* KPI metrics row */}
+                <DashboardMetrics
+                    loading={loading}
+                    insights={insights}
+                    totalInPipeline={totalInPipeline}
+                    totalRevenue={totalRevenue}
+                />
+
+                {/* Pipeline visualizer */}
+                <PipelineOverview
+                    loading={loading}
+                    insights={insights}
+                    selectedPipelineId={selectedPipelineId}
+                    onPipelineChange={handlePipelineChange}
+                    onNavigate={handleNavigate}
+                    sortedStages={sortedStages}
+                    activeStages={activeStagesList}
+                    closedStages={closedStagesList}
+                    totalInPipeline={totalInPipeline}
+                    resolveColor={resolveColor}
+                />
+
+                {/* Combined Tasks, Calendar, and RecentActivity */}
+                <div className="grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-6 mt-2">
+                    <Card className="p-4 flex flex-col h-[400px]">
+                        <TasksView
+                            loading={loading}
+                            tasks={tasks}
+                            togglingIds={togglingIds}
+                            onToggleTask={handleToggleTask}
+                            onOpenTask={openTaskDrawer}
+                            onOpenClient={openClientDrawer}
+                            clientsMap={clientsMap}
+                            pipelineStages={sortedStages}
+                            recentlyToggledIds={recentlyToggledIds}
+                            completedTasks={completedTasks}
+                            completedLoaded={completedLoaded}
+                            loadingCompleted={loadingCompleted}
+                            completedHasMore={false}
+                            onExpandCompleted={handleExpandCompleted}
+                            onLoadMoreCompleted={handleLoadMoreCompleted}
+                        />
+                    </Card>
+
+                    <div className="flex flex-col gap-6">
+                        <Card className="p-4 h-auto">
+                            <CalendarWidget
+                                loading={loading}
+                                tasks={tasks.concat(completedTasks)}
+                                onOpenTask={openTaskDrawer}
+                            />
+                        </Card>
+                        <RecentActivity
+                            activities={activities}
+                            activitiesLoading={activitiesLoading}
+                            tasksMap={tasksMap}
+                            onCompleteTask={handleCompleteTaskFromActivity}
+                            onViewEmail={handleViewEmail}
+                            onOpenTask={handleOpenTask}
+                            emailViewerOpen={emailViewerOpen}
+                            onEmailViewerOpenChange={setEmailViewerOpen}
+                            selectedEmail={selectedEmail}
+                        />
+                    </div>
+                </div>
+            </div>
+
+            {/* Custom Mock Side panel sliding in */}
+            <div className={cls(
+                "fixed top-0 right-0 bottom-0 w-full sm:w-[420px] bg-white dark:bg-surface-900 border-l border-surface-200 dark:border-surface-700 shadow-2xl z-40 transition-transform duration-300 ease-in-out flex flex-col",
+                activeSideEntity ? "translate-x-0" : "translate-x-full"
+            )}>
+                <div className="p-4 flex items-center justify-between border-b border-surface-200 dark:border-surface-800">
+                    <Typography variant="subtitle1" className="font-semibold uppercase tracking-wider text-[10px] color-secondary">
+                        {activeSideEntity?.type === "task" ? "Task Details" : activeSideEntity?.type === "client" ? "Client profile" : "Create Lead"}
+                    </Typography>
+                    <button
+                        onClick={() => setActiveSideEntity(null)}
+                        className="p-1 rounded-md text-surface-400 hover:text-surface-700 hover:bg-surface-100 dark:hover:bg-surface-800 focus:outline-none"
+                    >
+                        <X className="h-4 w-4" />
+                    </button>
+                </div>
+                <div className="flex-1 overflow-y-auto p-5 flex flex-col">
+                    {activeSideEntity?.type === "task" && renderDrawerTask(activeSideEntity.id)}
+                    {activeSideEntity?.type === "client" && renderDrawerClient(activeSideEntity.id)}
+                    {activeSideEntity?.type === "new_client" && renderDrawerNewClient()}
+                </div>
+            </div>
+
+            {/* Backdrop click to close drawer */}
+            {activeSideEntity && (
+                <div
+                    onClick={() => setActiveSideEntity(null)}
+                    className="fixed inset-0 bg-black/20 dark:bg-black/50 z-30 transition-opacity duration-300"
+                />
+            )}
+
+            {/* Custom interactive toast popup */}
+            <div className={cls(
+                "absolute bottom-4 left-4 z-50 transition-all duration-300 transform",
+                toastMessage ? "translate-y-0 opacity-100" : "translate-y-2 opacity-0 pointer-events-none"
+            )}>
+                {toastMessage && (
+                    <div className="px-4 py-3 bg-surface-900 dark:bg-surface-50 text-white dark:text-surface-900 text-xs font-medium rounded-lg shadow-lg flex items-center gap-2 border border-surface-800 dark:border-surface-200">
+                        <Check className="h-4 w-4 text-green-500" />
+                        <span>{toastMessage}</span>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}