Nurfog
cf2349ef2f
- Next.js 15 + TypeScript + Bootstrap 5 + FontAwesome - Layout replica SAM.Master (sidebar collapsable + header) - Sidebar, Header, LoadingSpinner, ModalConfirmacion components - Login page with RUT validation - Dashboard page with summary cards - AuthContext + JWT auth with cookies - api.ts centralized HTTP client - useInactividad hook (30min timeout) - validarRut.ts + utils.ts migrated - Original CSS + images copied from project - Dockerfile multi-stage build
53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useAuth } from '@/hooks/useAuth';
|
|
import { api } from '@/services/api';
|
|
import LoadingSpinner from '@/components/LoadingSpinner';
|
|
|
|
const cards = [
|
|
{ title: 'Nuevos Leads', icon: 'fas fa-users', color: '#4e73df', endpoint: '/lead/nuevos' },
|
|
{ title: 'Cotizaciones', icon: 'fas fa-file-invoice-dollar', color: '#1cc88a', endpoint: '/cotizacion/buscar' },
|
|
{ title: 'Cursos', icon: 'fas fa-book', color: '#36b9cc', endpoint: '/curso' },
|
|
{ title: 'Alumnos', icon: 'fas fa-user-graduate', color: '#f6c23e', endpoint: '/alumno' },
|
|
];
|
|
|
|
export default function DashboardPage() {
|
|
const { user, loading } = useAuth();
|
|
const router = useRouter();
|
|
const [pageLoading, setPageLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (!loading && !user) router.push('/login');
|
|
if (!loading) setPageLoading(false);
|
|
}, [user, loading, router]);
|
|
|
|
if (pageLoading) return <LoadingSpinner />;
|
|
|
|
return (
|
|
<div>
|
|
<h2 className="mb-4">Bienvenido, {user?.nombre}</h2>
|
|
<div className="row">
|
|
{cards.map(card => (
|
|
<div className="col-xl-3 col-md-6 mb-4" key={card.title}>
|
|
<div className="card border-left-primary shadow h-100 py-2" style={{ borderLeft: `.25rem solid ${card.color}` }}>
|
|
<div className="card-body">
|
|
<div className="row no-gutters align-items-center">
|
|
<div className="col mr-2">
|
|
<div className="text-xs font-weight-bold text-primary text-uppercase mb-1">{card.title}</div>
|
|
<div className="h5 mb-0 font-weight-bold text-gray-800">-</div>
|
|
</div>
|
|
<div className="col-auto">
|
|
<i className={`${card.icon} fa-2x text-gray-300`}></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|