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>
+  );
+}
@@ -1,18 +1,45 @@
 'use client';

-import { useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useSidebarStore } from '@/lib/stores/sidebar-store';
 import { useAuthStore } from '@/lib/stores/auth-store';
 import { SidebarFooter } from '@/components/layout/sidebar-footer';

+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
+
+interface SidebarModule {
+  id: string;
+  slug: string;
+  name: string;
+  category: string;
+}
+
 export function Sidebar() {
  const t = useTranslations('sidebar');
  const tCommon = useTranslations('common');
  const { isCollapsed, isMobileOpen, toggle, setMobileOpen } = useSidebarStore();
-  const [categoriesOpen, setCategoriesOpen] = useState(false);
+  const [categoriesOpen, setCategoriesOpen] = useState(true);
+  const [activeModules, setActiveModules] = useState<SidebarModule[]>([]);
  const user = useAuthStore((s) => s.user);

+  const fetchActiveModules = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_URL}/modules/active`, {
+        credentials: 'include',
+      });
+      if (res.ok) {
+        setActiveModules(await res.json());
+      }
+    } catch {
+      // silently fail
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchActiveModules();
+  }, [fetchActiveModules]);
+
  // Admin section visibility based on role
  const isAdmin = user?.role === 'ADMIN' || user?.role === 'SUPER_ADMIN';
  const isSuperAdmin = user?.role === 'SUPER_ADMIN';
@@ -76,7 +103,7 @@ export function Sidebar() {
          </li>
        </ul>

-        {/* Categories accordion (D-05) */}
+        {/* Categories accordion with active modules (D-05) */}
        {!isCollapsed && (
          <div className="mt-6">
            <button
@@ -100,8 +127,49 @@ export function Sidebar() {
              </svg>
            </button>
            {categoriesOpen && (
-              <div className="mt-1 px-2 py-2 text-sm text-muted-foreground">
-                {t('categories.empty')}
+              <div className="mt-1">
+                {activeModules.length === 0 ? (
+                  <div className="px-2 py-2 text-sm text-muted-foreground">
+                    {t('categories.empty')}
+                  </div>
+                ) : (
+                  <ul className="flex flex-col gap-1">
+                    {(() => {
+                      const categories = new Map<string, SidebarModule[]>();
+                      for (const mod of activeModules) {
+                        const cat = mod.category || 'other';
+                        if (!categories.has(cat)) categories.set(cat, []);
+                        categories.get(cat)!.push(mod);
+                      }
+                      return Array.from(categories.entries()).map(([category, mods]) => (
+                        <li key={category}>
+                          <a
+                            href={`/modules/${category}`}
+                            className="flex items-center gap-2 rounded-md px-2 py-1.5 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+                          >
+                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
+                              <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+                            </svg>
+                            <span className="capitalize">{category.replace(/-/g, ' ')}</span>
+                            <span className="ml-auto text-[10px] text-muted-foreground/60">{mods.length}</span>
+                          </a>
+                          <ul className="ml-5 flex flex-col gap-0.5">
+                            {mods.map((mod) => (
+                              <li key={mod.id}>
+                                <a
+                                  href={`/modules/${category}/${mod.slug}`}
+                                  className="block rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+                                >
+                                  {mod.name}
+                                </a>
+                              </li>
+                            ))}
+                          </ul>
+                        </li>
+                      ));
+                    })()}
+                  </ul>
+                )}
              </div>
            )}
          </div>
@@ -172,6 +240,34 @@ export function Sidebar() {
                </li>
              )}

+              {/* Modules link -- ADMIN and SUPER_ADMIN */}
+              <li>
+                <a
+                  href="/admin/modules"
+                  className="flex items-center gap-3 rounded-md px-2 py-2 text-sm text-sidebar-foreground hover:bg-muted transition-colors"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="shrink-0"
+                  >
+                    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+                    <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
+                    <line x1="12" y1="22.08" x2="12" y2="12" />
+                  </svg>
+                  {!isCollapsed && (
+                    <span className="truncate">{t('modules')}</span>
+                  )}
+                </a>
+              </li>
+
              {/* LDAP link -- ADMIN and SUPER_ADMIN (D-18) */}
              <li>
                <a
@@ -88,7 +88,8 @@
    "admin": "Verwaltung",
    "users": "Benutzer",
    "tenants": "Mandanten",
-    "ldap": "LDAP"
+    "ldap": "LDAP",
+    "modules": "Module"
  },
  "dashboard": {
    "title": "Dashboard",
@@ -126,6 +127,20 @@
      "cannotDeleteActive": "Mandanten mit aktiven Benutzern koennen nicht geloescht werden"
    }
  },
+  "adminModules": {
+    "title": "Modulverwaltung",
+    "description": "Module fuer Ihren Mandanten aktivieren oder deaktivieren",
+    "activate": "Aktivieren",
+    "deactivate": "Deaktivieren",
+    "activated": "Aktiviert",
+    "deactivated": "Deaktiviert",
+    "system": "System",
+    "version": "Version",
+    "noModules": "Keine Module verfuegbar",
+    "activateSuccess": "Modul erfolgreich aktiviert",
+    "deactivateSuccess": "Modul erfolgreich deaktiviert",
+    "error": "Fehler bei der Modulverwaltung"
+  },
  "theme": {
    "light": "Hell",
    "dark": "Dunkel",
@@ -141,7 +156,10 @@
    "noModules": "Keine aktiven Module in dieser Kategorie",
    "notFound": "Modul nicht gefunden",
    "notFoundDescription": "Das angeforderte Modul existiert nicht oder ist nicht aktiviert.",
-    "backToCategory": "Zurueck zur Kategorie"
+    "backToCategory": "Zurueck zur Kategorie",
+    "allModules": "Module",
+    "allModulesDescription": "Verfuegbare Module fuer Ihren Mandanten",
+    "noActiveModules": "Keine Module aktiviert. Bitten Sie Ihren Administrator, Module zu aktivieren."
  },
  "domaincheck": {
    "title": "Domaincheck",
@@ -87,7 +87,9 @@
    },
    "admin": "Administration",
    "users": "Users",
-    "tenants": "Tenants"
+    "tenants": "Tenants",
+    "ldap": "LDAP",
+    "modules": "Modules"
  },
  "dashboard": {
    "title": "Dashboard",
@@ -125,6 +127,20 @@
      "cannotDeleteActive": "Cannot delete tenants with active users"
    }
  },
+  "adminModules": {
+    "title": "Module Management",
+    "description": "Activate or deactivate modules for your tenant",
+    "activate": "Activate",
+    "deactivate": "Deactivate",
+    "activated": "Activated",
+    "deactivated": "Deactivated",
+    "system": "System",
+    "version": "Version",
+    "noModules": "No modules available",
+    "activateSuccess": "Module activated successfully",
+    "deactivateSuccess": "Module deactivated successfully",
+    "error": "Error managing module"
+  },
  "theme": {
    "light": "Light",
    "dark": "Dark",
@@ -140,7 +156,10 @@
    "noModules": "No active modules in this category",
    "notFound": "Module not found",
    "notFoundDescription": "The requested module does not exist or is not activated.",
-    "backToCategory": "Back to category"
+    "backToCategory": "Back to category",
+    "allModules": "Modules",
+    "allModulesDescription": "Available modules for your tenant",
+    "noActiveModules": "No modules activated. Ask your administrator to enable modules."
  },
  "domaincheck": {
    "title": "Domain Check",