diff --git a/src/features/prafrot/components/PrafrotSidebar.jsx b/src/features/prafrot/components/PrafrotSidebar.jsx
index 800a74b..67151dd 100644
--- a/src/features/prafrot/components/PrafrotSidebar.jsx
+++ b/src/features/prafrot/components/PrafrotSidebar.jsx
@@ -1,139 +1,229 @@
-import React from 'react';
+import React, { useState, useMemo } from 'react';
import { Link, useLocation } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
import {
- LayoutDashboard,
- Car,
- Wrench,
- BarChart3,
- ClipboardList,
- Activity,
- Radio,
- AlertTriangle,
- Store,
+ ChevronLeft,
+ ChevronRight,
+ Search,
+ ChevronDown,
+ LayoutDashboard,
+ Car,
Users,
+ Wrench,
+ Activity,
+ Radio,
+ AlertTriangle,
+ Store,
+ ClipboardList,
LogOut,
- Menu,
- ChevronLeft
+ ShieldAlert,
+ Building2,
+ Award,
+ GitBranch,
+ Lock
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { useAuthContext } from '@/components/shared/AuthProvider';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import './PrafrotSidebar.css';
-export const PrafrotSidebar = ({ isCollapsed, onToggle }) => {
- const { user, logout } = useAuthContext();
- const location = useLocation();
+const MENU_ITEMS = [
+ {
+ id: 'dashboard',
+ label: 'Estatísticas',
+ icon: LayoutDashboard,
+ path: '/plataforma/prafrot/estatisticas'
+ },
+ {
+ id: 'cadastros',
+ label: 'Cadastros',
+ icon: ClipboardList,
+ children: [
+ { id: 'c-veiculos', label: 'Veículos', path: '/plataforma/prafrot/veiculos', icon: Car },
+ { id: 'c-dispatcher', label: 'Dispatcher', path: '/plataforma/prafrot/dispatcher', icon: ClipboardList },
+ { id: 'c-motoristas', label: 'Motoristas', path: '/plataforma/prafrot/motoristas', icon: Users, disabled: true, disabledReason: 'Funcionalidade em manutenção' },
+ { id: 'c-oficinas', label: 'Oficinas', path: '/plataforma/prafrot/oficinas', icon: Store }
+ ]
+ },
+ {
+ id: 'gerencia',
+ label: 'Gerência',
+ icon: Activity,
+ children: [
+ { id: 'g-monitoramento', label: 'Monitoramento', path: '/plataforma/prafrot/monitoramento', icon: Radio },
+ { id: 'g-manutencao', label: 'Manutenção', path: '/plataforma/prafrot/manutencao', icon: Wrench },
+ { id: 'g-sinistros', label: 'Sinistros', path: '/plataforma/prafrot/sinistros', icon: AlertTriangle }
+ ]
+ }
+];
- const MENU_GROUPS = [
- {
- label: 'Geral',
- items: [
- { icon: LayoutDashboard, label: 'Estatísticas', path: '/plataforma/prafrot/estatisticas' },
- ]
- },
- {
- label: 'Cadastros',
- items: [
- { icon: Car, label: 'Veículos', path: '/plataforma/prafrot/veiculos' },
- { icon: ClipboardList, label: 'Dispatcher', path: '/plataforma/prafrot/dispatcher' },
- { icon: Users, label: 'Motoristas', path: '/plataforma/prafrot/motoristas', disabled: true },
- { icon: Store, label: 'Oficinas', path: '/plataforma/prafrot/oficinas' },
- ]
- },
- {
- label: 'Gerência',
- items: [
- { icon: Radio, label: 'Monitoramento', path: '/plataforma/prafrot/monitoramento' },
- { icon: Wrench, label: 'Manutenção', path: '/plataforma/prafrot/manutencao' },
- { icon: AlertTriangle, label: 'Sinistros', path: '/plataforma/prafrot/sinistros' },
- ]
- }
- ];
+export const PrafrotSidebar = ({ isCollapsed, onToggle }) => {
+ const [searchTerm, setSearchTerm] = useState('');
+ const [expandedItems, setExpandedItems] = useState({ cadastros: true, gerencia: true });
+ const location = useLocation();
+ const { user, logout } = useAuthContext();
+
+ const toggleExpand = (id) => {
+ setExpandedItems(prev => ({
+ ...prev,
+ [id]: !prev[id]
+ }));
+ };
+
+ const filteredItems = useMemo(() => {
+ if (!searchTerm) return MENU_ITEMS;
+
+ return MENU_ITEMS.filter(item => {
+ const matchParent = item.label.toLowerCase().includes(searchTerm.toLowerCase());
+ const matchChildren = item.children?.some(child =>
+ child.label.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+ return matchParent || matchChildren;
+ });
+ }, [searchTerm]);
const handleLogout = () => {
logout();
window.location.href = '/plataforma/prafrot/login';
};
- const NavItem = ({ item }) => {
- const isActive = location.pathname.startsWith(item.path);
+ const MenuItem = ({ item, isSub = false }) => {
const Icon = item.icon;
+ const hasChildren = item.children && item.children.length > 0;
+ const isExpanded = expandedItems[item.id];
+ const isActive = location.pathname.startsWith(item.path) || (hasChildren && item.children.some(c => location.pathname.startsWith(c.path)));
+ const isLocked = item.disabled;
- if (item.disabled) {
- // Motoristas option is commented out/disabled as requested
- // I'll keep it in the code but won't render or will render disabled
- return (
- /*
-
-
- {!isCollapsed && {item.label}}
-
- */
- null
- );
- }
+ // Filter sub-items if searching
+ const subItems = item.children?.filter(child =>
+ !searchTerm || child.label.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+
+ const content = (
+ {
+ if (isLocked) return;
+ if (hasChildren) toggleExpand(item.id);
+ }}
+ title={isLocked ? item.disabledReason : (isCollapsed ? item.label : '')}
+ >
+
+ {(!isCollapsed || isSub) && {item.label}}
+
+ {hasChildren && !isCollapsed && (
+
+ )}
+
+ {isLocked && !isCollapsed && (
+
+ )}
+
+ );
return (
-
+ {item.path && !hasChildren && !isLocked ? (
+
+ {content}
+
+ ) : content}
+
+ {hasChildren && isExpanded && !isCollapsed && (
+
+ {subItems.map(child => (
+
+ ))}
+
)}
- >
-
- {!isCollapsed && {item.label}}
-
+
);
};
return (