Spaces:
Sleeping
Sleeping
| import React, { useState, useRef, useEffect } from 'react'; | |
| const AppLayout = ({ user, onLogout, onSettingsClick, notifications = [], onSosClick, navItems, activeNavId, children }) => { | |
| const [showProfile, setShowProfile] = useState(false); | |
| const [registeredRoles, setRegisteredRoles] = useState([]); | |
| const profileRef = useRef(null); | |
| useEffect(() => { | |
| if (user?.email) { | |
| const token = user.token || localStorage.getItem('token'); | |
| fetch(`/api/users/roles?email=${encodeURIComponent(user.email)}`, { | |
| headers: { 'Authorization': `Bearer ${token}` } | |
| }) | |
| .then(res => { | |
| if (!res.ok) throw new Error('Network response was not ok'); | |
| return res.json(); | |
| }) | |
| .then(data => { | |
| if (Array.isArray(data)) setRegisteredRoles(data); | |
| }) | |
| .catch(err => console.error('Failed to fetch user roles', err)); | |
| } | |
| }, [user?.email]); | |
| useEffect(() => { | |
| const handleClickOutside = (event) => { | |
| if (profileRef.current && !profileRef.current.contains(event.target)) { | |
| setShowProfile(false); | |
| } | |
| }; | |
| document.addEventListener('mousedown', handleClickOutside); | |
| return () => document.removeEventListener('mousedown', handleClickOutside); | |
| }, []); | |
| return ( | |
| <div className="bg-surface-base text-on-surface min-h-screen font-body-md text-body-md overflow-x-hidden selection:bg-primary/30 selection:text-primary"> | |
| {/* SideNavBar (Desktop) */} | |
| <aside className="fixed left-0 top-0 h-full z-40 bg-surface-deep dark:bg-surface-deep border-r border-white/10 bg-glass-fill backdrop-blur-lg shadow-2xl shadow-black hidden lg:flex flex-col w-[280px]"> | |
| <div className="p-6 pb-8 border-b border-white/5"> | |
| <h1 className="font-headline-md text-headline-md font-black text-primary dark:text-primary mb-1 mt-2">Employee Portal</h1> | |
| <p className="font-label-lg text-label-lg text-on-surface-variant">Secure Corporate Network</p> | |
| </div> | |
| <nav className="flex-1 py-6 flex flex-col gap-2 overflow-y-auto"> | |
| {navItems.filter(item => !item.isPrimaryAction).map(item => ( | |
| <button | |
| key={item.id} | |
| onClick={item.onClick} | |
| className={`flex items-center gap-3 px-6 py-4 transition-all duration-300 w-full text-left ${activeNavId === item.id ? 'bg-primary/10 text-primary border-r-4 border-primary translate-x-1' : 'text-on-surface-variant hover:bg-surface-bright/10 hover:text-on-surface hover:backdrop-brightness-125'}`} | |
| > | |
| <span className="material-symbols-outlined" data-weight={activeNavId === item.id ? "fill" : ""}>{item.icon}</span> | |
| <span className="font-label-lg text-label-lg">{item.label}</span> | |
| </button> | |
| ))} | |
| </nav> | |
| <div className="p-6 border-t border-white/5"> | |
| {navItems.filter(item => item.isPrimaryAction).map(item => ( | |
| <button | |
| key={item.id} | |
| onClick={item.onClick} | |
| className="w-full bg-primary text-on-primary-container font-label-lg text-label-lg py-3 rounded-lg mb-6 hover:shadow-[0_0_15px_rgba(2,150,118,0.4)] hover:scale-[1.02] transition-all duration-300 flex justify-center items-center gap-2" | |
| > | |
| <span className="material-symbols-outlined text-[20px]">{item.icon}</span> | |
| {item.label} | |
| </button> | |
| ))} | |
| <div className="flex flex-col gap-2"> | |
| <button onClick={onSettingsClick} className="flex items-center gap-3 text-on-surface-variant px-4 py-2 hover:bg-surface-bright/10 hover:text-on-surface rounded-lg transition-all duration-300 w-full text-left"> | |
| <span className="material-symbols-outlined" style={{fontSize: '20px'}}>settings</span> | |
| <span className="font-label-lg text-label-lg">Settings</span> | |
| </button> | |
| <button onClick={onLogout} className="flex items-center gap-3 text-on-surface-variant px-4 py-2 hover:bg-error-red/20 hover:text-error-red rounded-lg transition-all duration-300 w-full text-left"> | |
| <span className="material-symbols-outlined" style={{fontSize: '20px'}}>logout</span> | |
| <span className="font-label-lg text-label-lg">Logout</span> | |
| </button> | |
| </div> | |
| </div> | |
| </aside> | |
| {/* Main Canvas */} | |
| <main className="pb-24 lg:pb-8 lg:pl-[280px] min-h-screen"> | |
| {/* Header Elements Row (Inline flow, no background bar) */} | |
| <div className="flex justify-between items-center w-full px-6 lg:px-10 py-4"> | |
| <div className="flex items-center gap-4 flex-1"> | |
| <span className="font-headline-lg text-headline-lg font-bold text-primary dark:text-primary tracking-tight lg:hidden">Reliance RideShare</span> | |
| <div className="hidden lg:flex items-center bg-surface-container border border-outline-variant/50 rounded-full px-4 py-2 w-64 focus-within:border-primary focus-within:shadow-[0_0_10px_rgba(2,150,118,0.2)] transition-all"> | |
| <span className="material-symbols-outlined text-on-surface-variant mr-2" style={{ fontSize: '20px' }}>search</span> | |
| <input className="bg-transparent border-none outline-none text-body-sm text-on-surface placeholder-on-surface-variant w-full focus:ring-0 p-0" placeholder="Search destinations..." type="text"/> | |
| </div> | |
| </div> | |
| <div className="flex items-center gap-6"> | |
| <button className="text-on-surface-variant hover:text-on-surface transition-colors hover:bg-surface-bright/20 p-2 rounded-full duration-300 relative group"> | |
| <span className="material-symbols-outlined">notifications</span> | |
| {notifications.length > 0 && <span className="absolute top-2 right-2 w-2 h-2 bg-primary rounded-full animate-pulse"></span>} | |
| </button> | |
| <button onClick={onSosClick} className="text-on-surface-variant hover:text-error-red transition-colors hover:bg-error-red/10 p-2 rounded-full duration-300"> | |
| <span className="material-symbols-outlined">emergency_home</span> | |
| </button> | |
| <div className="relative" ref={profileRef}> | |
| <div | |
| className="h-8 w-8 rounded-full bg-surface-container-high border border-outline/30 flex items-center justify-center font-bold overflow-hidden ml-2 cursor-pointer hover:border-primary transition-colors text-primary text-sm" | |
| onClick={() => setShowProfile(!showProfile)} | |
| > | |
| {user?.avatar_url ? ( | |
| <img src={user.avatar_url} alt="Profile" className="w-full h-full object-cover" /> | |
| ) : ( | |
| user?.name?.charAt(0) | |
| )} | |
| </div> | |
| {showProfile && ( | |
| <div className="absolute right-0 top-[calc(100%+8px)] w-64 bg-surface-container-high border border-white/10 rounded-xl shadow-2xl p-4 z-50 animate-slide-in"> | |
| <div className="flex items-center gap-3 mb-4 border-b border-white/10 pb-3"> | |
| <div className="w-10 h-10 rounded-full bg-primary/20 text-primary flex items-center justify-center font-bold text-lg overflow-hidden"> | |
| {user?.avatar_url ? ( | |
| <img src={user.avatar_url} alt="Profile" className="w-full h-full object-cover" /> | |
| ) : ( | |
| user?.name?.charAt(0) | |
| )} | |
| </div> | |
| <div className="overflow-hidden"> | |
| <p className="font-bold text-white text-sm truncate">{user?.name}</p> | |
| <p className="text-on-surface-variant text-xs truncate">{user?.email}</p> | |
| </div> | |
| </div> | |
| <div className="flex flex-col gap-2 mb-4"> | |
| <div className="flex justify-between items-center text-xs"> | |
| <span className="text-on-surface-variant">Registered as:</span> | |
| <span className="font-medium text-white">{registeredRoles.length > 0 ? registeredRoles.join(', ') : user?.role}</span> | |
| </div> | |
| <div className="flex justify-between items-center text-xs"> | |
| <span className="text-on-surface-variant">Logged in as:</span> | |
| <span className="font-medium text-primary bg-primary/10 px-2 py-0.5 rounded">{user?.role}</span> | |
| </div> | |
| </div> | |
| <button | |
| onClick={() => { | |
| setShowProfile(false); | |
| if (onSettingsClick) onSettingsClick(); | |
| }} | |
| className="w-full text-left px-3 py-2 text-sm text-on-surface-variant hover:bg-white/5 hover:text-white rounded transition-colors flex items-center gap-2 mb-1" | |
| > | |
| <span className="material-symbols-outlined text-[18px]">settings</span> | |
| Manage Account | |
| </button> | |
| <button | |
| onClick={onLogout} | |
| className="w-full text-left px-3 py-2 text-sm text-error-red hover:bg-error-red/10 rounded transition-colors flex items-center gap-2" | |
| > | |
| <span className="material-symbols-outlined text-[18px]">logout</span> | |
| Sign Out | |
| </button> | |
| </div> | |
| )} | |
| </div> | |
| </div> | |
| </div> | |
| <div className="px-6 lg:px-10"> | |
| {children} | |
| </div> | |
| </main> | |
| {/* BottomNavBar (Mobile) */} | |
| <nav className="fixed w-full bottom-0 lg:hidden rounded-t-xl bg-surface-container dark:bg-surface-container backdrop-blur-lg border-t border-white/10 shadow-[0_-4px_20px_rgba(0,0,0,0.5)] z-50 flex justify-around items-center px-4 py-3"> | |
| {navItems.filter(item => !item.isPrimaryAction).map(item => ( | |
| <button | |
| key={item.id} | |
| onClick={item.onClick} | |
| className={`flex flex-col items-center justify-center px-4 py-2 transition-all duration-200 ${activeNavId === item.id ? 'text-primary bg-primary/10 rounded-xl scale-90' : 'text-on-surface-variant active:bg-surface-bright/20'}`} | |
| > | |
| <span className="material-symbols-outlined" data-weight={activeNavId === item.id ? "fill" : ""}>{item.icon}</span> | |
| <span className="font-label-md text-label-md mt-1">{item.label}</span> | |
| </button> | |
| ))} | |
| </nav> | |
| </div> | |
| ); | |
| }; | |
| export default AppLayout; | |