const { useState, useEffect } = React; // ─── Certificate PDF Generator ──────────────────────────────────────────────── function generateCertificatePDF(cert) { const lv = LEVEL[cert.level]; const recipientName = cert.userName || 'Usuario'; const win = window.open('', '_blank', 'width=1200,height=850'); if (!win) return; win.document.write(` Certificado ${cert.id}
eGuardian
Academia
Nivel
${lv.name}
${cert.id}
Soitel · Academia eGuardian
Certificado de Aprobación

${cert.title}

Otorgado a
${recipientName}

Por haber completado satisfactoriamente el curso ${cert.title}, demostrando dominio de los contenidos y aprobando la evaluación con nota ${cert.grade}/100.

Fecha de emisión
${cert.date}
Calificación
${cert.grade} / 100
Código del curso
${cert.code}
Miguel Salgado
Director Academico
Hugo Villa
Gerente General, Soitel
`); win.document.close(); } // ─── Certificates View ──────────────────────────────────────────────────────── function formatCertificateDate(value) { if (!value) return 'Sin fecha'; const date = new Date(value); if (Number.isNaN(date.getTime())) return String(value); return new Intl.DateTimeFormat('es-CL', { day: '2-digit', month: 'short', year: 'numeric', }).format(date); } function CertificatesView({ currentUser = null }) { const isMobile = useViewportMatch(960); const isCompact = useViewportMatch(720); const [selected, setSelected] = useState(null); const [certs, setCerts] = useState([]); useEffect(() => { let cancelled = false; apiCall('/api/certificates') .then((data) => { if (cancelled || !Array.isArray(data)) return; const visibleCertificates = currentUser?.id ? data.filter((certificate) => Number(certificate.userId) === Number(currentUser.id)) : data; const mappedCertificates = visibleCertificates.map((certificate) => ({ id: certificate.code, code: certificate.course?.code || `CURSO-${certificate.courseId}`, title: certificate.course?.title || `Curso ${certificate.courseId}`, level: certificate.course?.level || 1, grade: certificate.score, date: formatCertificateDate(certificate.issuedAt), userName: certificate.user?.name || currentUser?.name || 'Usuario', })); setCerts(mappedCertificates); }) .catch((error) => { console.error('No se pudieron cargar los certificados:', error); if (!cancelled) setCerts([]); }); return () => { cancelled = true; }; }, [currentUser]); if (selected) { const lv = LEVEL[selected.level]; return (
{/* A4 Certificate Preview */}
{/* Left column */}
{/* Dots */} {[...Array(10)].map((_,r) => [...Array(6)].map((_,c) => ( )))}
Nivel
{lv.name}
{selected.id}
{/* Right column */}
{/* Gold top strip */}
Soitel · Academia eGuardian
Certificado de Aprobación

{selected.title}

Otorgado a
{selected.userName}

Por haber completado satisfactoriamente el curso {selected.title}, demostrando dominio de los contenidos y aprobando la evaluación con nota {selected.grade}/100.

Fecha de emisión
{selected.date}
Calificación
{selected.grade} / 100
{/* Signatures */}
{[['Miguel Salgado','Director Academico'],['Hugo Villa','Gerente General, Soitel']].map(([name,role]) => (
{name}
{role}
))}
); } return (

Mis Certificados

Acreditaciones obtenidas en la Academia eGuardian

{certs.length > 0 ? (
{certs.map(c => { const lv = LEVEL[c.level]; return ( setSelected(c)}>
{c.code}

{c.title}

Calificación
{c.grade}/100
Emitido
{c.date}
{c.id} Ver certificado →
); })}
) : (
Aún no tienes certificados

Completa cursos para obtener tus primeras acreditaciones.

 )}
); } // ─── Badges View ────────────────────────────────────────────────────────────── function BadgesView() { const isCompact = useViewportMatch(720); const allBadges = [ { type:'nv1', earned:true }, { type:'nv2', earned:false }, { type:'nv3', earned:false }, { type:'nv4', earned:false }, { type:'week1', earned:true }, { type:'streak14', earned:false }, { type:'certs5', earned:false }, { type:'top', earned:false }, ]; return (

Logros e Insignias

{allBadges.filter(b=>b.earned).length} de {allBadges.length} logros obtenidos

b.earned).length} sub={`de ${allBadges.length} disponibles`} color={BRAND.green.main} icon="award"/>
{allBadges.map(b => )}
); } // ─── Users View ─────────────────────────────────────────────────────────────── function UsersView() { const isCompact = useViewportMatch(720); const [search, setSearch] = useState(''); const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [showUserForm, setShowUserForm] = useState(false); const [editingUser, setEditingUser] = useState(null); const userRole = typeof window !== 'undefined' ? localStorage.getItem('eg_role') : null; const isAdmin = userRole === 'admin'; const loadUsers = () => { setLoading(true); setError(null); apiCall('/api/users') .then(data => { if (data.error) { setError(data.error); setUsers([]); } else { setUsers(data || []); } }) .catch(err => { console.error('Error cargando usuarios:', err); setError('No se pudieron cargar los usuarios'); setUsers([]); }) .finally(() => setLoading(false)); }; useEffect(() => { loadUsers(); }, []); const openCreateForm = () => { setEditingUser(null); setShowUserForm(true); }; const openEditForm = (user) => { setEditingUser(user); setShowUserForm(true); }; const closeUserForm = () => { setShowUserForm(false); setEditingUser(null); }; const handleSaveUser = async (formData) => { setError(null); const payload = { name: formData.name, email: formData.email, role: formData.role, level: formData.level ? Number(formData.level) : null, avatarInitials: formData.avatarInitials || undefined, isActive: formData.isActive, ...(formData.password ? { password: formData.password } : {}), }; const response = editingUser ? await apiCall(`/api/users/${editingUser.id}`, { method: 'PATCH', body: JSON.stringify(payload), }) : await apiCall('/api/users', { method: 'POST', body: JSON.stringify(payload), }); if (response.error) { setError(response.error); throw new Error(response.error); } closeUserForm(); loadUsers(); }; const promptCreateUser = async () => { const name = window.prompt('Nombre del usuario:'); if (!name) return; const email = window.prompt('Email del usuario:'); if (!email) return; const password = window.prompt('Contraseña inicial (mínimo 4 caracteres):'); if (!password) return; const role = (window.prompt('Rol: OPERATOR, SUPERVISOR o ADMIN', 'OPERATOR') || 'OPERATOR').toUpperCase(); const levelInput = window.prompt('Nivel: 1, 2, 3, 4 o dejar vacío', ''); const avatarInitials = window.prompt('Iniciales (opcional):', '') || undefined; const response = await apiCall('/api/users', { method: 'POST', body: JSON.stringify({ name, email, password, role, level: levelInput ? Number(levelInput) : null, avatarInitials, isActive: true, }), }); if (response.error) { setError(response.error); return; } loadUsers(); }; const promptEditUser = async (user) => { const name = window.prompt('Nombre del usuario:', user.name); if (!name) return; const email = window.prompt('Email del usuario:', user.email); if (!email) return; const role = (window.prompt('Rol: OPERATOR, SUPERVISOR o ADMIN', user.role) || user.role).toUpperCase(); const levelInput = window.prompt('Nivel: 1, 2, 3, 4 o dejar vacío', user.level ? String(user.level) : ''); const avatarInitials = window.prompt('Iniciales (opcional):', user.avatarInitials || '') || undefined; const isActive = window.confirm('Aceptar = usuario activo. Cancelar = usuario inactivo.'); const password = window.prompt('Nueva contraseña (dejar vacío para mantener la actual):', '') || undefined; const payload = { name, email, role, level: levelInput ? Number(levelInput) : null, avatarInitials, isActive, ...(password ? { password } : {}), }; const response = await apiCall(`/api/users/${user.id}`, { method: 'PATCH', body: JSON.stringify(payload), }); if (response.error) { setError(response.error); return; } loadUsers(); }; const handleDeleteUser = async (user) => { if (!window.confirm(`¿Eliminar a ${user.name}?`)) return; const response = await apiCall(`/api/users/${user.id}`, { method: 'DELETE', }); if (response.error) { setError(response.error); return; } loadUsers(); }; const roleMap = { OPERATOR: 'Operador', SUPERVISOR: 'Supervisor', ADMIN: 'Administrador' }; const filtered = users.filter(u => !search || u.name.toLowerCase().includes(search.toLowerCase()) || u.email.includes(search)); const operatorCount = users.filter(u => u.role === 'OPERATOR').length; const supervisorCount = users.filter(u => u.role === 'SUPERVISOR').length; return (

Gestión de Usuarios

{users.length} usuarios registrados

{isAdmin && ( )}
u.role==='ADMIN').length} color={BRAND.red.main} icon="alert"/>
{loading ? (
Cargando usuarios...
) : error ? (
Error: {error}
) : users.length === 0 ? (
No hay usuarios registrados
) : ( <>
setSearch(e.target.value)} placeholder="Buscar usuario..." style={{ border:'none', background:'transparent', outline:'none', fontSize:13, fontFamily:'Outfit,sans-serif', width:'100%' }}/>
{['Usuario','Rol','Nivel','Ingreso', ...(isAdmin ? ['Acciones'] : [])].map(h => ( ))} {filtered.map((u) => { const lv = LEVEL[u.level || 1]; const createdDate = u.createdAt ? new Date(u.createdAt).toLocaleDateString('es-CL') : 'N/A'; return ( e.currentTarget.style.background='#FAFBFA'} onMouseLeave={e => e.currentTarget.style.background='transparent'}> {isAdmin && ( )} ); })}
{h}
{u.avatarInitials || u.name.split(' ').map(n=>n[0]).join('').slice(0,2)}
{u.name}
{u.email}
 {roleMap[u.role] || u.role} NV{u.level || 1} {createdDate}
)} {showUserForm && ( )}
); } // ─── Grades View ────────────────────────────────────────────────────────────── function UserFormModal({ user, onClose, onSave }) { const isCompact = useViewportMatch(720); const [formData, setFormData] = useState({ name: user?.name || '', email: user?.email || '', password: '', role: user?.role || 'OPERATOR', level: user?.level ? String(user.level) : '', avatarInitials: user?.avatarInitials || '', isActive: user?.isActive ?? true, }); const [saving, setSaving] = useState(false); const [error, setError] = useState(null); const updateField = (key, value) => setFormData((current) => ({ ...current, [key]: value })); const handleSubmit = async (event) => { event.preventDefault(); setSaving(true); setError(null); try { await onSave(formData); } catch (submitError) { console.error('Error guardando usuario:', submitError); setError('No se pudo guardar el usuario.'); } finally { setSaving(false); } }; return (
{user ? 'Editar usuario' : 'Nuevo usuario'}
{user ? 'Actualiza permisos, acceso y datos del usuario.' : 'Completa todos los datos para crear un nuevo usuario.'}
{error && (
{error}
)}
); } function formatGradeDate(value) { if (!value) return 'Sin fecha'; const date = new Date(value); if (Number.isNaN(date.getTime())) return String(value); return new Intl.DateTimeFormat('es-CL', { month: 'short', year: 'numeric', }).format(date); } function GradesView({ currentUser = null }) { const isCompact = useViewportMatch(720); const [graded, setGraded] = useState([]); useEffect(() => { let cancelled = false; apiCall('/api/enrollments') .then((data) => { if (cancelled || !Array.isArray(data)) return; const filtered = data .filter((enrollment) => { if (currentUser?.id && Number(enrollment.userId) !== Number(currentUser.id)) return false; return enrollment.grade !== null && enrollment.grade !== undefined; }) .map((enrollment) => ({ id: enrollment.id, code: enrollment.course?.code || `CURSO-${enrollment.courseId}`, title: enrollment.course?.title || `Curso ${enrollment.courseId}`, level: enrollment.course?.level || 1, grade: enrollment.grade, status: enrollment.status, date: enrollment.completedAt || enrollment.updatedAt || enrollment.createdAt || null, })); setGraded(filtered); }) .catch((error) => { console.error('No se pudieron cargar las calificaciones:', error); if (!cancelled) setGraded([]); }); return () => { cancelled = true; }; }, [currentUser]); const avg = graded.length ? Math.round(graded.reduce((a, c) => a + c.grade, 0) / graded.length) : 0; return (

Calificaciones

Historial de evaluaciones y notas obtenidas

c.grade)) : '?'} sub="puntuacion maxima" color={BRAND.amber.main} icon="trophy"/>
{graded.length === 0 ? (
Aun no hay calificaciones registradas.
) : (
{['Curso','Nivel','Calificacion','Estado','Fecha'].map(h => ( ))} {graded.map(c => { const lv = LEVEL[c.level]; const passed = c.status === 'COMPLETED' || c.grade >= 70; return ( ); })}
{h}
{c.title}
{c.code}
 NV{c.level} = 90 ? BRAND.green.main : c.grade >= 70 ? BRAND.amber.main : BRAND.red.main }}> {c.grade} /100 {passed ? 'Aprobado' : 'Reprobado'} {formatGradeDate(c.date)}
)}
); } // ─── Simple placeholder views ───────────────────────────────────────────────── function ComplianceView() { const isCompact = useViewportMatch(720); return (

Cumplimiento del Equipo

Reporte detallado de avance y cumplimiento por nivel

{[[1,84,BRAND.green.main],[2,60,BRAND.amber.main],[3,20,BRAND.blue.main],[4,0,BRAND.red.main]].map(([lv,val,color]) => (
Nivel {lv} — {LEVEL[lv].name}
Equipo Turno A
{val}% de cumplimiento
 ))}
); } function ReportsView() { return (

Reportes

Análisis y exportación de datos de la plataforma

{[ { title:'Reporte de Cumplimiento', desc:'Avance por operador y nivel de certificación', icon:'bar-chart', color:BRAND.green.main }, { title:'Reporte de Calificaciones', desc:'Notas y resultados de evaluaciones', icon:'document', color:BRAND.blue.main }, { title:'Reporte de Actividad', desc:'Log de accesos y tiempo en plataforma', icon:'trending-up', color:BRAND.amber.main }, { title:'Certificados Emitidos', desc:'Listado completo de certificaciones otorgadas', icon:'award', color:BRAND.red.main }, { title:'Usuarios en Riesgo', desc:'Operadores con progreso bajo o inactivos', icon:'alert', color:BRAND.amber.dark }, { title:'Exportar Todo', desc:'Exportar datos completos en Excel o PDF', icon:'download', color:BRAND.text.secondary }, ].map(r => ( e.currentTarget.style.borderColor=r.color} onMouseLeave={e=>e.currentTarget.style.borderColor=BRAND.border}>

{r.title}

{r.desc}

 ))}
); } function SettingsView() { const isCompact = useViewportMatch(880); return (

Configuración

Ajustes generales de la plataforma Academia eGuardian

{['General','Usuarios','Notificaciones','Seguridad','Integraciones'].map((s,i) => ( ))}

Configuración general

{[['Nombre de la plataforma','Academia eGuardian'],['Empresa','Soitel SpA'],['País','Chile'],['Zona horaria','America/Santiago (UTC-3)']].map(([label,val]) => (
))}
); } function NotificationsView() { const notifs = [ { title:'Evaluación disponible', desc:'La evaluación de EG103 Sistemas CCTV está lista.', time:'Hace 2 horas', type:'info', read:false }, { title:'¡Curso completado!', desc:'Completaste EG102 Protocolos de Operación con nota 88/100.', time:'Hace 1 día', type:'success', read:false }, { title:'Racha de 7 días', desc:'Llevas 7 días seguidos estudiando. ¡Sigue así!', time:'Hace 1 día', type:'success', read:false }, { title:'Nuevo curso disponible', desc:'EG309 IA Aplicada a CCTV ya está disponible en el catálogo.', time:'Hace 3 días', type:'info', read:true }, { title:'Recordatorio de inactividad', desc:'No has accedido en 2 días. Tienes módulos pendientes en EG104.', time:'Hace 4 días', type:'warning', read:true }, ]; const typeColor = { info:BRAND.blue.main, success:BRAND.green.main, warning:BRAND.amber.main }; const typeIcon = { info: , success: , warning: }; return (

Notificaciones

{notifs.filter(n=>!n.read).length} sin leer

{notifs.map((n,i) => (
{typeIcon[n.type]}
{n.title}
{!n.read &&
}
{n.desc}
{n.time}
))}
); } Object.assign(window, { CertificatesView, BadgesView, UsersView, ComplianceView, GradesView, ReportsView, SettingsView, NotificationsView });