Consult AS Technology
d59c8c0d7e
Headers sticky con marca y acciones, contenedores max-w-[1280px], grids de contenido con rails laterales sticky (cotizador, mi-dia, detalle de cobranza), stepper vertical en el wizard de alta, toolbar+ tabla unificadas en cobranza, tabs como segmented control en dashboards, chat con barra de entrada fija y preguntas sugeridas, landing con navbar + hero + grid de modulos + footer.
58 lines
2.3 KiB
TypeScript
58 lines
2.3 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">
|
|
<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 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>
|
|
)
|
|
}
|