const { useState, useEffect, useRef } = React;
function useViewportMatch(breakpoint) {
const [matches, setMatches] = useState(() =>
typeof window !== 'undefined' ? window.innerWidth <= breakpoint : false,
);
useEffect(() => {
if (typeof window === 'undefined') return undefined;
const syncViewport = () => {
setMatches(window.innerWidth <= breakpoint);
};
syncViewport();
window.addEventListener('resize', syncViewport);
return () => window.removeEventListener('resize', syncViewport);
}, [breakpoint]);
return matches;
}
// ─── API Helper ────────────────────────────────────────────────────────────────
const apiCall = async (url, options = {}) => {
const userRole = typeof window !== 'undefined' ? localStorage.getItem('eg_role') : null;
const apiRole = userRole ? userRole.toUpperCase() : null;
const headers = {
'Content-Type': 'application/json',
...(apiRole && { 'X-User-Role': apiRole }),
...(options.headers || {}),
};
return fetch(url, {
...options,
headers,
}).then(res => res.json());
};
// ─── Brand Tokens ─────────────────────────────────────────────────────────────
const BRAND = {
green: { main: '#1B9970', dark: '#136B4D', darker: '#0C4A36', light: '#E8F5F0', muted: '#4A6B5E' },
purple: { main: '#7C3AED', dark: '#5B21B6', light: '#F3E8FF' },
amber: { main: '#D4860F', dark: '#A86709', light: '#FEF3DC' },
blue: { main: '#2D7DD2', dark: '#1E5FA0', light: '#E3EFF9' },
red: { main: '#D94F4F', dark: '#A83030', light: '#FDECEC' },
bg: '#F5F7F5', card: '#FFFFFF', border: '#DCE5DF',
text: { primary: '#0E1F18', secondary: '#2D4A3E', muted: '#4A6B5E', light: '#8AAB9E' },
};
const LEVEL = {
1: { name: 'Operador Inicial', color: '#7C3AED', dark: '#5B21B6', light: '#F3E8FF' },
2: { name: 'Operador Certificado', color: '#D4860F', dark: '#7A4800', light: '#FEF3DC' },
3: { name: 'Avanzado / Analista', color: '#2D7DD2', dark: '#1E5FA0', light: '#E3EFF9' },
4: { name: 'Supervisor', color: '#D94F4F', dark: '#A83030', light: '#FDECEC' },
};
// ─── Course Data ──────────────────────────────────────────────────────────────
const COURSES = [
{ code:'EG101', title:'Introducción a eGuardian', level:1, dur:'2h', mods:4, icon:'shield', desc:'Comprensión del servicio eGuardian, su impacto en la seguridad real y el rol crítico del operador.', progress:100, grade:95 },
{ code:'EG102', title:'Protocolos de Operación', level:1, dur:'4h', mods:8, icon:'checklist', desc:'Procedimientos estándar de operación para central de monitoreo.', progress:100, grade:88 },
{ code:'EG103', title:'Sistemas CCTV', level:1, dur:'5h', mods:10, icon:'camera', desc:'Principios técnicos de videovigilancia, tipos de cámaras y configuración.',progress:75, grade:null },
{ code:'EG104', title:'Operación iVMS-4200', level:1, dur:'6h', mods:12, icon:'monitor', desc:'Manejo del software de gestión de video Hikvision iVMS-4200.', progress:40, grade:null },
{ code:'EG105', title:'Ley 21.659', level:1, dur:'3h', mods:5, icon:'scales', desc:'Marco legal que regula los servicios de seguridad privada en Chile.', progress:0, grade:null },
{ code:'EG106', title:'Comunicación con Fuerzas de Orden', level:1, dur:'3h', mods:6, icon:'radio', desc:'Protocolos de coordinación con Carabineros y PDI.', progress:0, grade:null },
{ code:'EG108', title:'Soporte TI Básico', level:1, dur:'4h', mods:8, icon:'wrench', desc:'Diagnóstico y resolución de problemas técnicos básicos en central.', progress:0, grade:null },
{ code:'EG107', title:'Gestión Emocional', level:2, dur:'3h', mods:6, icon:'brain', desc:'Manejo del estrés y bienestar en turnos de alta vigilancia.', progress:0, grade:null },
{ code:'EG201', title:'Análisis y Detección', level:2, dur:'5h', mods:10, icon:'search', desc:'Técnicas avanzadas de detección de comportamientos anómalos.', progress:0, grade:null },
{ code:'EG202', title:'Uso Avanzado de Cámaras', level:2, dur:'6h', mods:12, icon:'camera2', desc:'PTZ, térmicas, panorámicas y configuración avanzada de cámaras.', progress:0, grade:null },
{ code:'EG203', title:'Protocolos por Tipo de Cliente', level:2, dur:'4h', mods:8, icon:'building', desc:'Procedimientos diferenciados por sector y tipo de instalación.', progress:0, grade:null },
{ code:'EG204', title:'Documentación y Bitácora', level:2, dur:'3h', mods:6, icon:'clipboard', desc:'Registro correcto de eventos, incidentes y novedades de turno.', progress:0, grade:null },
{ code:'EG403', title:'Atención al Cliente', level:2, dur:'3h', mods:5, icon:'headset', desc:'Comunicación efectiva con clientes y manejo de situaciones críticas.', progress:0, grade:null },
{ code:'EG301', title:'Análisis de Patrones', level:3, dur:'6h', mods:10, icon:'network', desc:'Reconocimiento de patrones de comportamiento y predicción de incidentes.', progress:0, grade:null },
{ code:'EG302', title:'Ciberseguridad', level:3, dur:'5h', mods:9, icon:'lock', desc:'Protección de redes, dispositivos IoT y cámaras IP en instalaciones.', progress:0, grade:null },
{ code:'EG303', title:'Iluminación Aplicada', level:3, dur:'4h', mods:7, icon:'bulb', desc:'Principios de iluminación para videovigilancia efectiva.', progress:0, grade:null },
{ code:'EG308', title:'Integración de Sistemas', level:3, dur:'6h', mods:11, icon:'circuit', desc:'Control de acceso, alarmas e integración con sistemas VMS.', progress:0, grade:null },
{ code:'EG309', title:'IA Aplicada a CCTV', level:3, dur:'7h', mods:12, icon:'ai', desc:'Analytics de video, reconocimiento facial y detección inteligente.', progress:0, grade:null },
{ code:'EG304', title:'Informes Periciales', level:4, dur:'5h', mods:8, icon:'report', desc:'Elaboración de informes técnicos para uso judicial y pericial.', progress:0, grade:null },
{ code:'EG401', title:'Gestión de Equipo y KPIs', level:4, dur:'6h', mods:10, icon:'team', desc:'Liderazgo de equipos, métricas de desempeño y procesos de evaluación.', progress:0, grade:null },
{ code:'EG402', title:'Diseño de Proyectos', level:4, dur:'7h', mods:12, icon:'blueprint', desc:'Planificación y diseño de sistemas de seguridad electrónica.', progress:0, grade:null },
{ code:'EG405', title:'Ética Profesional', level:4, dur:'3h', mods:5, icon:'ethics', desc:'Código de conducta, privacidad y responsabilidad en televigilancia.', progress:0, grade:null },
];
// ─── Logo ─────────────────────────────────────────────────────────────────────
function Logo({ collapsed = false, dark = true }) {
const txt = dark ? '#ffffff' : '#0C4A36';
const sub = dark ? 'rgba(255,255,255,0.55)' : '#4A6B5E';
return (
);
}
// ─── Nav Icons ────────────────────────────────────────────────────────────────
const NavIcon = ({ name }) => {
const icons = {
dashboard: <>,
courses: <>,
compliance: <>,
grades: <>,
certificates: <>,
users: <>,
reports: <>,
settings: <>,
notifications: <>,
};
return (
);
};
// ─── Sidebar ──────────────────────────────────────────────────────────────────
const NAV = {
operator: [['dashboard','Dashboard'],['courses','Mis Cursos'],['grades','Calificaciones'],['certificates','Certificados'],['notifications','Notificaciones']],
supervisor: [['dashboard','Dashboard'],['compliance','Cumplimiento'],['grades','Calificaciones'],['reports','Reportes'],['notifications','Notificaciones']],
admin: [['dashboard','Dashboard'],['users','Usuarios'],['courses','Catálogo'],['grades','Calificaciones'],['reports','Reportes'],['settings','Configuración']],
};
const ROLE_LABEL = { operator:'Operador', supervisor:'Supervisor', admin:'Administrador' };
function Sidebar({
role,
currentView,
onNavigate,
onLogout,
style = 'dark',
currentUser = null,
isMobile = false,
mobileOpen = false,
onCloseMobileNav = () => {},
}) {
const isDark = style === 'dark';
const bg = isDark ? BRAND.green.darker : '#FFFFFF';
const activeBg = isDark ? '#136B4D' : '#E8F5F0';
const activeColor = isDark ? '#ffffff' : BRAND.green.darker;
const inactiveColor = isDark ? 'rgba(255,255,255,0.55)' : BRAND.text.muted;
const hoverBg = isDark ? 'rgba(255,255,255,0.06)' : '#F5F7F5';
const [hovered, setHovered] = useState(null);
const userName = currentUser?.name || 'Usuario';
const userInitials = currentUser?.avatarInitials || userName.split(' ').map((part) => part[0]).join('').slice(0, 2).toUpperCase();
const panel = (
{userInitials}
{userName}
{ROLE_LABEL[role]}
);
if (!isMobile) {
return {panel}
;
}
return (
);
}
// ????????? TopBar ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
const VIEW_TITLE = { dashboard:'Dashboard', courses:'Cat?logo de Cursos', grades:'Calificaciones',
certificates:'Mis Certificados', notifications:'Notificaciones', compliance:'Cumplimiento del Equipo',
users:'Gesti?n de Usuarios', reports:'Reportes', settings:'Configuraci?n', 'course-detail':'Detalle del Curso',
badges:'Logros e Insignias' };
function TopBar({ role, view, onNavigate, isMobile = false, onToggleNav = () => {} }) {
return (
{isMobile && (
)}
{VIEW_TITLE[view] || view}
setHovered(true)}
onMouseLeave={() => setHovered(false)}
style={{ cursor:'pointer', borderRadius:10, overflow:'hidden',
boxShadow: hovered ? '0 8px 24px rgba(0,0,0,0.15)' : '0 2px 8px rgba(0,0,0,0.08)',
transform: hovered ? 'translateY(-2px)' : 'none', transition:'all 0.2s', ...style }}>
);
}
// ─── DonutChart ───────────────────────────────────────────────────────────────
function DonutChart({ value = 0, color, size = 96, label, sublabel }) {
const r = 36, cx = size/2, cy = size/2;
const circ = 2 * Math.PI * r;
const dash = (value / 100) * circ;
return (
{label &&
{label}
}
);
}
// ─── Progress Bar ─────────────────────────────────────────────────────────────
function ProgressBar({ value, color, height = 8 }) {
return (
);
}
// ─── Card ─────────────────────────────────────────────────────────────────────
function Card({ children, style = {}, onClick }) {
return (
{children}
);
}
// ─── Level Badge ──────────────────────────────────────────────────────────────
function LevelBadge({ level, unlocked = false, size = 'md' }) {
const lv = LEVEL[level];
const sz = size === 'lg' ? 72 : 52;
const fontSize = size === 'lg' ? 20 : 15;
const alpha = unlocked ? '1' : '0.3';
return (
);
}
// ─── Achievement Badge ────────────────────────────────────────────────────────
function AchievementBadge({ type, earned = false }) {
const badges = {
'nv1': { label:'Nivel 1 Completado', color: BRAND.green.main, icon:'graduation', sub:'7 cursos' },
'nv2': { label:'Nivel 2 Completado', color: BRAND.amber.main, icon:'star', sub:'6 cursos' },
'nv3': { label:'Nivel 3 Completado', color: BRAND.blue.main, icon:'microscope', sub:'5 cursos' },
'nv4': { label:'Nivel 4 Completado', color: BRAND.red.main, icon:'trophy', sub:'4 cursos' },
'week1': { label:'Primera Semana', color: '#8B5CF6', icon:'rocket', sub:'7 días activo' },
'streak14':{ label:'Racha de 14 días', color: '#F59E0B', icon:'fire', sub:'14 días seguidos' },
'certs5': { label:'5 Certificados', color: '#0D9488', icon:'scroll', sub:'5 logros' },
'top': { label:'Mejor del Mes', color: '#DC2626', icon:'crown', sub:'Top operador' },
};
const b = badges[type] || badges['nv1'];
return (
);
}
// ─── Icon System ──────────────────────────────────────────────────────────────
function Icon({ name, size = 16, style = {}, color }) {
const s = { color, ...style };
const p = {
check: ,
'check-circle':<>,
play: <>,
clock: <>,
star: ,
'star-outline':,
user: <>,
users: <>,
book: <>,
award: <>,
'bar-chart': <>,
'trending-up':<>,
alert: <>,
fire: ,
document: <>,
download: <>,
info: <>,
graduation: <>,
rocket: <>,
crown: <>,
trophy: <>,
microscope: <>,
scroll: <>,
share: <>,
plus: <>,
calendar: <>,
pdf: <>PDF,
eye: <>,
'chart-pie': <>,
};
return (
);
}
// ─── Stat Card ────────────────────────────────────────────────────────────────
function StatCard({ label, value, sub, color, icon }) {
return (
{label}
{value}
{sub &&
{sub}
}
{color && icon && (
)}
);
}
Object.assign(window, { BRAND, LEVEL, COURSES, Logo, NavIcon, Icon, Sidebar, TopBar, CourseThumbnail, CourseIconSVG, DonutChart, ProgressBar, Card, LevelBadge, AchievementBadge, StatCard, useViewportMatch });