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

apps/web/app/[locale]/home/[account]/members-cms/departments/create-department-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 { createDepartment } from '@kit/member-management/actions/member-actions';
 import { Button } from '@kit/ui/button';
@@ -28,14 +29,15 @@ interface CreateDepartmentDialogProps {
 export function CreateDepartmentDialog({
   accountId,
 }: CreateDepartmentDialogProps) {
+  const t = useTranslations('members.departments');
   const router = useRouter();
   const [open, setOpen] = useState(false);
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
 
   const { execute, isPending } = useActionWithToast(createDepartment, {
-    successMessage: 'Abteilung erstellt',
-    errorMessage: 'Fehler beim Erstellen der Abteilung',
+    successMessage: t('created'),
+    errorMessage: t('createError'),
     onSuccess: () => {
       setOpen(false);
       setName('');
@@ -61,42 +63,42 @@ export function CreateDepartmentDialog({
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger render={<Button size="sm" />}>
         <Plus className="mr-1 h-4 w-4" />
-        Neue Abteilung
+        {t('newDepartment')}
       </DialogTrigger>
       <DialogContent>
         <form onSubmit={handleSubmit}>
           <DialogHeader>
-            <DialogTitle>Neue Abteilung</DialogTitle>
+            <DialogTitle>{t('newDepartment')}</DialogTitle>
             <DialogDescription>
-              Erstellen Sie eine neue Abteilung oder Sparte für Ihren Verein.
+              {t('createDialogDescription')}
             </DialogDescription>
           </DialogHeader>
           <div className="mt-4 space-y-4">
             <div className="space-y-2">
-              <Label htmlFor="dept-name">Name</Label>
+              <Label htmlFor="dept-name">{t('name')}</Label>
               <Input
                 id="dept-name"
                 value={name}
                 onChange={(e) => setName(e.target.value)}
-                placeholder="z. B. Jugendabteilung"
+                placeholder={t('namePlaceholder')}
                 required
                 minLength={1}
                 maxLength={128}
               />
             </div>
             <div className="space-y-2">
-              <Label htmlFor="dept-description">Beschreibung (optional)</Label>
+              <Label htmlFor="dept-description">{t('descriptionLabel')}</Label>
               <Input
                 id="dept-description"
                 value={description}
                 onChange={(e) => setDescription(e.target.value)}
-                placeholder="Kurze Beschreibung"
+                placeholder={t('descriptionPlaceholder')}
               />
             </div>
           </div>
           <DialogFooter className="mt-4">
             <Button type="submit" disabled={isPending || !name.trim()}>
-              {isPending ? 'Wird erstellt…' : 'Erstellen'}
+              {isPending ? t('creating') : t('create')}
             </Button>
           </DialogFooter>
         </form>

apps/web/app/[locale]/home/[account]/members-cms/departments/delete-department-button.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Trash2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@kit/ui/alert-dialog';
+import { Button } from '@kit/ui/button';
+
+interface DeleteDepartmentButtonProps {
+  departmentId: string;
+  departmentName: string;
+  accountId: string;
+}
+
+export function DeleteDepartmentButton({
+  departmentId,
+  departmentName,
+  accountId,
+}: DeleteDepartmentButtonProps) {
+  const t = useTranslations('members.departments');
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+
+  const handleDelete = () => {
+    startTransition(async () => {
+      try {
+        const response = await fetch(
+          `/api/members/departments/${departmentId}`,
+          {
+            method: 'DELETE',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ accountId }),
+          },
+        );
+
+        if (response.ok) {
+          router.refresh();
+        }
+      } catch (error) {
+        console.error('Failed to delete department:', error);
+      }
+    });
+  };
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger
+        render={
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-destructive hover:text-destructive"
+            disabled={isPending}
+          >
+            <Trash2 className="h-4 w-4" aria-hidden="true" />
+            <span className="sr-only">{t('deleteAria')}</span>
+          </Button>
+        }
+      />
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{t('deleteTitle')}</AlertDialogTitle>
+          <AlertDialogDescription>
+            {t('deleteConfirm', { name: departmentName })}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleDelete}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            {t('delete')}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

apps/web/app/[locale]/home/[account]/members-cms/departments/page.tsx

@@ -1,4 +1,5 @@
 import { Users } from 'lucide-react';
+import { getTranslations } from 'next-intl/server';
 
 import { createMemberManagementApi } from '@kit/member-management/api';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
@@ -8,6 +9,7 @@ import { CmsPageShell } from '~/components/cms-page-shell';
 import { EmptyState } from '~/components/empty-state';
 
 import { CreateDepartmentDialog } from './create-department-dialog';
+import { DeleteDepartmentButton } from './delete-department-button';
 
 interface Props {
   params: Promise<{ account: string }>;
@@ -16,6 +18,7 @@ interface Props {
 export default async function DepartmentsPage({ params }: Props) {
   const { account } = await params;
   const client = getSupabaseServerClient();
+  const t = await getTranslations('members');
   const { data: acct } = await client
     .from('accounts')
     .select('id')
@@ -29,8 +32,8 @@ export default async function DepartmentsPage({ params }: Props) {
   return (
     <CmsPageShell
       account={account}
-      title="Abteilungen"
-      description="Sparten und Abteilungen verwalten"
+      title={t('departments.title')}
+      description={t('departments.subtitle')}
     >
       <div className="space-y-4">
         <div className="flex items-center justify-end">
@@ -40,16 +43,23 @@ export default async function DepartmentsPage({ params }: Props) {
         {departments.length === 0 ? (
           <EmptyState
             icon={<Users className="h-8 w-8" />}
-            title="Keine Abteilungen vorhanden"
-            description="Erstellen Sie Ihre erste Abteilung."
+            title={t('departments.noDepartments')}
+            description={t('departments.createFirst')}
           />
         ) : (
-          <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>
+                  <th scope="col" className="p-3 text-left font-medium">
+                    {t('departments.name')}
+                  </th>
+                  <th scope="col" className="p-3 text-left font-medium">
+                    {t('departments.description')}
+                  </th>
+                  <th scope="col" className="p-3 text-left font-medium">
+                    {t('departments.actions')}
+                  </th>
                 </tr>
               </thead>
               <tbody>
@@ -62,6 +72,15 @@ export default async function DepartmentsPage({ params }: Props) {
                     <td className="text-muted-foreground p-3">
                       {String(dept.description ?? '—')}
                     </td>
+                    <td className="p-3">
+                      <div className="flex items-center gap-2">
+                        <DeleteDepartmentButton
+                          departmentId={String(dept.id)}
+                          departmentName={String(dept.name)}
+                          accountId={acct.id}
+                        />
+                      </div>
+                    </td>
                   </tr>
                 ))}
               </tbody>