Nuevo Commit

frontend/src/Sidebar.jsx

@@ -0,0 +1,111 @@
+export default function Sidebar({ user, activeTab, setActiveTab, sidebarOpen, setSidebarOpen, onLogout }) {
+  return (
+    <aside className={`bg-gray-900 text-white transition-all duration-300 ${sidebarOpen ? 'w-64' : 'w-16'} flex flex-col fixed h-full z-10`}>
+      {/* Sidebar Header */}
+      <div className={`p-4 flex items-center ${sidebarOpen ? 'justify-between' : 'justify-center'} border-b border-gray-700`}>
+        {sidebarOpen && <h2 className="text-xl font-bold">Sistema</h2>}
+        <button
+          onClick={() => setSidebarOpen(!sidebarOpen)}
+          className="p-2 rounded-lg hover:bg-gray-800 transition"
+          title={sidebarOpen ? 'Ocultar sidebar' : 'Mostrar sidebar'}
+        >
+          {sidebarOpen ? '☰' : '☰'}
+        </button>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 p-2">
+        <ul className="space-y-2">
+          <li>
+            <button
+              onClick={() => setActiveTab('checklists')}
+              className={`w-full flex items-center ${sidebarOpen ? 'gap-3 px-4' : 'justify-center px-2'} py-3 rounded-lg transition ${
+                activeTab === 'checklists'
+                  ? 'bg-blue-600 text-white'
+                  : 'text-gray-300 hover:bg-gray-800'
+              }`}
+              title={!sidebarOpen ? 'Checklists' : ''}
+            >
+              <span className="text-xl">📋</span>
+              {sidebarOpen && <span>Checklists</span>}
+            </button>
+          </li>
+          <li>
+            <button
+              onClick={() => setActiveTab('inspections')}
+              className={`w-full flex items-center ${sidebarOpen ? 'gap-3 px-4' : 'justify-center px-2'} py-3 rounded-lg transition ${
+                activeTab === 'inspections'
+                  ? 'bg-blue-600 text-white'
+                  : 'text-gray-300 hover:bg-gray-800'
+              }`}
+              title={!sidebarOpen ? 'Inspecciones' : ''}
+            >
+              <span className="text-xl">🔍</span>
+              {sidebarOpen && <span>Inspecciones</span>}
+            </button>
+          </li>
+          {user.role === 'admin' && (
+            <>
+              <li>
+                <button
+                  onClick={() => setActiveTab('users')}
+                  className={`w-full flex items-center ${sidebarOpen ? 'gap-3 px-4' : 'justify-center px-2'} py-3 rounded-lg transition ${
+                    activeTab === 'users'
+                      ? 'bg-blue-600 text-white'
+                      : 'text-gray-300 hover:bg-gray-800'
+                  }`}
+                  title={!sidebarOpen ? 'Usuarios' : ''}
+                >
+                  <span className="text-xl">👥</span>
+                  {sidebarOpen && <span>Usuarios</span>}
+                </button>
+              </li>
+              <li>
+                <button
+                  onClick={() => setActiveTab('reports')}
+                  className={`w-full flex items-center ${sidebarOpen ? 'gap-3 px-4' : 'justify-center px-2'} py-3 rounded-lg transition ${
+                    activeTab === 'reports'
+                      ? 'bg-blue-600 text-white'
+                      : 'text-gray-300 hover:bg-gray-800'
+                  }`}
+                  title={!sidebarOpen ? 'Reportes' : ''}
+                >
+                  <span className="text-xl">📊</span>
+                  {sidebarOpen && <span>Reportes</span>}
+                </button>
+              </li>
+            </>
+          )}
+        </ul>
+      </nav>
+
+      {/* User Info */}
+      <div className="p-4 border-t border-gray-700">
+        <div className={`flex items-center gap-3 ${!sidebarOpen && 'justify-center'}`}>
+          <div className="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold flex-shrink-0">
+            {user.username.charAt(0).toUpperCase()}
+          </div>
+          {sidebarOpen && (
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium truncate">{user.full_name || user.username}</p>
+              <p className="text-xs text-gray-400">{user.role === 'admin' ? 'Admin' : 'Mecánico'}</p>
+            </div>
+          )}
+        </div>
+        <button
+          onClick={onLogout}
+          className={`mt-3 w-full px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition flex items-center justify-center gap-2`}
+          title={!sidebarOpen ? 'Cerrar Sesión' : ''}
+        >
+          {sidebarOpen ? (
+            <>
+              <span>Cerrar Sesión</span>
+            </>
+          ) : (
+            <span className="text-lg">🚪</span>
+          )}
+        </button>
+      </div>
+    </aside>
+  )
+}