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>
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user