Solucionado submodulos y subiendo codigo real

frontend/src/App.jsx

@@ -0,0 +1,65 @@
+// src/App.jsx
+import { useState, useEffect } from "react";
+import { useAuth } from "./lib/auth";
+import Sidebar from "./components/Sidebar";
+import Login from "./pages/Login";
+import Ocupabilidad from "./pages/Ocupabilidad";
+import Ventas from "./pages/Ventas";
+import Comisiones from "./pages/Comisiones";
+import Cobranza from "./pages/Cobranza";
+import Rentabilidad from "./pages/Rentabilidad";
+import Asesores from "./pages/Asesores";
+import Usuarios from "./pages/Usuarios";
+
+export default function App() {
+  const { autenticado, cargando, permisos, puedeVer } = useAuth();
+  const [pagina, setPagina] = useState(null);
+
+  // Al entrar, seleccionar el primer módulo permitido
+  useEffect(() => {
+    if (autenticado && permisos.length > 0 && !pagina) {
+      setPagina(permisos[0]);
+    }
+    if (!autenticado) setPagina(null);
+  }, [autenticado, permisos, pagina]);
+
+  if (cargando) {
+    return (
+      <div style={{ minHeight:"100vh", display:"flex", alignItems:"center", justifyContent:"center", background:"#0f172a", color:"#fff" }}>
+        Cargando...
+      </div>
+    );
+  }
+
+  if (!autenticado) return <Login />;
+
+  function render() {
+    // Seguridad: si la página actual no está permitida, no renderizar
+    if (pagina && !puedeVer(pagina)) return <SinAcceso />;
+    switch (pagina) {
+      case "ocupabilidad": return <Ocupabilidad />;
+      case "ventas":       return <Ventas />;
+      case "comisiones":   return <Comisiones />;
+      case "cobranza":     return <Cobranza />;
+      case "rentabilidad": return <Rentabilidad />;
+      case "asesores":     return <Asesores />;
+      case "usuarios":     return <Usuarios />;
+      default:             return null;
+    }
+  }
+
+  return (
+    <div className="app">
+      <Sidebar active={pagina} onChange={setPagina} />
+      <main className="main">{render()}</main>
+    </div>
+  );
+}
+
+function SinAcceso() {
+  return (
+    <div style={{ padding:40, textAlign:"center", color:"#94a3b8" }}>
+      🔒 No tienes acceso a este módulo.
+    </div>
+  );
+}