Auto-deploy: 2026-01-13 12:14:29 | 1 arquivo(s) alterado(s)

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 { 
+  ChevronLeft, 
+  ChevronRight, 
+  Search, 
+  ChevronDown, 
   LayoutDashboard,
   Car,
+  Users,
   Wrench,
-  BarChart3, 
-  ClipboardList, 
   Activity,
   Radio,
   AlertTriangle,
   Store,
-  Users,
+  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 (
-        /* 
-        <div className="pfs-item disabled" title="Em breve">
-          <Icon size={20} className="pfs-icon" />
-          {!isCollapsed && <span className="pfs-label">{item.label}</span>}
-        </div>
-        */
-        null
-      );
-    }
+    // Filter sub-items if searching
+    const subItems = item.children?.filter(child => 
+      !searchTerm || child.label.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
+    const content = (
+      <div 
+        className={cn(
+          isSub ? "pfs-sublink" : "pfs-link",
+          isActive && !hasChildren && "active",
+          isLocked && "pfs-locked"
+        )}
+        onClick={() => {
+          if (isLocked) return;
+          if (hasChildren) toggleExpand(item.id);
+        }}
+        title={isLocked ? item.disabledReason : (isCollapsed ? item.label : '')}
+      >
+        <Icon size={isSub ? 16 : 20} className="pfs-icon" />
+        {(!isCollapsed || isSub) && <span className="pfs-label">{item.label}</span>}
+        
+        {hasChildren && !isCollapsed && (
+          <ChevronDown 
+            size={14} 
+            className={cn("pfs-chevron", isExpanded && "expanded")} 
+          />
+        )}
+
+        {isLocked && !isCollapsed && (
+          <Lock size={12} className="pfs-lock-icon" />
+        )}
+      </div>
+    );
 
     return (
-      <Link
-        to={item.path}
-        className={cn(
-          "pfs-item",
-          isActive && "active"
+      <div className="pfs-item-wrapper">
+        {item.path && !hasChildren && !isLocked ? (
+          <Link to={item.path} style={{ textDecoration: 'none' }}>
+            {content}
+          </Link>
+        ) : content}
+
+        {hasChildren && isExpanded && !isCollapsed && (
+          <motion.div 
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            className="pfs-submenu"
+          >
+            {subItems.map(child => (
+              <MenuItem key={child.id} item={child} isSub />
+            ))}
+          </motion.div>
         )}
-      >
-        <Icon size={20} className="pfs-icon" strokeWidth={isActive ? 2.5 : 2} />
-        {!isCollapsed && <span className="pfs-label">{item.label}</span>}
-      </Link>
+      </div>
     );
   };
 
   return (
     <aside className={cn("pfs-container", isCollapsed && "collapsed")}>
-      {/* Header */}
-      <div className="pfs-header">
-        <div className="pfs-logo-box">PF</div>
-        {!isCollapsed && (
-          <div className="pfs-brand-info">
-            <span className="pfs-brand-name">PRA<span>FROTA</span></span>
-            <span className="pfs-brand-sub">Fleet Management</span>
-          </div>
-        )}
-        <button onClick={onToggle} className="pfs-toggle-btn">
-          {isCollapsed ? <Menu size={18} /> : <ChevronLeft size={18} />}
+      <div className="pfs-toggle-container">
+        <button className="pfs-toggle-btn" onClick={onToggle}>
+          {isCollapsed ? <ChevronRight size={18} /> : <ChevronLeft size={18} />}
         </button>
       </div>
 
-      {/* Navigation */}
-      <nav className="pfs-nav custom-scrollbar">
-        {MENU_GROUPS.map((group, gIdx) => (
-          <React.Fragment key={gIdx}>
-            {!isCollapsed && <div className="pfs-group-label">{group.label}</div>}
-            {group.items.map((item, iIdx) => (
-              <NavItem key={iIdx} item={item} />
-            ))}
-          </React.Fragment>
+      <div className="pfs-search-wrapper">
+        <div className="relative">
+          <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500" />
+          <input 
+            type="text" 
+            className="pfs-search-input" 
+            placeholder="Buscar..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </div>
+      </div>
+
+      <nav className="pfs-nav-content custom-scrollbar">
+        {filteredItems.map(item => (
+          <MenuItem key={item.id} item={item} />
         ))}
       </nav>
 
-      {/* Footer */}
-      <div className="pfs-footer">
-        <div className="pfs-user-card">
-          <Avatar className="h-8 w-8 border border-[#2a2a2a]">
-            <AvatarImage src={`https://ui-avatars.com/api/?name=${user?.name || 'User'}&background=10b981&color=141414`} />
-            <AvatarFallback className="bg-[#10b981] text-[#141414] font-bold text-xs">
-              {(user?.name || 'U').charAt(0)}
-            </AvatarFallback>
-          </Avatar>
+      <footer className="pfs-footer">
+        <div className="pfs-brand">
+          <div className="pfs-brand-logo">
+            PF
+          </div>
           {!isCollapsed && (
-            <div className="pfs-user-info">
-              <div className="pfs-user-name truncate">{user?.name || 'Usuário'}</div>
-              <button onClick={handleLogout} className="pfs-logout-btn">
-                <LogOut size={12} /> Sair
-              </button>
+            <div className="pfs-brand-info">
+              <span className="pfs-brand-name">PRA<span>FROTA</span></span>
+              <span className="pfs-app-sub">Fleet Management</span>
             </div>
           )}
         </div>
-      </div>
+
+        <div className="pfs-user-section">
+          <div className={cn("pfs-user-card", isCollapsed && "justify-center")}>
+            <Avatar className="h-8 w-8 border border-zinc-800">
+              <AvatarImage src={`https://ui-avatars.com/api/?name=${user?.name || 'User'}&background=10b981&color=141414`} />
+              <AvatarFallback className="bg-emerald-500 text-zinc-950 font-bold text-xs">
+                {(user?.name || 'U').charAt(0)}
+              </AvatarFallback>
+            </Avatar>
+            {!isCollapsed && (
+              <div className="pfs-user-data">
+                <span className="pfs-user-name">{user?.name || 'Usuário'}</span>
+                <button onClick={handleLogout} className="pfs-logout-link">
+                  <LogOut size={10} /> Sair
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {!isCollapsed && (
+          <div className="pfs-legal">
+            <div className="pfs-legal-item">
+              <Building2 size={10} />
+              <span>CNPJ: 31.882.636/0001-38</span>
+            </div>
+            <div className="pfs-version">
+              <GitBranch size={10} />
+              <span>v1.3.0</span>
+            </div>
+          </div>
+        )}
+      </footer>
     </aside>
   );
 };