From 26c352e2ccbd9f0c9f549c1a805d23b0e449e6f7 Mon Sep 17 00:00:00 2001
From: saridsa2 <s.satya.suman@globaluniversityfoundation.com>
Date: Mon, 16 Mar 2026 18:24:25 +0530
Subject: [PATCH] feat: 3-role auth, role-based routing, role-specific sidebar
 navigation

Add cc-agent role alongside executive and admin. Login page now has 3 tabs
(Marketing Executive, Call Center, Admin). RoleRouter renders the appropriate
home page per role. Sidebar shows completely different nav items per role with
role subtitle. Placeholder pages added for Team Dashboard, Call Desk, Call
History, and Follow-ups.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/layout/role-router.tsx |  17 ++++
 src/components/layout/sidebar.tsx     | 110 +++++++++++++++++++++-----
 src/main.tsx                          |  12 ++-
 src/pages/call-desk.tsx               |  15 ++++
 src/pages/call-history.tsx            |  15 ++++
 src/pages/follow-ups-page.tsx         |  15 ++++
 src/pages/login.tsx                   |  45 +++++------
 src/pages/team-dashboard.tsx          |  15 ++++
 src/providers/auth-provider.tsx       |  12 ++-
 9 files changed, 208 insertions(+), 48 deletions(-)
 create mode 100644 src/components/layout/role-router.tsx
 create mode 100644 src/pages/call-desk.tsx
 create mode 100644 src/pages/call-history.tsx
 create mode 100644 src/pages/follow-ups-page.tsx
 create mode 100644 src/pages/team-dashboard.tsx

diff --git a/src/components/layout/role-router.tsx b/src/components/layout/role-router.tsx
new file mode 100644
index 0000000..9893dd4
--- /dev/null
+++ b/src/components/layout/role-router.tsx
@@ -0,0 +1,17 @@
+import { useAuth } from '@/providers/auth-provider';
+import { LeadWorkspacePage } from '@/pages/lead-workspace';
+import { TeamDashboardPage } from '@/pages/team-dashboard';
+import { CallDeskPage } from '@/pages/call-desk';
+
+export const RoleRouter = () => {
+    const { user } = useAuth();
+
+    switch (user.role) {
+        case 'admin':
+            return <TeamDashboardPage />;
+        case 'cc-agent':
+            return <CallDeskPage />;
+        default:
+            return <LeadWorkspacePage />;
+    }
+};
diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index d8e8c8e..cbaab71 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -1,12 +1,16 @@
 import type { FC, HTMLAttributes } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
+    faBell,
     faBullhorn,
     faChartMixed,
+    faClockRotateLeft,
     faCommentDots,
     faGear,
     faGrid2,
+    faPhone,
     faPlug,
+    faUsers,
 } from "@fortawesome/pro-duotone-svg-icons";
 import { useNavigate } from "react-router";
 import { MobileNavigationHeader } from "@/components/application/app-navigation/base-components/mobile-header";
@@ -36,28 +40,100 @@ const IconPlug: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
 const IconGear: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
     <FontAwesomeIcon icon={faGear} className={className} />
 );
+const IconPhone: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
+    <FontAwesomeIcon icon={faPhone} className={className} />
+);
+const IconBell: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
+    <FontAwesomeIcon icon={faBell} className={className} />
+);
+const IconClockRewind: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
+    <FontAwesomeIcon icon={faClockRotateLeft} className={className} />
+);
+const IconUsers: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
+    <FontAwesomeIcon icon={faUsers} className={className} />
+);
 
-const mainItems: NavItemType[] = [
-    { label: "Lead Workspace", href: "/", icon: IconGrid2 },
-    { label: "Campaigns", href: "/campaigns", icon: IconBullhorn },
-    { label: "Outreach", href: "/outreach", icon: IconCommentDots },
-];
+type NavSection = {
+    label: string;
+    items: NavItemType[];
+};
 
-const insightsItems: NavItemType[] = [
-    { label: "Analytics", href: "/analytics", icon: IconChartMixed },
-];
+const getNavSections = (role: string): NavSection[] => {
+    if (role === 'admin') {
+        return [
+            {
+                label: 'Overview',
+                items: [
+                    { label: 'Team Dashboard', href: '/', icon: IconGrid2 },
+                ],
+            },
+            {
+                label: 'Management',
+                items: [
+                    { label: 'Campaigns', href: '/campaigns', icon: IconBullhorn },
+                    { label: 'Analytics', href: '/analytics', icon: IconChartMixed },
+                ],
+            },
+            {
+                label: 'Admin',
+                items: [
+                    { label: 'Integrations', href: '/integrations', icon: IconPlug },
+                    { label: 'Settings', href: '/settings', icon: IconGear },
+                ],
+            },
+        ];
+    }
 
-const adminItems: NavItemType[] = [
-    { label: "Integrations", href: "/integrations", icon: IconPlug },
-    { label: "Settings", href: "/settings", icon: IconGear },
-];
+    if (role === 'cc-agent') {
+        return [
+            {
+                label: 'Call Center',
+                items: [
+                    { label: 'Call Desk', href: '/', icon: IconPhone },
+                    { label: 'Follow-ups', href: '/follow-ups', icon: IconBell },
+                    { label: 'Call History', href: '/call-history', icon: IconClockRewind },
+                ],
+            },
+        ];
+    }
+
+    // Executive (default)
+    return [
+        {
+            label: 'Main',
+            items: [
+                { label: 'Lead Workspace', href: '/', icon: IconGrid2 },
+                { label: 'All Leads', href: '/leads', icon: IconUsers },
+                { label: 'Campaigns', href: '/campaigns', icon: IconBullhorn },
+                { label: 'Outreach', href: '/outreach', icon: IconCommentDots },
+            ],
+        },
+        {
+            label: 'Insights',
+            items: [
+                { label: 'Analytics', href: '/analytics', icon: IconChartMixed },
+            ],
+        },
+    ];
+};
+
+const getRoleSubtitle = (role: string): string => {
+    switch (role) {
+        case 'admin':
+            return 'Marketing Admin';
+        case 'cc-agent':
+            return 'Call Center Agent';
+        default:
+            return 'Marketing Executive';
+    }
+};
 
 interface SidebarProps {
     activeUrl?: string;
 }
 
 export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
-    const { logout, isAdmin: authIsAdmin, user } = useAuth();
+    const { logout, user } = useAuth();
     const navigate = useNavigate();
 
     const handleSignOut = () => {
@@ -65,11 +141,7 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
         navigate('/login');
     };
 
-    const navSections = [
-        { label: "Main", items: mainItems },
-        { label: "Insights", items: insightsItems },
-        ...(authIsAdmin ? [{ label: "Admin", items: adminItems }] : []),
-    ];
+    const navSections = getNavSections(user.role);
 
     const content = (
         <aside
@@ -79,7 +151,7 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
             {/* Logo */}
             <div className="flex flex-col gap-1 px-4 lg:px-5">
                 <span className="text-md font-bold text-primary">Helix Engage</span>
-                <span className="text-xs text-tertiary">Ramaiah Memorial Hospital</span>
+                <span className="text-xs text-tertiary">Ramaiah Memorial Hospital &middot; {getRoleSubtitle(user.role)}</span>
             </div>
 
             {/* Nav sections */}
diff --git a/src/main.tsx b/src/main.tsx
index 39a1802..97b94e2 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,13 +3,17 @@ import { createRoot } from "react-dom/client";
 import { BrowserRouter, Outlet, Route, Routes } from "react-router";
 import { AppShell } from "@/components/layout/app-shell";
 import { AuthGuard } from "@/components/layout/auth-guard";
+import { RoleRouter } from "@/components/layout/role-router";
 import { NotFound } from "@/pages/not-found";
 import { AllLeadsPage } from "@/pages/all-leads";
+import { CallDeskPage } from "@/pages/call-desk";
+import { CallHistoryPage } from "@/pages/call-history";
 import { CampaignDetailPage } from "@/pages/campaign-detail";
 import { CampaignsPage } from "@/pages/campaigns";
-import { LeadWorkspacePage } from "@/pages/lead-workspace";
+import { FollowUpsPage } from "@/pages/follow-ups-page";
 import { LoginPage } from "@/pages/login";
 import { OutreachPage } from "@/pages/outreach";
+import { TeamDashboardPage } from "@/pages/team-dashboard";
 import { AuthProvider } from "@/providers/auth-provider";
 import { DataProvider } from "@/providers/data-provider";
 import { RouteProvider } from "@/providers/router-provider";
@@ -33,11 +37,15 @@ createRoot(document.getElementById("root")!).render(
                                     </AppShell>
                                 }
                             >
-                                <Route path="/" element={<LeadWorkspacePage />} />
+                                <Route path="/" element={<RoleRouter />} />
                                 <Route path="/leads" element={<AllLeadsPage />} />
                                 <Route path="/campaigns" element={<CampaignsPage />} />
                                 <Route path="/campaigns/:id" element={<CampaignDetailPage />} />
                                 <Route path="/outreach" element={<OutreachPage />} />
+                                <Route path="/follow-ups" element={<FollowUpsPage />} />
+                                <Route path="/call-history" element={<CallHistoryPage />} />
+                                <Route path="/call-desk" element={<CallDeskPage />} />
+                                <Route path="/team-dashboard" element={<TeamDashboardPage />} />
                                 <Route path="*" element={<NotFound />} />
                             </Route>
                         </Route>
diff --git a/src/pages/call-desk.tsx b/src/pages/call-desk.tsx
new file mode 100644
index 0000000..4745b08
--- /dev/null
+++ b/src/pages/call-desk.tsx
@@ -0,0 +1,15 @@
+import { TopBar } from '@/components/layout/top-bar';
+
+export const CallDeskPage = () => {
+    return (
+        <div className="flex flex-1 flex-col">
+            <TopBar title="Call Desk" subtitle="Manage inbound and outbound calls" />
+            <div className="flex flex-1 items-center justify-center p-7">
+                <div className="flex flex-col items-center gap-2 text-center">
+                    <h2 className="text-display-xs font-bold text-primary">Call Desk</h2>
+                    <p className="text-sm text-tertiary">Coming soon — call queue, dialer, and live call management.</p>
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/src/pages/call-history.tsx b/src/pages/call-history.tsx
new file mode 100644
index 0000000..9405750
--- /dev/null
+++ b/src/pages/call-history.tsx
@@ -0,0 +1,15 @@
+import { TopBar } from '@/components/layout/top-bar';
+
+export const CallHistoryPage = () => {
+    return (
+        <div className="flex flex-1 flex-col">
+            <TopBar title="Call History" subtitle="Past call logs and recordings" />
+            <div className="flex flex-1 items-center justify-center p-7">
+                <div className="flex flex-col items-center gap-2 text-center">
+                    <h2 className="text-display-xs font-bold text-primary">Call History</h2>
+                    <p className="text-sm text-tertiary">Coming soon — call logs, recordings, and outcome tracking.</p>
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/src/pages/follow-ups-page.tsx b/src/pages/follow-ups-page.tsx
new file mode 100644
index 0000000..1abb587
--- /dev/null
+++ b/src/pages/follow-ups-page.tsx
@@ -0,0 +1,15 @@
+import { TopBar } from '@/components/layout/top-bar';
+
+export const FollowUpsPage = () => {
+    return (
+        <div className="flex flex-1 flex-col">
+            <TopBar title="Follow-ups" subtitle="Scheduled follow-up tasks" />
+            <div className="flex flex-1 items-center justify-center p-7">
+                <div className="flex flex-col items-center gap-2 text-center">
+                    <h2 className="text-display-xs font-bold text-primary">Follow-ups</h2>
+                    <p className="text-sm text-tertiary">Coming soon — follow-up reminders, scheduling, and task management.</p>
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index a95ba0b..0156e84 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -20,7 +20,7 @@ const features = [
     },
 ];
 
-type RoleTab = 'executive' | 'admin';
+type RoleTab = 'executive' | 'cc-agent' | 'admin';
 
 export const LoginPage = () => {
     const { login, setRole } = useAuth();
@@ -124,30 +124,25 @@ export const LoginPage = () => {
                     <div
                         className="mt-8 flex items-center gap-1 rounded-xl p-1 bg-secondary"
                     >
-                        <button
-                            type="button"
-                            onClick={() => handleTabChange('executive')}
-                            className={[
-                                'flex-1 rounded-lg px-3 py-2 text-sm font-semibold transition duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]',
-                                activeTab === 'executive'
-                                    ? 'bg-primary text-brand-secondary shadow-sm'
-                                    : 'text-tertiary hover:text-secondary',
-                            ].join(' ')}
-                        >
-                            Marketing Executive
-                        </button>
-                        <button
-                            type="button"
-                            onClick={() => handleTabChange('admin')}
-                            className={[
-                                'flex-1 rounded-lg px-3 py-2 text-sm font-semibold transition duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]',
-                                activeTab === 'admin'
-                                    ? 'bg-primary text-brand-secondary shadow-sm'
-                                    : 'text-tertiary hover:text-secondary',
-                            ].join(' ')}
-                        >
-                            Admin
-                        </button>
+                        {([
+                            { key: 'executive' as const, label: 'Marketing Executive' },
+                            { key: 'cc-agent' as const, label: 'Call Center' },
+                            { key: 'admin' as const, label: 'Admin' },
+                        ]).map((tab) => (
+                            <button
+                                key={tab.key}
+                                type="button"
+                                onClick={() => handleTabChange(tab.key)}
+                                className={[
+                                    'flex-1 rounded-lg px-3 py-2 text-sm font-semibold transition duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]',
+                                    activeTab === tab.key
+                                        ? 'bg-primary text-brand-secondary shadow-sm'
+                                        : 'text-tertiary hover:text-secondary',
+                                ].join(' ')}
+                            >
+                                {tab.label}
+                            </button>
+                        ))}
                     </div>
 
                     {/* Google sign-in */}
diff --git a/src/pages/team-dashboard.tsx b/src/pages/team-dashboard.tsx
new file mode 100644
index 0000000..4cb72d6
--- /dev/null
+++ b/src/pages/team-dashboard.tsx
@@ -0,0 +1,15 @@
+import { TopBar } from '@/components/layout/top-bar';
+
+export const TeamDashboardPage = () => {
+    return (
+        <div className="flex flex-1 flex-col">
+            <TopBar title="Team Dashboard" subtitle="Team performance overview" />
+            <div className="flex flex-1 items-center justify-center p-7">
+                <div className="flex flex-col items-center gap-2 text-center">
+                    <h2 className="text-display-xs font-bold text-primary">Team Dashboard</h2>
+                    <p className="text-sm text-tertiary">Coming soon — team performance metrics and management tools.</p>
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/src/providers/auth-provider.tsx b/src/providers/auth-provider.tsx
index fd01ba0..62611ee 100644
--- a/src/providers/auth-provider.tsx
+++ b/src/providers/auth-provider.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import { createContext, useContext, useState } from 'react';
 
-export type Role = 'executive' | 'admin';
+export type Role = 'executive' | 'admin' | 'cc-agent';
 
 type User = {
     name: string;
@@ -14,6 +14,7 @@ type AuthContextType = {
     user: User;
     setRole: (role: Role) => void;
     isAdmin: boolean;
+    isCCAgent: boolean;
     isAuthenticated: boolean;
     login: () => void;
     logout: () => void;
@@ -32,6 +33,12 @@ const USERS: Record<Role, User> = {
         role: 'executive',
         email: 'sanjay@ramaiah.com',
     },
+    'cc-agent': {
+        name: 'Rekha S.',
+        initials: 'RS',
+        role: 'cc-agent' as const,
+        email: 'rekha@ramaiah.com',
+    },
 };
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
@@ -56,12 +63,13 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
 
     const user = USERS[role];
     const isAdmin = role === 'admin';
+    const isCCAgent = role === 'cc-agent';
 
     const login = () => setIsAuthenticated(true);
     const logout = () => setIsAuthenticated(false);
 
     return (
-        <AuthContext.Provider value={{ user, setRole, isAdmin, isAuthenticated, login, logout }}>
+        <AuthContext.Provider value={{ user, setRole, isAdmin, isCCAgent, isAuthenticated, login, logout }}>
             {children}
         </AuthContext.Provider>
     );