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/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>
+    );
+};

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>
+    );
+};

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>
+    );
+};

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 */}

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>
+    );
+};