diff --git a/src/App.tsx b/src/App.tsx
index ac5b9ee..7360e3d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,14 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Button } from './components/ui/button';
+import { ProgrammesTable } from './components/ProgrammesTable';
+import { ProgrammeSchedule } from './components/ProgrammeSchedule';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from './components/ui/dropdown-menu';
+import klcLogo from './assets/klc-logo.png';
+import { ProgrammeCalendar } from './components/ProgrammeCalendar';
+import { LearningAnalyticsTable } from './components/LearningAnalyticsTable';
+import { DiscussionForumFeed } from './components/DiscussionForumFeed';
+import { ProgrammeHRView } from './components/ProgrammeHRView';
+import { CourseHRView } from './components/CourseHRView';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './components/ui/card';
 import { Badge } from './components/ui/badge';
 import { Input } from './components/ui/input';
@@ -14,7 +23,7 @@ import { Skeleton } from './components/ui/skeleton';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './components/ui/tabs';
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from './components/ui/breadcrumb';
 import { Alert, AlertDescription } from './components/ui/alert';
-import logo from '../src/assets/klc-logo.png';
+import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PaginationEllipsis } from './components/ui/pagination';
 import { 
   Home, 
   Users, 
@@ -52,8 +61,27 @@ import {
   CreditCard,
   Shield,
   ExternalLink,
-  Info
+  Info,
+  LogOut,
+  User,
+  Repeat,
+  Users2,
+  Pin,
+  Heart,
+  MessageCircle,
+  Share2,
+  Flag,
+  Reply,
+  Hash,
+  Send,
+  Image,
+  Bold,
+  Italic,
+  Link,
+  List,
+  Smile
 } from 'lucide-react';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from 'recharts';
 
 // Types
 interface KPIData {
@@ -92,6 +120,48 @@ interface Deadline {
   dueTime: string;
 }
 
+interface Cohort {
+  id: string;
+  name: string;
+  memberCount: number;
+  programme?: string;
+  isActive: boolean;
+}
+
+interface Thread {
+  id: string;
+  title: string;
+  content: string;
+  author: {
+    id: string;
+    name: string;
+    avatar?: string;
+  };
+  cohortId: string;
+  createdAt: string;
+  lastActivity: string;
+  replyCount: number;
+  isPinned?: boolean;
+  tags?: string[];
+  reactions?: { [key: string]: string[] }; // emoji -> user IDs
+}
+
+interface Post {
+  id: string;
+  threadId: string;
+  content: string;
+  author: {
+    id: string;
+    name: string;
+    avatar?: string;
+  };
+  createdAt: string;
+  editedAt?: string;
+  reactions?: { [key: string]: string[] };
+  isReported?: boolean;
+  parentId?: string; // for nested replies
+}
+
 interface TestimonialFormData {
   name: string;
   email: string;
@@ -102,6 +172,21 @@ interface TestimonialFormData {
   consentToPublish: boolean;
 }
 
+// Helper function to determine user access level
+// This would typically be determined by user roles/permissions from your backend
+const getUserAccessLevel = (): 'full' | 'course-only' => {
+  // Mock logic: For demonstration, we'll simulate that users with email containing 'course-only' 
+  // have course-only access. In real implementation, this would check user roles/permissions.
+  
+  // For testing purposes, you can change this return value:
+  // - 'full': Shows programmes with "Programme/Course" column header and programme data
+  // - 'course-only': Shows only courses with "Course" column header and course data
+  
+  // TODO: Replace with actual user role/permission check from your backend
+  // Example: return userRole === 'hr-course-only' ? 'course-only' : 'full';
+  return 'full'; // Default to full access
+};
+
 // Custom hooks
 const useLocalStorage = (key: string, initialValue: any) => {
   const [storedValue, setStoredValue] = useState(() => {
@@ -182,6 +267,118 @@ const mockDeadlines: Deadline[] = [
   { id: '5', title: 'Team Building Session', type: 'webinar', dueDate: 'Jan 5', dueTime: '3:30 PM' }
 ];
 
+const mockCohorts: Cohort[] = [
+  { id: '1', name: 'Leadership Development Q4 2024', memberCount: 30, programme: 'Leadership Development', isActive: true },
+  { id: '2', name: 'Technical Skills Cohort A', memberCount: 25, programme: 'Technical Skills', isActive: true },
+  { id: '3', name: 'Communication Workshop Group', memberCount: 18, programme: 'Communication', isActive: true },
+  { id: '4', name: 'Project Management Certification', memberCount: 22, programme: 'Project Management', isActive: false }
+];
+
+const mockThreads: Thread[] = [
+  {
+    id: '1',
+    title: 'Best practices for team communication during remote work',
+    content: 'What strategies have you found most effective for maintaining clear communication with remote team members? I\'d love to hear about tools and techniques that have worked well for your teams.',
+    author: { id: 'user1', name: 'Sarah Chen' },
+    cohortId: '1',
+    createdAt: '2024-12-28T10:30:00Z',
+    lastActivity: '2024-12-28T15:45:00Z',
+    replyCount: 12,
+    isPinned: true,
+    tags: ['communication', 'remote-work', 'best-practices'],
+    reactions: { '👍': ['user2', 'user3'], '💡': ['user4'] }
+  },
+  {
+    id: '2',
+    title: 'How to handle difficult conversations with team members?',
+    content: 'I\'m struggling with addressing performance issues with one of my team members. Any advice on how to approach this sensitively while being direct about expectations?',
+    author: { id: 'user2', name: 'Michael Rodriguez' },
+    cohortId: '1',
+    createdAt: '2024-12-28T09:15:00Z',
+    lastActivity: '2024-12-28T14:20:00Z',
+    replyCount: 8,
+    tags: ['difficult-conversations', 'performance-management'],
+    reactions: { '🤔': ['user1', 'user5'], '💪': ['user3'] }
+  },
+  {
+    id: '3',
+    title: 'Share your leadership book recommendations',
+    content: 'What books have been most influential in your leadership journey? Looking for practical reads that offer actionable insights.',
+    author: { id: 'user3', name: 'Emma Thompson' },
+    cohortId: '1',
+    createdAt: '2024-12-27T16:00:00Z',
+    lastActivity: '2024-12-28T11:30:00Z',
+    replyCount: 15,
+    tags: ['books', 'recommendations', 'learning'],
+    reactions: { '📚': ['user1', 'user2', 'user4', 'user5'], '⭐': ['user6'] }
+  },
+  {
+    id: '4',
+    title: 'Question about the delegation framework from Module 3',
+    content: 'Can someone clarify the difference between the delegation levels we covered? I want to make sure I\'m applying them correctly in my current projects.',
+    author: { id: 'user4', name: 'David Kim' },
+    cohortId: '1',
+    createdAt: '2024-12-27T14:30:00Z',
+    lastActivity: '2024-12-27T18:45:00Z',
+    replyCount: 6,
+    tags: ['module-3', 'delegation', 'clarification'],
+    reactions: { '❓': ['user2'], '👍': ['user1'] }
+  }
+];
+
+const mockPosts: Post[] = [
+  {
+    id: '1',
+    threadId: '1',
+    content: 'Great question! I\'ve found that establishing clear communication protocols at the start of projects makes a huge difference. We use a combination of daily stand-ups via video call and async updates through Slack.',
+    author: { id: 'user5', name: 'Lisa Wang' },
+    createdAt: '2024-12-28T11:00:00Z',
+    reactions: { '👍': ['user1', 'user2'], '💯': ['user3'] }
+  },
+  {
+    id: '2',
+    threadId: '1',
+    content: 'One thing that\'s worked well for our team is having "communication preferences" documented for each team member. Some prefer quick calls for complex topics, others prefer detailed written explanations. Knowing this upfront prevents a lot of miscommunication.',
+    author: { id: 'user6', name: 'Robert Lee' },
+    createdAt: '2024-12-28T12:15:00Z',
+    reactions: { '💡': ['user1', 'user4'], '👏': ['user2'] }
+  },
+  {
+    id: '3',
+    threadId: '1',
+    content: '@Sarah Chen Thanks for starting this discussion! I\'d add that regular one-on-ones have been crucial for me. Even in remote settings, that personal connection makes a big difference in team dynamics.',
+    author: { id: 'user7', name: 'Jennifer Davis' },
+    createdAt: '2024-12-28T13:30:00Z',
+    reactions: { '🎯': ['user1'], '👍': ['user5'] }
+  }
+];
+
+// Chart data for reports
+const completionTrendsData = [
+  { week: 'Week 1', completed: 12, started: 25, completionRate: 48 },
+  { week: 'Week 2', completed: 18, started: 30, completionRate: 60 },
+  { week: 'Week 3', completed: 22, started: 35, completionRate: 63 },
+  { week: 'Week 4', completed: 28, started: 40, completionRate: 70 },
+  { week: 'Week 5', completed: 35, started: 45, completionRate: 78 },
+  { week: 'Week 6', completed: 42, started: 50, completionRate: 84 },
+  { week: 'Week 7', completed: 38, started: 48, completionRate: 79 },
+  { week: 'Week 8', completed: 45, started: 52, completionRate: 87 },
+  { week: 'Week 9', completed: 48, started: 55, completionRate: 87 },
+  { week: 'Week 10', completed: 52, started: 58, completionRate: 90 },
+  { week: 'Week 11', completed: 55, started: 60, completionRate: 92 },
+  { week: 'Week 12', completed: 58, started: 62, completionRate: 94 }
+];
+
+const activityHeatmapData = [
+  { day: 'Mon', '6AM': 2, '9AM': 15, '12PM': 25, '3PM': 35, '6PM': 20, '9PM': 8 },
+  { day: 'Tue', '6AM': 3, '9AM': 18, '12PM': 30, '3PM': 38, '6PM': 22, '9PM': 10 },
+  { day: 'Wed', '6AM': 5, '9AM': 22, '12PM': 28, '3PM': 42, '6PM': 25, '9PM': 12 },
+  { day: 'Thu', '6AM': 4, '9AM': 20, '12PM': 32, '3PM': 40, '6PM': 28, '9PM': 15 },
+  { day: 'Fri', '6AM': 6, '9AM': 25, '12PM': 35, '3PM': 30, '6PM': 18, '9PM': 8 },
+  { day: 'Sat', '6AM': 8, '9AM': 12, '12PM': 20, '3PM': 25, '6PM': 30, '9PM': 22 },
+  { day: 'Sun', '6AM': 10, '9AM': 8, '12PM': 15, '3PM': 18, '6PM': 28, '9PM': 25 }
+];
+
 // Components
 const KPICard: React.FC<{ data: KPIData; onClick?: () => void; className?: string }> = ({ data, onClick, className = '' }) => {
   const countedValue = useCountUp(data.value);
@@ -221,14 +418,97 @@ const KPICard: React.FC<{ data: KPIData; onClick?: () => void; className?: strin
   );
 };
 
+const EmployeeProgressCard: React.FC<{ 
+  employee: Employee; 
+  onEdit?: (employee: Employee) => void;
+}> = ({ employee, onEdit }) => {
+  const getProgressColor = (progress: number) => {
+    if (progress >= 80) return 'bg-status-success';
+    if (progress >= 60) return 'bg-status-warn';
+    return 'bg-status-error';
+  };
+
+  const getProgressStatus = (progress: number) => {
+    if (progress === 0) return 'Not Started';
+    if (progress >= 80) return 'Excellent';
+    if (progress >= 60) return 'Good';
+    return 'Needs Attention';
+  };
+
+  return (
+    <Card className="cursor-pointer hover:shadow-md transition-all duration-200" onClick={() => onEdit?.(employee)}>
+      <CardContent className="pt-4">
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-muted rounded-full flex items-center justify-center">
+              <span className="font-medium text-sm">{employee.name.split(' ').map(n => n[0]).join('')}</span>
+            </div>
+            <div>
+              <p className="font-medium">{employee.name}</p>
+              <Badge 
+                variant={
+                  employee.status === 'Active' ? 'default' : 
+                  employee.status === 'Pending' ? 'secondary' : 'destructive'
+                }
+                className="text-xs"
+              >
+                {employee.status}
+              </Badge>
+            </div>
+          </div>
+          <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); onEdit?.(employee); }}>
+            <Eye className="h-4 w-4" />
+          </Button>
+        </div>
+        
+        {employee.programme && (
+          <div className="space-y-2">
+            <div className="flex justify-between items-center">
+              <div>
+                <p className="text-sm font-medium">{employee.programme}</p>
+                <p className="text-xs text-muted-foreground">{employee.course}</p>
+              </div>
+              <span className="text-sm font-medium">{employee.progress}%</span>
+            </div>
+            
+            <div className="space-y-1">
+              <Progress value={employee.progress} className="h-2" />
+              <div className="flex justify-between items-center">
+                <Badge 
+                  variant="outline" 
+                  className={`text-xs ${getProgressColor(employee.progress || 0)} text-white border-0`}
+                >
+                  {getProgressStatus(employee.progress || 0)}
+                </Badge>
+                <span className="text-xs text-muted-foreground">{employee.lastActivity}</span>
+              </div>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
 const EmployeeTable: React.FC<{ 
   employees: Employee[]; 
   onEdit?: (employee: Employee) => void;
   showProgress?: boolean;
   maxHeight?: string;
-}> = ({ employees, onEdit, showProgress = true, maxHeight = "400px" }) => {
+  viewMode?: 'table' | 'cards';
+}> = ({ employees, onEdit, showProgress = true, maxHeight = "400px", viewMode = 'table' }) => {
+  if (viewMode === 'cards') {
+    return (
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" style={{ maxHeight }}>
+        {employees.map((employee) => (
+          <EmployeeProgressCard key={employee.id} employee={employee} onEdit={onEdit} />
+        ))}
+      </div>
+    );
+  }
+
   return (
-    <div className={`rounded-md border`} style={{ maxHeight }}>
+    <div className={`rounded-md border overflow-auto`} style={{ maxHeight }}>
       <Table>
         <TableHeader className="sticky-header">
           <TableRow>
@@ -336,9 +616,8 @@ const HRSidebar: React.FC<{
   const menuItems = [
     { id: 'home', label: 'Dashboard', icon: Home, path: '/hr/home' },
     { id: 'learners', label: 'Learners', icon: Users, path: '/hr/learners' },
-    { id: 'analytics', label: 'Analytics', icon: BarChart3, path: '/hr/analytics' },
-    { id: 'testimonials', label: 'Testimonials', icon: MessageSquare, path: '/hr/testimonials' },
-    { id: 'settings', label: 'Settings', icon: Settings, path: '/hr/settings' }
+    { id: 'reports', label: 'Reports', icon: BarChart3, path: '/hr/reports' },
+    { id: 'discussions', label: 'Discussion Forums', icon: MessageSquare, path: '/hr/discussions' }
   ];
 
   return (
@@ -346,9 +625,9 @@ const HRSidebar: React.FC<{
       <div className="p-6">
         <div className="flex items-center gap-2">
           <div className="w-8 h-8 bg-brand-charcoal rounded-md flex items-center justify-center">
-            <span className="text-brand-charcoal-foreground font-bold text-sm">AC</span>
+            <span className="text-brand-charcoal-foreground font-bold text-sm">TS</span>
           </div>
-          <span className="font-semibold text-sidebar-foreground">Acme Corp</span>
+          <span className="font-semibold text-sidebar-foreground">Tech Solutions Pvt Ltd</span>
         </div>
       </div>
       
@@ -389,7 +668,9 @@ const HRSidebar: React.FC<{
 const TopNav: React.FC<{ 
   onMenuToggle?: () => void;
   showMenuButton?: boolean;
-}> = ({ onMenuToggle, showMenuButton = false }) => {
+  onNotificationToggle?: () => void;
+  notificationCount?: number;
+}> = ({ onMenuToggle, showMenuButton = false, onNotificationToggle, notificationCount = 0 }) => {
   return (
     <header className="h-16 bg-background border-b border-chrome-divider flex items-center justify-between px-4 lg:px-6">
       <div className="flex items-center gap-4">
@@ -404,35 +685,130 @@ const TopNav: React.FC<{
             <Menu className="h-5 w-5" />
           </Button>
         )}
-        <div className="flex items-center gap-2">
-          <img
-          src={logo}
-          alt="Logo"
-          className="h-8 md:h-12 lg:h-14 w-auto object-contain"
-        />
+        <div className="flex items-center gap-3">
+          <img 
+            src={klcLogo} 
+            alt="Kautilya Leadership Centre" 
+            className="h-8 w-auto"
+          />
         </div>
       </div>
       
       <div className="flex items-center gap-2">
-        <Button variant="ghost" size="icon" className="min-tap-44" aria-label="Notifications">
+        <Button 
+          variant="ghost" 
+          size="icon" 
+          className="min-tap-44 relative" 
+          aria-label="Notifications"
+          onClick={onNotificationToggle}
+        >
           <Bell className="h-4 w-4" />
+          {notificationCount > 0 && (
+            <span className="absolute -top-1 -right-1 h-5 w-5 bg-status-error text-status-error-foreground rounded-full text-xs flex items-center justify-center">
+              {notificationCount > 9 ? '9+' : notificationCount}
+            </span>
+          )}
         </Button>
-        <div className="w-8 h-8 bg-muted rounded-full flex items-center justify-center">
-          <span className="text-xs font-medium">HR</span>
-        </div>
+        
+        {/* HR Profile Dropdown */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="w-10 h-10 bg-brand-navy text-white rounded-full flex items-center justify-center p-0 min-tap-44">
+              <span className="text-sm font-medium">P</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-80 p-0">
+            {/* User Profile Section */}
+            <div className="flex items-center gap-3 p-4 bg-muted/20">
+              <div className="w-12 h-12 bg-brand-navy text-white rounded-full flex items-center justify-center">
+                <span className="text-lg font-medium">P</span>
+              </div>
+              <div>
+                <p className="font-medium">Priya</p>
+                <p className="text-sm text-muted-foreground">Tech Solutions Pvt Ltd</p>
+              </div>
+            </div>
+
+            {/* Switch Mode Section */}
+            <div className="p-4">
+              <p className="text-sm font-medium mb-3">• Switch Mode</p>
+              <div className="flex gap-2">
+                <Button 
+                  size="sm" 
+                  variant="outline" 
+                  className="flex-1"
+                >
+                  <BookOpen className="mr-2 h-4 w-4" />
+                  Learning
+                </Button>
+                <Button 
+                  size="sm" 
+                  className="flex-1 bg-brand-navy text-white hover:bg-brand-navy/90"
+                >
+                  <Building2 className="mr-2 h-4 w-4" />
+                  HR Mode
+                </Button>
+              </div>
+            </div>
+
+            {/* Switch Accounts Section */}
+            <div className="px-4 pb-4">
+              <p className="text-sm font-medium mb-3">• Switch Accounts</p>
+              <div className="flex gap-2">
+                <Button 
+                  size="sm" 
+                  className="flex-1 bg-brand-navy text-white hover:bg-brand-navy/90"
+                >
+                  <Building2 className="mr-2 h-4 w-4" />
+                  Corporate
+                </Button>
+                <Button 
+                  size="sm" 
+                  variant="outline" 
+                  className="flex-1"
+                >
+                  <Users className="mr-2 h-4 w-4" />
+                  Personal
+                </Button>
+              </div>
+            </div>
+
+            <DropdownMenuSeparator />
+            
+            {/* Profile & Settings */}
+            <DropdownMenuItem className="p-4 focus:bg-muted/50">
+              <User className="mr-3 h-4 w-4" />
+              <div>
+                <p className="font-medium">Profile & Settings</p>
+                <p className="text-xs text-muted-foreground">Manage your account</p>
+              </div>
+            </DropdownMenuItem>
+            
+            {/* Sign out */}
+            <DropdownMenuItem className="p-4 text-status-error focus:bg-status-error/10 focus:text-status-error">
+              <LogOut className="mr-3 h-4 w-4" />
+              <div>
+                <p className="font-medium">Sign out</p>
+                <p className="text-xs text-muted-foreground">End your session</p>
+              </div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
     </header>
   );
 };
 
-const BreadcrumbNav: React.FC<{ currentScreen: string }> = ({ currentScreen }) => {
+const BreadcrumbNav: React.FC<{ currentScreen: string; currentProgrammeId?: string | null; currentCourseId?: string | null }> = ({ currentScreen, currentProgrammeId, currentCourseId }) => {
   const getBreadcrumbText = (screen: string) => {
     switch (screen) {
-      case 'home': return 'HR Home';
+      case 'home': return 'Dashboard';
       case 'learners': return 'Learners';
-      case 'analytics': return 'Analytics & Reports';
-      case 'settings': return 'HR Settings';
-      case 'testimonials': return 'Testimonials';
+      case 'discussions': return 'Discussion Forums';
+      case 'reports': return 'Reports';
+      case 'profile': return 'Profile';
+      case 'programme-view': return 'Programme Details';
+      case 'course-view': return 'Course Details';
       default: return 'HR Portal';
     }
   };
@@ -452,11 +828,83 @@ const BreadcrumbNav: React.FC<{ currentScreen: string }> = ({ currentScreen }) =
   );
 };
 
+const AnnouncementsPanel: React.FC<{ 
+  isOpen: boolean; 
+  onClose: () => void;
+  announcements: Announcement[];
+  onMarkAsRead?: (id: string) => void;
+}> = ({ isOpen, onClose, announcements, onMarkAsRead }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-y-0 right-0 w-80 bg-background border-l border-chrome-divider shadow-lg z-50 flex flex-col">
+      <div className="flex items-center justify-between p-4 border-b border-chrome-divider">
+        <h3 className="font-semibold">Announcements & Reminders</h3>
+        <Button 
+          variant="ghost" 
+          size="icon" 
+          onClick={onClose}
+          className="h-8 w-8"
+          aria-label="Close announcements panel"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+      
+      <div className="flex-1 overflow-y-auto p-4 space-y-3">
+        {announcements.map((item) => (
+          <div 
+            key={item.id} 
+            className={`
+              p-3 rounded-lg border transition-all duration-200 cursor-pointer hover:bg-muted/50
+              ${item.pinned ? 'bg-status-warn/10 border-status-warn/20' : 'bg-card border-chrome-divider'}
+            `}
+            onClick={() => onMarkAsRead?.(item.id)}
+          >
+            <div className="flex items-start justify-between mb-2">
+              <div className="flex items-center gap-2">
+                <div className={`p-1 rounded ${item.type === 'announcement' ? 'bg-brand-primary' : 'bg-status-warn'}`}>
+                  {item.type === 'announcement' ? 
+                    <Bell className="h-3 w-3 text-white" /> : 
+                    <Clock className="h-3 w-3 text-white" />
+                  }
+                </div>
+                {item.pinned && (
+                  <Badge variant="secondary" className="text-xs">Pinned</Badge>
+                )}
+              </div>
+              <span className="text-xs text-muted-foreground">{item.timestamp}</span>
+            </div>
+            
+            <h4 className="font-medium text-sm mb-1">{item.title}</h4>
+            <p className="text-xs text-muted-foreground">{item.content}</p>
+            
+            <div className="flex items-center justify-between mt-2">
+              <Badge variant="outline" className="text-xs capitalize">
+                {item.type}
+              </Badge>
+              <Button variant="ghost" size="sm" className="h-auto p-1 text-xs">
+                Mark as read
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+      
+      <div className="p-4 border-t border-chrome-divider">
+        <Button variant="outline" className="w-full text-sm">
+          View All Notifications
+        </Button>
+      </div>
+    </div>
+  );
+};
+
 const ChatBot: React.FC<{ currentScreen?: string }> = ({ currentScreen }) => {
   const [isOpen, setIsOpen] = useState(false);
   
   const getChipsForScreen = (screen?: string) => {
-    if (screen === 'testimonials') {
+    if (screen === 'profile') {
       return [
         "How do I submit a testimonial?",
         "When will my testimonial be reviewed?",
@@ -475,7 +923,7 @@ const ChatBot: React.FC<{ currentScreen?: string }> = ({ currentScreen }) => {
   const chips = getChipsForScreen(currentScreen);
 
   return (
-    <div className="fixed bottom-6 right-6 z-50">
+    <div className="fixed bottom-6 right-6 z-40">
       {isOpen && (
         <div className="mb-4 bg-card border border-chrome-divider rounded-lg shadow-lg p-4 w-80 animate-slide-up">
           <div className="flex justify-between items-center mb-3">
@@ -515,40 +963,19 @@ const ChatBot: React.FC<{ currentScreen?: string }> = ({ currentScreen }) => {
 };
 
 // Screen Components
-const HRHomeScreen: React.FC<{ onNavigate: (screen: string, filters?: any) => void }> = ({ onNavigate }) => {
+const HRHomeScreen: React.FC<{ 
+  onNavigate: (screen: string, filters?: any) => void;
+  onViewProgramme: (programmeId: string) => void;
+  onViewCourse: (courseId: string) => void;
+}> = ({ onNavigate, onViewProgramme, onViewCourse }) => {
   const [loading, setLoading] = useState(true);
   const [prefersReducedMotion] = useLocalStorage('prefersReducedMotion', false);
 
   useEffect(() => {
-    const timer = setTimeout(() => setLoading(false), 1000);
+    const timer = setTimeout(() => setLoading(false), 800);
     return () => clearTimeout(timer);
   }, []);
 
-  const handleKPIClick = (kpiTitle: string) => {
-    let filters = {};
-    switch (kpiTitle) {
-      case 'Total Learners':
-        filters = { status: 'all' };
-        break;
-      case 'Active Courses':
-        filters = { status: 'active' };
-        break;
-      case 'Completed Profilers':
-        filters = { completed: true };
-        break;
-      default:
-        filters = {};
-    }
-    onNavigate('learners', filters);
-  };
-
-  const cohortData = [
-    { name: 'Leadership Development', notStarted: 15, inProgress: 28, completed: 42 },
-    { name: 'Technical Skills', notStarted: 22, inProgress: 35, completed: 38 },
-    { name: 'Communication', notStarted: 18, inProgress: 24, completed: 31 },
-    { name: 'Project Management', notStarted: 12, inProgress: 19, completed: 28 }
-  ];
-
   if (loading) {
     return (
       <div className="space-y-6">
@@ -581,188 +1008,24 @@ const HRHomeScreen: React.FC<{ onNavigate: (screen: string, filters?: any) => vo
       {/* Welcome Section */}
       <div className={`space-y-4 ${prefersReducedMotion ? '' : 'animate-fade-in'}`}>
         <div className="space-y-2">
-          <h1 className="text-3xl font-bold text-foreground">Hello HR Pooja 👋</h1>
-          <p className="text-lg text-muted-foreground">See what's happening today at Acme Corp</p>
+          <h1>Welcome Priya 👋</h1>
+          <p className="text-muted-foreground">Manage programmes, track progress, and stay connected with your learning community</p>
         </div>
       </div>
 
-      {/* KPI Cards */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-        {mockKPIData.map((kpi, index) => (
-          <KPICard 
-            key={index} 
-            data={kpi} 
-            onClick={() => handleKPIClick(kpi.title)}
-            className={prefersReducedMotion ? '' : 'animate-fade-in'}
-            style={{ animationDelay: prefersReducedMotion ? '0ms' : `${index * 100 + 200}ms` }}
-          />
-        ))}
-      </div>
-
-      {/* Employee Assignment & Progress */}
-      <Card className={prefersReducedMotion ? '' : 'animate-slide-up'} style={{ animationDelay: '600ms' }}>
-        <CardHeader>
-          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-            <div>
-              <CardTitle>Employee Assignment & Progress</CardTitle>
-              <CardDescription>Snapshot of current learning activities</CardDescription>
-            </div>
-            <div className="flex flex-wrap items-center gap-2">
-              <Select defaultValue="all">
-                <SelectTrigger className="w-[180px]">
-                  <SelectValue placeholder="Filter by programme" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">All Programmes</SelectItem>
-                  <SelectItem value="leadership">Leadership Development</SelectItem>
-                  <SelectItem value="technical">Technical Skills</SelectItem>
-                  <SelectItem value="communication">Communication</SelectItem>
-                </SelectContent>
-              </Select>
-              <Button 
-                variant="outline" 
-                onClick={() => onNavigate('analytics')}
-                className="min-tap-44"
-              >
-                <BarChart3 className="h-4 w-4 mr-2" />
-                View all in Analytics
-              </Button>
-              <Button variant="outline" className="min-tap-44">
-                <Download className="h-4 w-4 mr-2" />
-                Download CSV
-              </Button>
-            </div>
-          </div>
-        </CardHeader>
-        <CardContent>
-          <EmployeeTable 
-            employees={mockEmployees.slice(0, 6)} 
-            onEdit={(employee) => onNavigate('learners', { editEmployee: employee.id })}
-            maxHeight="360px"
-          />
-        </CardContent>
-      </Card>
-
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* Cohort Progress Chart */}
-        <Card className={prefersReducedMotion ? '' : 'animate-slide-up'} style={{ animationDelay: '800ms' }}>
-          <CardHeader>
-            <div className="flex items-center justify-between">
-              <div>
-                <CardTitle>Cohort Progress</CardTitle>
-                <CardDescription>Progress overview by programme</CardDescription>
-              </div>
-              <Badge variant="secondary" className="text-xs">
-                <RefreshCw className="h-3 w-3 mr-1" />
-                Auto-refresh
-              </Badge>
-            </div>
-          </CardHeader>
-          <CardContent>
-            <div 
-              className="space-y-4" 
-              role="img" 
-              aria-describedby="cohort-chart-desc"
-            >
-              <div id="cohort-chart-desc" className="sr-only">
-                Stacked bar chart showing progress across different learning programmes. 
-                Each bar represents not started, in progress, and completed learners.
-              </div>
-              {cohortData.map((cohort, index) => {
-                const total = cohort.notStarted + cohort.inProgress + cohort.completed;
-                const notStartedPercent = (cohort.notStarted / total) * 100;
-                const inProgressPercent = (cohort.inProgress / total) * 100;
-                const completedPercent = (cohort.completed / total) * 100;
-                
-                return (
-                  <div key={index} className="space-y-2">
-                    <div className="flex justify-between items-center">
-                      <span className="text-sm font-medium">{cohort.name}</span>
-                      <span className="text-xs text-muted-foreground">{total} learners</span>
-                    </div>
-                    <div className="flex h-4 bg-muted rounded-full overflow-hidden">
-                      <div 
-                        className="bg-status-error" 
-                        style={{ width: `${notStartedPercent}%` }}
-                        title={`Not Started: ${cohort.notStarted}`}
-                      />
-                      <div 
-                        className="bg-status-warn" 
-                        style={{ width: `${inProgressPercent}%` }}
-                        title={`In Progress: ${cohort.inProgress}`}
-                      />
-                      <div 
-                        className="bg-status-success" 
-                        style={{ width: `${completedPercent}%` }}
-                        title={`Completed: ${cohort.completed}`}
-                      />
-                    </div>
-                    <div className="flex justify-between text-xs text-muted-foreground">
-                      <span>Not Started: {cohort.notStarted}</span>
-                      <span>In Progress: {cohort.inProgress}</span>
-                      <span>Completed: {cohort.completed}</span>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Upcoming Deadlines */}
-        <Card className={prefersReducedMotion ? '' : 'animate-slide-up'} style={{ animationDelay: '900ms' }}>
-          <CardHeader>
-            <CardTitle>Upcoming Deadlines</CardTitle>
-            <CardDescription>Next 7 days</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-3">
-              {mockDeadlines.map((deadline) => (
-                <div 
-                  key={deadline.id} 
-                  className="flex items-center justify-between p-3 bg-muted/50 rounded-lg hover:bg-muted transition-colors cursor-pointer min-tap-44"
-                  role="button"
-                  tabIndex={0}
-                  aria-label={`${deadline.title} due ${deadline.dueDate} at ${deadline.dueTime}`}
-                >
-                  <div className="flex items-center gap-3">
-                    <div className={`p-2 rounded-md ${deadline.type === 'webinar' ? 'bg-brand-primary text-brand-contrast' : 'bg-status-warn text-status-warn-foreground'}`}>
-                      {deadline.type === 'webinar' ? 
-                        <Calendar className="h-4 w-4" /> : 
-                        <FileText className="h-4 w-4" />
-                      }
-                    </div>
-                    <div>
-                      <p className="font-medium text-sm">{deadline.title}</p>
-                      <p className="text-xs text-muted-foreground capitalize">{deadline.type}</p>
-                    </div>
-                  </div>
-                  <div className="text-right">
-                    <Badge variant={deadline.dueDate === 'Today' ? 'destructive' : 'secondary'} className="text-xs">
-                      {deadline.dueDate}
-                    </Badge>
-                    <p className="text-xs text-muted-foreground mt-1">{deadline.dueTime}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Quick Links */}
-      <Card className={prefersReducedMotion ? '' : 'animate-slide-up'} style={{ animationDelay: '1000ms' }}>
+      {/* Quick Actions Section - Unchanged */}
+      <Card className={prefersReducedMotion ? '' : 'animate-slide-up'} style={{ animationDelay: '200ms' }}>
         <CardHeader>
           <CardTitle>Quick Actions</CardTitle>
-          <CardDescription>Common HR tasks</CardDescription>
+          <CardDescription>Common HR tasks and shortcuts</CardDescription>
         </CardHeader>
         <CardContent>
           <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
             {[
               { title: 'Add Learners', icon: Plus, action: () => onNavigate('learners', { action: 'add' }) },
-              { title: 'Assign Courses', icon: BookOpen, action: () => onNavigate('learners', { action: 'assign' }) },
-              { title: 'Download Reports', icon: Download, action: () => onNavigate('analytics') },
-              { title: 'Testimonials Queue', icon: MessageSquare, action: () => onNavigate('testimonials') }
+              { title: 'Assign', icon: BookOpen, action: () => onNavigate('learners', { action: 'assign' }) },
+              { title: 'Download Reports', icon: Download, action: () => onNavigate('reports') },
+              { title: 'Submit Testimonial', icon: MessageSquare, action: () => onNavigate('profile') }
             ].map((link, index) => {
               const Icon = link.icon;
               return (
@@ -775,7 +1038,6 @@ const HRHomeScreen: React.FC<{ onNavigate: (screen: string, filters?: any) => vo
                     ${prefersReducedMotion ? '' : 'animate-scale-hover'}
                   `}
                   aria-label={link.title}
-                  aria-controls={link.title === 'Add Learners' ? 'learners-screen' : undefined}
                 >
                   <Icon className="h-6 w-6 text-brand-primary" />
                   <span className="text-sm font-medium text-center">{link.title}</span>
@@ -786,65 +1048,40 @@ const HRHomeScreen: React.FC<{ onNavigate: (screen: string, filters?: any) => vo
         </CardContent>
       </Card>
 
-      {/* Announcements & Reminders */}
-      <Card className={prefersReducedMotion ? '' : 'animate-slide-up'} style={{ animationDelay: '1100ms' }}>
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <div>
-              <CardTitle>Announcements & Reminders</CardTitle>
-              <CardDescription>Recent updates and notifications</CardDescription>
-            </div>
-            <Select defaultValue="all">
-              <SelectTrigger className="w-[140px]">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">All</SelectItem>
-                <SelectItem value="announcements">Announcements</SelectItem>
-                <SelectItem value="reminders">Reminders</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-3">
-            {mockAnnouncements.map((item) => (
-              <div 
-                key={item.id} 
-                className={`
-                  p-4 rounded-lg border transition-all duration-180
-                  ${item.pinned ? 'bg-status-warn/10 border-status-warn/20' : 'bg-muted/50 border-transparent'}
-                  hover:border-chrome-divider cursor-pointer
-                `}
-                role="button"
-                tabIndex={0}
-                aria-expanded="false"
-              >
-                <div className="flex items-start justify-between">
-                  <div className="flex-1">
-                    <div className="flex items-center gap-2 mb-1">
-                      <h4 className="font-medium text-sm">{item.title}</h4>
-                      {item.pinned && (
-                        <Badge variant="secondary" className="text-xs">Pinned</Badge>
-                      )}
-                    </div>
-                    <p className="text-sm text-muted-foreground mb-2">{item.content}</p>
-                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                      <Badge variant="outline" className="text-xs capitalize">
-                        {item.type}
-                      </Badge>
-                      <span>{item.timestamp}</span>
-                    </div>
-                  </div>
-                  <Button variant="ghost" size="sm" className="opacity-0 group-hover:opacity-100 transition-opacity">
-                    <ChevronRight className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
+      {/* Programmes Table */}
+      <div className={prefersReducedMotion ? '' : 'animate-slide-up'} style={{ animationDelay: '400ms' }}>
+        <ProgrammesTable 
+          onViewProgramme={onViewProgramme}
+          onViewCourse={onViewCourse}
+          onAssignLearners={(programmeId) => console.log(`Assign learners to: ${programmeId}`)}
+          onDownloadTracker={(programmeId) => console.log(`Download tracker for: ${programmeId}`)}
+          userAccessLevel={getUserAccessLevel()}
+        />
+      </div>
+
+      {/* Programme Schedule - Horizontal layout below programmes */}
+      <div className={prefersReducedMotion ? '' : 'animate-slide-up'} style={{ animationDelay: '500ms' }}>
+        <ProgrammeSchedule 
+          onEventClick={(event) => console.log(`Open event: ${event.title}`)}
+        />
+      </div>
+
+      {/* Learning Analytics - Full Width */}
+      <div className={prefersReducedMotion ? '' : 'animate-slide-up'} style={{ animationDelay: '600ms' }}>
+        <LearningAnalyticsTable 
+          onViewLearner={(learnerId) => onNavigate('learners', { editEmployee: learnerId })}
+          onNudgeLearner={(learnerId) => console.log(`Nudge learner: ${learnerId}`)}
+          onViewAllAnalytics={(programmeId) => onNavigate('reports', { programme: programmeId })}
+        />
+      </div>
+
+      {/* Discussion Forum Feed */}
+      <div className={prefersReducedMotion ? '' : 'animate-slide-up'} style={{ animationDelay: '800ms' }}>
+        <DiscussionForumFeed 
+          onOpenThread={(threadId) => console.log(`Open thread: ${threadId}`)}
+          onMarkAsRead={(threadId) => console.log(`Mark as read: ${threadId}`)}
+        />
+      </div>
     </div>
   );
 };
@@ -861,6 +1098,8 @@ const LearnersScreen: React.FC<{ filters?: any }> = ({ filters }) => {
   const [editingEmployee, setEditingEmployee] = useState<Employee | null>(null);
   const [newEmployee, setNewEmployee] = useState({ name: '', email: '', phone: '' });
   const [bulkActionVisible, setBulkActionVisible] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useState(10);
 
   const debouncedSearch = useCallback(
     (term: string) => {
@@ -880,6 +1119,17 @@ const LearnersScreen: React.FC<{ filters?: any }> = ({ filters }) => {
     return matchesSearch && matchesStatus;
   });
 
+  // Pagination calculations
+  const totalPages = Math.ceil(filteredEmployees.length / itemsPerPage);
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const paginatedEmployees = filteredEmployees.slice(startIndex, endIndex);
+
+  // Reset to first page when filters change
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchTerm, statusFilter]);
+
   const handleEmployeeSelect = (employeeId: string, selected: boolean) => {
     if (selected) {
       setSelectedEmployees(prev => [...prev, employeeId]);
@@ -890,12 +1140,17 @@ const LearnersScreen: React.FC<{ filters?: any }> = ({ filters }) => {
 
   const handleBulkSelect = (selectAll: boolean) => {
     if (selectAll) {
-      setSelectedEmployees(filteredEmployees.map(emp => emp.id));
+      setSelectedEmployees(paginatedEmployees.map(emp => emp.id));
     } else {
       setSelectedEmployees([]);
     }
   };
 
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    setSelectedEmployees([]); // Clear selections when changing pages
+  };
+
   useEffect(() => {
     setBulkActionVisible(selectedEmployees.length > 0);
   }, [selectedEmployees]);
@@ -979,7 +1234,7 @@ const LearnersScreen: React.FC<{ filters?: any }> = ({ filters }) => {
           <CardContent className="py-4">
             <div className="flex items-center justify-between">
               <span className="text-sm text-muted-foreground" aria-live="polite">
-                {selectedEmployees.length} learner{selectedEmployees.length !== 1 ? 's' : ''} selected
+                {selectedEmployees.length} learner{selectedEmployees.length !== 1 ? 's' : ''} selected {paginatedEmployees.length > 0 && selectedEmployees.length === paginatedEmployees.length ? '(current page)' : ''}
               </span>
               <div className="flex gap-2">
                 <Button 
@@ -1016,16 +1271,34 @@ const LearnersScreen: React.FC<{ filters?: any }> = ({ filters }) => {
           <div className="flex items-center justify-between">
             <div>
               <CardTitle>Learners ({filteredEmployees.length})</CardTitle>
-              <CardDescription>Manage learner accounts and assignments</CardDescription>
+              <CardDescription>
+                Manage learner accounts and assignments • 
+                Showing {startIndex + 1}-{Math.min(endIndex, filteredEmployees.length)} of {filteredEmployees.length} learners
+              </CardDescription>
             </div>
             <div className="flex items-center gap-2">
+              <Select value={itemsPerPage.toString()} onValueChange={(value) => {
+                setItemsPerPage(Number(value));
+                setCurrentPage(1);
+                setSelectedEmployees([]);
+              }}>
+                <SelectTrigger className="w-[100px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="5">5</SelectItem>
+                  <SelectItem value="10">10</SelectItem>
+                  <SelectItem value="20">20</SelectItem>
+                  <SelectItem value="50">50</SelectItem>
+                </SelectContent>
+              </Select>
               <Button
                 variant="outline"
                 size="sm"
-                onClick={() => handleBulkSelect(selectedEmployees.length !== filteredEmployees.length)}
+                onClick={() => handleBulkSelect(selectedEmployees.length !== paginatedEmployees.length)}
                 className="min-tap-44"
               >
-                {selectedEmployees.length === filteredEmployees.length ? 'Deselect All' : 'Select All'}
+                {selectedEmployees.length === paginatedEmployees.length && paginatedEmployees.length > 0 ? 'Deselect All' : 'Select All'}
               </Button>
             </div>
           </div>
@@ -1044,16 +1317,15 @@ const LearnersScreen: React.FC<{ filters?: any }> = ({ filters }) => {
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {filteredEmployees.map((employee) => (
+                {paginatedEmployees.map((employee) => (
                   <TableRow 
                     key={employee.id} 
                     className="min-h-[48px]"
                   >
                     <TableCell>
-                      <input
-                        type="checkbox"
+                      <Checkbox
                         checked={selectedEmployees.includes(employee.id)}
-                        onChange={(e) => handleEmployeeSelect(employee.id, e.target.checked)}
+                        onCheckedChange={(checked) => handleEmployeeSelect(employee.id, !!checked)}
                         className="min-tap-44"
                         aria-label={`Select ${employee.name}`}
                       />
@@ -1097,13 +1369,113 @@ const LearnersScreen: React.FC<{ filters?: any }> = ({ filters }) => {
               </TableBody>
             </Table>
           </div>
+          
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <div className="mt-4 flex items-center justify-between">
+              <p className="text-sm text-muted-foreground">
+                Page {currentPage} of {totalPages}
+              </p>
+              <Pagination>
+                <PaginationContent>
+                  <PaginationItem>
+                    <PaginationPrevious 
+                      onClick={() => handlePageChange(Math.max(1, currentPage - 1))}
+                      className={currentPage === 1 ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
+                    />
+                  </PaginationItem>
+                  
+                  {/* Show page numbers */}
+                  {(() => {
+                    const pages = [];
+                    const maxVisiblePages = 5;
+                    let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
+                    let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+                    
+                    // Adjust startPage if we're near the end
+                    if (endPage - startPage + 1 < maxVisiblePages) {
+                      startPage = Math.max(1, endPage - maxVisiblePages + 1);
+                    }
+                    
+                    // Show first page if not in range
+                    if (startPage > 1) {
+                      pages.push(
+                        <PaginationItem key={1}>
+                          <PaginationLink 
+                            onClick={() => handlePageChange(1)}
+                            isActive={currentPage === 1}
+                            className="cursor-pointer"
+                          >
+                            1
+                          </PaginationLink>
+                        </PaginationItem>
+                      );
+                      if (startPage > 2) {
+                        pages.push(
+                          <PaginationItem key="ellipsis-start">
+                            <PaginationEllipsis />
+                          </PaginationItem>
+                        );
+                      }
+                    }
+                    
+                    // Show page range
+                    for (let i = startPage; i <= endPage; i++) {
+                      pages.push(
+                        <PaginationItem key={i}>
+                          <PaginationLink 
+                            onClick={() => handlePageChange(i)}
+                            isActive={currentPage === i}
+                            className="cursor-pointer"
+                          >
+                            {i}
+                          </PaginationLink>
+                        </PaginationItem>
+                      );
+                    }
+                    
+                    // Show last page if not in range
+                    if (endPage < totalPages) {
+                      if (endPage < totalPages - 1) {
+                        pages.push(
+                          <PaginationItem key="ellipsis-end">
+                            <PaginationEllipsis />
+                          </PaginationItem>
+                        );
+                      }
+                      pages.push(
+                        <PaginationItem key={totalPages}>
+                          <PaginationLink 
+                            onClick={() => handlePageChange(totalPages)}
+                            isActive={currentPage === totalPages}
+                            className="cursor-pointer"
+                          >
+                            {totalPages}
+                          </PaginationLink>
+                        </PaginationItem>
+                      );
+                    }
+                    
+                    return pages;
+                  })()}
+                  
+                  <PaginationItem>
+                    <PaginationNext 
+                      onClick={() => handlePageChange(Math.min(totalPages, currentPage + 1))}
+                      className={currentPage === totalPages ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
+                    />
+                  </PaginationItem>
+                </PaginationContent>
+              </Pagination>
+            </div>
+          )}
         </CardContent>
       </Card>
 
       {/* Add Learner Drawer */}
       <Sheet open={showAddDrawer} onOpenChange={setShowAddDrawer}>
         <SheetContent 
-          className="w-[480px] sm:w-[540px]"
+          className="w-[600px] sm:w-[700px]"
           role="dialog"
           aria-modal="true"
           aria-labelledby="add-learner-title"
@@ -1114,9 +1486,9 @@ const LearnersScreen: React.FC<{ filters?: any }> = ({ filters }) => {
               Add a new learner to the system. Email cannot be changed after saving.
             </SheetDescription>
           </SheetHeader>
-          <div className="mt-6 space-y-4">
+          <div className="mt-6 space-y-6 px-2">
             <div>
-              <label htmlFor="employee-name" className="block text-sm font-medium mb-2">
+              <label htmlFor="employee-name" className="block text-sm font-medium mb-3">
                 Employee Name *
               </label>
               <Input
@@ -1129,7 +1501,7 @@ const LearnersScreen: React.FC<{ filters?: any }> = ({ filters }) => {
               />
             </div>
             <div>
-              <label htmlFor="employee-email" className="block text-sm font-medium mb-2">
+              <label htmlFor="employee-email" className="block text-sm font-medium mb-3">
                 Email Address *
               </label>
               <Input
@@ -1143,7 +1515,7 @@ const LearnersScreen: React.FC<{ filters?: any }> = ({ filters }) => {
               />
             </div>
             <div>
-              <label htmlFor="employee-phone" className="block text-sm font-medium mb-2">
+              <label htmlFor="employee-phone" className="block text-sm font-medium mb-3">
                 Phone Number
               </label>
               <Input
@@ -1360,201 +1732,9 @@ const LearnersScreen: React.FC<{ filters?: any }> = ({ filters }) => {
   );
 };
 
-const AnalyticsScreen: React.FC<{ filters?: any }> = ({ filters }) => {
-  const [dateRange, setDateRange] = useState('last-30-days');
-  const [selectedProgrammes, setSelectedProgrammes] = useState<string[]>(['all']);
-  const [loading, setLoading] = useState(false);
-  const [exporting, setExporting] = useState(false);
 
-  const analyticsKPIData: KPIData[] = [
-    { title: 'Total Learners', value: 1247, change: 8.2, trend: 'up' },
-    { title: 'New Enrolments', value: 89, change: 15.3, trend: 'up' },
-    { title: 'Course Completions', value: 342, change: -2.1, trend: 'down' },
-    { title: 'Assessment Rates', value: 78, change: 5.7, trend: 'up' }
-  ];
 
-  const handleExport = async (format: 'csv' | 'pdf') => {
-    setExporting(true);
-    // Simulate export process
-    await new Promise(resolve => setTimeout(resolve, 2000));
-    setExporting(false);
-    console.log(`Exported as ${format.toUpperCase()}`);
-  };
-
-  const handleRunReport = () => {
-    setLoading(true);
-    // Simulate report generation
-    setTimeout(() => setLoading(false), 1500);
-  };
-
-  const chartData = [
-    { month: 'Jan', enrolments: 45, completions: 38, assessments: 42 },
-    { month: 'Feb', enrolments: 52, completions: 41, assessments: 38 },
-    { month: 'Mar', enrolments: 48, completions: 44, assessments: 46 },
-    { month: 'Apr', enrolments: 61, completions: 49, assessments: 52 },
-    { month: 'May', enrolments: 55, completions: 52, assessments: 48 },
-    { month: 'Jun', enrolments: 67, completions: 58, assessments: 61 }
-  ];
-
-  return (
-    <div className="space-y-6">
-      {/* Filter Bar */}
-      <Card>
-        <CardContent className="pt-6">
-          <div className="flex flex-col lg:flex-row gap-4 items-start lg:items-center justify-between">
-            <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center">
-              <div>
-                <label htmlFor="date-range" className="block text-sm font-medium mb-2">
-                  Date Range
-                </label>
-                <Select value={dateRange} onValueChange={setDateRange}>
-                  <SelectTrigger id="date-range" className="w-[180px]" aria-controls="kpi-charts">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="last-7-days">Last 7 days</SelectItem>
-                    <SelectItem value="last-30-days">Last 30 days</SelectItem>
-                    <SelectItem value="last-90-days">Last 90 days</SelectItem>
-                    <SelectItem value="custom">Custom range</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div>
-                <label htmlFor="programme-filter" className="block text-sm font-medium mb-2">
-                  Programmes
-                </label>
-                <Select>
-                  <SelectTrigger id="programme-filter" className="w-[200px]" aria-controls="kpi-charts">
-                    <SelectValue placeholder="Select programmes" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All Programmes</SelectItem>
-                    <SelectItem value="leadership">Leadership Development</SelectItem>
-                    <SelectItem value="technical">Technical Skills</SelectItem>
-                    <SelectItem value="communication">Communication</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-            <Button onClick={handleRunReport} disabled={loading} className="min-tap-44">
-              {loading && <RefreshCw className="h-4 w-4 mr-2 animate-spin" />}
-              Run Report
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* KPI Cards */}
-      <div id="kpi-charts" className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-        {analyticsKPIData.map((kpi, index) => (
-          <KPICard 
-            key={index} 
-            data={kpi} 
-            className="animate-fade-in"
-            style={{ animationDelay: `${index * 100}ms` }}
-            aria-label={`${kpi.title}: ${kpi.value}${kpi.title.includes('Rates') ? '%' : ''}`}
-          />
-        ))}
-      </div>
-
-      {/* Charts Panel */}
-      <Card className="animate-slide-up" style={{ animationDelay: '400ms' }}>
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <div>
-              <CardTitle>Learning Analytics Overview</CardTitle>
-              <CardDescription>Key metrics over time</CardDescription>
-            </div>
-            <div className="text-sm text-muted-foreground">
-              Last refreshed: 10 minutes ago
-            </div>
-          </div>
-        </CardHeader>
-        <CardContent>
-          <div 
-            className="h-80 flex items-center justify-center border border-dashed border-muted rounded-lg"
-            role="img"
-            aria-describedby="chart-description"
-          >
-            <div className="text-center">
-              <BarChart3 className="h-12 w-12 mx-auto mb-2 text-muted-foreground" />
-              <p className="text-muted-foreground">Interactive chart would be rendered here</p>
-              <p className="text-sm text-muted-foreground mt-1">
-                Line/Bar chart showing enrolments, completions, and assessments over time
-              </p>
-            </div>
-          </div>
-          <div id="chart-description" className="sr-only">
-            Line and bar chart showing learning analytics over the selected time period. 
-            Displays new enrolments, course completions, and assessment completion rates.
-            Chart includes interactive legend for toggling data series visibility.
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Detailed Table */}
-      <Card className="animate-slide-up" style={{ animationDelay: '600ms' }}>
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <div>
-              <CardTitle>Assignments & Progress Detail</CardTitle>
-              <CardDescription>Complete learner progress breakdown</CardDescription>
-            </div>
-            <div className="flex gap-2">
-              <Button 
-                variant="outline" 
-                size="sm"
-                onClick={() => handleExport('csv')}
-                disabled={exporting}
-                className="min-tap-44"
-                aria-live="polite"
-              >
-                {exporting ? (
-                  <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
-                ) : (
-                  <Download className="h-4 w-4 mr-2" />
-                )}
-                Export CSV
-              </Button>
-              <Button 
-                variant="outline" 
-                size="sm"
-                onClick={() => handleExport('pdf')}
-                disabled={exporting}
-                className="min-tap-44"
-                aria-live="polite"
-              >
-                {exporting ? (
-                  <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
-                ) : (
-                  <FileText className="h-4 w-4 mr-2" />
-                )}
-                Export PDF
-              </Button>
-            </div>
-          </div>
-        </CardHeader>
-        <CardContent>
-          <EmployeeTable 
-            employees={mockEmployees} 
-            showProgress={true}
-            maxHeight="500px"
-          />
-        </CardContent>
-      </Card>
-
-      {/* Data Freshness Note */}
-      <div className="text-center text-sm text-muted-foreground">
-        <span role="tooltip" title="Data is automatically refreshed every 15 minutes">
-          Last refreshed: {new Date().toLocaleTimeString()} • 
-          Next refresh in 4 minutes
-        </span>
-      </div>
-    </div>
-  );
-};
-
-const TestimonialsScreen: React.FC = () => {
+const TestimonialsTabContent: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [formData, setFormData] = useState<TestimonialFormData>({
     name: 'Alex Sharma',
@@ -1721,7 +1901,7 @@ const TestimonialsScreen: React.FC = () => {
       )}
 
       {/* Testimonial Form */}
-      <Card className="max-w-3xl mx-auto">
+      <Card>
         <CardHeader>
           <CardTitle>Submit Testimonial</CardTitle>
           <CardDescription>
@@ -1729,7 +1909,7 @@ const TestimonialsScreen: React.FC = () => {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <form onSubmit={handleSubmit} className="space-y-6 max-w-[720px] mx-auto">
+          <form onSubmit={handleSubmit} className="space-y-6">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
               {/* Your Name */}
               <div>
@@ -1916,7 +2096,7 @@ const TestimonialsScreen: React.FC = () => {
       </Card>
 
       {/* Status Notice */}
-      <Card className="max-w-3xl mx-auto" role="note">
+      <Card role="note">
         <CardContent className="pt-6">
           <div className="flex items-start gap-3">
             <Info className="h-5 w-5 text-brand-primary mt-0.5 flex-shrink-0" />
@@ -1936,12 +2116,842 @@ const TestimonialsScreen: React.FC = () => {
   );
 };
 
-const SettingsScreen: React.FC = () => {
-  const [activeTab, setActiveTab] = useState('profile');
+const DiscussionForumsScreen: React.FC = () => {
+  const [selectedCohort, setSelectedCohort] = useState('1');
+  const [viewMode, setViewMode] = useState<'index' | 'thread' | 'create'>('index');
+  const [selectedThread, setSelectedThread] = useState<Thread | null>(null);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filterTag, setFilterTag] = useState('all');
+  const [showCreateThread, setShowCreateThread] = useState(false);
+  const [newThread, setNewThread] = useState({ title: '', content: '', tags: '' });
+  const [posts, setPosts] = useState(mockPosts);
+  const [newPost, setNewPost] = useState('');
+  const [currentUserId] = useState('user1'); // Current user ID - would come from auth
+  const [prefersReducedMotion] = useLocalStorage('prefersReducedMotion', false);
+
+  // Filter threads by selected cohort and search term
+  const filteredThreads = mockThreads.filter(thread => {
+    const matchesCohort = thread.cohortId === selectedCohort;
+    const matchesSearch = thread.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                         thread.content.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesTag = filterTag === 'all' || thread.tags?.includes(filterTag);
+    return matchesCohort && matchesSearch && matchesTag;
+  });
+
+  // Get unique tags for filter
+  const allTags = Array.from(new Set(mockThreads.flatMap(thread => thread.tags || [])));
+
+  // Format relative time
+  const formatRelativeTime = (dateString: string) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffHours < 1) return 'Just now';
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return date.toLocaleDateString();
+  };
+
+  const handleOpenThread = (thread: Thread) => {
+    setSelectedThread(thread);
+    setViewMode('thread');
+  };
+
+  const handleBackToIndex = () => {
+    setViewMode('index');
+    setSelectedThread(null);
+    setNewPost('');
+  };
+
+  const handleCreateThread = () => {
+    if (newThread.title.trim() && newThread.content.trim()) {
+      // In real app, this would make an API call
+      console.log('Creating thread:', newThread);
+      setNewThread({ title: '', content: '', tags: '' });
+      setShowCreateThread(false);
+      setViewMode('index');
+    }
+  };
+
+  const handleAddPost = () => {
+    if (newPost.trim() && selectedThread) {
+      const post: Post = {
+        id: Date.now().toString(),
+        threadId: selectedThread.id,
+        content: newPost,
+        author: { id: currentUserId, name: 'You' },
+        createdAt: new Date().toISOString(),
+        reactions: {}
+      };
+      setPosts(prev => [...prev, post]);
+      setNewPost('');
+    }
+  };
+
+  const handleReaction = (postId: string, emoji: string) => {
+    setPosts(prev => prev.map(post => {
+      if (post.id === postId) {
+        const reactions = { ...post.reactions };
+        if (reactions[emoji]?.includes(currentUserId)) {
+          reactions[emoji] = reactions[emoji].filter(id => id !== currentUserId);
+          if (reactions[emoji].length === 0) delete reactions[emoji];
+        } else {
+          reactions[emoji] = [...(reactions[emoji] || []), currentUserId];
+        }
+        return { ...post, reactions };
+      }
+      return post;
+    }));
+  };
+
+  const handleReportPost = (postId: string) => {
+    console.log('Reporting post:', postId);
+    // In real app, this would send to moderators
+  };
+
+  const selectedCohortData = mockCohorts.find(c => c.id === selectedCohort);
+  const threadPosts = posts.filter(post => post.threadId === selectedThread?.id);
+
+  // Create Thread Modal
+  const CreateThreadModal = () => (
+    <Dialog open={showCreateThread} onOpenChange={setShowCreateThread}>
+      <DialogContent className="sm:max-w-[600px]" role="dialog" aria-modal="true">
+        <DialogHeader>
+          <DialogTitle>Create New Thread</DialogTitle>
+          <DialogDescription>
+            Start a new discussion in {selectedCohortData?.name}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div>
+            <label htmlFor="thread-title" className="block text-sm font-medium mb-2">
+              Title *
+            </label>
+            <Input
+              id="thread-title"
+              value={newThread.title}
+              onChange={(e) => setNewThread(prev => ({ ...prev, title: e.target.value }))}
+              placeholder="What would you like to discuss?"
+              maxLength={120}
+              className="min-tap-44"
+            />
+            <p className="text-xs text-muted-foreground mt-1">
+              {newThread.title.length}/120 characters
+            </p>
+          </div>
+          <div>
+            <label htmlFor="thread-content" className="block text-sm font-medium mb-2">
+              Content *
+            </label>
+            <Textarea
+              id="thread-content"
+              value={newThread.content}
+              onChange={(e) => setNewThread(prev => ({ ...prev, content: e.target.value }))}
+              placeholder="Share your thoughts, ask questions, or start a conversation..."
+              className="min-h-[120px] min-tap-44"
+            />
+          </div>
+          <div>
+            <label htmlFor="thread-tags" className="block text-sm font-medium mb-2">
+              Tags (Optional)
+            </label>
+            <Input
+              id="thread-tags"
+              value={newThread.tags}
+              onChange={(e) => setNewThread(prev => ({ ...prev, tags: e.target.value }))}
+              placeholder="leadership, teamwork, communication (separated by commas)"
+              className="min-tap-44"
+            />
+          </div>
+          <div className="flex gap-2 pt-4">
+            <Button 
+              onClick={handleCreateThread}
+              disabled={!newThread.title.trim() || !newThread.content.trim()}
+              className="flex-1"
+            >
+              Create Thread
+            </Button>
+            <Button variant="outline" onClick={() => setShowCreateThread(false)} className="flex-1">
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+
+  // Thread Index View
+  if (viewMode === 'index') {
+    return (
+      <div className="space-y-6">
+        {/* Header */}
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          <div>
+            <h1>Discussion Forums</h1>
+            <p className="text-muted-foreground">Connect, share, and learn with your cohort members</p>
+          </div>
+          <Button 
+            onClick={() => setShowCreateThread(true)}
+            className="min-tap-44"
+          >
+            <Plus className="h-4 w-4 mr-2" />
+            New Thread
+          </Button>
+        </div>
+
+        {/* Cohort Selector & Filters */}
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex flex-col lg:flex-row gap-4 items-start lg:items-center">
+              <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center flex-1">
+                <div className="flex items-center gap-2">
+                  <Users2 className="h-4 w-4 text-muted-foreground" />
+                  <Select value={selectedCohort} onValueChange={setSelectedCohort}>
+                    <SelectTrigger className="w-[280px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {mockCohorts.filter(cohort => cohort.isActive).map(cohort => (
+                        <SelectItem key={cohort.id} value={cohort.id}>
+                          <div className="flex items-center justify-between w-full">
+                            <span>{cohort.name}</span>
+                            <Badge variant="secondary" className="ml-2 text-xs">
+                              {cohort.memberCount} members
+                            </Badge>
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="relative flex-1 max-w-sm">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    placeholder="Search threads..."
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    className="pl-10"
+                  />
+                </div>
+                <Select value={filterTag} onValueChange={setFilterTag}>
+                  <SelectTrigger className="w-[150px]">
+                    <Filter className="h-4 w-4 mr-2" />
+                    <SelectValue placeholder="Filter by tag" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All Tags</SelectItem>
+                    {allTags.map(tag => (
+                      <SelectItem key={tag} value={tag}>
+                        #{tag}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Threads List */}
+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle>
+                  Discussions ({filteredThreads.length})
+                </CardTitle>
+                <CardDescription>
+                  {selectedCohortData?.name} • {selectedCohortData?.memberCount} members
+                </CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {filteredThreads.length === 0 ? (
+                <div className="text-center py-12">
+                  <MessageSquare className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+                  <p className="text-muted-foreground">
+                    {searchTerm || filterTag !== 'all' 
+                      ? 'No threads match your search criteria' 
+                      : 'No discussions yet. Start the first conversation!'}
+                  </p>
+                  {!searchTerm && filterTag === 'all' && (
+                    <Button 
+                      onClick={() => setShowCreateThread(true)}
+                      className="mt-4"
+                    >
+                      Create First Thread
+                    </Button>
+                  )}
+                </div>
+              ) : (
+                filteredThreads.map(thread => (
+                  <div
+                    key={thread.id}
+                    className={`
+                      border rounded-lg p-4 cursor-pointer transition-all duration-200 hover:shadow-md hover:bg-muted/30
+                      ${thread.isPinned ? 'border-brand-primary/20 bg-brand-primary/5' : 'border-chrome-divider'}
+                    `}
+                    onClick={() => handleOpenThread(thread)}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        handleOpenThread(thread);
+                      }
+                    }}
+                  >
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-2">
+                          {thread.isPinned && (
+                            <Pin className="h-4 w-4 text-brand-primary" />
+                          )}
+                          <h3 className="font-medium line-clamp-1">{thread.title}</h3>
+                        </div>
+                        <p className="text-sm text-muted-foreground line-clamp-2 mb-3">
+                          {thread.content}
+                        </p>
+                        <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                          <span>By {thread.author.name}</span>
+                          <span>•</span>
+                          <span>{formatRelativeTime(thread.createdAt)}</span>
+                          {thread.lastActivity !== thread.createdAt && (
+                            <>
+                              <span>•</span>
+                              <span>Last activity {formatRelativeTime(thread.lastActivity)}</span>
+                            </>
+                          )}
+                        </div>
+                        {thread.tags && thread.tags.length > 0 && (
+                          <div className="flex items-center gap-1 mt-2">
+                            {thread.tags.slice(0, 3).map(tag => (
+                              <Badge key={tag} variant="secondary" className="text-xs">
+                                #{tag}
+                              </Badge>
+                            ))}
+                            {thread.tags.length > 3 && (
+                              <Badge variant="secondary" className="text-xs">
+                                +{thread.tags.length - 3}
+                              </Badge>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                      <div className="flex flex-col items-end gap-2">
+                        <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                          <div className="flex items-center gap-1">
+                            <MessageCircle className="h-4 w-4" />
+                            <span>{thread.replyCount}</span>
+                          </div>
+                          {thread.reactions && Object.keys(thread.reactions).length > 0 && (
+                            <div className="flex items-center gap-1">
+                              {Object.entries(thread.reactions).slice(0, 2).map(([emoji, users]) => (
+                                <span key={emoji} className="text-sm">
+                                  {emoji}{users.length}
+                                </span>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        <CreateThreadModal />
+      </div>
+    );
+  }
+
+  // Thread Detail View
+  if (viewMode === 'thread' && selectedThread) {
+    return (
+      <div className="space-y-6">
+        {/* Thread Header */}
+        <div className="flex items-center gap-4">
+          <Button 
+            variant="ghost" 
+            size="sm" 
+            onClick={handleBackToIndex}
+            className="min-tap-44"
+          >
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            Back to Forums
+          </Button>
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <span>{selectedCohortData?.name}</span>
+            <ChevronRight className="h-4 w-4" />
+            <span>Thread</span>
+          </div>
+        </div>
+
+        {/* Thread Content */}
+        <Card>
+          <CardContent className="pt-6">
+            <div className="space-y-4">
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex-1">
+                  <div className="flex items-center gap-2 mb-2">
+                    {selectedThread.isPinned && (
+                      <Pin className="h-4 w-4 text-brand-primary" />
+                    )}
+                    <h1 className="text-xl font-semibold">{selectedThread.title}</h1>
+                  </div>
+                  <div className="flex items-center gap-4 text-sm text-muted-foreground mb-4">
+                    <span>By {selectedThread.author.name}</span>
+                    <span>•</span>
+                    <span>{formatRelativeTime(selectedThread.createdAt)}</span>
+                    <span>•</span>
+                    <span>{selectedThread.replyCount} replies</span>
+                  </div>
+                </div>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="sm" className="min-tap-44">
+                      <MoreHorizontal className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={() => handleReportPost(selectedThread.id)}>
+                      <Flag className="h-4 w-4 mr-2" />
+                      Report Thread
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <Share2 className="h-4 w-4 mr-2" />
+                      Share Thread
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+              
+              <div className="prose prose-sm max-w-none">
+                <p>{selectedThread.content}</p>
+              </div>
+              
+              {selectedThread.tags && selectedThread.tags.length > 0 && (
+                <div className="flex items-center gap-1">
+                  {selectedThread.tags.map(tag => (
+                    <Badge key={tag} variant="secondary" className="text-xs">
+                      #{tag}
+                    </Badge>
+                  ))}
+                </div>
+              )}
+              
+              {/* Thread Reactions */}
+              {selectedThread.reactions && Object.keys(selectedThread.reactions).length > 0 && (
+                <div className="flex items-center gap-2 pt-2 border-t border-chrome-divider">
+                  {Object.entries(selectedThread.reactions).map(([emoji, users]) => (
+                    <Button
+                      key={emoji}
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 px-2 text-sm"
+                      onClick={() => handleReaction(selectedThread.id, emoji)}
+                    >
+                      {emoji} {users.length}
+                    </Button>
+                  ))}
+                  <Button variant="ghost" size="sm" className="h-8 px-2">
+                    <Smile className="h-4 w-4" />
+                  </Button>
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Posts */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Replies ({threadPosts.length})</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-6">
+              {threadPosts.map(post => (
+                <div key={post.id} className="border-b border-chrome-divider pb-4 last:border-b-0">
+                  <div className="flex items-start justify-between gap-4 mb-2">
+                    <div className="flex items-center gap-2">
+                      <div className="w-8 h-8 bg-muted rounded-full flex items-center justify-center">
+                        <span className="text-sm font-medium">
+                          {post.author.name.split(' ').map(n => n[0]).join('')}
+                        </span>
+                      </div>
+                      <div>
+                        <span className="font-medium">{post.author.name}</span>
+                        <span className="text-sm text-muted-foreground ml-2">
+                          {formatRelativeTime(post.createdAt)}
+                          {post.editedAt && ' (edited)'}
+                        </span>
+                      </div>
+                    </div>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="sm" className="min-tap-44">
+                          <MoreHorizontal className="h-4 w-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem>
+                          <Reply className="h-4 w-4 mr-2" />
+                          Reply
+                        </DropdownMenuItem>
+                        {post.author.id === currentUserId && (
+                          <>
+                            <DropdownMenuItem>
+                              <Edit className="h-4 w-4 mr-2" />
+                              Edit
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-status-error">
+                              <Trash2 className="h-4 w-4 mr-2" />
+                              Delete
+                            </DropdownMenuItem>
+                          </>
+                        )}
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem onClick={() => handleReportPost(post.id)}>
+                          <Flag className="h-4 w-4 mr-2" />
+                          Report
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                  
+                  <div className="prose prose-sm max-w-none ml-10">
+                    <p>{post.content}</p>
+                  </div>
+                  
+                  {/* Post Reactions */}
+                  {post.reactions && Object.keys(post.reactions).length > 0 && (
+                    <div className="flex items-center gap-2 ml-10 mt-2">
+                      {Object.entries(post.reactions).map(([emoji, users]) => (
+                        <Button
+                          key={emoji}
+                          variant="ghost"
+                          size="sm"
+                          className="h-6 px-2 text-xs"
+                          onClick={() => handleReaction(post.id, emoji)}
+                        >
+                          {emoji} {users.length}
+                        </Button>
+                      ))}
+                      <Button variant="ghost" size="sm" className="h-6 px-2">
+                        <Smile className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Reply Editor */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Add Reply</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <Textarea
+                value={newPost}
+                onChange={(e) => setNewPost(e.target.value)}
+                placeholder="Share your thoughts or ask a follow-up question..."
+                className="min-h-[100px] min-tap-44"
+              />
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Button variant="ghost" size="sm" className="h-8 px-2">
+                    <Bold className="h-4 w-4" />
+                  </Button>
+                  <Button variant="ghost" size="sm" className="h-8 px-2">
+                    <Italic className="h-4 w-4" />
+                  </Button>
+                  <Button variant="ghost" size="sm" className="h-8 px-2">
+                    <Link className="h-4 w-4" />
+                  </Button>
+                  <Button variant="ghost" size="sm" className="h-8 px-2">
+                    <List className="h-4 w-4" />
+                  </Button>
+                  <Button variant="ghost" size="sm" className="h-8 px-2">
+                    <Image className="h-4 w-4" />
+                  </Button>
+                </div>
+                <Button 
+                  onClick={handleAddPost}
+                  disabled={!newPost.trim()}
+                  className="min-tap-44"
+                >
+                  <Send className="h-4 w-4 mr-2" />
+                  Post Reply
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return null;
+};
+
+const ReportsScreen: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('tracker');
+  const [dateRange, setDateRange] = useState('last-30-days');
+  const [selectedProgramme, setSelectedProgramme] = useState('all');
+  const [selectedCohort, setSelectedCohort] = useState('all');
+  const [exportingFormat, setExportingFormat] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [showExportOptions, setShowExportOptions] = useState(false);
+
+  const programmes = [
+    { id: 'all', name: 'All Programmes', learners: 247 },
+    { id: 'leadership', name: 'Leadership Development', learners: 85 },
+    { id: 'technical', name: 'Technical Skills', learners: 67 },
+    { id: 'communication', name: 'Communication', learners: 45 },
+    { id: 'project', name: 'Project Management', learners: 50 }
+  ];
+
+  const handleExport = async (format: 'excel' | 'pdf', reportType: string = 'comprehensive') => {
+    setExportingFormat(format);
+    
+    // Simulate export process
+    await new Promise(resolve => setTimeout(resolve, 2500));
+    
+    const programmeName = programmes.find(p => p.id === selectedProgramme)?.name || 'All Programmes';
+    const fileName = `${programmeName.replace(/\s+/g, '_')}_${reportType}_Report_${dateRange}.${format === 'excel' ? 'xlsx' : 'pdf'}`;
+    
+    console.log(`Exported ${fileName} as ${format.toUpperCase()}`);
+    
+    // Show success message
+    alert(`✅ Successfully exported ${fileName}`);
+    
+    setExportingFormat(null);
+    setShowExportOptions(false);
+  };
+
+  const generateReport = () => {
+    setLoading(true);
+    setTimeout(() => setLoading(false), 1500);
+  };
+
+  // Mock data for reports
+  const trackerMetrics = [
+    { metric: 'Completion Rate', current: 78, previous: 72, trend: 'up' },
+    { metric: 'Average Score', current: 85, previous: 82, trend: 'up' },
+    { metric: 'Time to Complete', current: 21, previous: 24, trend: 'up' },
+    { metric: 'Engagement Rate', current: 92, previous: 89, trend: 'up' }
+  ];
+
+  const individualReports = [
+    { id: '1', name: 'Sarah Chen', programme: 'Leadership Development', progress: 85, lastAccess: '2 hours ago', status: 'On Track' },
+    { id: '2', name: 'Michael Rodriguez', programme: 'Technical Skills', progress: 62, lastAccess: '1 day ago', status: 'Behind' },
+    { id: '3', name: 'Emma Thompson', programme: 'Communication', progress: 94, lastAccess: '3 hours ago', status: 'Completed' },
+    { id: '4', name: 'David Kim', programme: 'Project Management', progress: 78, lastAccess: '5 hours ago', status: 'On Track' },
+    { id: '5', name: 'Lisa Wang', programme: 'Leadership Development', progress: 56, lastAccess: '2 days ago', status: 'Behind' }
+  ];
+
+  const cohortData = [
+    { cohort: 'Leadership Q4 2024', enrolled: 45, completed: 32, inProgress: 11, notStarted: 2, avgScore: 87 },
+    { cohort: 'Technical Skills Cohort A', enrolled: 38, completed: 25, inProgress: 10, notStarted: 3, avgScore: 82 },
+    { cohort: 'Communication Workshop', enrolled: 28, completed: 28, inProgress: 0, notStarted: 0, avgScore: 91 },
+    { cohort: 'Project Management Cert', enrolled: 52, completed: 18, inProgress: 28, notStarted: 6, avgScore: 79 }
+  ];
 
   return (
     <div className="space-y-6">
-      {/* Settings Tabs */}
+      {/* Reports Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1>HR Access Reports</h1>
+          <p className="text-muted-foreground">Programme-wise reporting and analytics with Excel/PDF export</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Select value={selectedProgramme} onValueChange={setSelectedProgramme}>
+            <SelectTrigger className="w-[220px]">
+              <SelectValue placeholder="Select Programme" />
+            </SelectTrigger>
+            <SelectContent>
+              {programmes.map(programme => (
+                <SelectItem key={programme.id} value={programme.id}>
+                  <div className="flex items-center justify-between w-full">
+                    <span>{programme.name}</span>
+                    <Badge variant="secondary" className="ml-2 text-xs">
+                      {programme.learners} learners
+                    </Badge>
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Select value={dateRange} onValueChange={setDateRange}>
+            <SelectTrigger className="w-[160px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="last-7-days">Last 7 days</SelectItem>
+              <SelectItem value="last-30-days">Last 30 days</SelectItem>
+              <SelectItem value="last-90-days">Last 90 days</SelectItem>
+              <SelectItem value="last-year">Last year</SelectItem>
+            </SelectContent>
+          </Select>
+          <DropdownMenu open={showExportOptions} onOpenChange={setShowExportOptions}>
+            <DropdownMenuTrigger asChild>
+              <Button 
+                variant="outline" 
+                disabled={!!exportingFormat}
+                className="min-tap-44"
+              >
+                {exportingFormat ? (
+                  <>
+                    <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                    Exporting {exportingFormat.toUpperCase()}...
+                  </>
+                ) : (
+                  <>
+                    <Download className="h-4 w-4 mr-2" />
+                    Export Reports
+                    <ChevronDown className="h-4 w-4 ml-2" />
+                  </>
+                )}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-56">
+              <div className="px-2 py-1.5">
+                <p className="text-sm font-medium">Export Options</p>
+                <p className="text-xs text-muted-foreground">
+                  {programmes.find(p => p.id === selectedProgramme)?.name} • {dateRange}
+                </p>
+              </div>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem 
+                onClick={() => handleExport('excel', 'comprehensive')}
+                className="flex items-center justify-between"
+              >
+                <div className="flex items-center">
+                  <FileText className="h-4 w-4 mr-2" />
+                  <div>
+                    <p className="font-medium">Excel Report</p>
+                    <p className="text-xs text-muted-foreground">Detailed data with charts</p>
+                  </div>
+                </div>
+                <Badge variant="secondary" className="text-xs">XLSX</Badge>
+              </DropdownMenuItem>
+              <DropdownMenuItem 
+                onClick={() => handleExport('pdf', 'comprehensive')}
+                className="flex items-center justify-between"
+              >
+                <div className="flex items-center">
+                  <FileText className="h-4 w-4 mr-2" />
+                  <div>
+                    <p className="font-medium">PDF Report</p>
+                    <p className="text-xs text-muted-foreground">Formatted executive summary</p>
+                  </div>
+                </div>
+                <Badge variant="secondary" className="text-xs">PDF</Badge>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem 
+                onClick={() => handleExport('excel', 'tracker')}
+                className="flex items-center justify-between"
+              >
+                <div className="flex items-center">
+                  <TrendingUp className="h-4 w-4 mr-2" />
+                  <div>
+                    <p className="font-medium">Tracker Data</p>
+                    <p className="text-xs text-muted-foreground">Progress tracking spreadsheet</p>
+                  </div>
+                </div>
+                <Badge variant="secondary" className="text-xs">XLSX</Badge>
+              </DropdownMenuItem>
+              <DropdownMenuItem 
+                onClick={() => handleExport('excel', 'learner-list')}
+                className="flex items-center justify-between"
+              >
+                <div className="flex items-center">
+                  <Users className="h-4 w-4 mr-2" />
+                  <div>
+                    <p className="font-medium">Learner List</p>
+                    <p className="text-xs text-muted-foreground">Contact details & progress</p>
+                  </div>
+                </div>
+                <Badge variant="secondary" className="text-xs">XLSX</Badge>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      {/* Programme Overview Card */}
+      {selectedProgramme !== 'all' && (
+        <Card className="border-l-4 border-l-brand-primary">
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between mb-4">
+              <div>
+                <h3 className="font-semibold">
+                  {programmes.find(p => p.id === selectedProgramme)?.name} - Report Overview
+                </h3>
+                <p className="text-sm text-muted-foreground">
+                  Data summary for {dateRange} • Ready for export
+                </p>
+              </div>
+              <Badge variant="outline" className="text-sm">
+                {programmes.find(p => p.id === selectedProgramme)?.learners} Active Learners
+              </Badge>
+            </div>
+            
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="text-center p-3 bg-muted/30 rounded-lg">
+                <p className="text-2xl font-bold text-status-success">
+                  {Math.floor(Math.random() * 30 + 60)}%
+                </p>
+                <p className="text-xs text-muted-foreground">Completion Rate</p>
+              </div>
+              <div className="text-center p-3 bg-muted/30 rounded-lg">
+                <p className="text-2xl font-bold text-brand-primary">
+                  {Math.floor(Math.random() * 10 + 80)}/100
+                </p>
+                <p className="text-xs text-muted-foreground">Average Score</p>
+              </div>
+              <div className="text-center p-3 bg-muted/30 rounded-lg">
+                <p className="text-2xl font-bold text-status-warn">
+                  {Math.floor(Math.random() * 10 + 15)} days
+                </p>
+                <p className="text-xs text-muted-foreground">Avg. Time to Complete</p>
+              </div>
+              <div className="text-center p-3 bg-muted/30 rounded-lg">
+                <p className="text-2xl font-bold text-brand-navy">
+                  {Math.floor(Math.random() * 20 + 80)}%
+                </p>
+                <p className="text-xs text-muted-foreground">Engagement Rate</p>
+              </div>
+            </div>
+            
+            <div className="mt-4 p-3 bg-status-success/10 border border-status-success/20 rounded-lg">
+              <div className="flex items-center gap-2">
+                <CheckCircle className="h-4 w-4 text-status-success" />
+                <p className="text-sm font-medium text-status-success">Report Ready</p>
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">
+                All data validated and available for export. Choose Excel for detailed analysis or PDF for executive summary.
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Reports Tabs */}
       <Card>
         <CardContent className="pt-6">
           <Tabs 
@@ -1952,17 +2962,619 @@ const SettingsScreen: React.FC = () => {
             <TabsList 
               className="grid w-full grid-cols-3 mb-6" 
               role="tablist"
-              aria-label="Settings navigation"
+              aria-label="Reports navigation"
             >
               <TabsTrigger 
-                value="profile" 
+                value="tracker" 
                 role="tab"
-                aria-controls="profile-content"
+                aria-controls="tracker-content"
+                className="flex items-center gap-2"
+              >
+                <TrendingUp className="h-4 w-4" />
+                Tracker
+              </TabsTrigger>
+              <TabsTrigger 
+                value="individual" 
+                role="tab"
+                aria-controls="individual-content"
+                className="flex items-center gap-2"
+              >
+                <Users className="h-4 w-4" />
+                Individual Reports
+              </TabsTrigger>
+              <TabsTrigger 
+                value="cohort" 
+                role="tab"
+                aria-controls="cohort-content"
+                className="flex items-center gap-2"
+              >
+                <BarChart3 className="h-4 w-4" />
+                Cohort Reports
+              </TabsTrigger>
+            </TabsList>
+
+            {/* Tracker Tab */}
+            <TabsContent value="tracker" role="tabpanel" id="tracker-content" className="space-y-6">
+              <Card>
+                <CardHeader>
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <CardTitle>Learning Progress Tracker</CardTitle>
+                      <CardDescription>
+                        Real-time metrics for {programmes.find(p => p.id === selectedProgramme)?.name || 'All Programmes'}
+                      </CardDescription>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleExport('excel', 'tracker')}
+                        disabled={!!exportingFormat}
+                        className="min-tap-44"
+                      >
+                        {exportingFormat === 'excel' ? (
+                          <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                        ) : (
+                          <Download className="h-4 w-4 mr-2" />
+                        )}
+                        Export Tracker Excel
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleExport('pdf', 'tracker')}
+                        disabled={!!exportingFormat}
+                        className="min-tap-44"
+                      >
+                        {exportingFormat === 'pdf' ? (
+                          <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                        ) : (
+                          <FileText className="h-4 w-4 mr-2" />
+                        )}
+                        Export PDF
+                      </Button>
+                    </div>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  {/* Tracker KPIs */}
+                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+                    {trackerMetrics.map((metric, index) => (
+                      <Card key={index} className="border-0 bg-muted/30">
+                        <CardContent className="pt-4">
+                          <div className="flex items-center justify-between">
+                            <div>
+                              <p className="text-sm text-muted-foreground">{metric.metric}</p>
+                              <p className="text-2xl font-bold">
+                                {metric.current}
+                                {metric.metric.includes('Rate') ? '%' : metric.metric.includes('Time') ? ' days' : metric.metric.includes('Score') ? '/100' : ''}
+                              </p>
+                            </div>
+                            <Badge variant={metric.trend === 'up' ? 'default' : 'destructive'} className="text-xs">
+                              {metric.trend === 'up' ? '+' : ''}
+                              {metric.current - metric.previous}
+                              {metric.metric.includes('Rate') ? '%' : ''}
+                            </Badge>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </div>
+
+                  {/* Progress Charts */}
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <Card className="border-0">
+                      <CardHeader>
+                        <CardTitle className="text-lg">Completion Trends</CardTitle>
+                        <CardDescription>Weekly completion rates over the last 12 weeks</CardDescription>
+                      </CardHeader>
+                      <CardContent>
+                        <div className="h-64" role="img" aria-describedby="completion-chart-desc">
+                          <ResponsiveContainer width="100%" height="100%">
+                            <AreaChart data={completionTrendsData}>
+                              <defs>
+                                <linearGradient id="completionGradient" x1="0" y1="0" x2="0" y2="1">
+                                  <stop offset="5%" stopColor="hsl(var(--color-brand-primary))" stopOpacity={0.3}/>
+                                  <stop offset="95%" stopColor="hsl(var(--color-brand-primary))" stopOpacity={0.1}/>
+                                </linearGradient>
+                              </defs>
+                              <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--color-border))" />
+                              <XAxis 
+                                dataKey="week" 
+                                stroke="hsl(var(--color-muted-foreground))"
+                                fontSize={12}
+                              />
+                              <YAxis 
+                                stroke="hsl(var(--color-muted-foreground))"
+                                fontSize={12}
+                                tickFormatter={(value) => `${value}%`}
+                              />
+                              <Tooltip 
+                                content={({ active, payload, label }) => {
+                                  if (active && payload && payload.length) {
+                                    return (
+                                      <div className="bg-card border border-border rounded-lg p-3 shadow-lg">
+                                        <p className="font-medium">{label}</p>
+                                        <div className="space-y-1 mt-2">
+                                          <p className="text-sm">
+                                            <span className="text-brand-primary">●</span> Completion Rate: {payload[0].value}%
+                                          </p>
+                                          <p className="text-sm text-muted-foreground">
+                                            Completed: {payload[0].payload.completed} / Started: {payload[0].payload.started}
+                                          </p>
+                                        </div>
+                                      </div>
+                                    );
+                                  }
+                                  return null;
+                                }}
+                              />
+                              <Area
+                                type="monotone"
+                                dataKey="completionRate"
+                                stroke="hsl(var(--color-brand-primary))"
+                                fillOpacity={1}
+                                fill="url(#completionGradient)"
+                                strokeWidth={2}
+                              />
+                            </AreaChart>
+                          </ResponsiveContainer>
+                        </div>
+                        <div id="completion-chart-desc" className="sr-only">
+                          Area chart showing completion rate trends over 12 weeks, ranging from 48% to 94%
+                        </div>
+                        <div className="flex items-center justify-between mt-4 pt-4 border-t border-border">
+                          <div className="flex items-center gap-4 text-sm">
+                            <div className="flex items-center gap-2">
+                              <div className="w-3 h-3 bg-brand-primary rounded-full"></div>
+                              <span className="text-muted-foreground">Completion Rate</span>
+                            </div>
+                          </div>
+                          <div className="text-sm text-muted-foreground">
+                            Average: {Math.round(completionTrendsData.reduce((acc, curr) => acc + curr.completionRate, 0) / completionTrendsData.length)}%
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+
+                    <Card className="border-0">
+                      <CardHeader>
+                        <CardTitle className="text-lg">Activity Heatmap</CardTitle>
+                        <CardDescription>Learning activity patterns by day and time</CardDescription>
+                      </CardHeader>
+                      <CardContent>
+                        <div className="h-64" role="img" aria-describedby="heatmap-desc">
+                          <div className="grid grid-cols-7 gap-1 h-full">
+                            {activityHeatmapData.map((dayData, dayIndex) => (
+                              <div key={dayData.day} className="flex flex-col gap-1">
+                                <div className="text-xs font-medium text-center mb-1 text-muted-foreground">
+                                  {dayData.day}
+                                </div>
+                                <div className="flex-1 flex flex-col gap-1">
+                                  {(['6AM', '9AM', '12PM', '3PM', '6PM', '9PM'] as const).map((timeSlot) => {
+                                    const value = dayData[timeSlot];
+                                    const intensity = Math.min(value / 45, 1); // Max activity is around 45
+                                    return (
+                                      <div
+                                        key={`${dayData.day}-${timeSlot}`}
+                                        className="flex-1 rounded-sm border border-border transition-all duration-200 hover:scale-110 cursor-pointer"
+                                        style={{
+                                          backgroundColor: `hsl(var(--color-brand-primary) / ${intensity * 0.8 + 0.1})`,
+                                        }}
+                                        title={`${dayData.day} ${timeSlot}: ${value} activities`}
+                                        role="gridcell"
+                                        tabIndex={0}
+                                        onKeyDown={(e) => {
+                                          if (e.key === 'Enter' || e.key === ' ') {
+                                            e.preventDefault();
+                                            console.log(`${dayData.day} ${timeSlot}: ${value} activities`);
+                                          }
+                                        }}
+                                      />
+                                    );
+                                  })}
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                        <div id="heatmap-desc" className="sr-only">
+                          Heatmap showing learning activity intensity across days of the week and time periods
+                        </div>
+                        
+                        {/* Heatmap Legend */}
+                        <div className="mt-4 pt-4 border-t border-border">
+                          <div className="flex items-center justify-between">
+                            <div className="flex items-center gap-4">
+                              <span className="text-sm text-muted-foreground">Activity Level:</span>
+                              <div className="flex items-center gap-2">
+                                <span className="text-xs text-muted-foreground">Low</span>
+                                <div className="flex gap-1">
+                                  {[0.2, 0.4, 0.6, 0.8, 1.0].map((intensity, index) => (
+                                    <div
+                                      key={index}
+                                      className="w-3 h-3 rounded-sm border border-border"
+                                      style={{
+                                        backgroundColor: `hsl(var(--color-brand-primary) / ${intensity * 0.8 + 0.1})`,
+                                      }}
+                                    />
+                                  ))}
+                                </div>
+                                <span className="text-xs text-muted-foreground">High</span>
+                              </div>
+                            </div>
+                            <div className="text-sm text-muted-foreground">
+                              Peak: Wed 3PM (42 activities)
+                            </div>
+                          </div>
+                          
+                          {/* Time Labels */}
+                          <div className="mt-3 flex items-center gap-4 text-xs text-muted-foreground">
+                            <span>Time slots:</span>
+                            <div className="flex gap-3">
+                              {['6AM', '9AM', '12PM', '3PM', '6PM', '9PM'].map((time) => (
+                                <span key={time}>{time}</span>
+                              ))}
+                            </div>
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </div>
+                </CardContent>
+              </Card>
+            </TabsContent>
+
+            {/* Individual Reports Tab */}
+            <TabsContent value="individual" role="tabpanel" id="individual-content" className="space-y-6">
+              <Card>
+                <CardHeader>
+                  <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+                    <div>
+                      <CardTitle>Individual Learner Reports</CardTitle>
+                      <CardDescription>
+                        Detailed progress reports for {programmes.find(p => p.id === selectedProgramme)?.name || 'All Programmes'}
+                      </CardDescription>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Button 
+                        variant="outline" 
+                        onClick={() => handleExport('excel', 'learner-list')}
+                        disabled={!!exportingFormat || loading}
+                        className="min-tap-44"
+                      >
+                        {exportingFormat === 'excel' ? (
+                          <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                        ) : (
+                          <Download className="h-4 w-4 mr-2" />
+                        )}
+                        Export Excel
+                      </Button>
+                      <Button 
+                        variant="outline" 
+                        onClick={() => handleExport('pdf', 'individual')}
+                        disabled={!!exportingFormat || loading}
+                        className="min-tap-44"
+                      >
+                        {exportingFormat === 'pdf' ? (
+                          <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                        ) : (
+                          <FileText className="h-4 w-4 mr-2" />
+                        )}
+                        Export PDF
+                      </Button>
+                      <Button 
+                        variant="outline" 
+                        onClick={generateReport}
+                        disabled={loading || !!exportingFormat}
+                        className="min-tap-44"
+                      >
+                        {loading ? (
+                          <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                        ) : (
+                          <RefreshCw className="h-4 w-4 mr-2" />
+                        )}
+                        Refresh Data
+                      </Button>
+                    </div>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="rounded-md border">
+                    <Table>
+                      <TableHeader className="sticky-header">
+                        <TableRow>
+                          <TableHead className="w-[200px]">Learner</TableHead>
+                          <TableHead className="w-[200px]">Programme</TableHead>
+                          <TableHead className="w-[100px]">Progress</TableHead>
+                          <TableHead className="w-[120px]">Last Access</TableHead>
+                          <TableHead className="w-[100px]">Status</TableHead>
+                          <TableHead className="w-[80px]">Actions</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {individualReports.map((learner) => (
+                          <TableRow key={learner.id} className="min-h-[48px]">
+                            <TableCell className="font-medium">{learner.name}</TableCell>
+                            <TableCell>{learner.programme}</TableCell>
+                            <TableCell>
+                              <div className="flex items-center gap-2">
+                                <Progress value={learner.progress} className="w-16" />
+                                <span className="text-sm">{learner.progress}%</span>
+                              </div>
+                            </TableCell>
+                            <TableCell className="text-sm text-muted-foreground">{learner.lastAccess}</TableCell>
+                            <TableCell>
+                              <Badge 
+                                variant={
+                                  learner.status === 'Completed' ? 'default' : 
+                                  learner.status === 'On Track' ? 'secondary' : 'destructive'
+                                }
+                                className="text-xs"
+                              >
+                                {learner.status}
+                              </Badge>
+                            </TableCell>
+                            <TableCell>
+                              <Button 
+                                variant="ghost" 
+                                size="sm" 
+                                className="min-tap-44"
+                                aria-label={`View detailed report for ${learner.name}`}
+                              >
+                                <Eye className="h-4 w-4" />
+                              </Button>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                </CardContent>
+              </Card>
+            </TabsContent>
+
+            {/* Cohort Reports Tab */}
+            <TabsContent value="cohort" role="tabpanel" id="cohort-content" className="space-y-6">
+              <Card>
+                <CardHeader>
+                  <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+                    <div>
+                      <CardTitle>Cohort Performance Reports</CardTitle>
+                      <CardDescription>
+                        Group-level analytics for {programmes.find(p => p.id === selectedProgramme)?.name || 'All Programmes'}
+                      </CardDescription>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Select value={selectedCohort} onValueChange={setSelectedCohort}>
+                        <SelectTrigger className="w-[200px]">
+                          <SelectValue placeholder="Filter by cohort" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="all">All Cohorts</SelectItem>
+                          <SelectItem value="leadership-q4">Leadership Q4 2024</SelectItem>
+                          <SelectItem value="technical-a">Technical Skills Cohort A</SelectItem>
+                          <SelectItem value="communication">Communication Workshop</SelectItem>
+                          <SelectItem value="project-cert">Project Management Cert</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <Button 
+                        variant="outline" 
+                        onClick={() => handleExport('excel', 'cohort')}
+                        disabled={!!exportingFormat}
+                        className="min-tap-44"
+                      >
+                        {exportingFormat === 'excel' ? (
+                          <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                        ) : (
+                          <Download className="h-4 w-4 mr-2" />
+                        )}
+                        Export Excel
+                      </Button>
+                      <Button 
+                        variant="outline" 
+                        onClick={() => handleExport('pdf', 'cohort')}
+                        disabled={!!exportingFormat}
+                        className="min-tap-44"
+                      >
+                        {exportingFormat === 'pdf' ? (
+                          <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                        ) : (
+                          <FileText className="h-4 w-4 mr-2" />
+                        )}
+                        Export PDF
+                      </Button>
+                    </div>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-6">
+                    {/* Cohort Summary Cards */}
+                    {cohortData.map((cohort, index) => (
+                      <Card key={index} className="border-l-4 border-l-brand-primary">
+                        <CardContent className="pt-4">
+                          <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+                            <div>
+                              <h4 className="font-semibold">{cohort.cohort}</h4>
+                              <p className="text-sm text-muted-foreground">{cohort.enrolled} total learners enrolled</p>
+                            </div>
+                            
+                            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 lg:gap-6">
+                              <div className="text-center">
+                                <p className="text-2xl font-bold text-status-success">{cohort.completed}</p>
+                                <p className="text-xs text-muted-foreground">Completed</p>
+                              </div>
+                              <div className="text-center">
+                                <p className="text-2xl font-bold text-status-warn">{cohort.inProgress}</p>
+                                <p className="text-xs text-muted-foreground">In Progress</p>
+                              </div>
+                              <div className="text-center">
+                                <p className="text-2xl font-bold text-status-error">{cohort.notStarted}</p>
+                                <p className="text-xs text-muted-foreground">Not Started</p>
+                              </div>
+                              <div className="text-center">
+                                <p className="text-2xl font-bold text-brand-primary">{cohort.avgScore}/100</p>
+                                <p className="text-xs text-muted-foreground">Avg Score</p>
+                              </div>
+                            </div>
+                          </div>
+                          
+                          {/* Progress Bar */}
+                          <div className="mt-4">
+                            <div className="flex justify-between text-sm mb-2">
+                              <span>Completion Progress</span>
+                              <span>{Math.round((cohort.completed / cohort.enrolled) * 100)}%</span>
+                            </div>
+                            <div className="flex h-3 bg-muted rounded-full overflow-hidden">
+                              <div 
+                                className="bg-status-success" 
+                                style={{ width: `${(cohort.completed / cohort.enrolled) * 100}%` }}
+                                title={`Completed: ${cohort.completed}`}
+                              />
+                              <div 
+                                className="bg-status-warn" 
+                                style={{ width: `${(cohort.inProgress / cohort.enrolled) * 100}%` }}
+                                title={`In Progress: ${cohort.inProgress}`}
+                              />
+                              <div 
+                                className="bg-status-error" 
+                                style={{ width: `${(cohort.notStarted / cohort.enrolled) * 100}%` }}
+                                title={`Not Started: ${cohort.notStarted}`}
+                              />
+                            </div>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+
+      {/* Export Information Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Info className="h-5 w-5 text-brand-primary" />
+            Export Information
+          </CardTitle>
+          <CardDescription>
+            Understanding what's included in each report format
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {/* Excel Reports */}
+            <div className="space-y-3">
+              <div className="flex items-center gap-2">
+                <FileText className="h-5 w-5 text-status-success" />
+                <h4 className="font-semibold">Excel Reports (.xlsx)</h4>
+              </div>
+              <div className="space-y-2 text-sm">
+                <div className="flex items-start gap-2">
+                  <CheckCircle className="h-4 w-4 text-status-success mt-0.5" />
+                  <div>
+                    <p className="font-medium">Comprehensive Data</p>
+                    <p className="text-muted-foreground">Raw data, pivot tables, and interactive charts</p>
+                  </div>
+                </div>
+                <div className="flex items-start gap-2">
+                  <CheckCircle className="h-4 w-4 text-status-success mt-0.5" />
+                  <div>
+                    <p className="font-medium">Multiple Worksheets</p>
+                    <p className="text-muted-foreground">Learner details, progress tracking, and analytics</p>
+                  </div>
+                </div>
+                <div className="flex items-start gap-2">
+                  <CheckCircle className="h-4 w-4 text-status-success mt-0.5" />
+                  <div>
+                    <p className="font-medium">Filterable & Sortable</p>
+                    <p className="text-muted-foreground">Custom analysis and deeper insights</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* PDF Reports */}
+            <div className="space-y-3">
+              <div className="flex items-center gap-2">
+                <FileText className="h-5 w-5 text-status-error" />
+                <h4 className="font-semibold">PDF Reports (.pdf)</h4>
+              </div>
+              <div className="space-y-2 text-sm">
+                <div className="flex items-start gap-2">
+                  <CheckCircle className="h-4 w-4 text-status-success mt-0.5" />
+                  <div>
+                    <p className="font-medium">Executive Summary</p>
+                    <p className="text-muted-foreground">Key metrics and performance highlights</p>
+                  </div>
+                </div>
+                <div className="flex items-start gap-2">
+                  <CheckCircle className="h-4 w-4 text-status-success mt-0.5" />
+                  <div>
+                    <p className="font-medium">Visual Charts</p>
+                    <p className="text-muted-foreground">Graphs and progress visualizations</p>
+                  </div>
+                </div>
+                <div className="flex items-start gap-2">
+                  <CheckCircle className="h-4 w-4 text-status-success mt-0.5" />
+                  <div>
+                    <p className="font-medium">Share-Ready</p>
+                    <p className="text-muted-foreground">Professional format for stakeholders</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-6 p-4 bg-brand-primary/5 border border-brand-primary/20 rounded-lg">
+            <div className="flex items-start gap-3">
+              <Calendar className="h-5 w-5 text-brand-primary mt-0.5" />
+              <div>
+                <p className="font-medium text-brand-primary">Automated Data Updates</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  All reports include real-time data up to the moment of export. 
+                  Export time and date range are included in file metadata.
+                </p>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+const ProfileScreen: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('organisation');
+
+  return (
+    <div className="space-y-6">
+      {/* Profile Tabs */}
+      <Card>
+        <CardContent className="pt-6">
+          <Tabs 
+            value={activeTab} 
+            onValueChange={setActiveTab}
+            className="w-full"
+          >
+            <TabsList 
+              className="grid w-full grid-cols-4 mb-6" 
+              role="tablist"
+              aria-label="Profile navigation"
+            >
+              <TabsTrigger 
+                value="organisation" 
+                role="tab"
+                aria-controls="organisation-content"
                 className="flex items-center gap-2"
               >
                 <Building2 className="h-4 w-4" />
-                <span className="hidden sm:inline">Org Profile</span>
-                <span className="sm:hidden">Profile</span>
+                <span className="hidden sm:inline">Organisation</span>
+                <span className="sm:hidden">Org</span>
               </TabsTrigger>
               <TabsTrigger 
                 value="billing" 
@@ -1982,9 +3594,19 @@ const SettingsScreen: React.FC = () => {
                 <Shield className="h-4 w-4" />
                 Roles
               </TabsTrigger>
+              <TabsTrigger 
+                value="testimonials" 
+                role="tab"
+                aria-controls="testimonials-content"
+                className="flex items-center gap-2"
+              >
+                <MessageSquare className="h-4 w-4" />
+                <span className="hidden sm:inline">Testimonials</span>
+                <span className="sm:hidden">Reviews</span>
+              </TabsTrigger>
             </TabsList>
 
-            <TabsContent value="profile" role="tabpanel" id="profile-content">
+            <TabsContent value="organisation" role="tabpanel" id="organisation-content">
               <Card>
                 <CardHeader>
                   <CardTitle>Organisation Profile</CardTitle>
@@ -2028,6 +3650,10 @@ const SettingsScreen: React.FC = () => {
                 </CardContent>
               </Card>
             </TabsContent>
+
+            <TabsContent value="testimonials" role="tabpanel" id="testimonials-content">
+              <TestimonialsTabContent />
+            </TabsContent>
           </Tabs>
         </CardContent>
       </Card>
@@ -2041,7 +3667,10 @@ export default function App() {
   const [isDark, setIsDark] = useLocalStorage('darkMode', false);
   const [prefersReducedMotion, setPrefersReducedMotion] = useLocalStorage('prefersReducedMotion', false);
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [announcementsOpen, setAnnouncementsOpen] = useState(false);
   const [screenFilters, setScreenFilters] = useState<any>({});
+  const [currentProgrammeId, setCurrentProgrammeId] = useState<string | null>(null);
+  const [currentCourseId, setCurrentCourseId] = useState<string | null>(null);
 
   // Apply theme
   useEffect(() => {
@@ -2058,22 +3687,84 @@ export default function App() {
     setSidebarOpen(false); // Close sidebar on mobile after navigation
   }, []);
 
+  const handleNotificationToggle = () => {
+    setAnnouncementsOpen(!announcementsOpen);
+  };
+
+  const handleMarkAsRead = (id: string) => {
+    console.log(`Marked notification ${id} as read`);
+  };
+
+  // HR View handlers
+  const handleViewProgramme = (programmeId: string) => {
+    setCurrentProgrammeId(programmeId);
+    setCurrentScreen('programme-view');
+  };
+
+  const handleViewCourse = (courseId: string) => {
+    setCurrentCourseId(courseId);
+    setCurrentScreen('course-view');
+  };
+
+  const handleBackToHome = () => {
+    setCurrentScreen('home');
+    setCurrentProgrammeId(null);
+    setCurrentCourseId(null);
+  };
+
+  const handleAssignLearners = (id: string) => {
+    console.log(`Opening assignment wizard for ${id}`);
+    // This would open the assignment wizard component
+  };
+
+  const handleDownloadTracker = (id: string) => {
+    console.log(`Downloading tracker for ${id}`);
+    // This would trigger the Excel download
+  };
+
+  const handleOpenAnalytics = (id: string) => {
+    console.log(`Opening analytics for ${id}`);
+    // This would navigate to analytics with filters
+    setCurrentScreen('reports');
+    setScreenFilters(prev => ({ ...prev, reports: { programmeId: id } }));
+  };
+
   const renderCurrentScreen = () => {
     const filters = screenFilters[currentScreen];
     
     switch (currentScreen) {
       case 'home':
-        return <HRHomeScreen onNavigate={handleNavigate} />;
+        return <HRHomeScreen onNavigate={handleNavigate} onViewProgramme={handleViewProgramme} onViewCourse={handleViewCourse} />;
       case 'learners':
         return <LearnersScreen filters={filters} />;
-      case 'analytics':
-        return <AnalyticsScreen filters={filters} />;
-      case 'testimonials':
-        return <TestimonialsScreen />;
-      case 'settings':
-        return <SettingsScreen />;
+      case 'discussions':
+        return <DiscussionForumsScreen />;
+      case 'reports':
+        return <ReportsScreen />;
+      case 'profile':
+        return <ProfileScreen />;
+      case 'programme-view':
+        return currentProgrammeId ? (
+          <ProgrammeHRView 
+            programmeId={currentProgrammeId}
+            onBack={handleBackToHome}
+            onAssignLearners={handleAssignLearners}
+            onDownloadTracker={handleDownloadTracker}
+            onOpenAnalytics={handleOpenAnalytics}
+          />
+        ) : <HRHomeScreen onNavigate={handleNavigate} onViewProgramme={handleViewProgramme} onViewCourse={handleViewCourse} />;
+      case 'course-view':
+        return currentCourseId ? (
+          <CourseHRView 
+            courseId={currentCourseId}
+            onBack={handleBackToHome}
+            onAssignLearners={handleAssignLearners}
+            onDownloadTracker={handleDownloadTracker}
+            onOpenAnalytics={handleOpenAnalytics}
+          />
+        ) : <HRHomeScreen onNavigate={handleNavigate} onViewProgramme={handleViewProgramme} onViewCourse={handleViewCourse} />;
       default:
-        return <HRHomeScreen onNavigate={handleNavigate} />;
+        return <HRHomeScreen onNavigate={handleNavigate} onViewProgramme={handleViewProgramme} onViewCourse={handleViewCourse} />;
     }
   };
 
@@ -2091,6 +3782,8 @@ export default function App() {
       <TopNav 
         onMenuToggle={() => setSidebarOpen(!sidebarOpen)}
         showMenuButton={true}
+        onNotificationToggle={handleNotificationToggle}
+        notificationCount={mockAnnouncements.length}
       />
 
       <div className="flex">
@@ -2119,7 +3812,7 @@ export default function App() {
         {/* Main Content */}
         <main 
           id="main-content"
-          className="flex-1 min-h-[calc(100vh-4rem)] p-4 lg:p-8"
+          className={`flex-1 min-h-[calc(100vh-4rem)] p-4 lg:p-8 transition-all duration-300 ${announcementsOpen ? 'lg:mr-80' : ''}`}
           role="main"
           aria-label="HR Portal main content"
         >
@@ -2130,6 +3823,14 @@ export default function App() {
         </main>
       </div>
 
+      {/* Announcements Panel */}
+      <AnnouncementsPanel 
+        isOpen={announcementsOpen}
+        onClose={() => setAnnouncementsOpen(false)}
+        announcements={mockAnnouncements}
+        onMarkAsRead={handleMarkAsRead}
+      />
+
       {/* Chat Bot FAB */}
       <ChatBot currentScreen={currentScreen} />
 
diff --git a/src/App_new.tsx b/src/App_new.tsx
new file mode 100644
index 0000000..24dbc92
--- /dev/null
+++ b/src/App_new.tsx
@@ -0,0 +1,2343 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Button } from './components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './components/ui/card';
+import { Badge } from './components/ui/badge';
+import { Input } from './components/ui/input';
+import { Textarea } from './components/ui/textarea';
+import { Checkbox } from './components/ui/checkbox';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './components/ui/select';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from './components/ui/dialog';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from './components/ui/sheet';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './components/ui/table';
+import { Progress } from './components/ui/progress';
+import { Skeleton } from './components/ui/skeleton';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './components/ui/tabs';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from './components/ui/breadcrumb';
+import { Alert, AlertDescription } from './components/ui/alert';
+import { ActiveProgrammesTable } from './components/ActiveProgrammesTable';
+import { ProgrammeCalendar } from './components/ProgrammeCalendar';
+import { LearningAnalyticsTable } from './components/LearningAnalyticsTable';
+import { DiscussionForumFeed } from './components/DiscussionForumFeed';
+import { 
+  Home, 
+  Users, 
+  BarChart3, 
+  MessageSquare, 
+  Settings, 
+  Search, 
+  Filter, 
+  Download, 
+  Plus, 
+  Upload, 
+  Edit, 
+  MoreHorizontal,
+  TrendingUp,
+  Calendar,
+  Clock,
+  BookOpen,
+  Award,
+  Bell,
+  ChevronDown,
+  Menu,
+  X,
+  ArrowLeft,
+  ChevronRight,
+  RefreshCw,
+  CheckCircle,
+  AlertCircle,
+  XCircle,
+  FileText,
+  Mail,
+  Phone,
+  Eye,
+  Trash2,
+  Building2,
+  CreditCard,
+  Shield,
+  ExternalLink,
+  Info
+} from 'lucide-react';
+
+// Types
+interface KPIData {
+  title: string;
+  value: number;
+  change?: number;
+  trend?: 'up' | 'down' | 'neutral';
+}
+
+interface Employee {
+  id: string;
+  name: string;
+  email: string;
+  phone: string;
+  status: 'Active' | 'Inactive' | 'Pending';
+  programme?: string;
+  course?: string;
+  progress?: number;
+  lastActivity?: string;
+}
+
+interface Announcement {
+  id: string;
+  title: string;
+  content: string;
+  type: 'announcement' | 'reminder';
+  timestamp: string;
+  pinned?: boolean;
+}
+
+interface Deadline {
+  id: string;
+  title: string;
+  type: 'webinar' | 'profiler';
+  dueDate: string;
+  dueTime: string;
+}
+
+interface TestimonialFormData {
+  name: string;
+  email: string;
+  phone: string;
+  organisation: string;
+  programme: string;
+  testimonialText: string;
+  consentToPublish: boolean;
+}
+
+// Custom hooks
+const useLocalStorage = (key: string, initialValue: any) => {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      return initialValue;
+    }
+  });
+
+  const setValue = (value: any) => {
+    try {
+      setStoredValue(value);
+      window.localStorage.setItem(key, JSON.stringify(value));
+    } catch (error) {
+      console.error('Error saving to localStorage:', error);
+    }
+  };
+
+  return [storedValue, setValue];
+};
+
+const useCountUp = (end: number, duration: number = 1200) => {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    let start = 0;
+    const increment = end / (duration / 16);
+    const timer = setInterval(() => {
+      start += increment;
+      if (start >= end) {
+        setCount(end);
+        clearInterval(timer);
+      } else {
+        setCount(Math.floor(start));
+      }
+    }, 16);
+
+    return () => clearInterval(timer);
+  }, [end, duration]);
+
+  return count;
+};
+
+// Mock data
+const mockKPIData: KPIData[] = [
+  { title: 'Total Learners', value: 1247, change: 12, trend: 'up' },
+  { title: 'Active Courses', value: 89, change: 5, trend: 'up' },
+  { title: 'Completed Profilers', value: 342, change: -8, trend: 'down' },
+  { title: 'Average Progress', value: 73, change: 7, trend: 'up' }
+];
+
+const mockEmployees: Employee[] = [
+  { id: '1', name: 'Sarah Chen', email: 'sarah.chen@company.com', phone: '+61 4XX XXX XXX', status: 'Active', programme: 'Leadership Development', course: 'Strategic Thinking', progress: 85, lastActivity: '2 hours ago' },
+  { id: '2', name: 'Michael Rodriguez', email: 'michael.r@company.com', phone: '+61 4XX XXX XXX', status: 'Active', programme: 'Technical Skills', course: 'Data Analysis', progress: 62, lastActivity: '1 day ago' },
+  { id: '3', name: 'Emma Thompson', email: 'emma.thompson@company.com', phone: '+61 4XX XXX XXX', status: 'Pending', programme: 'Communication', course: 'Public Speaking', progress: 0, lastActivity: 'Never' },
+  { id: '4', name: 'David Kim', email: 'david.kim@company.com', phone: '+61 4XX XXX XXX', status: 'Active', programme: 'Project Management', course: 'Agile Methodology', progress: 94, lastActivity: '3 hours ago' },
+  { id: '5', name: 'Lisa Wang', email: 'lisa.wang@company.com', phone: '+61 4XX XXX XXX', status: 'Active', programme: 'Leadership Development', course: 'Team Management', progress: 78, lastActivity: '5 hours ago' },
+  { id: '6', name: 'James Wilson', email: 'james.wilson@company.com', phone: '+61 4XX XXX XXX', status: 'Inactive', programme: 'Technical Skills', course: 'Programming Basics', progress: 34, lastActivity: '2 weeks ago' },
+  { id: '7', name: 'Maria Garcia', email: 'maria.garcia@company.com', phone: '+61 4XX XXX XXX', status: 'Active', programme: 'Sales Training', course: 'Customer Relations', progress: 56, lastActivity: '1 day ago' },
+  { id: '8', name: 'Robert Lee', email: 'robert.lee@company.com', phone: '+61 4XX XXX XXX', status: 'Active', programme: 'Leadership Development', course: 'Decision Making', progress: 89, lastActivity: '4 hours ago' },
+  { id: '9', name: 'Jennifer Davis', email: 'jennifer.davis@company.com', phone: '+61 4XX XXX XXX', status: 'Pending', programme: 'Communication', course: 'Written Communication', progress: 0, lastActivity: 'Never' },
+  { id: '10', name: 'Thomas Brown', email: 'thomas.brown@company.com', phone: '+61 4XX XXX XXX', status: 'Active', programme: 'Project Management', course: 'Risk Management', progress: 71, lastActivity: '6 hours ago' }
+];
+
+const mockAnnouncements: Announcement[] = [
+  { id: '1', title: 'New Learning Module Available', content: 'Advanced Analytics course is now live in the system.', type: 'announcement', timestamp: '2 hours ago', pinned: true },
+  { id: '2', title: 'Reminder: Quarterly Reviews Due', content: 'Please complete all quarterly progress reviews by Friday.', type: 'reminder', timestamp: '5 hours ago' },
+  { id: '3', title: 'System Maintenance Scheduled', content: 'Learning platform will be offline Saturday 2-4 AM for updates.', type: 'announcement', timestamp: '1 day ago' }
+];
+
+const mockDeadlines: Deadline[] = [
+  { id: '1', title: 'Leadership Webinar Series', type: 'webinar', dueDate: 'Today', dueTime: '2:00 PM' },
+  { id: '2', title: 'Communication Skills Assessment', type: 'profiler', dueDate: 'Tomorrow', dueTime: '11:59 PM' },
+  { id: '3', title: 'Project Management Workshop', type: 'webinar', dueDate: 'Dec 30', dueTime: '10:00 AM' },
+  { id: '4', title: 'Technical Skills Profiler', type: 'profiler', dueDate: 'Jan 2', dueTime: '5:00 PM' },
+  { id: '5', title: 'Team Building Session', type: 'webinar', dueDate: 'Jan 5', dueTime: '3:30 PM' }
+];
+
+// Components
+const KPICard: React.FC<{ data: KPIData; onClick?: () => void; className?: string }> = ({ data, onClick, className = '' }) => {
+  const countedValue = useCountUp(data.value);
+  const [prefersReducedMotion] = useLocalStorage('prefersReducedMotion', false);
+  
+  return (
+    <Card 
+      className={`cursor-pointer transition-all duration-200 hover:shadow-md min-tap-44 ${className}`}
+      onClick={onClick}
+      role="button"
+      tabIndex={0}
+      aria-label={`${data.title}: ${data.value}${data.title.includes('Progress') ? '%' : ''}`}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onClick?.();
+        }
+      }}
+    >
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">{data.title}</CardTitle>
+      </CardHeader>
+      <CardContent className="pt-0">
+        <div className="flex items-baseline justify-between">
+          <span className={`text-2xl font-bold ${prefersReducedMotion ? '' : 'animate-count-up'}`}>
+            {prefersReducedMotion ? data.value : countedValue}
+            {data.title.includes('Progress') && '%'}
+          </span>
+          {data.change && (
+            <Badge variant={data.trend === 'up' ? 'default' : 'destructive'} className="text-xs">
+              {data.trend === 'up' ? '+' : ''}{data.change}{data.title.includes('Progress') ? '%' : ''}
+            </Badge>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+const EmployeeProgressCard: React.FC<{ 
+  employee: Employee; 
+  onEdit?: (employee: Employee) => void;
+}> = ({ employee, onEdit }) => {
+  const getProgressColor = (progress: number) => {
+    if (progress >= 80) return 'bg-status-success';
+    if (progress >= 60) return 'bg-status-warn';
+    return 'bg-status-error';
+  };
+
+  const getProgressStatus = (progress: number) => {
+    if (progress === 0) return 'Not Started';
+    if (progress >= 80) return 'Excellent';
+    if (progress >= 60) return 'Good';
+    return 'Needs Attention';
+  };
+
+  return (
+    <Card className="cursor-pointer hover:shadow-md transition-all duration-200" onClick={() => onEdit?.(employee)}>
+      <CardContent className="pt-4">
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-muted rounded-full flex items-center justify-center">
+              <span className="font-medium text-sm">{employee.name.split(' ').map(n => n[0]).join('')}</span>
+            </div>
+            <div>
+              <p className="font-medium">{employee.name}</p>
+              <Badge 
+                variant={
+                  employee.status === 'Active' ? 'default' : 
+                  employee.status === 'Pending' ? 'secondary' : 'destructive'
+                }
+                className="text-xs"
+              >
+                {employee.status}
+              </Badge>
+            </div>
+          </div>
+          <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); onEdit?.(employee); }}>
+            <Eye className="h-4 w-4" />
+          </Button>
+        </div>
+        
+        {employee.programme && (
+          <div className="space-y-2">
+            <div className="flex justify-between items-center">
+              <div>
+                <p className="text-sm font-medium">{employee.programme}</p>
+                <p className="text-xs text-muted-foreground">{employee.course}</p>
+              </div>
+              <span className="text-sm font-medium">{employee.progress}%</span>
+            </div>
+            
+            <div className="space-y-1">
+              <Progress value={employee.progress} className="h-2" />
+              <div className="flex justify-between items-center">
+                <Badge 
+                  variant="outline" 
+                  className={`text-xs ${getProgressColor(employee.progress || 0)} text-white border-0`}
+                >
+                  {getProgressStatus(employee.progress || 0)}
+                </Badge>
+                <span className="text-xs text-muted-foreground">{employee.lastActivity}</span>
+              </div>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+const EmployeeTable: React.FC<{ 
+  employees: Employee[]; 
+  onEdit?: (employee: Employee) => void;
+  showProgress?: boolean;
+  maxHeight?: string;
+  viewMode?: 'table' | 'cards';
+}> = ({ employees, onEdit, showProgress = true, maxHeight = "400px", viewMode = 'table' }) => {
+  if (viewMode === 'cards') {
+    return (
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" style={{ maxHeight }}>
+        {employees.map((employee) => (
+          <EmployeeProgressCard key={employee.id} employee={employee} onEdit={onEdit} />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`rounded-md border overflow-auto`} style={{ maxHeight }}>
+      <Table>
+        <TableHeader className="sticky-header">
+          <TableRow>
+            <TableHead className="w-[200px]">Employee</TableHead>
+            <TableHead className="w-[250px]">Email</TableHead>
+            <TableHead className="w-[150px]">Phone</TableHead>
+            <TableHead className="w-[100px]">Status</TableHead>
+            {showProgress && (
+              <>
+                <TableHead className="w-[200px]">Programme/Course</TableHead>
+                <TableHead className="w-[100px]">Progress</TableHead>
+                <TableHead className="w-[120px]">Last Activity</TableHead>
+              </>
+            )}
+            <TableHead className="w-[80px]">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {employees.map((employee) => (
+            <TableRow 
+              key={employee.id} 
+              className="min-h-[48px] cursor-pointer hover:bg-muted/50"
+              onClick={() => onEdit?.(employee)}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  onEdit?.(employee);
+                }
+              }}
+            >
+              <TableCell className="font-medium">{employee.name}</TableCell>
+              <TableCell className="text-muted-foreground">{employee.email}</TableCell>
+              <TableCell className="text-muted-foreground">{employee.phone}</TableCell>
+              <TableCell>
+                <Badge 
+                  variant={
+                    employee.status === 'Active' ? 'default' : 
+                    employee.status === 'Pending' ? 'secondary' : 'destructive'
+                  }
+                  aria-describedby={`status-${employee.id}`}
+                >
+                  {employee.status}
+                </Badge>
+                <span id={`status-${employee.id}`} className="sr-only">
+                  Employee status is {employee.status}
+                </span>
+              </TableCell>
+              {showProgress && (
+                <>
+                  <TableCell>
+                    <div>
+                      <div className="font-medium text-sm">{employee.programme}</div>
+                      <div className="text-xs text-muted-foreground">{employee.course}</div>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    {employee.progress !== undefined && (
+                      <div className="space-y-1">
+                        <Progress 
+                          value={employee.progress} 
+                          className="w-16" 
+                          aria-describedby={`progress-${employee.id}`}
+                        />
+                        <span className="text-xs text-muted-foreground">{employee.progress}%</span>
+                        <span id={`progress-${employee.id}`} className="sr-only">
+                          Progress: {employee.progress} percent complete
+                        </span>
+                      </div>
+                    )}
+                  </TableCell>
+                  <TableCell className="text-sm text-muted-foreground">{employee.lastActivity}</TableCell>
+                </>
+              )}
+              <TableCell>
+                <Button 
+                  variant="ghost" 
+                  size="sm" 
+                  className="min-tap-44"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onEdit?.(employee);
+                  }}
+                  aria-label={`Edit ${employee.name}`}
+                >
+                  <Edit className="h-4 w-4" />
+                </Button>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+
+const HRSidebar: React.FC<{ 
+  activeScreen: string; 
+  onNavigate: (screen: string) => void;
+  className?: string;
+}> = ({ activeScreen, onNavigate, className = '' }) => {
+  const [prefersReducedMotion] = useLocalStorage('prefersReducedMotion', false);
+  
+  const menuItems = [
+    { id: 'home', label: 'Dashboard', icon: Home, path: '/hr/home' },
+    { id: 'learners', label: 'Learners', icon: Users, path: '/hr/learners' },
+    { id: 'reports', label: 'Reports', icon: BarChart3, path: '/hr/reports' },
+    { id: 'profile', label: 'Profile', icon: Settings, path: '/hr/profile' }
+  ];
+
+  return (
+    <div className={`w-64 min-w-[248px] bg-sidebar flex flex-col ${className}`}>
+      <div className="p-6">
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-8 bg-brand-charcoal rounded-md flex items-center justify-center">
+            <span className="text-brand-charcoal-foreground font-bold text-sm">AC</span>
+          </div>
+          <span className="font-semibold text-sidebar-foreground">Acme Corp</span>
+        </div>
+      </div>
+      
+      <nav className="flex-1 p-4" role="navigation" aria-label="HR Portal Navigation">
+        <ul className="space-y-1">
+          {menuItems.map((item) => {
+            const Icon = item.icon;
+            const isActive = activeScreen === item.id;
+            
+            return (
+              <li key={item.id}>
+                <button
+                  onClick={() => onNavigate(item.id)}
+                  className={`
+                    w-full flex items-center gap-3 px-3 py-2 rounded-md text-sm min-tap-44
+                    transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-sidebar-ring focus:ring-offset-2 focus:ring-offset-sidebar
+                    ${isActive 
+                      ? 'bg-sidebar-primary text-sidebar-primary-foreground shadow-sm' 
+                      : 'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
+                    }
+                    ${prefersReducedMotion ? '' : 'animate-scale-hover'}
+                  `}
+                  aria-current={isActive ? 'page' : undefined}
+                  aria-label={`Navigate to ${item.label}`}
+                >
+                  <Icon className="h-4 w-4" />
+                  {item.label}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </nav>
+    </div>
+  );
+};
+
+const TopNav: React.FC<{ 
+  onMenuToggle?: () => void;
+  showMenuButton?: boolean;
+  onNotificationToggle?: () => void;
+  notificationCount?: number;
+}> = ({ onMenuToggle, showMenuButton = false, onNotificationToggle, notificationCount = 0 }) => {
+  return (
+    <header className="h-16 bg-background border-b border-chrome-divider flex items-center justify-between px-4 lg:px-6">
+      <div className="flex items-center gap-4">
+        {showMenuButton && (
+          <Button 
+            variant="ghost" 
+            size="icon" 
+            onClick={onMenuToggle}
+            className="lg:hidden min-tap-44"
+            aria-label="Toggle navigation menu"
+          >
+            <Menu className="h-5 w-5" />
+          </Button>
+        )}
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-8 bg-brand-navy rounded-md flex items-center justify-center">
+            <span className="text-brand-navy-foreground font-bold text-sm">KLC</span>
+          </div>
+          <span className="font-semibold hidden sm:block">Knowledge Learning Centre</span>
+        </div>
+      </div>
+      
+      <div className="flex items-center gap-2">
+        <Button 
+          variant="ghost" 
+          size="icon" 
+          className="min-tap-44 relative" 
+          aria-label="Notifications"
+          onClick={onNotificationToggle}
+        >
+          <Bell className="h-4 w-4" />
+          {notificationCount > 0 && (
+            <span className="absolute -top-1 -right-1 h-5 w-5 bg-status-error text-status-error-foreground rounded-full text-xs flex items-center justify-center">
+              {notificationCount > 9 ? '9+' : notificationCount}
+            </span>
+          )}
+        </Button>
+        <div className="w-8 h-8 bg-muted rounded-full flex items-center justify-center">
+          <span className="text-xs font-medium">HR</span>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+const BreadcrumbNav: React.FC<{ currentScreen: string }> = ({ currentScreen }) => {
+  const getBreadcrumbText = (screen: string) => {
+    switch (screen) {
+      case 'home': return 'Dashboard';
+      case 'learners': return 'Learners';
+      case 'reports': return 'Reports';
+      case 'profile': return 'Profile';
+      default: return 'HR Portal';
+    }
+  };
+
+  return (
+    <Breadcrumb className="mb-6">
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/hr">HR Portal</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator aria-hidden="true" />
+        <BreadcrumbItem>
+          <BreadcrumbPage>{getBreadcrumbText(currentScreen)}</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};
+
+const AnnouncementsPanel: React.FC<{ 
+  isOpen: boolean; 
+  onClose: () => void;
+  announcements: Announcement[];
+  onMarkAsRead?: (id: string) => void;
+}> = ({ isOpen, onClose, announcements, onMarkAsRead }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-y-0 right-0 w-80 bg-background border-l border-chrome-divider shadow-lg z-50 flex flex-col">
+      <div className="flex items-center justify-between p-4 border-b border-chrome-divider">
+        <h3 className="font-semibold">Announcements & Reminders</h3>
+        <Button 
+          variant="ghost" 
+          size="icon" 
+          onClick={onClose}
+          className="h-8 w-8"
+          aria-label="Close announcements panel"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+      
+      <div className="flex-1 overflow-y-auto p-4 space-y-3">
+        {announcements.map((item) => (
+          <div 
+            key={item.id} 
+            className={`
+              p-3 rounded-lg border transition-all duration-200 cursor-pointer hover:bg-muted/50
+              ${item.pinned ? 'bg-status-warn/10 border-status-warn/20' : 'bg-card border-chrome-divider'}
+            `}
+            onClick={() => onMarkAsRead?.(item.id)}
+          >
+            <div className="flex items-start justify-between mb-2">
+              <div className="flex items-center gap-2">
+                <div className={`p-1 rounded ${item.type === 'announcement' ? 'bg-brand-primary' : 'bg-status-warn'}`}>
+                  {item.type === 'announcement' ? 
+                    <Bell className="h-3 w-3 text-white" /> : 
+                    <Clock className="h-3 w-3 text-white" />
+                  }
+                </div>
+                {item.pinned && (
+                  <Badge variant="secondary" className="text-xs">Pinned</Badge>
+                )}
+              </div>
+              <span className="text-xs text-muted-foreground">{item.timestamp}</span>
+            </div>
+            
+            <h4 className="font-medium text-sm mb-1">{item.title}</h4>
+            <p className="text-xs text-muted-foreground">{item.content}</p>
+            
+            <div className="flex items-center justify-between mt-2">
+              <Badge variant="outline" className="text-xs capitalize">
+                {item.type}
+              </Badge>
+              <Button variant="ghost" size="sm" className="h-auto p-1 text-xs">
+                Mark as read
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+      
+      <div className="p-4 border-t border-chrome-divider">
+        <Button variant="outline" className="w-full text-sm">
+          View All Notifications
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const ChatBot: React.FC<{ currentScreen?: string }> = ({ currentScreen }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  
+  const getChipsForScreen = (screen?: string) => {
+    if (screen === 'profile') {
+      return [
+        "How do I submit a testimonial?",
+        "When will my testimonial be reviewed?",
+        "Can I edit my testimonial?",
+        "What makes a good testimonial?"
+      ];
+    }
+    return [
+      "How do I upload a roster?",
+      "How to assign courses?",
+      "View progress reports",
+      "Export learner data"
+    ];
+  };
+
+  const chips = getChipsForScreen(currentScreen);
+
+  return (
+    <div className="fixed bottom-6 right-6 z-40">
+      {isOpen && (
+        <div className="mb-4 bg-card border border-chrome-divider rounded-lg shadow-lg p-4 w-80 animate-slide-up">
+          <div className="flex justify-between items-center mb-3">
+            <h3 className="font-semibold">HR Assistant</h3>
+            <Button 
+              variant="ghost" 
+              size="icon" 
+              onClick={() => setIsOpen(false)}
+              className="h-6 w-6"
+              aria-label="Close chat"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+          <div className="space-y-2">
+            {chips.map((chip, index) => (
+              <button 
+                key={index}
+                className="w-full text-left p-2 text-sm bg-muted hover:bg-accent rounded-md transition-colors min-tap-44"
+              >
+                {chip}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+      <Button 
+        onClick={() => setIsOpen(!isOpen)}
+        className="rounded-full h-12 w-12 shadow-lg min-tap-44"
+        aria-label="Open HR chat assistant"
+        aria-expanded={isOpen}
+      >
+        <MessageSquare className="h-5 w-5" />
+      </Button>
+    </div>
+  );
+};
+
+// Screen Components
+const HRHomeScreen: React.FC<{ onNavigate: (screen: string, filters?: any) => void }> = ({ onNavigate }) => {
+  const [loading, setLoading] = useState(true);
+  const [prefersReducedMotion] = useLocalStorage('prefersReducedMotion', false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setLoading(false), 800);
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="space-y-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          {[...Array(4)].map((_, i) => (
+            <Card key={i}>
+              <CardHeader className="pb-2">
+                <Skeleton className="h-4 w-24" />
+              </CardHeader>
+              <CardContent>
+                <Skeleton className="h-8 w-16" />
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-6 w-48" />
+          </CardHeader>
+          <CardContent>
+            <Skeleton className="h-64 w-full" />
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Welcome Section */}
+      <div className={`space-y-4 ${prefersReducedMotion ? '' : 'animate-fade-in'}`}>
+        <div className="space-y-2">
+          <h1>Corporate HR Dashboard</h1>
+          <p className="text-muted-foreground">Manage programmes, track progress, and stay connected with your learning community</p>
+        </div>
+      </div>
+
+      {/* Quick Actions Section - Unchanged */}
+      <Card className={prefersReducedMotion ? '' : 'animate-slide-up'} style={{ animationDelay: '200ms' }}>
+        <CardHeader>
+          <CardTitle>Quick Actions</CardTitle>
+          <CardDescription>Common HR tasks and shortcuts</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+            {[
+              { title: 'Add Learners', icon: Plus, action: () => onNavigate('learners', { action: 'add' }) },
+              { title: 'Assign', icon: BookOpen, action: () => onNavigate('learners', { action: 'assign' }) },
+              { title: 'Download Reports', icon: Download, action: () => onNavigate('reports') },
+              { title: 'Submit Testimonial', icon: MessageSquare, action: () => onNavigate('profile') }
+            ].map((link, index) => {
+              const Icon = link.icon;
+              return (
+                <button
+                  key={index}
+                  onClick={link.action}
+                  className={`
+                    flex flex-col items-center justify-center p-6 bg-muted/50 hover:bg-muted rounded-lg 
+                    transition-all duration-200 min-h-[120px] min-w-[120px] gap-3 min-tap-44
+                    ${prefersReducedMotion ? '' : 'animate-scale-hover'}
+                  `}
+                  aria-label={link.title}
+                >
+                  <Icon className="h-6 w-6 text-brand-primary" />
+                  <span className="text-sm font-medium text-center">{link.title}</span>
+                </button>
+              );
+            })}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Active Programmes Table */}
+      <div className={prefersReducedMotion ? '' : 'animate-slide-up'} style={{ animationDelay: '400ms' }}>
+        <ActiveProgrammesTable 
+          onViewProgramme={(programmeId) => console.log(`View programme: ${programmeId}`)}
+          onAssignLearners={(programmeId) => console.log(`Assign learners to: ${programmeId}`)}
+          onDownloadTracker={(programmeId) => console.log(`Download tracker for: ${programmeId}`)}
+        />
+      </div>
+
+      {/* Two Column Layout: Calendar + Learning Analytics */}
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
+        {/* Programme Calendar - Right Side */}
+        <div className={`xl:col-span-1 ${prefersReducedMotion ? '' : 'animate-slide-up'}`} style={{ animationDelay: '600ms' }}>
+          <ProgrammeCalendar 
+            onEventClick={(event) => console.log(`Open event: ${event.title}`)}
+          />
+        </div>
+
+        {/* Learning Analytics - Left Side (Larger) */}
+        <div className={`xl:col-span-2 ${prefersReducedMotion ? '' : 'animate-slide-up'}`} style={{ animationDelay: '700ms' }}>
+          <LearningAnalyticsTable 
+            onViewLearner={(learnerId) => onNavigate('learners', { editEmployee: learnerId })}
+            onNudgeLearner={(learnerId) => console.log(`Nudge learner: ${learnerId}`)}
+            onViewAllAnalytics={(programmeId) => onNavigate('reports', { programme: programmeId })}
+          />
+        </div>
+      </div>
+
+      {/* Discussion Forum Feed */}
+      <div className={prefersReducedMotion ? '' : 'animate-slide-up'} style={{ animationDelay: '800ms' }}>
+        <DiscussionForumFeed 
+          onOpenThread={(threadId) => console.log(`Open thread: ${threadId}`)}
+          onMarkAsRead={(threadId) => console.log(`Mark as read: ${threadId}`)}
+        />
+      </div>
+    </div>
+  );
+};
+
+const LearnersScreen: React.FC<{ filters?: any }> = ({ filters }) => {
+  const [employees, setEmployees] = useState(mockEmployees);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [selectedEmployees, setSelectedEmployees] = useState<string[]>([]);
+  const [showAddDrawer, setShowAddDrawer] = useState(false);
+  const [showImportModal, setShowImportModal] = useState(false);
+  const [showAssignModal, setShowAssignModal] = useState(false);
+  const [showEditDrawer, setShowEditDrawer] = useState(false);
+  const [editingEmployee, setEditingEmployee] = useState<Employee | null>(null);
+  const [newEmployee, setNewEmployee] = useState({ name: '', email: '', phone: '' });
+  const [bulkActionVisible, setBulkActionVisible] = useState(false);
+
+  const debouncedSearch = useCallback(
+    (term: string) => {
+      // Simulating search with 300ms delay
+      const timer = setTimeout(() => {
+        setSearchTerm(term);
+      }, 300);
+      return () => clearTimeout(timer);
+    },
+    []
+  );
+
+  const filteredEmployees = employees.filter(emp => {
+    const matchesSearch = emp.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                         emp.email.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesStatus = statusFilter === 'all' || emp.status === statusFilter;
+    return matchesSearch && matchesStatus;
+  });
+
+  const handleEmployeeSelect = (employeeId: string, selected: boolean) => {
+    if (selected) {
+      setSelectedEmployees(prev => [...prev, employeeId]);
+    } else {
+      setSelectedEmployees(prev => prev.filter(id => id !== employeeId));
+    }
+  };
+
+  const handleBulkSelect = (selectAll: boolean) => {
+    if (selectAll) {
+      setSelectedEmployees(filteredEmployees.map(emp => emp.id));
+    } else {
+      setSelectedEmployees([]);
+    }
+  };
+
+  useEffect(() => {
+    setBulkActionVisible(selectedEmployees.length > 0);
+  }, [selectedEmployees]);
+
+  const handleAddEmployee = () => {
+    if (newEmployee.name && newEmployee.email) {
+      const newEmp: Employee = {
+        id: Date.now().toString(),
+        name: newEmployee.name,
+        email: newEmployee.email,
+        phone: newEmployee.phone,
+        status: 'Pending'
+      };
+      setEmployees(prev => [...prev, newEmp]);
+      setNewEmployee({ name: '', email: '', phone: '' });
+      setShowAddDrawer(false);
+      // Show success toast (simulated)
+      console.log('Employee added successfully');
+    }
+  };
+
+  const handleEditEmployee = (employee: Employee) => {
+    setEditingEmployee(employee);
+    setShowEditDrawer(true);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Toolbar */}
+      <Card>
+        <CardContent className="pt-6">
+          <div className="flex flex-col lg:flex-row gap-4 items-start lg:items-center justify-between">
+            <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center flex-1">
+              <div className="relative flex-1 max-w-md">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="Search learners..."
+                  className="pl-10"
+                  onChange={(e) => debouncedSearch(e.target.value)}
+                  aria-label="Search learners by name or email"
+                />
+              </div>
+              <Select value={statusFilter} onValueChange={setStatusFilter}>
+                <SelectTrigger className="w-[150px]">
+                  <SelectValue placeholder="Status" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Status</SelectItem>
+                  <SelectItem value="Active">Active</SelectItem>
+                  <SelectItem value="Inactive">Inactive</SelectItem>
+                  <SelectItem value="Pending">Pending</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex gap-2">
+              <Button 
+                onClick={() => setShowAddDrawer(true)}
+                className="min-tap-44"
+                aria-label="Add new learner"
+              >
+                <Plus className="h-4 w-4 mr-2" />
+                Add Learner
+              </Button>
+              <Button 
+                variant="outline" 
+                onClick={() => setShowImportModal(true)}
+                className="min-tap-44"
+                aria-label="Import learners from CSV"
+              >
+                <Upload className="h-4 w-4 mr-2" />
+                Import Learners
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Bulk Action Bar */}
+      {bulkActionVisible && (
+        <Card className="animate-slide-in-right">
+          <CardContent className="py-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-muted-foreground" aria-live="polite">
+                {selectedEmployees.length} learner{selectedEmployees.length !== 1 ? 's' : ''} selected
+              </span>
+              <div className="flex gap-2">
+                <Button 
+                  variant="outline" 
+                  size="sm"
+                  onClick={() => setShowAssignModal(true)}
+                  className="min-tap-44"
+                >
+                  Assign to Programme/Course
+                </Button>
+                <Button 
+                  variant="outline" 
+                  size="sm"
+                  className="min-tap-44"
+                >
+                  Deactivate
+                </Button>
+                <Button 
+                  variant="outline" 
+                  size="sm"
+                  className="min-tap-44"
+                >
+                  Reactivate
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Learners Table */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle>Learners ({filteredEmployees.length})</CardTitle>
+              <CardDescription>Manage learner accounts and assignments</CardDescription>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => handleBulkSelect(selectedEmployees.length !== filteredEmployees.length)}
+                className="min-tap-44"
+              >
+                {selectedEmployees.length === filteredEmployees.length ? 'Deselect All' : 'Select All'}
+              </Button>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="rounded-md border min-h-[60vh]">
+            <Table>
+              <TableHeader className="sticky-header">
+                <TableRow>
+                  <TableHead className="w-[50px]">Select</TableHead>
+                  <TableHead className="w-[200px]">Name</TableHead>
+                  <TableHead className="w-[250px]">Email</TableHead>
+                  <TableHead className="w-[150px]">Phone</TableHead>
+                  <TableHead className="w-[100px]">Status</TableHead>
+                  <TableHead className="w-[80px]">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filteredEmployees.map((employee) => (
+                  <TableRow 
+                    key={employee.id} 
+                    className="min-h-[48px]"
+                  >
+                    <TableCell>
+                      <input
+                        type="checkbox"
+                        checked={selectedEmployees.includes(employee.id)}
+                        onChange={(e) => handleEmployeeSelect(employee.id, e.target.checked)}
+                        className="min-tap-44"
+                        aria-label={`Select ${employee.name}`}
+                      />
+                    </TableCell>
+                    <TableCell className="font-medium">{employee.name}</TableCell>
+                    <TableCell className="text-muted-foreground">{employee.email}</TableCell>
+                    <TableCell className="text-muted-foreground">{employee.phone}</TableCell>
+                    <TableCell>
+                      <Badge 
+                        variant={
+                          employee.status === 'Active' ? 'default' : 
+                          employee.status === 'Pending' ? 'secondary' : 'destructive'
+                        }
+                      >
+                        {employee.status}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex gap-1">
+                        <Button 
+                          variant="ghost" 
+                          size="sm" 
+                          onClick={() => handleEditEmployee(employee)}
+                          className="min-tap-44"
+                          aria-label={`Edit ${employee.name}`}
+                        >
+                          <Edit className="h-4 w-4" />
+                        </Button>
+                        <Button 
+                          variant="ghost" 
+                          size="sm" 
+                          className="min-tap-44"
+                          aria-label={`More actions for ${employee.name}`}
+                        >
+                          <MoreHorizontal className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Add Learner Drawer */}
+      <Sheet open={showAddDrawer} onOpenChange={setShowAddDrawer}>
+        <SheetContent 
+          className="w-[480px] sm:w-[540px]"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="add-learner-title"
+        >
+          <SheetHeader>
+            <SheetTitle id="add-learner-title">Add New Learner</SheetTitle>
+            <SheetDescription>
+              Add a new learner to the system. Email cannot be changed after saving.
+            </SheetDescription>
+          </SheetHeader>
+          <div className="mt-6 space-y-4">
+            <div>
+              <label htmlFor="employee-name" className="block text-sm font-medium mb-2">
+                Employee Name *
+              </label>
+              <Input
+                id="employee-name"
+                value={newEmployee.name}
+                onChange={(e) => setNewEmployee(prev => ({ ...prev, name: e.target.value }))}
+                placeholder="Enter full name"
+                required
+                aria-required="true"
+              />
+            </div>
+            <div>
+              <label htmlFor="employee-email" className="block text-sm font-medium mb-2">
+                Email Address *
+              </label>
+              <Input
+                id="employee-email"
+                type="email"
+                value={newEmployee.email}
+                onChange={(e) => setNewEmployee(prev => ({ ...prev, email: e.target.value }))}
+                placeholder="email@company.com"
+                required
+                aria-required="true"
+              />
+            </div>
+            <div>
+              <label htmlFor="employee-phone" className="block text-sm font-medium mb-2">
+                Phone Number
+              </label>
+              <Input
+                id="employee-phone"
+                type="tel"
+                value={newEmployee.phone}
+                onChange={(e) => setNewEmployee(prev => ({ ...prev, phone: e.target.value }))}
+                placeholder="+61 4XX XXX XXX"
+              />
+            </div>
+            <div className="flex gap-2 pt-4">
+              <Button onClick={handleAddEmployee} className="flex-1">
+                Save Learner
+              </Button>
+              <Button variant="outline" onClick={() => setShowAddDrawer(false)} className="flex-1">
+                Cancel
+              </Button>
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      {/* Import Modal */}
+      <Dialog open={showImportModal} onOpenChange={setShowImportModal}>
+        <DialogContent 
+          className="sm:max-w-[600px]"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="import-title"
+        >
+          <DialogHeader>
+            <DialogTitle id="import-title">Import Learners</DialogTitle>
+            <DialogDescription>
+              Upload a CSV file to import multiple learners. Maximum file size: 5MB.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-6">
+            <div className="space-y-2">
+              <h4 className="font-medium">Step 1: Download Template</h4>
+              <p className="text-sm text-muted-foreground">
+                Download our CSV template with the required fields: Name, Email, Phone.
+              </p>
+              <Button variant="outline" className="min-tap-44">
+                <Download className="h-4 w-4 mr-2" />
+                Download CSV Template
+              </Button>
+            </div>
+            <div className="space-y-2">
+              <h4 className="font-medium">Step 2: Upload File</h4>
+              <div className="border-2 border-dashed border-muted rounded-lg p-8 text-center">
+                <Upload className="h-8 w-8 mx-auto mb-2 text-muted-foreground" />
+                <p className="text-sm text-muted-foreground">
+                  Drag and drop your CSV file here, or click to browse
+                </p>
+                <Button variant="outline" className="mt-2 min-tap-44">
+                  Choose File
+                </Button>
+              </div>
+            </div>
+            <div className="flex gap-2">
+              <Button className="flex-1">Import Learners</Button>
+              <Button variant="outline" onClick={() => setShowImportModal(false)} className="flex-1">
+                Cancel
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Assign Modal */}
+      <Dialog open={showAssignModal} onOpenChange={setShowAssignModal}>
+        <DialogContent 
+          className="sm:max-w-[500px]"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="assign-title"
+        >
+          <DialogHeader>
+            <DialogTitle id="assign-title">Assign to Programme/Course</DialogTitle>
+            <DialogDescription>
+              Assign {selectedEmployees.length} selected learner{selectedEmployees.length !== 1 ? 's' : ''} to a programme or course.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="programme-select" className="block text-sm font-medium mb-2">
+                Select Programme/Course
+              </label>
+              <Select>
+                <SelectTrigger id="programme-select">
+                  <SelectValue placeholder="Choose programme or course" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="leadership">Leadership Development</SelectItem>
+                  <SelectItem value="technical">Technical Skills</SelectItem>
+                  <SelectItem value="communication">Communication</SelectItem>
+                  <SelectItem value="project">Project Management</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <label htmlFor="start-date" className="block text-sm font-medium mb-2">
+                Start Date (Optional)
+              </label>
+              <Input id="start-date" type="date" />
+            </div>
+            <div className="flex gap-2">
+              <Button className="flex-1">Assign</Button>
+              <Button variant="outline" onClick={() => setShowAssignModal(false)} className="flex-1">
+                Cancel
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Edit/Assign Drawer */}
+      <Sheet open={showEditDrawer} onOpenChange={setShowEditDrawer}>
+        <SheetContent 
+          className="w-[600px] sm:w-[700px]"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="edit-learner-title"
+        >
+          <SheetHeader>
+            <SheetTitle id="edit-learner-title">
+              {editingEmployee?.name}
+            </SheetTitle>
+            <SheetDescription>
+              Edit learner details and manage course assignments.
+            </SheetDescription>
+          </SheetHeader>
+          {editingEmployee && (
+            <Tabs defaultValue="details" className="mt-6">
+              <TabsList className="grid w-full grid-cols-2">
+                <TabsTrigger value="details">Details</TabsTrigger>
+                <TabsTrigger value="enrolments">Enrolments</TabsTrigger>
+              </TabsList>
+              <TabsContent value="details" className="space-y-4 mt-4">
+                <div>
+                  <label htmlFor="edit-name" className="block text-sm font-medium mb-2">
+                    Name
+                  </label>
+                  <Input
+                    id="edit-name"
+                    defaultValue={editingEmployee.name}
+                  />
+                </div>
+                <div>
+                  <label htmlFor="edit-phone" className="block text-sm font-medium mb-2">
+                    Phone
+                  </label>
+                  <Input
+                    id="edit-phone"
+                    defaultValue={editingEmployee.phone}
+                  />
+                </div>
+                <div>
+                  <label htmlFor="edit-status" className="block text-sm font-medium mb-2">
+                    Status
+                  </label>
+                  <Select defaultValue={editingEmployee.status}>
+                    <SelectTrigger id="edit-status">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Active">Active</SelectItem>
+                      <SelectItem value="Inactive">Inactive</SelectItem>
+                      <SelectItem value="Pending">Pending</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </TabsContent>
+              <TabsContent value="enrolments" className="space-y-4 mt-4">
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <h4 className="font-medium">Current Enrolments</h4>
+                    <Button size="sm">
+                      <Plus className="h-4 w-4 mr-2" />
+                      Assign Course
+                    </Button>
+                  </div>
+                  {editingEmployee.programme && (
+                    <Card>
+                      <CardContent className="pt-4">
+                        <div className="flex items-center justify-between">
+                          <div>
+                            <p className="font-medium">{editingEmployee.programme}</p>
+                            <p className="text-sm text-muted-foreground">{editingEmployee.course}</p>
+                            {editingEmployee.progress !== undefined && (
+                              <Progress value={editingEmployee.progress} className="w-32 mt-2" />
+                            )}
+                          </div>
+                          <Button variant="outline" size="sm">
+                            Unassign
+                          </Button>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  )}
+                </div>
+              </TabsContent>
+              <div className="flex gap-2 mt-6">
+                <Button className="flex-1">Save Changes</Button>
+                <Button variant="outline" onClick={() => setShowEditDrawer(false)} className="flex-1">
+                  Cancel
+                </Button>
+              </div>
+            </Tabs>
+          )}
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+};
+
+const TestimonialsTabContent: React.FC = () => {
+  const [loading, setLoading] = useState(true);
+  const [formData, setFormData] = useState<TestimonialFormData>({
+    name: 'Alex Sharma',
+    email: 'alex.sharma@company.com',
+    phone: '',
+    organisation: 'Acme Corp',
+    programme: '',
+    testimonialText: '',
+    consentToPublish: false
+  });
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitSuccess, setSubmitSuccess] = useState(false);
+  const [submitError, setSubmitError] = useState('');
+  const [charCount, setCharCount] = useState(0);
+  const [prefersReducedMotion] = useLocalStorage('prefersReducedMotion', false);
+
+  // Simulate profile pre-fill loading
+  useEffect(() => {
+    const timer = setTimeout(() => setLoading(false), 300);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const programmes = [
+    'Leadership Development',
+    'Technical Skills',
+    'Communication',
+    'Project Management',
+    'Sales Training'
+  ];
+
+  const validateForm = () => {
+    const errors: Record<string, string> = {};
+    
+    if (!formData.testimonialText.trim()) {
+      errors.testimonialText = 'Testimonial text is required';
+    } else if (formData.testimonialText.length < 1) {
+      errors.testimonialText = 'Testimonial must be at least 1 character';
+    } else if (formData.testimonialText.length > 2000) {
+      errors.testimonialText = 'Testimonial must be 2000 characters or less';
+    }
+    
+    if (!formData.consentToPublish) {
+      errors.consentToPublish = 'You must consent to publish your testimonial';
+    }
+    
+    return errors;
+  };
+
+  const isFormValid = () => {
+    const errors = validateForm();
+    return Object.keys(errors).length === 0 && formData.testimonialText.trim().length > 0;
+  };
+
+  const handleInputChange = (field: keyof TestimonialFormData, value: string | boolean) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+    
+    if (field === 'testimonialText' && typeof value === 'string') {
+      setCharCount(value.length);
+    }
+    
+    // Clear field error when user starts typing
+    if (formErrors[field]) {
+      setFormErrors(prev => {
+        const newErrors = { ...prev };
+        delete newErrors[field];
+        return newErrors;
+      });
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    const errors = validateForm();
+    if (Object.keys(errors).length > 0) {
+      setFormErrors(errors);
+      return;
+    }
+    
+    setIsSubmitting(true);
+    setSubmitError('');
+    
+    try {
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 1500));
+      
+      // Simulate occasional error for testing
+      if (Math.random() > 0.9) {
+        throw new Error('Submission failed. Please try again.');
+      }
+      
+      setSubmitSuccess(true);
+      setFormData(prev => ({ ...prev, testimonialText: '', programme: '', consentToPublish: false }));
+      setCharCount(0);
+    } catch (error) {
+      setSubmitError(error instanceof Error ? error.message : 'An error occurred. Please try again.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const resetForm = () => {
+    setSubmitSuccess(false);
+    setSubmitError('');
+    setFormErrors({});
+  };
+
+  if (loading) {
+    return (
+      <div className="space-y-6">
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-8 w-48" />
+            <Skeleton className="h-4 w-96" />
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <Skeleton className="h-10 w-full max-w-md" />
+              <Skeleton className="h-10 w-full max-w-md" />
+              <Skeleton className="h-32 w-full max-w-md" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Success State */}
+      {submitSuccess && (
+        <Alert 
+          className={`border-status-success/20 bg-status-success/10 ${prefersReducedMotion ? '' : 'animate-fade-in'}`}
+          role="status" 
+          aria-live="polite"
+        >
+          <CheckCircle className="h-4 w-4 text-status-success" />
+          <AlertDescription className="text-status-success">
+            Thanks — your testimonial is pending review by KLC.
+            <Button 
+              variant="link" 
+              className="p-0 ml-2 h-auto text-status-success underline"
+              onClick={resetForm}
+            >
+              Submit another testimonial
+            </Button>
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Error State */}
+      {submitError && (
+        <Alert 
+          className="border-status-error/20 bg-status-error/10"
+          role="alert"
+          aria-live="assertive"
+        >
+          <AlertCircle className="h-4 w-4 text-status-error" />
+          <AlertDescription className="text-status-error">
+            {submitError}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Testimonial Form */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Submit Testimonial</CardTitle>
+          <CardDescription>
+            Share your experience with KLC programmes to help others discover the value of our learning solutions.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {/* Your Name */}
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium mb-2">
+                  Your Name
+                </label>
+                <Input
+                  id="name"
+                  value={formData.name}
+                  readOnly
+                  className="bg-muted cursor-not-allowed"
+                  aria-describedby="name-help"
+                />
+                <p id="name-help" className="text-xs text-muted-foreground mt-1">
+                  Pre-filled from your profile
+                </p>
+              </div>
+
+              {/* Work Email */}
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium mb-2">
+                  Work Email
+                </label>
+                <Input
+                  id="email"
+                  value={formData.email}
+                  readOnly
+                  className="bg-muted cursor-not-allowed"
+                  aria-describedby="email-help"
+                />
+                <p id="email-help" className="text-xs text-muted-foreground mt-1">
+                  Pre-filled from your profile
+                </p>
+              </div>
+
+              {/* Phone */}
+              <div>
+                <label htmlFor="phone" className="block text-sm font-medium mb-2">
+                  Phone <span className="text-muted-foreground">(Optional)</span>
+                </label>
+                <Input
+                  id="phone"
+                  type="tel"
+                  value={formData.phone}
+                  onChange={(e) => handleInputChange('phone', e.target.value)}
+                  placeholder="+61 4XX XXX XXX"
+                  className="min-tap-44"
+                />
+              </div>
+
+              {/* Organisation */}
+              <div>
+                <label htmlFor="organisation" className="block text-sm font-medium mb-2">
+                  Organisation
+                </label>
+                <Input
+                  id="organisation"
+                  value={formData.organisation}
+                  readOnly
+                  className="bg-muted cursor-not-allowed"
+                  aria-describedby="org-help"
+                />
+                <p id="org-help" className="text-xs text-muted-foreground mt-1">
+                  Pre-filled from your profile
+                </p>
+              </div>
+            </div>
+
+            {/* Programme */}
+            <div>
+              <label htmlFor="programme" className="block text-sm font-medium mb-2">
+                Programme <span className="text-muted-foreground">(Optional)</span>
+              </label>
+              <Select 
+                value={formData.programme} 
+                onValueChange={(value) => handleInputChange('programme', value)}
+              >
+                <SelectTrigger id="programme" className="min-tap-44">
+                  <SelectValue placeholder="Select a programme (optional)" />
+                </SelectTrigger>
+                <SelectContent>
+                  {programmes.map((programme) => (
+                    <SelectItem key={programme} value={programme}>
+                      {programme}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Testimonial Text */}
+            <div>
+              <label htmlFor="testimonial" className="block text-sm font-medium mb-2">
+                Testimonial Text *
+              </label>
+              <Textarea
+                id="testimonial"
+                value={formData.testimonialText}
+                onChange={(e) => handleInputChange('testimonialText', e.target.value)}
+                placeholder="Share your experience (1–2000 chars)…"
+                className={`min-h-[120px] min-tap-44 ${formErrors.testimonialText ? 'border-status-error' : ''}`}
+                aria-invalid={!!formErrors.testimonialText}
+                aria-describedby="testimonial-help testimonial-counter testimonial-error"
+                maxLength={2000}
+                required
+              />
+              <div className="flex justify-between items-center mt-1">
+                <div>
+                  <p id="testimonial-help" className="text-xs text-muted-foreground">
+                    Share what you learned, how it helped, or what you'd recommend to others
+                  </p>
+                  {formErrors.testimonialText && (
+                    <p id="testimonial-error" className="text-xs text-status-error mt-1" role="alert">
+                      {formErrors.testimonialText}
+                    </p>
+                  )}
+                </div>
+                <span 
+                  id="testimonial-counter" 
+                  className={`text-xs ${charCount > 2000 ? 'text-status-error' : 'text-muted-foreground'}`}
+                  aria-live="polite"
+                >
+                  {charCount}/2000
+                </span>
+              </div>
+            </div>
+
+            {/* Consent Checkbox */}
+            <div className="space-y-2">
+              <div className="flex items-start space-x-3">
+                <Checkbox
+                  id="consent"
+                  checked={formData.consentToPublish}
+                  onCheckedChange={(checked) => handleInputChange('consentToPublish', !!checked)}
+                  className={`min-tap-44 mt-1 ${formErrors.consentToPublish ? 'border-status-error' : ''}`}
+                  aria-invalid={!!formErrors.consentToPublish}
+                  aria-describedby="consent-label consent-error"
+                  required
+                />
+                <div className="space-y-1">
+                  <label 
+                    htmlFor="consent" 
+                    id="consent-label"
+                    className="text-sm font-medium cursor-pointer"
+                  >
+                    I consent to publish this testimonial *
+                  </label>
+                  <p className="text-xs text-muted-foreground">
+                    Your testimonial may be used in marketing materials and on our website. 
+                    You can request removal at any time by contacting us.
+                  </p>
+                  {formErrors.consentToPublish && (
+                    <p id="consent-error" className="text-xs text-status-error" role="alert">
+                      {formErrors.consentToPublish}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Submit Button */}
+            <div className="pt-4">
+              <Button
+                type="submit"
+                disabled={!isFormValid() || isSubmitting || submitSuccess}
+                className="w-full md:w-auto min-tap-44"
+                aria-describedby="submit-help"
+              >
+                {isSubmitting ? (
+                  <>
+                    <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                    Submitting...
+                  </>
+                ) : (
+                  'Submit Testimonial'
+                )}
+              </Button>
+              <p id="submit-help" className="text-xs text-muted-foreground mt-2">
+                Your testimonial will be reviewed before being published
+              </p>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+
+      {/* Status Notice */}
+      <Card role="note">
+        <CardContent className="pt-6">
+          <div className="flex items-start gap-3">
+            <Info className="h-5 w-5 text-brand-primary mt-0.5 flex-shrink-0" />
+            <div>
+              <p className="text-sm">
+                Submissions are reviewed by KLC Super-Admins before appearing publicly.
+                <Button variant="link" className="p-0 ml-1 h-auto text-sm underline">
+                  View policy
+                  <ExternalLink className="h-3 w-3 ml-1" />
+                </Button>
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+const ReportsScreen: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('tracker');
+  const [dateRange, setDateRange] = useState('last-30-days');
+  const [selectedProgramme, setSelectedProgramme] = useState('all');
+  const [selectedCohort, setSelectedCohort] = useState('all');
+  const [exporting, setExporting] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleExport = async (format: 'csv' | 'pdf' | 'excel') => {
+    setExporting(true);
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    setExporting(false);
+    console.log(`Exported as ${format.toUpperCase()}`);
+  };
+
+  const generateReport = () => {
+    setLoading(true);
+    setTimeout(() => setLoading(false), 1500);
+  };
+
+  // Mock data for reports
+  const trackerMetrics = [
+    { metric: 'Completion Rate', current: 78, previous: 72, trend: 'up' },
+    { metric: 'Average Score', current: 85, previous: 82, trend: 'up' },
+    { metric: 'Time to Complete', current: 21, previous: 24, trend: 'up' },
+    { metric: 'Engagement Rate', current: 92, previous: 89, trend: 'up' }
+  ];
+
+  const individualReports = [
+    { id: '1', name: 'Sarah Chen', programme: 'Leadership Development', progress: 85, lastAccess: '2 hours ago', status: 'On Track' },
+    { id: '2', name: 'Michael Rodriguez', programme: 'Technical Skills', progress: 62, lastAccess: '1 day ago', status: 'Behind' },
+    { id: '3', name: 'Emma Thompson', programme: 'Communication', progress: 94, lastAccess: '3 hours ago', status: 'Completed' },
+    { id: '4', name: 'David Kim', programme: 'Project Management', progress: 78, lastAccess: '5 hours ago', status: 'On Track' },
+    { id: '5', name: 'Lisa Wang', programme: 'Leadership Development', progress: 56, lastAccess: '2 days ago', status: 'Behind' }
+  ];
+
+  const cohortData = [
+    { cohort: 'Leadership Q4 2024', enrolled: 45, completed: 32, inProgress: 11, notStarted: 2, avgScore: 87 },
+    { cohort: 'Technical Skills Cohort A', enrolled: 38, completed: 25, inProgress: 10, notStarted: 3, avgScore: 82 },
+    { cohort: 'Communication Workshop', enrolled: 28, completed: 28, inProgress: 0, notStarted: 0, avgScore: 91 },
+    { cohort: 'Project Management Cert', enrolled: 52, completed: 18, inProgress: 28, notStarted: 6, avgScore: 79 }
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* Reports Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1>HR Access Reports</h1>
+          <p className="text-muted-foreground">Comprehensive reporting and analytics for learning programs</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Select value={dateRange} onValueChange={setDateRange}>
+            <SelectTrigger className="w-[180px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="last-7-days">Last 7 days</SelectItem>
+              <SelectItem value="last-30-days">Last 30 days</SelectItem>
+              <SelectItem value="last-90-days">Last 90 days</SelectItem>
+              <SelectItem value="last-year">Last year</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button 
+            variant="outline" 
+            onClick={() => handleExport('excel')}
+            disabled={exporting}
+            className="min-tap-44"
+          >
+            {exporting ? (
+              <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+            ) : (
+              <Download className="h-4 w-4 mr-2" />
+            )}
+            Export
+          </Button>
+        </div>
+      </div>
+
+      {/* Reports Tabs */}
+      <Card>
+        <CardContent className="pt-6">
+          <Tabs 
+            value={activeTab} 
+            onValueChange={setActiveTab}
+            className="w-full"
+          >
+            <TabsList 
+              className="grid w-full grid-cols-3 mb-6" 
+              role="tablist"
+              aria-label="Reports navigation"
+            >
+              <TabsTrigger 
+                value="tracker" 
+                role="tab"
+                aria-controls="tracker-content"
+                className="flex items-center gap-2"
+              >
+                <TrendingUp className="h-4 w-4" />
+                Tracker
+              </TabsTrigger>
+              <TabsTrigger 
+                value="individual" 
+                role="tab"
+                aria-controls="individual-content"
+                className="flex items-center gap-2"
+              >
+                <Users className="h-4 w-4" />
+                Individual Reports
+              </TabsTrigger>
+              <TabsTrigger 
+                value="cohort" 
+                role="tab"
+                aria-controls="cohort-content"
+                className="flex items-center gap-2"
+              >
+                <BarChart3 className="h-4 w-4" />
+                Cohort Reports
+              </TabsTrigger>
+            </TabsList>
+
+            {/* Tracker Tab */}
+            <TabsContent value="tracker" role="tabpanel" id="tracker-content" className="space-y-6">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Learning Progress Tracker</CardTitle>
+                  <CardDescription>Real-time metrics and performance indicators</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  {/* Tracker KPIs */}
+                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+                    {trackerMetrics.map((metric, index) => (
+                      <Card key={index} className="border-0 bg-muted/30">
+                        <CardContent className="pt-4">
+                          <div className="flex items-center justify-between">
+                            <div>
+                              <p className="text-sm text-muted-foreground">{metric.metric}</p>
+                              <p className="text-2xl font-bold">
+                                {metric.current}
+                                {metric.metric.includes('Rate') ? '%' : metric.metric.includes('Time') ? ' days' : metric.metric.includes('Score') ? '/100' : ''}
+                              </p>
+                            </div>
+                            <Badge variant={metric.trend === 'up' ? 'default' : 'destructive'} className="text-xs">
+                              {metric.trend === 'up' ? '+' : ''}
+                              {metric.current - metric.previous}
+                              {metric.metric.includes('Rate') ? '%' : ''}
+                            </Badge>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </div>
+
+                  {/* Progress Chart */}
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <Card className="border-0">
+                      <CardHeader>
+                        <CardTitle className="text-lg">Completion Trends</CardTitle>
+                        <CardDescription>Weekly completion rates over time</CardDescription>
+                      </CardHeader>
+                      <CardContent>
+                        <div 
+                          className="h-64 flex items-center justify-center border border-dashed border-muted rounded-lg"
+                          role="img"
+                          aria-describedby="completion-chart-desc"
+                        >
+                          <div className="text-center">
+                            <TrendingUp className="h-12 w-12 mx-auto mb-2 text-muted-foreground" />
+                            <p className="text-muted-foreground">Completion Trends Chart</p>
+                            <p className="text-sm text-muted-foreground mt-1">
+                              Line chart showing completion rates over time
+                            </p>
+                          </div>
+                        </div>
+                        <div id="completion-chart-desc" className="sr-only">
+                          Line chart showing completion trends over the selected time period
+                        </div>
+                      </CardContent>
+                    </Card>
+
+                    <Card className="border-0">
+                      <CardHeader>
+                        <CardTitle className="text-lg">Activity Heatmap</CardTitle>
+                        <CardDescription>Learning activity by day of week</CardDescription>
+                      </CardHeader>
+                      <CardContent>
+                        <div 
+                          className="h-64 flex items-center justify-center border border-dashed border-muted rounded-lg"
+                          role="img"
+                          aria-describedby="heatmap-desc"
+                        >
+                          <div className="text-center">
+                            <Calendar className="h-12 w-12 mx-auto mb-2 text-muted-foreground" />
+                            <p className="text-muted-foreground">Activity Heatmap</p>
+                            <p className="text-sm text-muted-foreground mt-1">
+                              Visual representation of learning activity patterns
+                            </p>
+                          </div>
+                        </div>
+                        <div id="heatmap-desc" className="sr-only">
+                          Heatmap showing learning activity patterns by day and time
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </div>
+                </CardContent>
+              </Card>
+            </TabsContent>
+
+            {/* Individual Reports Tab */}
+            <TabsContent value="individual" role="tabpanel" id="individual-content" className="space-y-6">
+              <Card>
+                <CardHeader>
+                  <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+                    <div>
+                      <CardTitle>Individual Learner Reports</CardTitle>
+                      <CardDescription>Detailed progress reports for each learner</CardDescription>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Select value={selectedProgramme} onValueChange={setSelectedProgramme}>
+                        <SelectTrigger className="w-[200px]">
+                          <SelectValue placeholder="Filter by programme" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="all">All Programmes</SelectItem>
+                          <SelectItem value="leadership">Leadership Development</SelectItem>
+                          <SelectItem value="technical">Technical Skills</SelectItem>
+                          <SelectItem value="communication">Communication</SelectItem>
+                          <SelectItem value="project">Project Management</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <Button 
+                        variant="outline" 
+                        onClick={generateReport}
+                        disabled={loading}
+                        className="min-tap-44"
+                      >
+                        {loading ? (
+                          <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                        ) : (
+                          <FileText className="h-4 w-4 mr-2" />
+                        )}
+                        Generate Report
+                      </Button>
+                    </div>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="rounded-md border">
+                    <Table>
+                      <TableHeader className="sticky-header">
+                        <TableRow>
+                          <TableHead className="w-[200px]">Learner</TableHead>
+                          <TableHead className="w-[200px]">Programme</TableHead>
+                          <TableHead className="w-[100px]">Progress</TableHead>
+                          <TableHead className="w-[120px]">Last Access</TableHead>
+                          <TableHead className="w-[100px]">Status</TableHead>
+                          <TableHead className="w-[80px]">Actions</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {individualReports.map((learner) => (
+                          <TableRow key={learner.id} className="min-h-[48px]">
+                            <TableCell className="font-medium">{learner.name}</TableCell>
+                            <TableCell>{learner.programme}</TableCell>
+                            <TableCell>
+                              <div className="flex items-center gap-2">
+                                <Progress value={learner.progress} className="w-16" />
+                                <span className="text-sm">{learner.progress}%</span>
+                              </div>
+                            </TableCell>
+                            <TableCell className="text-sm text-muted-foreground">{learner.lastAccess}</TableCell>
+                            <TableCell>
+                              <Badge 
+                                variant={
+                                  learner.status === 'Completed' ? 'default' : 
+                                  learner.status === 'On Track' ? 'secondary' : 'destructive'
+                                }
+                                className="text-xs"
+                              >
+                                {learner.status}
+                              </Badge>
+                            </TableCell>
+                            <TableCell>
+                              <Button 
+                                variant="ghost" 
+                                size="sm" 
+                                className="min-tap-44"
+                                aria-label={`View detailed report for ${learner.name}`}
+                              >
+                                <Eye className="h-4 w-4" />
+                              </Button>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                </CardContent>
+              </Card>
+            </TabsContent>
+
+            {/* Cohort Reports Tab */}
+            <TabsContent value="cohort" role="tabpanel" id="cohort-content" className="space-y-6">
+              <Card>
+                <CardHeader>
+                  <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+                    <div>
+                      <CardTitle>Cohort Performance Reports</CardTitle>
+                      <CardDescription>Group-level analytics and performance metrics</CardDescription>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Select value={selectedCohort} onValueChange={setSelectedCohort}>
+                        <SelectTrigger className="w-[200px]">
+                          <SelectValue placeholder="Filter by cohort" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="all">All Cohorts</SelectItem>
+                          <SelectItem value="leadership-q4">Leadership Q4 2024</SelectItem>
+                          <SelectItem value="technical-a">Technical Skills Cohort A</SelectItem>
+                          <SelectItem value="communication">Communication Workshop</SelectItem>
+                          <SelectItem value="project-cert">Project Management Cert</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <Button 
+                        variant="outline" 
+                        onClick={() => handleExport('pdf')}
+                        disabled={exporting}
+                        className="min-tap-44"
+                      >
+                        {exporting ? (
+                          <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                        ) : (
+                          <FileText className="h-4 w-4 mr-2" />
+                        )}
+                        Export PDF
+                      </Button>
+                    </div>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-6">
+                    {/* Cohort Summary Cards */}
+                    {cohortData.map((cohort, index) => (
+                      <Card key={index} className="border-l-4 border-l-brand-primary">
+                        <CardContent className="pt-4">
+                          <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+                            <div>
+                              <h4 className="font-semibold">{cohort.cohort}</h4>
+                              <p className="text-sm text-muted-foreground">{cohort.enrolled} total learners enrolled</p>
+                            </div>
+                            
+                            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 lg:gap-6">
+                              <div className="text-center">
+                                <p className="text-2xl font-bold text-status-success">{cohort.completed}</p>
+                                <p className="text-xs text-muted-foreground">Completed</p>
+                              </div>
+                              <div className="text-center">
+                                <p className="text-2xl font-bold text-status-warn">{cohort.inProgress}</p>
+                                <p className="text-xs text-muted-foreground">In Progress</p>
+                              </div>
+                              <div className="text-center">
+                                <p className="text-2xl font-bold text-status-error">{cohort.notStarted}</p>
+                                <p className="text-xs text-muted-foreground">Not Started</p>
+                              </div>
+                              <div className="text-center">
+                                <p className="text-2xl font-bold text-brand-primary">{cohort.avgScore}/100</p>
+                                <p className="text-xs text-muted-foreground">Avg Score</p>
+                              </div>
+                            </div>
+                          </div>
+                          
+                          {/* Progress Bar */}
+                          <div className="mt-4">
+                            <div className="flex justify-between text-sm mb-2">
+                              <span>Completion Progress</span>
+                              <span>{Math.round((cohort.completed / cohort.enrolled) * 100)}%</span>
+                            </div>
+                            <div className="flex h-3 bg-muted rounded-full overflow-hidden">
+                              <div 
+                                className="bg-status-success" 
+                                style={{ width: `${(cohort.completed / cohort.enrolled) * 100}%` }}
+                                title={`Completed: ${cohort.completed}`}
+                              />
+                              <div 
+                                className="bg-status-warn" 
+                                style={{ width: `${(cohort.inProgress / cohort.enrolled) * 100}%` }}
+                                title={`In Progress: ${cohort.inProgress}`}
+                              />
+                              <div 
+                                className="bg-status-error" 
+                                style={{ width: `${(cohort.notStarted / cohort.enrolled) * 100}%` }}
+                                title={`Not Started: ${cohort.notStarted}`}
+                              />
+                            </div>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+const ProfileScreen: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('organisation');
+
+  return (
+    <div className="space-y-6">
+      {/* Profile Tabs */}
+      <Card>
+        <CardContent className="pt-6">
+          <Tabs 
+            value={activeTab} 
+            onValueChange={setActiveTab}
+            className="w-full"
+          >
+            <TabsList 
+              className="grid w-full grid-cols-4 mb-6" 
+              role="tablist"
+              aria-label="Profile navigation"
+            >
+              <TabsTrigger 
+                value="organisation" 
+                role="tab"
+                aria-controls="organisation-content"
+                className="flex items-center gap-2"
+              >
+                <Building2 className="h-4 w-4" />
+                <span className="hidden sm:inline">Organisation</span>
+                <span className="sm:hidden">Org</span>
+              </TabsTrigger>
+              <TabsTrigger 
+                value="billing" 
+                role="tab"
+                aria-controls="billing-content"
+                className="flex items-center gap-2"
+              >
+                <CreditCard className="h-4 w-4" />
+                Billing
+              </TabsTrigger>
+              <TabsTrigger 
+                value="roles" 
+                role="tab"
+                aria-controls="roles-content"
+                className="flex items-center gap-2"
+              >
+                <Shield className="h-4 w-4" />
+                Roles
+              </TabsTrigger>
+              <TabsTrigger 
+                value="testimonials" 
+                role="tab"
+                aria-controls="testimonials-content"
+                className="flex items-center gap-2"
+              >
+                <MessageSquare className="h-4 w-4" />
+                <span className="hidden sm:inline">Testimonials</span>
+                <span className="sm:hidden">Reviews</span>
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="organisation" role="tabpanel" id="organisation-content">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Organisation Profile</CardTitle>
+                  <CardDescription>Manage your organisation's profile and settings</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="text-center py-12 text-muted-foreground">
+                    <Building2 className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+                    <p>Organisation profile settings would be displayed here</p>
+                  </div>
+                </CardContent>
+              </Card>
+            </TabsContent>
+
+            <TabsContent value="billing" role="tabpanel" id="billing-content">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Billing & Subscriptions</CardTitle>
+                  <CardDescription>Manage your billing information and subscription plans</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="text-center py-12 text-muted-foreground">
+                    <CreditCard className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+                    <p>Billing and subscription management would be displayed here</p>
+                  </div>
+                </CardContent>
+              </Card>
+            </TabsContent>
+
+            <TabsContent value="roles" role="tabpanel" id="roles-content">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Roles & Permissions</CardTitle>
+                  <CardDescription>Manage user roles and access permissions</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="text-center py-12 text-muted-foreground">
+                    <Shield className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+                    <p>Roles and permissions management would be displayed here</p>
+                  </div>
+                </CardContent>
+              </Card>
+            </TabsContent>
+
+            <TabsContent value="testimonials" role="tabpanel" id="testimonials-content">
+              <TestimonialsTabContent />
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+// Main App Component
+export default function App() {
+  const [currentScreen, setCurrentScreen] = useState('home');
+  const [isDark, setIsDark] = useLocalStorage('darkMode', false);
+  const [prefersReducedMotion, setPrefersReducedMotion] = useLocalStorage('prefersReducedMotion', false);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [announcementsOpen, setAnnouncementsOpen] = useState(false);
+  const [screenFilters, setScreenFilters] = useState<any>({});
+
+  // Apply theme
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', isDark);
+  }, [isDark]);
+
+  // Handle navigation
+  const handleNavigate = useCallback((screen: string, filters?: any) => {
+    setCurrentScreen(screen);
+    
+    if (filters) {
+      setScreenFilters(prev => ({ ...prev, [screen]: filters }));
+    }
+    setSidebarOpen(false); // Close sidebar on mobile after navigation
+  }, []);
+
+  const handleNotificationToggle = () => {
+    setAnnouncementsOpen(!announcementsOpen);
+  };
+
+  const handleMarkAsRead = (id: string) => {
+    console.log(`Marked notification ${id} as read`);
+  };
+
+  const renderCurrentScreen = () => {
+    const filters = screenFilters[currentScreen];
+    
+    switch (currentScreen) {
+      case 'home':
+        return <HRHomeScreen onNavigate={handleNavigate} />;
+      case 'learners':
+        return <LearnersScreen filters={filters} />;
+      case 'reports':
+        return <ReportsScreen />;
+      case 'profile':
+        return <ProfileScreen />;
+      default:
+        return <HRHomeScreen onNavigate={handleNavigate} />;
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Skip to main content link for accessibility */}
+      <a 
+        href="#main-content" 
+        className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-primary text-primary-foreground p-2 rounded"
+      >
+        Skip to main content
+      </a>
+
+      {/* Top Navigation */}
+      <TopNav 
+        onMenuToggle={() => setSidebarOpen(!sidebarOpen)}
+        showMenuButton={true}
+        onNotificationToggle={handleNotificationToggle}
+        notificationCount={mockAnnouncements.length}
+      />
+
+      <div className="flex">
+        {/* Desktop Sidebar */}
+        <HRSidebar 
+          activeScreen={currentScreen}
+          onNavigate={handleNavigate}
+          className="hidden lg:flex"
+        />
+
+        {/* Mobile Sidebar Overlay */}
+        {sidebarOpen && (
+          <div className="fixed inset-0 z-50 lg:hidden">
+            <div 
+              className="absolute inset-0 bg-background/80 backdrop-blur-sm"
+              onClick={() => setSidebarOpen(false)}
+            />
+            <HRSidebar 
+              activeScreen={currentScreen}
+              onNavigate={handleNavigate}
+              className="relative z-10"
+            />
+          </div>
+        )}
+
+        {/* Main Content */}
+        <main 
+          id="main-content"
+          className={`flex-1 min-h-[calc(100vh-4rem)] p-4 lg:p-8 transition-all duration-300 ${announcementsOpen ? 'lg:mr-80' : ''}`}
+          role="main"
+          aria-label="HR Portal main content"
+        >
+          <div className="max-w-7xl mx-auto">
+            <BreadcrumbNav currentScreen={currentScreen} />
+            {renderCurrentScreen()}
+          </div>
+        </main>
+      </div>
+
+      {/* Announcements Panel */}
+      <AnnouncementsPanel 
+        isOpen={announcementsOpen}
+        onClose={() => setAnnouncementsOpen(false)}
+        announcements={mockAnnouncements}
+        onMarkAsRead={handleMarkAsRead}
+      />
+
+      {/* Chat Bot FAB */}
+      <ChatBot currentScreen={currentScreen} />
+
+      {/* Footer */}
+      <footer className="bg-muted border-t border-chrome-divider p-4 text-center text-sm text-muted-foreground">
+        <p>&copy; 2024 Knowledge Learning Centre. All rights reserved.</p>
+      </footer>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/assets/klc-logo.png b/src/assets/klc-logo.png
index 4d4b90e..7879330 100644
Binary files a/src/assets/klc-logo.png and b/src/assets/klc-logo.png differ
diff --git a/src/components/ActiveProgrammesTable.tsx b/src/components/ActiveProgrammesTable.tsx
new file mode 100644
index 0000000..456415d
--- /dev/null
+++ b/src/components/ActiveProgrammesTable.tsx
@@ -0,0 +1,379 @@
+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
+import { Badge } from './ui/badge';
+import { Input } from './ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from './ui/dialog';
+import { 
+  Search, 
+  Filter, 
+  Download, 
+  Users, 
+  Calendar,
+  BookOpen,
+  RefreshCw,
+  Eye,
+  UserPlus,
+  ChevronLeft,
+  ChevronRight
+} from 'lucide-react';
+
+interface Assignment {
+  startDate: Date;
+  endDate: Date;
+}
+
+interface Programme {
+  programmeId: string;
+  title: string;
+  status: 'Active' | 'Upcoming' | 'Completed';
+  coursesCount: number;
+  contentCount: number;
+  assignment: Assignment;
+  learnersAssigned: number;
+}
+
+interface ProgrammesTableProps {
+  programmes?: Programme[];
+  onViewProgramme?: (programmeId: string) => void;
+  onAssignLearners?: (programmeId: string) => void;
+  onDownloadTracker?: (programmeId: string) => void;
+}
+
+const mockProgrammes: Programme[] = [
+  {
+    programmeId: 'prog-001',
+    title: 'Leadership Development Program',
+    status: 'Active',
+    coursesCount: 8,
+    contentCount: 24,
+    assignment: {
+      startDate: new Date('2024-01-15'),
+      endDate: new Date('2024-06-30')
+    },
+    learnersAssigned: 45
+  },
+  {
+    programmeId: 'prog-002',
+    title: 'Technical Skills Bootcamp',
+    status: 'Active',
+    coursesCount: 12,
+    contentCount: 36,
+    assignment: {
+      startDate: new Date('2024-02-01'),
+      endDate: new Date('2024-08-31')
+    },
+    learnersAssigned: 38
+  },
+  {
+    programmeId: 'prog-003',
+    title: 'Communication Excellence',
+    status: 'Upcoming',
+    coursesCount: 6,
+    contentCount: 18,
+    assignment: {
+      startDate: new Date('2024-03-01'),
+      endDate: new Date('2024-05-31')
+    },
+    learnersAssigned: 28
+  },
+  {
+    programmeId: 'prog-004',
+    title: 'Project Management Certification',
+    status: 'Active',
+    coursesCount: 10,
+    contentCount: 30,
+    assignment: {
+      startDate: new Date('2024-01-01'),
+      endDate: new Date('2024-12-31')
+    },
+    learnersAssigned: 52
+  },
+  {
+    programmeId: 'prog-005',
+    title: 'Digital Marketing Mastery',
+    status: 'Completed',
+    coursesCount: 5,
+    contentCount: 15,
+    assignment: {
+      startDate: new Date('2023-09-01'),
+      endDate: new Date('2023-12-31')
+    },
+    learnersAssigned: 32
+  },
+  {
+    programmeId: 'prog-006',
+    title: 'Data Analytics Fundamentals',
+    status: 'Completed',
+    coursesCount: 7,
+    contentCount: 21,
+    assignment: {
+      startDate: new Date('2023-10-15'),
+      endDate: new Date('2024-01-15')
+    },
+    learnersAssigned: 29
+  }
+];
+
+export const ProgrammesTable: React.FC<ProgrammesTableProps> = ({
+  programmes = mockProgrammes,
+  onViewProgramme,
+  onAssignLearners,
+  onDownloadTracker
+}) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState('Active');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [isAssignModalOpen, setIsAssignModalOpen] = useState(false);
+  const [selectedProgramme, setSelectedProgramme] = useState<Programme | null>(null);
+  const [isExporting, setIsExporting] = useState(false);
+  
+  const itemsPerPage = 5;
+
+  const filteredProgrammes = programmes.filter(prog => {
+    const matchesSearch = prog.title.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesStatus = statusFilter === 'all' || prog.status === statusFilter;
+    return matchesSearch && matchesStatus;
+  });
+
+  // Pagination logic
+  const totalPages = Math.ceil(filteredProgrammes.length / itemsPerPage);
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const paginatedProgrammes = filteredProgrammes.slice(startIndex, endIndex);
+
+  // Reset to first page when filters change
+  React.useEffect(() => {
+    setCurrentPage(1);
+  }, [searchTerm, statusFilter]);
+
+  const formatDateRange = (assignment: Assignment) => {
+    const startDate = assignment.startDate.toLocaleDateString('en-AU', { 
+      day: '2-digit', 
+      month: 'short',
+      year: 'numeric'
+    });
+    const endDate = assignment.endDate.toLocaleDateString('en-AU', { 
+      day: '2-digit', 
+      month: 'short',
+      year: 'numeric'
+    });
+    return `${startDate} → ${endDate}`;
+  };
+
+  const handleViewProgramme = (programmeId: string) => {
+    onViewProgramme?.(programmeId);
+    console.log(`Viewing programme: ${programmeId}`);
+  };
+
+  const handleAssignLearners = (programme: Programme) => {
+    setSelectedProgramme(programme);
+    setIsAssignModalOpen(true);
+    onAssignLearners?.(programme.programmeId);
+  };
+
+  const handleDownloadTracker = async (programmeId: string) => {
+    setIsExporting(true);
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    setIsExporting(false);
+    onDownloadTracker?.(programmeId);
+    console.log(`Downloaded tracker for programme: ${programmeId}`);
+  };
+
+  const getStatusBadgeProps = (status: Programme['status']) => {
+    switch (status) {
+      case 'Active':
+        return { variant: 'default' as const, className: 'bg-status-success text-status-success-foreground' };
+      case 'Upcoming':
+        return { variant: 'secondary' as const, className: 'bg-status-warn text-status-warn-foreground' };
+      case 'Completed':
+        return { variant: 'outline' as const, className: 'bg-muted text-muted-foreground' };
+      default:
+        return { variant: 'secondary' as const };
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          <div>
+            <CardTitle>Programmes</CardTitle>
+            <CardDescription>Manage programme assignments and track progress</CardDescription>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search programmes..."
+                className="pl-10 w-[200px]"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                aria-label="Search programmes by title"
+              />
+            </div>
+            <Select value={statusFilter} onValueChange={setStatusFilter}>
+              <SelectTrigger className="w-[140px]">
+                <Filter className="h-4 w-4 mr-2" />
+                <SelectValue placeholder="Status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Status</SelectItem>
+                <SelectItem value="Active">Active</SelectItem>
+                <SelectItem value="Upcoming">Upcoming</SelectItem>
+                <SelectItem value="Completed">Completed</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="rounded-md border" style={{ maxWidth: '1200px' }}>
+          <Table>
+            <TableHeader className="sticky-header">
+              <TableRow>
+                <TableHead className="w-[300px]">Programme Title</TableHead>
+                <TableHead className="w-[150px]">Courses / Content</TableHead>
+                <TableHead className="w-[200px]">Start → End</TableHead>
+                <TableHead className="w-[120px]">Learners Assigned</TableHead>
+                <TableHead className="w-[200px]">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {paginatedProgrammes.map((programme) => (
+                <TableRow key={programme.programmeId} className="min-h-[44px]">
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium">{programme.title}</span>
+                      <Badge 
+                        {...getStatusBadgeProps(programme.status)}
+                        aria-label={`Programme status: ${programme.status}`}
+                      >
+                        {programme.status}
+                      </Badge>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-1 text-sm text-muted-foreground">
+                      <BookOpen className="h-4 w-4" />
+                      <span>{programme.coursesCount} • {programme.contentCount}</span>
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-sm">
+                    {formatDateRange(programme.assignment)}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-1">
+                      <Users className="h-4 w-4 text-muted-foreground" />
+                      <span className="font-medium">{programme.learnersAssigned}</span>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-1">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleViewProgramme(programme.programmeId)}
+                        className="min-tap-44"
+                        aria-label={`View programme details for ${programme.title}`}
+                      >
+                        <Eye className="h-4 w-4" />
+                        <span className="sr-only">View Programme</span>
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleAssignLearners(programme)}
+                        className="min-tap-44"
+                        aria-label={`Assign learners to ${programme.title}`}
+                      >
+                        <UserPlus className="h-4 w-4" />
+                        <span className="sr-only">Assign Learners</span>
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleDownloadTracker(programme.programmeId)}
+                        disabled={isExporting}
+                        className="min-tap-44"
+                        aria-label={`Download tracker for ${programme.title}`}
+                      >
+                        {isExporting ? (
+                          <RefreshCw className="h-4 w-4 animate-spin" />
+                        ) : (
+                          <Download className="h-4 w-4" />
+                        )}
+                        <span className="sr-only">Download Tracker</span>
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+        
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between mt-4">
+            <div className="text-sm text-muted-foreground">
+              Showing {startIndex + 1} to {Math.min(endIndex, filteredProgrammes.length)} of {filteredProgrammes.length} programmes
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
+                disabled={currentPage === 1}
+                className="min-tap-44"
+              >
+                <ChevronLeft className="h-4 w-4 mr-1" />
+                Previous
+              </Button>
+              <span className="text-sm text-muted-foreground">
+                Page {currentPage} of {totalPages}
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
+                disabled={currentPage === totalPages}
+                className="min-tap-44"
+              >
+                Next
+                <ChevronRight className="h-4 w-4 ml-1" />
+              </Button>
+            </div>
+          </div>
+        )}
+        
+        {filteredProgrammes.length === 0 && (
+          <div className="text-center py-8">
+            <p className="text-muted-foreground">No programmes found matching your criteria.</p>
+          </div>
+        )}
+
+        {/* Assignment Modal */}
+        <Dialog open={isAssignModalOpen} onOpenChange={setIsAssignModalOpen}>
+          <DialogContent className="sm:max-w-[600px]" role="dialog" aria-modal="true">
+            <DialogHeader>
+              <DialogTitle>Assign Learners to Programme</DialogTitle>
+              <DialogDescription>
+                {selectedProgramme && `Assign learners to "${selectedProgramme.title}"`}
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-4 py-4">
+              <div className="text-center py-8 text-muted-foreground">
+                <UserPlus className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+                <p>Assignment wizard would be displayed here</p>
+                <p className="text-sm mt-2">Including org/individual selection, dates, HR contacts, and participant upload</p>
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </CardContent>
+    </Card>
+  );
+};
\ No newline at end of file
diff --git a/src/components/CourseHRView.tsx b/src/components/CourseHRView.tsx
new file mode 100644
index 0000000..ea6dae0
--- /dev/null
+++ b/src/components/CourseHRView.tsx
@@ -0,0 +1,839 @@
+import React, { useState, useEffect } from 'react';
+import { Button } from './ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
+import { Badge } from './ui/badge';
+import { Input } from './ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from './ui/dialog';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from './ui/sheet';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table';
+import { Progress } from './ui/progress';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './ui/accordion';
+import { 
+  ArrowLeft, 
+  Download, 
+  BarChart3, 
+  MoreHorizontal,
+  Users,
+  Clock,
+  BookOpen,
+  Award,
+  Search,
+  Eye,
+  Mail,
+  FileText,
+  Play,
+  RefreshCw,
+  ExternalLink,
+  CheckCircle,
+  AlertCircle,
+  XCircle,
+  Video,
+  FileQuestion,
+  Activity,
+  Building2
+} from 'lucide-react';
+
+// Types
+interface Course {
+  id: string;
+  title: string;
+  status: 'Published' | 'Draft' | 'Archived';
+  code: string;
+  owner: string;
+  version: number;
+  duration: string;
+  description: string;
+  objectives: string[];
+  tags: string[];
+  modules: CourseModule[];
+  linkedProgrammes: LinkedProgramme[];
+}
+
+interface CourseModule {
+  id: string;
+  title: string;
+  lessons: CourseLesson[];
+}
+
+interface CourseLesson {
+  id: string;
+  title: string;
+  type: 'video' | 'quiz' | 'read' | 'assignment';
+  eta: string;
+  dueDate?: string;
+  status?: 'Not Started' | 'In Progress' | 'Completed';
+}
+
+interface LinkedProgramme {
+  id: string;
+  title: string;
+}
+
+interface CourseAssignment {
+  startDate: string;
+  endDate: string;
+  orgId: string;
+  orgName: string;
+}
+
+interface CourseCounts {
+  learners: number;
+  avgProgress: number;
+  modules: number;
+  lessons: number;
+}
+
+interface CourseLearner {
+  id: string;
+  name: string;
+  email: string;
+  progressPct: number;
+  currentLesson: {
+    id: string;
+    title: string;
+    status: 'Not Started' | 'In-Progress' | 'Completed';
+  };
+  lastActivity: string;
+  attempts?: number;
+  avgScore?: number;
+}
+
+interface CourseHRViewProps {
+  courseId: string;
+  onBack: () => void;
+  onAssignLearners: (courseId: string) => void;
+  onDownloadTracker: (courseId: string) => void;
+  onOpenAnalytics: (courseId: string) => void;
+}
+
+// Mock data
+const mockCourse: Course = {
+  id: 'crs_456',
+  title: 'Strategic Thinking and Decision Making',
+  status: 'Published',
+  code: 'STDM-2024',
+  owner: 'Prof. Michael Chen',
+  version: 1,
+  duration: '6 hours',
+  description: 'This course develops strategic thinking capabilities and decision-making frameworks for leaders at all levels. Participants will learn to analyze complex situations, evaluate options, and make informed decisions.',
+  objectives: [
+    'Apply strategic thinking frameworks to business challenges',
+    'Develop systematic approaches to decision making',
+    'Evaluate risks and opportunities effectively',
+    'Create actionable strategic plans'
+  ],
+  tags: ['Strategy', 'Leadership', 'Decision Making', 'Critical Thinking'],
+  modules: [
+    {
+      id: 'm1',
+      title: 'Foundations of Strategic Thinking',
+      lessons: [
+        { id: 'l1', title: 'Introduction to Strategic Thinking', type: 'video', eta: '15 mins', status: 'Completed' },
+        { id: 'l2', title: 'Strategic Frameworks Overview', type: 'read', eta: '20 mins', status: 'Completed' },
+        { id: 'l3', title: 'Knowledge Check', type: 'quiz', eta: '10 mins', status: 'In Progress' }
+      ]
+    },
+    {
+      id: 'm2',
+      title: 'Decision Making Models',
+      lessons: [
+        { id: 'l4', title: 'Rational Decision Making', type: 'video', eta: '25 mins', status: 'Not Started' },
+        { id: 'l5', title: 'Intuitive vs Analytical Approaches', type: 'read', eta: '15 mins', status: 'Not Started' },
+        { id: 'l6', title: 'Case Study Analysis', type: 'assignment', eta: '45 mins', dueDate: '2024-01-25', status: 'Not Started' }
+      ]
+    },
+    {
+      id: 'm3',
+      title: 'Risk Assessment and Management',
+      lessons: [
+        { id: 'l7', title: 'Risk Identification Techniques', type: 'video', eta: '20 mins', status: 'Not Started' },
+        { id: 'l8', title: 'Risk Matrix and Evaluation', type: 'read', eta: '25 mins', status: 'Not Started' },
+        { id: 'l9', title: 'Final Assessment', type: 'quiz', eta: '30 mins', dueDate: '2024-01-30', status: 'Not Started' }
+      ]
+    }
+  ],
+  linkedProgrammes: [
+    { id: 'prg_123', title: 'Executive Leadership Development Programme' },
+    { id: 'prg_124', title: 'Management Excellence Programme' }
+  ]
+};
+
+const mockAssignment: CourseAssignment = {
+  startDate: '2024-01-01',
+  endDate: '2024-02-15',
+  orgId: 'org_123',
+  orgName: 'Tech Solutions Pvt Ltd'
+};
+
+const mockCounts: CourseCounts = {
+  learners: 15,
+  avgProgress: 58,
+  modules: 3,
+  lessons: 9
+};
+
+const mockLearners: CourseLearner[] = [
+  {
+    id: 'l1',
+    name: 'Sarah Chen',
+    email: 'sarah.chen@company.com',
+    progressPct: 75,
+    currentLesson: { id: 'l3', title: 'Knowledge Check', status: 'In-Progress' },
+    lastActivity: '2 hours ago',
+    attempts: 2,
+    avgScore: 87
+  },
+  {
+    id: 'l2',
+    name: 'Michael Rodriguez',
+    email: 'michael.r@company.com',
+    progressPct: 45,
+    currentLesson: { id: 'l2', title: 'Strategic Frameworks Overview', status: 'In-Progress' },
+    lastActivity: '1 day ago',
+    attempts: 1,
+    avgScore: 92
+  },
+  {
+    id: 'l3',
+    name: 'Emma Thompson',
+    email: 'emma.thompson@company.com',
+    progressPct: 89,
+    currentLesson: { id: 'l6', title: 'Case Study Analysis', status: 'In-Progress' },
+    lastActivity: '3 hours ago',
+    attempts: 3,
+    avgScore: 94
+  },
+  {
+    id: 'l4',
+    name: 'David Kim',
+    email: 'david.kim@company.com',
+    progressPct: 23,
+    currentLesson: { id: 'l1', title: 'Introduction to Strategic Thinking', status: 'In-Progress' },
+    lastActivity: '5 hours ago',
+    attempts: 1,
+    avgScore: 78
+  }
+];
+
+export const CourseHRView: React.FC<CourseHRViewProps> = ({
+  courseId,
+  onBack,
+  onAssignLearners,
+  onDownloadTracker,
+  onOpenAnalytics
+}) => {
+  const [activeTab, setActiveTab] = useState('overview');
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [selectedLearner, setSelectedLearner] = useState<CourseLearner | null>(null);
+  const [showLearnerDrawer, setShowLearnerDrawer] = useState(false);
+  const [exporting, setExporting] = useState(false);
+
+  // Simulate loading
+  useEffect(() => {
+    const timer = setTimeout(() => setLoading(false), 800);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const getTypeIcon = (type: string) => {
+    switch (type) {
+      case 'video': return <Video className="h-4 w-4" />;
+      case 'quiz': return <FileQuestion className="h-4 w-4" />;
+      case 'read': return <FileText className="h-4 w-4" />;
+      case 'assignment': return <Activity className="h-4 w-4" />;
+      default: return <BookOpen className="h-4 w-4" />;
+    }
+  };
+
+  const getStatusBadge = (status?: string) => {
+    switch (status) {
+      case 'Completed':
+        return <Badge variant="default" className="bg-status-success text-white"><CheckCircle className="h-3 w-3 mr-1" />Completed</Badge>;
+      case 'In Progress':
+        return <Badge variant="secondary" className="bg-status-warn text-black"><AlertCircle className="h-3 w-3 mr-1" />In Progress</Badge>;
+      case 'Not Started':
+        return <Badge variant="outline"><XCircle className="h-3 w-3 mr-1" />Not Started</Badge>;
+      default:
+        return null;
+    }
+  };
+
+  const filteredLearners = mockLearners.filter(learner => {
+    const matchesSearch = learner.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                         learner.email.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesStatus = statusFilter === 'all' || learner.currentLesson.status === statusFilter;
+    return matchesSearch && matchesStatus;
+  });
+
+  const handleViewLearner = (learner: CourseLearner) => {
+    setSelectedLearner(learner);
+    setShowLearnerDrawer(true);
+  };
+
+  const handleExport = async (format: 'excel' | 'csv' | 'pdf') => {
+    setExporting(true);
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    setExporting(false);
+    console.log(`Exported course tracker as ${format.toUpperCase()}`);
+  };
+
+  if (loading) {
+    return (
+      <div className="space-y-6 animate-pulse">
+        <div className="h-16 bg-muted rounded-lg"></div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          {[...Array(4)].map((_, i) => (
+            <div key={i} className="h-24 bg-muted rounded-lg"></div>
+          ))}
+        </div>
+        <div className="h-96 bg-muted rounded-lg"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <Card className="sticky top-0 z-20 bg-background border-b shadow-sm">
+        <CardContent className="pt-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <Button 
+                variant="ghost" 
+                size="icon" 
+                onClick={onBack}
+                className="min-tap-44"
+                aria-label="Go back to courses list"
+              >
+                <ArrowLeft className="h-4 w-4" />
+              </Button>
+              <div>
+                <div className="flex items-center gap-3 mb-1">
+                  <h1 className="text-2xl font-bold">{mockCourse.title}</h1>
+                  <Badge 
+                    variant={mockCourse.status === 'Published' ? 'default' : 'secondary'}
+                    className={mockCourse.status === 'Published' ? 'bg-status-success' : ''}
+                  >
+                    {mockCourse.status}
+                  </Badge>
+                </div>
+                <p className="text-muted-foreground">
+                  {mockCourse.code} • {mockCourse.owner} • Version {mockCourse.version} • Duration: {mockCourse.duration}
+                </p>
+              </div>
+            </div>
+            
+            <div className="flex items-center gap-2">
+              <Button 
+                onClick={() => onAssignLearners(courseId)}
+                className="min-tap-44"
+              >
+                <Users className="h-4 w-4 mr-2" />
+                Assign Learners
+              </Button>
+              <Button 
+                variant="outline"
+                onClick={() => onDownloadTracker(courseId)}
+                disabled={exporting}
+                className="min-tap-44"
+              >
+                {exporting ? (
+                  <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                ) : (
+                  <Download className="h-4 w-4 mr-2" />
+                )}
+                Download Tracker
+              </Button>
+              <Button 
+                variant="outline"
+                onClick={() => onOpenAnalytics(courseId)}
+                className="min-tap-44"
+              >
+                <BarChart3 className="h-4 w-4 mr-2" />
+                Open Analytics
+              </Button>
+              <Dialog>
+                <DialogTrigger asChild>
+                  <Button 
+                    variant="ghost" 
+                    size="icon" 
+                    className="min-tap-44"
+                    aria-label="More actions"
+                  >
+                    <MoreHorizontal className="h-4 w-4" />
+                  </Button>
+                </DialogTrigger>
+                <DialogContent className="sm:max-w-[425px]">
+                  <DialogHeader>
+                    <DialogTitle>Course Actions</DialogTitle>
+                    <DialogDescription>Additional actions for this course</DialogDescription>
+                  </DialogHeader>
+                  <div className="space-y-2">
+                    <Button variant="outline" className="w-full justify-start">
+                      <FileText className="h-4 w-4 mr-2" />
+                      View Syllabus
+                    </Button>
+                    <Button variant="outline" className="w-full justify-start">
+                      <ExternalLink className="h-4 w-4 mr-2" />
+                      Audit Trail
+                    </Button>
+                  </div>
+                </DialogContent>
+              </Dialog>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Summary Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <Card>
+          <CardContent className="pt-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">Assignment Window</p>
+                <p className="font-semibold">{new Date(mockAssignment.startDate).toLocaleDateString()} → {new Date(mockAssignment.endDate).toLocaleDateString()}</p>
+                <p className="text-xs text-muted-foreground">{mockAssignment.orgName}</p>
+              </div>
+              <Clock className="h-8 w-8 text-brand-primary" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="pt-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">Enrolled Learners</p>
+                <p className="text-2xl font-bold">{mockCounts.learners}</p>
+                <Button variant="link" className="p-0 h-auto text-xs">Manage</Button>
+              </div>
+              <Users className="h-8 w-8 text-brand-primary" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="pt-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">Avg Progress</p>
+                <p className="text-2xl font-bold">{mockCounts.avgProgress}%</p>
+                <Progress value={mockCounts.avgProgress} className="w-16 mt-1" />
+              </div>
+              <Award className="h-8 w-8 text-brand-primary" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="pt-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">Course Structure</p>
+                <div className="flex gap-2 text-sm">
+                  <span>{mockCounts.modules} Modules</span>
+                  <span>•</span>
+                  <span>{mockCounts.lessons} Lessons</span>
+                </div>
+                <p className="text-xs text-muted-foreground">Duration: {mockCourse.duration}</p>
+              </div>
+              <BookOpen className="h-8 w-8 text-brand-primary" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Tabs */}
+      <Card>
+        <CardContent className="pt-6">
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+            <TabsList className="grid w-full grid-cols-5">
+              <TabsTrigger value="overview">Overview</TabsTrigger>
+              <TabsTrigger value="syllabus">Syllabus</TabsTrigger>
+              <TabsTrigger value="learners">Learners</TabsTrigger>
+              <TabsTrigger value="reports">Reports</TabsTrigger>
+              <TabsTrigger value="activity">Activity</TabsTrigger>
+            </TabsList>
+
+            {/* Overview Tab */}
+            <TabsContent value="overview" className="space-y-6 mt-6">
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Course Summary</CardTitle>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div>
+                      <h4 className="font-medium mb-2">Description</h4>
+                      <p className="text-sm text-muted-foreground">{mockCourse.description}</p>
+                    </div>
+                    <div>
+                      <h4 className="font-medium mb-2">Learning Objectives</h4>
+                      <ul className="text-sm text-muted-foreground space-y-1">
+                        {mockCourse.objectives.map((objective, index) => (
+                          <li key={index} className="flex items-start gap-2">
+                            <CheckCircle className="h-4 w-4 text-status-success mt-0.5 flex-shrink-0" />
+                            {objective}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                    <div>
+                      <h4 className="font-medium mb-2">Tags</h4>
+                      <div className="flex flex-wrap gap-2">
+                        {mockCourse.tags.map((tag, index) => (
+                          <Badge key={index} variant="outline">{tag}</Badge>
+                        ))}
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Linked Resources</CardTitle>
+                    <CardDescription>Read-only view of course resources</CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div>
+                      <h4 className="font-medium mb-2">Associated Programmes</h4>
+                      {mockCourse.linkedProgrammes.length > 0 ? (
+                        <div className="space-y-2">
+                          <p className="text-sm text-muted-foreground mb-2">
+                            Appears in {mockCourse.linkedProgrammes.length} programmes:
+                          </p>
+                          <div className="space-y-1">
+                            {mockCourse.linkedProgrammes.map((programme, index) => (
+                              <Button 
+                                key={index} 
+                                variant="outline" 
+                                size="sm" 
+                                className="w-full justify-start h-auto p-2"
+                              >
+                                <Building2 className="h-4 w-4 mr-2" />
+                                {programme.title}
+                              </Button>
+                            ))}
+                          </div>
+                        </div>
+                      ) : (
+                        <p className="text-sm text-muted-foreground">No linked programmes</p>
+                      )}
+                    </div>
+
+                    <div>
+                      <h4 className="font-medium mb-2">Course Metadata</h4>
+                      <div className="space-y-2 text-sm">
+                        <div className="flex justify-between">
+                          <span className="text-muted-foreground">Total Duration:</span>
+                          <span>{mockCourse.duration}</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span className="text-muted-foreground">Modules:</span>
+                          <span>{mockCourse.modules.length}</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span className="text-muted-foreground">Total Lessons:</span>
+                          <span>{mockCourse.modules.reduce((acc, module) => acc + module.lessons.length, 0)}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+            </TabsContent>
+
+            {/* Syllabus Tab */}
+            <TabsContent value="syllabus" className="space-y-6 mt-6">
+              <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h3 className="text-lg font-semibold">Course Syllabus</h3>
+                    <p className="text-muted-foreground">Read-only view of the course structure and lessons</p>
+                  </div>
+                  <Badge variant="outline">Read Only</Badge>
+                </div>
+
+                <Accordion type="single" collapsible className="space-y-2">
+                  {mockCourse.modules.map((module, index) => (
+                    <AccordionItem key={index} value={`module-${index}`} className="border rounded-lg px-4">
+                      <AccordionTrigger className="hover:no-underline">
+                        <div className="flex items-center gap-3">
+                          <Badge variant="outline">Module {index + 1}</Badge>
+                          <span className="font-medium">{module.title}</span>
+                          <span className="text-muted-foreground">({module.lessons.length} lessons)</span>
+                        </div>
+                      </AccordionTrigger>
+                      <AccordionContent className="space-y-3 pb-4">
+                        {module.lessons.map((lesson, lessonIndex) => (
+                          <div key={lessonIndex} className="flex items-center justify-between p-3 bg-muted/30 rounded-lg">
+                            <div className="flex items-center gap-3">
+                              {getTypeIcon(lesson.type)}
+                              <div>
+                                <p className="font-medium">{lesson.title}</p>
+                                <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                                  <span className="flex items-center gap-1">
+                                    <Clock className="h-3 w-3" />
+                                    {lesson.eta}
+                                  </span>
+                                  {lesson.dueDate && (
+                                    <span className="flex items-center gap-1">
+                                      <AlertCircle className="h-3 w-3" />
+                                      Due: {lesson.dueDate}
+                                    </span>
+                                  )}
+                                  <Badge variant="outline" className="text-xs capitalize">
+                                    {lesson.type}
+                                  </Badge>
+                                </div>
+                              </div>
+                            </div>
+                            <Button variant="outline" size="sm">
+                              <Eye className="h-4 w-4 mr-2" />
+                              Open
+                            </Button>
+                          </div>
+                        ))}
+                      </AccordionContent>
+                    </AccordionItem>
+                  ))}
+                </Accordion>
+              </div>
+            </TabsContent>
+
+            {/* Learners Tab */}
+            <TabsContent value="learners" className="space-y-6 mt-6">
+              <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
+                <div>
+                  <h3 className="text-lg font-semibold">Learner Progress</h3>
+                  <p className="text-muted-foreground">Track individual progress through the course</p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button 
+                    variant="outline"
+                    onClick={() => handleExport('excel')}
+                    disabled={exporting}
+                    className="min-tap-44"
+                  >
+                    {exporting ? (
+                      <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                    ) : (
+                      <Download className="h-4 w-4 mr-2" />
+                    )}
+                    Export Data
+                  </Button>
+                </div>
+              </div>
+
+              {/* Filters */}
+              <div className="flex flex-wrap gap-4 items-center">
+                <div className="relative flex-1 min-w-[200px] max-w-md">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    placeholder="Search learners..."
+                    className="pl-10"
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                  />
+                </div>
+                <Select value={statusFilter} onValueChange={setStatusFilter}>
+                  <SelectTrigger className="w-[150px]">
+                    <SelectValue placeholder="Status" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All Status</SelectItem>
+                    <SelectItem value="Not Started">Not Started</SelectItem>
+                    <SelectItem value="In-Progress">In Progress</SelectItem>
+                    <SelectItem value="Completed">Completed</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* Learners Table */}
+              <div className="rounded-md border">
+                <Table>
+                  <TableHeader className="sticky-header">
+                    <TableRow>
+                      <TableHead className="w-[200px]">Learner</TableHead>
+                      <TableHead className="w-[100px]">Progress</TableHead>
+                      <TableHead className="w-[200px]">Current Lesson</TableHead>
+                      <TableHead className="w-[120px]">Last Activity</TableHead>
+                      <TableHead className="w-[100px]">Performance</TableHead>
+                      <TableHead className="w-[80px]">Actions</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {filteredLearners.map((learner) => (
+                      <TableRow key={learner.id} className="min-h-[48px]">
+                        <TableCell>
+                          <div>
+                            <p className="font-medium">{learner.name}</p>
+                            <p className="text-sm text-muted-foreground">{learner.email}</p>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <div className="space-y-1">
+                            <Progress value={learner.progressPct} className="w-16" />
+                            <span className="text-sm">{learner.progressPct}%</span>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            {getTypeIcon('video')}
+                            <div>
+                              <p className="font-medium text-sm">{learner.currentLesson.title}</p>
+                              {getStatusBadge(learner.currentLesson.status)}
+                            </div>
+                          </div>
+                        </TableCell>
+                        <TableCell className="text-sm text-muted-foreground">
+                          {learner.lastActivity}
+                        </TableCell>
+                        <TableCell>
+                          <div className="text-sm">
+                            {learner.avgScore && (
+                              <div>
+                                <span className="font-medium">{learner.avgScore}%</span>
+                                <p className="text-xs text-muted-foreground">
+                                  {learner.attempts} attempt{learner.attempts !== 1 ? 's' : ''}
+                                </p>
+                              </div>
+                            )}
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex gap-1">
+                            <Button 
+                              variant="ghost" 
+                              size="sm"
+                              onClick={() => handleViewLearner(learner)}
+                              className="min-tap-44"
+                              aria-label={`View details for ${learner.name}`}
+                            >
+                              <Eye className="h-4 w-4" />
+                            </Button>
+                            <Button 
+                              variant="ghost" 
+                              size="sm"
+                              className="min-tap-44"
+                              aria-label={`Send reminder to ${learner.name}`}
+                            >
+                              <Mail className="h-4 w-4" />
+                            </Button>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </TabsContent>
+
+            {/* Reports Tab */}
+            <TabsContent value="reports" className="space-y-6 mt-6">
+              <div className="text-center py-12 text-muted-foreground">
+                <BarChart3 className="h-12 w-12 mx-auto mb-4" />
+                <h3 className="text-lg font-semibold mb-2">Course Reports</h3>
+                <p>Detailed analytics and reporting for this course would be displayed here</p>
+              </div>
+            </TabsContent>
+
+            {/* Activity Tab */}
+            <TabsContent value="activity" className="space-y-6 mt-6">
+              <div className="text-center py-12 text-muted-foreground">
+                <Activity className="h-12 w-12 mx-auto mb-4" />
+                <h3 className="text-lg font-semibold mb-2">Activity Log</h3>
+                <p>Course activity audit trail would be displayed here</p>
+              </div>
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+
+      {/* Learner Details Drawer */}
+      <Sheet open={showLearnerDrawer} onOpenChange={setShowLearnerDrawer}>
+        <SheetContent className="w-[480px] sm:w-[540px]">
+          <SheetHeader>
+            <SheetTitle>{selectedLearner?.name}</SheetTitle>
+            <SheetDescription>Course progress and performance details</SheetDescription>
+          </SheetHeader>
+          {selectedLearner && (
+            <div className="space-y-6 mt-6">
+              <div>
+                <h4 className="font-medium mb-2">Course Progress</h4>
+                <div className="space-y-2">
+                  <div className="flex justify-between items-center">
+                    <span className="text-muted-foreground">Overall Progress:</span>
+                    <span className="font-medium">{selectedLearner.progressPct}%</span>
+                  </div>
+                  <Progress value={selectedLearner.progressPct} className="w-full" />
+                </div>
+              </div>
+
+              <div>
+                <h4 className="font-medium mb-2">Lesson Checklist</h4>
+                <div className="space-y-3">
+                  {mockCourse.modules.flatMap(module => 
+                    module.lessons.map((lesson, index) => (
+                      <div key={index} className="flex items-center gap-3 p-2 rounded-lg bg-muted/30">
+                        <div className={`w-4 h-4 rounded-full border-2 ${
+                          lesson.status === 'Completed' ? 'bg-status-success border-status-success' : 
+                          lesson.status === 'In Progress' ? 'border-brand-primary bg-brand-primary' :
+                          'border-muted'
+                        }`}>
+                          {lesson.status === 'Completed' && <CheckCircle className="w-4 h-4 text-white" />}
+                        </div>
+                        <div className="flex-1">
+                          <div className="flex items-center gap-2">
+                            {getTypeIcon(lesson.type)}
+                            <span className={`text-sm ${
+                              lesson.id === selectedLearner.currentLesson.id ? 'font-medium' : 'text-muted-foreground'
+                            }`}>
+                              {lesson.title}
+                            </span>
+                          </div>
+                          <p className="text-xs text-muted-foreground">{lesson.eta}</p>
+                        </div>
+                      </div>
+                    ))
+                  )}
+                </div>
+              </div>
+
+              {selectedLearner.avgScore && (
+                <div>
+                  <h4 className="font-medium mb-2">Performance Summary</h4>
+                  <div className="space-y-2 text-sm">
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">Average Score:</span>
+                      <span className="font-medium">{selectedLearner.avgScore}%</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">Quiz Attempts:</span>
+                      <span>{selectedLearner.attempts}</span>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              <div className="flex gap-2">
+                <Button variant="outline" className="flex-1">
+                  <Eye className="h-4 w-4 mr-2" />
+                  View Detailed Report
+                </Button>
+                <Button variant="outline" className="flex-1">
+                  <Mail className="h-4 w-4 mr-2" />
+                  Send Reminder
+                </Button>
+              </div>
+            </div>
+          )}
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/DiscussionForumFeed.tsx b/src/components/DiscussionForumFeed.tsx
new file mode 100644
index 0000000..bdc21e7
--- /dev/null
+++ b/src/components/DiscussionForumFeed.tsx
@@ -0,0 +1,226 @@
+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
+import { Badge } from './ui/badge';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { 
+  MessageSquare, 
+  Eye, 
+  Check,
+  Filter,
+  Users,
+  Clock
+} from 'lucide-react';
+
+interface ForumThread {
+  threadId: string;
+  title: string;
+  programmeId: string;
+  programmeName: string;
+  lastReplyAt: Date;
+  lastAuthor: string;
+  unread: boolean;
+  href: string;
+  replyCount?: number;
+  participantCount?: number;
+}
+
+interface DiscussionForumFeedProps {
+  forumFeed?: ForumThread[];
+  onOpenThread?: (threadId: string) => void;
+  onMarkAsRead?: (threadId: string) => void;
+}
+
+const mockForumFeed: ForumThread[] = [
+  {
+    threadId: 'thread-001',
+    title: 'Leadership in Remote Teams - Best Practices Discussion',
+    programmeId: 'prog-001',
+    programmeName: 'Leadership Development',
+    lastReplyAt: new Date('2024-12-27T15:30:00'),
+    lastAuthor: 'Sarah Chen',
+    unread: true,
+    href: '/discussions/leadership-remote-teams',
+    replyCount: 12,
+    participantCount: 8
+  },
+  {
+    threadId: 'thread-002',
+    title: 'JavaScript ES6 Features - Questions and Examples',
+    programmeId: 'prog-002',
+    programmeName: 'Technical Skills Bootcamp',
+    lastReplyAt: new Date('2024-12-27T14:15:00'),
+    lastAuthor: 'David Kim',
+    unread: true,
+    href: '/discussions/javascript-es6',
+    replyCount: 18,
+    participantCount: 15
+  },
+  {
+    threadId: 'thread-003',
+    title: 'Effective Presentation Techniques - Share Your Tips',
+    programmeId: 'prog-003',
+    programmeName: 'Communication Excellence',
+    lastReplyAt: new Date('2024-12-27T11:45:00'),
+    lastAuthor: 'Emma Thompson',
+    unread: false,
+    href: '/discussions/presentation-techniques',
+    replyCount: 7,
+    participantCount: 6
+  },
+  {
+    threadId: 'thread-004',
+    title: 'Agile vs Waterfall - When to Use Each Methodology',
+    programmeId: 'prog-004',
+    programmeName: 'Project Management Certification',
+    lastReplyAt: new Date('2024-12-27T09:20:00'),
+    lastAuthor: 'Michael Rodriguez',
+    unread: false,
+    href: '/discussions/agile-vs-waterfall',
+    replyCount: 25,
+    participantCount: 19
+  },
+  {
+    threadId: 'thread-005',
+    title: 'Building Trust in Virtual Teams',
+    programmeId: 'prog-001',
+    programmeName: 'Leadership Development',
+    lastReplyAt: new Date('2024-12-26T16:30:00'),
+    lastAuthor: 'Lisa Wang',
+    unread: true,
+    href: '/discussions/trust-virtual-teams',
+    replyCount: 9,
+    participantCount: 7
+  },
+  {
+    threadId: 'thread-006',
+    title: 'Code Review Best Practices - Peer Learning',
+    programmeId: 'prog-002',
+    programmeName: 'Technical Skills Bootcamp',
+    lastReplyAt: new Date('2024-12-26T14:10:00'),
+    lastAuthor: 'James Wilson',
+    unread: false,
+    href: '/discussions/code-review-practices',
+    replyCount: 14,
+    participantCount: 11
+  }
+];
+
+const programmeColors = {
+  'prog-001': '#04045B',
+  'prog-002': '#F8C301',
+  'prog-003': '#21a36a',
+  'prog-004': '#89002D'
+};
+
+export const DiscussionForumFeed: React.FC<DiscussionForumFeedProps> = ({
+  forumFeed = mockForumFeed,
+  onOpenThread,
+  onMarkAsRead
+}) => {
+  // Only show unread threads by default to make it concise
+  const unreadThreads = forumFeed.filter(thread => thread.unread).slice(0, 5);
+
+  const formatTimeAgo = (date: Date) => {
+    const now = new Date();
+    const diffHours = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60));
+    
+    if (diffHours < 1) {
+      return 'Just now';
+    } else if (diffHours < 24) {
+      return `${diffHours}h ago`;
+    } else {
+      const diffDays = Math.floor(diffHours / 24);
+      return `${diffDays}d ago`;
+    }
+  };
+
+  const handleOpenThread = (thread: ForumThread) => {
+    onOpenThread?.(thread.threadId);
+    console.log(`Opening thread: ${thread.title}`);
+  };
+
+  const handleMarkAsRead = (threadId: string, event: React.MouseEvent) => {
+    event.stopPropagation();
+    onMarkAsRead?.(threadId);
+    console.log(`Marked thread as read: ${threadId}`);
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="flex items-center gap-2">
+              <MessageSquare className="h-5 w-5" />
+              Discussion Forums
+              {unreadThreads.length > 0 && (
+                <Badge variant="destructive" className="text-xs">
+                  {unreadThreads.length} new
+                </Badge>
+              )}
+            </CardTitle>
+            <CardDescription>Recent activity from programme discussions</CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      
+      <CardContent>
+        <div className="space-y-2">
+          {unreadThreads.length === 0 ? (
+            <div className="text-center py-6 text-muted-foreground">
+              <MessageSquare className="h-8 w-8 mx-auto mb-2 text-muted-foreground" />
+              <p className="text-sm">No new discussion activity</p>
+            </div>
+          ) : (
+            unreadThreads.map((thread) => (
+              <div
+                key={thread.threadId}
+                className="flex items-center justify-between p-3 border rounded-lg cursor-pointer transition-colors min-tap-44 bg-blue-50 border-blue-200 hover:bg-blue-100"
+                onClick={() => handleOpenThread(thread)}
+                role="button"
+                tabIndex={0}
+                aria-label={`Open discussion: ${thread.title}`}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleOpenThread(thread);
+                  }
+                }}
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    <h4 className="font-medium text-sm text-blue-900 truncate">
+                      {thread.title}
+                    </h4>
+                    <Badge variant="secondary" className="text-xs bg-blue-100 text-blue-800 flex-shrink-0">
+                      New
+                    </Badge>
+                  </div>
+                  
+                  <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                    <span className="truncate">{thread.programmeName}</span>
+                    <span>•</span>
+                    <span>{formatTimeAgo(thread.lastReplyAt)}</span>
+                    <span>•</span>
+                    <span>by {thread.lastAuthor}</span>
+                  </div>
+                </div>
+                
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={(e) => handleMarkAsRead(thread.threadId, e)}
+                  className="min-tap-44 ml-2"
+                  aria-label={`Mark "${thread.title}" as read`}
+                >
+                  <Check className="h-4 w-4" />
+                </Button>
+              </div>
+            ))
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
\ No newline at end of file
diff --git a/src/components/LearningAnalyticsTable.tsx b/src/components/LearningAnalyticsTable.tsx
new file mode 100644
index 0000000..f5b8358
--- /dev/null
+++ b/src/components/LearningAnalyticsTable.tsx
@@ -0,0 +1,502 @@
+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
+import { Badge } from './ui/badge';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table';
+import { Progress } from './ui/progress';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from './ui/sheet';
+import { 
+  Eye, 
+  Send, 
+  BarChart3,
+  User,
+  BookOpen,
+  Clock,
+  TrendingUp
+} from 'lucide-react';
+
+interface CurrentItem {
+  type: 'course' | 'content';
+  id: string;
+  title: string;
+  status: 'Not Started' | 'In-Progress' | 'Completed';
+}
+
+interface NextItem {
+  type: 'course' | 'content';
+  id: string;
+  title: string;
+}
+
+interface LearnerAnalytics {
+  learnerId: string;
+  learnerName: string;
+  learnerEmail: string;
+  currentItem?: CurrentItem;
+  progressPct: number;
+  nextItem?: NextItem;
+  lastActivity: Date;
+}
+
+interface LearningAnalyticsData {
+  programmeId: string;
+  rows: LearnerAnalytics[];
+}
+
+interface LearningAnalyticsTableProps {
+  analyticsData?: LearningAnalyticsData[];
+  onViewLearner?: (learnerId: string) => void;
+  onNudgeLearner?: (learnerId: string) => void;
+  onViewAllAnalytics?: (programmeId: string) => void;
+}
+
+const mockAnalyticsData: LearningAnalyticsData[] = [
+  {
+    programmeId: 'prog-001',
+    rows: [
+      {
+        learnerId: 'learner-001',
+        learnerName: 'Sarah Chen',
+        learnerEmail: 'sarah.chen@company.com',
+        currentItem: {
+          type: 'course',
+          id: 'course-001',
+          title: 'Strategic Thinking',
+          status: 'In-Progress'
+        },
+        progressPct: 85,
+        nextItem: {
+          type: 'course',
+          id: 'course-002',
+          title: 'Decision Making'
+        },
+        lastActivity: new Date('2024-12-27T14:30:00')
+      },
+      {
+        learnerId: 'learner-002',
+        learnerName: 'Michael Rodriguez',
+        learnerEmail: 'michael.r@company.com',
+        currentItem: {
+          type: 'content',
+          id: 'content-003',
+          title: 'Leadership Styles Assessment',
+          status: 'Not Started'
+        },
+        progressPct: 62,
+        nextItem: {
+          type: 'course',
+          id: 'course-003',
+          title: 'Team Management'
+        },
+        lastActivity: new Date('2024-12-26T09:15:00')
+      },
+      {
+        learnerId: 'learner-003',
+        learnerName: 'Emma Thompson',
+        learnerEmail: 'emma.thompson@company.com',
+        currentItem: {
+          type: 'course',
+          id: 'course-002',
+          title: 'Decision Making',
+          status: 'Completed'
+        },
+        progressPct: 94,
+        nextItem: {
+          type: 'content',
+          id: 'content-005',
+          title: 'Leadership Reflection Journal'
+        },
+        lastActivity: new Date('2024-12-27T16:45:00')
+      },
+      {
+        learnerId: 'learner-004',
+        learnerName: 'David Kim',
+        learnerEmail: 'david.kim@company.com',
+        currentItem: {
+          type: 'course',
+          id: 'course-001',
+          title: 'Strategic Thinking',
+          status: 'In-Progress'
+        },
+        progressPct: 78,
+        nextItem: {
+          type: 'course',
+          id: 'course-002',
+          title: 'Decision Making'
+        },
+        lastActivity: new Date('2024-12-27T11:20:00')
+      }
+    ]
+  },
+  {
+    programmeId: 'prog-002',
+    rows: [
+      {
+        learnerId: 'learner-005',
+        learnerName: 'Lisa Wang',
+        learnerEmail: 'lisa.wang@company.com',
+        currentItem: {
+          type: 'course',
+          id: 'course-101',
+          title: 'JavaScript Fundamentals',
+          status: 'In-Progress'
+        },
+        progressPct: 56,
+        nextItem: {
+          type: 'course',
+          id: 'course-102',
+          title: 'React Basics'
+        },
+        lastActivity: new Date('2024-12-27T13:10:00')
+      },
+      {
+        learnerId: 'learner-006',
+        learnerName: 'James Wilson',
+        learnerEmail: 'james.wilson@company.com',
+        currentItem: {
+          type: 'content',
+          id: 'content-201',
+          title: 'API Design Best Practices',
+          status: 'Not Started'
+        },
+        progressPct: 34,
+        nextItem: {
+          type: 'course',
+          id: 'course-103',
+          title: 'Database Design'
+        },
+        lastActivity: new Date('2024-12-25T15:30:00')
+      }
+    ]
+  }
+];
+
+const programmeNames = {
+  'prog-001': 'Leadership Development',
+  'prog-002': 'Technical Skills Bootcamp',
+  'prog-003': 'Communication Excellence',
+  'prog-004': 'Project Management Certification'
+};
+
+export const LearningAnalyticsTable: React.FC<LearningAnalyticsTableProps> = ({
+  analyticsData = mockAnalyticsData,
+  onViewLearner,
+  onNudgeLearner,
+  onViewAllAnalytics
+}) => {
+  const [selectedProgramme, setSelectedProgramme] = useState(analyticsData[0]?.programmeId || '');
+  const [selectedLearner, setSelectedLearner] = useState<LearnerAnalytics | null>(null);
+  const [isLearnerDrawerOpen, setIsLearnerDrawerOpen] = useState(false);
+
+  const currentProgrammeData = analyticsData.find(data => data.programmeId === selectedProgramme);
+  const currentProgrammeName = programmeNames[selectedProgramme as keyof typeof programmeNames] || 'Unknown Programme';
+
+  const formatLastActivity = (date: Date) => {
+    const now = new Date();
+    const diffHours = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60));
+    
+    if (diffHours < 1) {
+      return 'Just now';
+    } else if (diffHours < 24) {
+      return `${diffHours} hours ago`;
+    } else {
+      const diffDays = Math.floor(diffHours / 24);
+      return `${diffDays} day${diffDays !== 1 ? 's' : ''} ago`;
+    }
+  };
+
+  const getStatusBadgeProps = (status: CurrentItem['status']) => {
+    switch (status) {
+      case 'Completed':
+        return { variant: 'default' as const, className: 'bg-status-success text-status-success-foreground' };
+      case 'In-Progress':
+        return { variant: 'secondary' as const, className: 'bg-status-warn text-status-warn-foreground' };
+      case 'Not Started':
+        return { variant: 'outline' as const, className: 'border-status-error text-status-error' };
+      default:
+        return { variant: 'secondary' as const };
+    }
+  };
+
+  const handleViewLearner = (learner: LearnerAnalytics) => {
+    setSelectedLearner(learner);
+    setIsLearnerDrawerOpen(true);
+    onViewLearner?.(learner.learnerId);
+  };
+
+  const handleNudgeLearner = (learnerId: string) => {
+    onNudgeLearner?.(learnerId);
+    console.log(`Sent nudge to learner: ${learnerId}`);
+  };
+
+  const handleViewAllAnalytics = () => {
+    onViewAllAnalytics?.(selectedProgramme);
+    console.log(`Viewing all analytics for programme: ${selectedProgramme}`);
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          <div>
+            <CardTitle>Learning Analytics</CardTitle>
+            <CardDescription>Per-programme learner progress and current activities</CardDescription>
+          </div>
+          <div className="flex items-center gap-2">
+            <Select value={selectedProgramme} onValueChange={setSelectedProgramme}>
+              <SelectTrigger className="w-[250px]">
+                <SelectValue placeholder="Select programme" />
+              </SelectTrigger>
+              <SelectContent>
+                {analyticsData.map((data) => (
+                  <SelectItem key={data.programmeId} value={data.programmeId}>
+                    {programmeNames[data.programmeId as keyof typeof programmeNames] || data.programmeId}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Button 
+              variant="outline" 
+              onClick={handleViewAllAnalytics}
+              className="min-tap-44"
+            >
+              <BarChart3 className="h-4 w-4 mr-2" />
+              View All in Analytics
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+      
+      <CardContent>
+        <div className="space-y-4">
+          {/* Programme Summary */}
+          <div className="flex items-center justify-between p-4 bg-muted/30 rounded-lg">
+            <div>
+              <h4 className="font-medium">{currentProgrammeName}</h4>
+              <p className="text-sm text-muted-foreground">
+                {currentProgrammeData?.rows.length || 0} learners enrolled
+              </p>
+            </div>
+            <div className="text-right">
+              <p className="text-2xl font-bold">
+                {currentProgrammeData ? Math.round(
+                  currentProgrammeData.rows.reduce((sum, learner) => sum + learner.progressPct, 0) / 
+                  currentProgrammeData.rows.length
+                ) : 0}%
+              </p>
+              <p className="text-sm text-muted-foreground">Average Progress</p>
+            </div>
+          </div>
+
+          {/* Analytics Table */}
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader className="sticky-header">
+                <TableRow>
+                  <TableHead className="w-[200px]">Learner</TableHead>
+                  <TableHead className="w-[250px]">Current Item</TableHead>
+                  <TableHead className="w-[120px]">Progress</TableHead>
+                  <TableHead className="w-[200px]">Next Item</TableHead>
+                  <TableHead className="w-[120px]">Last Activity</TableHead>
+                  <TableHead className="w-[120px]">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {currentProgrammeData?.rows.map((learner) => (
+                  <TableRow key={learner.learnerId} className="min-h-[44px]">
+                    <TableCell>
+                      <div>
+                        <p className="font-medium">{learner.learnerName}</p>
+                        <p className="text-sm text-muted-foreground">{learner.learnerEmail}</p>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      {learner.currentItem ? (
+                        <div className="space-y-1">
+                          <div className="flex items-center gap-2">
+                            {learner.currentItem.type === 'course' ? (
+                              <BookOpen className="h-4 w-4 text-muted-foreground" />
+                            ) : (
+                              <div className="h-4 w-4 bg-muted-foreground rounded-sm" />
+                            )}
+                            <span className="text-sm font-medium">{learner.currentItem.title}</span>
+                          </div>
+                          <Badge 
+                            {...getStatusBadgeProps(learner.currentItem.status)}
+                            className="text-xs"
+                          >
+                            {learner.currentItem.status}
+                          </Badge>
+                        </div>
+                      ) : (
+                        <span className="text-muted-foreground text-sm">No current item</span>
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      <div className="space-y-1">
+                        <div className="flex items-center gap-2">
+                          <Progress 
+                            value={learner.progressPct} 
+                            className="w-16" 
+                            aria-describedby={`progress-${learner.learnerId}`}
+                          />
+                          <span className="text-sm font-medium">{learner.progressPct}%</span>
+                        </div>
+                        <span id={`progress-${learner.learnerId}`} className="sr-only">
+                          Progress: {learner.progressPct} percent complete
+                        </span>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      {learner.nextItem ? (
+                        <div className="flex items-center gap-2">
+                          {learner.nextItem.type === 'course' ? (
+                            <BookOpen className="h-4 w-4 text-muted-foreground" />
+                          ) : (
+                            <div className="h-4 w-4 bg-muted-foreground rounded-sm" />
+                          )}
+                          <span className="text-sm">{learner.nextItem.title}</span>
+                        </div>
+                      ) : (
+                        <span className="text-muted-foreground text-sm">Programme complete</span>
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-1 text-sm text-muted-foreground">
+                        <Clock className="h-4 w-4" />
+                        <span>{formatLastActivity(learner.lastActivity)}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-1">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleViewLearner(learner)}
+                          className="min-tap-44"
+                          aria-label={`View details for ${learner.learnerName}`}
+                        >
+                          <Eye className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleNudgeLearner(learner.learnerId)}
+                          className="min-tap-44"
+                          aria-label={`Send reminder to ${learner.learnerName}`}
+                        >
+                          <Send className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                )) || (
+                  <TableRow>
+                    <TableCell colSpan={6} className="text-center py-8 text-muted-foreground">
+                      No learner data available for this programme.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+
+        {/* Learner Detail Drawer */}
+        <Sheet open={isLearnerDrawerOpen} onOpenChange={setIsLearnerDrawerOpen}>
+          <SheetContent 
+            className="w-[500px] sm:w-[600px]"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="learner-detail-title"
+          >
+            <SheetHeader>
+              <SheetTitle id="learner-detail-title">
+                {selectedLearner?.learnerName}
+              </SheetTitle>
+              <SheetDescription>
+                Detailed progress and activity in {currentProgrammeName}
+              </SheetDescription>
+            </SheetHeader>
+            {selectedLearner && (
+              <div className="mt-6 space-y-6">
+                {/* Contact Info */}
+                <div className="space-y-2">
+                  <h4 className="font-medium">Contact Information</h4>
+                  <div className="space-y-1">
+                    <p className="text-sm text-muted-foreground">{selectedLearner.learnerEmail}</p>
+                    <p className="text-sm text-muted-foreground">
+                      Last active: {formatLastActivity(selectedLearner.lastActivity)}
+                    </p>
+                  </div>
+                </div>
+
+                {/* Progress Summary */}
+                <div className="space-y-2">
+                  <h4 className="font-medium">Progress Summary</h4>
+                  <div className="p-4 bg-muted/30 rounded-lg">
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="text-sm">Overall Progress</span>
+                      <span className="font-medium">{selectedLearner.progressPct}%</span>
+                    </div>
+                    <Progress value={selectedLearner.progressPct} className="h-2" />
+                  </div>
+                </div>
+
+                {/* Current Activity */}
+                {selectedLearner.currentItem && (
+                  <div className="space-y-2">
+                    <h4 className="font-medium">Current Activity</h4>
+                    <div className="p-4 border rounded-lg">
+                      <div className="flex items-center gap-2 mb-2">
+                        {selectedLearner.currentItem.type === 'course' ? (
+                          <BookOpen className="h-4 w-4 text-muted-foreground" />
+                        ) : (
+                          <div className="h-4 w-4 bg-muted-foreground rounded-sm" />
+                        )}
+                        <span className="font-medium">{selectedLearner.currentItem.title}</span>
+                      </div>
+                      <Badge {...getStatusBadgeProps(selectedLearner.currentItem.status)}>
+                        {selectedLearner.currentItem.status}
+                      </Badge>
+                    </div>
+                  </div>
+                )}
+
+                {/* Next Up */}
+                {selectedLearner.nextItem && (
+                  <div className="space-y-2">
+                    <h4 className="font-medium">Next Up</h4>
+                    <div className="p-4 border border-dashed rounded-lg">
+                      <div className="flex items-center gap-2">
+                        {selectedLearner.nextItem.type === 'course' ? (
+                          <BookOpen className="h-4 w-4 text-muted-foreground" />
+                        ) : (
+                          <div className="h-4 w-4 bg-muted-foreground rounded-sm" />
+                        )}
+                        <span>{selectedLearner.nextItem.title}</span>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {/* Actions */}
+                <div className="flex gap-2 pt-4">
+                  <Button className="flex-1">
+                    <Send className="h-4 w-4 mr-2" />
+                    Send Reminder
+                  </Button>
+                  <Button variant="outline" className="flex-1">
+                    <TrendingUp className="h-4 w-4 mr-2" />
+                    View Full Analytics
+                  </Button>
+                </div>
+              </div>
+            )}
+          </SheetContent>
+        </Sheet>
+      </CardContent>
+    </Card>
+  );
+};
\ No newline at end of file
diff --git a/src/components/ProgrammeCalendar.tsx b/src/components/ProgrammeCalendar.tsx
new file mode 100644
index 0000000..a1fda87
--- /dev/null
+++ b/src/components/ProgrammeCalendar.tsx
@@ -0,0 +1,445 @@
+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
+import { Badge } from './ui/badge';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { Checkbox } from './ui/checkbox';
+import { 
+  Calendar as CalendarIcon, 
+  ChevronLeft, 
+  ChevronRight,
+  Video,
+  School,
+  Clock,
+  Filter
+} from 'lucide-react';
+
+interface CalendarEvent {
+  id: string;
+  programmeId: string;
+  type: 'webinar' | 'class' | 'course_end' | 'content_end' | 'programme_end';
+  title: string;
+  start: Date;
+  end?: Date;
+  href: string;
+}
+
+interface ProgrammeLegend {
+  programmeId: string;
+  programmeName: string;
+  color: string;
+}
+
+interface CalendarData {
+  legend: ProgrammeLegend[];
+  events: CalendarEvent[];
+}
+
+interface ProgrammeCalendarProps {
+  calendarData?: CalendarData;
+  onEventClick?: (event: CalendarEvent) => void;
+}
+
+const mockCalendarData: CalendarData = {
+  legend: [
+    { programmeId: 'prog-001', programmeName: 'Leadership Development', color: '#04045B' },
+    { programmeId: 'prog-002', programmeName: 'Technical Skills', color: '#F8C301' },
+    { programmeId: 'prog-003', programmeName: 'Communication', color: '#21a36a' },
+    { programmeId: 'prog-004', programmeName: 'Project Management', color: '#89002D' },
+    { programmeId: 'prog-005', programmeName: 'Sales Training', color: '#C0C0C0' },
+    { programmeId: 'prog-006', programmeName: 'Analytics Program', color: '#6366f1' }
+  ],
+  events: [
+    {
+      id: 'event-001',
+      programmeId: 'prog-001',
+      type: 'webinar',
+      title: 'Leadership Fundamentals Webinar',
+      start: new Date('2024-12-28T14:00:00'),
+      end: new Date('2024-12-28T15:30:00'),
+      href: '/webinars/leadership-fundamentals'
+    },
+    {
+      id: 'event-002',
+      programmeId: 'prog-002',
+      type: 'class',
+      title: 'Hands-on Coding Workshop',
+      start: new Date('2024-12-30T09:00:00'),
+      end: new Date('2024-12-30T17:00:00'),
+      href: '/classes/coding-workshop'
+    },
+    {
+      id: 'event-003',
+      programmeId: 'prog-001',
+      type: 'course_end',
+      title: 'Strategic Thinking Course Due',
+      start: new Date('2025-01-02T23:59:00'),
+      href: '/courses/strategic-thinking'
+    },
+    {
+      id: 'event-004',
+      programmeId: 'prog-003',
+      type: 'webinar',
+      title: 'Public Speaking Masterclass',
+      start: new Date('2025-01-05T11:00:00'),
+      end: new Date('2025-01-05T12:30:00'),
+      href: '/webinars/public-speaking'
+    },
+    {
+      id: 'event-005',
+      programmeId: 'prog-004',
+      type: 'programme_end',
+      title: 'Project Management Certification Due',
+      start: new Date('2025-01-10T23:59:00'),
+      href: '/programmes/project-management'
+    }
+  ]
+};
+
+export const ProgrammeCalendar: React.FC<ProgrammeCalendarProps> = ({
+  calendarData = mockCalendarData,
+  onEventClick
+}) => {
+  const [currentDate, setCurrentDate] = useState(new Date());
+  const [viewMode, setViewMode] = useState<'month' | 'week'>('month');
+  const [selectedProgrammes, setSelectedProgrammes] = useState<string[]>(
+    calendarData.legend.slice(0, 6).map(p => p.programmeId)
+  );
+  const [selectedEventTypes, setSelectedEventTypes] = useState<string[]>([
+    'webinar', 'class', 'course_end', 'content_end', 'programme_end'
+  ]);
+  const [showFilters, setShowFilters] = useState(false);
+
+  const visibleLegend = calendarData.legend.slice(0, 6);
+  const additionalProgrammes = calendarData.legend.length - 6;
+
+  const getEventIcon = (type: CalendarEvent['type']) => {
+    switch (type) {
+      case 'webinar':
+        return <Video className="h-3 w-3" />;
+      case 'class':
+        return <School className="h-3 w-3" />;
+      default:
+        return <Clock className="h-3 w-3" />;
+    }
+  };
+
+  const getEventTypeLabel = (type: CalendarEvent['type']) => {
+    switch (type) {
+      case 'webinar':
+        return 'Webinar';
+      case 'class':
+        return 'Offline Class';
+      case 'course_end':
+        return 'Course End';
+      case 'content_end':
+        return 'Content End';
+      case 'programme_end':
+        return 'Programme End';
+      default:
+        return 'Event';
+    }
+  };
+
+  const filteredEvents = calendarData.events.filter(event => 
+    selectedProgrammes.includes(event.programmeId) && 
+    selectedEventTypes.includes(event.type)
+  );
+
+  const formatEventTime = (start: Date, end?: Date) => {
+    const startTime = start.toLocaleTimeString('en-AU', { 
+      hour: '2-digit', 
+      minute: '2-digit',
+      hour12: true
+    });
+    
+    if (end) {
+      const endTime = end.toLocaleTimeString('en-AU', { 
+        hour: '2-digit', 
+        minute: '2-digit',
+        hour12: true
+      });
+      return `${startTime} - ${endTime}`;
+    }
+    
+    return `Due ${startTime}`;
+  };
+
+  const getProgrammeColor = (programmeId: string) => {
+    const programme = calendarData.legend.find(p => p.programmeId === programmeId);
+    return programme?.color || '#6b7280';
+  };
+
+  const navigateMonth = (direction: 'prev' | 'next') => {
+    setCurrentDate(prev => {
+      const newDate = new Date(prev);
+      if (direction === 'prev') {
+        newDate.setMonth(prev.getMonth() - 1);
+      } else {
+        newDate.setMonth(prev.getMonth() + 1);
+      }
+      return newDate;
+    });
+  };
+
+  const toggleProgrammeFilter = (programmeId: string) => {
+    setSelectedProgrammes(prev => 
+      prev.includes(programmeId) 
+        ? prev.filter(id => id !== programmeId)
+        : [...prev, programmeId]
+    );
+  };
+
+  const toggleEventTypeFilter = (eventType: string) => {
+    setSelectedEventTypes(prev => 
+      prev.includes(eventType) 
+        ? prev.filter(type => type !== eventType)
+        : [...prev, eventType]
+    );
+  };
+
+  const handleEventClick = (event: CalendarEvent) => {
+    onEventClick?.(event);
+    console.log(`Clicked event: ${event.title}`);
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle>Programme Schedule</CardTitle>
+              <CardDescription>Webinars, classes, and important deadlines</CardDescription>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowFilters(!showFilters)}
+                className="min-tap-44"
+                aria-label="Toggle filters"
+              >
+                <Filter className="h-4 w-4 mr-2" />
+                Filters
+              </Button>
+              <div className="flex border rounded-md">
+                <Button 
+                  variant={viewMode === 'month' ? 'default' : 'ghost'}
+                  size="sm"
+                  onClick={() => setViewMode('month')}
+                  className="rounded-r-none"
+                >
+                  Month
+                </Button>
+                <Button 
+                  variant={viewMode === 'week' ? 'default' : 'ghost'}
+                  size="sm"
+                  onClick={() => setViewMode('week')}
+                  className="rounded-l-none"
+                >
+                  Week
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          {/* Calendar Navigation */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => navigateMonth('prev')}
+                className="min-tap-44"
+                aria-label="Previous month"
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              <h3 className="font-semibold text-lg">
+                {currentDate.toLocaleDateString('en-AU', { 
+                  month: 'long', 
+                  year: 'numeric' 
+                })}
+              </h3>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => navigateMonth('next')}
+                className="min-tap-44"
+                aria-label="Next month"
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setCurrentDate(new Date())}
+              className="min-tap-44"
+            >
+              Today
+            </Button>
+          </div>
+
+          {/* Programme Legend */}
+          <div className="space-y-2">
+            <h4 className="text-sm font-medium">Programmes</h4>
+            <div className="flex flex-wrap gap-2">
+              {visibleLegend.map((programme) => (
+                <div 
+                  key={programme.programmeId} 
+                  className="flex items-center gap-1"
+                >
+                  <div 
+                    className="w-3 h-3 rounded-full"
+                    style={{ backgroundColor: programme.color }}
+                    aria-hidden="true"
+                  />
+                  <span className="text-sm">{programme.programmeName}</span>
+                </div>
+              ))}
+              {additionalProgrammes > 0 && (
+                <Badge variant="secondary" className="text-xs">
+                  +{additionalProgrammes} more
+                </Badge>
+              )}
+            </div>
+          </div>
+
+          {/* Filters Panel */}
+          {showFilters && (
+            <div className="border rounded-lg p-4 space-y-4 bg-muted/30">
+              <div>
+                <h4 className="text-sm font-medium mb-2">Filter by Programme</h4>
+                <div className="space-y-2">
+                  {calendarData.legend.map((programme) => (
+                    <div key={programme.programmeId} className="flex items-center space-x-2">
+                      <Checkbox
+                        id={`prog-${programme.programmeId}`}
+                        checked={selectedProgrammes.includes(programme.programmeId)}
+                        onCheckedChange={() => toggleProgrammeFilter(programme.programmeId)}
+                        className="min-tap-44"
+                      />
+                      <label 
+                        htmlFor={`prog-${programme.programmeId}`}
+                        className="text-sm font-medium cursor-pointer flex items-center gap-2"
+                      >
+                        <div 
+                          className="w-3 h-3 rounded-full"
+                          style={{ backgroundColor: programme.color }}
+                          aria-hidden="true"
+                        />
+                        {programme.programmeName}
+                      </label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              
+              <div>
+                <h4 className="text-sm font-medium mb-2">Filter by Type</h4>
+                <div className="space-y-2">
+                  {[
+                    { value: 'webinar', label: 'Webinars' },
+                    { value: 'class', label: 'Offline Classes' },
+                    { value: 'course_end', label: 'Course End Dates' },
+                    { value: 'content_end', label: 'Content End Dates' },
+                    { value: 'programme_end', label: 'Programme End Dates' }
+                  ].map((eventType) => (
+                    <div key={eventType.value} className="flex items-center space-x-2">
+                      <Checkbox
+                        id={`type-${eventType.value}`}
+                        checked={selectedEventTypes.includes(eventType.value)}
+                        onCheckedChange={() => toggleEventTypeFilter(eventType.value)}
+                        className="min-tap-44"
+                      />
+                      <label 
+                        htmlFor={`type-${eventType.value}`}
+                        className="text-sm font-medium cursor-pointer"
+                      >
+                        {eventType.label}
+                      </label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </CardHeader>
+      
+      <CardContent>
+        {/* Calendar Grid */}
+        <div 
+          className="border rounded-lg p-4 min-h-[400px]"
+          role="grid"
+          aria-label={`Calendar for ${currentDate.toLocaleDateString('en-AU', { month: 'long', year: 'numeric' })}`}
+        >
+          {/* Events List View (simplified for demo) */}
+          <div className="space-y-3">
+            {filteredEvents.length === 0 ? (
+              <div className="text-center py-8 text-muted-foreground">
+                <CalendarIcon className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+                <p>No events found for the selected filters.</p>
+                <p className="text-sm mt-1">Try adjusting your programme or event type filters.</p>
+              </div>
+            ) : (
+              filteredEvents.map((event) => {
+                const programme = calendarData.legend.find(p => p.programmeId === event.programmeId);
+                
+                return (
+                  <div
+                    key={event.id}
+                    className="flex items-center justify-between p-3 border rounded-lg hover:bg-muted/50 cursor-pointer transition-colors min-tap-44"
+                    onClick={() => handleEventClick(event)}
+                    role="button"
+                    tabIndex={0}
+                    aria-label={`${event.title} on ${event.start.toLocaleDateString()}`}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        handleEventClick(event);
+                      }
+                    }}
+                  >
+                    <div className="flex items-center gap-3 flex-1">
+                      <div 
+                        className="w-4 h-4 rounded-full flex items-center justify-center text-white"
+                        style={{ backgroundColor: getProgrammeColor(event.programmeId) }}
+                        aria-hidden="true"
+                      >
+                        {getEventIcon(event.type)}
+                      </div>
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2">
+                          <span className="font-medium">{event.title}</span>
+                          <Badge variant="outline" className="text-xs">
+                            {getEventTypeLabel(event.type)}
+                          </Badge>
+                        </div>
+                        <p className="text-sm text-muted-foreground">{programme?.programmeName}</p>
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <p className="text-sm font-medium">
+                        {event.start.toLocaleDateString('en-AU', { 
+                          weekday: 'short',
+                          month: 'short', 
+                          day: 'numeric' 
+                        })}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        {formatEventTime(event.start, event.end)}
+                      </p>
+                    </div>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
\ No newline at end of file
diff --git a/src/components/ProgrammeHRView.tsx b/src/components/ProgrammeHRView.tsx
new file mode 100644
index 0000000..3c37766
--- /dev/null
+++ b/src/components/ProgrammeHRView.tsx
@@ -0,0 +1,902 @@
+import React, { useState, useEffect } from 'react';
+import { Button } from './ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
+import { Badge } from './ui/badge';
+import { Input } from './ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from './ui/dialog';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from './ui/sheet';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table';
+import { Progress } from './ui/progress';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
+import { Alert, AlertDescription } from './ui/alert';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './ui/accordion';
+import { 
+  ArrowLeft, 
+  Download, 
+  BarChart3, 
+  MoreHorizontal,
+  Users,
+  Calendar,
+  Clock,
+  BookOpen,
+  Award,
+  Bell,
+  Search,
+  Filter,
+  Eye,
+  Mail,
+  FileText,
+  Play,
+  MapPin,
+  Video,
+  FileQuestion,
+  Activity,
+  Building2,
+  RefreshCw,
+  ExternalLink,
+  Plus,
+  CheckCircle,
+  AlertCircle,
+  XCircle
+} from 'lucide-react';
+
+// Types
+interface Programme {
+  id: string;
+  title: string;
+  status: 'Active' | 'Upcoming' | 'Completed';
+  code: string;
+  owner: string;
+  version: number;
+  description: string;
+  goals: string[];
+  tags: string[];
+  structure: {
+    preAssessment: ProgrammeItem[];
+    preLearning: ProgrammeItem[];
+    classroom: ProgrammeItem[];
+    postLearning: ProgrammeItem[];
+  };
+}
+
+interface ProgrammeItem {
+  id: string;
+  type: 'Profiler' | 'Course' | 'Content' | 'Webinar' | 'OfflineSession';
+  title: string;
+  duration?: string;
+  dueDate?: string;
+  venue?: string;
+  room?: string;
+  date?: string;
+  capacity?: number;
+  status?: 'Not Started' | 'In Progress' | 'Completed';
+}
+
+interface Assignment {
+  startDate: string;
+  endDate: string;
+  orgId: string;
+  orgName: string;
+}
+
+interface ProgrammeCounts {
+  learners: number;
+  completionPct: number;
+  courses: number;
+  content: number;
+  webinars: number;
+  classes: number;
+}
+
+interface ProgrammeLearner {
+  id: string;
+  name: string;
+  email: string;
+  currentItem: {
+    type: string;
+    id: string;
+    title: string;
+    status: 'Not Started' | 'In-Progress' | 'Completed';
+  };
+  progressPct: number;
+  nextItem?: {
+    type: string;
+    id: string;
+    title: string;
+  };
+  lastActivity: string;
+  stage: 'Pre-assessment' | 'Pre-learning' | 'Classroom' | 'Post-learning';
+  cohort?: string;
+}
+
+interface ProgrammeEvent {
+  id: string;
+  programmeId: string;
+  type: 'webinar' | 'class' | 'course_end' | 'content_end' | 'programme_end';
+  title: string;
+  start: string;
+  end: string;
+  venue?: string;
+  room?: string;
+}
+
+interface ProgrammeHRViewProps {
+  programmeId: string;
+  onBack: () => void;
+  onAssignLearners: (programmeId: string) => void;
+  onDownloadTracker: (programmeId: string) => void;
+  onOpenAnalytics: (programmeId: string) => void;
+}
+
+// Mock data
+const mockProgramme: Programme = {
+  id: 'prg_123',
+  title: 'Executive Leadership Development Programme',
+  status: 'Active',
+  code: 'ELDP-2024',
+  owner: 'Dr. Sarah Johnson',
+  version: 2,
+  description: 'A comprehensive leadership development programme designed to build strategic thinking, emotional intelligence, and decision-making capabilities for senior executives.',
+  goals: [
+    'Develop strategic thinking and planning capabilities',
+    'Enhance emotional intelligence and self-awareness',
+    'Build effective communication and influence skills',
+    'Master change management and innovation leadership'
+  ],
+  tags: ['Leadership', 'Executive', 'Strategic Thinking', 'Management'],
+  structure: {
+    preAssessment: [
+      { id: 'pa1', type: 'Profiler', title: 'Leadership Style Assessment', status: 'Completed' },
+      { id: 'pa2', type: 'Profiler', title: '360-Degree Feedback', status: 'In Progress' }
+    ],
+    preLearning: [
+      { id: 'pl1', type: 'Course', title: 'Strategic Thinking Fundamentals', duration: '4 hours', dueDate: '2024-01-15', status: 'Completed' },
+      { id: 'pl2', type: 'Content', title: 'Leadership in Crisis Webcast', duration: '45 mins', status: 'In Progress' },
+      { id: 'pl3', type: 'Webinar', title: 'Future of Leadership', date: '2024-01-20 10:00 AM AEDT', status: 'Not Started' }
+    ],
+    classroom: [
+      { id: 'c1', type: 'OfflineSession', title: 'Strategic Leadership Workshop', venue: 'Sydney Campus', room: 'Executive Suite A', date: '2024-02-05', capacity: 20 },
+      { id: 'c2', type: 'OfflineSession', title: 'Case Study Analysis', venue: 'Sydney Campus', room: 'Conference Room B', date: '2024-02-06', capacity: 20 }
+    ],
+    postLearning: [
+      { id: 'po1', type: 'Course', title: 'Advanced Decision Making', duration: '6 hours', dueDate: '2024-02-20', status: 'Not Started' },
+      { id: 'po2', type: 'Content', title: 'Leadership Reflection Journal', duration: '2 weeks', status: 'Not Started' }
+    ]
+  }
+};
+
+const mockAssignment: Assignment = {
+  startDate: '2024-01-01',
+  endDate: '2024-03-31',
+  orgId: 'org_123',
+  orgName: 'Tech Solutions Pvt Ltd'
+};
+
+const mockCounts: ProgrammeCounts = {
+  learners: 28,
+  completionPct: 64,
+  courses: 2,
+  content: 2,
+  webinars: 1,
+  classes: 2
+};
+
+const mockLearners: ProgrammeLearner[] = [
+  {
+    id: 'l1',
+    name: 'Sarah Chen',
+    email: 'sarah.chen@company.com',
+    currentItem: { type: 'Course', id: 'pl1', title: 'Strategic Thinking Fundamentals', status: 'In-Progress' },
+    progressPct: 75,
+    nextItem: { type: 'Content', id: 'pl2', title: 'Leadership in Crisis Webcast' },
+    lastActivity: '2 hours ago',
+    stage: 'Pre-learning',
+    cohort: 'Cohort A'
+  },
+  {
+    id: 'l2',
+    name: 'Michael Rodriguez',
+    email: 'michael.r@company.com',
+    currentItem: { type: 'Profiler', id: 'pa2', title: '360-Degree Feedback', status: 'In-Progress' },
+    progressPct: 45,
+    nextItem: { type: 'Course', id: 'pl1', title: 'Strategic Thinking Fundamentals' },
+    lastActivity: '1 day ago',
+    stage: 'Pre-assessment',
+    cohort: 'Cohort A'
+  },
+  {
+    id: 'l3',
+    name: 'Emma Thompson',
+    email: 'emma.thompson@company.com',
+    currentItem: { type: 'OfflineSession', id: 'c1', title: 'Strategic Leadership Workshop', status: 'Completed' },
+    progressPct: 89,
+    nextItem: { type: 'Course', id: 'po1', title: 'Advanced Decision Making' },
+    lastActivity: '3 hours ago',
+    stage: 'Classroom',
+    cohort: 'Cohort B'
+  }
+];
+
+const mockEvents: ProgrammeEvent[] = [
+  {
+    id: 'e1',
+    programmeId: 'prg_123',
+    type: 'webinar',
+    title: 'Future of Leadership',
+    start: '2024-01-20T10:00:00',
+    end: '2024-01-20T11:30:00'
+  },
+  {
+    id: 'e2',
+    programmeId: 'prg_123',
+    type: 'class',
+    title: 'Strategic Leadership Workshop',
+    start: '2024-02-05T09:00:00',
+    end: '2024-02-05T17:00:00',
+    venue: 'Sydney Campus',
+    room: 'Executive Suite A'
+  }
+];
+
+export const ProgrammeHRView: React.FC<ProgrammeHRViewProps> = ({
+  programmeId,
+  onBack,
+  onAssignLearners,
+  onDownloadTracker,
+  onOpenAnalytics
+}) => {
+  const [activeTab, setActiveTab] = useState('overview');
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [stageFilter, setStageFilter] = useState('all');
+  const [cohortFilter, setCohortFilter] = useState('all');
+  const [selectedLearner, setSelectedLearner] = useState<ProgrammeLearner | null>(null);
+  const [showLearnerDrawer, setShowLearnerDrawer] = useState(false);
+  const [exporting, setExporting] = useState(false);
+
+  // Simulate loading
+  useEffect(() => {
+    const timer = setTimeout(() => setLoading(false), 800);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const getTypeIcon = (type: string) => {
+    switch (type) {
+      case 'Course': return <BookOpen className="h-4 w-4" />;
+      case 'Content': return <FileText className="h-4 w-4" />;
+      case 'Webinar': return <Video className="h-4 w-4" />;
+      case 'Profiler': return <FileQuestion className="h-4 w-4" />;
+      case 'OfflineSession': return <Building2 className="h-4 w-4" />;
+      default: return <BookOpen className="h-4 w-4" />;
+    }
+  };
+
+  const getStatusBadge = (status?: string) => {
+    switch (status) {
+      case 'Completed':
+        return <Badge variant="default" className="bg-status-success text-white"><CheckCircle className="h-3 w-3 mr-1" />Completed</Badge>;
+      case 'In Progress':
+        return <Badge variant="secondary" className="bg-status-warn text-black"><AlertCircle className="h-3 w-3 mr-1" />In Progress</Badge>;
+      case 'Not Started':
+        return <Badge variant="outline"><XCircle className="h-3 w-3 mr-1" />Not Started</Badge>;
+      default:
+        return null;
+    }
+  };
+
+  const filteredLearners = mockLearners.filter(learner => {
+    const matchesSearch = learner.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                         learner.email.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesStatus = statusFilter === 'all' || learner.currentItem.status === statusFilter;
+    const matchesStage = stageFilter === 'all' || learner.stage === stageFilter;
+    const matchesCohort = cohortFilter === 'all' || learner.cohort === cohortFilter;
+    return matchesSearch && matchesStatus && matchesStage && matchesCohort;
+  });
+
+  const handleViewLearner = (learner: ProgrammeLearner) => {
+    setSelectedLearner(learner);
+    setShowLearnerDrawer(true);
+  };
+
+  const handleExport = async (format: 'excel' | 'csv' | 'pdf') => {
+    setExporting(true);
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    setExporting(false);
+    console.log(`Exported programme tracker as ${format.toUpperCase()}`);
+  };
+
+  if (loading) {
+    return (
+      <div className="space-y-6 animate-pulse">
+        <div className="h-16 bg-muted rounded-lg"></div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          {[...Array(4)].map((_, i) => (
+            <div key={i} className="h-24 bg-muted rounded-lg"></div>
+          ))}
+        </div>
+        <div className="h-96 bg-muted rounded-lg"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <Card className="sticky top-0 z-20 bg-background border-b shadow-sm">
+        <CardContent className="pt-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <Button 
+                variant="ghost" 
+                size="icon" 
+                onClick={onBack}
+                className="min-tap-44"
+                aria-label="Go back to programmes list"
+              >
+                <ArrowLeft className="h-4 w-4" />
+              </Button>
+              <div>
+                <div className="flex items-center gap-3 mb-1">
+                  <h1 className="text-2xl font-bold">{mockProgramme.title}</h1>
+                  <Badge 
+                    variant={mockProgramme.status === 'Active' ? 'default' : 'secondary'}
+                    className={mockProgramme.status === 'Active' ? 'bg-status-success' : ''}
+                  >
+                    {mockProgramme.status}
+                  </Badge>
+                </div>
+                <p className="text-muted-foreground">
+                  {mockProgramme.code} • {mockProgramme.owner} • Version {mockProgramme.version}
+                </p>
+              </div>
+            </div>
+            
+            <div className="flex items-center gap-2">
+              <Button 
+                onClick={() => onAssignLearners(programmeId)}
+                className="min-tap-44"
+              >
+                <Users className="h-4 w-4 mr-2" />
+                Assign Learners
+              </Button>
+              <Button 
+                variant="outline"
+                onClick={() => onDownloadTracker(programmeId)}
+                disabled={exporting}
+                className="min-tap-44"
+              >
+                {exporting ? (
+                  <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                ) : (
+                  <Download className="h-4 w-4 mr-2" />
+                )}
+                Download Tracker
+              </Button>
+              <Button 
+                variant="outline"
+                onClick={() => onOpenAnalytics(programmeId)}
+                className="min-tap-44"
+              >
+                <BarChart3 className="h-4 w-4 mr-2" />
+                Open Analytics
+              </Button>
+              <Dialog>
+                <DialogTrigger asChild>
+                  <Button 
+                    variant="ghost" 
+                    size="icon" 
+                    className="min-tap-44"
+                    aria-label="More actions"
+                  >
+                    <MoreHorizontal className="h-4 w-4" />
+                  </Button>
+                </DialogTrigger>
+                <DialogContent className="sm:max-w-[425px]">
+                  <DialogHeader>
+                    <DialogTitle>Programme Actions</DialogTitle>
+                    <DialogDescription>Additional actions for this programme</DialogDescription>
+                  </DialogHeader>
+                  <div className="space-y-2">
+                    <Button variant="outline" className="w-full justify-start">
+                      <FileText className="h-4 w-4 mr-2" />
+                      View Structure JSON
+                    </Button>
+                    <Button variant="outline" className="w-full justify-start">
+                      <ExternalLink className="h-4 w-4 mr-2" />
+                      Audit Trail
+                    </Button>
+                  </div>
+                </DialogContent>
+              </Dialog>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Summary Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <Card>
+          <CardContent className="pt-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">Assignment Window</p>
+                <p className="font-semibold">{new Date(mockAssignment.startDate).toLocaleDateString()} → {new Date(mockAssignment.endDate).toLocaleDateString()}</p>
+                <p className="text-xs text-muted-foreground">{mockAssignment.orgName}</p>
+              </div>
+              <Calendar className="h-8 w-8 text-brand-primary" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="pt-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">Enrolled Learners</p>
+                <p className="text-2xl font-bold">{mockCounts.learners}</p>
+                <Button variant="link" className="p-0 h-auto text-xs">Manage</Button>
+              </div>
+              <Users className="h-8 w-8 text-brand-primary" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="pt-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">Completion Rate</p>
+                <p className="text-2xl font-bold">{mockCounts.completionPct}%</p>
+                <Progress value={mockCounts.completionPct} className="w-16 mt-1" />
+              </div>
+              <Award className="h-8 w-8 text-brand-primary" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="pt-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">Items in Programme</p>
+                <div className="flex gap-2 text-sm">
+                  <span>{mockCounts.courses} Courses</span>
+                  <span>•</span>
+                  <span>{mockCounts.content} Content</span>
+                </div>
+                <div className="flex gap-2 text-sm text-muted-foreground">
+                  <span>{mockCounts.webinars} Webinars</span>
+                  <span>•</span>
+                  <span>{mockCounts.classes} Classes</span>
+                </div>
+              </div>
+              <BookOpen className="h-8 w-8 text-brand-primary" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Tabs */}
+      <Card>
+        <CardContent className="pt-6">
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+            <TabsList className="grid w-full grid-cols-6">
+              <TabsTrigger value="overview">Overview</TabsTrigger>
+              <TabsTrigger value="structure">Structure</TabsTrigger>
+              <TabsTrigger value="learners">Learners</TabsTrigger>
+              <TabsTrigger value="calendar">Calendar</TabsTrigger>
+              <TabsTrigger value="reports">Reports</TabsTrigger>
+              <TabsTrigger value="activity">Activity</TabsTrigger>
+            </TabsList>
+
+            {/* Overview Tab */}
+            <TabsContent value="overview" className="space-y-6 mt-6">
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Programme Summary</CardTitle>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div>
+                      <h4 className="font-medium mb-2">Description</h4>
+                      <p className="text-sm text-muted-foreground">{mockProgramme.description}</p>
+                    </div>
+                    <div>
+                      <h4 className="font-medium mb-2">Learning Goals</h4>
+                      <ul className="text-sm text-muted-foreground space-y-1">
+                        {mockProgramme.goals.map((goal, index) => (
+                          <li key={index} className="flex items-start gap-2">
+                            <CheckCircle className="h-4 w-4 text-status-success mt-0.5 flex-shrink-0" />
+                            {goal}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                    <div>
+                      <h4 className="font-medium mb-2">Tags</h4>
+                      <div className="flex flex-wrap gap-2">
+                        {mockProgramme.tags.map((tag, index) => (
+                          <Badge key={index} variant="outline">{tag}</Badge>
+                        ))}
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Stage Breakdown</CardTitle>
+                    <CardDescription>Programme structure as designed by Super Admin</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-4">
+                      {[
+                        { name: 'Pre-assessment', items: mockProgramme.structure.preAssessment, color: 'bg-chart-1' },
+                        { name: 'Pre-learning', items: mockProgramme.structure.preLearning, color: 'bg-chart-2' },
+                        { name: 'Classroom sessions', items: mockProgramme.structure.classroom, color: 'bg-chart-3' },
+                        { name: 'Post-learning', items: mockProgramme.structure.postLearning, color: 'bg-chart-4' }
+                      ].map((stage, index) => (
+                        <div key={index} className="border-l-4 border-l-brand-primary pl-4">
+                          <div className="flex items-center justify-between mb-2">
+                            <h4 className="font-medium">{stage.name}</h4>
+                            <Badge variant="outline">{stage.items.length} items</Badge>
+                          </div>
+                          <div className="space-y-1">
+                            {stage.items.slice(0, 2).map((item, itemIndex) => (
+                              <div key={itemIndex} className="flex items-center gap-2 text-sm">
+                                {getTypeIcon(item.type)}
+                                <span>{item.title}</span>
+                                {item.status && getStatusBadge(item.status)}
+                              </div>
+                            ))}
+                            {stage.items.length > 2 && (
+                              <p className="text-xs text-muted-foreground">
+                                +{stage.items.length - 2} more items
+                              </p>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+
+              <Alert>
+                <Bell className="h-4 w-4" />
+                <AlertDescription>
+                  <strong>Guardrails:</strong> Dates and enrolments shown are scoped to your organization ({mockAssignment.orgName}).
+                </AlertDescription>
+              </Alert>
+            </TabsContent>
+
+            {/* Structure Tab */}
+            <TabsContent value="structure" className="space-y-6 mt-6">
+              <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h3 className="text-lg font-semibold">Programme Structure</h3>
+                    <p className="text-muted-foreground">Read-only view of the programme as composed by Super Admin</p>
+                  </div>
+                  <Badge variant="outline">Read Only</Badge>
+                </div>
+
+                <Accordion type="single" collapsible className="space-y-2">
+                  {[
+                    { name: 'Pre-assessment', items: mockProgramme.structure.preAssessment },
+                    { name: 'Pre-learning', items: mockProgramme.structure.preLearning },
+                    { name: 'Classroom Sessions (Offline)', items: mockProgramme.structure.classroom },
+                    { name: 'Post-learning', items: mockProgramme.structure.postLearning }
+                  ].map((stage, index) => (
+                    <AccordionItem key={index} value={`stage-${index}`} className="border rounded-lg px-4">
+                      <AccordionTrigger className="hover:no-underline">
+                        <div className="flex items-center gap-3">
+                          <Badge variant="outline">{stage.name}</Badge>
+                          <span className="text-muted-foreground">({stage.items.length} items)</span>
+                        </div>
+                      </AccordionTrigger>
+                      <AccordionContent className="space-y-3 pb-4">
+                        {stage.items.map((item, itemIndex) => (
+                          <div key={itemIndex} className="flex items-center justify-between p-3 bg-muted/30 rounded-lg">
+                            <div className="flex items-center gap-3">
+                              {getTypeIcon(item.type)}
+                              <div>
+                                <p className="font-medium">{item.title}</p>
+                                <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                                  {item.duration && (
+                                    <span className="flex items-center gap-1">
+                                      <Clock className="h-3 w-3" />
+                                      {item.duration}
+                                    </span>
+                                  )}
+                                  {item.dueDate && (
+                                    <span className="flex items-center gap-1">
+                                      <Calendar className="h-3 w-3" />
+                                      Due: {item.dueDate}
+                                    </span>
+                                  )}
+                                  {item.venue && (
+                                    <span className="flex items-center gap-1">
+                                      <MapPin className="h-3 w-3" />
+                                      {item.venue} {item.room && `• ${item.room}`}
+                                    </span>
+                                  )}
+                                  {item.date && (
+                                    <span className="flex items-center gap-1">
+                                      <Calendar className="h-3 w-3" />
+                                      {item.date}
+                                    </span>
+                                  )}
+                                </div>
+                              </div>
+                            </div>
+                            <Button variant="outline" size="sm">
+                              <Eye className="h-4 w-4 mr-2" />
+                              Open
+                            </Button>
+                          </div>
+                        ))}
+                      </AccordionContent>
+                    </AccordionItem>
+                  ))}
+                </Accordion>
+              </div>
+            </TabsContent>
+
+            {/* Learners Tab */}
+            <TabsContent value="learners" className="space-y-6 mt-6">
+              <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
+                <div>
+                  <h3 className="text-lg font-semibold">Learner Progress</h3>
+                  <p className="text-muted-foreground">Track individual progress across the programme</p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button 
+                    variant="outline"
+                    onClick={() => handleExport('excel')}
+                    disabled={exporting}
+                    className="min-tap-44"
+                  >
+                    {exporting ? (
+                      <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                    ) : (
+                      <Download className="h-4 w-4 mr-2" />
+                    )}
+                    Export Data
+                  </Button>
+                </div>
+              </div>
+
+              {/* Filters */}
+              <div className="flex flex-wrap gap-4 items-center">
+                <div className="relative flex-1 min-w-[200px] max-w-md">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    placeholder="Search learners..."
+                    className="pl-10"
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                  />
+                </div>
+                <Select value={statusFilter} onValueChange={setStatusFilter}>
+                  <SelectTrigger className="w-[150px]">
+                    <SelectValue placeholder="Status" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All Status</SelectItem>
+                    <SelectItem value="Not Started">Not Started</SelectItem>
+                    <SelectItem value="In-Progress">In Progress</SelectItem>
+                    <SelectItem value="Completed">Completed</SelectItem>
+                  </SelectContent>
+                </Select>
+                <Select value={stageFilter} onValueChange={setStageFilter}>
+                  <SelectTrigger className="w-[150px]">
+                    <SelectValue placeholder="Stage" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All Stages</SelectItem>
+                    <SelectItem value="Pre-assessment">Pre-assessment</SelectItem>
+                    <SelectItem value="Pre-learning">Pre-learning</SelectItem>
+                    <SelectItem value="Classroom">Classroom</SelectItem>
+                    <SelectItem value="Post-learning">Post-learning</SelectItem>
+                  </SelectContent>
+                </Select>
+                <Select value={cohortFilter} onValueChange={setCohortFilter}>
+                  <SelectTrigger className="w-[150px]">
+                    <SelectValue placeholder="Cohort" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All Cohorts</SelectItem>
+                    <SelectItem value="Cohort A">Cohort A</SelectItem>
+                    <SelectItem value="Cohort B">Cohort B</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* Learners Table */}
+              <div className="rounded-md border">
+                <Table>
+                  <TableHeader className="sticky-header">
+                    <TableRow>
+                      <TableHead className="w-[200px]">Learner</TableHead>
+                      <TableHead className="w-[200px]">Current Item</TableHead>
+                      <TableHead className="w-[100px]">Progress</TableHead>
+                      <TableHead className="w-[150px]">Next Item</TableHead>
+                      <TableHead className="w-[120px]">Last Activity</TableHead>
+                      <TableHead className="w-[100px]">Stage</TableHead>
+                      <TableHead className="w-[80px]">Actions</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {filteredLearners.map((learner) => (
+                      <TableRow key={learner.id} className="min-h-[48px]">
+                        <TableCell>
+                          <div>
+                            <p className="font-medium">{learner.name}</p>
+                            <p className="text-sm text-muted-foreground">{learner.email}</p>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            {getTypeIcon(learner.currentItem.type)}
+                            <div>
+                              <p className="font-medium text-sm">{learner.currentItem.title}</p>
+                              {getStatusBadge(learner.currentItem.status)}
+                            </div>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <div className="space-y-1">
+                            <Progress value={learner.progressPct} className="w-16" />
+                            <span className="text-sm">{learner.progressPct}%</span>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          {learner.nextItem ? (
+                            <div className="flex items-center gap-2">
+                              {getTypeIcon(learner.nextItem.type)}
+                              <span className="text-sm">{learner.nextItem.title}</span>
+                            </div>
+                          ) : (
+                            <span className="text-sm text-muted-foreground">None</span>
+                          )}
+                        </TableCell>
+                        <TableCell className="text-sm text-muted-foreground">
+                          {learner.lastActivity}
+                        </TableCell>
+                        <TableCell>
+                          <Badge variant="outline" className="text-xs">
+                            {learner.stage}
+                          </Badge>
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex gap-1">
+                            <Button 
+                              variant="ghost" 
+                              size="sm"
+                              onClick={() => handleViewLearner(learner)}
+                              className="min-tap-44"
+                              aria-label={`View details for ${learner.name}`}
+                            >
+                              <Eye className="h-4 w-4" />
+                            </Button>
+                            <Button 
+                              variant="ghost" 
+                              size="sm"
+                              className="min-tap-44"
+                              aria-label={`Send reminder to ${learner.name}`}
+                            >
+                              <Mail className="h-4 w-4" />
+                            </Button>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </TabsContent>
+
+            {/* Calendar Tab */}
+            <TabsContent value="calendar" className="space-y-6 mt-6">
+              <div className="text-center py-12 text-muted-foreground">
+                <Calendar className="h-12 w-12 mx-auto mb-4" />
+                <h3 className="text-lg font-semibold mb-2">Programme Calendar</h3>
+                <p>Programme-scoped calendar with webinars, offline classes, and deadlines would be displayed here</p>
+              </div>
+            </TabsContent>
+
+            {/* Reports Tab */}
+            <TabsContent value="reports" className="space-y-6 mt-6">
+              <div className="text-center py-12 text-muted-foreground">
+                <BarChart3 className="h-12 w-12 mx-auto mb-4" />
+                <h3 className="text-lg font-semibold mb-2">Programme Reports</h3>
+                <p>Detailed analytics and reporting for this programme would be displayed here</p>
+              </div>
+            </TabsContent>
+
+            {/* Activity Tab */}
+            <TabsContent value="activity" className="space-y-6 mt-6">
+              <div className="text-center py-12 text-muted-foreground">
+                <Activity className="h-12 w-12 mx-auto mb-4" />
+                <h3 className="text-lg font-semibold mb-2">Activity Log</h3>
+                <p>Programme activity audit trail would be displayed here</p>
+              </div>
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+
+      {/* Learner Details Drawer */}
+      <Sheet open={showLearnerDrawer} onOpenChange={setShowLearnerDrawer}>
+        <SheetContent className="w-[480px] sm:w-[540px]">
+          <SheetHeader>
+            <SheetTitle>{selectedLearner?.name}</SheetTitle>
+            <SheetDescription>Learner progress and assignment details</SheetDescription>
+          </SheetHeader>
+          {selectedLearner && (
+            <div className="space-y-6 mt-6">
+              <div>
+                <h4 className="font-medium mb-2">Assignment Info</h4>
+                <div className="space-y-2 text-sm">
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">Start Date:</span>
+                    <span>{mockAssignment.startDate}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">End Date:</span>
+                    <span>{mockAssignment.endDate}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">Cohort:</span>
+                    <span>{selectedLearner.cohort}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <h4 className="font-medium mb-2">Stage Timeline</h4>
+                <div className="space-y-3">
+                  {[
+                    { name: 'Pre-assessment', completed: selectedLearner.stage !== 'Pre-assessment' },
+                    { name: 'Pre-learning', completed: !['Pre-assessment', 'Pre-learning'].includes(selectedLearner.stage) },
+                    { name: 'Classroom', completed: !['Pre-assessment', 'Pre-learning', 'Classroom'].includes(selectedLearner.stage) },
+                    { name: 'Post-learning', completed: false }
+                  ].map((stage, index) => (
+                    <div key={index} className="flex items-center gap-3">
+                      <div className={`w-4 h-4 rounded-full border-2 ${
+                        stage.completed ? 'bg-status-success border-status-success' : 
+                        selectedLearner.stage === stage.name ? 'border-brand-primary bg-brand-primary' :
+                        'border-muted'
+                      }`}>
+                        {stage.completed && <CheckCircle className="w-4 h-4 text-white" />}
+                      </div>
+                      <span className={`text-sm ${
+                        selectedLearner.stage === stage.name ? 'font-medium' : 'text-muted-foreground'
+                      }`}>
+                        {stage.name}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="flex gap-2">
+                <Button variant="outline" className="flex-1">
+                  <Eye className="h-4 w-4 mr-2" />
+                  Open Learner Record
+                </Button>
+                <Button variant="outline" className="flex-1">
+                  <Mail className="h-4 w-4 mr-2" />
+                  Send Reminder
+                </Button>
+              </div>
+            </div>
+          )}
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/ProgrammeSchedule.tsx b/src/components/ProgrammeSchedule.tsx
new file mode 100644
index 0000000..2033651
--- /dev/null
+++ b/src/components/ProgrammeSchedule.tsx
@@ -0,0 +1,367 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
+import { Badge } from './ui/badge';
+import { Button } from './ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { 
+  Calendar, 
+  Clock, 
+  Users, 
+  Video, 
+  FileText, 
+  ChevronLeft, 
+  ChevronRight,
+  Filter
+} from 'lucide-react';
+
+interface ScheduleEvent {
+  id: string;
+  title: string;
+  type: 'webinar' | 'workshop' | 'assessment' | 'deadline' | 'class';
+  date: Date;
+  time: string;
+  duration?: string;
+  programme: string;
+  attendees?: number;
+  maxAttendees?: number;
+  status: 'upcoming' | 'live' | 'completed';
+}
+
+interface ProgrammeScheduleProps {
+  events?: ScheduleEvent[];
+  onEventClick?: (event: ScheduleEvent) => void;
+}
+
+const mockEvents: ScheduleEvent[] = [
+  {
+    id: 'evt-001',
+    title: 'Leadership Fundamentals Webinar',
+    type: 'webinar',
+    date: new Date('2024-12-28'),
+    time: '10:00 AM',
+    duration: '90 min',
+    programme: 'Leadership Development',
+    attendees: 32,
+    maxAttendees: 50,
+    status: 'upcoming'
+  },
+  {
+    id: 'evt-002',
+    title: 'Technical Skills Assessment',
+    type: 'assessment',
+    date: new Date('2024-12-28'),
+    time: '2:00 PM',
+    duration: '60 min',
+    programme: 'Technical Skills',
+    status: 'upcoming'
+  },
+  {
+    id: 'evt-003',
+    title: 'Communication Workshop',
+    type: 'workshop',
+    date: new Date('2024-12-29'),
+    time: '11:00 AM',
+    duration: '2 hrs',
+    programme: 'Communication Excellence',
+    attendees: 18,
+    maxAttendees: 25,
+    status: 'upcoming'
+  },
+  {
+    id: 'evt-004',
+    title: 'Project Management Live Class',
+    type: 'class',
+    date: new Date('2024-12-29'),
+    time: '3:30 PM',
+    duration: '45 min',
+    programme: 'Project Management',
+    attendees: 45,
+    maxAttendees: 60,
+    status: 'live'
+  },
+  {
+    id: 'evt-005',
+    title: 'Assignment Submission Due',
+    type: 'deadline',
+    date: new Date('2024-12-30'),
+    time: '11:59 PM',
+    programme: 'Leadership Development',
+    status: 'upcoming'
+  },
+  {
+    id: 'evt-006',
+    title: 'Data Analytics Bootcamp',
+    type: 'workshop',
+    date: new Date('2024-12-30'),
+    time: '9:00 AM',
+    duration: '4 hrs',
+    programme: 'Technical Skills',
+    attendees: 22,
+    maxAttendees: 30,
+    status: 'upcoming'
+  }
+];
+
+export const ProgrammeSchedule: React.FC<ProgrammeScheduleProps> = ({
+  events = mockEvents,
+  onEventClick
+}) => {
+  const [selectedProgramme, setSelectedProgramme] = useState('all');
+  const [selectedType, setSelectedType] = useState('all');
+  const [currentWeekStart, setCurrentWeekStart] = useState(() => {
+    const today = new Date();
+    const dayOfWeek = today.getDay();
+    const mondayDate = new Date(today);
+    mondayDate.setDate(today.getDate() - dayOfWeek + 1);
+    return mondayDate;
+  });
+
+  // Get unique programmes and types for filters
+  const programmes = Array.from(new Set(events.map(e => e.programme)));
+  const eventTypes = Array.from(new Set(events.map(e => e.type)));
+
+  // Generate week days
+  const weekDays = Array.from({ length: 7 }, (_, i) => {
+    const date = new Date(currentWeekStart);
+    date.setDate(currentWeekStart.getDate() + i);
+    return date;
+  });
+
+  // Filter and group events by date
+  const filteredEvents = events.filter(event => {
+    const matchesProgramme = selectedProgramme === 'all' || event.programme === selectedProgramme;
+    const matchesType = selectedType === 'all' || event.type === selectedType;
+    return matchesProgramme && matchesType;
+  });
+
+  const eventsByDate = weekDays.reduce((acc, date) => {
+    const dateKey = date.toDateString();
+    acc[dateKey] = filteredEvents.filter(event => 
+      event.date.toDateString() === dateKey
+    ).sort((a, b) => a.time.localeCompare(b.time));
+    return acc;
+  }, {} as Record<string, ScheduleEvent[]>);
+
+  const navigateWeek = (direction: 'prev' | 'next') => {
+    const newDate = new Date(currentWeekStart);
+    newDate.setDate(currentWeekStart.getDate() + (direction === 'next' ? 7 : -7));
+    setCurrentWeekStart(newDate);
+  };
+
+  const getEventIcon = (type: ScheduleEvent['type']) => {
+    switch (type) {
+      case 'webinar':
+        return <Video className="h-3 w-3" />;
+      case 'workshop':
+        return <Users className="h-3 w-3" />;
+      case 'assessment':
+        return <FileText className="h-3 w-3" />;
+      case 'deadline':
+        return <Clock className="h-3 w-3" />;
+      case 'class':
+        return <Calendar className="h-3 w-3" />;
+      default:
+        return <Calendar className="h-3 w-3" />;
+    }
+  };
+
+  const getEventColor = (type: ScheduleEvent['type'], status: ScheduleEvent['status']) => {
+    if (status === 'live') return 'bg-status-error text-status-error-foreground';
+    if (status === 'completed') return 'bg-muted text-muted-foreground';
+    
+    switch (type) {
+      case 'webinar':
+        return 'bg-brand-primary text-brand-navy-foreground';
+      case 'workshop':
+        return 'bg-status-success text-status-success-foreground';
+      case 'assessment':
+        return 'bg-status-warn text-status-warn-foreground';
+      case 'deadline':
+        return 'bg-status-error text-status-error-foreground';
+      case 'class':
+        return 'bg-brand-charcoal text-brand-charcoal-foreground';
+      default:
+        return 'bg-secondary text-secondary-foreground';
+    }
+  };
+
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString('en-AU', { 
+      weekday: 'short', 
+      day: '2-digit',
+      month: 'short'
+    });
+  };
+
+  const isToday = (date: Date) => {
+    const today = new Date();
+    return date.toDateString() === today.toDateString();
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          <div>
+            <CardTitle>Programme Schedule</CardTitle>
+            <CardDescription>Weekly view of upcoming classes, webinars, and deadlines</CardDescription>
+          </div>
+          <div className="flex items-center gap-2">
+            <Select value={selectedProgramme} onValueChange={setSelectedProgramme}>
+              <SelectTrigger className="w-[180px]">
+                <Filter className="h-4 w-4 mr-2" />
+                <SelectValue placeholder="All Programmes" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Programmes</SelectItem>
+                {programmes.map(programme => (
+                  <SelectItem key={programme} value={programme}>
+                    {programme}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select value={selectedType} onValueChange={setSelectedType}>
+              <SelectTrigger className="w-[140px]">
+                <SelectValue placeholder="All Types" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Types</SelectItem>
+                {eventTypes.map(type => (
+                  <SelectItem key={type} value={type}>
+                    {type.charAt(0).toUpperCase() + type.slice(1)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {/* Week Navigation */}
+        <div className="flex items-center justify-between mb-6">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => navigateWeek('prev')}
+            className="min-tap-44"
+          >
+            <ChevronLeft className="h-4 w-4 mr-1" />
+            Previous Week
+          </Button>
+          <div className="text-center">
+            <h3 className="font-semibold">
+              {weekDays[0].toLocaleDateString('en-AU', { day: '2-digit', month: 'short' })} - {weekDays[6].toLocaleDateString('en-AU', { day: '2-digit', month: 'short', year: 'numeric' })}
+            </h3>
+            <p className="text-sm text-muted-foreground">Week View</p>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => navigateWeek('next')}
+            className="min-tap-44"
+          >
+            Next Week
+            <ChevronRight className="h-4 w-4 ml-1" />
+          </Button>
+        </div>
+
+        {/* Horizontal Weekly Calendar */}
+        <div className="grid grid-cols-7 gap-2">
+          {weekDays.map((date, dayIndex) => {
+            const dateKey = date.toDateString();
+            const dayEvents = eventsByDate[dateKey] || [];
+            
+            return (
+              <div 
+                key={dayIndex} 
+                className={`
+                  min-h-[120px] p-3 rounded-lg border
+                  ${isToday(date) 
+                    ? 'bg-brand-primary/5 border-brand-primary/20' 
+                    : 'bg-card border-chrome-divider'
+                  }
+                `}
+              >
+                <div className="text-center mb-3">
+                  <p className={`font-medium ${isToday(date) ? 'text-brand-primary' : ''}`}>
+                    {formatDate(date)}
+                  </p>
+                  {isToday(date) && (
+                    <Badge variant="secondary" className="text-xs mt-1">Today</Badge>
+                  )}
+                </div>
+                
+                <div className="space-y-1">
+                  {dayEvents.slice(0, 3).map((event) => (
+                    <button
+                      key={event.id}
+                      onClick={() => onEventClick?.(event)}
+                      className={`
+                        w-full p-2 rounded text-left text-xs transition-all duration-200
+                        hover:shadow-sm hover:scale-105 min-tap-44
+                        ${getEventColor(event.type, event.status)}
+                      `}
+                    >
+                      <div className="flex items-center gap-1 mb-1">
+                        {getEventIcon(event.type)}
+                        <span className="font-medium truncate">{event.title}</span>
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <span>{event.time}</span>
+                        {event.status === 'live' && (
+                          <Badge variant="destructive" className="text-xs px-1 py-0">
+                            LIVE
+                          </Badge>
+                        )}
+                      </div>
+                      {event.attendees && (
+                        <div className="flex items-center gap-1 mt-1 text-xs opacity-80">
+                          <Users className="h-2 w-2" />
+                          <span>{event.attendees}/{event.maxAttendees}</span>
+                        </div>
+                      )}
+                    </button>
+                  ))}
+                  
+                  {dayEvents.length > 3 && (
+                    <div className="text-center">
+                      <span className="text-xs text-muted-foreground">
+                        +{dayEvents.length - 3} more
+                      </span>
+                    </div>
+                  )}
+                  
+                  {dayEvents.length === 0 && (
+                    <div className="text-center py-4">
+                      <span className="text-xs text-muted-foreground">No events</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Legend */}
+        <div className="mt-6 pt-4 border-t border-chrome-divider">
+          <p className="text-sm font-medium mb-2">Event Types:</p>
+          <div className="flex flex-wrap gap-2">
+            {[
+              { type: 'webinar', label: 'Webinar' },
+              { type: 'workshop', label: 'Workshop' },
+              { type: 'class', label: 'Live Class' },
+              { type: 'assessment', label: 'Assessment' },
+              { type: 'deadline', label: 'Deadline' }
+            ].map(({ type, label }) => (
+              <div key={type} className="flex items-center gap-1">
+                <div className={`w-3 h-3 rounded ${getEventColor(type as ScheduleEvent['type'], 'upcoming').replace('text-', 'bg-').split(' ')[0]}`} />
+                <span className="text-xs text-muted-foreground">{label}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
\ No newline at end of file
diff --git a/src/components/ProgrammesTable.tsx b/src/components/ProgrammesTable.tsx
new file mode 100644
index 0000000..091ea41
--- /dev/null
+++ b/src/components/ProgrammesTable.tsx
@@ -0,0 +1,485 @@
+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
+import { Badge } from './ui/badge';
+import { Input } from './ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from './ui/dialog';
+import { 
+  Search, 
+  Filter, 
+  Download, 
+  Users, 
+  Calendar,
+  BookOpen,
+  RefreshCw,
+  Eye,
+  UserPlus,
+  ChevronLeft,
+  ChevronRight
+} from 'lucide-react';
+
+interface Assignment {
+  startDate: Date;
+  endDate: Date;
+}
+
+interface Programme {
+  programmeId: string;
+  title: string;
+  status: 'Active' | 'Upcoming' | 'Completed';
+  coursesCount: number;
+  contentCount: number;
+  assignment: Assignment;
+  learnersAssigned: number;
+  type?: 'programme' | 'course';
+}
+
+interface ProgrammesTableProps {
+  programmes?: Programme[];
+  onViewProgramme?: (programmeId: string) => void;
+  onViewCourse?: (courseId: string) => void;
+  onAssignLearners?: (programmeId: string) => void;
+  onDownloadTracker?: (programmeId: string) => void;
+  userAccessLevel?: 'full' | 'course-only'; // New prop to determine user access
+}
+
+const mockProgrammes: Programme[] = [
+  {
+    programmeId: 'prog-001',
+    title: 'Leadership Development Program',
+    status: 'Active',
+    coursesCount: 8,
+    contentCount: 24,
+    assignment: {
+      startDate: new Date('2024-01-15'),
+      endDate: new Date('2024-06-30')
+    },
+    learnersAssigned: 45,
+    type: 'programme'
+  },
+  {
+    programmeId: 'prog-002',
+    title: 'Technical Skills Bootcamp',
+    status: 'Active',
+    coursesCount: 12,
+    contentCount: 36,
+    assignment: {
+      startDate: new Date('2024-02-01'),
+      endDate: new Date('2024-08-31')
+    },
+    learnersAssigned: 38,
+    type: 'programme'
+  },
+  {
+    programmeId: 'prog-003',
+    title: 'Communication Excellence',
+    status: 'Upcoming',
+    coursesCount: 6,
+    contentCount: 18,
+    assignment: {
+      startDate: new Date('2024-03-01'),
+      endDate: new Date('2024-05-31')
+    },
+    learnersAssigned: 28,
+    type: 'programme'
+  },
+  {
+    programmeId: 'prog-004',
+    title: 'Project Management Certification',
+    status: 'Active',
+    coursesCount: 10,
+    contentCount: 30,
+    assignment: {
+      startDate: new Date('2024-01-01'),
+      endDate: new Date('2024-12-31')
+    },
+    learnersAssigned: 52,
+    type: 'programme'
+  },
+  {
+    programmeId: 'prog-005',
+    title: 'Digital Marketing Mastery',
+    status: 'Completed',
+    coursesCount: 5,
+    contentCount: 15,
+    assignment: {
+      startDate: new Date('2023-09-01'),
+      endDate: new Date('2023-12-31')
+    },
+    learnersAssigned: 32,
+    type: 'programme'
+  },
+  {
+    programmeId: 'prog-006',
+    title: 'Data Analytics Fundamentals',
+    status: 'Completed',
+    coursesCount: 7,
+    contentCount: 21,
+    assignment: {
+      startDate: new Date('2023-10-15'),
+      endDate: new Date('2024-01-15')
+    },
+    learnersAssigned: 29,
+    type: 'programme'
+  }
+];
+
+const mockCourses: Programme[] = [
+  {
+    programmeId: 'course-001',
+    title: 'Strategic Thinking Course',
+    status: 'Active',
+    coursesCount: 1,
+    contentCount: 8,
+    assignment: {
+      startDate: new Date('2024-01-15'),
+      endDate: new Date('2024-03-15')
+    },
+    learnersAssigned: 15,
+    type: 'course'
+  },
+  {
+    programmeId: 'course-002',
+    title: 'Data Analysis Fundamentals',
+    status: 'Active',
+    coursesCount: 1,
+    contentCount: 12,
+    assignment: {
+      startDate: new Date('2024-02-01'),
+      endDate: new Date('2024-04-30')
+    },
+    learnersAssigned: 22,
+    type: 'course'
+  },
+  {
+    programmeId: 'course-003',
+    title: 'Public Speaking Mastery',
+    status: 'Upcoming',
+    coursesCount: 1,
+    contentCount: 6,
+    assignment: {
+      startDate: new Date('2024-03-01'),
+      endDate: new Date('2024-04-15')
+    },
+    learnersAssigned: 18,
+    type: 'course'
+  },
+  {
+    programmeId: 'course-004',
+    title: 'Agile Methodology Workshop',
+    status: 'Active',
+    coursesCount: 1,
+    contentCount: 10,
+    assignment: {
+      startDate: new Date('2024-01-01'),
+      endDate: new Date('2024-06-30')
+    },
+    learnersAssigned: 25,
+    type: 'course'
+  },
+  {
+    programmeId: 'course-005',
+    title: 'Excel Advanced Techniques',
+    status: 'Completed',
+    coursesCount: 1,
+    contentCount: 5,
+    assignment: {
+      startDate: new Date('2023-11-01'),
+      endDate: new Date('2023-12-31')
+    },
+    learnersAssigned: 12,
+    type: 'course'
+  }
+];
+
+export const ProgrammesTable: React.FC<ProgrammesTableProps> = ({
+  programmes,
+  onViewProgramme,
+  onViewCourse,
+  onAssignLearners,
+  onDownloadTracker,
+  userAccessLevel = 'full'
+}) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState('Active');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [isAssignModalOpen, setIsAssignModalOpen] = useState(false);
+  const [selectedProgramme, setSelectedProgramme] = useState<Programme | null>(null);
+  const [isExporting, setIsExporting] = useState(false);
+  
+  const itemsPerPage = 5;
+
+  // Determine which data to show based on user access level
+  const defaultData = userAccessLevel === 'course-only' ? mockCourses : mockProgrammes;
+  const displayData = programmes || defaultData;
+
+  const filteredProgrammes = displayData.filter(prog => {
+    const matchesSearch = prog.title.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesStatus = statusFilter === 'all' || prog.status === statusFilter;
+    return matchesSearch && matchesStatus;
+  });
+
+  // Pagination logic
+  const totalPages = Math.ceil(filteredProgrammes.length / itemsPerPage);
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const paginatedProgrammes = filteredProgrammes.slice(startIndex, endIndex);
+
+  // Reset to first page when filters change
+  React.useEffect(() => {
+    setCurrentPage(1);
+  }, [searchTerm, statusFilter]);
+
+  const formatDateRange = (assignment: Assignment) => {
+    const startDate = assignment.startDate.toLocaleDateString('en-AU', { 
+      day: '2-digit', 
+      month: 'short',
+      year: 'numeric'
+    });
+    const endDate = assignment.endDate.toLocaleDateString('en-AU', { 
+      day: '2-digit', 
+      month: 'short',
+      year: 'numeric'
+    });
+    return `${startDate} → ${endDate}`;
+  };
+
+  const handleViewItem = (item: Programme) => {
+    if (item.type === 'course') {
+      onViewCourse?.(item.programmeId);
+      console.log(`Viewing course: ${item.programmeId}`);
+    } else {
+      onViewProgramme?.(item.programmeId);
+      console.log(`Viewing programme: ${item.programmeId}`);
+    }
+  };
+
+  const handleAssignLearners = (programme: Programme) => {
+    setSelectedProgramme(programme);
+    setIsAssignModalOpen(true);
+    onAssignLearners?.(programme.programmeId);
+  };
+
+  const handleDownloadTracker = async (programmeId: string) => {
+    setIsExporting(true);
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    setIsExporting(false);
+    onDownloadTracker?.(programmeId);
+    console.log(`Downloaded tracker for programme: ${programmeId}`);
+  };
+
+  const getStatusBadgeProps = (status: Programme['status']) => {
+    switch (status) {
+      case 'Active':
+        return { variant: 'default' as const, className: 'bg-status-success text-status-success-foreground' };
+      case 'Upcoming':
+        return { variant: 'secondary' as const, className: 'bg-status-warn text-status-warn-foreground' };
+      case 'Completed':
+        return { variant: 'outline' as const, className: 'bg-muted text-muted-foreground' };
+      default:
+        return { variant: 'secondary' as const };
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          <div>
+            <CardTitle>{userAccessLevel === 'course-only' ? 'Courses' : 'Programmes'}</CardTitle>
+            <CardDescription>
+              {userAccessLevel === 'course-only' 
+                ? 'Manage course assignments and track progress'
+                : 'Manage programme assignments and track progress'
+              }
+            </CardDescription>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder={userAccessLevel === 'course-only' ? 'Search courses...' : 'Search programmes...'}
+                className="pl-10 w-[200px]"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                aria-label={userAccessLevel === 'course-only' ? 'Search courses by title' : 'Search programmes by title'}
+              />
+            </div>
+            <Select value={statusFilter} onValueChange={setStatusFilter}>
+              <SelectTrigger className="w-[140px]">
+                <Filter className="h-4 w-4 mr-2" />
+                <SelectValue placeholder="Status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Status</SelectItem>
+                <SelectItem value="Active">Active</SelectItem>
+                <SelectItem value="Upcoming">Upcoming</SelectItem>
+                <SelectItem value="Completed">Completed</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="rounded-md border" style={{ maxWidth: '1200px' }}>
+          <Table>
+            <TableHeader className="sticky-header">
+              <TableRow>
+                <TableHead className="w-[300px]">
+                  {userAccessLevel === 'course-only' ? 'Course' : 'Programme/Course'}
+                </TableHead>
+                <TableHead className="w-[150px]">
+                  {userAccessLevel === 'course-only' ? 'Content' : 'Courses / Content'}
+                </TableHead>
+                <TableHead className="w-[200px]">Start → End</TableHead>
+                <TableHead className="w-[120px]">Learners Assigned</TableHead>
+                <TableHead className="w-[200px]">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {paginatedProgrammes.map((programme) => (
+                <TableRow key={programme.programmeId} className="min-h-[44px]">
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium">{programme.title}</span>
+                      <Badge 
+                        {...getStatusBadgeProps(programme.status)}
+                        aria-label={`Programme status: ${programme.status}`}
+                      >
+                        {programme.status}
+                      </Badge>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-1 text-sm text-muted-foreground">
+                      <BookOpen className="h-4 w-4" />
+                      <span>
+                        {userAccessLevel === 'course-only' 
+                          ? `${programme.contentCount} modules`
+                          : `${programme.coursesCount} • ${programme.contentCount}`
+                        }
+                      </span>
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-sm">
+                    {formatDateRange(programme.assignment)}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-1">
+                      <Users className="h-4 w-4 text-muted-foreground" />
+                      <span className="font-medium">{programme.learnersAssigned}</span>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-1">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleViewItem(programme)}
+                        className="min-tap-44"
+                        aria-label={`View ${programme.type === 'course' ? 'course' : 'programme'} details for ${programme.title}`}
+                      >
+                        <Eye className="h-4 w-4" />
+                        <span className="sr-only">View {programme.type === 'course' ? 'Course' : 'Programme'}</span>
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleAssignLearners(programme)}
+                        className="min-tap-44"
+                        aria-label={`Assign learners to ${programme.title}`}
+                      >
+                        <UserPlus className="h-4 w-4" />
+                        <span className="sr-only">Assign Learners</span>
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleDownloadTracker(programme.programmeId)}
+                        disabled={isExporting}
+                        className="min-tap-44"
+                        aria-label={`Download tracker for ${programme.title}`}
+                      >
+                        {isExporting ? (
+                          <RefreshCw className="h-4 w-4 animate-spin" />
+                        ) : (
+                          <Download className="h-4 w-4" />
+                        )}
+                        <span className="sr-only">Download Tracker</span>
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+        
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between mt-4">
+            <div className="text-sm text-muted-foreground">
+              Showing {startIndex + 1} to {Math.min(endIndex, filteredProgrammes.length)} of {filteredProgrammes.length} {userAccessLevel === 'course-only' ? 'courses' : 'programmes'}
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
+                disabled={currentPage === 1}
+                className="min-tap-44"
+              >
+                <ChevronLeft className="h-4 w-4 mr-1" />
+                Previous
+              </Button>
+              <span className="text-sm text-muted-foreground">
+                Page {currentPage} of {totalPages}
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
+                disabled={currentPage === totalPages}
+                className="min-tap-44"
+              >
+                Next
+                <ChevronRight className="h-4 w-4 ml-1" />
+              </Button>
+            </div>
+          </div>
+        )}
+        
+        {filteredProgrammes.length === 0 && (
+          <div className="text-center py-8">
+            <p className="text-muted-foreground">
+              No {userAccessLevel === 'course-only' ? 'courses' : 'programmes'} found matching your criteria.
+            </p>
+          </div>
+        )}
+
+        {/* Assignment Modal */}
+        <Dialog open={isAssignModalOpen} onOpenChange={setIsAssignModalOpen}>
+          <DialogContent className="sm:max-w-[600px]" role="dialog" aria-modal="true">
+            <DialogHeader>
+              <DialogTitle>
+                Assign Learners to {userAccessLevel === 'course-only' ? 'Course' : 'Programme'}
+              </DialogTitle>
+              <DialogDescription>
+                {selectedProgramme && `Assign learners to "${selectedProgramme.title}"`}
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-4 py-4">
+              <div className="text-center py-8 text-muted-foreground">
+                <UserPlus className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+                <p>Assignment wizard would be displayed here</p>
+                <p className="text-sm mt-2">Including org/individual selection, dates, HR contacts, and participant upload</p>
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </CardContent>
+    </Card>
+  );
+};
\ No newline at end of file
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 308ad2b..b8b5e23 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -34,25 +34,25 @@ const buttonVariants = cva(
   },
 );
 
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> &
+    VariantProps<typeof buttonVariants> & {
+      asChild?: boolean;
+    }
+>(({ className, variant, size, asChild = false, ...props }, ref) => {
   const Comp = asChild ? Slot : "button";
 
   return (
     <Comp
       data-slot="button"
       className={cn(buttonVariants({ variant, size, className }))}
+      ref={ref}
       {...props}
     />
   );
-}
+});
+
+Button.displayName = "Button";
 
 export { Button, buttonVariants };
diff --git a/src/global.d.ts b/src/global.d.ts
index 6c34d6c..f7f59ba 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -1,26 +1,29 @@
-// declarations.d.ts
-
-declare module "*.png" {
+declare module '*.webp' {
   const src: string;
   export default src;
 }
 
-declare module "*.jpg" {
+declare module '*.png' {
   const src: string;
   export default src;
 }
 
-declare module "*.jpeg" {
+declare module '*.jpg' {
   const src: string;
   export default src;
 }
 
-declare module "*.svg" {
-  import * as React from "react";
-  const ReactComponent: React.FunctionComponent<
-    React.SVGProps<SVGSVGElement> & { title?: string }
-  >;
-  export { ReactComponent };
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.gif' {
   const src: string;
   export default src;
 }
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..feac2e0
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,3967 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    *, :before, :after, ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-rotate-x: rotateX(0);
+      --tw-rotate-y: rotateY(0);
+      --tw-rotate-z: rotateZ(0);
+      --tw-skew-x: skewX(0);
+      --tw-skew-y: skewY(0);
+      --tw-space-y-reverse: 0;
+      --tw-space-x-reverse: 0;
+      --tw-border-style: solid;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
+      --tw-duration: initial;
+      --tw-ease: initial;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
+    }
+  }
+}
+
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --color-blue-50: oklch(.97 .014 254.604);
+    --color-blue-100: oklch(.932 .032 255.585);
+    --color-blue-200: oklch(.882 .059 254.128);
+    --color-blue-800: oklch(.424 .199 265.638);
+    --color-blue-900: oklch(.379 .146 265.522);
+    --color-black: #000;
+    --color-white: #fff;
+    --spacing: .25rem;
+    --container-sm: 24rem;
+    --container-md: 28rem;
+    --container-lg: 32rem;
+    --container-7xl: 80rem;
+    --text-xs: .75rem;
+    --text-xs--line-height: calc(1 / .75);
+    --text-sm: .875rem;
+    --text-sm--line-height: calc(1.25 / .875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --tracking-tight: -.025em;
+    --tracking-widest: .1em;
+    --leading-relaxed: 1.625;
+    --radius-xs: .125rem;
+    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
+    --animate-spin: spin 1s linear infinite;
+    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
+    --blur-sm: 8px;
+    --default-transition-duration: .15s;
+    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    --default-font-family: var(--font-sans);
+    --default-font-feature-settings: var(--font-sans--font-feature-settings);
+    --default-font-variation-settings: var(--font-sans--font-variation-settings);
+    --default-mono-font-family: var(--font-mono);
+    --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
+    --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-border: var(--border);
+    --color-brand-primary: var(--brand-primary);
+  }
+}
+
+@layer base {
+  *, :after, :before, ::backdrop {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
+
+  ::file-selector-button {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
+
+  html, :host {
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    line-height: 1.5;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  body {
+    line-height: inherit;
+  }
+
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+
+  b, strong {
+    font-weight: bolder;
+  }
+
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  sub, sup {
+    vertical-align: baseline;
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+  }
+
+  sub {
+    bottom: -.25em;
+  }
+
+  sup {
+    top: -.5em;
+  }
+
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+
+  :-moz-focusring {
+    outline: auto;
+  }
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  ol, ul, menu {
+    list-style: none;
+  }
+
+  img, svg, video, canvas, audio, iframe, embed, object {
+    vertical-align: middle;
+    display: block;
+  }
+
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  button, input, select, optgroup, textarea {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
+
+  ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
+
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+
+  ::placeholder {
+    opacity: 1;
+    color: currentColor;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    ::placeholder {
+      color: color-mix(in oklab, currentColor 50%, transparent);
+    }
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-year-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-month-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-day-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-hour-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-minute-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-second-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-millisecond-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  button, input:where([type="button"], [type="reset"], [type="submit"]) {
+    appearance: button;
+  }
+
+  ::file-selector-button {
+    appearance: button;
+  }
+
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
+
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+
+  * {
+    border-color: var(--border);
+    outline-color: var(--ring);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    * {
+      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+
+  * {
+    border-color: var(--border);
+    outline-color: var(--ring);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    * {
+      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+
+  html {
+    font-size: var(--font-size);
+    scroll-behavior: smooth;
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family: Inter, system-ui, -apple-system, sans-serif;
+    overflow-x: hidden;
+  }
+
+  :focus {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
+  button:focus, input:focus, textarea:focus, select:focus, a:focus {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+
+  .sr-only {
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .sr-only:focus {
+    width: auto;
+    height: auto;
+    padding: inherit;
+    margin: inherit;
+    clip: auto;
+    white-space: normal;
+    position: static;
+    overflow: visible;
+  }
+
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h1 {
+    font-size: var(--text-32);
+    font-weight: var(--font-weight-bold);
+    letter-spacing: -.025em;
+    line-height: 1.2;
+  }
+
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h2 {
+    font-size: var(--text-28);
+    font-weight: var(--font-weight-semibold);
+    letter-spacing: -.025em;
+    line-height: 1.3;
+  }
+
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h3 {
+    font-size: var(--text-24);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.4;
+  }
+
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h4 {
+    font-size: var(--text-20);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h5 {
+    font-size: var(--text-18);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h6 {
+    font-size: var(--text-16);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) p {
+    font-size: var(--text-16);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.6;
+  }
+
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) label, :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) button {
+    font-size: var(--text-16);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) input, :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) textarea, :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) select {
+    font-size: var(--text-16);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.5;
+  }
+
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) small, :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) .text-sm {
+    font-size: var(--text-14);
+    line-height: 1.4;
+  }
+
+  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) .text-xs {
+    font-size: var(--text-14);
+    line-height: 1.3;
+  }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: none;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--muted-foreground);
+    opacity: .3;
+    border-radius: 3px;
+    transition: opacity .2s;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    opacity: .5;
+  }
+
+  ::-webkit-scrollbar-thumb:active {
+    opacity: .7;
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--muted-foreground) transparent;
+  }
+}
+
+@layer utilities {
+  .\@container\/card-header {
+    container: card-header / inline-size;
+  }
+
+  .pointer-events-none {
+    pointer-events: none;
+  }
+
+  .sr-only {
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .absolute {
+    position: absolute;
+  }
+
+  .fixed {
+    position: fixed;
+  }
+
+  .relative {
+    position: relative;
+  }
+
+  .sticky {
+    position: sticky;
+  }
+
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
+
+  .inset-x-0 {
+    inset-inline: calc(var(--spacing) * 0);
+  }
+
+  .inset-y-0 {
+    inset-block: calc(var(--spacing) * 0);
+  }
+
+  .-top-1 {
+    top: calc(var(--spacing) * -1);
+  }
+
+  .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
+
+  .top-1\/2 {
+    top: 50%;
+  }
+
+  .top-4 {
+    top: calc(var(--spacing) * 4);
+  }
+
+  .top-\[50\%\] {
+    top: 50%;
+  }
+
+  .-right-1 {
+    right: calc(var(--spacing) * -1);
+  }
+
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
+
+  .right-2 {
+    right: calc(var(--spacing) * 2);
+  }
+
+  .right-4 {
+    right: calc(var(--spacing) * 4);
+  }
+
+  .right-6 {
+    right: calc(var(--spacing) * 6);
+  }
+
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
+
+  .bottom-6 {
+    bottom: calc(var(--spacing) * 6);
+  }
+
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
+
+  .left-2 {
+    left: calc(var(--spacing) * 2);
+  }
+
+  .left-3 {
+    left: calc(var(--spacing) * 3);
+  }
+
+  .left-\[50\%\] {
+    left: 50%;
+  }
+
+  .z-10 {
+    z-index: 10;
+  }
+
+  .z-20 {
+    z-index: 20;
+  }
+
+  .z-40 {
+    z-index: 40;
+  }
+
+  .z-50 {
+    z-index: 50;
+  }
+
+  .col-start-2 {
+    grid-column-start: 2;
+  }
+
+  .row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+
+  .row-start-1 {
+    grid-row-start: 1;
+  }
+
+  .-mx-1 {
+    margin-inline: calc(var(--spacing) * -1);
+  }
+
+  .mx-auto {
+    margin-inline: auto;
+  }
+
+  .my-1 {
+    margin-block: calc(var(--spacing) * 1);
+  }
+
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * .5);
+  }
+
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
+
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
+
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
+
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
+
+  .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
+
+  .mt-auto {
+    margin-top: auto;
+  }
+
+  .mr-1 {
+    margin-right: calc(var(--spacing) * 1);
+  }
+
+  .mr-2 {
+    margin-right: calc(var(--spacing) * 2);
+  }
+
+  .mr-3 {
+    margin-right: calc(var(--spacing) * 3);
+  }
+
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
+
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
+
+  .ml-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
+
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
+
+  .ml-10 {
+    margin-left: calc(var(--spacing) * 10);
+  }
+
+  .ml-auto {
+    margin-left: auto;
+  }
+
+  .line-clamp-1 {
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  .line-clamp-2 {
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  .block {
+    display: block;
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .grid {
+    display: grid;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  .inline-flex {
+    display: inline-flex;
+  }
+
+  .table {
+    display: table;
+  }
+
+  .table-caption {
+    display: table-caption;
+  }
+
+  .table-cell {
+    display: table-cell;
+  }
+
+  .table-row {
+    display: table-row;
+  }
+
+  .field-sizing-content {
+    field-sizing: content;
+  }
+
+  .size-2 {
+    width: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 2);
+  }
+
+  .size-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
+
+  .size-4 {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+
+  .size-9 {
+    width: calc(var(--spacing) * 9);
+    height: calc(var(--spacing) * 9);
+  }
+
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
+
+  .h-3 {
+    height: calc(var(--spacing) * 3);
+  }
+
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
+
+  .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
+
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
+
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
+
+  .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
+
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+
+  .h-12 {
+    height: calc(var(--spacing) * 12);
+  }
+
+  .h-16 {
+    height: calc(var(--spacing) * 16);
+  }
+
+  .h-24 {
+    height: calc(var(--spacing) * 24);
+  }
+
+  .h-32 {
+    height: calc(var(--spacing) * 32);
+  }
+
+  .h-64 {
+    height: calc(var(--spacing) * 64);
+  }
+
+  .h-96 {
+    height: calc(var(--spacing) * 96);
+  }
+
+  .h-\[calc\(100\%-1px\)\] {
+    height: calc(100% - 1px);
+  }
+
+  .h-\[var\(--radix-select-trigger-height\)\] {
+    height: var(--radix-select-trigger-height);
+  }
+
+  .h-auto {
+    height: auto;
+  }
+
+  .h-full {
+    height: 100%;
+  }
+
+  .h-px {
+    height: 1px;
+  }
+
+  .max-h-\(--radix-dropdown-menu-content-available-height\) {
+    max-height: var(--radix-dropdown-menu-content-available-height);
+  }
+
+  .max-h-\(--radix-select-content-available-height\) {
+    max-height: var(--radix-select-content-available-height);
+  }
+
+  .min-h-4 {
+    min-height: calc(var(--spacing) * 4);
+  }
+
+  .min-h-16 {
+    min-height: calc(var(--spacing) * 16);
+  }
+
+  .min-h-\[44px\] {
+    min-height: 44px;
+  }
+
+  .min-h-\[48px\] {
+    min-height: 48px;
+  }
+
+  .min-h-\[60vh\] {
+    min-height: 60vh;
+  }
+
+  .min-h-\[100px\] {
+    min-height: 100px;
+  }
+
+  .min-h-\[120px\] {
+    min-height: 120px;
+  }
+
+  .min-h-\[calc\(100vh-4rem\)\] {
+    min-height: calc(100vh - 4rem);
+  }
+
+  .min-h-screen {
+    min-height: 100vh;
+  }
+
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
+
+  .w-3 {
+    width: calc(var(--spacing) * 3);
+  }
+
+  .w-3\/4 {
+    width: 75%;
+  }
+
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
+
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
+
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
+
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
+
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
+
+  .w-12 {
+    width: calc(var(--spacing) * 12);
+  }
+
+  .w-16 {
+    width: calc(var(--spacing) * 16);
+  }
+
+  .w-24 {
+    width: calc(var(--spacing) * 24);
+  }
+
+  .w-32 {
+    width: calc(var(--spacing) * 32);
+  }
+
+  .w-48 {
+    width: calc(var(--spacing) * 48);
+  }
+
+  .w-56 {
+    width: calc(var(--spacing) * 56);
+  }
+
+  .w-64 {
+    width: calc(var(--spacing) * 64);
+  }
+
+  .w-80 {
+    width: calc(var(--spacing) * 80);
+  }
+
+  .w-96 {
+    width: calc(var(--spacing) * 96);
+  }
+
+  .w-\[50px\] {
+    width: 50px;
+  }
+
+  .w-\[80px\] {
+    width: 80px;
+  }
+
+  .w-\[100px\] {
+    width: 100px;
+  }
+
+  .w-\[120px\] {
+    width: 120px;
+  }
+
+  .w-\[140px\] {
+    width: 140px;
+  }
+
+  .w-\[150px\] {
+    width: 150px;
+  }
+
+  .w-\[160px\] {
+    width: 160px;
+  }
+
+  .w-\[180px\] {
+    width: 180px;
+  }
+
+  .w-\[200px\] {
+    width: 200px;
+  }
+
+  .w-\[220px\] {
+    width: 220px;
+  }
+
+  .w-\[250px\] {
+    width: 250px;
+  }
+
+  .w-\[280px\] {
+    width: 280px;
+  }
+
+  .w-\[300px\] {
+    width: 300px;
+  }
+
+  .w-\[480px\] {
+    width: 480px;
+  }
+
+  .w-\[500px\] {
+    width: 500px;
+  }
+
+  .w-\[600px\] {
+    width: 600px;
+  }
+
+  .w-auto {
+    width: auto;
+  }
+
+  .w-fit {
+    width: fit-content;
+  }
+
+  .w-full {
+    width: 100%;
+  }
+
+  .max-w-7xl {
+    max-width: var(--container-7xl);
+  }
+
+  .max-w-\[calc\(100\%-2rem\)\] {
+    max-width: calc(100% - 2rem);
+  }
+
+  .max-w-md {
+    max-width: var(--container-md);
+  }
+
+  .max-w-none {
+    max-width: none;
+  }
+
+  .max-w-sm {
+    max-width: var(--container-sm);
+  }
+
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
+
+  .min-w-\[8rem\] {
+    min-width: 8rem;
+  }
+
+  .min-w-\[120px\] {
+    min-width: 120px;
+  }
+
+  .min-w-\[200px\] {
+    min-width: 200px;
+  }
+
+  .min-w-\[248px\] {
+    min-width: 248px;
+  }
+
+  .min-w-\[var\(--radix-select-trigger-width\)\] {
+    min-width: var(--radix-select-trigger-width);
+  }
+
+  .flex-1 {
+    flex: 1;
+  }
+
+  .flex-shrink-0, .shrink-0 {
+    flex-shrink: 0;
+  }
+
+  .caption-bottom {
+    caption-side: bottom;
+  }
+
+  .origin-\(--radix-dropdown-menu-content-transform-origin\) {
+    transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+  }
+
+  .origin-\(--radix-select-content-transform-origin\) {
+    transform-origin: var(--radix-select-content-transform-origin);
+  }
+
+  .translate-x-\[-50\%\] {
+    --tw-translate-x: -50%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .translate-y-0\.5 {
+    --tw-translate-y: calc(var(--spacing) * .5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .translate-y-\[-50\%\] {
+    --tw-translate-y: -50%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .transform {
+    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
+  }
+
+  .animate-pulse {
+    animation: var(--animate-pulse);
+  }
+
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
+
+  .cursor-default {
+    cursor: default;
+  }
+
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
+
+  .cursor-pointer {
+    cursor: pointer;
+  }
+
+  .resize-none {
+    resize: none;
+  }
+
+  .scroll-my-1 {
+    scroll-margin-block: calc(var(--spacing) * 1);
+  }
+
+  .auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  .grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  .grid-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+
+  .grid-cols-\[0_1fr\] {
+    grid-template-columns: 0 1fr;
+  }
+
+  .grid-rows-\[auto_auto\] {
+    grid-template-rows: auto auto;
+  }
+
+  .flex-col {
+    flex-direction: column;
+  }
+
+  .flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+
+  .flex-row {
+    flex-direction: row;
+  }
+
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .items-baseline {
+    align-items: baseline;
+  }
+
+  .items-center {
+    align-items: center;
+  }
+
+  .items-end {
+    align-items: flex-end;
+  }
+
+  .items-start {
+    align-items: flex-start;
+  }
+
+  .justify-between {
+    justify-content: space-between;
+  }
+
+  .justify-center {
+    justify-content: center;
+  }
+
+  .justify-start {
+    justify-content: flex-start;
+  }
+
+  .justify-items-start {
+    justify-items: start;
+  }
+
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
+
+  .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
+
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
+
+  :where(.space-y-1 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.space-y-2 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.space-y-3 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.space-y-4 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.space-y-6 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.space-x-3 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .gap-y-0\.5 {
+    row-gap: calc(var(--spacing) * .5);
+  }
+
+  .self-start {
+    align-self: flex-start;
+  }
+
+  .justify-self-end {
+    justify-self: flex-end;
+  }
+
+  .truncate {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .overflow-auto {
+    overflow: auto;
+  }
+
+  .overflow-hidden {
+    overflow: hidden;
+  }
+
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+
+  .overflow-x-hidden {
+    overflow-x: hidden;
+  }
+
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+
+  .rounded {
+    border-radius: .25rem;
+  }
+
+  .rounded-\[4px\] {
+    border-radius: 4px;
+  }
+
+  .rounded-full {
+    border-radius: 3.40282e38px;
+  }
+
+  .rounded-lg {
+    border-radius: var(--radius-12);
+  }
+
+  .rounded-md {
+    border-radius: var(--radius-8);
+  }
+
+  .rounded-sm {
+    border-radius: var(--radius-4);
+  }
+
+  .rounded-xl {
+    border-radius: calc(var(--radius-12)  + 4px);
+  }
+
+  .rounded-xs {
+    border-radius: var(--radius-xs);
+  }
+
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+
+  .border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+
+  .border-r {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
+
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+
+  .border-l {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
+
+  .border-l-4 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 4px;
+  }
+
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
+
+  .border-blue-200 {
+    border-color: var(--color-blue-200);
+  }
+
+  .border-border {
+    border-color: var(--border);
+  }
+
+  .border-brand-primary {
+    border-color: var(--brand-primary);
+  }
+
+  .border-brand-primary\/20 {
+    border-color: var(--brand-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-brand-primary\/20 {
+      border-color: color-mix(in oklab, var(--brand-primary) 20%, transparent);
+    }
+  }
+
+  .border-chrome-divider {
+    border-color: var(--chrome-divider);
+  }
+
+  .border-input {
+    border-color: var(--input);
+  }
+
+  .border-muted {
+    border-color: var(--muted);
+  }
+
+  .border-status-error {
+    border-color: var(--status-error);
+  }
+
+  .border-status-error\/20 {
+    border-color: var(--status-error);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-status-error\/20 {
+      border-color: color-mix(in oklab, var(--status-error) 20%, transparent);
+    }
+  }
+
+  .border-status-success {
+    border-color: var(--status-success);
+  }
+
+  .border-status-success\/20 {
+    border-color: var(--status-success);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-status-success\/20 {
+      border-color: color-mix(in oklab, var(--status-success) 20%, transparent);
+    }
+  }
+
+  .border-status-warn\/20 {
+    border-color: var(--status-warn);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-status-warn\/20 {
+      border-color: color-mix(in oklab, var(--status-warn) 20%, transparent);
+    }
+  }
+
+  .border-transparent {
+    border-color: #0000;
+  }
+
+  .border-l-brand-primary {
+    border-left-color: var(--brand-primary);
+  }
+
+  .bg-accent {
+    background-color: var(--accent);
+  }
+
+  .bg-background {
+    background-color: var(--background);
+  }
+
+  .bg-background\/80 {
+    background-color: var(--background);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-background\/80 {
+      background-color: color-mix(in oklab, var(--background) 80%, transparent);
+    }
+  }
+
+  .bg-black\/50 {
+    background-color: #00000080;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/50 {
+      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
+    }
+  }
+
+  .bg-blue-50 {
+    background-color: var(--color-blue-50);
+  }
+
+  .bg-blue-100 {
+    background-color: var(--color-blue-100);
+  }
+
+  .bg-border {
+    background-color: var(--border);
+  }
+
+  .bg-brand-charcoal {
+    background-color: var(--brand-charcoal);
+  }
+
+  .bg-brand-navy {
+    background-color: var(--brand-navy);
+  }
+
+  .bg-brand-primary {
+    background-color: var(--brand-primary);
+  }
+
+  .bg-brand-primary\/5 {
+    background-color: var(--brand-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-brand-primary\/5 {
+      background-color: color-mix(in oklab, var(--brand-primary) 5%, transparent);
+    }
+  }
+
+  .bg-card {
+    background-color: var(--card);
+  }
+
+  .bg-chart-1 {
+    background-color: var(--chart-1);
+  }
+
+  .bg-chart-2 {
+    background-color: var(--chart-2);
+  }
+
+  .bg-chart-3 {
+    background-color: var(--chart-3);
+  }
+
+  .bg-chart-4 {
+    background-color: var(--chart-4);
+  }
+
+  .bg-destructive {
+    background-color: var(--destructive);
+  }
+
+  .bg-input-background {
+    background-color: var(--input-background);
+  }
+
+  .bg-muted {
+    background-color: var(--muted);
+  }
+
+  .bg-muted-foreground {
+    background-color: var(--muted-foreground);
+  }
+
+  .bg-muted\/20 {
+    background-color: var(--muted);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-muted\/20 {
+      background-color: color-mix(in oklab, var(--muted) 20%, transparent);
+    }
+  }
+
+  .bg-muted\/30 {
+    background-color: var(--muted);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-muted\/30 {
+      background-color: color-mix(in oklab, var(--muted) 30%, transparent);
+    }
+  }
+
+  .bg-muted\/50 {
+    background-color: var(--muted);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-muted\/50 {
+      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+    }
+  }
+
+  .bg-popover {
+    background-color: var(--popover);
+  }
+
+  .bg-primary {
+    background-color: var(--primary);
+  }
+
+  .bg-primary\/20 {
+    background-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\/20 {
+      background-color: color-mix(in oklab, var(--primary) 20%, transparent);
+    }
+  }
+
+  .bg-secondary {
+    background-color: var(--secondary);
+  }
+
+  .bg-sidebar {
+    background-color: var(--sidebar);
+  }
+
+  .bg-sidebar-primary {
+    background-color: var(--sidebar-primary);
+  }
+
+  .bg-status-error {
+    background-color: var(--status-error);
+  }
+
+  .bg-status-error\/10 {
+    background-color: var(--status-error);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-status-error\/10 {
+      background-color: color-mix(in oklab, var(--status-error) 10%, transparent);
+    }
+  }
+
+  .bg-status-success {
+    background-color: var(--status-success);
+  }
+
+  .bg-status-success\/10 {
+    background-color: var(--status-success);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-status-success\/10 {
+      background-color: color-mix(in oklab, var(--status-success) 10%, transparent);
+    }
+  }
+
+  .bg-status-warn {
+    background-color: var(--status-warn);
+  }
+
+  .bg-status-warn\/10 {
+    background-color: var(--status-warn);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-status-warn\/10 {
+      background-color: color-mix(in oklab, var(--status-warn) 10%, transparent);
+    }
+  }
+
+  .fill-current {
+    fill: currentColor;
+  }
+
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
+
+  .p-1 {
+    padding: calc(var(--spacing) * 1);
+  }
+
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
+
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
+
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
+
+  .p-\[3px\] {
+    padding: 3px;
+  }
+
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
+
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
+  .px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
+
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+
+  .py-0 {
+    padding-block: calc(var(--spacing) * 0);
+  }
+
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * .5);
+  }
+
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+
+  .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
+
+  .py-4 {
+    padding-block: calc(var(--spacing) * 4);
+  }
+
+  .py-6 {
+    padding-block: calc(var(--spacing) * 6);
+  }
+
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
+
+  .py-12 {
+    padding-block: calc(var(--spacing) * 12);
+  }
+
+  .pt-0 {
+    padding-top: calc(var(--spacing) * 0);
+  }
+
+  .pt-2 {
+    padding-top: calc(var(--spacing) * 2);
+  }
+
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
+
+  .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
+
+  .pr-2 {
+    padding-right: calc(var(--spacing) * 2);
+  }
+
+  .pr-8 {
+    padding-right: calc(var(--spacing) * 8);
+  }
+
+  .pb-2 {
+    padding-bottom: calc(var(--spacing) * 2);
+  }
+
+  .pb-4 {
+    padding-bottom: calc(var(--spacing) * 4);
+  }
+
+  .pb-6 {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+
+  .pl-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
+
+  .pl-4 {
+    padding-left: calc(var(--spacing) * 4);
+  }
+
+  .pl-8 {
+    padding-left: calc(var(--spacing) * 8);
+  }
+
+  .pl-10 {
+    padding-left: calc(var(--spacing) * 10);
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .text-left {
+    text-align: left;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+
+  .align-middle {
+    vertical-align: middle;
+  }
+
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
+
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .tracking-tight {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
+
+  .tracking-widest {
+    --tw-tracking: var(--tracking-widest);
+    letter-spacing: var(--tracking-widest);
+  }
+
+  .break-words {
+    overflow-wrap: break-word;
+  }
+
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+
+  .text-black {
+    color: var(--color-black);
+  }
+
+  .text-blue-800 {
+    color: var(--color-blue-800);
+  }
+
+  .text-blue-900 {
+    color: var(--color-blue-900);
+  }
+
+  .text-brand-charcoal-foreground {
+    color: var(--brand-charcoal-foreground);
+  }
+
+  .text-brand-navy {
+    color: var(--brand-navy);
+  }
+
+  .text-brand-navy-foreground {
+    color: var(--brand-navy-foreground);
+  }
+
+  .text-brand-primary {
+    color: var(--brand-primary);
+  }
+
+  .text-card-foreground {
+    color: var(--card-foreground);
+  }
+
+  .text-current {
+    color: currentColor;
+  }
+
+  .text-destructive {
+    color: var(--destructive);
+  }
+
+  .text-foreground {
+    color: var(--foreground);
+  }
+
+  .text-muted-foreground {
+    color: var(--muted-foreground);
+  }
+
+  .text-popover-foreground {
+    color: var(--popover-foreground);
+  }
+
+  .text-primary {
+    color: var(--primary);
+  }
+
+  .text-primary-foreground {
+    color: var(--primary-foreground);
+  }
+
+  .text-secondary-foreground {
+    color: var(--secondary-foreground);
+  }
+
+  .text-sidebar-foreground {
+    color: var(--sidebar-foreground);
+  }
+
+  .text-sidebar-primary-foreground {
+    color: var(--sidebar-primary-foreground);
+  }
+
+  .text-status-error {
+    color: var(--status-error);
+  }
+
+  .text-status-error-foreground {
+    color: var(--status-error-foreground);
+  }
+
+  .text-status-success {
+    color: var(--status-success);
+  }
+
+  .text-status-success-foreground {
+    color: var(--status-success-foreground);
+  }
+
+  .text-status-warn {
+    color: var(--status-warn);
+  }
+
+  .text-status-warn-foreground {
+    color: var(--status-warn-foreground);
+  }
+
+  .text-white {
+    color: var(--color-white);
+  }
+
+  .capitalize {
+    text-transform: capitalize;
+  }
+
+  .underline {
+    text-decoration-line: underline;
+  }
+
+  .underline-offset-4 {
+    text-underline-offset: 4px;
+  }
+
+  .opacity-50 {
+    opacity: .5;
+  }
+
+  .opacity-70 {
+    opacity: .7;
+  }
+
+  .opacity-80 {
+    opacity: .8;
+  }
+
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-md {
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-xs {
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .ring-offset-background {
+    --tw-ring-offset-color: var(--background);
+  }
+
+  .outline-hidden {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
+  @media (forced-colors: active) {
+    .outline-hidden {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+
+  .filter {
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
+  .backdrop-blur-sm {
+    --tw-backdrop-blur: blur(var(--blur-sm));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  }
+
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-\[color\,box-shadow\] {
+    transition-property: color, box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-shadow {
+    transition-property: box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-none {
+    transition-property: none;
+  }
+
+  .duration-200 {
+    --tw-duration: .2s;
+    transition-duration: .2s;
+  }
+
+  .duration-300 {
+    --tw-duration: .3s;
+    transition-duration: .3s;
+  }
+
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
+  .select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .selection\:bg-primary ::selection, .selection\:bg-primary::selection {
+    background-color: var(--primary);
+  }
+
+  .selection\:text-primary-foreground ::selection, .selection\:text-primary-foreground::selection {
+    color: var(--primary-foreground);
+  }
+
+  .file\:inline-flex::file-selector-button {
+    display: inline-flex;
+  }
+
+  .file\:h-7::file-selector-button {
+    height: calc(var(--spacing) * 7);
+  }
+
+  .file\:border-0::file-selector-button {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+
+  .file\:bg-transparent::file-selector-button {
+    background-color: #0000;
+  }
+
+  .file\:text-sm::file-selector-button {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+
+  .file\:font-medium::file-selector-button {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .file\:text-foreground::file-selector-button {
+    color: var(--foreground);
+  }
+
+  .placeholder\:text-muted-foreground::placeholder {
+    color: var(--muted-foreground);
+  }
+
+  .last\:border-b-0:last-child {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0;
+  }
+
+  @media (hover: hover) {
+    .hover\:scale-105:hover {
+      --tw-scale-x: 105%;
+      --tw-scale-y: 105%;
+      --tw-scale-z: 105%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:scale-110:hover {
+      --tw-scale-x: 110%;
+      --tw-scale-y: 110%;
+      --tw-scale-z: 110%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-accent:hover {
+      background-color: var(--accent);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-blue-100:hover {
+      background-color: var(--color-blue-100);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-brand-navy\/90:hover {
+      background-color: var(--brand-navy);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-brand-navy\/90:hover {
+        background-color: color-mix(in oklab, var(--brand-navy) 90%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-destructive\/90:hover {
+      background-color: var(--destructive);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-destructive\/90:hover {
+        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-muted:hover {
+      background-color: var(--muted);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-muted\/30:hover {
+      background-color: var(--muted);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-muted\/30:hover {
+        background-color: color-mix(in oklab, var(--muted) 30%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-muted\/50:hover {
+      background-color: var(--muted);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-muted\/50:hover {
+        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-primary\/90:hover {
+      background-color: var(--primary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-primary\/90:hover {
+        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-secondary\/80:hover {
+      background-color: var(--secondary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-secondary\/80:hover {
+        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-sidebar-accent:hover {
+      background-color: var(--sidebar-accent);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:text-accent-foreground:hover {
+      color: var(--accent-foreground);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:text-foreground:hover {
+      color: var(--foreground);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:text-sidebar-accent-foreground:hover {
+      color: var(--sidebar-accent-foreground);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:no-underline:hover {
+      text-decoration-line: none;
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:underline:hover {
+      text-decoration-line: underline;
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:opacity-100:hover {
+      opacity: 1;
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:shadow-md:hover {
+      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:shadow-sm:hover {
+      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+
+  .focus\:not-sr-only:focus {
+    clip: auto;
+    white-space: normal;
+    width: auto;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    position: static;
+    overflow: visible;
+  }
+
+  .focus\:absolute:focus {
+    position: absolute;
+  }
+
+  .focus\:top-4:focus {
+    top: calc(var(--spacing) * 4);
+  }
+
+  .focus\:left-4:focus {
+    left: calc(var(--spacing) * 4);
+  }
+
+  .focus\:bg-accent:focus {
+    background-color: var(--accent);
+  }
+
+  .focus\:bg-muted\/50:focus {
+    background-color: var(--muted);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus\:bg-muted\/50:focus {
+      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+    }
+  }
+
+  .focus\:bg-status-error\/10:focus {
+    background-color: var(--status-error);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus\:bg-status-error\/10:focus {
+      background-color: color-mix(in oklab, var(--status-error) 10%, transparent);
+    }
+  }
+
+  .focus\:text-accent-foreground:focus {
+    color: var(--accent-foreground);
+  }
+
+  .focus\:text-status-error:focus {
+    color: var(--status-error);
+  }
+
+  .focus\:ring-2:focus {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .focus\:ring-ring:focus {
+    --tw-ring-color: var(--ring);
+  }
+
+  .focus\:ring-sidebar-ring:focus {
+    --tw-ring-color: var(--sidebar-ring);
+  }
+
+  .focus\:ring-offset-2:focus {
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
+
+  .focus\:ring-offset-sidebar:focus {
+    --tw-ring-offset-color: var(--sidebar);
+  }
+
+  .focus\:outline-hidden:focus {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
+  @media (forced-colors: active) {
+    .focus\:outline-hidden:focus {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  .focus\:outline-none:focus {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
+  .focus-visible\:border-ring:focus-visible {
+    border-color: var(--ring);
+  }
+
+  .focus-visible\:ring-\[3px\]:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .focus-visible\:ring-destructive\/20:focus-visible {
+    --tw-ring-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus-visible\:ring-destructive\/20:focus-visible {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
+  }
+
+  .focus-visible\:ring-ring\/50:focus-visible {
+    --tw-ring-color: var(--ring);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus-visible\:ring-ring\/50:focus-visible {
+      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+
+  .focus-visible\:outline-1:focus-visible {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+
+  .focus-visible\:outline-ring:focus-visible {
+    outline-color: var(--ring);
+  }
+
+  .disabled\:pointer-events-none:disabled {
+    pointer-events: none;
+  }
+
+  .disabled\:cursor-not-allowed:disabled {
+    cursor: not-allowed;
+  }
+
+  .disabled\:opacity-50:disabled {
+    opacity: .5;
+  }
+
+  .has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot="card-action"]) {
+    grid-template-columns: 1fr auto;
+  }
+
+  .has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has( > svg) {
+    grid-template-columns: calc(var(--spacing) * 4) 1fr;
+  }
+
+  .has-\[\>svg\]\:gap-x-3:has( > svg) {
+    column-gap: calc(var(--spacing) * 3);
+  }
+
+  .has-\[\>svg\]\:px-2\.5:has( > svg) {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
+
+  .has-\[\>svg\]\:px-3:has( > svg) {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+
+  .has-\[\>svg\]\:px-4:has( > svg) {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+
+  .aria-invalid\:border-destructive[aria-invalid="true"] {
+    border-color: var(--destructive);
+  }
+
+  .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
+    --tw-ring-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
+  }
+
+  .data-\[disabled\]\:pointer-events-none[data-disabled] {
+    pointer-events: none;
+  }
+
+  .data-\[disabled\]\:opacity-50[data-disabled] {
+    opacity: .5;
+  }
+
+  .data-\[inset\]\:pl-8[data-inset] {
+    padding-left: calc(var(--spacing) * 8);
+  }
+
+  .data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
+    color: var(--muted-foreground);
+  }
+
+  .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
+    --tw-translate-y: calc(var(--spacing) * 1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
+    --tw-enter-translate-y: calc(2 * var(--spacing) * -1);
+  }
+
+  .data-\[side\=left\]\:-translate-x-1[data-side="left"] {
+    --tw-translate-x: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
+    --tw-enter-translate-x: calc(2 * var(--spacing));
+  }
+
+  .data-\[side\=right\]\:translate-x-1[data-side="right"] {
+    --tw-translate-x: calc(var(--spacing) * 1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
+    --tw-enter-translate-x: calc(2 * var(--spacing) * -1);
+  }
+
+  .data-\[side\=top\]\:-translate-y-1[data-side="top"] {
+    --tw-translate-y: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
+    --tw-enter-translate-y: calc(2 * var(--spacing));
+  }
+
+  .data-\[size\=default\]\:h-9[data-size="default"] {
+    height: calc(var(--spacing) * 9);
+  }
+
+  .data-\[size\=sm\]\:h-8[data-size="sm"] {
+    height: calc(var(--spacing) * 8);
+  }
+
+  :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] {
+    color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] {
+      color: color-mix(in oklab, var(--destructive) 90%, transparent);
+    }
+  }
+
+  :is(.\*\:data-\[slot\=select-value\]\:line-clamp-1 > *)[data-slot="select-value"] {
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  :is(.\*\:data-\[slot\=select-value\]\:flex > *)[data-slot="select-value"] {
+    display: flex;
+  }
+
+  :is(.\*\:data-\[slot\=select-value\]\:items-center > *)[data-slot="select-value"] {
+    align-items: center;
+  }
+
+  :is(.\*\:data-\[slot\=select-value\]\:gap-2 > *)[data-slot="select-value"] {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  .data-\[state\=active\]\:bg-card[data-state="active"] {
+    background-color: var(--card);
+  }
+
+  .data-\[state\=checked\]\:border-primary[data-state="checked"] {
+    border-color: var(--primary);
+  }
+
+  .data-\[state\=checked\]\:bg-primary[data-state="checked"] {
+    background-color: var(--primary);
+  }
+
+  .data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
+    color: var(--primary-foreground);
+  }
+
+  .data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
+    animation: accordion-up var(--tw-duration, .2s) ease-out;
+  }
+
+  .data-\[state\=closed\]\:animate-out[data-state="closed"] {
+    animation: exit var(--tw-duration, .15s) var(--tw-ease, ease);
+  }
+
+  .data-\[state\=closed\]\:duration-300[data-state="closed"] {
+    --tw-duration: .3s;
+    transition-duration: .3s;
+  }
+
+  .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
+    --tw-exit-opacity: 0;
+  }
+
+  .data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
+    --tw-exit-translate-y: 100%;
+  }
+
+  .data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
+    --tw-exit-translate-x: -100%;
+  }
+
+  .data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
+    --tw-exit-translate-x: 100%;
+  }
+
+  .data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
+    --tw-exit-translate-y: -100%;
+  }
+
+  .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
+    --tw-exit-scale: .95;
+  }
+
+  .data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
+    animation: accordion-down var(--tw-duration, .2s) ease-out;
+  }
+
+  .data-\[state\=open\]\:animate-in[data-state="open"] {
+    animation: enter var(--tw-duration, .15s) var(--tw-ease, ease);
+  }
+
+  .data-\[state\=open\]\:bg-accent[data-state="open"] {
+    background-color: var(--accent);
+  }
+
+  .data-\[state\=open\]\:bg-secondary[data-state="open"] {
+    background-color: var(--secondary);
+  }
+
+  .data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
+    color: var(--accent-foreground);
+  }
+
+  .data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
+    color: var(--muted-foreground);
+  }
+
+  .data-\[state\=open\]\:duration-500[data-state="open"] {
+    --tw-duration: .5s;
+    transition-duration: .5s;
+  }
+
+  .data-\[state\=open\]\:fade-in-0[data-state="open"] {
+    --tw-enter-opacity: 0;
+  }
+
+  .data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
+    --tw-enter-translate-y: 100%;
+  }
+
+  .data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
+    --tw-enter-translate-x: -100%;
+  }
+
+  .data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
+    --tw-enter-translate-x: 100%;
+  }
+
+  .data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
+    --tw-enter-translate-y: -100%;
+  }
+
+  .data-\[state\=open\]\:zoom-in-95[data-state="open"] {
+    --tw-enter-scale: .95;
+  }
+
+  .data-\[state\=selected\]\:bg-muted[data-state="selected"] {
+    background-color: var(--muted);
+  }
+
+  .data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] {
+    color: var(--destructive);
+  }
+
+  .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant="destructive"]:focus {
+    background-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant="destructive"]:focus {
+      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+    }
+  }
+
+  .data-\[variant\=destructive\]\:focus\:text-destructive[data-variant="destructive"]:focus {
+    color: var(--destructive);
+  }
+
+  @media (width >= 40rem) {
+    .sm\:block {
+      display: block;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:hidden {
+      display: none;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:inline {
+      display: inline;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:w-\[540px\] {
+      width: 540px;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:w-\[600px\] {
+      width: 600px;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:w-\[700px\] {
+      width: 700px;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:max-w-\[425px\] {
+      max-width: 425px;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:max-w-\[500px\] {
+      max-width: 500px;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:max-w-\[600px\] {
+      max-width: 600px;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:max-w-lg {
+      max-width: var(--container-lg);
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:max-w-sm {
+      max-width: var(--container-sm);
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:flex-row {
+      flex-direction: row;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:items-center {
+      align-items: center;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:justify-between {
+      justify-content: space-between;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:justify-end {
+      justify-content: flex-end;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:gap-2\.5 {
+      gap: calc(var(--spacing) * 2.5);
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:pr-2\.5 {
+      padding-right: calc(var(--spacing) * 2.5);
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:pl-2\.5 {
+      padding-left: calc(var(--spacing) * 2.5);
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:text-left {
+      text-align: left;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:w-auto {
+      width: auto;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:text-sm {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:mr-80 {
+      margin-right: calc(var(--spacing) * 80);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:flex {
+      display: flex;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:hidden {
+      display: none;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:flex-row {
+      flex-direction: row;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:items-center {
+      align-items: center;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:justify-between {
+      justify-content: space-between;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:gap-6 {
+      gap: calc(var(--spacing) * 6);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:p-8 {
+      padding: calc(var(--spacing) * 8);
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:px-6 {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
+
+  .dark\:border-input:is(.dark *) {
+    border-color: var(--input);
+  }
+
+  .dark\:bg-destructive\/60:is(.dark *) {
+    background-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-destructive\/60:is(.dark *) {
+      background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
+    }
+  }
+
+  .dark\:bg-input\/30:is(.dark *) {
+    background-color: var(--input);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-input\/30:is(.dark *) {
+      background-color: color-mix(in oklab, var(--input) 30%, transparent);
+    }
+  }
+
+  .dark\:text-muted-foreground:is(.dark *) {
+    color: var(--muted-foreground);
+  }
+
+  @media (hover: hover) {
+    .dark\:hover\:bg-accent\/50:is(.dark *):hover {
+      background-color: var(--accent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .dark\:hover\:bg-accent\/50:is(.dark *):hover {
+        background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .dark\:hover\:bg-input\/50:is(.dark *):hover {
+      background-color: var(--input);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .dark\:hover\:bg-input\/50:is(.dark *):hover {
+        background-color: color-mix(in oklab, var(--input) 50%, transparent);
+      }
+    }
+  }
+
+  .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
+    --tw-ring-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+    }
+  }
+
+  .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
+    --tw-ring-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+    }
+  }
+
+  .dark\:data-\[state\=active\]\:border-input:is(.dark *)[data-state="active"] {
+    border-color: var(--input);
+  }
+
+  .dark\:data-\[state\=active\]\:bg-input\/30:is(.dark *)[data-state="active"] {
+    background-color: var(--input);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:data-\[state\=active\]\:bg-input\/30:is(.dark *)[data-state="active"] {
+      background-color: color-mix(in oklab, var(--input) 30%, transparent);
+    }
+  }
+
+  .dark\:data-\[state\=active\]\:text-foreground:is(.dark *)[data-state="active"] {
+    color: var(--foreground);
+  }
+
+  .dark\:data-\[state\=checked\]\:bg-primary:is(.dark *)[data-state="checked"] {
+    background-color: var(--primary);
+  }
+
+  .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(.dark *)[data-variant="destructive"]:focus {
+    background-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(.dark *)[data-variant="destructive"]:focus {
+      background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
+  }
+
+  .\[\&_p\]\:leading-relaxed p {
+    --tw-leading: var(--leading-relaxed);
+    line-height: var(--leading-relaxed);
+  }
+
+  .\[\&_svg\]\:pointer-events-none svg {
+    pointer-events: none;
+  }
+
+  .\[\&_svg\]\:shrink-0 svg {
+    flex-shrink: 0;
+  }
+
+  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+
+  .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*="text-"]) {
+    color: var(--muted-foreground);
+  }
+
+  .\[\&_tr\]\:border-b tr {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+
+  .\[\&_tr\:last-child\]\:border-0 tr:last-child {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+
+  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role="checkbox"]) {
+    padding-right: calc(var(--spacing) * 0);
+  }
+
+  .\[\.border-b\]\:pb-6.border-b {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+
+  .\[\.border-t\]\:pt-6.border-t {
+    padding-top: calc(var(--spacing) * 6);
+  }
+
+  :is(.\*\:\[span\]\:last\:flex > *):is(span):last-child {
+    display: flex;
+  }
+
+  :is(.\*\:\[span\]\:last\:items-center > *):is(span):last-child {
+    align-items: center;
+  }
+
+  :is(.\*\:\[span\]\:last\:gap-2 > *):is(span):last-child {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  :is(.data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-destructive[data-variant="destructive"] > *):is(svg) {
+    color: var(--destructive) !important;
+  }
+
+  .\[\&\:last-child\]\:pb-6:last-child {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+
+  .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] > [role="checkbox"] {
+    --tw-translate-y: 2px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .\[\&\>svg\]\:pointer-events-none > svg {
+    pointer-events: none;
+  }
+
+  .\[\&\>svg\]\:size-3 > svg {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
+
+  .\[\&\>svg\]\:size-3\.5 > svg {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
+
+  .\[\&\>svg\]\:size-4 > svg {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+
+  .\[\&\>svg\]\:translate-y-0\.5 > svg {
+    --tw-translate-y: calc(var(--spacing) * .5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .\[\&\>svg\]\:text-current > svg {
+    color: currentColor;
+  }
+
+  .\[\&\>tr\]\:last\:border-b-0 > tr:last-child {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0;
+  }
+
+  .\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state="open"] > svg {
+    rotate: 180deg;
+  }
+
+  @media (hover: hover) {
+    a.\[a\&\]\:hover\:bg-accent:hover {
+      background-color: var(--accent);
+    }
+  }
+
+  @media (hover: hover) {
+    a.\[a\&\]\:hover\:bg-destructive\/90:hover {
+      background-color: var(--destructive);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      a.\[a\&\]\:hover\:bg-destructive\/90:hover {
+        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    a.\[a\&\]\:hover\:bg-primary\/90:hover {
+      background-color: var(--primary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      a.\[a\&\]\:hover\:bg-primary\/90:hover {
+        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    a.\[a\&\]\:hover\:bg-secondary\/90:hover {
+      background-color: var(--secondary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      a.\[a\&\]\:hover\:bg-secondary\/90:hover {
+        background-color: color-mix(in oklab, var(--secondary) 90%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    a.\[a\&\]\:hover\:text-accent-foreground:hover {
+      color: var(--accent-foreground);
+    }
+  }
+
+  .animate-fade-in {
+    opacity: 0;
+    animation: .4s ease-out forwards fadeIn;
+  }
+
+  .animate-slide-up {
+    opacity: 0;
+    animation: .4s ease-out forwards slideUp;
+  }
+
+  .animate-count-up {
+    animation: 1.2s ease-out countUp;
+  }
+
+  .animate-slide-in-right {
+    opacity: 0;
+    animation: .18s ease-out forwards slideInRight;
+  }
+
+  .animate-scale-hover {
+    transition: transform .12s ease-out;
+  }
+
+  .animate-scale-hover:hover {
+    transform: scale(1.02);
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideInRight {
+    from {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes countUp {
+    from {
+      opacity: 0;
+      transform: scale(.8);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  .min-tap-44 {
+    min-width: 12px;
+    min-height: 12px;
+  }
+
+  .sticky-header {
+    z-index: 10;
+    background: var(--background);
+    border-bottom: 1px solid var(--border);
+    position: sticky;
+    top: 0;
+  }
+
+  .focus-ring {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
+  .skeleton {
+    background: linear-gradient(90deg, var(--muted) 0%, var(--accent) 50%, var(--muted) 100%);
+    background-size: 200% 100%;
+    animation: 1.5s infinite shimmer;
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+
+    100% {
+      background-position: 200% 0;
+    }
+  }
+}
+
+
+:root {
+  --font-size: 14px;
+  --brand-gold: #f8c301;
+  --brand-gold-foreground: #26231a;
+  --brand-navy: #04045b;
+  --brand-navy-foreground: #fff;
+  --brand-charcoal: #26231a;
+  --brand-charcoal-foreground: #fff;
+  --silver-grey: silver;
+  --burgundy: #89002d;
+  --burgundy-foreground: #fff;
+  --background: #fff;
+  --foreground: #26231a;
+  --bg-surface: #fff;
+  --bg-elevated: #f8f9fa;
+  --text-primary: #26231a;
+  --text-secondary: #717182;
+  --brand-primary: #04045b;
+  --brand-contrast: #fff;
+  --status-success: #21a36a;
+  --status-success-foreground: #fff;
+  --status-warn: #f8c301;
+  --status-warn-foreground: #26231a;
+  --status-error: #d64545;
+  --status-error-foreground: #fff;
+  --chrome-divider: #0000001a;
+  --card: #fff;
+  --card-foreground: #26231a;
+  --popover: #fff;
+  --popover-foreground: #26231a;
+  --primary: #04045b;
+  --primary-foreground: #fff;
+  --secondary: #f8f9fa;
+  --secondary-foreground: #26231a;
+  --muted: #ececf0;
+  --muted-foreground: #717182;
+  --accent: #e9ebef;
+  --accent-foreground: #26231a;
+  --destructive: #d64545;
+  --destructive-foreground: #fff;
+  --border: var(--chrome-divider);
+  --input: transparent;
+  --input-background: #f3f3f5;
+  --switch-background: #cbced4;
+  --ring: #04045b;
+  --chart-1: #04045b;
+  --chart-2: #f8c301;
+  --chart-3: #21a36a;
+  --chart-4: #89002d;
+  --chart-5: silver;
+  --spacing-4: .286rem;
+  --spacing-8: .571rem;
+  --spacing-12: .857rem;
+  --spacing-16: 1.143rem;
+  --spacing-20: 1.429rem;
+  --spacing-24: 1.714rem;
+  --spacing-28: 2rem;
+  --spacing-32: 2.286rem;
+  --radius-4: .286rem;
+  --radius-8: .571rem;
+  --radius-12: .857rem;
+  --radius: var(--radius-8);
+  --shadow-1: 0 1px 2px #0000000d;
+  --shadow-2: 0 1px 3px #0000001a, 0 1px 2px #0000000f;
+  --shadow-3: 0 4px 6px #00000012, 0 2px 4px #0000000f;
+  --text-12: .857rem;
+  --text-14: 1rem;
+  --text-16: 1.143rem;
+  --text-18: 1.286rem;
+  --text-20: 1.429rem;
+  --text-24: 1.714rem;
+  --text-28: 2rem;
+  --text-32: 2.286rem;
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --sidebar: #04045b;
+  --sidebar-foreground: #fff;
+  --sidebar-primary: #f8c301;
+  --sidebar-primary-foreground: #26231a;
+  --sidebar-accent: #f8c3011a;
+  --sidebar-accent-foreground: #fff;
+  --sidebar-border: transparent;
+  --sidebar-ring: #f8c301;
+}
+
+.dark {
+  --background: #1a1a1a;
+  --foreground: #fff;
+  --bg-surface: #1a1a1a;
+  --bg-elevated: #2a2a2a;
+  --text-primary: #fff;
+  --text-secondary: #a1a1aa;
+  --brand-primary: #6366f1;
+  --brand-contrast: #fff;
+  --status-success: #22c55e;
+  --status-success-foreground: #fff;
+  --status-warn: #f8c301;
+  --status-warn-foreground: #26231a;
+  --status-error: #ef4444;
+  --status-error-foreground: #fff;
+  --chrome-divider: #ffffff1a;
+  --card: #2a2a2a;
+  --card-foreground: #fff;
+  --popover: #2a2a2a;
+  --popover-foreground: #fff;
+  --primary: #6366f1;
+  --primary-foreground: #fff;
+  --secondary: #374151;
+  --secondary-foreground: #fff;
+  --muted: #374151;
+  --muted-foreground: #a1a1aa;
+  --accent: #374151;
+  --accent-foreground: #fff;
+  --destructive: #ef4444;
+  --destructive-foreground: #fff;
+  --border: var(--chrome-divider);
+  --input: #374151;
+  --input-background: #374151;
+  --switch-background: #4b5563;
+  --ring: #6366f1;
+  --chart-1: #6366f1;
+  --chart-2: #f8c301;
+  --chart-3: #22c55e;
+  --chart-4: #ef4444;
+  --chart-5: #a1a1aa;
+  --sidebar: #04045b;
+  --sidebar-foreground: #fff;
+  --sidebar-primary: #f8c301;
+  --sidebar-primary-foreground: #26231a;
+  --sidebar-accent: #f8c3011a;
+  --sidebar-accent-foreground: #fff;
+  --sidebar-border: transparent;
+  --sidebar-ring: #f8c301;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-fade-in, .animate-slide-up, .animate-count-up, .animate-slide-in-right, .animate-scale-hover {
+    opacity: 1 !important;
+    animation: none !important;
+    transform: none !important;
+  }
+
+  .animate-scale-hover:hover {
+    transform: none !important;
+  }
+
+  html {
+    scroll-behavior: auto !important;
+  }
+
+  *, :before, :after {
+    transition-duration: .01ms !important;
+    animation-duration: .01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+
+@media (prefers-contrast: high) {
+  :root {
+    --border: #000;
+    --chrome-divider: #000;
+  }
+
+  .dark {
+    --border: #fff;
+    --chrome-divider: #fff;
+  }
+
+  button, input, textarea, select {
+    border: 2px solid;
+  }
+}
+
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: rotateX(0);
+}
+
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: rotateY(0);
+}
+
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: rotateZ(0);
+}
+
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: skewX(0);
+}
+
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: skewY(0);
+}
+
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-space-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
+@property --tw-leading {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
+@property --tw-blur {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-invert {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-duration {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ease {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+@keyframes enter {
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
+  }
+}
+
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
+  }
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: var(--radix-accordion-content-height, var(--bits-accordion-content-height));
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height, var(--bits-accordion-content-height));
+  }
+
+  to {
+    height: 0;
+  }
+}
diff --git a/src/main.tsx b/src/main.tsx
index 132b145..d96f8d8 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,7 +1,7 @@
 
   import { createRoot } from "react-dom/client";
   import App from "./App.tsx";
-  import "./styles/globals.css";
+  import "./index.css";
 
   createRoot(document.getElementById("root")!).render(<App />);
   
\ No newline at end of file
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 19ac19a..85a9574 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,5 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
-@import "tailwindcss";
+
 @custom-variant dark (&:is(.dark *));
 
 :root {
@@ -500,8 +500,8 @@
 /* Utility classes for HR Portal */
 @layer utilities {
   .min-tap-44 {
-    min-height: 44px;
-    min-width: 44px;
+    min-height: 12px;
+    min-width: 12px;
   }
 
   .sticky-header {
diff --git a/vite.config.ts b/vite.config.ts
index a1bba1a..d45a634 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,7 @@
 
   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react-swc';
-  import path from 'path';
+import * as path from 'path';
 
   export default defineConfig({
     plugins: [react()],
@@ -54,7 +54,7 @@
       outDir: 'build',
     },
     server: {
-      port: 3000,
+      port: 3005,
       open: true,
     },
   });
\ No newline at end of file