371 lines
12 KiB
JavaScript
371 lines
12 KiB
JavaScript
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,
|
|
} from '@heroicons/react/24/solid';
|
|
import { GrassIconOutline, GrassIconSolid } from '../Icons/GrassIcon';
|
|
|
|
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: 'Watering',
|
|
href: '/watering',
|
|
icon: CloudIcon,
|
|
iconSolid: CloudIconSolid,
|
|
},
|
|
{
|
|
name: 'Mowing',
|
|
href: '/mowing',
|
|
icon: GrassIconOutline,
|
|
iconSolid: GrassIconSolid,
|
|
},
|
|
{
|
|
name: 'History',
|
|
href: '/history',
|
|
icon: ClockIcon,
|
|
iconSolid: ClockIconSolid,
|
|
},
|
|
{
|
|
name: 'Weather',
|
|
href: '/weather',
|
|
icon: CloudIcon,
|
|
iconSolid: CloudIconSolid,
|
|
},
|
|
{
|
|
name: 'Watering',
|
|
href: '/watering',
|
|
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,
|
|
},
|
|
{
|
|
name: 'Manage Equipment',
|
|
href: '/admin/equipment',
|
|
icon: WrenchScrewdriverIcon,
|
|
},
|
|
{
|
|
name: 'Manage Properties',
|
|
href: '/admin/properties',
|
|
icon: MapIcon,
|
|
},
|
|
];
|
|
|
|
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;
|