90 lines
3.2 KiB
TypeScript
90 lines
3.2 KiB
TypeScript
import { Link } from '@tanstack/react-router'
|
|
import { ArrowLeft, Loader2 } from 'lucide-react'
|
|
import { Badge, Button } from '../../components/ui'
|
|
import { useAttendance } from './AttendanceProvider'
|
|
import { StudentRow } from './StudentRow'
|
|
|
|
export function ClassAttendanceView() {
|
|
const {
|
|
sessionInfo,
|
|
studentsPending,
|
|
studentsFailed,
|
|
retryStudents,
|
|
startTime,
|
|
presentCount,
|
|
saveAttendance,
|
|
isSaving,
|
|
} = useAttendance()
|
|
|
|
return (
|
|
<section>
|
|
<Link
|
|
to="/"
|
|
className="mb-3 hidden items-center gap-1 text-sm text-foreground/60 transition-colors hover:text-primary lg:inline-flex"
|
|
>
|
|
<ArrowLeft className="size-4" />
|
|
<span>Volver al inicio</span>
|
|
</Link>
|
|
|
|
{studentsPending ? (
|
|
<div className="flex items-center justify-center py-16">
|
|
<Loader2 className="size-6 animate-spin text-foreground/40" />
|
|
</div>
|
|
) : null}
|
|
|
|
{studentsFailed ? (
|
|
<div className="mt-4 space-y-3 rounded-xl bg-danger-soft px-4 py-3 text-sm text-danger">
|
|
<p>No pudimos cargar la lista de alumnos.</p>
|
|
<Button variant="outline" size="sm" onClick={retryStudents}>
|
|
Reintentar
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
|
|
{sessionInfo ? (
|
|
<>
|
|
<header className="sticky top-16 z-30 -mx-4 border-b border-border bg-background/95 px-4 py-3 backdrop-blur lg:mx-0 lg:rounded-xl lg:border lg:px-4">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<h1 className="truncate text-lg font-bold text-primary">{sessionInfo.groupName}</h1>
|
|
<p className="text-xs text-foreground/60">{startTime ? `Hoy · ${startTime} hs` : 'Clase de hoy'}</p>
|
|
</div>
|
|
<Badge variant="success" className="shrink-0 text-sm">
|
|
{presentCount}/{sessionInfo.students.length} presentes
|
|
</Badge>
|
|
</div>
|
|
</header>
|
|
|
|
{sessionInfo.students.length === 0 ? (
|
|
<div className="mt-6 rounded-xl border border-dashed border-border bg-surface px-4 py-10 text-center">
|
|
<p className="text-sm font-medium text-primary">Este grupo no tiene alumnos</p>
|
|
<p className="mt-1 text-sm text-foreground/60">
|
|
Agregá miembros desde la ficha del grupo para tomar asistencia.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<ul className="mt-4 space-y-3 pb-2">
|
|
{sessionInfo.students.map((student) => (
|
|
<StudentRow key={student.attendeeId} student={student} />
|
|
))}
|
|
</ul>
|
|
)}
|
|
|
|
{sessionInfo.students.length > 0 ? (
|
|
<div className="sticky bottom-20 z-30 mt-6 lg:bottom-6">
|
|
<Button
|
|
variant="primary"
|
|
className="h-12 w-full text-base font-semibold shadow-lg"
|
|
disabled={isSaving}
|
|
onClick={saveAttendance}
|
|
>
|
|
{isSaving ? <Loader2 className="size-4 animate-spin" /> : null}
|
|
Guardar Asistencia
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
</>
|
|
) : null}
|
|
</section>
|
|
)
|
|
} |