feat: páginas de configuración (departamentos, equipo, SLA)

frontend/src/components/Sidebar.tsx

@@ -14,6 +14,15 @@ export default function Sidebar() {
     { href: "/knowledge-base", icon: "bi-journal-bookmark", label: "Knowledge Base" },
   ];
 
+  const configItems = [
+    { href: "/settings/departments", icon: "bi-diagram-3", label: "Departamentos" },
+    { href: "/settings/team", icon: "bi-people", label: "Equipo" },
+    { href: "/settings/sla", icon: "bi-stopwatch", label: "SLA" },
+  ];
+
+  const isActive = (href: string) =>
+    pathname === href || (href !== "/" && pathname.startsWith(href));
+
   const fullName = user ? `${user.nombres} ${user.apPaterno}` : "Usuario";
   const initials = user?.nombres
     ?.split(" ")
@@ -45,6 +54,22 @@ export default function Sidebar() {
             <span>{item.label}</span>
           </Link>
         ))}
+        <div
+          className="text-uppercase mt-3 mb-1 px-3"
+          style={{ fontSize: "0.7rem", letterSpacing: "0.08em", opacity: 0.6 }}
+        >
+          Configuración
+        </div>
+        {configItems.map((item) => (
+          <Link
+            key={item.href}
+            href={item.href}
+            className={`nav-link ${isActive(item.href) ? "active" : ""}`}
+          >
+            <i className={`bi ${item.icon}`}></i>
+            <span>{item.label}</span>
+          </Link>
+        ))}
       </nav>
 
       <div className="sidebar-user">