feat: enhance API response handling and add new components for module management

apps/web/app/[locale]/home/[account]/modules/[moduleId]/settings/delete-module-button.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Trash2 } from 'lucide-react';
+
+import { deleteModule } from '@kit/module-builder/actions/module-actions';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@kit/ui/alert-dialog';
+import { Button } from '@kit/ui/button';
+import { useActionWithToast } from '@kit/ui/use-action-with-toast';
+
+interface DeleteModuleButtonProps {
+  moduleId: string;
+  moduleName: string;
+  accountSlug: string;
+}
+
+export function DeleteModuleButton({
+  moduleId,
+  moduleName,
+  accountSlug,
+}: DeleteModuleButtonProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+
+  const { execute, isPending: isDeleting } = useActionWithToast(deleteModule, {
+    successMessage: `Modul "${moduleName}" wurde archiviert`,
+    errorMessage: 'Fehler beim Löschen',
+    onSuccess: () => {
+      startTransition(() => {
+        router.push(`/home/${accountSlug}/modules`);
+      });
+    },
+  });
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive" disabled={isDeleting || isPending}>
+          <Trash2 className="mr-2 h-4 w-4" />
+          Modul archivieren
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Modul archivieren?</AlertDialogTitle>
+          <AlertDialogDescription>
+            Das Modul &quot;{moduleName}&quot; wird archiviert und ist nicht
+            mehr sichtbar. Diese Aktion kann durch einen Administrator
+            rückgängig gemacht werden.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Abbrechen</AlertDialogCancel>
+          <AlertDialogAction onClick={() => execute({ moduleId })}>
+            Archivieren
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

apps/web/app/[locale]/home/[account]/modules/[moduleId]/settings/page.tsx

@@ -10,6 +10,8 @@ import { Label } from '@kit/ui/label';
 
 import { CmsPageShell } from '~/components/cms-page-shell';
 
+import { DeleteModuleButton } from './delete-module-button';
+
 interface ModuleSettingsPageProps {
   params: Promise<{ account: string; moduleId: string }>;
 }
@@ -178,6 +180,25 @@ export default async function ModuleSettingsPage({
             </p>
           </CardContent>
         </Card>
+
+        {/* Danger Zone */}
+        <Card className="border-destructive/50">
+          <CardHeader>
+            <CardTitle className="text-destructive flex items-center gap-2">
+              Gefahrenbereich
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="flex items-center justify-between">
+            <p className="text-muted-foreground text-sm">
+              Das Modul wird archiviert und ist nicht mehr sichtbar.
+            </p>
+            <DeleteModuleButton
+              moduleId={moduleId}
+              moduleName={String(mod.display_name)}
+              accountSlug={account}
+            />
+          </CardContent>
+        </Card>
       </div>
     </CmsPageShell>
   );