feat/fix:added admin pages, fixed sidebar width

This commit is contained in:
Ida Dittrich 2026-01-12 12:21:22 +01:00
parent be3844f33e
commit eaf69f41e9
17 changed files with 319 additions and 13 deletions

View file

@ -7,7 +7,7 @@
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
box-shadow: 0px 2px 6px 0px rgba(194, 194, 194, 0.10);*/ box-shadow: 0px 2px 6px 0px rgba(194, 194, 194, 0.10);*/
width: 240px; width: 250px;
padding: 0; padding: 0;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;

View file

@ -5,6 +5,9 @@
position: relative; position: relative;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 250px;
min-width: 250px;
max-width: 250px;
} }
.menu.minimized { .menu.minimized {
@ -13,7 +16,9 @@
.menu li { .menu li {
display: flex; display: flex;
width: 220px; width: 250px !important;
min-width: 250px;
max-width: 250px;
height: 44px; height: 44px;
padding: 0 3px 0 27px; padding: 0 3px 0 27px;
margin: 0; margin: 0;
@ -22,6 +27,7 @@
list-style: none; list-style: none;
position: relative; position: relative;
gap: 8px; gap: 8px;
box-sizing: border-box;
} }
.menu li:hover, .menu li.active { .menu li:hover, .menu li.active {

View file

@ -5,7 +5,12 @@
border-bottom-right-radius: 25px; border-bottom-right-radius: 25px;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
width: 220px; width: 250px !important;
min-width: 250px !important;
max-width: 250px !important;
box-sizing: border-box;
flex-shrink: 0;
flex-grow: 0;
} }

View file

@ -4,7 +4,8 @@ import { useLanguage } from '../../providers/language/LanguageContext';
import { resolveLanguageText } from './pageInterface'; import { resolveLanguageText } from './pageInterface';
import { usePermissions } from '../../hooks/usePermissions'; import { usePermissions } from '../../hooks/usePermissions';
import { getUserDataCache } from '../../utils/userCache'; import { getUserDataCache } from '../../utils/userCache';
import { FaHome, FaCogs } from 'react-icons/fa'; import { FaHome, FaCogs, FaHatWizard } from 'react-icons/fa';
import { RiFolderSettingsFill } from 'react-icons/ri';
// Configuration for parent groups that don't have a page definition // Configuration for parent groups that don't have a page definition
// Maps parentPath to icon and default order // Maps parentPath to icon and default order
@ -17,7 +18,11 @@ const parentGroupConfig: Record<string, {
defaultOrder: 1 defaultOrder: 1
}, },
'administration': { 'administration': {
icon: FaCogs, icon: RiFolderSettingsFill,
defaultOrder: 2
},
'admin': {
icon: FaHatWizard,
defaultOrder: 3 defaultOrder: 3
} }
}; };

View file

@ -0,0 +1,53 @@
import { GenericPageData } from '../../../pageInterface';
import { FaCog } from 'react-icons/fa';
import { getUserDataCache } from '../../../../../utils/userCache';
export const adminSettingsPageData: GenericPageData = {
id: 'admin-admin-settings',
path: 'admin/admin-settings',
name: 'admin.admin-settings.title',
description: 'admin.admin-settings.description',
// Parent page
parentPath: 'admin',
showInSidebar: true,
// Visual
icon: FaCog,
title: 'admin.admin-settings.title',
subtitle: 'admin.admin-settings.subtitle',
// Header buttons
headerButtons: [],
// Content sections
content: [
{
id: 'admin-settings-description',
type: 'paragraph',
content: 'admin.admin-settings.description_text'
}
],
// Page behavior
persistent: false,
preload: false,
preserveState: true,
moduleEnabled: true,
// Privilege checker: only allow sysadmin role
privilegeChecker: async () => {
const userData = getUserDataCache();
const roleLabels = Array.isArray(userData?.roleLabels) ? userData.roleLabels : [];
// Only allow access if user has "sysadmin" role
return roleLabels.includes('sysadmin');
},
// Lifecycle hooks
onActivate: async () => {
if (import.meta.env.DEV) console.log('Admin Settings page activated');
},
onDeactivate: async () => {
if (import.meta.env.DEV) console.log('Admin Settings page deactivated');
}
};

View file

@ -0,0 +1,53 @@
import { GenericPageData } from '../../../pageInterface';
import { FaFileContract } from 'react-icons/fa';
import { getUserDataCache } from '../../../../../utils/userCache';
export const mandatesPageData: GenericPageData = {
id: 'admin-mandates',
path: 'admin/mandates',
name: 'admin.mandates.title',
description: 'admin.mandates.description',
// Parent page
parentPath: 'admin',
showInSidebar: true,
// Visual
icon: FaFileContract,
title: 'admin.mandates.title',
subtitle: 'admin.mandates.subtitle',
// Header buttons
headerButtons: [],
// Content sections
content: [
{
id: 'mandates-description',
type: 'paragraph',
content: 'admin.mandates.description_text'
}
],
// Page behavior
persistent: false,
preload: false,
preserveState: true,
moduleEnabled: true,
// Privilege checker: only allow sysadmin role
privilegeChecker: async () => {
const userData = getUserDataCache();
const roleLabels = Array.isArray(userData?.roleLabels) ? userData.roleLabels : [];
// Only allow access if user has "sysadmin" role
return roleLabels.includes('sysadmin');
},
// Lifecycle hooks
onActivate: async () => {
if (import.meta.env.DEV) console.log('Mandates page activated');
},
onDeactivate: async () => {
if (import.meta.env.DEV) console.log('Mandates page deactivated');
}
};

View file

@ -0,0 +1,53 @@
import { GenericPageData } from '../../../pageInterface';
import { FaUserShield } from 'react-icons/fa';
import { getUserDataCache } from '../../../../../utils/userCache';
export const rbacRolePageData: GenericPageData = {
id: 'admin-rbac-role',
path: 'admin/rbac-role',
name: 'admin.rbac-role.title',
description: 'admin.rbac-role.description',
// Parent page
parentPath: 'admin',
showInSidebar: true,
// Visual
icon: FaUserShield,
title: 'admin.rbac-role.title',
subtitle: 'admin.rbac-role.subtitle',
// Header buttons
headerButtons: [],
// Content sections
content: [
{
id: 'rbac-role-description',
type: 'paragraph',
content: 'admin.rbac-role.description_text'
}
],
// Page behavior
persistent: false,
preload: false,
preserveState: true,
moduleEnabled: true,
// Privilege checker: only allow sysadmin role
privilegeChecker: async () => {
const userData = getUserDataCache();
const roleLabels = Array.isArray(userData?.roleLabels) ? userData.roleLabels : [];
// Only allow access if user has "sysadmin" role
return roleLabels.includes('sysadmin');
},
// Lifecycle hooks
onActivate: async () => {
if (import.meta.env.DEV) console.log('RBAC Role page activated');
},
onDeactivate: async () => {
if (import.meta.env.DEV) console.log('RBAC Role page deactivated');
}
};

View file

@ -0,0 +1,53 @@
import { GenericPageData } from '../../../pageInterface';
import { FaShieldAlt } from 'react-icons/fa';
import { getUserDataCache } from '../../../../../utils/userCache';
export const rbacRulesPageData: GenericPageData = {
id: 'admin-rbac-rules',
path: 'admin/rbac-rules',
name: 'admin.rbac-rules.title',
description: 'admin.rbac-rules.description',
// Parent page
parentPath: 'admin',
showInSidebar: true,
// Visual
icon: FaShieldAlt,
title: 'admin.rbac-rules.title',
subtitle: 'admin.rbac-rules.subtitle',
// Header buttons
headerButtons: [],
// Content sections
content: [
{
id: 'rbac-rules-description',
type: 'paragraph',
content: 'admin.rbac-rules.description_text'
}
],
// Page behavior
persistent: false,
preload: false,
preserveState: true,
moduleEnabled: true,
// Privilege checker: only allow sysadmin role
privilegeChecker: async () => {
const userData = getUserDataCache();
const roleLabels = Array.isArray(userData?.roleLabels) ? userData.roleLabels : [];
// Only allow access if user has "sysadmin" role
return roleLabels.includes('sysadmin');
},
// Lifecycle hooks
onActivate: async () => {
if (import.meta.env.DEV) console.log('RBAC Rules page activated');
},
onDeactivate: async () => {
if (import.meta.env.DEV) console.log('RBAC Rules page deactivated');
}
};

View file

@ -12,7 +12,6 @@ export const chatbotPageData: GenericPageData = {
// Parent page // Parent page
parentPath: 'start', parentPath: 'start',
showInSidebar: true,
// Visual // Visual
icon: LuMessageSquare, icon: LuMessageSquare,

View file

@ -13,7 +13,6 @@ export const dashboardPageData: GenericPageData = {
// Parent page // Parent page
parentPath: 'start', parentPath: 'start',
showInSidebar: true,
// Visual // Visual
icon: LuTicket, icon: LuTicket,

View file

@ -10,6 +10,10 @@ export { settingsPageData } from './settings';
export { pekPageData } from './pek'; export { pekPageData } from './pek';
export { pekTablesPageData } from './pek-tables'; export { pekTablesPageData } from './pek-tables';
export { chatbotPageData } from './chatbot'; export { chatbotPageData } from './chatbot';
export { mandatesPageData } from './admin/mandates';
export { rbacRulesPageData } from './admin/rbac-rules';
export { rbacRolePageData } from './admin/rbac-role';
export { adminSettingsPageData } from './admin/admin-settings';
// Import all page data // Import all page data
import { dashboardPageData } from './dashboard'; import { dashboardPageData } from './dashboard';
@ -23,6 +27,10 @@ import { settingsPageData } from './settings';
import { pekPageData } from './pek'; import { pekPageData } from './pek';
import { pekTablesPageData } from './pek-tables'; import { pekTablesPageData } from './pek-tables';
import { chatbotPageData } from './chatbot'; import { chatbotPageData } from './chatbot';
import { mandatesPageData } from './admin/mandates';
import { rbacRulesPageData } from './admin/rbac-rules';
import { rbacRolePageData } from './admin/rbac-role';
import { adminSettingsPageData } from './admin/admin-settings';
// Array of all page data // Array of all page data
export const allPageData = [ export const allPageData = [
@ -37,6 +45,10 @@ export const allPageData = [
pekPageData, pekPageData,
pekTablesPageData, pekTablesPageData,
chatbotPageData, chatbotPageData,
mandatesPageData,
rbacRulesPageData,
rbacRolePageData,
adminSettingsPageData,
]; ];

View file

@ -188,7 +188,6 @@ export const pekTablesPageData: GenericPageData = {
// Sidebar // Sidebar
order: 11, order: 11,
showInSidebar: true,
// Privilege checker: deny access for "user" role // Privilege checker: deny access for "user" role
privilegeChecker: async () => { privilegeChecker: async () => {

View file

@ -101,7 +101,6 @@ export const pekPageData: GenericPageData = {
// Sidebar // Sidebar
order: 10, order: 10,
showInSidebar: true,
// Privilege checker: deny access for "user" role // Privilege checker: deny access for "user" role
privilegeChecker: async () => { privilegeChecker: async () => {

View file

@ -2,6 +2,7 @@ import { useCallback } from 'react';
import { GenericPageData } from '../../pageInterface'; import { GenericPageData } from '../../pageInterface';
import { FaUsers, FaPlus } from 'react-icons/fa'; import { FaUsers, FaPlus } from 'react-icons/fa';
import { useOrgUsers, useUserOperations } from '../../../../hooks/useUsers'; import { useOrgUsers, useUserOperations } from '../../../../hooks/useUsers';
import { getUserDataCache } from '../../../../utils/userCache';
// Helper function to convert attribute definitions to column config // Helper function to convert attribute definitions to column config
const attributesToColumns = (attributes: any[]) => { const attributesToColumns = (attributes: any[]) => {
@ -122,13 +123,13 @@ const createUsersHook = () => {
}; };
export const teamMembersPageData: GenericPageData = { export const teamMembersPageData: GenericPageData = {
id: 'administration-team-members', id: 'admin-team-members',
path: 'administration/team-members', path: 'admin/team-members',
name: 'team-members.title', name: 'team-members.title',
description: 'team-members.description', description: 'team-members.description',
// Parent page // Parent page
parentPath: 'administration', parentPath: 'admin',
// Visual // Visual
icon: FaUsers, icon: FaUsers,
@ -273,7 +274,13 @@ export const teamMembersPageData: GenericPageData = {
preserveState: true, // Keep page mounted and prevent refetching preserveState: true, // Keep page mounted and prevent refetching
moduleEnabled: true, moduleEnabled: true,
// Sidebar - will be shown as subpage under Administration // Privilege checker: only allow sysadmin role
privilegeChecker: async () => {
const userData = getUserDataCache();
const roleLabels = Array.isArray(userData?.roleLabels) ? userData.roleLabels : [];
// Only allow access if user has "sysadmin" role
return roleLabels.includes('sysadmin');
},
// Lifecycle hooks // Lifecycle hooks
onActivate: async () => { onActivate: async () => {

View file

@ -727,6 +727,27 @@ export default {
'administration.features.system_settings': 'Systemeinstellungen - Arbeitsbereich-Einstellungen konfigurieren', 'administration.features.system_settings': 'Systemeinstellungen - Arbeitsbereich-Einstellungen konfigurieren',
'administration.features.data_management': 'Datenverwaltung - Datenimporte und -exporte verwalten', 'administration.features.data_management': 'Datenverwaltung - Datenimporte und -exporte verwalten',
// Admin pages
'admin.mandates.title': 'Mandate',
'admin.mandates.subtitle': 'Mandate und Berechtigungen verwalten',
'admin.mandates.description': 'Mandatsverwaltung',
'admin.mandates.description_text': 'Verwalten Sie Mandate und deren zugehörige Berechtigungen.',
'admin.rbac-rules.title': 'RBAC-Regeln',
'admin.rbac-rules.subtitle': 'Rollenbasierte Zugriffssteuerungsregeln',
'admin.rbac-rules.description': 'RBAC-Regelverwaltung',
'admin.rbac-rules.description_text': 'Konfigurieren und verwalten Sie rollenbasierte Zugriffssteuerungsregeln.',
'admin.rbac-role.title': 'RBAC-Rollen',
'admin.rbac-role.subtitle': 'Rollenverwaltung',
'admin.rbac-role.description': 'RBAC-Rollenverwaltung',
'admin.rbac-role.description_text': 'Erstellen und verwalten Sie RBAC-Rollen und deren Berechtigungen.',
'admin.admin-settings.title': 'Admin-Einstellungen',
'admin.admin-settings.subtitle': 'Administrative Einstellungen',
'admin.admin-settings.description': 'Administrative Einstellungen',
'admin.admin-settings.description_text': 'Konfigurieren Sie administrative Einstellungen und Systempräferenzen.',
// Start page // Start page
'start.title': 'Start', 'start.title': 'Start',
'start.description': 'Willkommen in Ihrem Arbeitsbereich', 'start.description': 'Willkommen in Ihrem Arbeitsbereich',

View file

@ -727,6 +727,27 @@ export default {
'administration.features.system_settings': 'System Settings - Configure workspace settings', 'administration.features.system_settings': 'System Settings - Configure workspace settings',
'administration.features.data_management': 'Data Management - Handle data imports and exports', 'administration.features.data_management': 'Data Management - Handle data imports and exports',
// Admin pages
'admin.mandates.title': 'Mandates',
'admin.mandates.subtitle': 'Manage mandates and permissions',
'admin.mandates.description': 'Mandate management',
'admin.mandates.description_text': 'Manage mandates and their associated permissions.',
'admin.rbac-rules.title': 'RBAC Rules',
'admin.rbac-rules.subtitle': 'Role-Based Access Control rules',
'admin.rbac-rules.description': 'RBAC rules management',
'admin.rbac-rules.description_text': 'Configure and manage Role-Based Access Control rules.',
'admin.rbac-role.title': 'RBAC Roles',
'admin.rbac-role.subtitle': 'Role management',
'admin.rbac-role.description': 'RBAC role management',
'admin.rbac-role.description_text': 'Create and manage RBAC roles and their permissions.',
'admin.admin-settings.title': 'Admin Settings',
'admin.admin-settings.subtitle': 'Administrative settings',
'admin.admin-settings.description': 'Administrative settings',
'admin.admin-settings.description_text': 'Configure administrative settings and system preferences.',
// Start page // Start page
'start.title': 'Start', 'start.title': 'Start',
'start.description': 'Welcome to your workspace', 'start.description': 'Welcome to your workspace',

View file

@ -727,6 +727,27 @@ export default {
'administration.features.system_settings': 'Paramètres Système - Configurer les paramètres de l\'espace de travail', 'administration.features.system_settings': 'Paramètres Système - Configurer les paramètres de l\'espace de travail',
'administration.features.data_management': 'Gestion des Données - Gérer les imports et exports de données', 'administration.features.data_management': 'Gestion des Données - Gérer les imports et exports de données',
// Admin pages
'admin.mandates.title': 'Mandats',
'admin.mandates.subtitle': 'Gérer les mandats et les permissions',
'admin.mandates.description': 'Gestion des mandats',
'admin.mandates.description_text': 'Gérez les mandats et leurs permissions associées.',
'admin.rbac-rules.title': 'Règles RBAC',
'admin.rbac-rules.subtitle': 'Règles de contrôle d\'accès basé sur les rôles',
'admin.rbac-rules.description': 'Gestion des règles RBAC',
'admin.rbac-rules.description_text': 'Configurez et gérez les règles de contrôle d\'accès basé sur les rôles.',
'admin.rbac-role.title': 'Rôles RBAC',
'admin.rbac-role.subtitle': 'Gestion des rôles',
'admin.rbac-role.description': 'Gestion des rôles RBAC',
'admin.rbac-role.description_text': 'Créez et gérez les rôles RBAC et leurs permissions.',
'admin.admin-settings.title': 'Paramètres Admin',
'admin.admin-settings.subtitle': 'Paramètres administratifs',
'admin.admin-settings.description': 'Paramètres administratifs',
'admin.admin-settings.description_text': 'Configurez les paramètres administratifs et les préférences système.',
// Start page // Start page
'start.title': 'Démarrage', 'start.title': 'Démarrage',
'start.description': 'Bienvenue dans votre espace de travail', 'start.description': 'Bienvenue dans votre espace de travail',