diff --git a/src/App.tsx b/src/App.tsx index 749c048..5967aed 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,9 +9,7 @@ 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 ( @@ -22,21 +20,12 @@ export default function App() { } /> } /> } /> - } /> - } /> + } /> + } /> } /> } /> } /> - {/* Legacy corporate routes (all re-use same components) */} - } /> - } /> - {/* } /> */} - } /> - {/* } /> */} - } /> - } /> - {/* Fallback */} } /> diff --git a/src/Guidelines.md b/src/Guidelines.md index 23e491f..82e40b0 100644 --- a/src/Guidelines.md +++ b/src/Guidelines.md @@ -64,14 +64,14 @@ ### Required Imports for Back Navigation ```tsx import { ArrowLeft } from 'lucide-react'; -import { navigateTo } from '../components/Router'; + const navigate = useNavigate(); ``` ### Standard Navigation Handler ```tsx const handleBackNavigation = () => { // Choose appropriate navigation based on page context - navigateTo('/dashboard?view=individual'); // or /dashboard?view=corporate for corporate learners + navigate('/dashboard?view=individual'); // or /dashboard?view=corporate for corporate learners }; ``` diff --git a/src/assets/klc-logo.png b/src/assets/klc-logo.png new file mode 100644 index 0000000..ff70e16 Binary files /dev/null and b/src/assets/klc-logo.png differ diff --git a/src/components/FacilityShowcaseCard.tsx b/src/components/FacilityShowcaseCard.tsx index 7b35ed0..79cb5f8 100644 --- a/src/components/FacilityShowcaseCard.tsx +++ b/src/components/FacilityShowcaseCard.tsx @@ -3,7 +3,7 @@ import { Card, CardContent, CardHeader, CardTitle } from './ui/card'; import { Badge } from './ui/badge'; import { Button } from './ui/button'; import { ImageWithFallback } from './figma/ImageWithFallback'; -import { navigateTo } from './Router'; +import { navigate } from './Router'; import { Star, Users, @@ -197,7 +197,7 @@ export function FacilityShowcaseCard({ facility }: FacilityShowcaseCardProps) { diff --git a/src/components/Router.tsx b/src/components/Router.tsx index 5b83f46..9cd5f96 100644 --- a/src/components/Router.tsx +++ b/src/components/Router.tsx @@ -1,306 +1,219 @@ -import React from 'react'; +import { Routes, Route, Navigate, useSearchParams } from "react-router-dom"; // Import all page components -import { HomePage } from '../pages/HomePage'; -import Dashboard from '../pages/learner/Dashboard'; -import { CorporateDashboard } from '../pages/learner/CorporateDashboard'; -import { Library } from '../pages/learner/Library'; -import { CourseTimeline } from '../pages/learner/CourseTimeline'; -import { Settings } from '../pages/Settings'; -import { Surveys } from '../pages/Surveys'; -import { CorporateWebinars } from '../pages/CorporateWebinars'; -import { IndividualWebinars } from '../pages/IndividualWebinars'; -import { Leaderboard } from '../pages/Leaderboard'; -import { CorporateLeaderboard } from '../pages/CorporateLeaderboard'; -import { LoginSelection } from '../pages/LoginSelection'; -import { Login } from '../pages/Login'; -import { Signup } from '../pages/Signup'; -import { CorporateAuth } from '../pages/CorporateAuth'; -import { CorporateLogin } from '../pages/CorporateLogin'; -import { CorporateSignup } from '../pages/CorporateSignup'; -import { ForgotPassword } from '../pages/ForgotPassword'; -import { EmailVerification } from '../pages/EmailVerification'; -import { Contact } from '../pages/Contact'; -import { AboutKLC } from '../pages/AboutKLC'; -import { OurVision } from '../pages/OurVision'; -import { OurTeam } from '../pages/OurTeam'; -import { OurImpact } from '../pages/OurImpact'; -import { OurExpertise } from '../pages/OurExpertise'; -import { ProgrammeCatalogue } from '../pages/ProgrammeCatalogue'; -import { ProgrammeDetail } from '../pages/ProgrammeDetail'; -import { ExecutiveLeadership } from '../pages/ExecutiveLeadership'; -import { TeamLeadership } from '../pages/TeamLeadership'; -import { InnovationLeadership } from '../pages/InnovationLeadership'; -import { LeadershipOnline } from '../pages/LeadershipOnline'; -import { LeadershipDevelopment } from '../pages/services/LeadershipDevelopment'; -import { ManagementDevelopment } from '../pages/services/ManagementDevelopment'; -import { ExecutiveCoaching } from '../pages/services/ExecutiveCoaching'; -import { CultureCompetence } from '../pages/services/CultureCompetence'; -import { Consulting } from '../pages/services/Consulting'; -import { LearningFacility } from '../pages/services/LearningFacility'; -import { Articles } from '../pages/Articles'; -import { BlogListing } from '../pages/BlogListing'; -import { BlogDetail } from '../pages/BlogDetail'; -import { Resources } from '../pages/Resources'; -import { WebinarListing } from '../pages/WebinarListing'; -import { WebinarDetail } from '../pages/WebinarDetail'; -import { FacilityDetail } from '../pages/FacilityDetail'; -import { FacilityBooking } from '../pages/FacilityBooking'; -import { FacilityTour } from '../pages/FacilityTour'; -import { Cart } from '../pages/Cart'; -import { Checkout } from '../pages/Checkout'; -import { OrderConfirmation } from '../pages/OrderConfirmation'; -import { OrderFailed } from '../pages/OrderFailed'; -import { MyCohort } from '../pages/MyCohort'; -import { FAQ } from '../pages/FAQ'; -import { Privacy } from '../pages/Privacy'; -import { Terms } from '../pages/Terms'; -import { NotFound } from '../pages/NotFound'; +import { HomePage } from "../pages/HomePage"; +import Dashboard from "../pages/learner/Dashboard"; +import { CorporateDashboard } from "../pages/learner/CorporateDashboard"; +import { Library } from "../pages/learner/Library"; +import { CourseTimeline } from "../pages/learner/CourseTimeline"; +import { Settings } from "../pages/Settings"; +import { Surveys } from "../pages/Surveys"; +import { CorporateWebinars } from "../pages/CorporateWebinars"; +import { IndividualWebinars } from "../pages/IndividualWebinars"; +import { Leaderboard } from "../pages/Leaderboard"; +import { CorporateLeaderboard } from "../pages/CorporateLeaderboard"; +import { LoginSelection } from "../pages/LoginSelection"; +import { Login } from "../pages/Login"; +import { Signup } from "../pages/Signup"; +import { CorporateAuth } from "../pages/CorporateAuth"; +import { CorporateLogin } from "../pages/CorporateLogin"; +import { CorporateSignup } from "../pages/CorporateSignup"; +import { ForgotPassword } from "../pages/ForgotPassword"; +import { EmailVerification } from "../pages/EmailVerification"; +import { Contact } from "../pages/Contact"; +import { AboutKLC } from "../pages/AboutKLC"; +import { OurVision } from "../pages/OurVision"; +import { OurTeam } from "../pages/OurTeam"; +import { OurImpact } from "../pages/OurImpact"; +import { OurExpertise } from "../pages/OurExpertise"; +import { ProgrammeCatalogue } from "../pages/ProgrammeCatalogue"; +import { ProgrammeDetail } from "../pages/ProgrammeDetail"; +import { ExecutiveLeadership } from "../pages/ExecutiveLeadership"; +import { TeamLeadership } from "../pages/TeamLeadership"; +import { InnovationLeadership } from "../pages/InnovationLeadership"; +import { LeadershipOnline } from "../pages/LeadershipOnline"; +import { LeadershipDevelopment } from "../pages/services/LeadershipDevelopment"; +import { ManagementDevelopment } from "../pages/services/ManagementDevelopment"; +import { ExecutiveCoaching } from "../pages/services/ExecutiveCoaching"; +import { CultureCompetence } from "../pages/services/CultureCompetence"; +import { Consulting } from "../pages/services/Consulting"; +import { LearningFacility } from "../pages/services/LearningFacility"; +import { Articles } from "../pages/Articles"; +import { BlogListing } from "../pages/BlogListing"; +import { BlogDetail } from "../pages/BlogDetail"; +import { Resources } from "../pages/Resources"; +import { WebinarListing } from "../pages/WebinarListing"; +import { WebinarDetail } from "../pages/WebinarDetail"; +import { FacilityDetail } from "../pages/FacilityDetail"; +import { FacilityBooking } from "../pages/FacilityBooking"; +import { FacilityTour } from "../pages/FacilityTour"; +import { Cart } from "../pages/Cart"; +import { Checkout } from "../pages/Checkout"; +import { OrderConfirmation } from "../pages/OrderConfirmation"; +import { OrderFailed } from "../pages/OrderFailed"; +import { MyCohort } from "../pages/MyCohort"; +import { FAQ } from "../pages/FAQ"; +import { Privacy } from "../pages/Privacy"; +import { Terms } from "../pages/Terms"; +import { NotFound } from "../pages/NotFound"; -// Router function to navigate programmatically -export function navigateTo(path: string) { - window.history.pushState({}, '', path); - window.dispatchEvent(new PopStateEvent('popstate')); +function DashboardRoute() { + const [searchParams] = useSearchParams(); + const view = searchParams.get("view"); + return view === "corporate" ? ( + + ) : ( + + ); } -// Get query parameter helper -function getQueryParam(param: string): string | null { - const urlParams = new URLSearchParams(window.location.search); - return urlParams.get(param); +function WebinarsRoute() { + const [searchParams] = useSearchParams(); + const view = searchParams.get("view"); + return view === "corporate" ? : ; +} + +function LeaderboardRoute() { + const [searchParams] = useSearchParams(); + const view = searchParams.get("view"); + return view === "corporate" ? : ; } -// Router component export function Router() { - const [currentPath, setCurrentPath] = React.useState(window.location.pathname); - - React.useEffect(() => { - const handlePopState = () => { - setCurrentPath(window.location.pathname); - }; - - window.addEventListener('popstate', handlePopState); - return () => window.removeEventListener('popstate', handlePopState); - }, []); - - // Handle legacy route redirects - React.useEffect(() => { - // Redirect old corporate routes to new query parameter format - const legacyRedirects: Record = { - '/corporate/dashboard': '/dashboard?view=corporate', - '/corporate/library': '/library?view=corporate', - '/corporate/course': '/course?view=corporate', - '/corporate/settings': '/settings?view=corporate', - '/corporate/surveys': '/surveys?view=corporate', - '/corporate/webinars': '/webinars?view=corporate', - '/corporate/leaderboard': '/leaderboard?view=corporate' - }; - - if (legacyRedirects[currentPath]) { - navigateTo(legacyRedirects[currentPath]); - return; - } - - // Redirect deprecated service pages to home - const deprecatedServiceRoutes = [ - '/services', - '/services/leadership-development', - '/services/management-development', - '/services/executive-coaching', - '/services/culture-competence', - '/services/consulting', - '/services/learning-facility' - ]; - - if (deprecatedServiceRoutes.includes(currentPath)) { - navigateTo('/'); - return; - } - - // Redirect deprecated about pages to home - const deprecatedAboutRoutes = [ - '/about-us/our-vision', - '/about-us/our-team', - '/about-us/our-impact', - '/about-us/our-expertise' - ]; - - if (deprecatedAboutRoutes.includes(currentPath)) { - navigateTo('/'); - return; - } - - // Redirect deprecated learning pages to home - const deprecatedLearningRoutes = [ - '/learning/articles', - '/learning/blog', - '/learning/resources' - ]; - - if (deprecatedLearningRoutes.includes(currentPath)) { - navigateTo('/'); - return; - } - }, [currentPath]); - - // Route matching logic - const renderRoute = () => { - const path = currentPath; - const viewParam = getQueryParam('view'); - - switch (path) { - case '/': - return ; - - // Authentication routes - case '/auth': - case '/login-selection': - return ; - case '/login': - return ; - case '/signup': - return ; - case '/corporate/auth': - return ; - case '/corporate/login': - return ; - case '/corporate/signup': - return ; - case '/forgot-password': - return ; - case '/email-verification': - return ; - - // Learner portal routes with query parameter support - case '/dashboard': - // Route to appropriate dashboard based on view parameter - if (viewParam === 'corporate') { - return ; - } - return ; - case '/library': - return ; - case '/course': - return ; - case '/settings': - return ; - case '/surveys': - return ; - case '/webinars': - // Route to appropriate webinar page based on view parameter - if (viewParam === 'corporate') { - return ; - } - return ; - case '/leaderboard': - // Route to appropriate leaderboard based on view parameter - if (viewParam === 'corporate') { - return ; - } - return ; - - // Individual webinars (accessible without authentication) - case '/individual-webinars': - return ; - - // Contact and support - case '/contact': - return ; - - // About pages (deprecated - redirect to home) - case '/about-klc': - return ; - case '/about-us/our-vision': - return ; - case '/about-us/our-team': - return ; - case '/about-us/our-impact': - return ; - case '/about-us/our-expertise': - return ; - - // Programme pages (deprecated - redirect to home) - case '/programmes': - return ; - case '/programmes/detail': - return ; - case '/programmes/executive-leadership': - return ; - case '/programmes/team-leadership': - return ; - case '/programmes/innovation-leadership': - return ; - case '/programmes/leadership-online': - return ; - - // Service pages (deprecated - redirect to home) - case '/services/leadership-development': - return ; - case '/services/management-development': - return ; - case '/services/executive-coaching': - return ; - case '/services/culture-competence': - return ; - case '/services/consulting': - return ; - case '/services/learning-facility': - return ; - - // Learning pages (deprecated - redirect to home) - case '/learning/articles': - return ; - case '/learning/blog': - return ; - case '/learning/blog/detail': - return ; - case '/learning/resources': - return ; - - // Webinar pages (deprecated - redirect to home) - case '/webinars/listing': - return ; - case '/webinars/detail': - return ; - - // Facility pages (deprecated - redirect to home) - case '/facilities/detail': - return ; - case '/facilities/booking': - return ; - case '/facilities/tour': - return ; - - // E-commerce pages (deprecated - redirect to home) - case '/cart': - return ; - case '/checkout': - return ; - case '/order-confirmation': - return ; - case '/order-failed': - return ; - - // Additional learner features (deprecated - redirect to home) - case '/my-cohort': - return ; - - // Legal and support pages - case '/faq': - return ; - case '/privacy': - return ; - case '/terms': - return ; - - // 404 page - default: - return ; - } - }; - return (
- {renderRoute()} + + {/* Main */} + } /> + + {/* Auth */} + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + {/* Learner Portal */} + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + {/* Other Pages */} + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + {/* Programmes */} + } /> + } /> + } + /> + } /> + } + /> + } + /> + + {/* Services */} + } + /> + } + /> + } + /> + } + /> + } /> + } /> + + {/* Learning */} + } /> + } /> + } /> + } /> + + {/* Webinars */} + } /> + } /> + + {/* Facilities */} + } /> + } /> + } /> + + {/* E-commerce */} + } /> + } /> + } /> + } /> + + {/* Extra Features */} + } /> + + {/* Legal */} + } /> + } /> + } /> + + {/* Legacy Redirects */} + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + + {/* Catch-all */} + } /> +
); -} \ No newline at end of file +} diff --git a/src/components/learner/CourseCard.tsx b/src/components/learner/CourseCard.tsx index 072e206..35ae2de 100644 --- a/src/components/learner/CourseCard.tsx +++ b/src/components/learner/CourseCard.tsx @@ -22,7 +22,7 @@ import { AlertCircle } from 'lucide-react'; import { Course } from '../../pages/learner/data/libraryData'; -import { navigateTo } from '../Router'; + const navigate = useNavigate(); interface CourseCardProps { course: Course; @@ -66,7 +66,7 @@ export function CourseCard({ course, userType, onEnroll, onContinue, onBookmark // Navigate to course details page with proper query parameters const handleCourseNavigation = () => { - navigateTo(`/course?view=${userType}&courseId=${course.id}`); + navigate(`/course?view=${userType}&courseId=${course.id}`); }; return ( diff --git a/src/components/learner/CourseListItem.tsx b/src/components/learner/CourseListItem.tsx index 98e29aa..8a0d0b6 100644 --- a/src/components/learner/CourseListItem.tsx +++ b/src/components/learner/CourseListItem.tsx @@ -17,7 +17,7 @@ import { Target } from 'lucide-react'; import { Course } from '../../pages/learner/data/libraryData'; -import { navigateTo } from '../Router'; + const navigate = useNavigate(); interface CourseListItemProps { course: Course; @@ -66,7 +66,7 @@ export function CourseListItem({ course, userType, onEnroll, onContinue, onBookm // Navigate to course details page with proper query parameters const handleCourseNavigation = () => { - navigateTo(`/course?view=${userType}&courseId=${course.id}`); + navigate(`/course?view=${userType}&courseId=${course.id}`); }; return ( diff --git a/src/components/learner/HorizontalCourseCard.tsx b/src/components/learner/HorizontalCourseCard.tsx index 6c951cc..7142bcc 100644 --- a/src/components/learner/HorizontalCourseCard.tsx +++ b/src/components/learner/HorizontalCourseCard.tsx @@ -14,8 +14,8 @@ import { MoreHorizontal } from 'lucide-react'; import { Course } from '../../pages/learner/data/libraryData'; -import { navigateTo } from '../Router'; import { ImageWithFallback } from '../figma/ImageWithFallback'; +import { useNavigate } from 'react-router-dom'; interface HorizontalCourseCardProps { course: Course; @@ -90,10 +90,12 @@ const getCourseImage = (category: string) => { export function HorizontalCourseCard({ course, userType, onEnroll, onContinue, onBookmark }: HorizontalCourseCardProps) { const courseImage = getCourseImage(course.category); + const navigate = useNavigate(); + // Navigate to course details page with proper query parameters const handleCourseNavigation = () => { - navigateTo(`/course?view=${userType}&courseId=${course.id}`); + navigate(`/course?view=${userType}&courseId=${course.id}`); }; return ( diff --git a/src/components/learner/LearnerLayout.tsx b/src/components/learner/LearnerLayout.tsx index 3b6822b..d22253b 100644 --- a/src/components/learner/LearnerLayout.tsx +++ b/src/components/learner/LearnerLayout.tsx @@ -5,6 +5,7 @@ import { Badge } from '../ui/badge'; import { Sheet, SheetContent, SheetTrigger } from '../ui/sheet'; import { ScrollArea } from '../ui/scroll-area'; import { Separator } from '../ui/separator'; +import logo from "../../assets/klc-logo.png" import { Menu, Search, @@ -22,7 +23,7 @@ import { X, Settings } from 'lucide-react'; -import { navigateTo } from '../Router'; +import { useNavigate } from 'react-router-dom'; interface LearnerLayoutProps { children: React.ReactNode; @@ -54,6 +55,7 @@ interface NotificationPanelProps { function NotificationPanel({ isOpen, onClose, notifications }: NotificationPanelProps) { const unreadCount = notifications.filter(n => !n.read).length; + const navigate = useNavigate(); if (!isOpen) return null; @@ -88,9 +90,9 @@ function NotificationPanel({ isOpen, onClose, notifications }: NotificationPanel >

{notification.title}

@@ -110,7 +112,7 @@ function NotificationPanel({ isOpen, onClose, notifications }: NotificationPanel variant="outline" size="sm" className="w-full text-lg min-h-[44px]" - onClick={() => navigateTo('/notifications')} + onClick={() => navigate('/notifications')} > View All Notifications @@ -129,6 +131,8 @@ export function LearnerLayout({ children, currentPage, userType = 'individual', const [sidebarOpen, setSidebarOpen] = useState(false); const [notificationsOpen, setNotificationsOpen] = useState(false); const [searchValue, setSearchValue] = useState(''); + const navigate = useNavigate(); + // Get current view parameter directly from URL const getCurrentView = () => { @@ -243,12 +247,17 @@ export function LearnerLayout({ children, currentPage, userType = 'individual',
{/* Logo */}
-
+ {/*
KLC
Learning Portal -
+
*/} + Logo
{/* Navigation */} @@ -261,11 +270,11 @@ export function LearnerLayout({ children, currentPage, userType = 'individual', key={item.name} variant={item.active ? "secondary" : "ghost"} className={`w-full justify-start text-lg h-10 min-h-[44px] ${item.active - ? 'bg-brand-gold text-brand-gold-foreground hover:bg-brand-gold/90' - : 'text-white/80 hover:bg-white/10 hover:text-white' + ? 'bg-brand-gold text-brand-gold-foreground hover:bg-brand-gold/90' + : 'text-white/80 hover:bg-white/10 hover:text-white' }`} onClick={() => { - navigateTo(item.href); + navigate(item.href); setSidebarOpen(false); }} > diff --git a/src/components/learner/UpcomingEvents.tsx b/src/components/learner/UpcomingEvents.tsx index fcffb78..7dd2dc8 100644 --- a/src/components/learner/UpcomingEvents.tsx +++ b/src/components/learner/UpcomingEvents.tsx @@ -14,7 +14,7 @@ import { Globe, ExternalLink } from 'lucide-react'; -import { navigateTo } from '../Router'; +import { useNavigate } from 'react-router-dom'; interface UpcomingEventsProps { userType: 'individual' | 'corporate'; @@ -37,6 +37,8 @@ interface Event { export function UpcomingEvents({ userType }: UpcomingEventsProps) { const [currentMonth, setCurrentMonth] = useState(new Date()); + const navigate = useNavigate(); + // Sample events data const events: Event[] = [ @@ -262,7 +264,7 @@ export function UpcomingEvents({ userType }: UpcomingEventsProps) { @@ -387,7 +389,7 @@ export function UpcomingEvents({ userType }: UpcomingEventsProps) {