feat: change usermanagement from git submodule to componenet based

apps/backoffice/src/app/features/user-management/UserManagementPage.tsx

@@ -0,0 +1,134 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { useNavigate } from 'react-router-dom';
+import { UserManagementApp } from '@tria-plc/iamui';
+import type { DesignConfig, UserManagementSessionOptions } from '@tria-plc/iamui';
+import '@tria-plc/iamui/style.css';
+import './um-overrides.css';
+
+const UM_CONFIG: DesignConfig = {
+  brand: {
+    appName: 'Ethiopian Maritime Licence',
+    logoUrl: '/assets/emaLogo.jpg',
+  },
+  colors: {
+    primary: '#2563eb',
+    sidebar: '#ffffff',
+    background: '#f8fafc',
+    foreground: '#1e293b',
+    border: '#e2e8f0',
+    mutedForeground: '#94a3b8',
+    card: '#ffffff',
+  },
+  typography: {
+    fontFamily: 'Inter, ui-sans-serif, system-ui, sans-serif',
+  },
+  layout: {
+    userManagementView: 'classic',
+    sidebarBrandLabel: 'Ethiopian Maritime Authority',
+    sidebarBrandSublabel: 'User Management',
+    sidebarBackground: '#ffffff',
+    sidebarColor: '#1e293b',
+    sidebarMutedColor: '#94a3b8',
+    sidebarActiveBackground: '#eff6ff',
+    sidebarActiveColor: '#2563eb',
+    sidebarHoverBackground: '#f8fafc',
+    sidebarBorder: '#e2e8f0',
+    sidebarWidth: '280px',
+    sidebarCollapsedWidth: '80px',
+    modalAccentColor: '#2563eb',
+    modalHeaderBackground: '#f8fafc',
+    modalHeaderEditBackground: '#eff6ff',
+    modalIconBackground: '#eff6ff',
+    modalIconColor: '#2563eb',
+    modalTitleColor: '#1e293b',
+    modalFocusColor: '#2563eb',
+    modalSurface: '#ffffff',
+  },
+};
+
+const UM_RUNTIME = {
+  basename: '/um',
+  apiUrl: import.meta.env.VITE_BASE_API_URL,
+};
+
+const buttonStyle: React.CSSProperties = {
+  position: 'fixed',
+  top: 12,
+  left: 12,
+  zIndex: 9999,
+  display: 'flex',
+  alignItems: 'center',
+  gap: 6,
+  padding: '8px 16px',
+  border: '1px solid #e2e8f0',
+  borderRadius: 8,
+  background: '#ffffff',
+  color: '#2563eb',
+  fontSize: 14,
+  fontWeight: 600,
+  cursor: 'pointer',
+  fontFamily: 'Inter, ui-sans-serif, system-ui, sans-serif',
+  boxShadow: '0 1px 3px rgba(0,0,0,0.08)',
+  transition: 'all 150ms ease',
+};
+
+export default function UserManagementPage() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const rootRef = useRef<Root | null>(null);
+  const navigate = useNavigate();
+
+  const handleReturn = useCallback(() => {
+    navigate('/dashboard');
+  }, [navigate]);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const token = localStorage.getItem('ema-backoffice-auth-token') ?? '';
+    const refreshToken = localStorage.getItem('ema-backoffice-refresh-token') ?? undefined;
+
+    const session: UserManagementSessionOptions = {
+      initialSession: token
+        ? { token, refreshToken, rememberMe: true }
+        : null,
+      enableEmbeddedAuthBridge: false,
+    };
+
+    rootRef.current = createRoot(containerRef.current);
+    rootRef.current.render(
+      <UserManagementApp config={UM_CONFIG} runtime={UM_RUNTIME} session={session} />,
+    );
+
+    return () => {
+      if (rootRef.current) {
+        rootRef.current.unmount();
+        rootRef.current = null;
+      }
+    };
+  }, []);
+
+  return (
+    <>
+      <button
+        onClick={handleReturn}
+        style={buttonStyle}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.background = '#f8fafc';
+          e.currentTarget.style.boxShadow = '0 1px 6px rgba(0,0,0,0.12)';
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.background = '#ffffff';
+          e.currentTarget.style.boxShadow = '0 1px 3px rgba(0,0,0,0.08)';
+        }}
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="m12 19-7-7 7-7" />
+          <path d="M19 12H5" />
+        </svg>
+        Return to EMA
+      </button>
+      <div ref={containerRef} style={{ position: 'fixed', inset: 0 }} />
+    </>
+  );
+}

apps/backoffice/src/app/features/user-management/um-overrides.css

@@ -0,0 +1,22 @@
+.um-theme-light {
+  --background: #ffffff;
+  --foreground: #1f2937;
+  --card: #ffffff;
+  --card-foreground: #1f2937;
+  --popover: #ffffff;
+  --popover-foreground: #1f2937;
+  --secondary: #f1f5f9;
+  --secondary-foreground: #1e293b;
+  --muted: #f1f5f9;
+  --muted-foreground: #64748b;
+  --accent: var(--primary);
+  --accent-foreground: var(--primary-foreground);
+  --border: #e2e8f0;
+  --input: #e2e8f0;
+  --sidebar: #ffffff;
+  --sidebar-foreground: #1e293b;
+  --sidebar-accent: #f1f5f9;
+  --sidebar-accent-foreground: #1e293b;
+  --sidebar-border: #e2e8f0;
+  --sidebar-ring: var(--primary);
+}