Add account hierarchy framework with migrations, RLS policies, and UI components

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

@@ -1,14 +1,21 @@
 import Link from 'next/link';
 
-import { GraduationCap, Users, Calendar, Euro, User, Clock } from 'lucide-react';
+import {
+  GraduationCap,
+  Users,
+  Calendar,
+  Euro,
+  User,
+  Clock,
+} from 'lucide-react';
 
+import { createCourseManagementApi } from '@kit/course-management/api';
+import { formatDate } from '@kit/shared/dates';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
 
-import { createCourseManagementApi } from '@kit/course-management/api';
-
 import { CmsPageShell } from '~/components/cms-page-shell';
 
 interface PageProps {
@@ -16,13 +23,22 @@ interface PageProps {
 }
 
 const STATUS_LABEL: Record<string, string> = {
-  planned: 'Geplant', open: 'Offen', running: 'Laufend',
-  completed: 'Abgeschlossen', cancelled: 'Abgesagt',
+  planned: 'Geplant',
+  open: 'Offen',
+  running: 'Laufend',
+  completed: 'Abgeschlossen',
+  cancelled: 'Abgesagt',
 };
 
-const STATUS_VARIANT: Record<string, 'secondary' | 'default' | 'info' | 'outline' | 'destructive'> = {
-  planned: 'secondary', open: 'default', running: 'info',
-  completed: 'outline', cancelled: 'destructive',
+const STATUS_VARIANT: Record<
+  string,
+  'secondary' | 'default' | 'info' | 'outline' | 'destructive'
+> = {
+  planned: 'secondary',
+  open: 'default',
+  running: 'info',
+  completed: 'outline',
+  cancelled: 'destructive',
 };
 
 export default async function CourseDetailPage({ params }: PageProps) {
@@ -47,19 +63,21 @@ export default async function CourseDetailPage({ params }: PageProps) {
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
           <Card>
             <CardContent className="flex items-center gap-3 p-4">
-              <GraduationCap className="h-5 w-5 text-primary" />
+              <GraduationCap className="text-primary h-5 w-5" />
               <div>
-                <p className="text-xs text-muted-foreground">Name</p>
+                <p className="text-muted-foreground text-xs">Name</p>
                 <p className="font-semibold">{String(c.name)}</p>
               </div>
             </CardContent>
           </Card>
           <Card>
             <CardContent className="flex items-center gap-3 p-4">
-              <Clock className="h-5 w-5 text-primary" />
+              <Clock className="text-primary h-5 w-5" />
               <div>
-                <p className="text-xs text-muted-foreground">Status</p>
-                <Badge variant={STATUS_VARIANT[String(c.status)] ?? 'secondary'}>
+                <p className="text-muted-foreground text-xs">Status</p>
+                <Badge
+                  variant={STATUS_VARIANT[String(c.status)] ?? 'secondary'}
+                >
                   {STATUS_LABEL[String(c.status)] ?? String(c.status)}
                 </Badge>
               </div>
@@ -67,31 +85,33 @@ export default async function CourseDetailPage({ params }: PageProps) {
           </Card>
           <Card>
             <CardContent className="flex items-center gap-3 p-4">
-              <User className="h-5 w-5 text-primary" />
+              <User className="text-primary h-5 w-5" />
               <div>
-                <p className="text-xs text-muted-foreground">Dozent</p>
-                <p className="font-semibold">{String(c.instructor_id ?? '—')}</p>
-              </div>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardContent className="flex items-center gap-3 p-4">
-              <Calendar className="h-5 w-5 text-primary" />
-              <div>
-                <p className="text-xs text-muted-foreground">Beginn – Ende</p>
+                <p className="text-muted-foreground text-xs">Dozent</p>
                 <p className="font-semibold">
-                  {c.start_date ? new Date(String(c.start_date)).toLocaleDateString('de-DE') : '—'}
-                  {' – '}
-                  {c.end_date ? new Date(String(c.end_date)).toLocaleDateString('de-DE') : '—'}
+                  {String(c.instructor_id ?? '—')}
                 </p>
               </div>
             </CardContent>
           </Card>
           <Card>
             <CardContent className="flex items-center gap-3 p-4">
-              <Euro className="h-5 w-5 text-primary" />
+              <Calendar className="text-primary h-5 w-5" />
               <div>
-                <p className="text-xs text-muted-foreground">Gebühr</p>
+                <p className="text-muted-foreground text-xs">Beginn – Ende</p>
+                <p className="font-semibold">
+                  {formatDate(c.start_date as string)}
+                  {' – '}
+                  {formatDate(c.end_date as string)}
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="flex items-center gap-3 p-4">
+              <Euro className="text-primary h-5 w-5" />
+              <div>
+                <p className="text-muted-foreground text-xs">Gebühr</p>
                 <p className="font-semibold">
                   {c.fee != null ? `${Number(c.fee).toFixed(2)} €` : '—'}
                 </p>
@@ -100,9 +120,9 @@ export default async function CourseDetailPage({ params }: PageProps) {
           </Card>
           <Card>
             <CardContent className="flex items-center gap-3 p-4">
-              <Users className="h-5 w-5 text-primary" />
+              <Users className="text-primary h-5 w-5" />
               <div>
-                <p className="text-xs text-muted-foreground">Teilnehmer</p>
+                <p className="text-muted-foreground text-xs">Teilnehmer</p>
                 <p className="font-semibold">
                   {participants.length} / {String(c.capacity ?? '∞')}
                 </p>
@@ -116,14 +136,16 @@ export default async function CourseDetailPage({ params }: PageProps) {
           <CardHeader className="flex flex-row items-center justify-between">
             <CardTitle>Teilnehmer</CardTitle>
             <Link href={`/home/${account}/courses/${courseId}/participants`}>
-              <Button variant="outline" size="sm">Alle anzeigen</Button>
+              <Button variant="outline" size="sm">
+                Alle anzeigen
+              </Button>
             </Link>
           </CardHeader>
           <CardContent>
             <div className="rounded-md border">
               <table className="w-full text-sm">
                 <thead>
-                  <tr className="border-b bg-muted/50">
+                  <tr className="bg-muted/50 border-b">
                     <th className="p-3 text-left font-medium">Name</th>
                     <th className="p-3 text-left font-medium">E-Mail</th>
                     <th className="p-3 text-left font-medium">Status</th>
@@ -132,15 +154,36 @@ export default async function CourseDetailPage({ params }: PageProps) {
                 </thead>
                 <tbody>
                   {participants.length === 0 ? (
-                    <tr><td colSpan={4} className="p-6 text-center text-muted-foreground">Keine Teilnehmer</td></tr>
-                  ) : 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">{String(p.email ?? '—')}</td>
-                      <td className="p-3"><Badge variant="outline">{String(p.status ?? '—')}</Badge></td>
-                      <td className="p-3">{p.enrolled_at ? new Date(String(p.enrolled_at)).toLocaleDateString('de-DE') : '—'}</td>
+                    <tr>
+                      <td
+                        colSpan={4}
+                        className="text-muted-foreground p-6 text-center"
+                      >
+                        Keine Teilnehmer
+                      </td>
                     </tr>
-                  ))}
+                  ) : (
+                    participants.map((p: Record<string, unknown>) => (
+                      <tr
+                        key={String(p.id)}
+                        className="hover:bg-muted/30 border-b"
+                      >
+                        <td className="p-3 font-medium">
+                          {String(p.last_name ?? '')},{' '}
+                          {String(p.first_name ?? '')}
+                        </td>
+                        <td className="p-3">{String(p.email ?? '—')}</td>
+                        <td className="p-3">
+                          <Badge variant="outline">
+                            {String(p.status ?? '—')}
+                          </Badge>
+                        </td>
+                        <td className="p-3">
+                          {formatDate(p.enrolled_at as string)}
+                        </td>
+                      </tr>
+                    ))
+                  )}
                 </tbody>
               </table>
             </div>
@@ -152,14 +195,16 @@ export default async function CourseDetailPage({ params }: PageProps) {
           <CardHeader className="flex flex-row items-center justify-between">
             <CardTitle>Termine</CardTitle>
             <Link href={`/home/${account}/courses/${courseId}/attendance`}>
-              <Button variant="outline" size="sm">Anwesenheit</Button>
+              <Button variant="outline" size="sm">
+                Anwesenheit
+              </Button>
             </Link>
           </CardHeader>
           <CardContent>
             <div className="rounded-md border">
               <table className="w-full text-sm">
                 <thead>
-                  <tr className="border-b bg-muted/50">
+                  <tr className="bg-muted/50 border-b">
                     <th className="p-3 text-left font-medium">Datum</th>
                     <th className="p-3 text-left font-medium">Beginn</th>
                     <th className="p-3 text-left font-medium">Ende</th>
@@ -168,15 +213,35 @@ export default async function CourseDetailPage({ params }: PageProps) {
                 </thead>
                 <tbody>
                   {sessions.length === 0 ? (
-                    <tr><td colSpan={4} className="p-6 text-center text-muted-foreground">Keine Termine</td></tr>
-                  ) : sessions.map((s: Record<string, unknown>) => (
-                    <tr key={String(s.id)} className="border-b hover:bg-muted/30">
-                      <td className="p-3">{s.session_date ? new Date(String(s.session_date)).toLocaleDateString('de-DE') : '—'}</td>
-                      <td className="p-3">{String(s.start_time ?? '—')}</td>
-                      <td className="p-3">{String(s.end_time ?? '—')}</td>
-                      <td className="p-3">{s.cancelled ? <Badge variant="destructive">Ja</Badge> : '—'}</td>
+                    <tr>
+                      <td
+                        colSpan={4}
+                        className="text-muted-foreground p-6 text-center"
+                      >
+                        Keine Termine
+                      </td>
                     </tr>
-                  ))}
+                  ) : (
+                    sessions.map((s: Record<string, unknown>) => (
+                      <tr
+                        key={String(s.id)}
+                        className="hover:bg-muted/30 border-b"
+                      >
+                        <td className="p-3">
+                          {formatDate(s.session_date as string)}
+                        </td>
+                        <td className="p-3">{String(s.start_time ?? '—')}</td>
+                        <td className="p-3">{String(s.end_time ?? '—')}</td>
+                        <td className="p-3">
+                          {s.cancelled ? (
+                            <Badge variant="destructive">Ja</Badge>
+                          ) : (
+                            '—'
+                          )}
+                        </td>
+                      </tr>
+                    ))
+                  )}
                 </tbody>
               </table>
             </div>