KLC/KLC-Learners-Portal-Frontend-Figmamake
Archived
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

react router plus add logo

Browse Source
This commit is contained in:
priyanshuvish
2025-08-28 19:53:36 +05:30
parent 3aaa1e16d0
commit 3103bb1570
68 changed files with 468 additions and 524 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/App.tsx
View File

@@ -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() {
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/library" element={<Library />} />
<Route path="/course" element={<CourseTimeline />} />
<Route path="/settings" element={<Settings />} />
<Route path="/surveys" element={<Surveys userType="corporate" />} />
<Route path="/settings" element={<Settings userType="individual" />} />
<Route path="/surveys" element={<Surveys userType="individual" />} />
<Route path="/webinars" element={<IndividualWebinars />} />
<Route path="/individual-webinars" element={<IndividualWebinars />} />
<Route path="/leaderboard" element={<Leaderboard />} />
{/* Legacy corporate routes (all re-use same components) */}
<Route path="/corporate/dashboard" element={<Dashboard />} />
<Route path="/corporate/library" element={<Library />} />
{/* <Route path="/corporate/course" element={<Course />} /> */}
<Route path="/corporate/settings" element={<Settings />} />
{/* <Route path="/corporate/surveys" element={<Surveys />} /> */}
<Route path="/corporate/webinars" element={<CorporateWebinars />} />
<Route path="/corporate/leaderboard" element={<Leaderboard />} />
{/* Fallback */}
<Route path="*" element={<HomePage />} />
</Routes>

4
src/Guidelines.md
View File

@@ -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
};
```

BIN
src/assets/klc-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

4
src/components/FacilityShowcaseCard.tsx
View File

@@ -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) {
<Button
className="w-full bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
onClick={() => navigateTo(`/facility/${facility.id}`)}
onClick={() => navigate(`/facility/${facility.id}`)}
disabled={facility.availability === 'unavailable'}
>
{facility.availability === 'unavailable' ? 'Fully Booked' : 'View Details'}

8
src/components/Footer.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { Button } from './ui/button';
import klcLogo from 'figma:asset/c2d0a01da274cef655bbdfb1b11ff3e9993ea278.png';
import { navigateTo } from './Router';
import { navigate } from './Router';
import {
Mail,
Phone,
@@ -136,7 +136,7 @@ export function Footer() {
{section.links.map((link) => (
<li key={link.name}>
<button
onClick={() => navigateTo(link.href)}
onClick={() => navigate(link.href)}
className="text-sm text-muted-foreground hover:text-primary transition-colors text-left"
>
{link.name}
@@ -157,13 +157,13 @@ export function Footer() {
<span>&copy; 2025 Kautilya Leadership Centre. All rights reserved.</span>
<div className="flex items-center gap-4">
<button
onClick={() => navigateTo('/privacy')}
onClick={() => navigate('/privacy')}
className="hover:text-primary transition-colors"
>
Privacy Policy
</button>
<button
onClick={() => navigateTo('/terms')}
onClick={() => navigate('/terms')}
className="hover:text-primary transition-colors"
>
Terms of Service

26
src/components/Navigation.tsx
View File

@@ -19,7 +19,7 @@ import {
SheetTrigger,
} from './ui/sheet';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
import { navigateTo } from './Router';
import { navigate } from './Router';
import { useAuth } from './AuthContext';
import klcLogo from 'figma:asset/209958db0c439ec78be82ab4f3e335a6aed5de89.png';
import exampleImage from 'figma:asset/6cae567b6bf6a44cb03b767e4308c4c705340d08.png';
@@ -111,18 +111,18 @@ export function Navigation({ currentPage }: NavigationProps) {
};
const handleLogin = () => {
navigateTo('/auth'); // Route to login selection page
navigate('/auth'); // Route to login selection page
setIsMobileMenuOpen(false);
};
const handleSignup = () => {
navigateTo('/signup');
navigate('/signup');
setIsMobileMenuOpen(false);
};
const handleLogout = () => {
signOut();
navigateTo('/');
navigate('/');
setActiveDropdown(null);
setIsMobileMenuOpen(false);
};
@@ -130,9 +130,9 @@ export function Navigation({ currentPage }: NavigationProps) {
const handleAccountSignIn = (accountType: 'individual' | 'corporate') => {
// Navigate to appropriate sign-in page for the account type
if (accountType === 'individual') {
navigateTo('/login');
navigate('/login');
} else {
navigateTo('/corporate/login');
navigate('/corporate/login');
}
setActiveDropdown(null);
setIsMobileMenuOpen(false);
@@ -267,7 +267,7 @@ export function Navigation({ currentPage }: NavigationProps) {
{/* Logo */}
<div className="flex-shrink-0">
<button
onClick={() => navigateTo('/')}
onClick={() => navigate('/')}
className="flex items-center space-x-2 focus:outline-none focus:ring-2 focus:ring-primary rounded-lg p-1 hover:bg-gray-50 transition-colors"
aria-label="Go to KLC homepage"
>
@@ -303,7 +303,7 @@ export function Navigation({ currentPage }: NavigationProps) {
<button
key={subItem.title}
onClick={() => {
navigateTo(subItem.href);
navigate(subItem.href);
setActiveDropdown(null);
}}
className="w-full flex items-center space-x-3 px-4 py-3 text-[16px] text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors text-left focus:outline-none focus:ring-2 focus:ring-primary"
@@ -319,7 +319,7 @@ export function Navigation({ currentPage }: NavigationProps) {
))}
<button
onClick={() => navigateTo('/contact')}
onClick={() => navigate('/contact')}
className="text-[16px] text-foreground hover:text-primary transition-colors py-2 px-3 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary"
>
Contact
@@ -462,7 +462,7 @@ export function Navigation({ currentPage }: NavigationProps) {
<div className="p-2">
<DropdownMenuItem
className="flex items-center gap-3 px-3 py-2 cursor-pointer rounded-md hover:bg-gray-50 focus:bg-gray-50 min-h-[44px]"
onClick={() => navigateTo(learnerMenuItems[learnerMenuItems.length - 1].href)}
onClick={() => navigate(learnerMenuItems[learnerMenuItems.length - 1].href)}
>
<Settings className="h-5 w-5 text-gray-500" />
<span className="text-[16px] font-medium text-gray-900">Settings</span>
@@ -601,7 +601,7 @@ export function Navigation({ currentPage }: NavigationProps) {
<button
key={item.title}
onClick={() => {
navigateTo(item.href);
navigate(item.href);
setIsMobileMenuOpen(false);
}}
className="w-full flex items-center gap-3 px-3 py-2 text-left text-[16px] text-gray-700 hover:bg-gray-50 hover:text-primary rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-primary min-h-[44px]"
@@ -639,7 +639,7 @@ export function Navigation({ currentPage }: NavigationProps) {
<button
key={subItem.title}
onClick={() => {
navigateTo(subItem.href);
navigate(subItem.href);
setIsMobileMenuOpen(false);
}}
className="w-full flex items-center gap-3 px-3 py-2 text-left text-[16px] text-gray-600 hover:bg-gray-50 hover:text-primary rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-primary min-h-[44px]"
@@ -656,7 +656,7 @@ export function Navigation({ currentPage }: NavigationProps) {
<button
onClick={() => {
navigateTo('/contact');
navigate('/contact');
setIsMobileMenuOpen(false);
}}
className="w-full flex items-center p-3 text-[16px] text-gray-900 hover:bg-gray-50 rounded-lg transition-colors text-left focus:outline-none focus:ring-2 focus:ring-primary min-h-[44px]"

4
src/components/ProgrammeWizard.tsx
View File

@@ -3,7 +3,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Button } from "./ui/button";
import { Badge } from "./ui/badge";
import { ChevronRight, RotateCcw, Wand2 } from "lucide-react";
import { navigateTo } from './Router';
import { navigate } from './Router';
const wizardSteps = [
{
@@ -103,7 +103,7 @@ export function ProgrammeWizard() {
<div className="flex flex-col sm:flex-row gap-3">
<Button
className="bg-primary hover:bg-primary/90 text-primary-foreground"
onClick={() => navigateTo(`/programme/${recommendation.slug}`)}
onClick={() => navigate(`/programme/${recommendation.slug}`)}
>
View Programme Details
</Button>

501
src/components/Router.tsx
View File

@@ -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" ? (
<CorporateDashboard />
) : (
<Dashboard userType="individual" />
);
}
// 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" ? <CorporateWebinars /> : <IndividualWebinars />;
}
function LeaderboardRoute() {
const [searchParams] = useSearchParams();
const view = searchParams.get("view");
return view === "corporate" ? <CorporateLeaderboard /> : <Leaderboard />;
}
// 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<string, string> = {
'/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 <HomePage />;
// Authentication routes
case '/auth':
case '/login-selection':
return <LoginSelection />;
case '/login':
return <Login />;
case '/signup':
return <Signup />;
case '/corporate/auth':
return <CorporateAuth />;
case '/corporate/login':
return <CorporateLogin />;
case '/corporate/signup':
return <CorporateSignup />;
case '/forgot-password':
return <ForgotPassword />;
case '/email-verification':
return <EmailVerification />;
// Learner portal routes with query parameter support
case '/dashboard':
// Route to appropriate dashboard based on view parameter
if (viewParam === 'corporate') {
return <CorporateDashboard />;
}
return <Dashboard userType="individual" />;
case '/library':
return <Library />;
case '/course':
return <CourseTimeline />;
case '/settings':
return <Settings />;
case '/surveys':
return <Surveys userType="corporate" />;
case '/webinars':
// Route to appropriate webinar page based on view parameter
if (viewParam === 'corporate') {
return <CorporateWebinars />;
}
return <IndividualWebinars />;
case '/leaderboard':
// Route to appropriate leaderboard based on view parameter
if (viewParam === 'corporate') {
return <CorporateLeaderboard />;
}
return <Leaderboard />;
// Individual webinars (accessible without authentication)
case '/individual-webinars':
return <IndividualWebinars />;
// Contact and support
case '/contact':
return <Contact />;
// About pages (deprecated - redirect to home)
case '/about-klc':
return <AboutKLC />;
case '/about-us/our-vision':
return <OurVision />;
case '/about-us/our-team':
return <OurTeam />;
case '/about-us/our-impact':
return <OurImpact />;
case '/about-us/our-expertise':
return <OurExpertise />;
// Programme pages (deprecated - redirect to home)
case '/programmes':
return <ProgrammeCatalogue />;
case '/programmes/detail':
return <ProgrammeDetail />;
case '/programmes/executive-leadership':
return <ExecutiveLeadership />;
case '/programmes/team-leadership':
return <TeamLeadership />;
case '/programmes/innovation-leadership':
return <InnovationLeadership />;
case '/programmes/leadership-online':
return <LeadershipOnline />;
// Service pages (deprecated - redirect to home)
case '/services/leadership-development':
return <LeadershipDevelopment />;
case '/services/management-development':
return <ManagementDevelopment />;
case '/services/executive-coaching':
return <ExecutiveCoaching />;
case '/services/culture-competence':
return <CultureCompetence />;
case '/services/consulting':
return <Consulting />;
case '/services/learning-facility':
return <LearningFacility />;
// Learning pages (deprecated - redirect to home)
case '/learning/articles':
return <Articles />;
case '/learning/blog':
return <BlogListing />;
case '/learning/blog/detail':
return <BlogDetail />;
case '/learning/resources':
return <Resources />;
// Webinar pages (deprecated - redirect to home)
case '/webinars/listing':
return <WebinarListing />;
case '/webinars/detail':
return <WebinarDetail />;
// Facility pages (deprecated - redirect to home)
case '/facilities/detail':
return <FacilityDetail />;
case '/facilities/booking':
return <FacilityBooking />;
case '/facilities/tour':
return <FacilityTour />;
// E-commerce pages (deprecated - redirect to home)
case '/cart':
return <Cart />;
case '/checkout':
return <Checkout />;
case '/order-confirmation':
return <OrderConfirmation />;
case '/order-failed':
return <OrderFailed />;
// Additional learner features (deprecated - redirect to home)
case '/my-cohort':
return <MyCohort />;
// Legal and support pages
case '/faq':
return <FAQ />;
case '/privacy':
return <Privacy />;
case '/terms':
return <Terms />;
// 404 page
default:
return <NotFound />;
}
};
return (
<div className="min-h-screen">
{renderRoute()}
<Routes>
{/* Main */}
<Route path="/" element={<HomePage />} />
{/* Auth */}
<Route path="/auth" element={<LoginSelection />} />
<Route path="/login-selection" element={<LoginSelection />} />
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
<Route path="/corporate/auth" element={<CorporateAuth />} />
<Route path="/corporate/login" element={<CorporateLogin />} />
<Route path="/corporate/signup" element={<CorporateSignup />} />
<Route path="/forgot-password" element={<ForgotPassword />} />
<Route path="/email-verification" element={<EmailVerification />} />
{/* Learner Portal */}
<Route path="/dashboard" element={<DashboardRoute />} />
<Route path="/library" element={<Library />} />
<Route path="/course" element={<CourseTimeline />} />
<Route path="/settings" element={<Settings />} />
<Route path="/surveys" element={<Surveys userType="individual" />} />
<Route path="/webinars" element={<WebinarsRoute />} />
<Route path="/leaderboard" element={<LeaderboardRoute />} />
{/* Other Pages */}
<Route path="/individual-webinars" element={<IndividualWebinars />} />
<Route path="/contact" element={<Contact />} />
<Route path="/about-klc" element={<AboutKLC />} />
<Route path="/about-us/our-vision" element={<OurVision />} />
<Route path="/about-us/our-team" element={<OurTeam />} />
<Route path="/about-us/our-impact" element={<OurImpact />} />
<Route path="/about-us/our-expertise" element={<OurExpertise />} />
{/* Programmes */}
<Route path="/programmes" element={<ProgrammeCatalogue />} />
<Route path="/programmes/detail" element={<ProgrammeDetail />} />
<Route
path="/programmes/executive-leadership"
element={<ExecutiveLeadership />}
/>
<Route path="/programmes/team-leadership" element={<TeamLeadership />} />
<Route
path="/programmes/innovation-leadership"
element={<InnovationLeadership />}
/>
<Route
path="/programmes/leadership-online"
element={<LeadershipOnline />}
/>
{/* Services */}
<Route
path="/services/leadership-development"
element={<LeadershipDevelopment />}
/>
<Route
path="/services/management-development"
element={<ManagementDevelopment />}
/>
<Route
path="/services/executive-coaching"
element={<ExecutiveCoaching />}
/>
<Route
path="/services/culture-competence"
element={<CultureCompetence />}
/>
<Route path="/services/consulting" element={<Consulting />} />
<Route path="/services/learning-facility" element={<LearningFacility />} />
{/* Learning */}
<Route path="/learning/articles" element={<Articles />} />
<Route path="/learning/blog" element={<BlogListing />} />
<Route path="/learning/blog/detail" element={<BlogDetail />} />
<Route path="/learning/resources" element={<Resources />} />
{/* Webinars */}
<Route path="/webinars/listing" element={<WebinarListing />} />
<Route path="/webinars/detail" element={<WebinarDetail />} />
{/* Facilities */}
<Route path="/facilities/detail" element={<FacilityDetail />} />
<Route path="/facilities/booking" element={<FacilityBooking />} />
<Route path="/facilities/tour" element={<FacilityTour />} />
{/* E-commerce */}
<Route path="/cart" element={<Cart />} />
<Route path="/checkout" element={<Checkout />} />
<Route path="/order-confirmation" element={<OrderConfirmation />} />
<Route path="/order-failed" element={<OrderFailed />} />
{/* Extra Features */}
<Route path="/my-cohort" element={<MyCohort />} />
{/* Legal */}
<Route path="/faq" element={<FAQ />} />
<Route path="/privacy" element={<Privacy />} />
<Route path="/terms" element={<Terms />} />
{/* Legacy Redirects */}
<Route
path="/corporate/dashboard"
element={<Navigate to="/dashboard?view=corporate" replace />}
/>
<Route
path="/corporate/library"
element={<Navigate to="/library?view=corporate" replace />}
/>
<Route
path="/corporate/course"
element={<Navigate to="/course?view=corporate" replace />}
/>
<Route
path="/corporate/settings"
element={<Navigate to="/settings?view=corporate" replace />}
/>
<Route
path="/corporate/surveys"
element={<Navigate to="/surveys?view=corporate" replace />}
/>
<Route
path="/corporate/webinars"
element={<Navigate to="/webinars?view=corporate" replace />}
/>
<Route
path="/corporate/leaderboard"
element={<Navigate to="/leaderboard?view=corporate" replace />}
/>
{/* Catch-all */}
<Route path="*" element={<NotFound />} />
</Routes>
</div>
);
}
}

4
src/components/learner/CourseCard.tsx
View File

@@ -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 (

4
src/components/learner/CourseListItem.tsx
View File

@@ -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 (

6
src/components/learner/HorizontalCourseCard.tsx
View File

@@ -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 (

29
src/components/learner/LearnerLayout.tsx
View File

@@ -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
>
<div className="flex items-start gap-3">
<div className={`w-2 h-2 rounded-full mt-2 flex-shrink-0 ${notification.type === 'info' ? 'bg-blue-500' :
notification.type === 'success' ? 'bg-success' :
notification.type === 'warning' ? 'bg-yellow-500' :
'bg-destructive'
notification.type === 'success' ? 'bg-success' :
notification.type === 'warning' ? 'bg-yellow-500' :
'bg-destructive'
}`} />
<div className="flex-1 min-w-0">
<p className="font-medium text-lg text-foreground">{notification.title}</p>
@@ -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
</Button>
@@ -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',
<div className={`flex flex-col h-full bg-brand-navy ${className}`}>
{/* Logo */}
<div className="p-6 border-b border-white/20">
<div className="flex items-center gap-3">
{/* <div className="flex items-center gap-3">
<div className="w-8 h-8 bg-brand-gold rounded-lg flex items-center justify-center">
<span className="text-brand-gold-foreground font-bold text-sm">KLC</span>
</div>
<span className="font-semibold text-white text-lg">Learning Portal</span>
</div>
</div> */}
<img
src={logo}
alt="Logo"
className="h-6 md:h-8 lg:h-10 w-auto object-contain"
/>
</div>
{/* 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);
}}
>

14
src/components/learner/UpcomingEvents.tsx
View File

@@ -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) {
<Button
variant="ghost"
size="sm"
onClick={() => navigateTo(`/webinars?view=${userType}`)}
onClick={() => navigate(`/webinars?view=${userType}`)}
className="text-[14px] text-[#6B7280] hover:text-[#111827] hover:bg-gray-100 rounded-md h-8 px-2"
>
View All
@@ -364,7 +366,7 @@ export function UpcomingEvents({ userType }: UpcomingEventsProps) {
size="sm"
variant={event.status === 'live' ? 'destructive' : event.status === 'today' ? 'default' : 'outline'}
className="text-[12px] font-semibold min-h-[28px] px-3 rounded-md"
onClick={() => navigateTo(`/webinars?view=${userType}`)}
onClick={() => navigate(`/webinars?view=${userType}`)}
>
{event.status === 'live' ? 'Join Now' : 'View Details'}
</Button>
@@ -387,7 +389,7 @@ export function UpcomingEvents({ userType }: UpcomingEventsProps) {
<Button
variant="outline"
className="w-full justify-start text-[14px] font-medium min-h-[40px] bg-gray-50 border-gray-200 hover:bg-gray-100 transition-colors duration-200 rounded-md"
onClick={() => navigateTo(`/webinars?view=${userType}`)}
onClick={() => navigate(`/webinars?view=${userType}`)}
>
<Video className="h-4 w-4 mr-3" />
Browse All Webinars
@@ -395,7 +397,7 @@ export function UpcomingEvents({ userType }: UpcomingEventsProps) {
<Button
variant="outline"
className="w-full justify-start text-[14px] font-medium min-h-[40px] bg-gray-50 border-gray-200 hover:bg-gray-100 transition-colors duration-200 rounded-md"
onClick={() => navigateTo(`/surveys?view=${userType}`)}
onClick={() => navigate(`/surveys?view=${userType}`)}
>
<CalendarDays className="h-4 w-4 mr-3" />
Schedule Assessment
@@ -404,7 +406,7 @@ export function UpcomingEvents({ userType }: UpcomingEventsProps) {
<Button
variant="outline"
className="w-full justify-start text-[14px] font-medium min-h-[40px] bg-gray-50 border-gray-200 hover:bg-gray-100 transition-colors duration-200 rounded-md"
onClick={() => navigateTo(`/dashboard?view=${userType}`)}
onClick={() => navigate(`/dashboard?view=${userType}`)}
>
<Users className="h-4 w-4 mr-3" />
Team Calendar

4
src/pages/AboutKLC.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function AboutKLC() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

4
src/pages/Articles.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function Articles() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

4
src/pages/BlogDetail.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function BlogDetail() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

4
src/pages/BlogListing.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function BlogListing() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

4
src/pages/Cart.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function Cart() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

4
src/pages/Checkout.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function Checkout() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

4
src/pages/Contact.tsx
View File

@@ -3,7 +3,7 @@ import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { ArrowLeft, Mail, Phone, MapPin, Clock, Send } from 'lucide-react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function Contact() {
const [formData, setFormData] = useState({
@@ -31,7 +31,7 @@ export function Contact() {
};
const handleBackNavigation = () => {
navigateTo('/');
navigate('/');
};
return (

10
src/pages/CorporateAuth.tsx
View File

@@ -2,19 +2,19 @@ import React from 'react';
import { Button } from '../components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { ArrowLeft, Building2, Users, Shield, BarChart3 } from 'lucide-react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function CorporateAuth() {
const handleBackNavigation = () => {
navigateTo('/auth');
navigate('/auth');
};
const handleLogin = () => {
navigateTo('/corporate/login');
navigate('/corporate/login');
};
const handleSignup = () => {
navigateTo('/corporate/signup');
navigate('/corporate/signup');
};
return (
@@ -141,7 +141,7 @@ export function CorporateAuth() {
<Button
variant="outline"
size="sm"
onClick={() => navigateTo('/contact')}
onClick={() => navigate('/contact')}
className="text-[14px] border-purple-600 text-purple-600 hover:bg-purple-100"
>
Contact Support

2
src/pages/CorporateLeaderboard.tsx
View File

@@ -39,7 +39,7 @@ import {
Flag,
Sparkles
} from 'lucide-react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
// Mock data for leaderboard
const mockLeaderboard = [

8
src/pages/CorporateLearnerLogin.tsx
View File

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import { Navigation } from '../components/Navigation';
import { Footer } from '../components/Footer';
import { AIChatbot } from '../components/AIChatbot';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
import { Button } from '../components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card';
import { Input } from '../components/ui/input';
@@ -324,11 +324,11 @@ export default function CorporateLearnerLogin() {
if (signInData.workEmail === 'learner@company.com' && signInData.password === 'learner123') {
const redirectUrl = sessionStorage.getItem('loginRedirect') || '/corporate/dashboard';
sessionStorage.removeItem('loginRedirect');
navigateTo(redirectUrl);
navigate(redirectUrl);
} else if (requiresMFA && signInData.otp === '123456') {
const redirectUrl = sessionStorage.getItem('loginRedirect') || '/corporate/dashboard';
sessionStorage.removeItem('loginRedirect');
navigateTo(redirectUrl);
navigate(redirectUrl);
} else {
setErrors({ submit: 'Email or password incorrect' });
triggerFormShake();
@@ -365,7 +365,7 @@ export default function CorporateLearnerLogin() {
};
const handleVerifyEmail = (token: string) => {
navigateTo('/corporate/dashboard');
navigate('/corporate/dashboard');
};
if (showEmailVerification) {

16
src/pages/CorporateLogin.tsx
View File

@@ -3,7 +3,7 @@ import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { ArrowLeft, Eye, EyeOff, Mail, Lock, Building2 } from 'lucide-react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
import { useAuth } from '../components/AuthContext';
export function CorporateLogin() {
@@ -20,11 +20,11 @@ export function CorporateLogin() {
try {
// Simulate corporate login and go directly to corporate dashboard
await login(email || 'corporate@klc.edu', password || 'demo');
navigateTo('/dashboard?view=corporate');
navigate('/dashboard?view=corporate');
} catch (error) {
console.error('Corporate login failed:', error);
// Even if login fails, still navigate to dashboard for ease of use
navigateTo('/dashboard?view=corporate');
navigate('/dashboard?view=corporate');
} finally {
setIsLoading(false);
}
@@ -34,16 +34,16 @@ export function CorporateLogin() {
// Direct navigation to corporate dashboard without form validation
setIsLoading(true);
login('corporate@klc.edu', 'demo').then(() => {
navigateTo('/dashboard?view=corporate');
navigate('/dashboard?view=corporate');
}).catch(() => {
navigateTo('/dashboard?view=corporate');
navigate('/dashboard?view=corporate');
}).finally(() => {
setIsLoading(false);
});
};
const handleBackNavigation = () => {
navigateTo('/corporate/auth');
navigate('/corporate/auth');
};
return (
@@ -169,7 +169,7 @@ export function CorporateLogin() {
<button
type="button"
onClick={() => navigateTo('/forgot-password')}
onClick={() => navigate('/forgot-password')}
className="text-[16px] text-primary hover:text-primary/80 font-medium"
>
Forgot password?
@@ -189,7 +189,7 @@ export function CorporateLogin() {
<p className="text-[16px] text-gray-600">
Need corporate access?{' '}
<button
onClick={() => navigateTo('/corporate/signup')}
onClick={() => navigate('/corporate/signup')}
className="text-primary hover:text-primary/80 font-medium"
>
Contact your administrator

6
src/pages/CorporateSignup.tsx
View File

@@ -3,7 +3,7 @@ import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { ArrowLeft, Mail, User, Building2, Phone, Users } from 'lucide-react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function CorporateSignup() {
const [formData, setFormData] = useState({
@@ -25,7 +25,7 @@ export function CorporateSignup() {
try {
// Simulate request submission
await new Promise(resolve => setTimeout(resolve, 1000));
navigateTo('/email-verification');
navigate('/email-verification');
} catch (error) {
console.error('Request failed:', error);
} finally {
@@ -34,7 +34,7 @@ export function CorporateSignup() {
};
const handleBackNavigation = () => {
navigateTo('/corporate/auth');
navigate('/corporate/auth');
};
return (

11
src/pages/CorporateWebinars.tsx
View File

@@ -47,9 +47,10 @@ import {
MoreHorizontal,
Search
} from 'lucide-react';
import { navigateTo } from '../components/Router';
// const navigate = useNavigate();
import { ImageWithFallback } from '../components/figma/ImageWithFallback';
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
// Mock data for webinars
const mockWebinars = [
{
@@ -266,7 +267,7 @@ function WebinarCard({ webinar }: { webinar: typeof mockWebinars[0] }) {
const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
const handleJoinWebinar = () => {
navigateTo(`/webinar-detail?id=${webinar.id}&view=corporate`);
navigate(`/webinar-detail?id=${webinar.id}&view=corporate`);
};
const toggleDescription = (e: React.MouseEvent) => {
@@ -637,7 +638,7 @@ export function CorporateWebinars() {
<div
key={webinar.id}
className="group cursor-pointer p-4 rounded-lg border border-border hover:border-primary/30 hover:bg-muted/30 transition-all duration-200"
onClick={() => navigateTo(`/webinar-detail?id=${webinar.id}&view=corporate`)}
onClick={() => navigate(`/webinar-detail?id=${webinar.id}&view=corporate`)}
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3 flex-1">
@@ -670,7 +671,7 @@ export function CorporateWebinars() {
<div className="mt-6">
<Button
variant="outline"
onClick={() => navigateTo('/webinars?view=corporate')}
onClick={() => navigate('/webinars?view=corporate')}
className="w-full text-base h-11"
>
View All Webinars

6
src/pages/EmailVerification.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import { Button } from '../components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { Mail, CheckCircle, RefreshCw } from 'lucide-react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function EmailVerification() {
const handleResendEmail = () => {
@@ -55,7 +55,7 @@ export function EmailVerification() {
</Button>
<Button
onClick={() => navigateTo('/auth')}
onClick={() => navigate('/auth')}
className="w-full text-[16px] min-h-[44px] bg-primary hover:bg-primary/90"
>
Back to Sign In
@@ -66,7 +66,7 @@ export function EmailVerification() {
<p className="text-[14px] text-gray-500">
Need help? Contact our{' '}
<button
onClick={() => navigateTo('/contact')}
onClick={() => navigate('/contact')}
className="text-primary hover:text-primary/80 font-medium"
>
support team

4
src/pages/ExecutiveLeadership.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function ExecutiveLeadership() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

6
src/pages/FAQ.tsx
View File

@@ -3,11 +3,11 @@ import { Button } from '../components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../components/ui/collapsible';
import { ArrowLeft, ChevronDown, HelpCircle, Mail, Phone } from 'lucide-react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function FAQ() {
const handleBackNavigation = () => {
navigateTo('/');
navigate('/');
};
const faqData = [
@@ -129,7 +129,7 @@ export function FAQ() {
</p>
<div className="flex flex-col sm:flex-row gap-3">
<Button
onClick={() => navigateTo('/contact')}
onClick={() => navigate('/contact')}
className="text-[16px] min-h-[44px] bg-primary hover:bg-primary/90"
>
<Mail className="w-4 h-4 mr-2" />

4
src/pages/FacilityBooking.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function FacilityBooking() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

4
src/pages/FacilityDetail.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function FacilityDetail() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

4
src/pages/FacilityTour.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function FacilityTour() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

8
src/pages/ForgotPassword.tsx
View File

@@ -3,7 +3,7 @@ import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { ArrowLeft, Mail, CheckCircle } from 'lucide-react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function ForgotPassword() {
const [email, setEmail] = useState('');
@@ -26,7 +26,7 @@ export function ForgotPassword() {
};
const handleBackNavigation = () => {
navigateTo('/auth');
navigate('/auth');
};
if (isSubmitted) {
@@ -52,7 +52,7 @@ export function ForgotPassword() {
</p>
<Button
onClick={() => navigateTo('/auth')}
onClick={() => navigate('/auth')}
className="w-full text-[16px] min-h-[48px] bg-primary hover:bg-primary/90"
>
Back to Sign In
@@ -137,7 +137,7 @@ export function ForgotPassword() {
<p className="text-[16px] text-gray-600">
Remember your password?{' '}
<button
onClick={() => navigateTo('/auth')}
onClick={() => navigate('/auth')}
className="text-primary hover:text-primary/80 font-medium"
>
Back to Sign In

4
src/pages/IndividualWebinars.tsx
View File

@@ -60,7 +60,7 @@ import {
Tag,
AlertTriangle
} from 'lucide-react';
import { navigateTo } from '../components/Router';
import { useNavigate } from 'react-router-dom';
// Types
interface Webinar {
@@ -849,6 +849,8 @@ export function IndividualWebinars() {
const [filterCategory, setFilterCategory] = useState('all');
const [filterDifficulty, setFilterDifficulty] = useState('all');
const [sortBy, setSortBy] = useState('date');
const navigate = useNavigate();
// Mock user data for LearnerLayout - matching Library page pattern
const user = {

4
src/pages/InnovationLeadership.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function InnovationLeadership() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

4
src/pages/Leaderboard.tsx
View File

@@ -37,7 +37,7 @@ import {
Shield,
Gem
} from 'lucide-react';
import { navigateTo } from '../components/Router';
import { useNavigate } from 'react-router-dom';
// Types
interface LeaderboardEntry {
@@ -652,6 +652,8 @@ export function Leaderboard() {
const [activeTab, setActiveTab] = useState('global');
const [filterPeriod, setFilterPeriod] = useState('all-time');
const [filterCategory, setFilterCategory] = useState('all');
const navigate = useNavigate();
// Mock user data for LearnerLayout - matching Library page pattern
const user = {

4
src/pages/LeadershipOnline.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function LeadershipOnline() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

17
src/pages/Login.tsx
View File

@@ -3,8 +3,9 @@ import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { ArrowLeft, Eye, EyeOff, Mail, Lock } from 'lucide-react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
import { useAuth } from '../components/AuthContext';
import { useNavigate } from 'react-router-dom';
export function Login() {
const [email, setEmail] = useState('');
@@ -20,11 +21,11 @@ export function Login() {
try {
// Simulate login and go directly to individual dashboard
await login(email || 'demo@klc.edu', password || 'demo');
navigateTo('/dashboard?view=individual');
navigate('/dashboard?view=individual');
} catch (error) {
console.error('Login failed:', error);
// Even if login fails, still navigate to dashboard for ease of use
navigateTo('/dashboard?view=individual');
navigate('/dashboard?view=individual');
} finally {
setIsLoading(false);
}
@@ -34,16 +35,16 @@ export function Login() {
// Direct navigation to individual dashboard without form validation
setIsLoading(true);
login('demo@klc.edu', 'demo').then(() => {
navigateTo('/dashboard?view=individual');
navigate('/dashboard?view=individual');
}).catch(() => {
navigateTo('/dashboard?view=individual');
navigate('/dashboard?view=individual');
}).finally(() => {
setIsLoading(false);
});
};
const handleBackNavigation = () => {
navigateTo('/auth');
navigate('/auth');
};
return (
@@ -166,7 +167,7 @@ export function Login() {
<button
type="button"
onClick={() => navigateTo('/forgot-password')}
onClick={() => navigate('/forgot-password')}
className="text-[16px] text-primary hover:text-primary/80 font-medium"
>
Forgot password?
@@ -186,7 +187,7 @@ export function Login() {
<p className="text-[16px] text-gray-600">
Don't have an account?{' '}
<button
onClick={() => navigateTo('/signup')}
onClick={() => navigate('/signup')}
className="text-primary hover:text-primary/80 font-medium"
>
Create one here

23
src/pages/LoginSelection.tsx
View File

@@ -3,31 +3,32 @@ import { Button } from '../components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { Badge } from '../components/ui/badge';
import { ArrowLeft, Building2, User, ArrowRight, CheckCircle, Users, Target, BookOpen, Video, Award, BarChart3 } from 'lucide-react';
import { navigateTo } from '../components/Router';
// const navigate = useNavigate();
import { useAuth } from '../components/AuthContext';
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
export function LoginSelection() {
const { login } = useAuth();
const handleBackNavigation = () => {
navigateTo('/');
navigate('/');
};
const handleIndividualLogin = () => {
// Direct navigation to individual dashboard
login('demo@klc.edu', 'demo').then(() => {
navigateTo('/dashboard?view=individual');
navigate('/dashboard?view=individual');
}).catch(() => {
navigateTo('/dashboard?view=individual');
navigate('/dashboard?view=individual');
});
};
const handleCorporateLogin = () => {
// Direct navigation to corporate dashboard
login('corporate@klc.edu', 'demo').then(() => {
navigateTo('/dashboard?view=corporate');
navigate('/dashboard?view=corporate');
}).catch(() => {
navigateTo('/dashboard?view=corporate');
navigate('/dashboard?view=corporate');
});
};
@@ -145,7 +146,7 @@ export function LoginSelection() {
<p className="text-[14px] text-gray-500">
Want to explore first?{' '}
<button
onClick={() => navigateTo('/login')}
onClick={() => navigate('/login')}
className="text-blue-600 hover:text-blue-700 font-medium hover:underline"
>
View login options
@@ -237,7 +238,7 @@ export function LoginSelection() {
<p className="text-[14px] text-gray-500">
Want to explore first?{' '}
<button
onClick={() => navigateTo('/corporate/login')}
onClick={() => navigate('/corporate/login')}
className="text-purple-600 hover:text-purple-700 font-medium hover:underline"
>
View login options
@@ -285,14 +286,14 @@ export function LoginSelection() {
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
variant="outline"
onClick={() => navigateTo('/contact')}
onClick={() => navigate('/contact')}
className="text-[16px] min-h-[44px] border-[#04045B] text-[#04045B] hover:bg-[#04045B]/10"
>
Contact Support
</Button>
<Button
variant="outline"
onClick={() => navigateTo('/individual-webinars')}
onClick={() => navigate('/individual-webinars')}
className="text-[16px] min-h-[44px] border-[#04045B] text-[#04045B] hover:bg-[#04045B]/10"
>
Explore Learning Resources

4
src/pages/MyCohort.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function MyCohort() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

12
src/pages/NotFound.tsx
View File

@@ -2,11 +2,11 @@ import React from 'react';
import { Button } from '../components/ui/button';
import { Card, CardContent } from '../components/ui/card';
import { ArrowLeft, Home, Search, HelpCircle } from 'lucide-react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function NotFound() {
const handleGoHome = () => {
navigateTo('/');
navigate('/');
};
const handleGoBack = () => {
@@ -56,7 +56,7 @@ export function NotFound() {
</h3>
<div className="grid grid-cols-1 gap-3">
<button
onClick={() => navigateTo('/individual-webinars')}
onClick={() => navigate('/individual-webinars')}
className="flex items-center gap-3 p-3 text-left rounded-lg hover:bg-gray-50 transition-colors"
>
<Search className="h-4 w-4 text-gray-500 flex-shrink-0" />
@@ -64,7 +64,7 @@ export function NotFound() {
</button>
<button
onClick={() => navigateTo('/contact')}
onClick={() => navigate('/contact')}
className="flex items-center gap-3 p-3 text-left rounded-lg hover:bg-gray-50 transition-colors"
>
<HelpCircle className="h-4 w-4 text-gray-500 flex-shrink-0" />
@@ -72,7 +72,7 @@ export function NotFound() {
</button>
<button
onClick={() => navigateTo('/auth')}
onClick={() => navigate('/auth')}
className="flex items-center gap-3 p-3 text-left rounded-lg hover:bg-gray-50 transition-colors"
>
<Home className="h-4 w-4 text-gray-500 flex-shrink-0" />
@@ -86,7 +86,7 @@ export function NotFound() {
<p className="text-[14px] text-gray-500">
Still need help? Contact our{' '}
<button
onClick={() => navigateTo('/contact')}
onClick={() => navigate('/contact')}
className="text-[#04045B] hover:text-[#04045B]/80 font-medium"
>
support team

4
src/pages/OrderConfirmation.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function OrderConfirmation() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

4
src/pages/OrderFailed.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function OrderFailed() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

4
src/pages/OurExpertise.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function OurExpertise() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

4
src/pages/OurImpact.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function OurImpact() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

4
src/pages/OurTeam.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function OurTeam() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

4
src/pages/OurVision.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function OurVision() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

4
src/pages/Privacy.tsx
View File

@@ -2,11 +2,11 @@ import React from 'react';
import { Button } from '../components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { ArrowLeft, Shield, Eye, Lock, FileText } from 'lucide-react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function Privacy() {
const handleBackNavigation = () => {
navigateTo('/');
navigate('/');
};
return (

4
src/pages/ProgrammeCatalogue.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function ProgrammeCatalogue() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

4
src/pages/ProgrammeDetail.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function ProgrammeDetail() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

4
src/pages/Resources.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function Resources() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

6
src/pages/Settings.tsx
View File

@@ -56,13 +56,15 @@ import {
HelpCircle,
ExternalLink
} from 'lucide-react';
import { navigateTo } from '../components/Router';
import { useNavigate } from 'react-router-dom';
interface SettingsProps {
userType?: 'individual' | 'corporate';
}
export function Settings({ userType: propUserType }: SettingsProps) {
const navigate = useNavigate();
// Enhanced user type detection with multiple fallbacks
const getQueryParam = (param: string) => {
const urlParams = new URLSearchParams(window.location.search);
@@ -1169,7 +1171,7 @@ export function Settings({ userType: propUserType }: SettingsProps) {
</p>
<Button
variant="outline"
onClick={() => navigateTo('/privacy')}
onClick={() => navigate('/privacy')}
className="text-base min-h-[44px]"
>
<FileText className="h-4 w-4 mr-2" />

12
src/pages/Signup.tsx
View File

@@ -3,7 +3,7 @@ import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { ArrowLeft, Eye, EyeOff, Mail, Lock, User } from 'lucide-react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function Signup() {
const [formData, setFormData] = useState({
@@ -24,7 +24,7 @@ export function Signup() {
try {
// Simulate signup
await new Promise(resolve => setTimeout(resolve, 1000));
navigateTo('/email-verification');
navigate('/email-verification');
} catch (error) {
console.error('Signup failed:', error);
} finally {
@@ -33,7 +33,7 @@ export function Signup() {
};
const handleBackNavigation = () => {
navigateTo('/');
navigate('/');
};
return (
@@ -195,7 +195,7 @@ export function Signup() {
I agree to the{' '}
<button
type="button"
onClick={() => navigateTo('/terms')}
onClick={() => navigate('/terms')}
className="text-primary hover:text-primary/80 font-medium"
>
Terms of Service
@@ -203,7 +203,7 @@ export function Signup() {
{' '}and{' '}
<button
type="button"
onClick={() => navigateTo('/privacy')}
onClick={() => navigate('/privacy')}
className="text-primary hover:text-primary/80 font-medium"
>
Privacy Policy
@@ -224,7 +224,7 @@ export function Signup() {
<p className="text-[16px] text-gray-600">
Already have an account?{' '}
<button
onClick={() => navigateTo('/auth')}
onClick={() => navigate('/auth')}
className="text-primary hover:text-primary/80 font-medium"
>
Sign in here

3
src/pages/Surveys.tsx
View File

@@ -39,9 +39,9 @@ import {
Globe,
ExternalLink
} from 'lucide-react';
import { navigateTo } from '../components/Router';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
import exampleImage from 'figma:asset/c501c3d3f3a828828d4cb2dadb9558b43986718f.png';
import { useNavigate } from 'react-router-dom';
interface SurveyProps {
userType: 'individual' | 'corporate';
@@ -380,6 +380,7 @@ function SurveyCard({
export function Surveys({ userType = 'individual' }: SurveyProps) {
const [activeTab, setActiveTab] = useState<'available' | 'completed'>('available');
const navigate = useNavigate();
// Mock user data for LearnerLayout - matching Library page pattern
const user = {

4
src/pages/TeamLeadership.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function TeamLeadership() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

4
src/pages/Terms.tsx
View File

@@ -2,11 +2,11 @@ import React from 'react';
import { Button } from '../components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { ArrowLeft, FileText, Scale, AlertCircle } from 'lucide-react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function Terms() {
const handleBackNavigation = () => {
navigateTo('/');
navigate('/');
};
return (

4
src/pages/WebinarDetail.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function WebinarDetail() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

4
src/pages/WebinarListing.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../components/Router';
const navigate = useNavigate();
export function WebinarListing() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

16
src/pages/learner/CorporateDashboard.tsx
View File

@@ -46,10 +46,10 @@ import {
Globe,
MapPin
} from 'lucide-react';
import { navigateTo } from '../../components/Router';
import { ImageWithFallback } from '../../components/figma/ImageWithFallback';
import globalMapImage from 'figma:asset/1b56e6afe31d5744d2e7a38d3e2f8c3ce78a90af.png';
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
// Loading skeleton component for corporate dashboard
function CorporateDashboardSkeleton() {
return (
@@ -422,7 +422,7 @@ function CorporateAnalytics() {
<Button
variant="ghost"
size="sm"
onClick={() => navigateTo('/library?view=corporate')}
onClick={() => navigate('/library?view=corporate')}
className="text-base h-auto p-0 text-primary hover:text-primary/80"
>
View Reports
@@ -506,7 +506,7 @@ function CorporateAnalytics() {
<div className="mt-6">
<Button
variant="outline"
onClick={() => navigateTo('/library?view=corporate')}
onClick={() => navigate('/library?view=corporate')}
className="w-full text-base h-11"
>
View Detailed Analytics
@@ -622,7 +622,7 @@ function AssignedTraining() {
<Button
variant="ghost"
size="sm"
onClick={() => navigateTo('/library?view=corporate')}
onClick={() => navigate('/library?view=corporate')}
className="text-base h-10"
>
View All
@@ -639,7 +639,7 @@ function AssignedTraining() {
className={`group cursor-pointer bg-white rounded-lg border transition-all duration-200 flex flex-col h-full overflow-hidden ${
assignment.status === 'urgent' ? 'border-destructive/30 bg-destructive/5' : 'border-border hover:shadow-md'
}`}
onClick={() => navigateTo(`/library?view=corporate&courseId=${assignment.id}&tab=overview`)}
onClick={() => navigate(`/library?view=corporate&courseId=${assignment.id}&tab=overview`)}
>
{/* Course Image */}
<div className="relative h-32 w-full overflow-hidden">
@@ -724,7 +724,7 @@ function AssignedTraining() {
className="w-full text-base h-10"
onClick={(e) => {
e.stopPropagation();
navigateTo(`/library?view=corporate&courseId=${assignment.id}&tab=overview`);
navigate(`/library?view=corporate&courseId=${assignment.id}&tab=overview`);
}}
>
{assignment.status === 'urgent' ? 'Start Now' : 'Begin Training'}
@@ -764,7 +764,7 @@ function TeamLeaderboard() {
<Button
variant="outline"
size="sm"
onClick={() => navigateTo('/leaderboard?view=corporate')}
onClick={() => navigate('/leaderboard?view=corporate')}
className="text-base h-10 border-2 border-brand-navy/15 text-brand-navy/80 hover:bg-brand-navy/3 font-semibold"
>
View All

13
src/pages/learner/CourseTimeline.tsx
View File

@@ -43,7 +43,8 @@ import {
ChevronDown,
ChevronUp
} from 'lucide-react';
import { navigateTo } from '../../components/Router';
import { useNavigate } from 'react-router-dom';
// import { navigate } from '../../components/Router';
interface CourseTimelineProps {
userType?: 'individual' | 'corporate';
@@ -458,7 +459,7 @@ function CourseHeader({ course }: { course: Course }) {
{/* Breadcrumb Navigation */}
<nav className="flex items-center gap-2 text-base text-muted-foreground">
<button
onClick={() => navigateTo('/dashboard')}
onClick={() => navigate('/dashboard')}
className="hover:text-foreground transition-colors active:bg-gray-100 focus:outline-none px-2 py-1 rounded"
style={{ outline: 'none' }}
>
@@ -466,7 +467,7 @@ function CourseHeader({ course }: { course: Course }) {
</button>
<ChevronRight className="h-4 w-4" />
<button
onClick={() => navigateTo('/library')}
onClick={() => navigate('/library')}
className="hover:text-foreground transition-colors active:bg-gray-100 focus:outline-none px-2 py-1 rounded"
style={{ outline: 'none' }}
>
@@ -962,6 +963,8 @@ export function CourseTimeline({ userType = 'individual' }: CourseTimelineProps)
const [activeTab, setActiveTab] = useState('overview');
const [course, setCourse] = useState<Course | null>(null);
const [isLoading, setIsLoading] = useState(true);
const navigate = useNavigate();
// Mock user data
const user = {
@@ -1017,14 +1020,14 @@ export function CourseTimeline({ userType = 'individual' }: CourseTimelineProps)
{/* Breadcrumb Navigation */}
<div className="flex items-center gap-2 text-sm text-gray-600 mb-3">
<button
onClick={() => navigateTo('/library')}
onClick={() => navigate('/library')}
className="hover:text-[#04045B] transition-colors"
>
Library
</button>
<ChevronRight className="h-4 w-4" />
<button
onClick={() => navigateTo('/library')}
onClick={() => navigate('/library')}
className="hover:text-[#04045B] transition-colors"
>
Leadership Development

31
src/pages/learner/Dashboard.tsx
View File

@@ -75,13 +75,15 @@ import {
Monitor,
PieChart
} from 'lucide-react';
import { navigateTo } from '../../components/Router';
// import { navigate } from '../../components/Router';
import { ImageWithFallback } from '../../components/figma/ImageWithFallback';
import CurrentLearningHeaderIcon from '../../imports/CurrentLearningHeaderIcon-4285-106';
import platinumTrophy from 'figma:asset/a224fb6efc954992c535e482fe88d93f1f4178d8.png';
import goldTrophy from 'figma:asset/9ebc01e8eb24f9d71683b2ee63d224583a979590.png';
import silverTrophy from 'figma:asset/9852710543a90e291ecb85d77ea02234139264c5.png';
import bronzeTrophy from 'figma:asset/5fddc261d2e35ee810113f2537c5a59a97fd7fbd.png';
import { useNavigate } from 'react-router-dom';
interface DashboardProps {
userType?: 'individual' | 'corporate';
@@ -187,7 +189,7 @@ function RecentActivity() {
<Button
variant="outline"
size="sm"
onClick={() => navigateTo('/dashboard?view=individual&tab=activity')}
onClick={() => navigate('/dashboard?view=individual&tab=activity')}
className="text-brand-navy hover:bg-brand-navy/10 border-brand-navy/20 text-base px-3 py-1.5 min-h-[48px] font-medium"
>
View All
@@ -806,7 +808,7 @@ function CurrentLearningProgress({ userType = 'individual' }: { userType?: 'indi
{currentCourse.currentModule.title}
</h3>
<Button
onClick={() => navigateTo(`/course?view=${userType}&courseId=strategic-leadership&module=${currentCourse.currentModule.number}`)}
onClick={() => navigate(`/course?view=${userType}&courseId=strategic-leadership&module=${currentCourse.currentModule.number}`)}
className="w-full text-base min-h-[48px] bg-brand-gold hover:bg-brand-gold/90 text-brand-charcoal font-medium"
>
Continue Module →
@@ -826,7 +828,7 @@ function CurrentLearningProgress({ userType = 'individual' }: { userType?: 'indi
</h3>
<Button
variant="outline"
onClick={() => navigateTo(`/course?view=${userType}&courseId=strategic-leadership&module=${currentCourse.nextModule.number}`)}
onClick={() => navigate(`/course?view=${userType}&courseId=strategic-leadership&module=${currentCourse.nextModule.number}`)}
className="w-full text-base min-h-[48px] border-brand-navy text-brand-navy hover:bg-brand-navy/10 font-medium"
>
Preview Module →
@@ -840,7 +842,7 @@ function CurrentLearningProgress({ userType = 'individual' }: { userType?: 'indi
<h3 className="text-base font-semibold text-gray-900">Course Modules</h3>
<Button
variant="ghost"
onClick={() => navigateTo(`/course?view=${userType}&courseId=strategic-leadership`)}
onClick={() => navigate(`/course?view=${userType}&courseId=strategic-leadership`)}
className="text-sm text-brand-navy hover:text-brand-navy hover:bg-brand-navy/10 p-0 h-auto font-medium"
>
View All →
@@ -875,7 +877,7 @@ function CurrentLearningProgress({ userType = 'individual' }: { userType?: 'indi
<div className="flex items-center justify-between">
<Button
variant="ghost"
onClick={() => navigateTo(`/course?view=${userType}&courseId=strategic-leadership`)}
onClick={() => navigate(`/course?view=${userType}&courseId=strategic-leadership`)}
className="text-base text-gray-600 hover:text-gray-900 hover:bg-gray-50 p-0 min-h-[48px] font-medium flex items-center gap-1"
>
<BookOpen className="h-4 w-4" />
@@ -883,7 +885,7 @@ function CurrentLearningProgress({ userType = 'individual' }: { userType?: 'indi
</Button>
<Button
onClick={() => navigateTo(`/course?view=${userType}&courseId=strategic-leadership&module=${currentCourse.currentModule.number}`)}
onClick={() => navigate(`/course?view=${userType}&courseId=strategic-leadership&module=${currentCourse.currentModule.number}`)}
className="text-base min-h-[48px] bg-brand-navy hover:bg-brand-navy/90 text-white font-medium px-6"
>
<Play className="h-4 w-4 mr-2" />
@@ -990,7 +992,7 @@ function GlobalLeaderboard() {
<Button
variant="outline"
size="sm"
onClick={() => navigateTo('/leaderboard?view=individual')}
onClick={() => navigate('/leaderboard?view=individual')}
className="text-brand-navy hover:bg-brand-navy/10 border-brand-navy/20 text-sm px-3 py-1.5 h-auto font-medium"
>
View All
@@ -1111,7 +1113,7 @@ function ActivityRecommendations({ userType = 'individual' }: { userType?: 'indi
</div>
<Button
variant="outline"
onClick={() => navigateTo(`/library?view=${userType}`)}
onClick={() => navigate(`/library?view=${userType}`)}
className="text-brand-navy hover:bg-brand-navy/10 border-brand-navy/20 text-base px-4 py-2 h-auto font-medium"
>
View All Courses
@@ -1160,7 +1162,7 @@ function ActivityRecommendations({ userType = 'individual' }: { userType?: 'indi
{/* Enroll Button */}
<Button
onClick={() => navigateTo(`/course?view=${userType}&courseId=${course.id}`)}
onClick={() => navigate(`/course?view=${userType}&courseId=${course.id}`)}
className="w-full text-base min-h-[48px] bg-brand-navy hover:bg-brand-navy/90 text-white font-medium"
>
Enroll Now
@@ -1243,7 +1245,7 @@ function RecentlyViewed({ userType = 'individual' }: { userType?: 'individual' |
</div>
<Button
variant="outline"
onClick={() => navigateTo(`/library?view=${userType}&filter=recent`)}
onClick={() => navigate(`/library?view=${userType}&filter=recent`)}
className="text-brand-navy hover:bg-brand-navy/10 border-brand-navy/20 text-base px-4 py-2 h-auto font-medium"
>
View History
@@ -1298,7 +1300,7 @@ function RecentlyViewed({ userType = 'individual' }: { userType?: 'individual' |
{/* Action Button */}
<Button
onClick={() => navigateTo(`/course?view=${userType}&courseId=${item.id}`)}
onClick={() => navigate(`/course?view=${userType}&courseId=${item.id}`)}
className="w-full text-base min-h-[48px] bg-brand-navy hover:bg-brand-navy/90 text-white font-medium"
>
{item.progress === 100 ? 'Review' : item.progress > 0 ? 'Continue' : 'Start'}
@@ -1373,7 +1375,7 @@ function WhatOthersLearning({ userType = 'individual' }: { userType?: 'individua
</div>
<Button
variant="outline"
onClick={() => navigateTo(`/library?view=${userType}&filter=trending`)}
onClick={() => navigate(`/library?view=${userType}&filter=trending`)}
className="text-brand-navy hover:bg-brand-navy/10 border-brand-navy/20 text-base px-4 py-2 h-auto font-medium"
>
View Trending
@@ -1422,7 +1424,7 @@ function WhatOthersLearning({ userType = 'individual' }: { userType?: 'individua
{/* Enroll Button */}
<Button
onClick={() => navigateTo(`/course?view=${userType}&courseId=${content.id}`)}
onClick={() => navigate(`/course?view=${userType}&courseId=${content.id}`)}
className="w-full text-base min-h-[48px] bg-brand-navy hover:bg-brand-navy/90 text-white font-medium"
>
Enroll Now
@@ -1437,6 +1439,7 @@ function WhatOthersLearning({ userType = 'individual' }: { userType?: 'individua
// Main Dashboard component
export default function Dashboard({ userType = 'individual' }: DashboardProps) {
const navigate = useNavigate();
const user = { name: 'Alex', email: 'alex@example.com' };
return (

9
src/pages/learner/Library.tsx
View File

@@ -10,7 +10,9 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../components/ui/ta
import { Skeleton } from '../../components/ui/skeleton';
import { BookOpen, Filter, Search } from 'lucide-react';
import { getCoursesData, Course } from './data/libraryData';
import { navigateTo } from '../../components/Router';
import { useNavigate } from 'react-router-dom';
// import { navigate } from '../../components/Router';
interface LibraryProps {
userType?: 'individual' | 'corporate';
@@ -51,6 +53,7 @@ function LibrarySkeleton() {
export function Library({ userType = 'individual' }: LibraryProps) {
const [isLoading, setIsLoading] = useState(true);
const [courses] = useState<Course[]>(getCoursesData(userType));
const navigate = useNavigate();
// Filter states
const [searchQuery, setSearchQuery] = useState('');
@@ -155,12 +158,12 @@ export function Library({ userType = 'individual' }: LibraryProps) {
const handleEnrollCourse = (courseId: string) => {
console.log('Enrolling in course:', courseId);
navigateTo(`/course/${courseId}?view=${userType}`);
navigate(`/course/${courseId}?view=${userType}`);
};
const handleContinueCourse = (courseId: string) => {
console.log('Continuing course:', courseId);
navigateTo(`/course/${courseId}?view=${userType}`);
navigate(`/course/${courseId}?view=${userType}`);
};
const handleBookmarkCourse = (courseId: string) => {

7
src/pages/services/Consulting.tsx
View File

@@ -1,10 +1,11 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../../components/Router';
import { useNavigate } from 'react-router-dom';
// import { navigate } from '../../components/Router';
const navigate = useNavigate();
export function Consulting() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

6
src/pages/services/CultureCompetence.tsx
View File

@@ -1,10 +1,12 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../../components/Router';
import { useNavigate } from 'react-router-dom';
// import { navigate } from '../../components/Router';
const navigate = useNavigate();
export function CultureCompetence() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

6
src/pages/services/ExecutiveCoaching.tsx
View File

@@ -1,10 +1,12 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../../components/Router';
import { useNavigate } from 'react-router-dom';
// import { navigate } from '../../components/Router';
const navigate = useNavigate();
export function ExecutiveCoaching() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

7
src/pages/services/LeadershipDevelopment.tsx
View File

@@ -1,10 +1,11 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../../components/Router';
import { useNavigate } from 'react-router-dom';
// import { navigate } from '../../components/Router';
const navigate = useNavigate();
export function LeadershipDevelopment() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

6
src/pages/services/LearningFacility.tsx
View File

@@ -1,10 +1,12 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../../components/Router';
import { useNavigate } from 'react-router-dom';
// import { navigate } from '../../components/Router';
const navigate = useNavigate();
export function LearningFacility() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;

6
src/pages/services/ManagementDevelopment.tsx
View File

@@ -1,10 +1,12 @@
import React, { useEffect } from 'react';
import { navigateTo } from '../../components/Router';
import { useNavigate } from 'react-router-dom';
// import { navigate } from '../../components/Router';
const navigate = useNavigate();
export function ManagementDevelopment() {
useEffect(() => {
// This is a deprecated page, redirect to home
navigateTo('/');
navigate('/');
}, []);
return null;