Files
FRASA-CAS/apps/cotizador/src/components/AuthGate.tsx
Consult AS Technology f72354f775 feat: roles con modulos por rol + mejoras Mi dia y descarte
- Matriz de roles (vendedor, administracion_venta, director_ventas,
  escrituracion, direccion_general, admin) con modulos visibles por rol;
  auth/me y login incluyen 'modulos'; PATCH /usuarios/:id/rol (admin).
- Landing: Cobranza -> Clientes, Chat IA -> Chat Hermes, nuevo modulo
  Contactos (vista interna leyendo el tablero Contactos), grid filtrado
  por rol, rol visible en Configuracion de cuenta.
- Dashboards: tab 'Tablero comercial' y tabs filtrados por rol.
- Boton '<- Menu' en el header de todas las apps.
- Mi dia: cada lead muestra el ultimo cambio (que, quien, cuando) desde
  el activity log de Monday (normalizacion de created_at 100ns/us/ms).
- Descarte: el motivo se crea en el grupo de su categoria en el tablero
  Motivos No Compra.
2026-09-04 09:12:01 +00:00

66 lines
2.7 KiB
TypeScript

import { useState, type ReactNode } from 'react'
import { getSesion, logout, type Sesion } from '../services/auth'
import CambiarPasswordModal from './CambiarPasswordModal'
import LoginScreen from './LoginScreen'
/**
* Gate de autenticación: sin sesión solo se ve el login; con sesión se ve la
* app con un header blanco sticky (marca a la izquierda; "nombre · rol",
* "Contraseña" (modal de cambio) y botón "Salir" a la derecha).
*/
export default function AuthGate({ children }: { children: ReactNode }) {
const [sesion, setSesion] = useState<Sesion | null>(() => getSesion())
const [modalPassword, setModalPassword] = useState(false)
if (!sesion) {
return <LoginScreen onLogin={() => setSesion(getSesion())} />
}
return (
<div className="min-h-screen bg-[#F8FAFC] text-[#111827]">
<header className="sticky top-0 z-10 border-b border-[#E5E7EB] bg-white/95 backdrop-blur">
<div className="mx-auto flex h-16 max-w-[1280px] items-center justify-between gap-4 px-4 sm:px-6">
<div className="flex items-center gap-3">
<a
href="/"
className="rounded-lg px-2 py-1.5 text-xs font-medium text-[#64748B] transition-all duration-100 ease-out hover:bg-[#F9FAFB] hover:text-[#111827]"
>
&larr; Menú
</a>
<p className="text-sm text-[#111827]">
<span className="font-bold">
FRASA DESARROLLOS<span className="text-[#F97316]">.</span>
</span>{' '}
<span className="hidden font-normal text-[#64748B] sm:inline">— Cotizador</span>
</p>
</div>
<div className="flex items-center gap-3 sm:gap-4">
<span className="hidden text-xs font-medium text-[#64748B] md:inline">
{sesion.usuario.nombre} · {sesion.usuario.rol}
</span>
<button
type="button"
onClick={() => setModalPassword(true)}
className="rounded-lg border border-[#D1D5DB] bg-white px-3 py-1.5 text-xs font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
>
Contraseña
</button>
<button
type="button"
onClick={() => {
logout()
setSesion(null)
}}
className="text-xs font-medium text-accent transition-colors duration-100 hover:text-accent-hover"
>
Salir
</button>
</div>
</div>
</header>
{children}
{modalPassword && <CambiarPasswordModal onCerrar={() => setModalPassword(false)} />}
</div>
)
}