feat: enhance accessibility and testing with data-test attributes and improve error handling

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

@@ -6,6 +6,7 @@ import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Badge } from '@kit/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
 
+import { AccountNotFound } from '~/components/account-not-found';
 import { CmsPageShell } from '~/components/cms-page-shell';
 import { EmptyState } from '~/components/empty-state';
 
@@ -29,7 +30,7 @@ export default async function AttendancePage({
     api.getParticipants(courseId),
   ]);
 
-  if (!course) return <div>Kurs nicht gefunden</div>;
+  if (!course) return <AccountNotFound />;
 
   const selectedSessionId =
     (search.session as string) ??

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

@@ -16,6 +16,7 @@ import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
 
+import { AccountNotFound } from '~/components/account-not-found';
 import { CmsPageShell } from '~/components/cms-page-shell';
 
 interface PageProps {
@@ -52,12 +53,12 @@ export default async function CourseDetailPage({ params }: PageProps) {
     api.getSessions(courseId),
   ]);
 
-  if (!course) return <div>Kurs nicht gefunden</div>;
+  if (!course) return <AccountNotFound />;
 
-  const c = course as Record<string, unknown>;
+  const courseData = course as Record<string, unknown>;
 
   return (
-    <CmsPageShell account={account} title={String(c.name)}>
+    <CmsPageShell account={account} title={String(courseData.name)}>
       <div className="flex w-full flex-col gap-6">
         {/* Summary Cards */}
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -66,7 +67,7 @@ export default async function CourseDetailPage({ params }: PageProps) {
               <GraduationCap className="text-primary h-5 w-5" />
               <div>
                 <p className="text-muted-foreground text-xs">Name</p>
-                <p className="font-semibold">{String(c.name)}</p>
+                <p className="font-semibold">{String(courseData.name)}</p>
               </div>
             </CardContent>
           </Card>
@@ -76,9 +77,12 @@ export default async function CourseDetailPage({ params }: PageProps) {
               <div>
                 <p className="text-muted-foreground text-xs">Status</p>
                 <Badge
-                  variant={STATUS_VARIANT[String(c.status)] ?? 'secondary'}
+                  variant={
+                    STATUS_VARIANT[String(courseData.status)] ?? 'secondary'
+                  }
                 >
-                  {STATUS_LABEL[String(c.status)] ?? String(c.status)}
+                  {STATUS_LABEL[String(courseData.status)] ??
+                    String(courseData.status)}
                 </Badge>
               </div>
             </CardContent>
@@ -89,7 +93,7 @@ export default async function CourseDetailPage({ params }: PageProps) {
               <div>
                 <p className="text-muted-foreground text-xs">Dozent</p>
                 <p className="font-semibold">
-                  {String(c.instructor_id ?? '—')}
+                  {String(courseData.instructor_id ?? '—')}
                 </p>
               </div>
             </CardContent>
@@ -100,9 +104,9 @@ export default async function CourseDetailPage({ params }: PageProps) {
               <div>
                 <p className="text-muted-foreground text-xs">Beginn – Ende</p>
                 <p className="font-semibold">
-                  {formatDate(c.start_date as string)}
+                  {formatDate(courseData.start_date as string)}
                   {' – '}
-                  {formatDate(c.end_date as string)}
+                  {formatDate(courseData.end_date as string)}
                 </p>
               </div>
             </CardContent>
@@ -113,7 +117,9 @@ export default async function CourseDetailPage({ params }: PageProps) {
               <div>
                 <p className="text-muted-foreground text-xs">Gebühr</p>
                 <p className="font-semibold">
-                  {c.fee != null ? `${Number(c.fee).toFixed(2)} €` : '—'}
+                  {courseData.fee != null
+                    ? `${Number(courseData.fee).toFixed(2)} €`
+                    : '—'}
                 </p>
               </div>
             </CardContent>
@@ -124,7 +130,7 @@ export default async function CourseDetailPage({ params }: PageProps) {
               <div>
                 <p className="text-muted-foreground text-xs">Teilnehmer</p>
                 <p className="font-semibold">
-                  {participants.length} / {String(c.capacity ?? '∞')}
+                  {participants.length} / {String(courseData.capacity ?? '∞')}
                 </p>
               </div>
             </CardContent>

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

@@ -9,6 +9,7 @@ import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
 
+import { AccountNotFound } from '~/components/account-not-found';
 import { CmsPageShell } from '~/components/cms-page-shell';
 import { EmptyState } from '~/components/empty-state';
 
@@ -43,7 +44,7 @@ export default async function ParticipantsPage({ params }: PageProps) {
     api.getParticipants(courseId),
   ]);
 
-  if (!course) return <div>Kurs nicht gefunden</div>;
+  if (!course) return <AccountNotFound />;
 
   return (
     <CmsPageShell account={account} title="Teilnehmer">
@@ -56,7 +57,7 @@ export default async function ParticipantsPage({ params }: PageProps) {
               {participants.length} Teilnehmer
             </p>
           </div>
-          <Button>
+          <Button data-test="participants-add-btn">
             <Plus className="mr-2 h-4 w-4" />
             Teilnehmer anmelden
           </Button>

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

@@ -67,10 +67,14 @@ export default async function CourseCalendarPage({ params }: PageProps) {
   const courseDates = new Set<number>();
 
   for (const course of courses.data) {
-    const c = course as Record<string, unknown>;
-    if (c.status === 'cancelled') continue;
-    const startDate = c.start_date ? new Date(String(c.start_date)) : null;
-    const endDate = c.end_date ? new Date(String(c.end_date)) : null;
+    const courseItem = course as Record<string, unknown>;
+    if (courseItem.status === 'cancelled') continue;
+    const startDate = courseItem.start_date
+      ? new Date(String(courseItem.start_date))
+      : null;
+    const endDate = courseItem.end_date
+      ? new Date(String(courseItem.end_date))
+      : null;
 
     if (!startDate) continue;
 
@@ -112,8 +116,8 @@ export default async function CourseCalendarPage({ params }: PageProps) {
   }
 
   const activeCourses = courses.data.filter(
-    (c: Record<string, unknown>) =>
-      c.status === 'open' || c.status === 'running',
+    (courseItem: Record<string, unknown>) =>
+      courseItem.status === 'open' || courseItem.status === 'running',
   );
 
   return (

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

@@ -33,7 +33,7 @@ export default async function CategoriesPage({ params }: PageProps) {
       <div className="flex w-full flex-col gap-6">
         <div className="flex items-center justify-between">
           <p className="text-muted-foreground">Kurskategorien verwalten</p>
-          <Button>
+          <Button data-test="categories-new-btn">
             <Plus className="mr-2 h-4 w-4" />
             Neue Kategorie
           </Button>

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

@@ -33,7 +33,7 @@ export default async function InstructorsPage({ params }: PageProps) {
       <div className="flex w-full flex-col gap-6">
         <div className="flex items-center justify-between">
           <p className="text-muted-foreground">Dozentenpool verwalten</p>
-          <Button>
+          <Button data-test="instructors-new-btn">
             <Plus className="mr-2 h-4 w-4" />
             Neuer Dozent
           </Button>

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

@@ -35,7 +35,7 @@ export default async function LocationsPage({ params }: PageProps) {
           <p className="text-muted-foreground">
             Kurs- und Veranstaltungsorte verwalten
           </p>
-          <Button>
+          <Button data-test="locations-new-btn">
             <Plus className="mr-2 h-4 w-4" />
             Neuer Ort
           </Button>

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

@@ -64,7 +64,7 @@ export default async function CoursesPage({ params, searchParams }: PageProps) {
           <p className="text-muted-foreground">Kursangebot verwalten</p>
 
           <Link href={`/home/${account}/courses/new`}>
-            <Button>
+            <Button data-test="courses-new-btn">
               <Plus className="mr-2 h-4 w-4" />
               Neuer Kurs
             </Button>