fix(03): add module settings page, dynamic sidebar categories

- Admin modules page at /admin/modules with toggle switches - Sidebar categories now fetch active modules from API dynamically - Added "Module" link under admin section in sidebar - Added i18n keys for module management (DE + EN) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-19 14:00:50 +02:00
parent 2832d06ad7
commit dad9a779df
4 changed files with 330 additions and 9 deletions
@@ -0,0 +1,188 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { useAuthStore } from '@/lib/stores/auth-store';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
+
+interface Module {
+  id: string;
+  slug: string;
+  name: string;
+  version: string;
+  category: string;
+  description: Record<string, string> | string;
+  icon: string | null;
+  isSystem: boolean;
+}
+
+interface TenantActivation {
+  id: string;
+  moduleId: string;
+  isActive: boolean;
+}
+
+export default function AdminModulesPage() {
+  const t = useTranslations('adminModules');
+  const tCommon = useTranslations('common');
+  const currentUser = useAuthStore((s) => s.user);
+
+  const [modules, setModules] = useState<Module[]>([]);
+  const [activations, setActivations] = useState<Map<string, boolean>>(new Map());
+  const [loading, setLoading] = useState(true);
+  const [toggling, setToggling] = useState<string | null>(null);
+
+  const isAdmin = currentUser?.role === 'ADMIN' || currentUser?.role === 'SUPER_ADMIN';
+
+  const fetchModules = useCallback(async () => {
+    try {
+      const [allRes, activeRes] = await Promise.all([
+        fetch(`${API_URL}/modules`, { credentials: 'include' }),
+        fetch(`${API_URL}/modules/active`, { credentials: 'include' }),
+      ]);
+
+      if (allRes.ok) {
+        const allModules: Module[] = await allRes.json();
+        setModules(allModules);
+      }
+
+      if (activeRes.ok) {
+        const activeModules: (Module & { activations?: TenantActivation[] })[] = await activeRes.json();
+        const map = new Map<string, boolean>();
+        for (const mod of activeModules) {
+          map.set(mod.id, true);
+        }
+        setActivations(map);
+      }
+    } catch {
+      // silently fail
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isAdmin) {
+      fetchModules();
+    } else {
+      setLoading(false);
+    }
+  }, [isAdmin, fetchModules]);
+
+  const toggleModule = async (moduleId: string, currentlyActive: boolean) => {
+    setToggling(moduleId);
+    try {
+      const action = currentlyActive ? 'deactivate' : 'activate';
+      const res = await fetch(`${API_URL}/modules/${moduleId}/${action}`, {
+        method: 'POST',
+        credentials: 'include',
+      });
+
+      if (res.ok) {
+        setActivations((prev) => {
+          const next = new Map(prev);
+          if (currentlyActive) {
+            next.delete(moduleId);
+          } else {
+            next.set(moduleId, true);
+          }
+          return next;
+        });
+      }
+    } catch {
+      // silently fail
+    } finally {
+      setToggling(null);
+    }
+  };
+
+  const getDescription = (desc: Record<string, string> | string): string => {
+    if (typeof desc === 'string') return desc;
+    return desc.de || desc.en || Object.values(desc)[0] || '';
+  };
+
+  if (!isAdmin) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <p className="text-lg text-muted-foreground">{tCommon('accessDenied')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-foreground">{t('title')}</h1>
+        <p className="mt-1 text-sm text-muted-foreground">{t('description')}</p>
+      </div>
+
+      {loading ? (
+        <p className="text-muted-foreground">{tCommon('loading')}</p>
+      ) : modules.length === 0 ? (
+        <p className="text-muted-foreground">{t('noModules')}</p>
+      ) : (
+        <div className="grid gap-4">
+          {modules.map((mod) => {
+            const isActive = activations.has(mod.id);
+            const isToggling = toggling === mod.id;
+
+            return (
+              <div
+                key={mod.id}
+                className="flex items-center justify-between rounded-lg border border-border bg-card p-4 transition-colors"
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <h3 className="font-medium text-foreground">{mod.name}</h3>
+                    <span className="text-xs text-muted-foreground">
+                      v{mod.version}
+                    </span>
+                    {mod.isSystem && (
+                      <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
+                        {t('system')}
+                      </span>
+                    )}
+                    <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
+                      {mod.category}
+                    </span>
+                  </div>
+                  <p className="mt-1 text-sm text-muted-foreground truncate">
+                    {getDescription(mod.description)}
+                  </p>
+                </div>
+
+                <div className="ml-4 flex items-center gap-3">
+                  <span
+                    className={`text-xs font-medium ${
+                      isActive
+                        ? 'text-green-600 dark:text-green-400'
+                        : 'text-muted-foreground'
+                    }`}
+                  >
+                    {isActive ? t('activated') : t('deactivated')}
+                  </span>
+                  <button
+                    onClick={() => toggleModule(mod.id, isActive)}
+                    disabled={isToggling}
+                    className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-wait disabled:opacity-50 ${
+                      isActive ? 'bg-primary' : 'bg-input'
+                    }`}
+                    role="switch"
+                    aria-checked={isActive}
+                  >
+                    <span
+                      className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform duration-200 ${
+                        isActive ? 'translate-x-5' : 'translate-x-0'
+                      }`}
+                    />
+                  </button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}