feat: RBAC Phase 5 - Rollenverwaltung im Frontend

Neue /settings/roles-Seite (Aktiv/Historie, Karten-Grid) zum Anlegen,
Bearbeiten, Deaktivieren und Reaktivieren von Rollen mit einer
Rechte-Matrix (nach Bereich gruppierte Checkboxen, Gruppen-Toggle,
Live-Zaehler), passend zum Backend aus Phase 1-3.

- AuthContext liest Rolle/Rechte jetzt ueber GET /auth/me statt aus
  dem JWT (das seit Phase 3 keinen role-Claim mehr traegt); neue
  hasPermission()-Hilfsfunktion ersetzt String-Vergleiche gegen "ADMIN".
- Sidebar zeigt Verwaltungs-Eintraege jetzt einzeln nach Berechtigung
  (statt Alles-oder-Nichts fuer ADMIN), inkl. neuem "Rollen & Rechte"-
  Eintrag.
- Settings-Layout blockt nur noch, wenn gar keine Verwaltungs-
  Berechtigung vorhanden ist, statt stur auf die ADMIN-Rolle zu pruefen.
- Benutzerseite: Rollen-Auswahl laedt jetzt aktive Rollen von
  GET /roles statt einer festen 5-Werte-Liste; sendet roleId statt
  role an POST/PATCH /users.
- Totes jwt.ts (Rolle wurde bislang aus dem Token dekodiert) entfernt.

Live im Browser getestet (Login, Sidebar, Rollen anlegen/bearbeiten/
deaktivieren/reaktivieren, Benutzer-Dialog): dabei einen echten a11y-
Bug gefunden und behoben - Gruppen-Checkboxen fuer mehrwortige
Bereichsnamen ("Wiederkehrende Aufgaben", "Rollen & Rechte") hatten
keinen zugaenglichen Namen, weil die HTML-id ein Leerzeichen enthielt;
jetzt ueber einen Slug erzeugt.

Verifiziert: tsc, lint, build, alle Unit-Tests (14/14) gruen.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

ApiCore-Frontend/src/app/(app)/sidebar.tsx

@@ -18,6 +18,7 @@ import {
   Package,
   Repeat,
   Search,
+  Shield,
   ShoppingBag,
   Upload,
   Users,
@@ -33,6 +34,7 @@ interface NavItem {
   label: string;
   href: string;
   icon: LucideIcon;
+  permission?: string;
 }
 
 interface NavGroup {
@@ -82,12 +84,23 @@ const NAV_GROUPS: NavGroup[] = [
 const ADMIN_GROUP: NavGroup = {
   label: "Verwaltung",
   items: [
-    { label: "Benutzer", href: "/settings/users", icon: Users },
-    { label: "Audit-Log", href: "/settings/audit-log", icon: History },
-    { label: "Webhooks", href: "/settings/webhooks", icon: Webhook },
-    { label: "Automatisierungen", href: "/settings/automation-rules", icon: Zap },
-    { label: "Wiederkehrende Aufgaben", href: "/settings/task-templates", icon: Repeat },
-    { label: "Import", href: "/settings/import", icon: Upload },
+    { label: "Benutzer", href: "/settings/users", icon: Users, permission: "users:read" },
+    { label: "Rollen & Rechte", href: "/settings/roles", icon: Shield, permission: "roles:read" },
+    { label: "Audit-Log", href: "/settings/audit-log", icon: History, permission: "audit:read" },
+    { label: "Webhooks", href: "/settings/webhooks", icon: Webhook, permission: "webhooks:read" },
+    {
+      label: "Automatisierungen",
+      href: "/settings/automation-rules",
+      icon: Zap,
+      permission: "automation:read",
+    },
+    {
+      label: "Wiederkehrende Aufgaben",
+      href: "/settings/task-templates",
+      icon: Repeat,
+      permission: "task-templates:read",
+    },
+    { label: "Import", href: "/settings/import", icon: Upload, permission: "import:execute" },
   ],
 };
 
@@ -118,7 +131,13 @@ function SidebarLink({ item, pathname }: { item: NavItem; pathname: string }) {
 
 export function Sidebar({ user }: { user: AuthUser }) {
   const pathname = usePathname();
-  const groups = user.role === "ADMIN" ? [...NAV_GROUPS, ADMIN_GROUP] : NAV_GROUPS;
+  const visibleAdminItems = ADMIN_GROUP.items.filter(
+    (item) => !item.permission || user.permissions.includes(item.permission),
+  );
+  const groups =
+    visibleAdminItems.length > 0
+      ? [...NAV_GROUPS, { ...ADMIN_GROUP, items: visibleAdminItems }]
+      : NAV_GROUPS;
 
   return (
     <aside className="relative z-10 hidden w-64 shrink-0 flex-col gap-1 overflow-y-auto bg-sidebar px-3 py-5 shadow-[var(--shadow-soft)] sm:flex">