From 3aaa1e16d01e293e2d2feb6a50f5fe54e9789bbb Mon Sep 17 00:00:00 2001 From: priyanshuvish Date: Thu, 28 Aug 2025 18:47:13 +0530 Subject: [PATCH] remove links from nav and other fixes --- package-lock.json | 76 ++ package.json | 3 + src/App.tsx | 1214 +--------------------- src/components/Router.tsx | 2 +- src/components/learner/LearnerLayout.tsx | 131 ++- src/main.tsx | 15 +- 6 files changed, 189 insertions(+), 1252 deletions(-) diff --git a/package-lock.json b/package-lock.json index af0d479..0843507 100644 --- a/package-lock.json +++ b/package-lock.json @@ -49,6 +49,7 @@ "react-dom": "^18.3.1", "react-hook-form": "^7.55.0", "react-resizable-panels": "^2.1.7", + "react-router-dom": "^7.8.2", "recharts": "^2.15.2", "sonner": "^2.0.3", "tailwind-merge": "*", @@ -57,6 +58,8 @@ }, "devDependencies": { "@types/node": "^20.10.0", + "@types/react": "^19.1.12", + "@types/react-dom": "^19.1.9", "@vitejs/plugin-react-swc": "^3.10.2", "vite": "^5.4.19" } @@ -2742,6 +2745,26 @@ "undici-types": "~6.21.0" } }, + "node_modules/@types/react": { + "version": "19.1.12", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz", + "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==", + "devOptional": true, + "license": "MIT", + "dependencies": { + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-dom": { + "version": "19.1.9", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz", + "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==", + "devOptional": true, + "license": "MIT", + "peerDependencies": { + "@types/react": "^19.0.0" + } + }, "node_modules/@vitejs/plugin-react-swc": { "version": "3.11.0", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.11.0.tgz", @@ -2814,6 +2837,15 @@ "react-dom": "^18 || ^19 || ^19.0.0-rc" } }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", @@ -3716,6 +3748,44 @@ "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, + "node_modules/react-router": { + "version": "7.8.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.8.2.tgz", + "integrity": "sha512-7M2fR1JbIZ/jFWqelpvSZx+7vd7UlBTfdZqf6OSdF9g6+sfdqJDAWcak6ervbHph200ePlu+7G8LdoiC3ReyAQ==", + "license": "MIT", + "dependencies": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.8.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.8.2.tgz", + "integrity": "sha512-Z4VM5mKDipal2jQ385H6UBhiiEDlnJPx6jyWsTYoZQdl5TrjxEV2a9yl3Fi60NBJxYzOTGTTHXPi0pdizvTwow==", + "license": "MIT", + "dependencies": { + "react-router": "7.8.2" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/react-smooth": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz", @@ -3850,6 +3920,12 @@ "loose-envify": "^1.1.0" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT" + }, "node_modules/sonner": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz", diff --git a/package.json b/package.json index f39dddf..24082b8 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "react-dom": "^18.3.1", "react-hook-form": "^7.55.0", "react-resizable-panels": "^2.1.7", + "react-router-dom": "^7.8.2", "recharts": "^2.15.2", "sonner": "^2.0.3", "tailwind-merge": "*", @@ -52,6 +53,8 @@ }, "devDependencies": { "@types/node": "^20.10.0", + "@types/react": "^19.1.12", + "@types/react-dom": "^19.1.9", "@vitejs/plugin-react-swc": "^3.10.2", "vite": "^5.4.19" }, diff --git a/src/App.tsx b/src/App.tsx index fd7cad4..749c048 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,1187 +1,45 @@ -import React, { useEffect, useState, useRef } from 'react'; -import { Router } from './components/Router'; -import { Navigation } from './components/Navigation'; -import { Footer } from './components/Footer'; +import { Routes, Route } from "react-router-dom"; +// import AppLayout from "./components/AppLayout"; -import { AuthProvider } from './components/AuthContext'; -import { Button } from './components/ui/button'; -import { Card, CardContent, CardHeader, CardTitle } from './components/ui/card'; -import { Badge } from './components/ui/badge'; -import { ScrollArea } from './components/ui/scroll-area'; -import { Input } from './components/ui/input'; -import { - RefreshCw, - Home, - AlertTriangle, - CheckCircle, - MessageCircle, - X, - Send, - Bot, - User, - Minimize2, - Maximize2, - HelpCircle, - Navigation as NavigationIcon, - BookOpen, - Phone, - Settings, - Calendar, - Lightbulb, - Users, - Trophy, - Target, - TrendingUp, - Brain, - Award, - Zap -} from 'lucide-react'; -import { ImageWithFallback } from './components/figma/ImageWithFallback'; -import klcLogo from 'figma:asset/75c17cf51744205abe7b7042766b8dfdb7b2e8a4.png'; - -// Enhanced loading component with KLC branding -function AppLoader() { - const [loadingText, setLoadingText] = useState('Initializing...'); - const [progress, setProgress] = useState(0); - const [currentTip, setCurrentTip] = useState(0); - - // Leadership tips and platform features to display during loading - const loadingTips = [ - { - icon: Lightbulb, - title: "Leadership Insight", - content: "Great leaders inspire others to achieve what they never thought possible.", - color: "from-yellow-500 to-orange-500" - }, - { - icon: Users, - title: "Team Building", - content: "Effective leadership is about empowering your team to excel beyond expectations.", - color: "from-blue-500 to-purple-500" - }, - { - icon: Trophy, - title: "Achievement Focus", - content: "Success in leadership comes from consistent learning and continuous improvement.", - color: "from-green-500 to-teal-500" - }, - { - icon: Target, - title: "Strategic Vision", - content: "Leaders set clear goals and inspire their teams to achieve remarkable results.", - color: "from-red-500 to-pink-500" - }, - { - icon: TrendingUp, - title: "Growth Mindset", - content: "The best leaders embrace challenges as opportunities for development.", - color: "from-purple-500 to-indigo-500" - }, - { - icon: Brain, - title: "Smart Learning", - content: "Our AI-powered platform adapts to your learning style for maximum impact.", - color: "from-cyan-500 to-blue-500" - }, - { - icon: Award, - title: "Excellence", - content: "KLC has developed over 27,000+ leaders across 20+ countries worldwide.", - color: "from-amber-500 to-yellow-500" - }, - { - icon: Zap, - title: "Innovation", - content: "Experience cutting-edge leadership development with interactive tools and expert guidance.", - color: "from-emerald-500 to-green-500" - } - ]; - - useEffect(() => { - const steps = [ - { text: 'Initializing...', duration: 200 }, - { text: 'Loading your learning portal...', duration: 300 }, - { text: 'Preparing your experience...', duration: 200 }, - { text: 'Almost ready...', duration: 100 } - ]; - - let currentStep = 0; - let currentProgress = 0; - - const progressInterval = setInterval(() => { - currentProgress += 2; - setProgress(Math.min(currentProgress, 100)); - - if (currentProgress >= 100) { - clearInterval(progressInterval); - } - }, 16); - - const stepInterval = setInterval(() => { - if (currentStep < steps.length) { - setLoadingText(steps[currentStep].text); - currentStep++; - } else { - clearInterval(stepInterval); - } - }, 200); - - // Rotate tips every 2 seconds - const tipInterval = setInterval(() => { - setCurrentTip(prev => (prev + 1) % loadingTips.length); - }, 2000); - - return () => { - clearInterval(progressInterval); - clearInterval(stepInterval); - clearInterval(tipInterval); - }; - }, []); - - const currentTipData = loadingTips[currentTip]; - const TipIcon = currentTipData.icon; - - return ( -
- {/* Background pattern */} -
-
-
- -
- {/* Logo container with enhanced styling */} -
-
- -
- - {/* Loading content */} -
-

- Welcome to KLC Learning Portal -

- -

- Empowering leaders through innovative learning experiences -

- - {/* Progress bar */} -
-
-
-
-

- {loadingText} -

-
- - {/* Enhanced content area with rotating tips */} -
- {/* Leadership Tip Card */} -
-
-
- -
-
-

- {currentTipData.title} -

-

- {currentTipData.content} -

-
-
-
- - {/* Platform Features */} -
-
-
- -
-

Expert-Led Courses

-
-
-
- -
-

Achievement Tracking

-
-
- - {/* Quick Stats */} -
-
-

27,000+

-

Leaders Developed

-
-
-
-

150+

-

Corporate Clients

-
-
-
-

20+

-

Countries Served

-
-
- - {/* What's Coming Next */} -
-

- - What's Next -

-

- Access your personalized dashboard, explore courses, connect with peers, and begin your leadership transformation journey. -

-
- - {/* Progress dots indicator */} -
- {loadingTips.map((_, index) => ( -
- ))} -
-
-
-
-
- ); -} - -// Completely redesigned KLC Assistant with reliable layout and enhanced tab styling -interface Message { - id: string; - type: 'user' | 'assistant'; - content: string; - timestamp: Date; - suggestions?: string[]; -} - -function KLCAssistant() { - const [isVisible, setIsVisible] = useState(true); - const [isOpen, setIsOpen] = useState(false); - const [isMinimized, setIsMinimized] = useState(false); - const [activeTab, setActiveTab] = useState<'help' | 'navigation' | 'chat'>('help'); - const [messages, setMessages] = useState([ - { - id: '1', - type: 'assistant', - content: "Hi! I'm your KLC Assistant. I can help you navigate the learning portal, answer questions about our leadership programs, facilities, and more. What are you looking for today?", - timestamp: new Date(), - suggestions: [ - "Show me leadership programs", - "How do I access my courses?", - "Book a facility tour", - "Upcoming webinars" - ] - } - ]); - const [inputValue, setInputValue] = useState(''); - const [isTyping, setIsTyping] = useState(false); - const messagesEndRef = useRef(null); - const inactivityTimerRef = useRef(); - - // Quick actions for navigation with proper course linking - const quickActions = [ - { label: 'Go to Dashboard', action: () => window.location.href = '/dashboard?view=individual', icon: Home }, - { label: 'Browse Library', action: () => window.location.href = '/library?view=individual', icon: BookOpen }, - { label: 'View Surveys', action: () => window.location.href = '/surveys?view=individual', icon: HelpCircle }, - { label: 'Account Settings', action: () => window.location.href = '/settings?view=individual', icon: Settings }, - { label: 'Join Webinars', action: () => window.location.href = '/webinars?view=individual', icon: Calendar }, - { label: 'Contact Support', action: () => window.location.href = 'mailto:support@klc.edu', icon: Phone } - ]; - - // Help topics (reduced to ensure they fit) - const helpTopics = [ - 'How do I access my courses?', - 'Where can I find my learning progress?', - 'How do I take assessments?', - 'How to join live webinars?', - 'Where are my certificates?', - 'How to update my profile?' - ]; - - // Bot responses with KLC-specific content and course linking - const botResponses: Record = { - "programs": { - content: "Great! We offer various leadership development programs including Executive Leadership, Strategic Management, and Team Building workshops. You can browse all programs in our library or view specific program details.", - suggestions: ["Browse Library", "Executive programs", "Team building", "Custom corporate training"] - }, - "facilities": { - content: "Our state-of-the-art facilities include modern conference rooms, training halls, and collaboration spaces. You can take a virtual tour or book a facility for your event.", - suggestions: ["Virtual tour", "Book conference room", "Training halls", "Facility pricing"] - }, - "webinars": { - content: "We host regular webinars on leadership topics. You can view upcoming sessions, register for live events, or access our library of recorded sessions.", - suggestions: ["Upcoming webinars", "Recorded sessions", "Register for webinar", "Webinar schedule"] - }, - "contact": { - content: "You can reach us at support@klc.edu or call our support team. Our team is available Monday to Friday, 9 AM to 6 PM. You can also schedule a consultation.", - suggestions: ["Schedule consultation", "Email us", "Office locations", "Support hours"] - }, - "courses": { - content: "To access your courses, go to your Dashboard and click on 'Browse Library' or navigate directly to the Library section. Your enrolled courses will appear in the 'My Courses' section with detailed course timelines.", - suggestions: ["Go to Dashboard", "Browse Library", "View progress", "Course timeline"] - }, - "assessments": { - content: "Assessments can be found in the Surveys & Assessments section. You can complete self-assessments, view results, and track your leadership development progress.", - suggestions: ["Take assessment", "View results", "Progress tracking", "Feedback reports"] - }, - "default": { - content: "I can help you with information about our programs, facilities, webinars, course navigation, and more. What would you like to know?", - suggestions: ["Leadership programs", "Course access", "Facility booking", "Webinars", "Contact us"] - } - }; - - // Show assistant after inactivity - useEffect(() => { - const resetTimer = () => { - if (inactivityTimerRef.current) { - clearTimeout(inactivityTimerRef.current); - } - - inactivityTimerRef.current = setTimeout(() => { - if (!isOpen) { - setIsVisible(true); - } - }, 5000); - }; - - const events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart']; - - const addEventListeners = () => { - events.forEach(event => { - document.addEventListener(event, resetTimer, true); - }); - }; - - const removeEventListeners = () => { - events.forEach(event => { - document.removeEventListener(event, resetTimer, true); - }); - }; - - addEventListeners(); - resetTimer(); - - return () => { - removeEventListeners(); - if (inactivityTimerRef.current) { - clearTimeout(inactivityTimerRef.current); - } - }; - }, [isOpen]); - - // Auto-scroll to bottom of messages - useEffect(() => { - messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); - }, [messages]); - - const getBotResponse = (userMessage: string): { content: string; suggestions?: string[] } => { - const message = userMessage.toLowerCase(); - - if (message.includes('program') || message.includes('course') || message.includes('training')) { - return botResponses.programs; - } else if (message.includes('facility') || message.includes('book') || message.includes('room')) { - return botResponses.facilities; - } else if (message.includes('webinar') || message.includes('session') || message.includes('online')) { - return botResponses.webinars; - } else if (message.includes('contact') || message.includes('phone') || message.includes('email') || message.includes('support')) { - return botResponses.contact; - } else if (message.includes('access') || message.includes('find') || message.includes('navigate')) { - return botResponses.courses; - } else if (message.includes('assessment') || message.includes('survey') || message.includes('progress')) { - return botResponses.assessments; - } else { - return botResponses.default; - } - }; - - const handleSendMessage = async (content: string) => { - if (!content.trim()) return; - - // Add user message - const userMessage: Message = { - id: Date.now().toString(), - type: 'user', - content: content.trim(), - timestamp: new Date() - }; - - setMessages(prev => [...prev, userMessage]); - setInputValue(''); - setIsTyping(true); - - // Simulate typing delay - setTimeout(() => { - const response = getBotResponse(content); - const assistantMessage: Message = { - id: (Date.now() + 1).toString(), - type: 'assistant', - content: response.content, - timestamp: new Date(), - suggestions: response.suggestions - }; - - setMessages(prev => [...prev, assistantMessage]); - setIsTyping(false); - }, 1000 + Math.random() * 1000); - }; - - const handleSuggestionClick = (suggestion: string) => { - // Handle direct navigation for specific suggestions - if (suggestion === "Go to Dashboard") { - window.location.href = '/dashboard?view=individual'; - return; - } else if (suggestion === "Browse Library") { - window.location.href = '/library?view=individual'; - return; - } else if (suggestion === "Course timeline") { - window.location.href = '/course?view=individual'; - return; - } - - handleSendMessage(suggestion); - }; - - const formatTime = (date: Date) => { - return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); - }; - - if (!isVisible) return null; +// Pages +import IndividualWebinars from "./pages/IndividualWebinars"; +import Leaderboard from "./pages/Leaderboard"; +import HomePage from "./pages/HomePage"; +import Dashboard from "./pages/learner/Dashboard"; +import { Library } from "./pages/learner/Library"; +import { CourseTimeline } from "./pages/learner/CourseTimeline"; +import { Settings } from "./pages/Settings"; +import { WebinarListing } from "./pages/WebinarListing"; +import { Surveys } from "./pages/Surveys"; +import { CorporateWebinars } from "./pages/CorporateWebinars"; +export default function App() { return ( <> - {/* KLC Assistant Toggle Button - Scale animation removed */} - {!isOpen && ( - - )} + + {/* Main */} + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> - {/* KLC Assistant Window - Updated with standard card radius */} - {isOpen && ( -
- - {/* Header - Fixed with standard radius */} -
-
-
-
- -
-
-

KLC Assistant

-
-
- Online & Ready to Help -
-
-
-
- - -
-
-
+ {/* Legacy corporate routes (all re-use same components) */} + } /> + } /> + {/* } /> */} + } /> + {/* } /> */} + } /> + } /> - {/* Content Area - Only visible when not minimized */} - {!isMinimized && ( - <> - {/* Enhanced Tab Navigation - Using CourseTimeline styling with increased width */} -
-
-
- {[ - { id: 'help', label: 'Quick Help', icon: HelpCircle }, - { id: 'navigation', label: 'Navigation', icon: NavigationIcon }, - { id: 'chat', label: 'AI Chat', icon: MessageCircle } - ].map((tab) => { - const Icon = tab.icon; - return ( - - ); - })} -
-
-
- - {/* Tab Content Area - Flexible height with proper scrolling */} -
- {/* Quick Help Tab */} - {activeTab === 'help' && ( -
-
-

Frequently Asked Questions

-
- {helpTopics.map((topic, index) => ( - - ))} -
-
-
- )} - - {/* Navigation Tab */} - {activeTab === 'navigation' && ( -
-
-

Quick Actions

-
- {quickActions.map((action, index) => { - const Icon = action.icon; - return ( - - ); - })} - - {/* Support Section */} -
-

Need more help?

-

- Contact our support team at{' '} - - support@klc.edu - -

-
-
-
-
- )} - - {/* AI Chat Tab */} - {activeTab === 'chat' && ( -
- {/* Messages Area */} -
-
- {messages.map((message) => ( -
-
-
- {message.type === 'user' ? ( - - ) : ( - - )} -
-
-
-

{message.content}

-
- {message.suggestions && ( -
- {message.suggestions.map((suggestion, index) => ( - handleSuggestionClick(suggestion)} - > - {suggestion} - - ))} -
- )} -

- {formatTime(message.timestamp)} -

-
-
-
- ))} - - {isTyping && ( -
-
-
- -
-
-
-
-
-
-
-
-
-
- )} -
-
-
- - {/* Input Area - Fixed at bottom */} -
-
{ - e.preventDefault(); - handleSendMessage(inputValue); - }} - className="flex gap-2" - > - setInputValue(e.target.value)} - placeholder="Ask KLC Assistant..." - className="flex-1 text-[14px] min-h-[44px]" - disabled={isTyping} - /> - -
-

- Press Enter to send • KLC Assistant is here to help -

-
-
- )} -
- - )} -
- )} + {/* Fallback */} + } /> + ); } - -// Success notification component -function SuccessNotification({ message, onClose }: { message: string; onClose: () => void }) { - useEffect(() => { - const timer = setTimeout(onClose, 5000); - return () => clearTimeout(timer); - }, [onClose]); - - return ( -
-
-
- -
-
-

{message}

-
- -
-
- ); -} - -// Main app layout component with enhanced features -function AppLayout({ children }: { children: React.ReactNode }) { - const [currentPath, setCurrentPath] = useState(() => window.location.pathname); - const [notification, setNotification] = useState(null); - - useEffect(() => { - const handleLocationChange = () => { - const newPath = window.location.pathname; - if (newPath !== currentPath) { - setCurrentPath(newPath); - - // Smooth scroll to top on page change - window.scrollTo({ - top: 0, - behavior: 'smooth' - }); - - // Clear any existing notifications - setNotification(null); - - // Announce page change to screen readers - const pageTitle = document.title; - const announcement = `Navigated to ${pageTitle}`; - - // Create temporary announcement element - const announcer = document.createElement('div'); - announcer.setAttribute('aria-live', 'polite'); - announcer.setAttribute('aria-atomic', 'true'); - announcer.className = 'sr-only'; - announcer.textContent = announcement; - - document.body.appendChild(announcer); - setTimeout(() => { - document.body.removeChild(announcer); - }, 1000); - } - }; - - // Listen for navigation changes - window.addEventListener('popstate', handleLocationChange); - - // Listen for pushState/replaceState (for programmatic navigation) - const originalPushState = window.history.pushState; - const originalReplaceState = window.history.replaceState; - - window.history.pushState = function(...args) { - originalPushState.apply(window.history, args); - handleLocationChange(); - }; - - window.history.replaceState = function(...args) { - originalReplaceState.apply(window.history, args); - handleLocationChange(); - }; - - return () => { - window.removeEventListener('popstate', handleLocationChange); - window.history.pushState = originalPushState; - window.history.replaceState = originalReplaceState; - }; - }, [currentPath]); - - // Enhanced document title and meta description management - useEffect(() => { - const getQueryParam = (param: string) => { - const urlParams = new URLSearchParams(window.location.search); - return urlParams.get(param); - }; - - const isCorporateView = getQueryParam('view') === 'corporate'; - const viewSuffix = isCorporateView ? ' - Corporate Learning Portal' : ' - KLC Learning Portal'; - - const titles: Record = { - '/': 'Home - Kautilya Leadership Centre | Developing Exceptional Leaders', - '/dashboard': `Dashboard${viewSuffix}`, - '/library': `Learning Library${viewSuffix}`, - '/course': `Course Timeline${viewSuffix}`, - '/settings': `Account Settings${viewSuffix}`, - '/surveys': `Surveys & Assessments${viewSuffix}`, - '/webinars': `Live Webinars${viewSuffix}`, - '/individual-webinars': 'Professional Development Webinars - KLC Learning Portal', - '/leaderboard': `Progress Leaderboard${viewSuffix}`, - // Legacy routes for backward compatibility - '/corporate/dashboard': 'Corporate Dashboard - KLC Corporate Learning Portal', - '/corporate/library': 'Corporate Library - KLC Corporate Learning Portal', - '/corporate/course': 'Corporate Course Timeline - KLC Corporate Learning Portal', - '/corporate/settings': 'Corporate Settings - KLC Corporate Learning Portal', - '/corporate/surveys': 'Corporate Surveys - KLC Corporate Learning Portal', - '/corporate/webinars': 'Corporate Webinars - KLC Corporate Learning Portal', - '/corporate/leaderboard': 'Corporate Leaderboard - KLC Corporate Learning Portal' - }; - - const title = titles[currentPath] || 'Kautilya Leadership Centre - Premier Leadership Development Programs'; - document.title = title; - - // Enhanced meta description based on page and view type - const getDescription = (path: string, isCorporate: boolean) => { - const descriptions: Record = { - '/': { - individual: 'Transform your leadership potential with Kautilya Leadership Centre. Access personalized learning, expert guidance, and proven methodologies for exceptional leadership development.', - corporate: 'Empower your organization with KLC\'s corporate leadership development programs. Build high-performing teams and drive organizational excellence through proven leadership methodologies.' - }, - '/dashboard': { - individual: 'Your personalized learning dashboard featuring progress tracking, course recommendations, achievements, and interactive learning analytics tailored to your leadership journey.', - corporate: 'Corporate learning dashboard with comprehensive team progress analytics, assignment management, organizational insights, and performance tracking for enterprise-wide leadership development.' - }, - '/library': { - individual: 'Access your complete learning library with courses, resources, assessments, and expert content designed to accelerate your leadership development and professional growth.', - corporate: 'Corporate learning library featuring assigned courses, organizational resources, team collaboration tools, and curated content for comprehensive leadership development programs.' - }, - '/course': { - individual: 'Interactive course timeline with structured lessons, progress tracking, expert instruction, and peer collaboration to maximize your leadership learning experience.', - corporate: 'Corporate course timeline featuring team collaboration, company-specific content, group assignments, and organizational learning objectives aligned with business goals.' - }, - '/settings': { - individual: 'Manage your learning profile, notification preferences, privacy settings, and account configuration to optimize your personalized leadership development experience.', - corporate: 'Configure corporate learning preferences, team management settings, organizational integrations, and administrative controls for seamless enterprise learning management.' - }, - '/surveys': { - individual: 'Complete comprehensive leadership assessments, provide learning feedback, and access detailed insights to guide your professional development and growth strategy.', - corporate: 'Access corporate assessments, organizational feedback surveys, team evaluations, and comprehensive analytics to measure and improve leadership effectiveness across your organization.' - }, - '/webinars': { - individual: 'Join live and recorded webinars featuring industry experts, interactive Q&A sessions, and cutting-edge leadership insights to enhance your professional development.', - corporate: 'Access exclusive corporate webinars, company-specific learning sessions, team workshops, and organizational development programs designed for enterprise leadership growth.' - }, - '/leaderboard': { - individual: 'Track your learning progress, compare achievements with peer learners, and celebrate milestones in your leadership development journey through gamified learning analytics.', - corporate: 'Monitor team and organizational learning progress, track collective achievements, analyze performance metrics, and drive engagement through corporate learning leaderboards.' - }, - '/individual-webinars': { - individual: 'Explore webinars specifically designed for individual professional development, featuring expert speakers, interactive sessions, and actionable leadership strategies.', - corporate: 'Discover individual-focused webinars perfect for personal development within corporate programs, offering flexible learning opportunities for busy professionals.' - } - }; - - const pathDescriptions = descriptions[path]; - if (pathDescriptions) { - return isCorporate ? pathDescriptions.corporate : pathDescriptions.individual; - } - return 'Kautilya Leadership Centre - Premier leadership development programs combining innovative methodologies, expert guidance, and proven results for modern organizations and professionals.'; - }; - - const description = getDescription(currentPath, isCorporateView); - - let metaDescription = document.querySelector('meta[name="description"]'); - if (!metaDescription) { - metaDescription = document.createElement('meta'); - metaDescription.setAttribute('name', 'description'); - document.head.appendChild(metaDescription); - } - metaDescription.setAttribute('content', description); - - // Add structured data for better SEO - const structuredData = { - "@context": "https://schema.org", - "@type": "EducationalOrganization", - "name": "Kautilya Leadership Centre", - "url": "https://klc.edu", - "description": description, - "educationalCredentialAwarded": "Leadership Development Certification" - }; - - let structuredDataScript = document.querySelector('#structured-data'); - if (!structuredDataScript) { - structuredDataScript = document.createElement('script'); - structuredDataScript.id = 'structured-data'; - structuredDataScript.type = 'application/ld+json'; - document.head.appendChild(structuredDataScript); - } - structuredDataScript.textContent = JSON.stringify(structuredData); - }, [currentPath]); - - // Determine if current path should show certain components - const shouldShowFooter = () => currentPath === '/'; - - return ( -
- {/* Enhanced skip to main content link */} - - Skip to main content - - - {/* Navigation */} - - - {/* Main Content Area */} -
-
- {children} -
-
- - {/* Footer - Only on home page */} - {shouldShowFooter() &&
} - - {/* KLC Assistant */} - - - {/* Global Notifications Area */} -
- {notification && ( - setNotification(null)} - /> - )} -
- - {/* Live region for screen readers */} -
-
- ); -} - -// Enhanced Error Boundary with KLC branding -class ErrorBoundary extends React.Component< - { children: React.ReactNode }, - { hasError: boolean; error?: Error; errorInfo?: React.ErrorInfo } -> { - constructor(props: { children: React.ReactNode }) { - super(props); - this.state = { hasError: false }; - } - - static getDerivedStateFromError(error: Error) { - return { hasError: true, error }; - } - - componentDidCatch(error: Error, errorInfo: React.ErrorInfo) { - console.error('KLC App Error Boundary caught an error:', error, errorInfo); - this.setState({ errorInfo }); - - // Log error to monitoring service in production - if (process.env.NODE_ENV === 'production') { - // Add error tracking service integration here - console.log('Error logged to monitoring service'); - } - } - - render() { - if (this.state.hasError) { - return ( -
-
- {/* Error icon with KLC branding */} -
- -
- -

- Oops! Something went wrong -

- -

- We apologize for the inconvenience. Our technical team has been notified and is working to resolve this issue. - Please try refreshing the page or return to the home page. -

- -
- - - -
- - {/* Contact support */} -
-

- Need immediate assistance? -

-

- Contact our support team for help -

-
- - {/* Error details for development */} - {process.env.NODE_ENV === 'development' && this.state.error && ( -
- - Technical Details (Development Mode) - -
-
-

Error Message:

-

- {this.state.error.message} -

-
-
-

Stack Trace:

- 
-                      {this.state.error.stack}
-
-
- {this.state.errorInfo && ( -
-

Component Stack:

- 
-                        {this.state.errorInfo.componentStack}
-
-
- )} -
-
- )} -
-
- ); - } - - return this.props.children; - } -} - -// Main App Component with enhanced initialization -export default function App() { - const [isLoading, setIsLoading] = useState(true); - const [initializationError, setInitializationError] = useState(null); - - useEffect(() => { - const initializeApp = async () => { - try { - // Simulate app initialization with proper loading states - await new Promise(resolve => setTimeout(resolve, 800)); - - // Check for critical dependencies - if (!window.location || !document.body) { - throw new Error('Critical browser APIs unavailable'); - } - - // Initialize app successfully - setIsLoading(false); - - // Announce app ready to screen readers - const announcement = 'Kautilya Leadership Centre learning portal is ready'; - const announcer = document.createElement('div'); - announcer.setAttribute('aria-live', 'polite'); - announcer.className = 'sr-only'; - announcer.textContent = announcement; - document.body.appendChild(announcer); - setTimeout(() => { - if (announcer.parentNode) { - document.body.removeChild(announcer); - } - }, 1000); - - } catch (error) { - console.error('App initialization failed:', error); - setInitializationError(error instanceof Error ? error.message : 'Unknown initialization error'); - setIsLoading(false); - } - }; - - initializeApp(); - }, []); - - // Show loading screen during app initialization - if (isLoading) { - return ; - } - - // Show initialization error if it occurred - if (initializationError) { - return ( -
-
-
- -
-

- Initialization Failed -

-

- The application failed to start properly. Please refresh the page or try again later. -

- -
-
- ); - } - - return ( - - - - - - - - ); -} \ No newline at end of file diff --git a/src/components/Router.tsx b/src/components/Router.tsx index e2fea2f..5b83f46 100644 --- a/src/components/Router.tsx +++ b/src/components/Router.tsx @@ -184,7 +184,7 @@ export function Router() { case '/settings': return ; case '/surveys': - return ; + return ; case '/webinars': // Route to appropriate webinar page based on view parameter if (viewParam === 'corporate') { diff --git a/src/components/learner/LearnerLayout.tsx b/src/components/learner/LearnerLayout.tsx index 9439337..3b6822b 100644 --- a/src/components/learner/LearnerLayout.tsx +++ b/src/components/learner/LearnerLayout.tsx @@ -5,10 +5,10 @@ import { Badge } from '../ui/badge'; import { Sheet, SheetContent, SheetTrigger } from '../ui/sheet'; import { ScrollArea } from '../ui/scroll-area'; import { Separator } from '../ui/separator'; -import { - Menu, - Search, - Bell, +import { + Menu, + Search, + Bell, ChevronDown, Home, BookOpen, @@ -61,7 +61,7 @@ function NotificationPanel({ isOpen, onClose, notifications }: NotificationPanel
{/* Mobile overlay */}
- + {/* Panel */}
@@ -72,7 +72,7 @@ function NotificationPanel({ isOpen, onClose, notifications }: NotificationPanel
- +
{notifications.length === 0 ? ( @@ -82,17 +82,16 @@ function NotificationPanel({ isOpen, onClose, notifications }: NotificationPanel
) : ( notifications.map((notification) => ( -
-
+

{notification.title}

{notification.message}

@@ -104,12 +103,12 @@ function NotificationPanel({ isOpen, onClose, notifications }: NotificationPanel )}
- + {notifications.length > 0 && (
-
{/* Progress indicator for course content */} -