Aún no hay asistencias registradas para este taller.
)}
{/* ── Tab: Por alumno ── */}
{activeTab === 'alumno' && (
{loadingPart ? (
Cargando…
) : sortedParts.length === 0 ? (
Sin integrantes registrados.
) : (
<>
{sortedParts.map((p, i) => {
const pct = p.pct ?? 0;
const isExp = expanded[p.id];
return (
)}
)}
);
}
function AddParticipantScreen({ workshop, onBack, onToast }) {
const [tab, setTab] = React.useState('search'); // 'search' | 'new'
const [q, setQ] = React.useState('');
const [form, setForm] = React.useState({ nombre: '', edad: '', contacto: '', apoderado_nombre: '', apoderado_telefono: '', apoderado_email: '' });
const [available, setAvailable] = React.useState([]);
const [loading, setLoading] = React.useState(false);
const [saving, setSaving] = React.useState(false);
React.useEffect(() => {
if (tab !== 'search') return;
api.getAvailableParticipants(workshop.id).then(setAvailable).catch(() => {});
}, [workshop.id, tab]);
const results = q
? available.filter(p => p.nombre.toLowerCase().includes(q.toLowerCase()))
: available.slice(0, 6);
const handleEnroll = async (p) => {
setSaving(true);
try {
const result = await api.enrollParticipant(workshop.id, p.id);
setAvailable(prev => prev.filter(x => x.id !== p.id));
if (result?.estado === 'pendiente') {
onToast(`Solicitud enviada — ${p.nombre.split(' ')[0]} pendiente de aprobación`);
} else {
onToast(`${p.nombre.split(' ')[0]} agregado al taller`);
}
} catch (e) {
onToast('Error: ' + (e.message || 'intente nuevamente'));
} finally {
setSaving(false);
}
};
const handleCreate = async () => {
if (!form.nombre.trim()) { onToast('Ingrese el nombre'); return; }
setSaving(true);
try {
const newPart = await api.createParticipant(form);
const result = await api.enrollParticipant(workshop.id, newPart.id);
PARTICIPANTS_POOL.push({
id: newPart.id, nombre: newPart.nombre, edad: newPart.edad,
estado: newPart.estado, iniciales: newPart.iniciales, bg: newPart.avatar_bg,
});
if (result?.estado === 'pendiente') {
onToast('Participante registrado — solicitud de inscripción pendiente de aprobación');
} else {
onToast('Participante registrado y agregado al taller');
}
setTimeout(onBack, 500);
} catch (e) {
onToast('Error: ' + (e.message || 'intente nuevamente'));
} finally {
setSaving(false);
}
};
return (
<>
{workshop.nombre}
Agregar participante
{ setTab(v); setQ(''); setForm({ nombre: '', edad: '', contacto: '', apoderado_nombre: '', apoderado_telefono: '', apoderado_email: '' }); }}
options={[
{ value: 'search', label: 'Buscar existente' },
{ value: 'new', label: 'Registrar nuevo' },
]}
/>
{tab === 'search' && (
<>
setQ(e.target.value)} autoFocus/>
{q ? 'Resultados' : 'Socios sin inscribir'}
{results.length === 0 && (
{q ? `Sin coincidencias para "${q}"` : 'No hay socios disponibles'}
)}
{results.map((p, i) => (
{p.nombre}
{p.edad} años · Socio
))}
)}
{tab === 'new' && (
)}
);
}
function ProfileScreen({ onBack, onLogout }) {
const [historialTalleres, setHistorialTalleres] = React.useState({});
const totalAlumnos = WORKSHOPS.reduce((a, w) => a + (w.participantesIds?.length || 0), 0);
React.useEffect(() => {
WORKSHOPS.forEach(w => {
api.getAttendanceHistory(w.id).then(h => {
setHistorialTalleres(prev => ({ ...prev, [w.id]: h }));
}).catch(() => {});
});
}, []);
const calcPct = (wid) => {
const h = historialTalleres[wid];
if (!h || h.length === 0) return null;
const total = h.reduce((a, c) => a + c.total, 0);
const presentes = h.reduce((a, c) => a + c.presentes, 0);
return total > 0 ? Math.round((presentes / total) * 100) : null;
};
const pctGlobal = (() => {
const vals = WORKSHOPS.map(w => calcPct(w.id)).filter(v => v !== null);
return vals.length ? Math.round(vals.reduce((a, v) => a + v, 0) / vals.length) : null;
})();
return (
<>
{/* Avatar + info */}
{PROFESSOR.nombre}
{PROFESSOR.email}
Profesor
Desde {PROFESSOR.desde}
{/* Stats */}
{[
{ l: 'Talleres', v: WORKSHOPS.length },
{ l: 'Alumnos', v: totalAlumnos },
{ l: 'Asist. %', v: pctGlobal !== null ? pctGlobal + '%' : '…' },
].map((s, i) => (
))}
{/* Asistencia por taller */}
{WORKSHOPS.length > 0 && (
<>
Asistencia por taller
{WORKSHOPS.map((w, i) => {
const pct = calcPct(w.id);
const h = historialTalleres[w.id];
return (
{w.emoji}
{w.nombre}
{h ? `${h.length} clases · ${w.participantesIds?.length || 0} alumnos` : 'Cargando…'}
{pct !== null ? (
=80?'var(--present)':pct>=60?'var(--late)':'var(--absent)' }}>{pct}%
=80?'var(--present)':pct>=60?'var(--late)':'var(--absent)', borderRadius: 999 }}/>
) : (
—
)}
);
})}
)}
{/* Cuenta */}
Cuenta
{[
{ icon:
, label: 'Datos personales', meta: PROFESSOR.dni || '—' },
{ icon: , label: 'Notificaciones', meta: 'Activas' },
{ icon: , label: 'Seguridad', meta: '2FA' },
].map((it, i, arr) => (
))}
CLUB POLIDEPORTIVO · v2.4.1
);
}
Object.assign(window, { ProfPaymentsScreen, GlobalHistoryScreen, HistoryScreen, AddParticipantScreen, ProfileScreen });