feat: pre-existing local changes — fischerei, verband, modules, members, packages

Commits all remaining uncommitted local work: - apps/web: fischerei, verband, modules, members-cms, documents, newsletter, meetings, site-builder, courses, bookings, events, finance pages and components - apps/web: marketing page updates, layout, paths config, next.config.mjs, styles/makerkit.css - apps/web/i18n: documents, fischerei, marketing, verband (de+en) - packages/features: finance, fischerei, member-management, module-builder, newsletter, sitzungsprotokolle, verbandsverwaltung server APIs and components - packages/ui: button.tsx updates - pnpm-lock.yaml
2026-04-02 01:19:54 +02:00
parent a1719671df
commit b26e5aaafa
153 changed files with 2329 additions and 1227 deletions
--- a/apps/web/app/[locale]/home/[account]/courses/[courseId]/attendance/attendance-grid.tsx
+++ b/apps/web/app/[locale]/home/[account]/courses/[courseId]/attendance/attendance-grid.tsx
@@ -69,12 +69,16 @@ export function AttendanceGrid({
          Keine Teilnehmer in diesem Kurs
        </p>
      ) : (
-        <div className="rounded-md border">
-          <table className="w-full text-sm">
+        <div className="overflow-x-auto rounded-md border">
+          <table className="w-full min-w-[640px] text-sm">
            <thead>
              <tr className="bg-muted/50 border-b">
-                <th className="p-3 text-left font-medium">Teilnehmer</th>
-                <th className="p-3 text-center font-medium">Anwesend</th>
+                <th scope="col" className="p-3 text-left font-medium">
+                  Teilnehmer
+                </th>
+                <th scope="col" className="p-3 text-center font-medium">
+                  Anwesend
+                </th>
              </tr>
            </thead>
            <tbody>
--- a/apps/web/app/[locale]/home/[account]/courses/[courseId]/attendance/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/courses/[courseId]/attendance/page.tsx
@@ -1,4 +1,5 @@
 import { ClipboardCheck, Calendar } from 'lucide-react';
+import { getTranslations } from 'next-intl/server';

 import { createCourseManagementApi } from '@kit/course-management/api';
 import { formatDate } from '@kit/shared/dates';
@@ -25,6 +26,7 @@ export default async function AttendancePage({
  const search = await searchParams;
  const client = getSupabaseServerClient();
  const api = createCourseManagementApi(client);
+  const t = await getTranslations('courses');

  const [course, sessions, participants] = await Promise.all([
    api.getCourse(courseId),
@@ -58,10 +60,9 @@ export default async function AttendancePage({
  }));

  return (
-    <CmsPageShell account={account} title="Anwesenheit">
+    <CmsPageShell account={account} title={t('attendance.title')}>
      <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>
@@ -70,14 +71,14 @@ export default async function AttendancePage({
        {sessions.length === 0 ? (
          <EmptyState
            icon={<Calendar className="h-8 w-8" />}
-            title="Keine Termine vorhanden"
-            description="Erstellen Sie zuerst Termine für diesen Kurs."
+            title={t('attendance.noSessions')}
+            description={t('attendance.noSessionsDescription')}
          />
        ) : (
          <>
            <Card>
              <CardHeader>
-                <CardTitle>Termin auswählen</CardTitle>
+                <CardTitle>{t('attendance.selectSession')}</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex flex-wrap gap-2">
@@ -107,7 +108,7 @@ export default async function AttendancePage({
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <ClipboardCheck className="h-5 w-5" />
-                  Anwesenheitsliste
+                  {t('attendance.attendanceList')}
                </CardTitle>
              </CardHeader>
              <CardContent>
@@ -119,7 +120,7 @@ export default async function AttendancePage({
                  />
                ) : (
                  <p className="text-muted-foreground py-6 text-center text-sm">
-                    Bitte wählen Sie einen Termin aus
+                    {t('attendance.selectSessionPrompt')}
                  </p>
                )}
              </CardContent>
--- a/apps/web/app/[locale]/home/[account]/courses/[courseId]/create-session-dialog.tsx
+++ b/apps/web/app/[locale]/home/[account]/courses/[courseId]/create-session-dialog.tsx
@@ -39,12 +39,14 @@ export function CreateSessionDialog({ courseId }: Props) {

  return (
    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button variant="outline" size="sm">
-          <Plus className="mr-2 h-4 w-4" />
-          Neuer Termin
-        </Button>
-      </DialogTrigger>
+      <DialogTrigger
+        render={
+          <Button variant="outline" size="sm">
+            <Plus className="mr-2 h-4 w-4" aria-hidden="true" />
+            Neuer Termin
+          </Button>
+        }
+      />
      <DialogContent>
        <form
          onSubmit={(e) => {
--- a/apps/web/app/[locale]/home/[account]/courses/[courseId]/delete-course-button.tsx
+++ b/apps/web/app/[locale]/home/[account]/courses/[courseId]/delete-course-button.tsx
@@ -35,17 +35,19 @@ export function DeleteCourseButton({ courseId, accountSlug }: Props) {

  return (
    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button
-          variant="destructive"
-          size="sm"
-          disabled={isPending}
-          data-test="course-cancel-btn"
-        >
-          <Trash2 className="mr-2 h-4 w-4" />
-          Kurs absagen
-        </Button>
-      </AlertDialogTrigger>
+      <AlertDialogTrigger
+        render={
+          <Button
+            variant="destructive"
+            size="sm"
+            disabled={isPending}
+            data-test="course-cancel-btn"
+          >
+            <Trash2 className="mr-2 h-4 w-4" aria-hidden="true" />
+            Kurs absagen
+          </Button>
+        }
+      />
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Kurs absagen?</AlertDialogTitle>
--- a/apps/web/app/[locale]/home/[account]/courses/[courseId]/edit/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/courses/[courseId]/edit/page.tsx
@@ -1,6 +1,7 @@
 import { createCourseManagementApi } from '@kit/course-management/api';
 import { CreateCourseForm } from '@kit/course-management/components';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import { getTranslations } from 'next-intl/server';

 import { AccountNotFound } from '~/components/account-not-found';
 import { CmsPageShell } from '~/components/cms-page-shell';
@@ -11,6 +12,7 @@ interface PageProps {

 export default async function EditCoursePage({ params }: PageProps) {
  const { account, courseId } = await params;
+  const t = await getTranslations('courses');
  const client = getSupabaseServerClient();

  const { data: acct } = await client
@@ -28,7 +30,10 @@ export default async function EditCoursePage({ params }: PageProps) {
  const c = course as Record<string, unknown>;

  return (
-    <CmsPageShell account={account} title={`${String(c.name)} — Bearbeiten`}>
+    <CmsPageShell
+      account={account}
+      title={`${String(c.name)} — ${t('pages.editCourseTitle')}`}
+    >
      <CreateCourseForm
        accountId={acct.id}
        account={account}
--- a/apps/web/app/[locale]/home/[account]/courses/[courseId]/participants/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/courses/[courseId]/participants/page.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link';

 import { Plus, Users } from 'lucide-react';
+import { getTranslations } from 'next-intl/server';

 import { createCourseManagementApi } from '@kit/course-management/api';
 import { formatDate } from '@kit/shared/dates';
@@ -27,10 +28,10 @@ const STATUS_VARIANT: Record<
  completed: 'outline',
 };

-const STATUS_LABEL: Record<string, string> = {
-  enrolled: 'Angemeldet',
+const ENROLLMENT_STATUS_LABEL: Record<string, string> = {
+  enrolled: 'Eingeschrieben',
  waitlisted: 'Warteliste',
-  cancelled: 'Abgemeldet',
+  cancelled: 'Storniert',
  completed: 'Abgeschlossen',
 };

@@ -38,6 +39,7 @@ export default async function ParticipantsPage({ params }: PageProps) {
  const { account, courseId } = await params;
  const client = getSupabaseServerClient();
  const api = createCourseManagementApi(client);
+  const t = await getTranslations('courses');

  const [course, participants] = await Promise.all([
    api.getCourse(courseId),
@@ -47,45 +49,54 @@ export default async function ParticipantsPage({ params }: PageProps) {
  if (!course) return <AccountNotFound />;

  return (
-    <CmsPageShell account={account} title="Teilnehmer">
+    <CmsPageShell account={account} title={t('participants.title')}>
      <div className="flex w-full flex-col gap-6">
        <div className="flex items-center justify-between">
          <div>
-            <h1 className="text-2xl font-bold">Teilnehmer</h1>
            <p className="text-muted-foreground">
              {String((course as Record<string, unknown>).name)} —{' '}
-              {participants.length} Teilnehmer
+              {participants.length} {t('participants.title')}
            </p>
          </div>
          <Button data-test="participants-add-btn">
            <Plus className="mr-2 h-4 w-4" />
-            Teilnehmer anmelden
+            {t('participants.add')}
          </Button>
        </div>

        {participants.length === 0 ? (
          <EmptyState
            icon={<Users className="h-8 w-8" />}
-            title="Keine Teilnehmer"
-            description="Melden Sie den ersten Teilnehmer für diesen Kurs an."
-            actionLabel="Teilnehmer anmelden"
+            title={t('participants.none')}
+            description={t('participants.noneDescription')}
+            actionLabel={t('participants.add')}
          />
        ) : (
          <Card>
            <CardHeader>
-              <CardTitle>Alle Teilnehmer ({participants.length})</CardTitle>
+              <CardTitle>
+                {t('participants.allTitle', { count: participants.length })}
+              </CardTitle>
            </CardHeader>
            <CardContent>
-              <div className="rounded-md border">
-                <table className="w-full text-sm">
+              <div className="overflow-x-auto rounded-md border">
+                <table className="w-full min-w-[640px] text-sm">
                  <thead>
                    <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">Telefon</th>
-                      <th className="p-3 text-left font-medium">Status</th>
-                      <th className="p-3 text-left font-medium">
-                        Anmeldedatum
+                      <th scope="col" className="p-3 text-left font-medium">
+                        {t('common.name')}
+                      </th>
+                      <th scope="col" className="p-3 text-left font-medium">
+                        {t('common.email')}
+                      </th>
+                      <th scope="col" className="p-3 text-left font-medium">
+                        {t('common.phone')}
+                      </th>
+                      <th scope="col" className="p-3 text-left font-medium">
+                        {t('common.status')}
+                      </th>
+                      <th scope="col" className="p-3 text-left font-medium">
+                        {t('enrollment.registrationDate')}
                      </th>
                    </tr>
                  </thead>
@@ -107,7 +118,8 @@ export default async function ParticipantsPage({ params }: PageProps) {
                              STATUS_VARIANT[String(p.status)] ?? 'secondary'
                            }
                          >
-                            {STATUS_LABEL[String(p.status)] ?? String(p.status)}
+                            {ENROLLMENT_STATUS_LABEL[String(p.status)] ??
+                              String(p.status)}
                          </Badge>
                        </td>
                        <td className="p-3">
--- a/apps/web/app/[locale]/home/[account]/courses/categories/create-category-dialog.tsx
+++ b/apps/web/app/[locale]/home/[account]/courses/categories/create-category-dialog.tsx
@@ -5,6 +5,7 @@ import { useCallback, useState } from 'react';
 import { useRouter } from 'next/navigation';

 import { Plus } from 'lucide-react';
+import { useTranslations } from 'next-intl';

 import { createCategory } from '@kit/course-management/actions/course-actions';
 import { Button } from '@kit/ui/button';
@@ -26,6 +27,7 @@ interface CreateCategoryDialogProps {
 }

 export function CreateCategoryDialog({ accountId }: CreateCategoryDialogProps) {
+  const t = useTranslations('courses');
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [name, setName] = useState('');
@@ -76,7 +78,7 @@ export function CreateCategoryDialog({ accountId }: CreateCategoryDialogProps) {
                id="cat-name"
                value={name}
                onChange={(e) => setName(e.target.value)}
-                placeholder="z. B. Sprachkurse"
+                placeholder={t('categories.namePlaceholder')}
                required
                minLength={1}
                maxLength={128}
@@ -88,7 +90,7 @@ export function CreateCategoryDialog({ accountId }: CreateCategoryDialogProps) {
                id="cat-description"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
-                placeholder="Kurze Beschreibung"
+                placeholder={t('categories.descriptionPlaceholder')}
              />
            </div>
          </div>
--- a/apps/web/app/[locale]/home/[account]/courses/categories/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/courses/categories/page.tsx
@@ -1,4 +1,5 @@
 import { FolderTree } from 'lucide-react';
+import { getTranslations } from 'next-intl/server';

 import { createCourseManagementApi } from '@kit/course-management/api';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
@@ -17,6 +18,7 @@ interface PageProps {
 export default async function CategoriesPage({ params }: PageProps) {
  const { account } = await params;
  const client = getSupabaseServerClient();
+  const t = await getTranslations('courses');

  const { data: acct } = await client
    .from('accounts')
@@ -30,36 +32,40 @@ export default async function CategoriesPage({ params }: PageProps) {
  const categories = await api.listCategories(acct.id);

  return (
-    <CmsPageShell account={account} title="Kategorien">
+    <CmsPageShell account={account} title={t('pages.categoriesTitle')}>
      <div className="flex w-full flex-col gap-6">
        <div className="flex items-center justify-between">
-          <p className="text-muted-foreground">Kurskategorien verwalten</p>
+          <p className="text-muted-foreground">{t('categories.manage')}</p>
          <CreateCategoryDialog accountId={acct.id} />
        </div>

        {categories.length === 0 ? (
          <EmptyState
            icon={<FolderTree className="h-8 w-8" />}
-            title="Keine Kategorien vorhanden"
-            description="Erstellen Sie Ihre erste Kurskategorie."
-            actionLabel="Neue Kategorie"
+            title={t('categories.noCategories')}
+            description={t('categories.manage')}
+            actionLabel={t('categories.newCategory')}
          />
        ) : (
          <Card>
            <CardHeader>
-              <CardTitle>Alle Kategorien ({categories.length})</CardTitle>
+              <CardTitle>
+                {t('categories.allTitle', { count: categories.length })}
+              </CardTitle>
            </CardHeader>
            <CardContent>
-              <div className="rounded-md border">
-                <table className="w-full text-sm">
+              <div className="overflow-x-auto rounded-md border">
+                <table className="w-full min-w-[640px] text-sm">
                  <thead>
                    <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">
-                        Beschreibung
+                      <th scope="col" className="p-3 text-left font-medium">
+                        {t('common.name')}
                      </th>
-                      <th className="p-3 text-left font-medium">
-                        Übergeordnet
+                      <th scope="col" className="p-3 text-left font-medium">
+                        {t('common.description')}
+                      </th>
+                      <th scope="col" className="p-3 text-left font-medium">
+                        {t('common.parent')}
                      </th>
                    </tr>
                  </thead>
--- a/apps/web/app/[locale]/home/[account]/courses/instructors/create-instructor-dialog.tsx
+++ b/apps/web/app/[locale]/home/[account]/courses/instructors/create-instructor-dialog.tsx
@@ -5,6 +5,7 @@ import { useCallback, useState } from 'react';
 import { useRouter } from 'next/navigation';

 import { Plus } from 'lucide-react';
+import { useTranslations } from 'next-intl';

 import { createInstructor } from '@kit/course-management/actions/course-actions';
 import { Button } from '@kit/ui/button';
@@ -29,6 +30,7 @@ interface CreateInstructorDialogProps {
 export function CreateInstructorDialog({
  accountId,
 }: CreateInstructorDialogProps) {
+  const t = useTranslations('courses');
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [firstName, setFirstName] = useState('');
@@ -101,7 +103,7 @@ export function CreateInstructorDialog({
                  id="inst-first-name"
                  value={firstName}
                  onChange={(e) => setFirstName(e.target.value)}
-                  placeholder="Vorname"
+                  placeholder={t('instructors.firstNamePlaceholder')}
                  required
                  minLength={1}
                  maxLength={128}
@@ -113,7 +115,7 @@ export function CreateInstructorDialog({
                  id="inst-last-name"
                  value={lastName}
                  onChange={(e) => setLastName(e.target.value)}
-                  placeholder="Nachname"
+                  placeholder={t('instructors.lastNamePlaceholder')}
                  required
                  minLength={1}
                  maxLength={128}
@@ -150,7 +152,7 @@ export function CreateInstructorDialog({
                id="inst-qualifications"
                value={qualifications}
                onChange={(e) => setQualifications(e.target.value)}
-                placeholder="z. B. Zertifizierter Trainer, Erste-Hilfe-Ausbilder"
+                placeholder={t('instructors.qualificationsPlaceholder')}
                rows={3}
              />
            </div>
--- a/apps/web/app/[locale]/home/[account]/courses/instructors/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/courses/instructors/page.tsx
@@ -1,6 +1,8 @@
 import { GraduationCap } from 'lucide-react';
+import { getTranslations } from 'next-intl/server';

 import { createCourseManagementApi } from '@kit/course-management/api';
+import { formatCurrencyAmount } from '@kit/shared/dates';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';

@@ -17,6 +19,7 @@ interface PageProps {
 export default async function InstructorsPage({ params }: PageProps) {
  const { account } = await params;
  const client = getSupabaseServerClient();
+  const t = await getTranslations('courses');

  const { data: acct } = await client
    .from('accounts')
@@ -30,38 +33,46 @@ export default async function InstructorsPage({ params }: PageProps) {
  const instructors = await api.listInstructors(acct.id);

  return (
-    <CmsPageShell account={account} title="Dozenten">
+    <CmsPageShell account={account} title={t('pages.instructorsTitle')}>
      <div className="flex w-full flex-col gap-6">
        <div className="flex items-center justify-between">
-          <p className="text-muted-foreground">Dozentenpool verwalten</p>
+          <p className="text-muted-foreground">{t('instructors.manage')}</p>
          <CreateInstructorDialog accountId={acct.id} />
        </div>

        {instructors.length === 0 ? (
          <EmptyState
            icon={<GraduationCap className="h-8 w-8" />}
-            title="Keine Dozenten vorhanden"
-            description="Fügen Sie Ihren ersten Dozenten hinzu."
-            actionLabel="Neuer Dozent"
+            title={t('instructors.noInstructors')}
+            description={t('instructors.manage')}
+            actionLabel={t('instructors.newInstructor')}
          />
        ) : (
          <Card>
            <CardHeader>
-              <CardTitle>Alle Dozenten ({instructors.length})</CardTitle>
+              <CardTitle>
+                {t('instructors.allTitle', { count: instructors.length })}
+              </CardTitle>
            </CardHeader>
            <CardContent>
-              <div className="rounded-md border">
-                <table className="w-full text-sm">
+              <div className="overflow-x-auto rounded-md border">
+                <table className="w-full min-w-[640px] text-sm">
                  <thead>
                    <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">Telefon</th>
-                      <th className="p-3 text-left font-medium">
-                        Qualifikation
+                      <th scope="col" className="p-3 text-left font-medium">
+                        {t('common.name')}
                      </th>
-                      <th className="p-3 text-right font-medium">
-                        Stundensatz
+                      <th scope="col" className="p-3 text-left font-medium">
+                        {t('common.email')}
+                      </th>
+                      <th scope="col" className="p-3 text-left font-medium">
+                        {t('common.phone')}
+                      </th>
+                      <th scope="col" className="p-3 text-left font-medium">
+                        {t('instructors.qualification')}
+                      </th>
+                      <th scope="col" className="p-3 text-right font-medium">
+                        {t('instructors.hourlyRate')}
                      </th>
                    </tr>
                  </thead>
@@ -82,7 +93,7 @@ export default async function InstructorsPage({ params }: PageProps) {
                        </td>
                        <td className="p-3 text-right">
                          {inst.hourly_rate != null
-                            ? `${Number(inst.hourly_rate).toFixed(2)} €`
+                            ? formatCurrencyAmount(inst.hourly_rate as number)
                            : '—'}
                        </td>
                      </tr>
--- a/apps/web/app/[locale]/home/[account]/courses/locations/create-location-dialog.tsx
+++ b/apps/web/app/[locale]/home/[account]/courses/locations/create-location-dialog.tsx
@@ -5,6 +5,7 @@ import { useCallback, useState } from 'react';
 import { useRouter } from 'next/navigation';

 import { Plus } from 'lucide-react';
+import { useTranslations } from 'next-intl';

 import { createLocation } from '@kit/course-management/actions/course-actions';
 import { Button } from '@kit/ui/button';
@@ -26,6 +27,7 @@ interface CreateLocationDialogProps {
 }

 export function CreateLocationDialog({ accountId }: CreateLocationDialogProps) {
+  const t = useTranslations('courses');
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [name, setName] = useState('');
@@ -82,7 +84,7 @@ export function CreateLocationDialog({ accountId }: CreateLocationDialogProps) {
                id="loc-name"
                value={name}
                onChange={(e) => setName(e.target.value)}
-                placeholder="z. B. Vereinsheim"
+                placeholder={t('locations.namePlaceholder')}
                required
                minLength={1}
                maxLength={128}
@@ -94,7 +96,7 @@ export function CreateLocationDialog({ accountId }: CreateLocationDialogProps) {
                id="loc-address"
                value={address}
                onChange={(e) => setAddress(e.target.value)}
-                placeholder="Musterstr. 1, 12345 Musterstadt"
+                placeholder={t('locations.addressPlaceholder')}
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
@@ -104,7 +106,7 @@ export function CreateLocationDialog({ accountId }: CreateLocationDialogProps) {
                  id="loc-room"
                  value={room}
                  onChange={(e) => setRoom(e.target.value)}
-                  placeholder="z. B. Raum 101"
+                  placeholder={t('locations.roomPlaceholder')}
                />
              </div>
              <div className="space-y-2">
--- a/apps/web/app/[locale]/home/[account]/courses/locations/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/courses/locations/page.tsx
@@ -1,4 +1,5 @@
 import { MapPin } from 'lucide-react';
+import { getTranslations } from 'next-intl/server';

 import { createCourseManagementApi } from '@kit/course-management/api';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
@@ -17,6 +18,7 @@ interface PageProps {
 export default async function LocationsPage({ params }: PageProps) {
  const { account } = await params;
  const client = getSupabaseServerClient();
+  const t = await getTranslations('courses');

  const { data: acct } = await client
    .from('accounts')
@@ -30,36 +32,44 @@ export default async function LocationsPage({ params }: PageProps) {
  const locations = await api.listLocations(acct.id);

  return (
-    <CmsPageShell account={account} title="Orte">
+    <CmsPageShell account={account} title={t('pages.locationsTitle')}>
      <div className="flex w-full flex-col gap-6">
        <div className="flex items-center justify-between">
-          <p className="text-muted-foreground">
-            Kurs- und Veranstaltungsorte verwalten
-          </p>
+          <p className="text-muted-foreground">{t('locations.manage')}</p>
          <CreateLocationDialog accountId={acct.id} />
        </div>

        {locations.length === 0 ? (
          <EmptyState
            icon={<MapPin className="h-8 w-8" />}
-            title="Keine Orte vorhanden"
-            description="Fügen Sie Ihren ersten Veranstaltungsort hinzu."
-            actionLabel="Neuer Ort"
+            title={t('locations.noLocations')}
+            description={t('locations.noLocationsDescription')}
+            actionLabel={t('locations.newLocationLabel')}
          />
        ) : (
          <Card>
            <CardHeader>
-              <CardTitle>Alle Orte ({locations.length})</CardTitle>
+              <CardTitle>
+                {t('locations.allTitle', { count: locations.length })}
+              </CardTitle>
            </CardHeader>
            <CardContent>
-              <div className="rounded-md border">
-                <table className="w-full text-sm">
+              <div className="overflow-x-auto rounded-md border">
+                <table className="w-full min-w-[640px] text-sm">
                  <thead>
                    <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">Adresse</th>
-                      <th className="p-3 text-left font-medium">Raum</th>
-                      <th className="p-3 text-right font-medium">Kapazität</th>
+                      <th scope="col" className="p-3 text-left font-medium">
+                        {t('common.name')}
+                      </th>
+                      <th scope="col" className="p-3 text-left font-medium">
+                        {t('common.address')}
+                      </th>
+                      <th scope="col" className="p-3 text-left font-medium">
+                        {t('common.room')}
+                      </th>
+                      <th scope="col" className="p-3 text-right font-medium">
+                        {t('list.capacity')}
+                      </th>
                    </tr>
                  </thead>
                  <tbody>
--- a/apps/web/app/[locale]/home/[account]/courses/new/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/courses/new/page.tsx
@@ -1,3 +1,5 @@
+import { getTranslations } from 'next-intl/server';
+
 import { CreateCourseForm } from '@kit/course-management/components';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';

@@ -11,6 +13,8 @@ interface Props {
 export default async function NewCoursePage({ params }: Props) {
  const { account } = await params;
  const client = getSupabaseServerClient();
+  const t = await getTranslations('courses');
+
  const { data: acct } = await client
    .from('accounts')
    .select('id')
@@ -21,8 +25,8 @@ export default async function NewCoursePage({ params }: Props) {
  return (
    <CmsPageShell
      account={account}
-      title="Neuer Kurs"
-      description="Kurs anlegen"
+      title={t('pages.newCourseTitle')}
+      description={t('pages.newCourseDescription')}
    >
      <CreateCourseForm accountId={acct.id} account={account} />
    </CmsPageShell>
--- a/apps/web/app/[locale]/home/[account]/courses/statistics/page.tsx
+++ b/apps/web/app/[locale]/home/[account]/courses/statistics/page.tsx
@@ -5,6 +5,7 @@ import {
  TrendingUp,
  BarChart3,
 } from 'lucide-react';
+import { getTranslations } from 'next-intl/server';

 import { createCourseManagementApi } from '@kit/course-management/api';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
@@ -22,6 +23,7 @@ interface PageProps {
 export default async function CourseStatisticsPage({ params }: PageProps) {
  const { account } = await params;
  const client = getSupabaseServerClient();
+  const t = await getTranslations('courses');

  const { data: acct } = await client
    .from('accounts')
@@ -34,32 +36,32 @@ export default async function CourseStatisticsPage({ params }: PageProps) {
  const stats = await api.getStatistics(acct.id);

  const statusChartData = [
-    { name: 'Aktiv', value: stats.openCourses },
-    { name: 'Abgeschlossen', value: stats.completedCourses },
-    { name: 'Gesamt', value: stats.totalCourses },
+    { name: t('stats.active'), value: stats.openCourses },
+    { name: t('stats.completed'), value: stats.completedCourses },
+    { name: t('stats.total'), value: stats.totalCourses },
  ];

  return (
-    <CmsPageShell account={account} title="Kurs-Statistiken">
+    <CmsPageShell account={account} title={t('pages.statisticsTitle')}>
      <div className="flex w-full flex-col gap-6">
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <StatsCard
-            title="Kurse gesamt"
+            title={t('stats.totalCourses')}
            value={stats.totalCourses}
            icon={<GraduationCap className="h-5 w-5" />}
          />
          <StatsCard
-            title="Aktive Kurse"
+            title={t('stats.activeCourses')}
            value={stats.openCourses}
            icon={<Calendar className="h-5 w-5" />}
          />
          <StatsCard
-            title="Teilnehmer"
+            title={t('stats.participants')}
            value={stats.totalParticipants}
            icon={<Users className="h-5 w-5" />}
          />
          <StatsCard
-            title="Abgeschlossen"
+            title={t('stats.completed')}
            value={stats.completedCourses}
            icon={<TrendingUp className="h-5 w-5" />}
          />
@@ -70,7 +72,7 @@ export default async function CourseStatisticsPage({ params }: PageProps) {
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <BarChart3 className="h-5 w-5" />
-                Kursauslastung
+                {t('stats.utilization')}
              </CardTitle>
            </CardHeader>
            <CardContent>
@@ -82,7 +84,7 @@ export default async function CourseStatisticsPage({ params }: PageProps) {
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <TrendingUp className="h-5 w-5" />
-                Verteilung
+                {t('stats.distribution')}
              </CardTitle>
            </CardHeader>
            <CardContent>