Added routes

apps/web/src/features/class-attendance/ClassAttendanceView.tsx

@@ -0,0 +1,90 @@
+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>
+  )
+}