Initial Claude Run
This commit is contained in:
Jake Kasper
342
frontend/src/components/Layout/Layout.js
Normal file
342
frontend/src/components/Layout/Layout.js
Normal file
@@ -0,0 +1,342 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
HomeIcon,
|
||||
MapIcon,
|
||||
WrenchScrewdriverIcon,
|
||||
BeakerIcon,
|
||||
CalendarDaysIcon,
|
||||
ClockIcon,
|
||||
CloudIcon,
|
||||
UserIcon,
|
||||
Cog6ToothIcon,
|
||||
ArrowRightOnRectangleIcon,
|
||||
Bars3Icon,
|
||||
XMarkIcon,
|
||||
BellIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import {
|
||||
HomeIcon as HomeIconSolid,
|
||||
MapIcon as MapIconSolid,
|
||||
WrenchScrewdriverIcon as WrenchIconSolid,
|
||||
BeakerIcon as BeakerIconSolid,
|
||||
CalendarDaysIcon as CalendarIconSolid,
|
||||
ClockIcon as ClockIconSolid,
|
||||
CloudIcon as CloudIconSolid,
|
||||
UserIcon as UserIconSolid,
|
||||
} from '@heroicons/react/24/solid';
|
||||
|
||||
import { useAuth } from '../../hooks/useAuth';
|
||||
import LoadingSpinner from '../UI/LoadingSpinner';
|
||||
|
||||
const Layout = ({ children }) => {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const { user, logout, isAdmin } = useAuth();
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const navigation = [
|
||||
{
|
||||
name: 'Dashboard',
|
||||
href: '/dashboard',
|
||||
icon: HomeIcon,
|
||||
iconSolid: HomeIconSolid,
|
||||
},
|
||||
{
|
||||
name: 'Properties',
|
||||
href: '/properties',
|
||||
icon: MapIcon,
|
||||
iconSolid: MapIconSolid,
|
||||
},
|
||||
{
|
||||
name: 'Equipment',
|
||||
href: '/equipment',
|
||||
icon: WrenchScrewdriverIcon,
|
||||
iconSolid: WrenchIconSolid,
|
||||
},
|
||||
{
|
||||
name: 'Products',
|
||||
href: '/products',
|
||||
icon: BeakerIcon,
|
||||
iconSolid: BeakerIconSolid,
|
||||
},
|
||||
{
|
||||
name: 'Applications',
|
||||
href: '/applications',
|
||||
icon: CalendarDaysIcon,
|
||||
iconSolid: CalendarIconSolid,
|
||||
},
|
||||
{
|
||||
name: 'History',
|
||||
href: '/history',
|
||||
icon: ClockIcon,
|
||||
iconSolid: ClockIconSolid,
|
||||
},
|
||||
{
|
||||
name: 'Weather',
|
||||
href: '/weather',
|
||||
icon: CloudIcon,
|
||||
iconSolid: CloudIconSolid,
|
||||
},
|
||||
];
|
||||
|
||||
const adminNavigation = [
|
||||
{
|
||||
name: 'Admin Dashboard',
|
||||
href: '/admin',
|
||||
icon: Cog6ToothIcon,
|
||||
},
|
||||
{
|
||||
name: 'Manage Users',
|
||||
href: '/admin/users',
|
||||
icon: UserIcon,
|
||||
},
|
||||
{
|
||||
name: 'Manage Products',
|
||||
href: '/admin/products',
|
||||
icon: BeakerIcon,
|
||||
},
|
||||
];
|
||||
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
navigate('/login');
|
||||
};
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<LoadingSpinner size="lg" message="Loading..." />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Mobile sidebar */}
|
||||
<div className={`lg:hidden ${sidebarOpen ? 'relative z-40' : ''}`}>
|
||||
{sidebarOpen && (
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0 bg-gray-600 bg-opacity-75"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
/>
|
||||
<div className="fixed inset-y-0 left-0 flex w-64 flex-col bg-white shadow-xl">
|
||||
<div className="flex h-16 items-center justify-between px-6 border-b border-gray-200">
|
||||
<h1 className="text-xl font-bold text-primary-600">TurfTracker</h1>
|
||||
<button
|
||||
type="button"
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
>
|
||||
<XMarkIcon className="h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 space-y-1 px-4 py-6">
|
||||
{navigation.map((item) => {
|
||||
const isActive = location.pathname === item.href ||
|
||||
(item.href !== '/dashboard' && location.pathname.startsWith(item.href));
|
||||
const Icon = isActive ? item.iconSolid : item.icon;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
to={item.href}
|
||||
className={isActive ? 'nav-link-active' : 'nav-link-inactive'}
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
>
|
||||
<Icon className="h-5 w-5 mr-3" />
|
||||
{item.name}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
|
||||
{isAdmin && (
|
||||
<>
|
||||
<div className="border-t border-gray-200 my-4" />
|
||||
<div className="px-3 py-2">
|
||||
<h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
||||
Administration
|
||||
</h3>
|
||||
</div>
|
||||
{adminNavigation.map((item) => {
|
||||
const isActive = location.pathname === item.href;
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
to={item.href}
|
||||
className={isActive ? 'nav-link-active' : 'nav-link-inactive'}
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
>
|
||||
<item.icon className="h-5 w-5 mr-3" />
|
||||
{item.name}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
<div className="border-t border-gray-200 p-4">
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="h-8 w-8 rounded-full bg-primary-600 flex items-center justify-center">
|
||||
<span className="text-sm font-medium text-white">
|
||||
{user.firstName?.[0]}{user.lastName?.[0]}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<p className="text-sm font-medium text-gray-900">
|
||||
{user.firstName} {user.lastName}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">{user.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<Link
|
||||
to="/profile"
|
||||
className="nav-link-inactive"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
>
|
||||
<UserIcon className="h-5 w-5 mr-3" />
|
||||
Profile
|
||||
</Link>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="nav-link-inactive w-full text-left"
|
||||
>
|
||||
<ArrowRightOnRectangleIcon className="h-5 w-5 mr-3" />
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Desktop sidebar */}
|
||||
<div className="hidden lg:fixed lg:inset-y-0 lg:flex lg:w-64 lg:flex-col">
|
||||
<div className="flex min-h-0 flex-1 flex-col bg-white border-r border-gray-200">
|
||||
<div className="flex h-16 items-center px-6 border-b border-gray-200">
|
||||
<h1 className="text-xl font-bold text-primary-600">TurfTracker</h1>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 space-y-1 px-4 py-6">
|
||||
{navigation.map((item) => {
|
||||
const isActive = location.pathname === item.href ||
|
||||
(item.href !== '/dashboard' && location.pathname.startsWith(item.href));
|
||||
const Icon = isActive ? item.iconSolid : item.icon;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
to={item.href}
|
||||
className={isActive ? 'nav-link-active' : 'nav-link-inactive'}
|
||||
>
|
||||
<Icon className="h-5 w-5 mr-3" />
|
||||
{item.name}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
|
||||
{isAdmin && (
|
||||
<>
|
||||
<div className="border-t border-gray-200 my-4" />
|
||||
<div className="px-3 py-2">
|
||||
<h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
||||
Administration
|
||||
</h3>
|
||||
</div>
|
||||
{adminNavigation.map((item) => {
|
||||
const isActive = location.pathname === item.href;
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
to={item.href}
|
||||
className={isActive ? 'nav-link-active' : 'nav-link-inactive'}
|
||||
>
|
||||
<item.icon className="h-5 w-5 mr-3" />
|
||||
{item.name}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
<div className="border-t border-gray-200 p-4">
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="h-8 w-8 rounded-full bg-primary-600 flex items-center justify-center">
|
||||
<span className="text-sm font-medium text-white">
|
||||
{user.firstName?.[0]}{user.lastName?.[0]}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<p className="text-sm font-medium text-gray-900">
|
||||
{user.firstName} {user.lastName}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">{user.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<Link to="/profile" className="nav-link-inactive">
|
||||
<UserIcon className="h-5 w-5 mr-3" />
|
||||
Profile
|
||||
</Link>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="nav-link-inactive w-full text-left"
|
||||
>
|
||||
<ArrowRightOnRectangleIcon className="h-5 w-5 mr-3" />
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="lg:pl-64">
|
||||
{/* Top bar */}
|
||||
<div className="sticky top-0 z-10 bg-white border-b border-gray-200 lg:hidden">
|
||||
<div className="flex h-16 items-center justify-between px-4">
|
||||
<button
|
||||
type="button"
|
||||
className="text-gray-500 hover:text-gray-600"
|
||||
onClick={() => setSidebarOpen(true)}
|
||||
>
|
||||
<Bars3Icon className="h-6 w-6" />
|
||||
</button>
|
||||
|
||||
<h1 className="text-lg font-semibold text-gray-900">TurfTracker</h1>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<button className="text-gray-400 hover:text-gray-500">
|
||||
<BellIcon className="h-6 w-6" />
|
||||
</button>
|
||||
<div className="h-6 w-6 rounded-full bg-primary-600 flex items-center justify-center">
|
||||
<span className="text-xs font-medium text-white">
|
||||
{user.firstName?.[0]}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Page content */}
|
||||
<main className="min-h-screen">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
Reference in New Issue
Block a user