136 lines
4.5 KiB
TypeScript
136 lines
4.5 KiB
TypeScript
import { NavLink } from 'react-router-dom';
|
|
import {
|
|
LayoutDashboard,
|
|
Wrench,
|
|
Stethoscope,
|
|
Package,
|
|
Truck,
|
|
FileText,
|
|
Settings,
|
|
LogOut,
|
|
Users,
|
|
Building2,
|
|
} from 'lucide-react';
|
|
import { useAuthStore } from '../../store/authStore';
|
|
import { useTallerStore } from '../../store/tallerStore';
|
|
|
|
const navigation = [
|
|
{ name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
|
|
{ name: 'Ordenes de Servicio', href: '/orders', icon: Wrench },
|
|
{ name: 'Clientes', href: '/customers', icon: Building2 },
|
|
{ name: 'Vehiculos', href: '/vehicles', icon: Truck },
|
|
{ name: 'Inventario', href: '/inventory', icon: Package },
|
|
{ name: 'Cotizaciones', href: '/quotes', icon: FileText },
|
|
{ name: 'Diagnosticos', href: '/diagnostics', icon: Stethoscope },
|
|
];
|
|
|
|
const secondaryNavigation = [
|
|
{ name: 'Usuarios', href: '/users', icon: Users },
|
|
{ name: 'Configuracion', href: '/settings', icon: Settings },
|
|
];
|
|
|
|
export function Sidebar() {
|
|
const { logout, user } = useAuthStore();
|
|
const { currentTaller } = useTallerStore();
|
|
|
|
return (
|
|
<div className="flex h-full w-64 flex-col bg-gray-900">
|
|
{/* Logo */}
|
|
<div className="flex h-16 shrink-0 items-center px-6">
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-8 w-8 rounded-lg bg-diesel-500 flex items-center justify-center">
|
|
<Wrench className="h-5 w-5 text-white" />
|
|
</div>
|
|
<span className="text-xl font-bold text-white">Mecanicas</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Taller info */}
|
|
{currentTaller && (
|
|
<div className="px-4 py-2">
|
|
<div className="rounded-lg bg-gray-800 px-3 py-2">
|
|
<p className="text-xs text-gray-400">Taller</p>
|
|
<p className="text-sm font-medium text-white truncate">
|
|
{currentTaller.name}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Navigation */}
|
|
<nav className="flex flex-1 flex-col px-4 py-4">
|
|
<ul role="list" className="flex flex-1 flex-col gap-1">
|
|
{navigation.map((item) => (
|
|
<li key={item.name}>
|
|
<NavLink
|
|
to={item.href}
|
|
className={({ isActive }) =>
|
|
`group flex gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
|
|
isActive
|
|
? 'bg-diesel-600 text-white'
|
|
: 'text-gray-300 hover:bg-gray-800 hover:text-white'
|
|
}`
|
|
}
|
|
>
|
|
<item.icon className="h-5 w-5 shrink-0" />
|
|
{item.name}
|
|
</NavLink>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* Secondary navigation */}
|
|
<ul role="list" className="mt-auto space-y-1">
|
|
{secondaryNavigation.map((item) => (
|
|
<li key={item.name}>
|
|
<NavLink
|
|
to={item.href}
|
|
className={({ isActive }) =>
|
|
`group flex gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
|
|
isActive
|
|
? 'bg-gray-800 text-white'
|
|
: 'text-gray-400 hover:bg-gray-800 hover:text-white'
|
|
}`
|
|
}
|
|
>
|
|
<item.icon className="h-5 w-5 shrink-0" />
|
|
{item.name}
|
|
</NavLink>
|
|
</li>
|
|
))}
|
|
|
|
{/* Logout */}
|
|
<li>
|
|
<button
|
|
onClick={() => logout()}
|
|
className="group flex w-full gap-3 rounded-lg px-3 py-2 text-sm font-medium text-gray-400 transition-colors hover:bg-gray-800 hover:text-white"
|
|
>
|
|
<LogOut className="h-5 w-5 shrink-0" />
|
|
Cerrar Sesion
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
{/* User info */}
|
|
{user && (
|
|
<div className="mt-4 border-t border-gray-800 pt-4">
|
|
<div className="flex items-center gap-3 px-3">
|
|
<div className="h-8 w-8 rounded-full bg-gray-700 flex items-center justify-center">
|
|
<span className="text-sm font-medium text-white">
|
|
{user.full_name.charAt(0).toUpperCase()}
|
|
</span>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-white truncate">
|
|
{user.full_name}
|
|
</p>
|
|
<p className="text-xs text-gray-400 truncate">{user.role}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|