103 lines
3.6 KiB
JavaScript
103 lines
3.6 KiB
JavaScript
import React from 'react';
|
|
import { useLocation, Link } from 'react-router-dom';
|
|
import {
|
|
Gauge,
|
|
Truck,
|
|
Wrench,
|
|
Fuel,
|
|
ClipboardCheck,
|
|
Satellite,
|
|
BookUser,
|
|
PieChart,
|
|
ChevronRight,
|
|
FileWarning
|
|
} from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
/**
|
|
* Sidebar customizada para o ambiente Fleet V2.
|
|
* Agora utiliza navegação baseada em rotas para persistência.
|
|
*/
|
|
export const FleetV2Sidebar = ({ isCollapsed }) => {
|
|
const location = useLocation();
|
|
const currentPath = location.pathname;
|
|
|
|
const sections = [
|
|
{
|
|
label: 'Principal',
|
|
items: [
|
|
{ id: 'dashboard', path: '/plataforma/fleet-v2/dashboard', label: 'Dashboard', icon: Gauge },
|
|
{ id: 'frota', path: '/plataforma/fleet-v2/frota', label: 'Veículos & Bases', icon: Truck },
|
|
]
|
|
},
|
|
{
|
|
label: 'Operação',
|
|
items: [
|
|
{ id: 'manutencoes', path: '/plataforma/fleet-v2/manutencoes', label: 'Manutenções', icon: Wrench },
|
|
{ id: 'abastecimento', path: '/plataforma/fleet-v2/abastecimento', label: 'Abastecimento', icon: Fuel },
|
|
{ id: 'sinistros', path: '/plataforma/fleet-v2/sinistros', label: 'Sinistros & Devoluções', icon: FileWarning },
|
|
]
|
|
},
|
|
{
|
|
label: 'Controle de Qualidade',
|
|
items: [
|
|
{ id: 'checklists', path: '/plataforma/fleet-v2/checklists', label: 'Checklists & Inspeções', icon: ClipboardCheck },
|
|
{ id: 'monitoramento', path: '/plataforma/fleet-v2/monitoramento', label: 'Monitoramento Integrado', icon: Satellite },
|
|
]
|
|
},
|
|
{
|
|
label: 'Administrativo',
|
|
items: [
|
|
{ id: 'listas', path: '/plataforma/fleet-v2/listas', label: 'Cadastro Prestadores', icon: BookUser },
|
|
{ id: 'estatisticas', path: '/plataforma/fleet-v2/estatisticas', label: 'Relatórios Gerenciais', icon: PieChart },
|
|
]
|
|
}
|
|
];
|
|
|
|
return (
|
|
<nav className="space-y-6">
|
|
{sections.map((section) => (
|
|
<div key={section.label} className="space-y-1">
|
|
{!isCollapsed && (
|
|
<h3 className="px-3 text-[11px] uppercase font-bold text-slate-400 tracking-widest mb-3">
|
|
{section.label}
|
|
</h3>
|
|
)}
|
|
<div className="space-y-0.5">
|
|
{section.items.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = currentPath === item.path;
|
|
|
|
return (
|
|
<Link
|
|
key={item.id}
|
|
to={item.path}
|
|
title={isCollapsed ? item.label : undefined}
|
|
className={cn(
|
|
"w-full flex items-center transition-all group relative duration-200",
|
|
isCollapsed ? "justify-center px-0 py-2.5 rounded-lg" : "gap-3 px-3 py-2.5 rounded-xl",
|
|
isActive
|
|
? "bg-primary text-primary-foreground shadow-md shadow-primary/20"
|
|
: "text-slate-500 hover:bg-slate-100/50 hover:text-slate-900"
|
|
)}
|
|
>
|
|
<Icon
|
|
size={isActive && !isCollapsed ? 18 : 20}
|
|
className={cn("transition-colors shrink-0", isActive ? "text-white" : "text-slate-400 group-hover:text-primary")}
|
|
/>
|
|
{!isCollapsed && (
|
|
<>
|
|
<span className="text-sm font-semibold flex-1 text-left">{item.label}</span>
|
|
{isActive && <ChevronRight size={14} className="opacity-50" />}
|
|
</>
|
|
)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</nav>
|
|
);
|
|
};
|