UI styling improvements: dashboard headers and navigation
- Restore blue PageHeader on Dashboard (/app-components) - Update homepage (/) with subtle header design without blue bar - Add uniform PageHeader styling to application edit page - Fix Rapporten link on homepage to point to /reports overview - Improve header descriptions spacing for better readability
This commit is contained in:
@@ -10,7 +10,6 @@ import TeamDashboard from './components/TeamDashboard';
|
||||
import ConfigurationV25 from './components/ConfigurationV25';
|
||||
import ReportsDashboard from './components/ReportsDashboard';
|
||||
import GovernanceAnalysis from './components/GovernanceAnalysis';
|
||||
import DataModelDashboard from './components/DataModelDashboard';
|
||||
import TechnicalDebtHeatmap from './components/TechnicalDebtHeatmap';
|
||||
import LifecyclePipeline from './components/LifecyclePipeline';
|
||||
import DataCompletenessScore from './components/DataCompletenessScore';
|
||||
@@ -21,6 +20,9 @@ import FTECalculator from './components/FTECalculator';
|
||||
import DataCompletenessConfig from './components/DataCompletenessConfig';
|
||||
import BIASyncDashboard from './components/BIASyncDashboard';
|
||||
import BusinessImportanceComparison from './components/BusinessImportanceComparison';
|
||||
import DataValidationDashboard from './components/DataValidationDashboard';
|
||||
import SchemaConfigurationSettings from './components/SchemaConfigurationSettings';
|
||||
import ArchitectureDebugPage from './components/ArchitectureDebugPage';
|
||||
import Login from './components/Login';
|
||||
import ForgotPassword from './components/ForgotPassword';
|
||||
import ResetPassword from './components/ResetPassword';
|
||||
@@ -29,6 +31,7 @@ import ProtectedRoute from './components/ProtectedRoute';
|
||||
import UserManagement from './components/UserManagement';
|
||||
import RoleManagement from './components/RoleManagement';
|
||||
import ProfileSettings from './components/ProfileSettings';
|
||||
import { ToastContainerComponent } from './components/Toast';
|
||||
import { useAuthStore } from './stores/authStore';
|
||||
|
||||
// Module-level singleton to prevent duplicate initialization across StrictMode remounts
|
||||
@@ -237,14 +240,15 @@ function AppContent() {
|
||||
const hasPermission = useAuthStore((state) => state.hasPermission);
|
||||
const config = useAuthStore((state) => state.config);
|
||||
|
||||
// Navigation structure
|
||||
// Navigation structure - Logical flow for CMDB setup and data management
|
||||
// Flow: 1. Setup (Schema Discovery → Configuration → Sync) → 2. Data (Model → Validation) → 3. Application Component → 4. Reports
|
||||
|
||||
const appComponentsDropdown: NavDropdown = {
|
||||
label: 'Application Component',
|
||||
basePath: '/application',
|
||||
items: [
|
||||
{ path: '/app-components', label: 'Dashboard', exact: true, requiredPermission: 'search' },
|
||||
{ path: '/application/overview', label: 'Overzicht', exact: false, requiredPermission: 'search' },
|
||||
{ path: '/application/fte-calculator', label: 'FTE Calculator', exact: true, requiredPermission: 'search' },
|
||||
],
|
||||
};
|
||||
|
||||
@@ -270,6 +274,7 @@ function AppContent() {
|
||||
basePath: '/apps',
|
||||
items: [
|
||||
{ path: '/apps/bia-sync', label: 'BIA Sync', exact: true, requiredPermission: 'search' },
|
||||
{ path: '/apps/fte-calculator', label: 'FTE Calculator', exact: true, requiredPermission: 'search' },
|
||||
],
|
||||
};
|
||||
|
||||
@@ -277,9 +282,8 @@ function AppContent() {
|
||||
label: 'Instellingen',
|
||||
basePath: '/settings',
|
||||
items: [
|
||||
{ path: '/settings/fte-config', label: 'FTE Config', exact: true, requiredPermission: 'manage_settings' },
|
||||
{ path: '/settings/data-model', label: 'Datamodel', exact: true, requiredPermission: 'manage_settings' },
|
||||
{ path: '/settings/data-completeness-config', label: 'Data Completeness Config', exact: true, requiredPermission: 'manage_settings' },
|
||||
{ path: '/settings/fte-config', label: 'FTE Config', exact: true, requiredPermission: 'manage_settings' },
|
||||
],
|
||||
};
|
||||
|
||||
@@ -287,16 +291,23 @@ function AppContent() {
|
||||
label: 'Beheer',
|
||||
basePath: '/admin',
|
||||
items: [
|
||||
{ path: '/settings/schema-configuration', label: 'Schema Configuratie & Datamodel', exact: true, requiredPermission: 'manage_settings' },
|
||||
{ path: '/settings/data-validation', label: 'Data Validatie', exact: true, requiredPermission: 'manage_settings' },
|
||||
{ path: '/admin/users', label: 'Gebruikers', exact: true, requiredPermission: 'manage_users' },
|
||||
{ path: '/admin/roles', label: 'Rollen', exact: true, requiredPermission: 'manage_roles' },
|
||||
{ path: '/admin/debug', label: 'Architecture Debug', exact: true, requiredPermission: 'admin' },
|
||||
],
|
||||
};
|
||||
|
||||
const isAppComponentsActive = location.pathname.startsWith('/app-components') || location.pathname.startsWith('/application');
|
||||
const isReportsActive = location.pathname.startsWith('/reports');
|
||||
const isSettingsActive = location.pathname.startsWith('/settings');
|
||||
// Settings is active for /settings paths EXCEPT admin items (schema-configuration, data-model, data-validation)
|
||||
const isSettingsActive = location.pathname.startsWith('/settings')
|
||||
&& !location.pathname.startsWith('/settings/schema-configuration')
|
||||
&& !location.pathname.startsWith('/settings/data-model')
|
||||
&& !location.pathname.startsWith('/settings/data-validation');
|
||||
const isAppsActive = location.pathname.startsWith('/apps');
|
||||
const isAdminActive = location.pathname.startsWith('/admin');
|
||||
const isAdminActive = location.pathname.startsWith('/admin') || location.pathname.startsWith('/settings/schema-configuration') || location.pathname.startsWith('/settings/data-model') || location.pathname.startsWith('/settings/data-validation');
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
@@ -319,16 +330,16 @@ function AppContent() {
|
||||
{/* Application Component Dropdown */}
|
||||
<NavDropdown dropdown={appComponentsDropdown} isActive={isAppComponentsActive} hasPermission={hasPermission} />
|
||||
|
||||
{/* Apps Dropdown */}
|
||||
<NavDropdown dropdown={appsDropdown} isActive={isAppsActive} hasPermission={hasPermission} />
|
||||
|
||||
{/* Reports Dropdown */}
|
||||
<NavDropdown dropdown={reportsDropdown} isActive={isReportsActive} hasPermission={hasPermission} />
|
||||
|
||||
{/* Settings Dropdown */}
|
||||
{/* Apps Dropdown */}
|
||||
<NavDropdown dropdown={appsDropdown} isActive={isAppsActive} hasPermission={hasPermission} />
|
||||
|
||||
{/* Settings Dropdown - Advanced configuration */}
|
||||
<NavDropdown dropdown={settingsDropdown} isActive={isSettingsActive} hasPermission={hasPermission} />
|
||||
|
||||
{/* Admin Dropdown */}
|
||||
{/* Admin Dropdown - Setup (Schema Config + Data Model + Data Validation) + Administration */}
|
||||
<NavDropdown dropdown={adminDropdown} isActive={isAdminActive} hasPermission={hasPermission} />
|
||||
</nav>
|
||||
</div>
|
||||
@@ -338,6 +349,9 @@ function AppContent() {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Toast Notifications */}
|
||||
<ToastContainerComponent />
|
||||
|
||||
{/* Main content */}
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<Routes>
|
||||
@@ -346,7 +360,6 @@ function AppContent() {
|
||||
|
||||
{/* Application routes (new structure) - specific routes first, then dynamic */}
|
||||
<Route path="/application/overview" element={<ProtectedRoute requirePermission="search"><ApplicationList /></ProtectedRoute>} />
|
||||
<Route path="/application/fte-calculator" element={<ProtectedRoute requirePermission="search"><FTECalculator /></ProtectedRoute>} />
|
||||
<Route path="/application/:id/edit" element={<ProtectedRoute requirePermission="edit_applications"><GovernanceModelHelper /></ProtectedRoute>} />
|
||||
<Route path="/application/:id" element={<ProtectedRoute requirePermission="search"><ApplicationInfo /></ProtectedRoute>} />
|
||||
|
||||
@@ -367,10 +380,13 @@ function AppContent() {
|
||||
|
||||
{/* Apps routes */}
|
||||
<Route path="/apps/bia-sync" element={<ProtectedRoute requirePermission="search"><BIASyncDashboard /></ProtectedRoute>} />
|
||||
<Route path="/apps/fte-calculator" element={<ProtectedRoute requirePermission="search"><FTECalculator /></ProtectedRoute>} />
|
||||
|
||||
{/* Settings routes */}
|
||||
<Route path="/settings/schema-configuration" element={<ProtectedRoute requirePermission="manage_settings"><SchemaConfigurationSettings /></ProtectedRoute>} />
|
||||
<Route path="/settings/fte-config" element={<ProtectedRoute requirePermission="manage_settings"><ConfigurationV25 /></ProtectedRoute>} />
|
||||
<Route path="/settings/data-model" element={<ProtectedRoute requirePermission="manage_settings"><DataModelDashboard /></ProtectedRoute>} />
|
||||
<Route path="/settings/data-model" element={<Navigate to="/settings/schema-configuration" replace />} />
|
||||
<Route path="/settings/data-validation" element={<ProtectedRoute requirePermission="manage_settings"><DataValidationDashboard /></ProtectedRoute>} />
|
||||
<Route path="/settings/data-completeness-config" element={<ProtectedRoute requirePermission="manage_settings"><DataCompletenessConfig /></ProtectedRoute>} />
|
||||
<Route path="/settings/profile" element={<ProtectedRoute><ProfileSettings /></ProtectedRoute>} />
|
||||
{/* Legacy redirects for old routes */}
|
||||
@@ -379,6 +395,7 @@ function AppContent() {
|
||||
{/* Admin routes */}
|
||||
<Route path="/admin/users" element={<ProtectedRoute requirePermission="manage_users"><UserManagement /></ProtectedRoute>} />
|
||||
<Route path="/admin/roles" element={<ProtectedRoute requirePermission="manage_roles"><RoleManagement /></ProtectedRoute>} />
|
||||
<Route path="/admin/debug" element={<ProtectedRoute requirePermission="admin"><ArchitectureDebugPage /></ProtectedRoute>} />
|
||||
|
||||
{/* Legacy redirects for bookmarks - redirect old paths to new ones */}
|
||||
<Route path="/app-components/overview" element={<Navigate to="/application/overview" replace />} />
|
||||
@@ -386,7 +403,8 @@ function AppContent() {
|
||||
<Route path="/app-components/fte-config" element={<Navigate to="/settings/fte-config" replace />} />
|
||||
<Route path="/applications" element={<Navigate to="/application/overview" replace />} />
|
||||
<Route path="/applications/:id" element={<RedirectToApplicationEdit />} />
|
||||
<Route path="/reports/data-model" element={<Navigate to="/settings/data-model" replace />} />
|
||||
<Route path="/application/fte-calculator" element={<Navigate to="/apps/fte-calculator" replace />} />
|
||||
<Route path="/reports/data-model" element={<Navigate to="/settings/schema-configuration" replace />} />
|
||||
<Route path="/reports/bia-sync" element={<Navigate to="/apps/bia-sync" replace />} />
|
||||
<Route path="/teams" element={<ProtectedRoute requirePermission="view_reports"><TeamDashboard /></ProtectedRoute>} />
|
||||
<Route path="/configuration" element={<Navigate to="/settings/fte-config" replace />} />
|
||||
|
||||
Reference in New Issue
Block a user