Initial state for GitNexus analysis

apps/web/app/[locale]/home/[account]/courses/[courseId]/attendance/page.tsx

@@ -0,0 +1,134 @@
+import { ClipboardCheck, Calendar } from 'lucide-react';
+
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import { Badge } from '@kit/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
+
+import { createCourseManagementApi } from '@kit/course-management/api';
+
+import { CmsPageShell } from '~/components/cms-page-shell';
+import { EmptyState } from '~/components/empty-state';
+
+interface PageProps {
+  params: Promise<{ account: string; courseId: string }>;
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}
+
+export default async function AttendancePage({ params, searchParams }: PageProps) {
+  const { account, courseId } = await params;
+  const search = await searchParams;
+  const client = getSupabaseServerClient();
+  const api = createCourseManagementApi(client);
+
+  const [course, sessions, participants] = await Promise.all([
+    api.getCourse(courseId),
+    api.getSessions(courseId),
+    api.getParticipants(courseId),
+  ]);
+
+  if (!course) return <div>Kurs nicht gefunden</div>;
+
+  const selectedSessionId = (search.session as string) ?? (sessions.length > 0 ? String((sessions[0] as Record<string, unknown>).id) : null);
+
+  const attendance = selectedSessionId
+    ? await api.getAttendance(selectedSessionId)
+    : [];
+
+  const attendanceMap = new Map(
+    attendance.map((a: Record<string, unknown>) => [String(a.participant_id), Boolean(a.present)]),
+  );
+
+  return (
+    <CmsPageShell account={account} title="Anwesenheit">
+      <div className="flex w-full flex-col gap-6">
+        <div>
+          <h1 className="text-2xl font-bold">Anwesenheit</h1>
+          <p className="text-muted-foreground">
+            {String((course as Record<string, unknown>).name)}
+          </p>
+        </div>
+
+        {/* Session Selector */}
+        {sessions.length === 0 ? (
+          <EmptyState
+            icon={<Calendar className="h-8 w-8" />}
+            title="Keine Termine vorhanden"
+            description="Erstellen Sie zuerst Termine für diesen Kurs."
+          />
+        ) : (
+          <>
+            <Card>
+              <CardHeader>
+                <CardTitle>Termin auswählen</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex flex-wrap gap-2">
+                  {sessions.map((s: Record<string, unknown>) => {
+                    const isSelected = String(s.id) === selectedSessionId;
+                    return (
+                      <a
+                        key={String(s.id)}
+                        href={`/home/${account}/courses/${courseId}/attendance?session=${String(s.id)}`}
+                      >
+                        <Badge variant={isSelected ? 'default' : 'outline'} className="cursor-pointer px-3 py-1">
+                          {s.session_date
+                            ? new Date(String(s.session_date)).toLocaleDateString('de-DE')
+                            : String(s.id)}
+                        </Badge>
+                      </a>
+                    );
+                  })}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Attendance Grid */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <ClipboardCheck className="h-5 w-5" />
+                  Anwesenheitsliste
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                {participants.length === 0 ? (
+                  <p className="py-6 text-center text-sm text-muted-foreground">
+                    Keine Teilnehmer in diesem Kurs
+                  </p>
+                ) : (
+                  <div className="rounded-md border">
+                    <table className="w-full text-sm">
+                      <thead>
+                        <tr className="border-b bg-muted/50">
+                          <th className="p-3 text-left font-medium">Teilnehmer</th>
+                          <th className="p-3 text-center font-medium">Anwesend</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {participants.map((p: Record<string, unknown>) => (
+                          <tr key={String(p.id)} className="border-b hover:bg-muted/30">
+                            <td className="p-3 font-medium">
+                              {String(p.last_name ?? '')}, {String(p.first_name ?? '')}
+                            </td>
+                            <td className="p-3 text-center">
+                              <input
+                                type="checkbox"
+                                defaultChecked={attendanceMap.get(String(p.id)) ?? false}
+                                className="h-4 w-4 rounded border-gray-300"
+                                aria-label={`Anwesenheit ${String(p.last_name)}`}
+                              />
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </>
+        )}
+      </div>
+    </CmsPageShell>
+  );
+}