// ===== Asistencia / Reloj de empleados ===== function Asistencia({ attendance, setAttendance, currentUser, users }){ const [now, setNow] = React.useState(Date.now()); React.useEffect(()=>{ const id = setInterval(()=>setNow(Date.now()), 1000); return ()=>clearInterval(id); }, []); // open session = record with no out const openByUser = (uid) => attendance.find(r => r.userId===uid && !r.out); const myOpen = openByUser(currentUser.techId); function clockIn(uid){ if(openByUser(uid)) return; setAttendance(prev => [{ id:"at_"+Date.now(), userId:uid, in:new Date().toISOString(), out:null }, ...prev]); } function clockOut(uid){ setAttendance(prev => prev.map(r => (r.userId===uid && !r.out) ? { ...r, out:new Date().toISOString() } : r)); } const today = new Date(); const isAdmin = currentUser.roleId === "admin"; const staff = users.filter(u=>u.active); const myUser = users.find(u=>u.id===currentUser.techId) || { id:currentUser.techId, name:currentUser.name, initials:currentUser.initials, hue:currentUser.hue||256 }; // today's hours per active session for live ticking const t = new Date(now); const clockStr = t.toLocaleTimeString("es-ES",{ hour:"2-digit", minute:"2-digit", second:"2-digit" }); const dateStr = t.toLocaleDateString("es-ES",{ weekday:"long", day:"numeric", month:"long" }); // week summary per employee const weekStart = new Date(); weekStart.setDate(weekStart.getDate()-6); weekStart.setHours(0,0,0,0); const weekRecords = attendance.filter(r => new Date(r.in) >= weekStart); const presentToday = staff.filter(u => attendance.some(r => r.userId===u.id && sameDay(r.in, today))); // Privacidad: empleados solo ven SUS datos; el admin ve a todo el personal. const visibleStaff = isAdmin ? staff : staff.filter(u => u.id===currentUser.techId); const myTodayHours = attendance.filter(r=>r.userId===currentUser.techId && sameDay(r.in, today)).reduce((s,r)=>s+attHours(r),0); const baseLog = isAdmin ? attendance : attendance.filter(r => r.userId===currentUser.techId); const recentLog = [...baseLog].sort((a,b)=> new Date(b.in)-new Date(a.in)).slice(0, 12); return (
{/* clock hero + my punch */}
{dateStr}
{clockStr}
{isAdmin ? `${presentToday.length} de ${staff.length} empleados presentes hoy` : `Tu tiempo de hoy: ${fmtHours(myTodayHours)}`}
{currentUser.name}
{myOpen ? `Entrada ${fmtClock(myOpen.in)} · ${fmtHours(attHours(myOpen))} trabajadas` : "Sin fichar hoy"}
{myOpen ? ( clockOut(currentUser.techId)}>Marcar salida ) : ( clockIn(currentUser.techId)}>Marcar entrada )}
{/* staff status grid — solo el administrador ve a todo el personal */} {isAdmin && (

Estado del personal

Ficha la entrada/salida de cualquier empleado

{visibleStaff.map(u=>{ const open = openByUser(u.id); const todayRec = attendance.filter(r=>r.userId===u.id && sameDay(r.in, today)); const todayHours = todayRec.reduce((s,r)=>s+attHours(r),0); return (
{u.name}
{open ? `En turno · ${fmtHours(attHours(open))}` : todayHours>0 ? `Hoy: ${fmtHours(todayHours)}` : "Fuera"}
{open ? ( clockOut(u.id)}>Salida {fmtClock(open.in)} → ) : ( clockIn(u.id)}>Marcar entrada )}
); })}
)}
{/* week hours */}

{isAdmin ? "Horas esta semana" : "Mis horas esta semana"}

Últimos 7 días

{visibleStaff.map(u=>{ const h = weekRecords.filter(r=>r.userId===u.id).reduce((s,r)=>s+attHours(r),0); const pct = Math.min(100, (h/40)*100); return (
{u.name.split(" ")[0]} {u.name.split(" ")[1]?.[0]}. {fmtHours(h)}
); })}
{/* recent punches */}

{isAdmin ? "Registro de marcas" : "Mis marcas"}

{recentLog.map((r,i)=>{ const u = users.find(x=>x.id===r.userId) || getTech(r.userId) || { name:"—", initials:"?", hue:256 }; return (
{u.name}
{sameDay(r.in)?"Hoy":fmtDate(r.in)}
{fmtClock(r.in)} {r.out ? {fmtClock(r.out)} : En turno} {fmtHours(attHours(r))}
); })}
); } Object.assign(window, { Asistencia });