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

Compare commits

merge into: KLC:main
Branches Tags
KLC:main KLC:tufail-dev KLC:parth-dev
...
pull from: KLC:parth-dev
Branches Tags
KLC:main KLC:tufail-dev KLC:parth-dev

2 Commits
main ... parth-dev

Author SHA1 Message Date
parth.ramani
f9016fd732 worked on the course modal 2025-09-09 17:38:12 +05:30
parth.ramani
31a068ae4e worked on the files arrranging 2025-09-09 15:16:05 +05:30
60 changed files with 1366 additions and 1318 deletions
Expand all files Collapse all files

76
package-lock.json generated
View File

@@ -51,7 +51,8 @@
"react-hook-form": "^7.55.0", "react-hook-form": "^7.55.0",
"react-redux": "^9.2.0", "react-redux": "^9.2.0",
"react-resizable-panels": "^2.1.7", "react-resizable-panels": "^2.1.7",
"react-router-dom": "^7.8.2", "react-router": "^6.30.1",
"react-router-dom": "^6.30.1",
"recharts": "^2.15.2", "recharts": "^2.15.2",
"sonner": "^2.0.3", "sonner": "^2.0.3",
"tailwind-merge": "*", "tailwind-merge": "*",
@@ -1919,6 +1920,15 @@
} }
} }
}, },
"node_modules/@remix-run/router": {
"version": "1.23.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
"integrity": "sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==",
"license": "MIT",
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/@rolldown/pluginutils": { "node_modules/@rolldown/pluginutils": {
"version": "1.0.0-beta.27", "version": "1.0.0-beta.27",
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz", "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -2789,7 +2799,7 @@
"version": "19.1.12", "version": "19.1.12",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
"integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==", "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
"devOptional": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"csstype": "^3.0.2" "csstype": "^3.0.2"
@@ -2799,7 +2809,7 @@
"version": "19.1.9", "version": "19.1.9",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz",
"integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==", "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
"devOptional": true, "dev": true,
"license": "MIT", "license": "MIT",
"peerDependencies": { "peerDependencies": {
"@types/react": "^19.0.0" "@types/react": "^19.0.0"
@@ -2883,15 +2893,6 @@
"react-dom": "^18 || ^19 || ^19.0.0-rc" "react-dom": "^18 || ^19 || ^19.0.0-rc"
} }
}, },
"node_modules/cookie": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
"license": "MIT",
"engines": {
"node": ">=18"
}
},
"node_modules/csstype": { "node_modules/csstype": {
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -3019,17 +3020,6 @@
"node": ">=12" "node": ">=12"
} }
}, },
"node_modules/date-fns": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
"integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
"license": "MIT",
"peer": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/kossnocorp"
}
},
"node_modules/decimal.js-light": { "node_modules/decimal.js-light": {
"version": "2.5.1", "version": "2.5.1",
"resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz", "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
@@ -3828,41 +3818,35 @@
} }
}, },
"node_modules/react-router": { "node_modules/react-router": {
"version": "7.8.2", "version": "6.30.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.8.2.tgz", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.1.tgz",
"integrity": "sha512-7M2fR1JbIZ/jFWqelpvSZx+7vd7UlBTfdZqf6OSdF9g6+sfdqJDAWcak6ervbHph200ePlu+7G8LdoiC3ReyAQ==", "integrity": "sha512-X1m21aEmxGXqENEPG3T6u0Th7g0aS4ZmoNynhbs+Cn+q+QGTLt+d5IQ2bHAXKzKcxGJjxACpVbnYQSCRcfxHlQ==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"cookie": "^1.0.1", "@remix-run/router": "1.23.0"
"set-cookie-parser": "^2.6.0"
}, },
"engines": { "engines": {
"node": ">=20.0.0" "node": ">=14.0.0"
}, },
"peerDependencies": { "peerDependencies": {
"react": ">=18", "react": ">=16.8"
"react-dom": ">=18"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
}
} }
}, },
"node_modules/react-router-dom": { "node_modules/react-router-dom": {
"version": "7.8.2", "version": "6.30.1",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.8.2.tgz", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.1.tgz",
"integrity": "sha512-Z4VM5mKDipal2jQ385H6UBhiiEDlnJPx6jyWsTYoZQdl5TrjxEV2a9yl3Fi60NBJxYzOTGTTHXPi0pdizvTwow==", "integrity": "sha512-llKsgOkZdbPU1Eg3zK8lCn+sjD9wMRZZPuzmdWWX5SUs8OFkN5HnFVC0u5KMeMaC9aoancFI/KoLuKPqN+hxHw==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"react-router": "7.8.2" "@remix-run/router": "1.23.0",
"react-router": "6.30.1"
}, },
"engines": { "engines": {
"node": ">=20.0.0" "node": ">=14.0.0"
}, },
"peerDependencies": { "peerDependencies": {
"react": ">=18", "react": ">=16.8",
"react-dom": ">=18" "react-dom": ">=16.8"
} }
}, },
"node_modules/react-smooth": { "node_modules/react-smooth": {
@@ -4020,12 +4004,6 @@
"loose-envify": "^1.1.0" "loose-envify": "^1.1.0"
} }
}, },
"node_modules/set-cookie-parser": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
"license": "MIT"
},
"node_modules/sonner": { "node_modules/sonner": {
"version": "2.0.7", "version": "2.0.7",
"resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz", "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",

3
package.json
View File

@@ -46,7 +46,8 @@
"react-hook-form": "^7.55.0", "react-hook-form": "^7.55.0",
"react-redux": "^9.2.0", "react-redux": "^9.2.0",
"react-resizable-panels": "^2.1.7", "react-resizable-panels": "^2.1.7",
"react-router-dom": "^7.8.2", "react-router": "^6.30.1",
"react-router-dom": "^6.30.1",
"recharts": "^2.15.2", "recharts": "^2.15.2",
"sonner": "^2.0.3", "sonner": "^2.0.3",
"tailwind-merge": "*", "tailwind-merge": "*",

32
src/App.tsx
View File

@@ -1,34 +1,8 @@
import { Routes, Route } from "react-router-dom"; import React from "react";
// import AppLayout from "./components/AppLayout"; import { Router } from "./components/Router";
// Pages
import IndividualWebinars from "./pages/IndividualWebinars";
import Leaderboard from "./pages/Leaderboard";
import HomePage from "./pages/HomePage";
import Dashboard from "./pages/learner/Dashboard";
import { Library } from "./pages/learner/Library";
import { CourseTimeline } from "./pages/learner/CourseTimeline";
import { Settings } from "./pages/Settings";
import { Surveys } from "./pages/Surveys";
export default function App() { export default function App() {
return ( return (
<> <Router />
<Routes>
{/* Main */}
<Route path="/" element={<Dashboard />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/library" element={<Library />} />
<Route path="/course" element={<CourseTimeline />} />
<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 />} />
{/* Fallback */}
<Route path="*" element={<HomePage />} />
</Routes>
</>
); );
} }

14
src/components/AppLayout.tsx Normal file
View File

@@ -0,0 +1,14 @@
import React from "react";
import { Outlet } from "react-router-dom";
export default function AppLayout() {
return (
<div className="min-h-screen">
<main>
<Outlet />
</main>
</div>
);
}

875
src/components/Navigation.tsx
View File

@@ -20,7 +20,7 @@ import {
} from './ui/sheet'; } from './ui/sheet';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible'; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
// import { navigate } from './Router'; // import { navigate } from './Router';
import { useAuth } from './AuthContext'; // import { useAuth } from './AuthContext';
// import klcLogo from 'figma:asset/209958db0c439ec78be82ab4f3e335a6aed5de89.png'; // import klcLogo from 'figma:asset/209958db0c439ec78be82ab4f3e335a6aed5de89.png';
// import exampleImage from 'figma:asset/6cae567b6bf6a44cb03b767e4308c4c705340d08.png'; // import exampleImage from 'figma:asset/6cae567b6bf6a44cb03b767e4308c4c705340d08.png';
const klcLogo = 'https://res.cloudinary.com/dt3k2apqd/image/upload/v1697045531/Kautilya_Leadership_Centre_Logo_hor_uxh0v4.png'; const klcLogo = 'https://res.cloudinary.com/dt3k2apqd/image/upload/v1697045531/Kautilya_Leadership_Centre_Logo_hor_uxh0v4.png';
@@ -54,12 +54,13 @@ import {
ArrowRight ArrowRight
} from 'lucide-react'; } from 'lucide-react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
const navigate = useNavigate(); import { useAuth } from './AuthContext';
interface NavigationProps { interface NavigationProps {
currentPage?: string; currentPage?: string;
} }
export function Navigation({ currentPage }: NavigationProps) { export function Navigation({ currentPage }: NavigationProps) {
const navigate = useNavigate();
const [isScrolled, setIsScrolled] = useState(false); const [isScrolled, setIsScrolled] = useState(false);
const [activeDropdown, setActiveDropdown] = useState<string | null>(null); const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -74,13 +75,13 @@ export function Navigation({ currentPage }: NavigationProps) {
}; };
const isIndividualUser = getQueryParam('view') === 'individual' || const isIndividualUser = getQueryParam('view') === 'individual' ||
(!getQueryParam('view') && currentPage?.includes('/dashboard')) || (!getQueryParam('view') && currentPage?.includes('/dashboard')) ||
(!getQueryParam('view') && currentPage?.includes('/library')) || (!getQueryParam('view') && currentPage?.includes('/library')) ||
(!getQueryParam('view') && currentPage?.includes('/course')) || (!getQueryParam('view') && currentPage?.includes('/course')) ||
(!getQueryParam('view') && currentPage?.includes('/settings')) || (!getQueryParam('view') && currentPage?.includes('/settings')) ||
(!getQueryParam('view') && currentPage?.includes('/surveys')) || (!getQueryParam('view') && currentPage?.includes('/surveys')) ||
(!getQueryParam('view') && currentPage?.includes('/webinars')) || (!getQueryParam('view') && currentPage?.includes('/webinars')) ||
(!getQueryParam('view') && currentPage?.includes('/leaderboard')); (!getQueryParam('view') && currentPage?.includes('/leaderboard'));
const isCorporateUser = getQueryParam('view') === 'corporate'; const isCorporateUser = getQueryParam('view') === 'corporate';
@@ -262,451 +263,447 @@ export function Navigation({ currentPage }: NavigationProps) {
]; ];
return ( return (
<nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${ // <nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled ? 'bg-white/95 backdrop-blur-md shadow-sm' : 'bg-white'
isScrolled ? 'bg-white/95 backdrop-blur-md shadow-sm' : 'bg-white' // }`}>
}`}> // <div className="w-full px-4 lg:px-8">
<div className="w-full px-4 lg:px-8"> // <div className="flex items-center justify-between h-[70px]">
<div className="flex items-center justify-between h-[70px]"> // {/* Logo */}
{/* Logo */} // <div className="flex-shrink-0">
<div className="flex-shrink-0"> // <button
<button // onClick={() => navigate('/')}
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"
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"
aria-label="Go to KLC homepage" // >
> // <img
<img // src={klcLogo}
src={klcLogo} // alt="Kautilya Leadership Centre"
alt="Kautilya Leadership Centre" // className="h-12 w-auto object-contain"
className="h-12 w-auto object-contain" // />
/> // </button>
</button> // </div>
</div>
{/* Desktop Navigation */} // {/* Desktop Navigation */}
<div className="hidden lg:flex items-center space-x-8"> // <div className="hidden lg:flex items-center space-x-8">
{navigationItems.map((item) => ( // {navigationItems.map((item) => (
<div key={item.title} className="relative" data-dropdown> // <div key={item.title} className="relative" data-dropdown>
<button // <button
onClick={() => handleDropdownToggle(item.title)} // onClick={() => handleDropdownToggle(item.title)}
className="flex items-center space-x-1 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" // className="flex items-center space-x-1 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"
aria-expanded={activeDropdown === item.title} // aria-expanded={activeDropdown === item.title}
aria-haspopup="true" // aria-haspopup="true"
> // >
<span>{item.title}</span> // <span>{item.title}</span>
<ChevronDown className={`h-4 w-4 transition-transform ${ // <ChevronDown className={`h-4 w-4 transition-transform ${activeDropdown === item.title ? 'rotate-180' : ''
activeDropdown === item.title ? 'rotate-180' : '' // }`} />
}`} /> // </button>
</button>
{activeDropdown === item.title && ( // {activeDropdown === item.title && (
<div className="absolute top-full left-0 mt-2 w-64 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50"> // <div className="absolute top-full left-0 mt-2 w-64 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50">
{item.items.map((subItem) => { // {item.items.map((subItem) => {
const IconComponent = subItem.icon; // const IconComponent = subItem.icon;
return ( // return (
<button // <button
key={subItem.title} // key={subItem.title}
onClick={() => { // onClick={() => {
navigate(subItem.href); // navigate(subItem.href);
setActiveDropdown(null); // 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" // 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"
> // >
<IconComponent className="h-4 w-4 flex-shrink-0" /> // <IconComponent className="h-4 w-4 flex-shrink-0" />
<span>{subItem.title}</span> // <span>{subItem.title}</span>
</button> // </button>
); // );
})} // })}
</div> // </div>
)} // )}
</div> // </div>
))} // ))}
<button // <button
onClick={() => navigate('/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" // 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 // Contact
</button> // </button>
</div> // </div>
{/* Right Section - Desktop */} // {/* Right Section - Desktop */}
<div className="hidden lg:flex items-center space-x-4"> // <div className="hidden lg:flex items-center space-x-4">
{!isAuthenticated ? ( // {!isAuthenticated ? (
<> // <>
<Button // <Button
variant="ghost" // variant="ghost"
onClick={handleLogin} // onClick={handleLogin}
className="text-[16px] min-h-[44px]" // className="text-[16px] min-h-[44px]"
> // >
Sign In // Sign In
</Button> // </Button>
<Button // <Button
onClick={handleSignup} // onClick={handleSignup}
className="text-[16px] min-h-[44px] bg-primary hover:bg-primary/90 text-primary-foreground" // className="text-[16px] min-h-[44px] bg-primary hover:bg-primary/90 text-primary-foreground"
> // >
Get Started // Get Started
</Button> // </Button>
</> // </>
) : ( // ) : (
<div className="flex items-center space-x-4"> // <div className="flex items-center space-x-4">
{/* Redesigned User Profile Dropdown */} // {/* Redesigned User Profile Dropdown */}
<DropdownMenu> // <DropdownMenu>
<DropdownMenuTrigger asChild> // <DropdownMenuTrigger asChild>
<Button // <Button
variant="ghost" // variant="ghost"
className="flex items-center gap-3 h-auto p-2 hover:bg-gray-50 transition-all duration-200 rounded-lg min-h-[44px]" // className="flex items-center gap-3 h-auto p-2 hover:bg-gray-50 transition-all duration-200 rounded-lg min-h-[44px]"
aria-label="Open user menu" // aria-label="Open user menu"
> // >
<Avatar className="h-8 w-8"> // <Avatar className="h-8 w-8">
<AvatarImage // <AvatarImage
src={currentUser.avatar} // src={currentUser.avatar}
alt={currentUser.name} // alt={currentUser.name}
/> // />
<AvatarFallback className="bg-primary/10 text-primary text-sm"> // <AvatarFallback className="bg-primary/10 text-primary text-sm">
{currentUser.name.split(' ').map(n => n[0]).join('')} // {currentUser.name.split(' ').map(n => n[0]).join('')}
</AvatarFallback> // </AvatarFallback>
</Avatar> // </Avatar>
<div className="flex flex-col items-start min-w-0"> // <div className="flex flex-col items-start min-w-0">
<span className="text-[16px] font-medium text-gray-900 truncate"> // <span className="text-[16px] font-medium text-gray-900 truncate">
{currentUser.name} // {currentUser.name}
</span> // </span>
<span className="text-[14px] text-gray-600 truncate"> // <span className="text-[14px] text-gray-600 truncate">
{isIndividualUser ? 'Individual Account' : 'Corporate Account'} // {isIndividualUser ? 'Individual Account' : 'Corporate Account'}
</span> // </span>
</div> // </div>
<ChevronDown className="h-4 w-4 text-gray-500 flex-shrink-0" /> // <ChevronDown className="h-4 w-4 text-gray-500 flex-shrink-0" />
</Button> // </Button>
</DropdownMenuTrigger> // </DropdownMenuTrigger>
<DropdownMenuContent className="w-80 p-0" align="end" forceMount> // <DropdownMenuContent className="w-80 p-0" align="end" forceMount>
{/* Header Section */} // {/* Header Section */}
<div className="p-4 border-b border-gray-100 bg-gray-50"> // <div className="p-4 border-b border-gray-100 bg-gray-50">
<div className="flex items-center gap-3"> // <div className="flex items-center gap-3">
<Avatar className="h-12 w-12"> // <Avatar className="h-12 w-12">
<AvatarImage // <AvatarImage
src={currentUser.avatar} // src={currentUser.avatar}
alt={currentUser.name} // alt={currentUser.name}
/> // />
<AvatarFallback className="bg-primary/10 text-primary text-lg"> // <AvatarFallback className="bg-primary/10 text-primary text-lg">
{currentUser.name.split(' ').map(n => n[0]).join('')} // {currentUser.name.split(' ').map(n => n[0]).join('')}
</AvatarFallback> // </AvatarFallback>
</Avatar> // </Avatar>
<div className="flex-1 min-w-0"> // <div className="flex-1 min-w-0">
<div className="flex items-center gap-2"> // <div className="flex items-center gap-2">
<p className="text-[16px] font-semibold text-gray-900 truncate"> // <p className="text-[16px] font-semibold text-gray-900 truncate">
{currentUser.name} // {currentUser.name}
</p> // </p>
<ChevronDown className="h-4 w-4 text-gray-400 flex-shrink-0" /> // <ChevronDown className="h-4 w-4 text-gray-400 flex-shrink-0" />
</div> // </div>
<p className="text-[14px] text-gray-600 truncate"> // <p className="text-[14px] text-gray-600 truncate">
{isIndividualUser ? 'Individual Account' : 'Corporate Account'} // {isIndividualUser ? 'Individual Account' : 'Corporate Account'}
</p> // </p>
</div> // </div>
</div> // </div>
</div> // </div>
{/* Account Switching Section */} // {/* Account Switching Section */}
<div className="p-4 border-b border-gray-100"> // <div className="p-4 border-b border-gray-100">
<h4 className="text-[14px] font-medium text-gray-900 mb-3">Switch Account</h4> // <h4 className="text-[14px] font-medium text-gray-900 mb-3">Switch Account</h4>
<div className="space-y-2"> // <div className="space-y-2">
{availableAccounts.map((account) => { // {availableAccounts.map((account) => {
const IconComponent = account.icon; // const IconComponent = account.icon;
return ( // return (
<div // <div
key={account.type} // key={account.type}
className={`flex items-center gap-3 p-3 rounded-lg border transition-all duration-200 ${ // className={`flex items-center gap-3 p-3 rounded-lg border transition-all duration-200 ${account.isActive
account.isActive // ? 'bg-green-50 border-green-200'
? 'bg-green-50 border-green-200' // : 'bg-gray-50 border-gray-200 hover:bg-gray-100 cursor-pointer'
: 'bg-gray-50 border-gray-200 hover:bg-gray-100 cursor-pointer' // }`}
}`} // onClick={() => !account.isActive && handleAccountSignIn(account.type as 'individual' | 'corporate')}
onClick={() => !account.isActive && handleAccountSignIn(account.type as 'individual' | 'corporate')} // >
> // <div className="relative">
<div className="relative"> // {account.type === 'individual' ? (
{account.type === 'individual' ? ( // <Avatar className="h-8 w-8">
<Avatar className="h-8 w-8"> // <AvatarImage
<AvatarImage // src={currentUser.avatar}
src={currentUser.avatar} // alt={currentUser.name}
alt={currentUser.name} // />
/> // <AvatarFallback className="bg-blue-100 text-blue-700 text-sm">
<AvatarFallback className="bg-blue-100 text-blue-700 text-sm"> // <User className="h-4 w-4" />
<User className="h-4 w-4" /> // </AvatarFallback>
</AvatarFallback> // </Avatar>
</Avatar> // ) : (
) : ( // <div className="h-8 w-8 bg-purple-100 rounded-full flex items-center justify-center">
<div className="h-8 w-8 bg-purple-100 rounded-full flex items-center justify-center"> // <Building2 className="h-4 w-4 text-purple-700" />
<Building2 className="h-4 w-4 text-purple-700" /> // </div>
</div> // )}
)} // {account.isActive && (
{account.isActive && ( // <div className="absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full flex items-center justify-center">
<div className="absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full flex items-center justify-center"> // <Check className="h-2.5 w-2.5 text-white" />
<Check className="h-2.5 w-2.5 text-white" /> // </div>
</div> // )}
)} // </div>
</div> // <div className="flex-1 min-w-0">
<div className="flex-1 min-w-0"> // <p className="text-[14px] font-medium text-gray-900 truncate">
<p className="text-[14px] font-medium text-gray-900 truncate"> // {account.title}
{account.title} // </p>
</p> // <p className="text-[14px] text-gray-600 truncate">
<p className="text-[14px] text-gray-600 truncate"> // {account.subtitle}
{account.subtitle} // </p>
</p> // </div>
</div> // {!account.isActive && (
{!account.isActive && ( // <ArrowRight className="h-4 w-4 text-gray-400 flex-shrink-0" />
<ArrowRight className="h-4 w-4 text-gray-400 flex-shrink-0" /> // )}
)} // </div>
</div> // );
); // })}
})} // </div>
</div> // </div>
</div>
<DropdownMenuSeparator /> // <DropdownMenuSeparator />
{/* Settings and Logout */} // {/* Settings and Logout */}
<div className="p-2"> // <div className="p-2">
<DropdownMenuItem // <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]" // 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={() => navigate(learnerMenuItems[learnerMenuItems.length - 1].href)} // onClick={() => navigate(learnerMenuItems[learnerMenuItems.length - 1].href)}
> // >
<Settings className="h-5 w-5 text-gray-500" /> // <Settings className="h-5 w-5 text-gray-500" />
<span className="text-[16px] font-medium text-gray-900">Settings</span> // <span className="text-[16px] font-medium text-gray-900">Settings</span>
</DropdownMenuItem> // </DropdownMenuItem>
<DropdownMenuItem // <DropdownMenuItem
className="flex items-center gap-3 px-3 py-2 cursor-pointer rounded-md text-red-600 hover:bg-red-50 focus:bg-red-50 min-h-[44px]" // className="flex items-center gap-3 px-3 py-2 cursor-pointer rounded-md text-red-600 hover:bg-red-50 focus:bg-red-50 min-h-[44px]"
onClick={handleLogout} // onClick={handleLogout}
> // >
<LogOut className="h-5 w-5" /> // <LogOut className="h-5 w-5" />
<span className="text-[16px] font-medium">Sign Out</span> // <span className="text-[16px] font-medium">Sign Out</span>
</DropdownMenuItem> // </DropdownMenuItem>
</div> // </div>
</DropdownMenuContent> // </DropdownMenuContent>
</DropdownMenu> // </DropdownMenu>
</div> // </div>
)} // )}
</div> // </div>
{/* Mobile Menu Button */} // {/* Mobile Menu Button */}
<div className="lg:hidden"> // <div className="lg:hidden">
<Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}> // <Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
<SheetTrigger asChild> // <SheetTrigger asChild>
<Button // <Button
variant="ghost" // variant="ghost"
size="icon" // size="icon"
className="h-10 w-10" // className="h-10 w-10"
aria-label="Open mobile menu" // aria-label="Open mobile menu"
> // >
<Menu className="h-6 w-6" /> // <Menu className="h-6 w-6" />
</Button> // </Button>
</SheetTrigger> // </SheetTrigger>
<SheetContent side="right" className="w-full sm:w-96 p-0"> // <SheetContent side="right" className="w-full sm:w-96 p-0">
<SheetHeader className="p-6 border-b border-gray-200"> // <SheetHeader className="p-6 border-b border-gray-200">
<SheetTitle className="text-left flex items-center gap-3"> // <SheetTitle className="text-left flex items-center gap-3">
<img // <img
src={klcLogo} // src={klcLogo}
alt="KLC" // alt="KLC"
className="h-8 w-auto object-contain" // className="h-8 w-auto object-contain"
/> // />
<span className="text-lg font-semibold">Menu</span> // <span className="text-lg font-semibold">Menu</span>
</SheetTitle> // </SheetTitle>
</SheetHeader> // </SheetHeader>
<div className="flex flex-col h-full"> // <div className="flex flex-col h-full">
{/* User Section for Mobile */} // {/* User Section for Mobile */}
{isAuthenticated && ( // {isAuthenticated && (
<div className="p-4 border-b border-gray-200"> // <div className="p-4 border-b border-gray-200">
<div className="flex items-center gap-3 mb-4"> // <div className="flex items-center gap-3 mb-4">
<Avatar className="h-12 w-12"> // <Avatar className="h-12 w-12">
<AvatarImage // <AvatarImage
src={currentUser.avatar} // src={currentUser.avatar}
alt={currentUser.name} // alt={currentUser.name}
/> // />
<AvatarFallback className="bg-primary/10 text-primary"> // <AvatarFallback className="bg-primary/10 text-primary">
{currentUser.name.split(' ').map(n => n[0]).join('')} // {currentUser.name.split(' ').map(n => n[0]).join('')}
</AvatarFallback> // </AvatarFallback>
</Avatar> // </Avatar>
<div className="flex-1 min-w-0"> // <div className="flex-1 min-w-0">
<p className="text-[16px] font-semibold text-gray-900 truncate"> // <p className="text-[16px] font-semibold text-gray-900 truncate">
{currentUser.name} // {currentUser.name}
</p> // </p>
<p className="text-[14px] text-gray-600 truncate"> // <p className="text-[14px] text-gray-600 truncate">
{isIndividualUser ? 'Individual Account' : 'Corporate Account'} // {isIndividualUser ? 'Individual Account' : 'Corporate Account'}
</p> // </p>
</div> // </div>
</div> // </div>
{/* Mobile Account Switching */} // {/* Mobile Account Switching */}
<div className="space-y-3"> // <div className="space-y-3">
<h4 className="text-[14px] font-medium text-gray-900">Switch Account</h4> // <h4 className="text-[14px] font-medium text-gray-900">Switch Account</h4>
<div className="space-y-2"> // <div className="space-y-2">
{availableAccounts.map((account) => ( // {availableAccounts.map((account) => (
<button // <button
key={account.type} // key={account.type}
onClick={() => !account.isActive && handleAccountSignIn(account.type as 'individual' | 'corporate')} // onClick={() => !account.isActive && handleAccountSignIn(account.type as 'individual' | 'corporate')}
disabled={account.isActive} // disabled={account.isActive}
className={`w-full flex items-center gap-3 p-3 rounded-lg border text-left transition-all duration-200 ${ // className={`w-full flex items-center gap-3 p-3 rounded-lg border text-left transition-all duration-200 ${account.isActive
account.isActive // ? 'bg-green-50 border-green-200'
? 'bg-green-50 border-green-200' // : 'bg-gray-50 border-gray-200 hover:bg-gray-100'
: 'bg-gray-50 border-gray-200 hover:bg-gray-100' // }`}
}`} // >
> // <div className="relative">
<div className="relative"> // {account.type === 'individual' ? (
{account.type === 'individual' ? ( // <Avatar className="h-8 w-8">
<Avatar className="h-8 w-8"> // <AvatarImage
<AvatarImage // src={currentUser.avatar}
src={currentUser.avatar} // alt={currentUser.name}
alt={currentUser.name} // />
/> // <AvatarFallback className="bg-blue-100 text-blue-700 text-sm">
<AvatarFallback className="bg-blue-100 text-blue-700 text-sm"> // <User className="h-4 w-4" />
<User className="h-4 w-4" /> // </AvatarFallback>
</AvatarFallback> // </Avatar>
</Avatar> // ) : (
) : ( // <div className="h-8 w-8 bg-purple-100 rounded-full flex items-center justify-center">
<div className="h-8 w-8 bg-purple-100 rounded-full flex items-center justify-center"> // <Building2 className="h-4 w-4 text-purple-700" />
<Building2 className="h-4 w-4 text-purple-700" /> // </div>
</div> // )}
)} // {account.isActive && (
{account.isActive && ( // <div className="absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full flex items-center justify-center">
<div className="absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full flex items-center justify-center"> // <Check className="h-2.5 w-2.5 text-white" />
<Check className="h-2.5 w-2.5 text-white" /> // </div>
</div> // )}
)} // </div>
</div> // <div className="flex-1 min-w-0">
<div className="flex-1 min-w-0"> // <p className="text-[14px] font-medium text-gray-900 truncate">
<p className="text-[14px] font-medium text-gray-900 truncate"> // {account.title}
{account.title} // </p>
</p> // <p className="text-[14px] text-gray-600 truncate">
<p className="text-[14px] text-gray-600 truncate"> // {account.subtitle}
{account.subtitle} // </p>
</p> // </div>
</div> // {!account.isActive && (
{!account.isActive && ( // <ArrowRight className="h-4 w-4 text-gray-400 flex-shrink-0" />
<ArrowRight className="h-4 w-4 text-gray-400 flex-shrink-0" /> // )}
)} // </button>
</button> // ))}
))} // </div>
</div> // </div>
</div> // </div>
</div> // )}
)}
{/* Navigation Items */} // {/* Navigation Items */}
<div className="flex-1 overflow-y-auto py-4"> // <div className="flex-1 overflow-y-auto py-4">
{/* Learner Portal Items (if authenticated) */} // {/* Learner Portal Items (if authenticated) */}
{isAuthenticated && (isIndividualUser || isCorporateUser) && ( // {isAuthenticated && (isIndividualUser || isCorporateUser) && (
<div className="px-4 mb-6"> // <div className="px-4 mb-6">
<h3 className="text-[14px] font-medium text-gray-900 mb-3"> // <h3 className="text-[14px] font-medium text-gray-900 mb-3">
{isIndividualUser ? 'Personal Learning' : 'Corporate Learning'} // {isIndividualUser ? 'Personal Learning' : 'Corporate Learning'}
</h3> // </h3>
<div className="space-y-1"> // <div className="space-y-1">
{learnerMenuItems.map((item) => { // {learnerMenuItems.map((item) => {
const IconComponent = item.icon; // const IconComponent = item.icon;
return ( // return (
<button // <button
key={item.title} // key={item.title}
onClick={() => { // onClick={() => {
navigate(item.href); // navigate(item.href);
setIsMobileMenuOpen(false); // 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]" // 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]"
> // >
<IconComponent className="h-5 w-5 flex-shrink-0" /> // <IconComponent className="h-5 w-5 flex-shrink-0" />
<div className="flex-1 min-w-0"> // <div className="flex-1 min-w-0">
<div className="font-medium">{item.title}</div> // <div className="font-medium">{item.title}</div>
<div className="text-[14px] text-gray-500 truncate">{item.description}</div> // <div className="text-[14px] text-gray-500 truncate">{item.description}</div>
</div> // </div>
</button> // </button>
); // );
})} // })}
</div> // </div>
</div> // </div>
)} // )}
{/* Public Navigation Items */} // {/* Public Navigation Items */}
<div className="px-4"> // <div className="px-4">
{navigationItems.map((item) => ( // {navigationItems.map((item) => (
<Collapsible key={item.title}> // <Collapsible key={item.title}>
<CollapsibleTrigger // <CollapsibleTrigger
onClick={() => handleMobileToggle(item.title)} // onClick={() => handleMobileToggle(item.title)}
className="w-full flex items-center justify-between p-3 text-[16px] text-gray-900 hover:bg-gray-50 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-primary min-h-[44px]" // className="w-full flex items-center justify-between p-3 text-[16px] text-gray-900 hover:bg-gray-50 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-primary min-h-[44px]"
> // >
<span className="font-medium">{item.title}</span> // <span className="font-medium">{item.title}</span>
<ChevronRight className={`h-4 w-4 transition-transform ${ // <ChevronRight className={`h-4 w-4 transition-transform ${expandedMobileSection === item.title ? 'rotate-90' : ''
expandedMobileSection === item.title ? 'rotate-90' : '' // }`} />
}`} /> // </CollapsibleTrigger>
</CollapsibleTrigger> // <CollapsibleContent className="px-4 pb-2">
<CollapsibleContent className="px-4 pb-2"> // <div className="space-y-1">
<div className="space-y-1"> // {item.items.map((subItem) => {
{item.items.map((subItem) => { // const IconComponent = subItem.icon;
const IconComponent = subItem.icon; // return (
return ( // <button
<button // key={subItem.title}
key={subItem.title} // onClick={() => {
onClick={() => { // navigate(subItem.href);
navigate(subItem.href); // setIsMobileMenuOpen(false);
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]"
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]" // >
> // <IconComponent className="h-4 w-4 flex-shrink-0" />
<IconComponent className="h-4 w-4 flex-shrink-0" /> // <span>{subItem.title}</span>
<span>{subItem.title}</span> // </button>
</button> // );
); // })}
})} // </div>
</div> // </CollapsibleContent>
</CollapsibleContent> // </Collapsible>
</Collapsible> // ))}
))}
<button // <button
onClick={() => { // onClick={() => {
navigate('/contact'); // navigate('/contact');
setIsMobileMenuOpen(false); // 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]" // 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]"
> // >
<span className="font-medium">Contact</span> // <span className="font-medium">Contact</span>
</button> // </button>
</div> // </div>
</div> // </div>
{/* Mobile Authentication Actions */} // {/* Mobile Authentication Actions */}
{!isAuthenticated && ( // {!isAuthenticated && (
<div className="p-4 border-t border-gray-200 space-y-2"> // <div className="p-4 border-t border-gray-200 space-y-2">
<Button // <Button
onClick={handleLogin} // onClick={handleLogin}
variant="outline" // variant="outline"
className="w-full text-[16px] min-h-[44px]" // className="w-full text-[16px] min-h-[44px]"
> // >
Sign In // Sign In
</Button> // </Button>
<Button // <Button
onClick={handleSignup} // onClick={handleSignup}
className="w-full text-[16px] min-h-[44px] bg-primary hover:bg-primary/90 text-primary-foreground" // className="w-full text-[16px] min-h-[44px] bg-primary hover:bg-primary/90 text-primary-foreground"
> // >
Get Started // Get Started
</Button> // </Button>
</div> // </div>
)} // )}
{/* Mobile Logout */} // {/* Mobile Logout */}
{isAuthenticated && ( // {isAuthenticated && (
<div className="p-4 border-t border-gray-200"> // <div className="p-4 border-t border-gray-200">
<Button // <Button
onClick={handleLogout} // onClick={handleLogout}
variant="outline" // variant="outline"
className="w-full text-[16px] min-h-[44px] text-red-600 border-red-200 hover:bg-red-50" // className="w-full text-[16px] min-h-[44px] text-red-600 border-red-200 hover:bg-red-50"
> // >
<LogOut className="h-4 w-4 mr-2" /> // <LogOut className="h-4 w-4 mr-2" />
Sign Out // Sign Out
</Button> // </Button>
</div> // </div>
)} // )}
</div> // </div>
</SheetContent> // </SheetContent>
</Sheet> // </Sheet>
</div> // </div>
</div> // </div>
</div> // </div>
</nav> // </nav>
<></>
); );
} }

238
src/components/Router.tsx
View File

@@ -1,4 +1,6 @@
import React from "react";
import { Routes, Route, Navigate, useSearchParams } from "react-router-dom"; import { Routes, Route, Navigate, useSearchParams } from "react-router-dom";
import AppLayout from "./AppLayout";
// Import all page components // Import all page components
import { HomePage } from "../pages/HomePage"; import { HomePage } from "../pages/HomePage";
@@ -83,136 +85,138 @@ export function Router() {
return ( return (
<div className="min-h-screen"> <div className="min-h-screen">
<Routes> <Routes>
{/* Main */} <Route path="/" element={<AppLayout />}>
<Route path="/" element={<HomePage />} /> {/* Main */}
<Route index element={<HomePage />} />
{/* Auth */} {/* Auth */}
<Route path="/auth" element={<LoginSelection />} /> <Route path="auth" element={<LoginSelection />} />
<Route path="/login-selection" element={<LoginSelection />} /> <Route path="login-selection" element={<LoginSelection />} />
<Route path="/login" element={<Login />} /> <Route path="login" element={<Login />} />
<Route path="/signup" element={<Signup />} /> <Route path="signup" element={<Signup />} />
<Route path="/corporate/auth" element={<CorporateAuth />} /> <Route path="corporate/auth" element={<CorporateAuth />} />
<Route path="/corporate/login" element={<CorporateLogin />} /> <Route path="corporate/login" element={<CorporateLogin />} />
<Route path="/corporate/signup" element={<CorporateSignup />} /> <Route path="corporate/signup" element={<CorporateSignup />} />
<Route path="/forgot-password" element={<ForgotPassword />} /> <Route path="forgot-password" element={<ForgotPassword />} />
<Route path="/email-verification" element={<EmailVerification />} /> <Route path="email-verification" element={<EmailVerification />} />
{/* Learner Portal */} {/* Learner Portal */}
<Route path="/dashboard" element={<DashboardRoute />} /> <Route path="dashboard" element={<DashboardRoute />} />
<Route path="/library" element={<Library />} /> <Route path="library" element={<Library />} />
<Route path="/course" element={<CourseTimeline />} /> <Route path="course" element={<CourseTimeline />} />
<Route path="/settings" element={<Settings />} /> <Route path="settings" element={<Settings />} />
<Route path="/surveys" element={<Surveys userType="individual" />} /> <Route path="surveys" element={<Surveys userType="individual" />} />
<Route path="/webinars" element={<WebinarsRoute />} /> <Route path="webinars" element={<WebinarsRoute />} />
<Route path="/leaderboard" element={<LeaderboardRoute />} /> <Route path="leaderboard" element={<LeaderboardRoute />} />
{/* Other Pages */} {/* Other Pages */}
<Route path="/individual-webinars" element={<IndividualWebinars />} /> <Route path="individual-webinars" element={<IndividualWebinars />} />
<Route path="/contact" element={<Contact />} /> <Route path="contact" element={<Contact />} />
<Route path="/about-klc" element={<AboutKLC />} /> <Route path="about-klc" element={<AboutKLC />} />
<Route path="/about-us/our-vision" element={<OurVision />} /> <Route path="about-us/our-vision" element={<OurVision />} />
<Route path="/about-us/our-team" element={<OurTeam />} /> <Route path="about-us/our-team" element={<OurTeam />} />
<Route path="/about-us/our-impact" element={<OurImpact />} /> <Route path="about-us/our-impact" element={<OurImpact />} />
<Route path="/about-us/our-expertise" element={<OurExpertise />} /> <Route path="about-us/our-expertise" element={<OurExpertise />} />
{/* Programmes */} {/* Programmes */}
<Route path="/programmes" element={<ProgrammeCatalogue />} /> <Route path="programmes" element={<ProgrammeCatalogue />} />
<Route path="/programmes/detail" element={<ProgrammeDetail />} /> <Route path="programmes/detail" element={<ProgrammeDetail />} />
<Route <Route
path="/programmes/executive-leadership" path="programmes/executive-leadership"
element={<ExecutiveLeadership />} element={<ExecutiveLeadership />}
/> />
<Route path="/programmes/team-leadership" element={<TeamLeadership />} /> <Route path="programmes/team-leadership" element={<TeamLeadership />} />
<Route <Route
path="/programmes/innovation-leadership" path="programmes/innovation-leadership"
element={<InnovationLeadership />} element={<InnovationLeadership />}
/> />
<Route <Route
path="/programmes/leadership-online" path="programmes/leadership-online"
element={<LeadershipOnline />} element={<LeadershipOnline />}
/> />
{/* Services */} {/* Services */}
<Route <Route
path="/services/leadership-development" path="services/leadership-development"
element={<LeadershipDevelopment />} element={<LeadershipDevelopment />}
/> />
<Route <Route
path="/services/management-development" path="services/management-development"
element={<ManagementDevelopment />} element={<ManagementDevelopment />}
/> />
<Route <Route
path="/services/executive-coaching" path="services/executive-coaching"
element={<ExecutiveCoaching />} element={<ExecutiveCoaching />}
/> />
<Route <Route
path="/services/culture-competence" path="services/culture-competence"
element={<CultureCompetence />} element={<CultureCompetence />}
/> />
<Route path="/services/consulting" element={<Consulting />} /> <Route path="services/consulting" element={<Consulting />} />
<Route path="/services/learning-facility" element={<LearningFacility />} /> <Route path="services/learning-facility" element={<LearningFacility />} />
{/* Learning */} {/* Learning */}
<Route path="/learning/articles" element={<Articles />} /> <Route path="learning/articles" element={<Articles />} />
<Route path="/learning/blog" element={<BlogListing />} /> <Route path="learning/blog" element={<BlogListing />} />
<Route path="/learning/blog/detail" element={<BlogDetail />} /> <Route path="learning/blog/detail" element={<BlogDetail />} />
<Route path="/learning/resources" element={<Resources />} /> <Route path="learning/resources" element={<Resources />} />
{/* Webinars */} {/* Webinars */}
<Route path="/webinars/listing" element={<WebinarListing />} /> <Route path="webinars/listing" element={<WebinarListing />} />
<Route path="/webinars/detail" element={<WebinarDetail />} /> <Route path="webinars/detail" element={<WebinarDetail />} />
{/* Facilities */} {/* Facilities */}
<Route path="/facilities/detail" element={<FacilityDetail />} /> <Route path="facilities/detail" element={<FacilityDetail />} />
<Route path="/facilities/booking" element={<FacilityBooking />} /> <Route path="facilities/booking" element={<FacilityBooking />} />
<Route path="/facilities/tour" element={<FacilityTour />} /> <Route path="facilities/tour" element={<FacilityTour />} />
{/* E-commerce */} {/* E-commerce */}
<Route path="/cart" element={<Cart />} /> <Route path="cart" element={<Cart />} />
<Route path="/checkout" element={<Checkout />} /> <Route path="checkout" element={<Checkout />} />
<Route path="/order-confirmation" element={<OrderConfirmation />} /> <Route path="order-confirmation" element={<OrderConfirmation />} />
<Route path="/order-failed" element={<OrderFailed />} /> <Route path="order-failed" element={<OrderFailed />} />
{/* Extra Features */} {/* Extra Features */}
<Route path="/my-cohort" element={<MyCohort />} /> <Route path="my-cohort" element={<MyCohort />} />
{/* Legal */} {/* Legal */}
<Route path="/faq" element={<FAQ />} /> <Route path="faq" element={<FAQ />} />
<Route path="/privacy" element={<Privacy />} /> <Route path="privacy" element={<Privacy />} />
<Route path="/terms" element={<Terms />} /> <Route path="terms" element={<Terms />} />
{/* Legacy Redirects */} {/* Legacy Redirects */}
<Route <Route
path="/corporate/dashboard" path="corporate/dashboard"
element={<Navigate to="/dashboard?view=corporate" replace />} element={<Navigate to="/dashboard?view=corporate" replace />}
/> />
<Route <Route
path="/corporate/library" path="corporate/library"
element={<Navigate to="/library?view=corporate" replace />} element={<Navigate to="/library?view=corporate" replace />}
/> />
<Route <Route
path="/corporate/course" path="corporate/course"
element={<Navigate to="/course?view=corporate" replace />} element={<Navigate to="/course?view=corporate" replace />}
/> />
<Route <Route
path="/corporate/settings" path="corporate/settings"
element={<Navigate to="/settings?view=corporate" replace />} element={<Navigate to="/settings?view=corporate" replace />}
/> />
<Route <Route
path="/corporate/surveys" path="corporate/surveys"
element={<Navigate to="/surveys?view=corporate" replace />} element={<Navigate to="/surveys?view=corporate" replace />}
/> />
<Route <Route
path="/corporate/webinars" path="corporate/webinars"
element={<Navigate to="/webinars?view=corporate" replace />} element={<Navigate to="/webinars?view=corporate" replace />}
/> />
<Route <Route
path="/corporate/leaderboard" path="corporate/leaderboard"
element={<Navigate to="/leaderboard?view=corporate" replace />} element={<Navigate to="/leaderboard?view=corporate" replace />}
/> />
{/* Catch-all */} {/* Catch-all under layout */}
<Route path="*" element={<NotFound />} /> <Route path="*" element={<NotFound />} />
</Route>
</Routes> </Routes>
</div> </div>
); );

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

@@ -5,7 +5,8 @@ import { Badge } from '../ui/badge';
import { Sheet, SheetContent, SheetTrigger } from '../ui/sheet'; import { Sheet, SheetContent, SheetTrigger } from '../ui/sheet';
import { ScrollArea } from '../ui/scroll-area'; import { ScrollArea } from '../ui/scroll-area';
import { Separator } from '../ui/separator'; import { Separator } from '../ui/separator';
import logo from "../../assets/klc-logo.png" // import logo from "../../assets/klc-logo.png"
const logo = new URL("../../assets/klc-logo.png", import.meta.url).href
import { import {
Menu, Menu,
Search, Search,
@@ -261,7 +262,7 @@ export function LearnerLayout({ children, currentPage, userType = 'individual',
</div> </div>
{/* Navigation */} {/* Navigation */}
<ScrollArea className="flex-1 px-4 py-6"> <div className="flex-1 px-4 py-6" >
<nav className="space-y-2"> <nav className="space-y-2">
{navigationItems.map((item) => { {navigationItems.map((item) => {
const Icon = item.icon; const Icon = item.icon;
@@ -286,14 +287,14 @@ export function LearnerLayout({ children, currentPage, userType = 'individual',
</nav> </nav>
</ScrollArea> </div>
</div> </div >
); );
return ( return (
<div className="min-h-screen bg-background"> <div className="min-h-screen " style={{ backgroundColor: "green" }}>
{/* Mobile Header */} {/* Mobile Header */}
<header className="lg:hidden border-b border-border bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/60"> <header className="lg:hidden fixed top-0 left-0 right-0 z-50 border-b border-border bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/60">
<div className="flex items-center justify-between p-4"> <div className="flex items-center justify-between p-4">
<Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}> <Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>
<SheetTrigger asChild> <SheetTrigger asChild>
@@ -359,9 +360,9 @@ export function LearnerLayout({ children, currentPage, userType = 'individual',
</div> </div>
{/* Main Content Area - Optimized for wider content */} {/* Main Content Area - Optimized for wider content */}
<div className="flex-1 lg:ml-0"> <div className="flex-1 lg:ml-0" style={{ backgroundColor: "green" }}>
{/* Desktop Header */} {/* Desktop Header */}
<header className="hidden lg:block border-b border-border bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/60"> <header className="hidden lg:block fixed top-0 left-60 right-0 z-40 border-b border-border bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/60">
<div className="flex items-center justify-end px-4 py-4"> <div className="flex items-center justify-end px-4 py-4">
{/* <div className="flex-1 max-w-sm"> {/* <div className="flex-1 max-w-sm">
<div className="relative"> <div className="relative">
@@ -431,8 +432,8 @@ export function LearnerLayout({ children, currentPage, userType = 'individual',
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<div className="hidden xl:block"> <div className="hidden xl:block">
<p className="text-lg font-medium">{user?.name || 'Priya Sharma'}</p> <p className="text-lg font-medium">{user?.name || 'Parth Patel'}</p>
<p className="text-sm text-muted-foreground">{user?.email || 'priya.sharma@example.com'}</p> <p className="text-sm text-muted-foreground">{user?.email || 'parthPatel@example.com'}</p>
</div> </div>
<ChevronDown className="h-4 w-4 text-muted-foreground" /> <ChevronDown className="h-4 w-4 text-muted-foreground" />
</div> </div>
@@ -440,15 +441,15 @@ export function LearnerLayout({ children, currentPage, userType = 'individual',
</div> </div>
</header> </header>
{/* Page Content - Remove default padding, let pages control their own spacing */} {/* Page Content - Scrollable area under fixed headers */}
<main <main
className="flex-1 min-h-screen bg-background" className="flex-1 h-screen bg-background overflow-hidden"
role="main" role="main"
id="main-content" id="main-content"
tabIndex={-1} tabIndex={-1}
> >
{/* Content wrapper with consistent spacing and accessibility */} {/* Content wrapper with consistent spacing and accessibility */}
<div className="w-full min-h-full"> <div className="w-full h-full overflow-y-auto pt-[56px] lg:pt-[64px]">
{/* Skip to main content anchor for screen readers */} {/* Skip to main content anchor for screen readers */}
<a <a
href="#learner-content" href="#learner-content"
@@ -460,7 +461,7 @@ export function LearnerLayout({ children, currentPage, userType = 'individual',
{/* Main learner content area */} {/* Main learner content area */}
<div <div
id="learner-content" id="learner-content"
className="w-full" className="w-full h-full"
role="region" role="region"
aria-label="Learner portal content" aria-label="Learner portal content"
> >
@@ -528,7 +529,7 @@ export function LearnerLayout({ children, currentPage, userType = 'individual',
{/* Progress indicator for course content */} {/* Progress indicator for course content */}
<div <div
id="learner-progress-indicator" id="learner-progress-indicator"
className="fixed top-[70px] left-0 right-0 h-1 bg-gray-200 opacity-0 transition-opacity duration-200 z-40" className="fixed top-[56px] lg:top-[64px] left-0 right-0 h-1 bg-gray-200 opacity-0 transition-opacity duration-200 z-40"
role="progressbar" role="progressbar"
aria-label="Page loading progress" aria-label="Page loading progress"
aria-hidden="true" aria-hidden="true"

10
src/main.tsx
View File

@@ -1,14 +1,18 @@
import React from "react";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom"; import { BrowserRouter } from "react-router-dom";
import App from "./App.tsx"; import App from "./App.tsx";
import "./styles/globals.css"; import "./styles/globals.css";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
import { store } from "./Redux/Store.tsx"; import { store } from "./Redux/Store.tsx";
import { AuthProvider } from "./components/AuthContext.tsx";
createRoot(document.getElementById("root")!).render( createRoot(document.getElementById("root")!).render(
<Provider store={store}> <Provider store={store}>
<BrowserRouter> <AuthProvider>
<App /> <BrowserRouter>
</BrowserRouter> <App />
</BrowserRouter>
</AuthProvider>
</Provider> </Provider>
); );

4
src/pages/AboutKLC.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function AboutKLC() { export function AboutKLC() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

4
src/pages/Articles.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function Articles() { export function Articles() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

4
src/pages/BlogDetail.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function BlogDetail() { export function BlogDetail() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

4
src/pages/BlogListing.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function BlogListing() { export function BlogListing() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

4
src/pages/Cart.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function Cart() { export function Cart() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

4
src/pages/Checkout.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function Checkout() { export function Checkout() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

3
src/pages/Contact.tsx
View File

@@ -3,7 +3,7 @@ import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input'; import { Input } from '../components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card'; import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { ArrowLeft, Mail, Phone, MapPin, Clock, Send } from 'lucide-react'; import { ArrowLeft, Mail, Phone, MapPin, Clock, Send } from 'lucide-react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function Contact() { export function Contact() {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
@@ -13,6 +13,7 @@ export function Contact() {
message: '' message: ''
}); });
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const navigate = useNavigate();
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();

4
src/pages/CorporateAuth.tsx
View File

@@ -2,9 +2,11 @@ import React from 'react';
import { Button } from '../components/ui/button'; import { Button } from '../components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card'; import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { ArrowLeft, Building2, Users, Shield, BarChart3 } from 'lucide-react'; import { ArrowLeft, Building2, Users, Shield, BarChart3 } from 'lucide-react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function CorporateAuth() { export function CorporateAuth() {
const navigate = useNavigate();
const handleBackNavigation = () => { const handleBackNavigation = () => {
navigate('/auth'); navigate('/auth');
}; };

43
src/pages/CorporateLeaderboard.tsx
View File

@@ -40,7 +40,7 @@ import {
Sparkles Sparkles
} from 'lucide-react'; } from 'lucide-react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
const navigate = useNavigate(); // const navigate = useNavigate();
// Mock data for leaderboard // Mock data for leaderboard
const mockLeaderboard = [ const mockLeaderboard = [
@@ -232,8 +232,8 @@ export function CorporateLeaderboard() {
// Filter leaderboard data // Filter leaderboard data
const filteredLeaderboard = mockLeaderboard.filter(user => { const filteredLeaderboard = mockLeaderboard.filter(user => {
const matchesSearch = user.name.toLowerCase().includes(searchQuery.toLowerCase()) || const matchesSearch = user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
user.department.toLowerCase().includes(searchQuery.toLowerCase()) || user.department.toLowerCase().includes(searchQuery.toLowerCase()) ||
user.title.toLowerCase().includes(searchQuery.toLowerCase()); user.title.toLowerCase().includes(searchQuery.toLowerCase());
const matchesDepartment = selectedDepartment === 'all' || user.department === selectedDepartment; const matchesDepartment = selectedDepartment === 'all' || user.department === selectedDepartment;
const matchesLevel = selectedLevel === 'all' || user.level === selectedLevel; const matchesLevel = selectedLevel === 'all' || user.level === selectedLevel;
@@ -372,26 +372,23 @@ export function CorporateLeaderboard() {
className="w-full" className="w-full"
> >
<Card <Card
className={`relative overflow-hidden transition-all duration-300 hover:shadow-xl cursor-pointer group ${ className={`relative overflow-hidden transition-all duration-300 hover:shadow-xl cursor-pointer group ${isFirst ? 'border-2 border-[#F8C301] bg-gradient-to-br from-[#F8C301]/5 to-[#F8C301]/10' :
isFirst ? 'border-2 border-[#F8C301] bg-gradient-to-br from-[#F8C301]/5 to-[#F8C301]/10' : isSecond ? 'border-2 border-primary bg-gradient-to-br from-primary/5 to-primary/10' :
isSecond ? 'border-2 border-primary bg-gradient-to-br from-primary/5 to-primary/10' : 'border-2 border-[#26231A] bg-gradient-to-br from-[#26231A]/5 to-[#26231A]/10'
'border-2 border-[#26231A] bg-gradient-to-br from-[#26231A]/5 to-[#26231A]/10' } ${isFirst ? 'lg:scale-105 lg:-translate-y-2' : ''}`}
} ${isFirst ? 'lg:scale-105 lg:-translate-y-2' : ''}`}
> >
{/* Subtle Metallic Shimmer Effect for Top 3 */} {/* Subtle Metallic Shimmer Effect for Top 3 */}
<div <div
className={`absolute inset-0 opacity-0 group-hover:opacity-60 transition-opacity duration-1000 pointer-events-none shimmer-effect ${ className={`absolute inset-0 opacity-0 group-hover:opacity-60 transition-opacity duration-1000 pointer-events-none shimmer-effect ${isFirst ? 'shimmer-gold' : isSecond ? 'shimmer-silver' : 'shimmer-bronze'
isFirst ? 'shimmer-gold' : isSecond ? 'shimmer-silver' : 'shimmer-bronze' }`}
}`}
/> />
{/* Rank Ribbon with KLC Colors */} {/* Rank Ribbon with KLC Colors */}
<motion.div <motion.div
className={`absolute top-0 right-0 px-3 py-1 rounded-bl-lg text-white text-sm font-medium ${ className={`absolute top-0 right-0 px-3 py-1 rounded-bl-lg text-white text-sm font-medium ${isFirst ? 'bg-[#F8C301] text-[#26231A]' :
isFirst ? 'bg-[#F8C301] text-[#26231A]' : isSecond ? 'bg-primary text-white' :
isSecond ? 'bg-primary text-white' : 'bg-[#26231A] text-white'
'bg-[#26231A] text-white' }`}
}`}
initial={{ x: 20, opacity: 0 }} initial={{ x: 20, opacity: 0 }}
animate={{ x: 0, opacity: 1 }} animate={{ x: 0, opacity: 1 }}
transition={{ delay: index * 0.15 + 0.3 }} transition={{ delay: index * 0.15 + 0.3 }}
@@ -443,9 +440,8 @@ export function CorporateLeaderboard() {
stiffness: 150 stiffness: 150
}} }}
> >
<div className={`p-4 rounded-full ${ <div className={`p-4 rounded-full ${isFirst ? 'bg-[#F8C301]/10' : isSecond ? 'bg-primary/10' : 'bg-[#26231A]/10'
isFirst ? 'bg-[#F8C301]/10' : isSecond ? 'bg-primary/10' : 'bg-[#26231A]/10' }`}>
}`}>
{getRankIcon(user.rank)} {getRankIcon(user.rank)}
</div> </div>
</motion.div> </motion.div>
@@ -565,11 +561,10 @@ export function CorporateLeaderboard() {
> >
<Badge <Badge
variant="outline" variant="outline"
className={`text-sm px-3 py-1 ${ className={`text-sm px-3 py-1 ${badgeIndex === 0 ? 'border-[#F8C301]/30 bg-[#F8C301]/5 text-[#26231A]' :
badgeIndex === 0 ? 'border-[#F8C301]/30 bg-[#F8C301]/5 text-[#26231A]' : badgeIndex === 1 ? 'border-primary/30 bg-primary/5 text-primary' :
badgeIndex === 1 ? 'border-primary/30 bg-primary/5 text-primary' : 'border-success/30 bg-success/5 text-success'
'border-success/30 bg-success/5 text-success' }`}
}`}
> >
{badge} {badge}
</Badge> </Badge>

18
src/pages/CorporateLearnerLogin.tsx
View File

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
import { Navigation } from '../components/Navigation'; import { Navigation } from '../components/Navigation';
import { Footer } from '../components/Footer'; import { Footer } from '../components/Footer';
import { AIChatbot } from '../components/AIChatbot'; import { AIChatbot } from '../components/AIChatbot';
const navigate = useNavigate();
import { Button } from '../components/ui/button'; import { Button } from '../components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card';
import { Input } from '../components/ui/input'; import { Input } from '../components/ui/input';
@@ -33,6 +32,7 @@ import {
Target, Target,
Star Star
} from 'lucide-react'; } from 'lucide-react';
import { useNavigate } from 'react-router';
interface SignInFormData { interface SignInFormData {
workEmail: string; workEmail: string;
@@ -147,6 +147,7 @@ export default function CorporateLearnerLogin() {
const [showEmailVerification, setShowEmailVerification] = useState(false); const [showEmailVerification, setShowEmailVerification] = useState(false);
const [maskedEmail, setMaskedEmail] = useState(''); const [maskedEmail, setMaskedEmail] = useState('');
const [resendCooldown, setResendCooldown] = useState(0); const [resendCooldown, setResendCooldown] = useState(0);
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
document.title = isSignUp document.title = isSignUp
@@ -677,11 +678,10 @@ export default function CorporateLearnerLogin() {
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-sm text-muted-foreground">Password strength:</span> <span className="text-sm text-muted-foreground">Password strength:</span>
<span className={`text-sm font-medium ${ <span className={`text-sm font-medium ${passwordStrength.score >= 4 ? 'text-success' :
passwordStrength.score >= 4 ? 'text-success' : passwordStrength.score >= 3 ? 'text-secondary' :
passwordStrength.score >= 3 ? 'text-secondary' : passwordStrength.score >= 2 ? 'text-orange-500' : 'text-destructive'
passwordStrength.score >= 2 ? 'text-orange-500' : 'text-destructive' }`}>
}`}>
{passwordStrength.label} {passwordStrength.label}
</span> </span>
</div> </div>
@@ -695,9 +695,9 @@ export default function CorporateLearnerLogin() {
{met ? <Check className="w-3 h-3" /> : <X className="w-3 h-3" />} {met ? <Check className="w-3 h-3" /> : <X className="w-3 h-3" />}
<span> <span>
{key === 'length' ? '8+ chars' : {key === 'length' ? '8+ chars' :
key === 'lowercase' ? 'lowercase' : key === 'lowercase' ? 'lowercase' :
key === 'uppercase' ? 'uppercase' : key === 'uppercase' ? 'uppercase' :
key === 'number' ? 'number' : 'symbol'} key === 'number' ? 'number' : 'symbol'}
</span> </span>
</div> </div>
))} ))}

3
src/pages/CorporateLogin.tsx
View File

@@ -3,8 +3,8 @@ import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input'; import { Input } from '../components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card'; import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { ArrowLeft, Eye, EyeOff, Mail, Lock, Building2 } from 'lucide-react'; import { ArrowLeft, Eye, EyeOff, Mail, Lock, Building2 } from 'lucide-react';
const navigate = useNavigate();
import { useAuth } from '../components/AuthContext'; import { useAuth } from '../components/AuthContext';
import { useNavigate } from 'react-router';
export function CorporateLogin() { export function CorporateLogin() {
const [email, setEmail] = useState(''); const [email, setEmail] = useState('');
@@ -12,6 +12,7 @@ export function CorporateLogin() {
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const { login } = useAuth(); const { login } = useAuth();
const navigate = useNavigate();
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();

3
src/pages/CorporateSignup.tsx
View File

@@ -3,7 +3,7 @@ import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input'; import { Input } from '../components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card'; import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { ArrowLeft, Mail, User, Building2, Phone, Users } from 'lucide-react'; import { ArrowLeft, Mail, User, Building2, Phone, Users } from 'lucide-react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function CorporateSignup() { export function CorporateSignup() {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
@@ -17,6 +17,7 @@ export function CorporateSignup() {
message: '' message: ''
}); });
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const navigate = useNavigate();
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();

9
src/pages/CorporateWebinars.tsx
View File

@@ -47,10 +47,8 @@ import {
MoreHorizontal, MoreHorizontal,
Search Search
} from 'lucide-react'; } from 'lucide-react';
// const navigate = useNavigate();
import { ImageWithFallback } from '../components/figma/ImageWithFallback'; import { ImageWithFallback } from '../components/figma/ImageWithFallback';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
// Mock data for webinars // Mock data for webinars
const mockWebinars = [ const mockWebinars = [
{ {
@@ -234,7 +232,6 @@ function LevelBadge({ level }: { level: string }) {
return 'bg-muted/50 text-muted-foreground border-border'; return 'bg-muted/50 text-muted-foreground border-border';
} }
}; };
return ( return (
<Badge <Badge
variant="outline" variant="outline"
@@ -265,6 +262,7 @@ function truncateText(text: string, maxLength: number): { truncated: string; nee
// Enhanced WebinarCard component with KLC branding and consistent design // Enhanced WebinarCard component with KLC branding and consistent design
function WebinarCard({ webinar }: { webinar: typeof mockWebinars[0] }) { function WebinarCard({ webinar }: { webinar: typeof mockWebinars[0] }) {
const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false); const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
const navigate = useNavigate();
const handleJoinWebinar = () => { const handleJoinWebinar = () => {
navigate(`/webinar-detail?id=${webinar.id}&view=corporate`); navigate(`/webinar-detail?id=${webinar.id}&view=corporate`);
@@ -447,6 +445,7 @@ function WebinarCard({ webinar }: { webinar: typeof mockWebinars[0] }) {
} }
export function CorporateWebinars() { export function CorporateWebinars() {
const navigate = useNavigate();
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
const [selectedCategory, setSelectedCategory] = useState('all'); const [selectedCategory, setSelectedCategory] = useState('all');
const [selectedStatus, setSelectedStatus] = useState('all'); const [selectedStatus, setSelectedStatus] = useState('all');
@@ -465,8 +464,8 @@ export function CorporateWebinars() {
// Filter webinars based on search and filters // Filter webinars based on search and filters
const filteredWebinars = mockWebinars.filter(webinar => { const filteredWebinars = mockWebinars.filter(webinar => {
const matchesSearch = webinar.title.toLowerCase().includes(searchQuery.toLowerCase()) || const matchesSearch = webinar.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
webinar.presenter.toLowerCase().includes(searchQuery.toLowerCase()) || webinar.presenter.toLowerCase().includes(searchQuery.toLowerCase()) ||
webinar.description.toLowerCase().includes(searchQuery.toLowerCase()); webinar.description.toLowerCase().includes(searchQuery.toLowerCase());
const matchesCategory = selectedCategory === 'all' || webinar.category === selectedCategory; const matchesCategory = selectedCategory === 'all' || webinar.category === selectedCategory;
const matchesStatus = selectedStatus === 'all' || webinar.status === selectedStatus; const matchesStatus = selectedStatus === 'all' || webinar.status === selectedStatus;

3
src/pages/EmailVerification.tsx
View File

@@ -2,13 +2,14 @@ import React from 'react';
import { Button } from '../components/ui/button'; import { Button } from '../components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card'; import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { Mail, CheckCircle, RefreshCw } from 'lucide-react'; import { Mail, CheckCircle, RefreshCw } from 'lucide-react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function EmailVerification() { export function EmailVerification() {
const handleResendEmail = () => { const handleResendEmail = () => {
// Simulate resending verification email // Simulate resending verification email
console.log('Resending verification email...'); console.log('Resending verification email...');
}; };
const navigate = useNavigate();
return ( return (
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-white flex items-center justify-center px-4"> <div className="min-h-screen bg-gradient-to-br from-gray-50 to-white flex items-center justify-center px-4">

4
src/pages/ExecutiveLeadership.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function ExecutiveLeadership() { export function ExecutiveLeadership() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

4
src/pages/FAQ.tsx
View File

@@ -3,9 +3,11 @@ import { Button } from '../components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card'; import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../components/ui/collapsible'; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../components/ui/collapsible';
import { ArrowLeft, ChevronDown, HelpCircle, Mail, Phone } from 'lucide-react'; import { ArrowLeft, ChevronDown, HelpCircle, Mail, Phone } from 'lucide-react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function FAQ() { export function FAQ() {
const navigate = useNavigate();
const handleBackNavigation = () => { const handleBackNavigation = () => {
navigate('/'); navigate('/');
}; };

4
src/pages/FacilityBooking.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function FacilityBooking() { export function FacilityBooking() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

4
src/pages/FacilityDetail.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function FacilityDetail() { export function FacilityDetail() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

4
src/pages/FacilityTour.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function FacilityTour() { export function FacilityTour() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

3
src/pages/ForgotPassword.tsx
View File

@@ -3,12 +3,13 @@ import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input'; import { Input } from '../components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card'; import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { ArrowLeft, Mail, CheckCircle } from 'lucide-react'; import { ArrowLeft, Mail, CheckCircle } from 'lucide-react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function ForgotPassword() { export function ForgotPassword() {
const [email, setEmail] = useState(''); const [email, setEmail] = useState('');
const [isSubmitted, setIsSubmitted] = useState(false); const [isSubmitted, setIsSubmitted] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const navigate = useNavigate();
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();

4
src/pages/InnovationLeadership.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function InnovationLeadership() { export function InnovationLeadership() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

193
src/pages/Leaderboard.tsx
View File

@@ -270,9 +270,8 @@ function RankChangeIndicator({ currentRank, previousRank }: { currentRank: numbe
if (change === 0) return null; if (change === 0) return null;
return ( return (
<div className={`flex items-center gap-1 text-sm font-medium ${ <div className={`flex items-center gap-1 text-sm font-medium ${change > 0 ? 'text-success' : 'text-destructive'
change > 0 ? 'text-success' : 'text-destructive' }`}>
}`}>
{change > 0 ? ( {change > 0 ? (
<ChevronUp className="h-4 w-4" /> <ChevronUp className="h-4 w-4" />
) : ( ) : (
@@ -513,13 +512,12 @@ function LeaderboardTable({
{topPerformers.map((entry, index) => ( {topPerformers.map((entry, index) => (
<div <div
key={entry.id} key={entry.id}
className={`flex items-center gap-4 p-4 rounded-xl border transition-all duration-200 hover:shadow-md ${ className={`flex items-center gap-4 p-4 rounded-xl border transition-all duration-200 hover:shadow-md ${entry.rank <= 3
entry.rank <= 3
? 'bg-gradient-to-r from-yellow-50 to-orange-50 border-yellow-200' ? 'bg-gradient-to-r from-yellow-50 to-orange-50 border-yellow-200'
: entry.isCurrentUser : entry.isCurrentUser
? 'bg-gradient-to-r from-primary/5 to-primary/10 border-primary/20 ring-2 ring-primary/20' ? 'bg-gradient-to-r from-primary/5 to-primary/10 border-primary/20 ring-2 ring-primary/20'
: 'bg-muted/30 border-border hover:bg-muted/50' : 'bg-muted/30 border-border hover:bg-muted/50'
}`} }`}
> >
{/* Rank */} {/* Rank */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -652,7 +650,7 @@ export function Leaderboard() {
const [activeTab, setActiveTab] = useState('global'); const [activeTab, setActiveTab] = useState('global');
const [filterPeriod, setFilterPeriod] = useState('all-time'); const [filterPeriod, setFilterPeriod] = useState('all-time');
const [filterCategory, setFilterCategory] = useState('all'); const [filterCategory, setFilterCategory] = useState('all');
const navigate = useNavigate(); const navigate = useNavigate();
// Mock user data for LearnerLayout - matching Library page pattern // Mock user data for LearnerLayout - matching Library page pattern
@@ -686,101 +684,100 @@ export function Leaderboard() {
<div className="w-full max-w-none px-2 sm:px-4 lg:px-6 pb-8"> <div className="w-full max-w-none px-2 sm:px-4 lg:px-6 pb-8">
<div className="space-y-8"> <div className="space-y-8">
{/* Personal Stats Overview - Updated to 4 columns */} {/* Personal Stats Overview - Updated to 4 columns */}
<PersonalStatsOverview <PersonalStatsOverview
stats={mockCurrentUserStats} stats={mockCurrentUserStats}
achievements={mockAchievements} achievements={mockAchievements}
/> />
{/* Filters and Tabs */} {/* Filters and Tabs */}
<Card> <Card>
<CardContent className="p-6"> <CardContent className="p-6">
<div className="flex flex-col lg:flex-row gap-4 items-start lg:items-center justify-between"> <div className="flex flex-col lg:flex-row gap-4 items-start lg:items-center justify-between">
{/* Custom Segmented Control */} {/* Custom Segmented Control */}
<div className="w-full lg:w-auto bg-yellow-50/80 rounded-full p-1.5"> <div className="w-full lg:w-auto bg-yellow-50/80 rounded-full p-1.5">
<div className="flex items-center space-x-1"> <div className="flex items-center space-x-1">
{[ {[
{ value: 'global', label: 'Global' }, { value: 'global', label: 'Global' },
{ value: 'regional', label: 'Regional' }, { value: 'regional', label: 'Regional' },
{ value: 'friends', label: 'Friends' } { value: 'friends', label: 'Friends' }
].map((tab) => ( ].map((tab) => (
<button <button
key={tab.value} key={tab.value}
onClick={() => setActiveTab(tab.value)} onClick={() => setActiveTab(tab.value)}
className={`flex-1 px-4 py-2.5 text-base font-medium rounded-full transition-all duration-300 ease-in-out focus:outline-none focus:ring-0 active:outline-none ${ className={`flex-1 px-4 py-2.5 text-base font-medium rounded-full transition-all duration-300 ease-in-out focus:outline-none focus:ring-0 active:outline-none ${activeTab === tab.value
activeTab === tab.value ? 'bg-white text-gray-900 shadow-sm'
? 'bg-white text-gray-900 shadow-sm' : 'text-gray-700 hover:text-gray-900 hover:bg-white/60'
: 'text-gray-700 hover:text-gray-900 hover:bg-white/60' }`}
}`} >
> {tab.label}
{tab.label} </button>
</button> ))}
))} </div>
</div>
<div className="flex flex-col sm:flex-row gap-3 w-full lg:w-auto">
<Select value={filterPeriod} onValueChange={setFilterPeriod}>
<SelectTrigger className="w-full sm:w-40 text-base min-h-[44px]">
<SelectValue placeholder="Time Period" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all-time" className="text-base">All Time</SelectItem>
<SelectItem value="this-month" className="text-base">This Month</SelectItem>
<SelectItem value="this-week" className="text-base">This Week</SelectItem>
</SelectContent>
</Select>
<Select value={filterCategory} onValueChange={setFilterCategory}>
<SelectTrigger className="w-full sm:w-40 text-base min-h-[44px]">
<SelectValue placeholder="Category" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all" className="text-base">All Categories</SelectItem>
<SelectItem value="leadership" className="text-base">Leadership</SelectItem>
<SelectItem value="management" className="text-base">Management</SelectItem>
<SelectItem value="innovation" className="text-base">Innovation</SelectItem>
</SelectContent>
</Select>
</div> </div>
</div> </div>
</CardContent>
</Card>
<div className="flex flex-col sm:flex-row gap-3 w-full lg:w-auto"> {/* Tab Content */}
<Select value={filterPeriod} onValueChange={setFilterPeriod}> <Tabs value={activeTab} className="space-y-6">
<SelectTrigger className="w-full sm:w-40 text-base min-h-[44px]"> <TabsContent value="global" className="space-y-6">
<SelectValue placeholder="Time Period" /> <LeaderboardTable
</SelectTrigger> data={mockLeaderboardData}
<SelectContent> isLoading={isLoading}
<SelectItem value="all-time" className="text-base">All Time</SelectItem> currentUserRank={mockCurrentUserStats.currentRank}
<SelectItem value="this-month" className="text-base">This Month</SelectItem> />
<SelectItem value="this-week" className="text-base">This Week</SelectItem> </TabsContent>
</SelectContent>
</Select>
<Select value={filterCategory} onValueChange={setFilterCategory}> <TabsContent value="regional" className="space-y-6">
<SelectTrigger className="w-full sm:w-40 text-base min-h-[44px]"> <LeaderboardTable
<SelectValue placeholder="Category" /> data={mockLeaderboardData.filter(entry => entry.region === 'North America')}
</SelectTrigger> isLoading={isLoading}
<SelectContent> currentUserRank={mockCurrentUserStats.currentRank}
<SelectItem value="all" className="text-base">All Categories</SelectItem> />
<SelectItem value="leadership" className="text-base">Leadership</SelectItem> </TabsContent>
<SelectItem value="management" className="text-base">Management</SelectItem>
<SelectItem value="innovation" className="text-base">Innovation</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</CardContent>
</Card>
{/* Tab Content */} <TabsContent value="friends" className="space-y-6">
<Tabs value={activeTab} className="space-y-6"> <Card>
<TabsContent value="global" className="space-y-6"> <CardContent className="p-8 text-center">
<LeaderboardTable <Users className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
data={mockLeaderboardData} <h3 className="text-xl font-semibold mb-2">Connect with Friends</h3>
isLoading={isLoading} <p className="text-base text-muted-foreground mb-6">
currentUserRank={mockCurrentUserStats.currentRank} Add friends to see how you compare with your learning buddies
/> </p>
</TabsContent> <Button className="text-base min-h-[44px]">
<Users className="h-4 w-4 mr-2" />
<TabsContent value="regional" className="space-y-6"> Find Friends
<LeaderboardTable </Button>
data={mockLeaderboardData.filter(entry => entry.region === 'North America')} </CardContent>
isLoading={isLoading} </Card>
currentUserRank={mockCurrentUserStats.currentRank} </TabsContent>
/> </Tabs>
</TabsContent>
<TabsContent value="friends" className="space-y-6">
<Card>
<CardContent className="p-8 text-center">
<Users className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
<h3 className="text-xl font-semibold mb-2">Connect with Friends</h3>
<p className="text-base text-muted-foreground mb-6">
Add friends to see how you compare with your learning buddies
</p>
<Button className="text-base min-h-[44px]">
<Users className="h-4 w-4 mr-2" />
Find Friends
</Button>
</CardContent>
</Card>
</TabsContent>
</Tabs>
</div> </div>
</div> </div>
</LearnerLayout> </LearnerLayout>

4
src/pages/LeadershipOnline.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function LeadershipOnline() { export function LeadershipOnline() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

2
src/pages/Login.tsx
View File

@@ -3,7 +3,6 @@ import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input'; import { Input } from '../components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card'; import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { ArrowLeft, Eye, EyeOff, Mail, Lock } from 'lucide-react'; import { ArrowLeft, Eye, EyeOff, Mail, Lock } from 'lucide-react';
const navigate = useNavigate();
import { useAuth } from '../components/AuthContext'; import { useAuth } from '../components/AuthContext';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
@@ -13,6 +12,7 @@ export function Login() {
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const { login } = useAuth(); const { login } = useAuth();
const navigate = useNavigate();
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();

2
src/pages/LoginSelection.tsx
View File

@@ -6,9 +6,9 @@ import { ArrowLeft, Building2, User, ArrowRight, CheckCircle, Users, Target, Boo
// const navigate = useNavigate(); // const navigate = useNavigate();
import { useAuth } from '../components/AuthContext'; import { useAuth } from '../components/AuthContext';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
export function LoginSelection() { export function LoginSelection() {
const { login } = useAuth(); const { login } = useAuth();
const navigate = useNavigate();
const handleBackNavigation = () => { const handleBackNavigation = () => {
navigate('/'); navigate('/');

5
src/pages/MyCohort.tsx
View File

@@ -1,7 +1,10 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function MyCohort() { export function MyCohort() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

4
src/pages/NotFound.tsx
View File

@@ -2,9 +2,11 @@ import React from 'react';
import { Button } from '../components/ui/button'; import { Button } from '../components/ui/button';
import { Card, CardContent } from '../components/ui/card'; import { Card, CardContent } from '../components/ui/card';
import { ArrowLeft, Home, Search, HelpCircle } from 'lucide-react'; import { ArrowLeft, Home, Search, HelpCircle } from 'lucide-react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function NotFound() { export function NotFound() {
const navigate = useNavigate();
const handleGoHome = () => { const handleGoHome = () => {
navigate('/'); navigate('/');
}; };

4
src/pages/OrderConfirmation.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function OrderConfirmation() { export function OrderConfirmation() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

4
src/pages/OrderFailed.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function OrderFailed() { export function OrderFailed() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

4
src/pages/OurExpertise.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function OurExpertise() { export function OurExpertise() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

4
src/pages/OurImpact.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function OurImpact() { export function OurImpact() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

4
src/pages/OurTeam.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function OurTeam() { export function OurTeam() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

4
src/pages/OurVision.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function OurVision() { export function OurVision() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

4
src/pages/Privacy.tsx
View File

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

4
src/pages/ProgrammeCatalogue.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function ProgrammeCatalogue() { export function ProgrammeCatalogue() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

4
src/pages/ProgrammeDetail.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function ProgrammeDetail() { export function ProgrammeDetail() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

4
src/pages/Resources.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function Resources() { export function Resources() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

4
src/pages/Signup.tsx
View File

@@ -3,7 +3,7 @@ import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input'; import { Input } from '../components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card'; import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { ArrowLeft, Eye, EyeOff, Mail, Lock, User } from 'lucide-react'; import { ArrowLeft, Eye, EyeOff, Mail, Lock, User } from 'lucide-react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function Signup() { export function Signup() {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
@@ -13,9 +13,11 @@ export function Signup() {
password: '', password: '',
confirmPassword: '' confirmPassword: ''
}); });
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const [showConfirmPassword, setShowConfirmPassword] = useState(false); const [showConfirmPassword, setShowConfirmPassword] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const navigate = useNavigate();
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();

4
src/pages/TeamLeadership.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function TeamLeadership() { export function TeamLeadership() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

4
src/pages/Terms.tsx
View File

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

4
src/pages/WebinarDetail.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function WebinarDetail() { export function WebinarDetail() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

4
src/pages/WebinarListing.tsx
View File

@@ -1,7 +1,9 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
const navigate = useNavigate(); import { useNavigate } from 'react-router';
export function WebinarListing() { export function WebinarListing() {
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// This is a deprecated page, redirect to home // This is a deprecated page, redirect to home
navigate('/'); navigate('/');

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

@@ -47,10 +47,10 @@ import {
MapPin MapPin
} from 'lucide-react'; } from 'lucide-react';
import { ImageWithFallback } from '../../components/figma/ImageWithFallback'; import { ImageWithFallback } from '../../components/figma/ImageWithFallback';
import globalMapImage from 'figma:asset/1b56e6afe31d5744d2e7a38d3e2f8c3ce78a90af.png'; // import globalMapImage from 'figma:asset/1b56e6afe31d5744d2e7a38d3e2f8c3ce78a90af.png';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
// Loading skeleton component for corporate dashboard // Loading skeleton component for corporate dashboard
const globalMapImage = 'https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1?w=1600&auto=format&fit=crop&q=60'
function CorporateDashboardSkeleton() { function CorporateDashboardSkeleton() {
return ( return (
<div className="space-y-8"> <div className="space-y-8">
@@ -298,7 +298,7 @@ function TeamPerformanceOverview() {
const overallProgress = Math.round( const overallProgress = Math.round(
(teamGoals.reduce((acc, goal) => acc + goal.progress, 0) / (teamGoals.reduce((acc, goal) => acc + goal.progress, 0) /
teamGoals.reduce((acc, goal) => acc + goal.total, 0)) * 100 teamGoals.reduce((acc, goal) => acc + goal.total, 0)) * 100
); );
return ( return (
@@ -338,9 +338,8 @@ function TeamPerformanceOverview() {
return ( return (
<div <div
key={goal.id} key={goal.id}
className={`p-3 rounded-lg border transition-all duration-200 flex flex-col ${ className={`p-3 rounded-lg border transition-all duration-200 flex flex-col ${isCompleted ? 'bg-success/5 border-success/20' : 'bg-muted/30 hover:bg-muted/50'
isCompleted ? 'bg-success/5 border-success/20' : 'bg-muted/30 hover:bg-muted/50' }`}
}`}
> >
<div className="flex items-start gap-3 flex-1"> <div className="flex items-start gap-3 flex-1">
<div className={`w-10 h-10 rounded-full flex-shrink-0 flex items-center justify-center shadow-md border border-white/20 ${isCompleted ? 'bg-gradient-to-br from-success to-emerald-500' : goal.bgGradient}`}> <div className={`w-10 h-10 rounded-full flex-shrink-0 flex items-center justify-center shadow-md border border-white/20 ${isCompleted ? 'bg-gradient-to-br from-success to-emerald-500' : goal.bgGradient}`}>
@@ -381,6 +380,7 @@ function TeamPerformanceOverview() {
// Corporate Analytics component // Corporate Analytics component
function CorporateAnalytics() { function CorporateAnalytics() {
const navigate = useNavigate();
const analyticsData = [ const analyticsData = [
{ name: 'Completed', value: 68, color: '#21A36A' }, { name: 'Completed', value: 68, color: '#21A36A' },
{ name: 'In Progress', value: 25, color: '#F8C301' }, { name: 'In Progress', value: 25, color: '#F8C301' },
@@ -520,6 +520,7 @@ function CorporateAnalytics() {
// Corporate Assigned Training component // Corporate Assigned Training component
function AssignedTraining() { function AssignedTraining() {
const navigate = useNavigate();
const assignments = [ const assignments = [
{ {
id: '1', id: '1',
@@ -636,9 +637,8 @@ function AssignedTraining() {
{assignments.map((assignment) => ( {assignments.map((assignment) => (
<div <div
key={assignment.id} key={assignment.id}
className={`group cursor-pointer bg-white rounded-lg border transition-all duration-200 flex flex-col h-full overflow-hidden ${ 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'
assignment.status === 'urgent' ? 'border-destructive/30 bg-destructive/5' : 'border-border hover:shadow-md' }`}
}`}
onClick={() => navigate(`/library?view=corporate&courseId=${assignment.id}&tab=overview`)} onClick={() => navigate(`/library?view=corporate&courseId=${assignment.id}&tab=overview`)}
> >
{/* Course Image */} {/* Course Image */}
@@ -652,21 +652,19 @@ function AssignedTraining() {
<div className="absolute top-3 left-3"> <div className="absolute top-3 left-3">
<Badge <Badge
variant="outline" variant="outline"
className={`text-sm font-normal border px-2 py-0.5 bg-white/90 backdrop-blur-sm ${ className={`text-sm font-normal border px-2 py-0.5 bg-white/90 backdrop-blur-sm ${assignment.categoryColor === 'bg-destructive' ? 'border-destructive/30 text-destructive' :
assignment.categoryColor === 'bg-destructive' ? 'border-destructive/30 text-destructive' :
assignment.categoryColor === 'bg-primary' ? 'border-primary/30 text-primary' : assignment.categoryColor === 'bg-primary' ? 'border-primary/30 text-primary' :
assignment.categoryColor === 'bg-success' ? 'border-success/30 text-success' : assignment.categoryColor === 'bg-success' ? 'border-success/30 text-success' :
'border-[#26231A]/30 text-[#26231A]' 'border-[#26231A]/30 text-[#26231A]'
}`} }`}
> >
{assignment.category} {assignment.category}
</Badge> </Badge>
</div> </div>
{/* Deadline Badge Overlay */} {/* Deadline Badge Overlay */}
<div className="absolute top-3 right-3"> <div className="absolute top-3 right-3">
<div className={`text-sm font-medium px-2 py-1 rounded bg-white/90 backdrop-blur-sm ${ <div className={`text-sm font-medium px-2 py-1 rounded bg-white/90 backdrop-blur-sm ${assignment.status === 'urgent' ? 'text-destructive' : 'text-muted-foreground'
assignment.status === 'urgent' ? 'text-destructive' : 'text-muted-foreground' }`}>
}`}>
Due: {assignment.deadline} Due: {assignment.deadline}
</div> </div>
</div> </div>
@@ -742,6 +740,7 @@ function AssignedTraining() {
// Team Leaderboard component // Team Leaderboard component
function TeamLeaderboard() { function TeamLeaderboard() {
const navigate = useNavigate();
const teamData = [ const teamData = [
{ id: '1', name: 'Sarah Johnson (You)', avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=100&h=100&fit=crop', points: 2156, rank: 1, completed: 12, isCurrentUser: true }, { id: '1', name: 'Sarah Johnson (You)', avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=100&h=100&fit=crop', points: 2156, rank: 1, completed: 12, isCurrentUser: true },
{ id: '2', name: 'Alex Chen', avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop', points: 2089, rank: 2, completed: 11 }, { id: '2', name: 'Alex Chen', avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop', points: 2089, rank: 2, completed: 11 },
@@ -775,20 +774,18 @@ function TeamLeaderboard() {
{teamData.map((entry) => ( {teamData.map((entry) => (
<div <div
key={entry.id} key={entry.id}
className={`flex items-center justify-between p-4 rounded-xl transition-all duration-200 hover:shadow-lg ${ className={`flex items-center justify-between p-4 rounded-xl transition-all duration-200 hover:shadow-lg ${entry.isCurrentUser
entry.isCurrentUser ? 'bg-gradient-to-r from-brand-navy/10 to-brand-navy/5 border-2 border-brand-navy/20 shadow-md'
? 'bg-gradient-to-r from-brand-navy/10 to-brand-navy/5 border-2 border-brand-navy/20 shadow-md' : 'hover:bg-gradient-to-r hover:from-gray-50 hover:to-white bg-white/50 border border-gray-200/50'
: 'hover:bg-gradient-to-r hover:from-gray-50 hover:to-white bg-white/50 border border-gray-200/50' }`}
}`}
> >
<div className="flex items-center gap-4 flex-1 min-w-0"> <div className="flex items-center gap-4 flex-1 min-w-0">
<div className={`flex items-center justify-center w-10 h-10 rounded-xl text-base font-bold flex-shrink-0 shadow-md ${ <div className={`flex items-center justify-center w-10 h-10 rounded-xl text-base font-bold flex-shrink-0 shadow-md ${entry.rank === 1 ? 'bg-gradient-to-br from-brand-gold to-amber-500 text-white' :
entry.rank === 1 ? 'bg-gradient-to-br from-brand-gold to-amber-500 text-white' :
entry.rank === 2 ? 'bg-gradient-to-br from-gray-400 to-gray-500 text-white' : entry.rank === 2 ? 'bg-gradient-to-br from-gray-400 to-gray-500 text-white' :
entry.rank === 3 ? 'bg-gradient-to-br from-amber-600 to-amber-700 text-white' : entry.rank === 3 ? 'bg-gradient-to-br from-amber-600 to-amber-700 text-white' :
entry.isCurrentUser ? 'bg-gradient-to-br from-brand-navy to-brand-navy/80 text-white' : entry.isCurrentUser ? 'bg-gradient-to-br from-brand-navy to-brand-navy/80 text-white' :
'bg-gradient-to-br from-gray-200 to-gray-300 text-gray-600' 'bg-gradient-to-br from-gray-200 to-gray-300 text-gray-600'
}`}> }`}>
{entry.rank} {entry.rank}
</div> </div>
<Avatar className="w-10 h-10 flex-shrink-0 shadow-md border-2 border-white"> <Avatar className="w-10 h-10 flex-shrink-0 shadow-md border-2 border-white">
@@ -812,9 +809,8 @@ function TeamLeaderboard() {
</div> </div>
</div> </div>
<Badge variant={entry.isCurrentUser ? "default" : "outline"} className={`text-base px-3 py-1 font-semibold ${ <Badge variant={entry.isCurrentUser ? "default" : "outline"} className={`text-base px-3 py-1 font-semibold ${entry.isCurrentUser ? 'bg-gradient-to-r from-brand-navy to-brand-navy/80 text-white shadow-md' : 'border-gray-300 text-gray-600'
entry.isCurrentUser ? 'bg-gradient-to-r from-brand-navy to-brand-navy/80 text-white shadow-md' : 'border-gray-300 text-gray-600' }`}>
}`}>
#{entry.rank} #{entry.rank}
</Badge> </Badge>
</div> </div>

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

@@ -454,8 +454,9 @@ function VideoPlayer({ course, isPlaying, onPlayPause }: {
// Course Header Component // Course Header Component
function CourseHeader({ course }: { course: Course }) { function CourseHeader({ course }: { course: Course }) {
const navigate = useNavigate()
return ( return (
<div className="space-y-4"> <div className="space-y-0">
{/* Breadcrumb Navigation */} {/* Breadcrumb Navigation */}
<nav className="flex items-center gap-2 text-base text-muted-foreground"> <nav className="flex items-center gap-2 text-base text-muted-foreground">
<button <button
@@ -607,11 +608,10 @@ function FooterAwareSidebar({ children }: { children: React.ReactNode }) {
return ( return (
<div <div
ref={sidebarRef} ref={sidebarRef}
className={`transition-all duration-200 ${ className={`transition-all duration-200 ${shouldStick
shouldStick ? 'sticky top-24 z-40'
? 'sticky top-24 z-40' : 'relative'
: 'relative' }`}
}`}
style={{ style={{
// Ensure sidebar doesn't exceed viewport height when sticky // Ensure sidebar doesn't exceed viewport height when sticky
maxHeight: shouldStick ? 'calc(100vh - 6rem)' : 'none' maxHeight: shouldStick ? 'calc(100vh - 6rem)' : 'none'
@@ -669,13 +669,12 @@ function CourseContentSidebar({ course }: { course: Course }) {
return ( return (
<div <div
key={section.id} key={section.id}
className={`flex items-center justify-between p-3 rounded-lg transition-colors cursor-pointer active:bg-gray-100 ${ className={`flex items-center justify-between p-3 rounded-lg transition-colors cursor-pointer active:bg-gray-100 ${section.completed
section.completed ? 'hover:bg-muted/50'
? 'hover:bg-muted/50' : isCurrentSection
: isCurrentSection ? 'bg-primary/5 border border-primary/20'
? 'bg-primary/5 border border-primary/20' : 'opacity-60 hover:bg-muted/30'
: 'opacity-60 hover:bg-muted/30' }`}
}`}
style={{ outline: 'none' }} style={{ outline: 'none' }}
> >
<div className="flex items-center gap-3 flex-1"> <div className="flex items-center gap-3 flex-1">
@@ -690,24 +689,21 @@ function CourseContentSidebar({ course }: { course: Course }) {
)} )}
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<p className={`font-medium text-base ${ <p className={`font-medium text-base ${section.completed ? 'text-foreground' :
section.completed ? 'text-foreground' :
isCurrentSection ? 'text-primary' : isCurrentSection ? 'text-primary' :
'text-muted-foreground' 'text-muted-foreground'
}`}> }`}>
{String(index + 1).padStart(2, '0')}: {section.title} {String(index + 1).padStart(2, '0')}: {section.title}
</p> </p>
<p className={`text-sm ${ <p className={`text-sm ${section.completed ? 'text-success' : 'text-muted-foreground'
section.completed ? 'text-success' : 'text-muted-foreground' }`}>
}`}>
{section.completed ? 'Completed' : section.duration} {section.completed ? 'Completed' : section.duration}
</p> </p>
</div> </div>
</div> </div>
<Play className={`h-5 w-5 ${ <Play className={`h-5 w-5 ${isCurrentSection ? 'text-primary' : 'text-muted-foreground'
isCurrentSection ? 'text-primary' : 'text-muted-foreground' }`} />
}`} />
</div> </div>
); );
})} })}
@@ -923,11 +919,10 @@ function ReviewsContent({ course }: { course: Course }) {
{[...Array(5)].map((_, i) => ( {[...Array(5)].map((_, i) => (
<Star <Star
key={i} key={i}
className={`h-4 w-4 ${ className={`h-4 w-4 ${i < review.rating
i < review.rating ? 'fill-yellow-400 text-yellow-400'
? 'fill-yellow-400 text-yellow-400' : 'text-muted-foreground'
: 'text-muted-foreground' }`}
}`}
/> />
))} ))}
</div> </div>
@@ -963,7 +958,7 @@ export function CourseTimeline({ userType = 'individual' }: CourseTimelineProps)
const [activeTab, setActiveTab] = useState('overview'); const [activeTab, setActiveTab] = useState('overview');
const [course, setCourse] = useState<Course | null>(null); const [course, setCourse] = useState<Course | null>(null);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const navigate = useNavigate(); const navigate = useNavigate();
// Mock user data // Mock user data
@@ -998,7 +993,7 @@ export function CourseTimeline({ userType = 'individual' }: CourseTimelineProps)
if (isLoading || !course) { if (isLoading || !course) {
return ( return (
<LearnerLayout currentPage="/course-timeline" userType={userType} user={user}> <LearnerLayout currentPage="/course-timeline" userType={userType} user={user}>
<div className="space-y-6"> <div>
<div className="animate-pulse"> <div className="animate-pulse">
<div className="h-8 bg-muted rounded w-48 mb-4"></div> <div className="h-8 bg-muted rounded w-48 mb-4"></div>
<div className="h-12 bg-muted rounded w-3/4 mb-4"></div> <div className="h-12 bg-muted rounded w-3/4 mb-4"></div>
@@ -1014,7 +1009,7 @@ export function CourseTimeline({ userType = 'individual' }: CourseTimelineProps)
{/* Main Container with proper spacing to account for footer */} {/* Main Container with proper spacing to account for footer */}
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50">
{/* Coursera-Style Header with Breadcrumb */} {/* Coursera-Style Header with Breadcrumb */}
<div className="bg-white border-b border-gray-200 sticky top-[70px] z-40"> <div className="bg-white border-b border-gray-200 sticky top-[0px] z-40">
<div className="w-full max-w-none px-4 lg:px-6"> <div className="w-full max-w-none px-4 lg:px-6">
<div className="py-4"> <div className="py-4">
{/* Breadcrumb Navigation */} {/* Breadcrumb Navigation */}
@@ -1063,7 +1058,7 @@ export function CourseTimeline({ userType = 'individual' }: CourseTimelineProps)
{/* Main Layout - 3 Column Coursera Style */} {/* Main Layout - 3 Column Coursera Style */}
<div className="flex min-h-screen"> <div className="flex min-h-screen">
{/* Left Sidebar - Course Navigation */} {/* Left Sidebar - Course Navigation */}
<div className="w-80 bg-white border-r border-gray-200 sticky top-[140px] h-[calc(100vh-140px)] overflow-y-auto"> <div className="w-80 bg-white border-r border-gray-200 sticky top-[104px] h-[calc(100vh-104px)] overflow-y-auto" >
<div className="p-6"> <div className="p-6">
<div className="mb-6"> <div className="mb-6">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Course Material</h3> <h3 className="text-lg font-semibold text-gray-900 mb-4">Course Material</h3>
@@ -1221,11 +1216,10 @@ export function CourseTimeline({ userType = 'individual' }: CourseTimelineProps)
<button <button
key={tab.value} key={tab.value}
onClick={() => setActiveTab(tab.value)} onClick={() => setActiveTab(tab.value)}
className={`py-3 px-1 border-b-2 font-medium text-sm transition-colors ${ className={`py-3 px-1 border-b-2 font-medium text-sm transition-colors ${activeTab === tab.value
activeTab === tab.value ? 'border-[#04045B] text-[#04045B]'
? 'border-[#04045B] text-[#04045B]' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }`}
}`}
> >
{tab.label} {tab.label}
</button> </button>
@@ -1285,7 +1279,7 @@ export function CourseTimeline({ userType = 'individual' }: CourseTimelineProps)
</div> </div>
{/* Right Sidebar - Learning Plan */} {/* Right Sidebar - Learning Plan */}
<div className="w-80 bg-white border-l border-gray-200 sticky top-[140px] h-[calc(100vh-140px)] overflow-y-auto"> <div className="w-80 bg-white border-l border-gray-200 sticky top-[104px] h-[calc(100vh-104px)] overflow-y-auto">
<div className="p-6"> <div className="p-6">
<div className="mb-6"> <div className="mb-6">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Learning plan</h3> <h3 className="text-lg font-semibold text-gray-900 mb-4">Learning plan</h3>

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

@@ -53,7 +53,7 @@ function LibrarySkeleton() {
export function Library({ userType = 'individual' }: LibraryProps) { export function Library({ userType = 'individual' }: LibraryProps) {
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [courses] = useState<Course[]>(getCoursesData(userType)); const [courses] = useState<Course[]>(getCoursesData(userType));
const navigate = useNavigate(); const navigate = useNavigate();
// Filter states // Filter states
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
@@ -89,9 +89,9 @@ export function Library({ userType = 'individual' }: LibraryProps) {
const filteredCourses = courses.filter(course => { const filteredCourses = courses.filter(course => {
// Search filter // Search filter
if (searchQuery && !course.title.toLowerCase().includes(searchQuery.toLowerCase()) && if (searchQuery && !course.title.toLowerCase().includes(searchQuery.toLowerCase()) &&
!course.description.toLowerCase().includes(searchQuery.toLowerCase()) && !course.description.toLowerCase().includes(searchQuery.toLowerCase()) &&
!course.instructor.name.toLowerCase().includes(searchQuery.toLowerCase()) && !course.instructor.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
!course.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))) { !course.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))) {
return false; return false;
} }
@@ -251,11 +251,10 @@ export function Library({ userType = 'individual' }: LibraryProps) {
<button <button
key={tab.value} key={tab.value}
onClick={() => setActiveTab(tab.value)} onClick={() => setActiveTab(tab.value)}
className={`flex-1 px-4 py-2.5 text-[16px] font-semibold rounded-full transition-all duration-300 ease-in-out focus:outline-none focus:ring-0 active:outline-none ${ className={`flex-1 px-4 py-2.5 text-[16px] font-semibold rounded-full transition-all duration-300 ease-in-out focus:outline-none focus:ring-0 active:outline-none ${activeTab === tab.value
activeTab === tab.value
? 'bg-white text-[#111827] shadow-lg backdrop-blur-sm border border-white/50' ? 'bg-white text-[#111827] shadow-lg backdrop-blur-sm border border-white/50'
: 'text-[#6B7280] hover:text-[#111827] hover:bg-white/60 hover:shadow-md' : 'text-[#6B7280] hover:text-[#111827] hover:bg-white/60 hover:shadow-md'
}`} }`}
> >
{tab.label} {tab.label}
</button> </button>
@@ -301,10 +300,10 @@ export function Library({ userType = 'individual' }: LibraryProps) {
<CardTitle className="text-[20px] font-bold flex items-center justify-between"> <CardTitle className="text-[20px] font-bold flex items-center justify-between">
<span className="bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent"> <span className="bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent">
{activeTab === 'all' ? 'All Leadership Courses' : {activeTab === 'all' ? 'All Leadership Courses' :
activeTab === 'in-progress' ? 'In Progress' : activeTab === 'in-progress' ? 'In Progress' :
activeTab === 'completed' ? 'Completed Courses' : activeTab === 'completed' ? 'Completed Courses' :
activeTab === 'bookmarked' ? 'Bookmarked Courses' : activeTab === 'bookmarked' ? 'Bookmarked Courses' :
'Assigned Courses'} 'Assigned Courses'}
<span className="text-[#6B7280] ml-2 text-[16px] font-medium">({filteredCourses.length})</span> <span className="text-[#6B7280] ml-2 text-[16px] font-medium">({filteredCourses.length})</span>
</span> </span>
</CardTitle> </CardTitle>

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

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

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

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

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

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

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

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

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

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

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

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

21
src/types/images.d.ts vendored Normal file
View File

@@ -0,0 +1,21 @@
declare module '*.png' {
const src: string;
export default src;
}
declare module '*.jpg' {
const src: string;
export default src;
}
declare module '*.jpeg' {
const src: string;
export default src;
}
declare module '*.svg' {
const src: string;
export default src;
}