-

web/src/components/AppLoader.tsx

@@ -12,12 +12,15 @@ const DemoApp = React.lazy(() => import('demo/src/App'));
 const KMSApp = React.lazy(() => import('kms/src/App'));
 // @ts-ignore - These modules are loaded at runtime via Module Federation
 const FaaSApp = React.lazy(() => import('faas/src/App'));
+// @ts-ignore - These modules are loaded at runtime via Module Federation
+const UserApp = React.lazy(() => import('user/src/App'));
 
 // Map app names to components
 const appComponents: Record<string, React.LazyExoticComponent<React.ComponentType<any>>> = {
   demo: DemoApp,
   kms: KMSApp,
   faas: FaaSApp,
+  user: UserApp,
 };
 
 const AppLoader: React.FC = () => {

web/src/components/Navigation.tsx

@@ -6,6 +6,7 @@ import {
   IconKey,
   IconFunction,
   IconApps,
+  IconUsers,
 } from '@tabler/icons-react';
 import { microFrontends } from '../microfrontends.js';
 
@@ -27,6 +28,11 @@ const getAppInfo = (id: string) => {
       icon: IconFunction,
       category: 'Development',
     },
+    user: {
+      label: 'User Management',
+      icon: IconUsers,
+      category: 'Administration',
+    },
   };
 
   return appInfo[id] || {

web/src/microfrontends.js

@@ -24,6 +24,13 @@ export const microFrontends = {
     exposedModule: './src/App',
     importPath: 'faas/src/App',
   },
+  user: {
+    name: 'user',
+    url: 'http://localhost:3004',
+    port: 3004,
+    exposedModule: './src/App',
+    importPath: 'user/src/App',
+  },
 };
 
 // Generate remotes configuration for Module Federation