Files
dashboard-completo/frontend/src/App.jsx
2026-06-27 11:58:05 -05:00

66 lines
2.0 KiB
JavaScript

// 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>
);
}