mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-08-26 13:02:50 +00:00
user managment ui
This commit is contained in:
mengstabketemaw
5
.gitignore
vendored
5
.gitignore
vendored
@@ -23,3 +23,8 @@ coverage/
|
||||
branch_structure.json
|
||||
temp_auto_push.bat
|
||||
temp_interactive_push.bat
|
||||
.nx
|
||||
|
||||
apps/backoffice/public/_um/
|
||||
apps/backoffice/public/tinymce/
|
||||
|
||||
|
||||
3
.gitmodules
vendored
Normal file
3
.gitmodules
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
[submodule "user-management"]
|
||||
path = user-management
|
||||
url = git@github.com:Tria-plc/iamui.git
|
||||
@@ -0,0 +1,92 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
|
||||
/**
|
||||
* Same-origin host for the user-management module.
|
||||
*
|
||||
* The host app (React 19 / Mantine 8 / Tailwind 3) embeds the module (React 18 /
|
||||
* Mantine 7 / Tailwind 4) via an iframe so the two never share a React tree,
|
||||
* router, or CSS — the version mismatch is fully isolated by the document
|
||||
* boundary. The module is built into apps/backoffice/public/_um and served by
|
||||
* THIS same server at <origin>/_um/, so there is no second server and no second
|
||||
* port. Override the mount path with VITE_USER_MANAGEMENT_BASE (default /_um).
|
||||
*
|
||||
* SSO: the module and host authenticate against the SAME backend, so the host's
|
||||
* token is valid in the module. The module posts `UM_REQUEST_AUTH`; we reply with
|
||||
* our stored token. Route-sync mirrors the module's internal route into the host
|
||||
* URL (/um/<path>) so a refresh deep-links back to the selected menu.
|
||||
*/
|
||||
|
||||
function readToken(): string | null {
|
||||
return (
|
||||
localStorage.getItem('fhc-backoffice-auth-token') ??
|
||||
(() => {
|
||||
const escaped = 'auth-token'.replace(/([.$?*|{}()[\]\\/+^])/g, '\\$1');
|
||||
const match = document.cookie.match(new RegExp('(?:^|; )' + escaped + '=([^;]*)'));
|
||||
return match ? decodeURIComponent(match[1]) : null;
|
||||
})()
|
||||
);
|
||||
}
|
||||
|
||||
function readRefreshToken(): string | null {
|
||||
return localStorage.getItem('fhc-backoffice-auth-refresh-token') ?? null;
|
||||
}
|
||||
|
||||
export default function UserManagementHostPage() {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const iframeRef = useRef<HTMLIFrameElement>(null);
|
||||
|
||||
// Same-origin sub-path the module is served from (matches the module's Vite
|
||||
// `base` + the apps/backoffice/public/_um build). Same origin ⇒ no second port.
|
||||
const mountBase = (
|
||||
(import.meta.env.VITE_USER_MANAGEMENT_BASE as string | undefined) ?? '/_um'
|
||||
).replace(/\/$/, '');
|
||||
const moduleOrigin = window.location.origin;
|
||||
|
||||
// Deep-link: the host route is /um/*, so whatever follows /um is the module's
|
||||
// own route. Compute src ONCE (frozen) so later parent-URL updates don't reload.
|
||||
const [iframeSrc] = useState(() => {
|
||||
const sub = location.pathname.replace(/^\/um(?=\/|$)/, '');
|
||||
return mountBase + sub + location.search;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const onMessage = (event: MessageEvent) => {
|
||||
if (event.origin !== moduleOrigin) return;
|
||||
const data = event.data as { type?: string; path?: string } | undefined;
|
||||
if (!data) return;
|
||||
|
||||
if (data.type === 'UM_REQUEST_AUTH') {
|
||||
const token = readToken();
|
||||
const refreshToken = readRefreshToken();
|
||||
const target = iframeRef.current?.contentWindow;
|
||||
if (token && target) {
|
||||
target.postMessage({ type: 'UM_AUTH_TOKEN', token, refreshToken }, moduleOrigin);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.type === 'UM_ROUTE_CHANGED' && typeof data.path === 'string') {
|
||||
const target = '/um' + data.path;
|
||||
if (window.location.pathname + window.location.search !== target) {
|
||||
navigate(target, { replace: true });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('message', onMessage);
|
||||
return () => window.removeEventListener('message', onMessage);
|
||||
}, [moduleOrigin, navigate]);
|
||||
|
||||
return (
|
||||
<div style={{ position: 'fixed', inset: 0 }}>
|
||||
<iframe
|
||||
ref={iframeRef}
|
||||
title="User Management"
|
||||
src={iframeSrc}
|
||||
style={{ width: '100%', height: '100%', border: 0, display: 'block' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +1,19 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# The user-management module is a self-contained SPA built into /_um. Deep links
|
||||
# / refreshes under /_um must fall back to the MODULE's own index.html, not the
|
||||
# host's. Longest-prefix match wins, so this takes precedence over `location /`.
|
||||
# Mirrors the dev SPA-fallback plugin in apps/backoffice/vite.config.mts.
|
||||
location /_um/ {
|
||||
try_files $uri $uri/ /_um/index.html;
|
||||
}
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
gzip on;
|
||||
gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
|
||||
}
|
||||
|
||||
@@ -3,14 +3,16 @@
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"backoffice": "nx serve @ema-platform/backoffice",
|
||||
"backoffice": "npm run build:user-management && nx serve @fhc-platform/backoffice",
|
||||
"portal": "nx serve @ema-platform/portal",
|
||||
"dev:all": "nx run-many -t serve -p @ema-platform/portal @ema-platform/backoffice --parallel=2",
|
||||
"build:backoffice": "nx build @ema-platform/backoffice",
|
||||
"build:portal": "nx build @ema-platform/portal",
|
||||
"lint": "nx run-many -t lint",
|
||||
"test": "nx run-many -t test",
|
||||
"format": "prettier --write ."
|
||||
"format": "prettier --write .",
|
||||
"build:user-management": "cd user-management-config && npm run build",
|
||||
"backoffice:no-build": "nx serve @fhc-platform/backoffice"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.14.0",
|
||||
|
||||
1
user-management
Submodule
1
user-management
Submodule
Submodule user-management added at 3f09900200
223
user-management-config/fhc.theme.ts
Normal file
223
user-management-config/fhc.theme.ts
Normal file
@@ -0,0 +1,223 @@
|
||||
/**
|
||||
* fhc.theme.ts — Federal Housing Corporation (FHC) look & feel preset.
|
||||
*
|
||||
* ┌─────────────────────────────────────────────────────────────────────────┐
|
||||
* │ HOST-OWNED config. Lives in app-config/, NOT inside the user-management │
|
||||
* │ module. At submodule-split time this whole folder moves to the host repo. │
|
||||
* │ It is fully self-contained — no imports from the module. │
|
||||
* └─────────────────────────────────────────────────────────────────────────┘
|
||||
*
|
||||
* WHAT IT GIVES YOU
|
||||
* - The FHC Mantine color palettes: fhcBlue, fhcBrick, fhcGold, fhcGray
|
||||
* - The FHC layout design tokens (brick-gradient sidebar, glassy header,
|
||||
* page background, brand colors, sizes) under `theme.other.fhcLayout`
|
||||
* (light) and `theme.other.fhcLayoutDark` (dark) — the classic shell reads
|
||||
* these via useFhcLayout()
|
||||
* - FHC typography (Plus Jakarta Sans), radii, shadows and component defaults
|
||||
*
|
||||
* HOW TO USE — in app-config/project.theme.ts:
|
||||
*
|
||||
* import { fhcMantineTheme } from "./fhc.theme";
|
||||
*
|
||||
* export const projectTheme: DesignConfig = {
|
||||
* typography: { fontFamily: "Plus Jakarta Sans, sans-serif" },
|
||||
* mantineTheme: fhcMantineTheme, // escape hatch — merges the FHC theme in
|
||||
* };
|
||||
*
|
||||
* Load the font once in index.html:
|
||||
* <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
|
||||
*/
|
||||
|
||||
import type { MantineColorsTuple, MantineThemeOverride } from "@mantine/core";
|
||||
|
||||
/** Mantine 10-shade color scales used across the FHC UI. */
|
||||
export const FHC_COLORS = {
|
||||
fhcBlue: [
|
||||
"#EEF4FC",
|
||||
"#D9E8FA",
|
||||
"#BCD5F5",
|
||||
"#96BDEB",
|
||||
"#6FA4E0",
|
||||
"#4A90E2",
|
||||
"#357ABD",
|
||||
"#2C669D",
|
||||
"#224F7A",
|
||||
"#173654",
|
||||
],
|
||||
fhcBrick: [
|
||||
"#F6ECE8",
|
||||
"#EACFC4",
|
||||
"#DBAD99",
|
||||
"#C9876B",
|
||||
"#B86B49",
|
||||
"#A85735",
|
||||
"#8C462B",
|
||||
"#703622",
|
||||
"#55281A",
|
||||
"#3D1E14",
|
||||
],
|
||||
fhcGold: [
|
||||
"#FFFBE6",
|
||||
"#FFF3BF",
|
||||
"#FEE98A",
|
||||
"#FCDD57",
|
||||
"#F9CF2F",
|
||||
"#FFD700",
|
||||
"#D9B700",
|
||||
"#B39400",
|
||||
"#8C7300",
|
||||
"#665300",
|
||||
],
|
||||
fhcGray: [
|
||||
"#F8FAFC",
|
||||
"#F1F5F9",
|
||||
"#E2E8F0",
|
||||
"#CBD5E1",
|
||||
"#94A3B8",
|
||||
"#64748B",
|
||||
"#475569",
|
||||
"#334155",
|
||||
"#1E293B",
|
||||
"#0F172A",
|
||||
],
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* Layout design tokens — the brick-gradient sidebar, glassy header, page
|
||||
* surfaces, brand colors and sizes. Mirrored under `theme.other.fhcLayout`.
|
||||
*/
|
||||
export const FHC_LAYOUT = {
|
||||
sidebar: {
|
||||
bg: "linear-gradient(180deg, #5D2E1F 0%, #3D1E14 100%)",
|
||||
headerBg: "rgba(93, 46, 31, 0.82)",
|
||||
footerBg: "rgba(61, 30, 20, 0.62)",
|
||||
border: "rgba(255,255,255,0.10)",
|
||||
text: "rgba(255,255,255,0.76)",
|
||||
mutedText: "rgba(255,255,255,0.42)",
|
||||
childText: "rgba(255,255,255,0.68)",
|
||||
activeText: "#FFFFFF",
|
||||
iconBg: "rgba(255,255,255,0.06)",
|
||||
iconActiveBg: "rgba(255,255,255,0.12)",
|
||||
hoverBg: "rgba(255,255,255,0.08)",
|
||||
activeBg: "rgba(255,255,255,0.15)",
|
||||
activeBorder: "rgba(255,255,255,0.14)",
|
||||
sectionLine: "rgba(255,255,255,0.10)",
|
||||
rail: "linear-gradient(180deg, #FFD700 0%, #4A90E2 100%)",
|
||||
},
|
||||
header: {
|
||||
bg: "rgba(255,255,255,0.92)",
|
||||
border: "rgba(15, 23, 42, 0.08)",
|
||||
searchBg: "#F9FAFB",
|
||||
searchBorder: "#E5E7EB",
|
||||
title: "#1F2937",
|
||||
subtitle: "#6B7280",
|
||||
},
|
||||
page: {
|
||||
bg: "#F8FAFC",
|
||||
cardBg: "rgba(255,255,255,0.92)",
|
||||
},
|
||||
brand: {
|
||||
brick: "#5D2E1F",
|
||||
brickDark: "#3D1E14",
|
||||
blue: "#4A90E2",
|
||||
blueDark: "#357ABD",
|
||||
gold: "#FFD700",
|
||||
text: "#1F2937",
|
||||
},
|
||||
sizes: {
|
||||
sidebarExpanded: 288,
|
||||
sidebarCollapsed: 80,
|
||||
headerHeight: 64,
|
||||
},
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* Dark-mode counterpart of FHC_LAYOUT. The brick-gradient sidebar, accent rail
|
||||
* and sizes are intentionally kept (they already read well on dark), while the
|
||||
* glassy white header, page background, card surfaces and dark text are flipped
|
||||
* to dark equivalents.
|
||||
*/
|
||||
export const FHC_LAYOUT_DARK = {
|
||||
...FHC_LAYOUT,
|
||||
header: {
|
||||
bg: "rgba(26, 27, 30, 0.92)",
|
||||
border: "rgba(255,255,255,0.08)",
|
||||
searchBg: "#25262B",
|
||||
searchBorder: "#2C2E33",
|
||||
title: "#F1F5F9",
|
||||
subtitle: "#9CA3AF",
|
||||
},
|
||||
page: {
|
||||
bg: "#141517",
|
||||
cardBg: "rgba(26, 27, 30, 0.92)",
|
||||
},
|
||||
brand: {
|
||||
...FHC_LAYOUT.brand,
|
||||
text: "#F1F5F9",
|
||||
},
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* Full Mantine theme override carrying the FHC palettes, layout tokens,
|
||||
* typography, radii, shadows and component defaults. Pass this as the
|
||||
* `mantineTheme` escape hatch in project.theme.ts.
|
||||
*
|
||||
* Note: BOTH `fhcLayout` (light) and `fhcLayoutDark` (dark) are published under
|
||||
* `other` — the module's useFhcLayout() reads the matching one per color scheme.
|
||||
*/
|
||||
export const fhcMantineTheme: MantineThemeOverride = {
|
||||
fontFamily: "Plus Jakarta Sans, sans-serif",
|
||||
headings: {
|
||||
fontFamily: "Plus Jakarta Sans, sans-serif",
|
||||
},
|
||||
defaultRadius: "md",
|
||||
radius: {
|
||||
xs: "6px",
|
||||
sm: "8px",
|
||||
md: "10px",
|
||||
lg: "14px",
|
||||
xl: "18px",
|
||||
},
|
||||
shadows: {
|
||||
xs: "0 1px 2px rgba(15, 23, 42, 0.04)",
|
||||
sm: "0 2px 8px rgba(15, 23, 42, 0.06)",
|
||||
md: "0 4px 20px rgba(15, 23, 42, 0.08)",
|
||||
lg: "0 8px 30px rgba(15, 23, 42, 0.12)",
|
||||
},
|
||||
colors: {
|
||||
fhcBlue: FHC_COLORS.fhcBlue as unknown as MantineColorsTuple,
|
||||
fhcBrick: FHC_COLORS.fhcBrick as unknown as MantineColorsTuple,
|
||||
fhcGold: FHC_COLORS.fhcGold as unknown as MantineColorsTuple,
|
||||
fhcGray: FHC_COLORS.fhcGray as unknown as MantineColorsTuple,
|
||||
},
|
||||
other: {
|
||||
fhcLayout: FHC_LAYOUT,
|
||||
fhcLayoutDark: FHC_LAYOUT_DARK,
|
||||
},
|
||||
components: {
|
||||
Paper: {
|
||||
defaultProps: {
|
||||
radius: "lg",
|
||||
shadow: "sm",
|
||||
},
|
||||
},
|
||||
NavLink: {
|
||||
defaultProps: {
|
||||
radius: "md",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Optional convenience: the bits of a DesignConfig that carry the FHC look.
|
||||
* Spread this into your projectTheme if you also want FHC as the primary brand
|
||||
* (this re-tints buttons/links to fhcBlue). Leave it out to keep your own brand
|
||||
* color while still getting the fhc* palettes + layout tokens via `mantineTheme`.
|
||||
*/
|
||||
export const fhcDesignPreset = {
|
||||
colors: { primary: "#357ABD" },
|
||||
typography: { fontFamily: "Plus Jakarta Sans, sans-serif" },
|
||||
shape: { radius: "10px" },
|
||||
mantineTheme: fhcMantineTheme,
|
||||
};
|
||||
16
user-management-config/index.html
Normal file
16
user-management-config/index.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"
|
||||
/>
|
||||
<title>User Management</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
13
user-management-config/main.tsx
Normal file
13
user-management-config/main.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
// Consume the reusable module via its public barrel (@/ → ../user-management/src).
|
||||
import { UserManagementApp } from "@/index";
|
||||
// Your project's config lives HERE in the host folder (resolved via @app-config).
|
||||
// The module never imports it; the host passes it in.
|
||||
import { projectTheme } from "@app-config/project.theme";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<UserManagementApp config={projectTheme} />
|
||||
</StrictMode>
|
||||
);
|
||||
1
user-management-config/node_modules
Symbolic link
1
user-management-config/node_modules
Symbolic link
@@ -0,0 +1 @@
|
||||
../user-management/node_modules
|
||||
12
user-management-config/package.json
Normal file
12
user-management-config/package.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "user-management-host",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"description": "Host wrapper for the user-management module. Owns branding/theme (project.theme.ts / fhc.theme.ts), the Vite build (vite.config.ts), the HTML shell (index.html) and the entry (main.tsx). Consumes the module from ../user-management/src.",
|
||||
"scripts": {
|
||||
"dev": "vite --port 4202 --host 0.0.0.0",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview --port 4202 --host"
|
||||
}
|
||||
}
|
||||
7
user-management-config/postcss.config.js
Normal file
7
user-management-config/postcss.config.js
Normal file
@@ -0,0 +1,7 @@
|
||||
// Tailwind is handled by the @tailwindcss/vite plugin (see vite.config.ts), so
|
||||
// PostCSS needs no plugins here. This local config exists to stop Vite from
|
||||
// walking up to the monorepo root postcss.config.js (Tailwind v3), which would
|
||||
// conflict with this package's Tailwind v4 setup.
|
||||
export default {
|
||||
plugins: {},
|
||||
};
|
||||
216
user-management-config/project.theme.ts
Normal file
216
user-management-config/project.theme.ts
Normal file
@@ -0,0 +1,216 @@
|
||||
/**
|
||||
* project.theme.ts — HOST-OWNED config for THIS project / organisation (FHC).
|
||||
*
|
||||
* ┌─────────────────────────────────────────────────────────────────────────┐
|
||||
* │ Lives in app-config/, OUTSIDE the user-management module. The module │
|
||||
* │ never imports this file — the host passes it in via │
|
||||
* │ <UserManagementApp config={projectTheme} /> (see ../src/main.tsx). │
|
||||
* │ At submodule-split time, this whole folder moves to the host repo. │
|
||||
* └─────────────────────────────────────────────────────────────────────────┘
|
||||
*
|
||||
* Every field is optional — remove lines you don't need to override.
|
||||
*
|
||||
* Flow:
|
||||
* project.theme.ts → design.config.ts (module engine) → CSS vars + Mantine theme
|
||||
* TenantConfig.ts → overrides --primary at runtime per hostname
|
||||
*
|
||||
* The TenantConfig layer runs AFTER this, so per-hostname primary-color overrides
|
||||
* still work on top of whatever you set here.
|
||||
*/
|
||||
|
||||
import type { DesignConfig } from "@/config/design.config";
|
||||
import { fhcMantineTheme } from "./fhc.theme";
|
||||
|
||||
export const projectTheme: DesignConfig = {
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
// BRANDING
|
||||
// Replace with your organisation's assets.
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
brand: {
|
||||
appName: "Federal Housing Corporation", // FHC — shown in the browser tab
|
||||
// Drop the FHC logo at this path in /public to show it in the sidebar brand
|
||||
// and as the favicon. Until then the sidebar falls back to a building icon.
|
||||
// logoUrl: "/assets/logo/fhc.png",
|
||||
// faviconUrl: "/favicon.ico", // optional — defaults to logoUrl
|
||||
},
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
// COLORS
|
||||
// Change `primary` to your brand hex and everything cascades automatically.
|
||||
// Shades primary-50 → primary-950 are computed via CSS color-mix in index.css.
|
||||
// TenantConfig overrides this per-hostname, so localhost vs edrsc.com can
|
||||
// still have different colors.
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
colors: {
|
||||
primary: "#357ABD", // FHC blue (fhcBlue-6) — buttons, links, active states
|
||||
// // "#5D2E1F" brick (FHC chrome) is used by the sidebar/modal skin below
|
||||
// // "#2563eb" blue | "#7c3aed" purple
|
||||
// // "#16a34a" green | "#dc2626" red
|
||||
// // "#f59e0b" amber | "#0284c7" sky
|
||||
|
||||
// primaryForeground: "#ffffff", // text on primary-colored bg — rarely needs changing
|
||||
|
||||
// secondary: "#f1f5f9", // TODO: subtle secondary UI color
|
||||
// background: "#ffffff", // TODO: page background
|
||||
// foreground: "#0f172a", // TODO: main text color
|
||||
// border: "#e2e8f0", // TODO: input / card borders
|
||||
// muted: "#f8fafc", // TODO: disabled input / tag backgrounds
|
||||
// mutedForeground: "#94a3b8", // TODO: placeholder / helper text
|
||||
// card: "#ffffff", // TODO: card background (if different from page)
|
||||
// sidebar: "#f8fafc", // TODO: sidebar background
|
||||
// danger: "#dc2626", // TODO: error / destructive color
|
||||
},
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
// TYPOGRAPHY
|
||||
// Load the font FIRST in index.html (Google Fonts link or @font-face) then
|
||||
// set fontFamily here. The fallback chain is used if the custom font fails.
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
typography: {
|
||||
fontFamily: "Plus Jakarta Sans, Inter, ui-sans-serif, system-ui, sans-serif",
|
||||
// // TODO: "Poppins, Inter, sans-serif"
|
||||
// // TODO: "Cairo, Inter, sans-serif" (Arabic)
|
||||
// // TODO: "Noto Serif Ethiopic, serif" (Amharic)
|
||||
|
||||
// headingFontFamily: undefined, // TODO: separate heading font if desired
|
||||
// baseFontSize: "16px", // TODO: "14px" for compact dashboards
|
||||
},
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
// SHAPE
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
shape: {
|
||||
radius: "0.625rem", // TODO: "0" sharp | "0.5rem" subtle | "1rem" very rounded
|
||||
},
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
// SHADOWS
|
||||
// Leave commented to use Mantine/Tailwind defaults.
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
// shadows: {
|
||||
// card: "0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06)",
|
||||
// dropdown: "0 8px 30px rgba(0,0,0,0.12)",
|
||||
// modal: "0 20px 60px rgba(0,0,0,0.16)",
|
||||
// },
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
// MANTINE COMPONENT DEFAULTS
|
||||
// These become the <MantineProvider theme> defaults for every component.
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
components: {
|
||||
buttonDefaultVariant: "filled", // TODO: "light" | "outline" | "subtle"
|
||||
inputDefaultSize: "sm", // TODO: "xs" | "md" | "lg"
|
||||
inputRadius: "md", // TODO: "xs" | "lg" | "xl"
|
||||
modalRadius: "lg", // TODO: "md" | "xl"
|
||||
tableHighlightOnHover: true,
|
||||
tableStriped: false, // TODO: "odd" | "even" | true
|
||||
},
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
// USER-MANAGEMENT LAYOUT / NAVIGATION
|
||||
// Pick the navigation chrome and style the side menu — all from here.
|
||||
// "classic" → app-wide SIDE MENU, no top tabs
|
||||
// "legacy" → top TAB bar, no side menu
|
||||
// Each value is also exposed as a --um-* CSS var, so tweaks apply instantly.
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
layout: {
|
||||
userManagementView: "classic", // TODO: "legacy" for the top-tab UI
|
||||
// showTopBar: false, // TODO: overrides VITE_SHOW_TOP_BAR
|
||||
|
||||
// ── Dimensions ──────────────────────────────────────────────────────────
|
||||
sidebarWidth: "288px", // TODO: expanded side-menu width
|
||||
sidebarCollapsedWidth: "80px", // TODO: icon-only width
|
||||
headerHeight: "64px", // TODO: top bar height
|
||||
// contentMaxWidth: "1440px", // TODO: cap the content column
|
||||
|
||||
// ── Side-menu skin (defaults follow the FHC brick theme) ───────────────
|
||||
sidebarBackground: "linear-gradient(180deg, #5D2E1F 0%, #3D1E14 100%)",
|
||||
sidebarColor: "rgba(255,255,255,0.76)",
|
||||
sidebarMutedColor: "rgba(255,255,255,0.42)",
|
||||
sidebarActiveBackground: "rgba(255,255,255,0.15)",
|
||||
sidebarActiveColor: "#FFFFFF",
|
||||
sidebarHoverBackground: "rgba(255,255,255,0.08)",
|
||||
sidebarBorder: "rgba(255,255,255,0.10)",
|
||||
sidebarRail: "linear-gradient(180deg, #FFD700 0%, #4A90E2 100%)",
|
||||
sidebarBrandLabel: "User Management",
|
||||
sidebarBrandSublabel: "Federal Housing",
|
||||
|
||||
// ── THE MENU (data, shared by the side menu AND the top tabs) ──────────
|
||||
// Edit/add/remove freely. `icon` is a name from the registry in
|
||||
// navConfig.tsx (users, dashboard, content, position, settings, excel,
|
||||
// archive, units, activity, organizations, …). `label` is an i18n key
|
||||
// under "organization.<label>" (raw string shown if no translation).
|
||||
// Remove this array entirely to fall back to the built-in defaults.
|
||||
//
|
||||
// SHOW / HIDE A MENU: set `enabled: false` on any item to stop it
|
||||
// rendering in BOTH the side menu and the top tabs — without deleting it.
|
||||
// Omitting `enabled` (or `true`) keeps it visible. Toggle these per project.
|
||||
navItems: [
|
||||
// The menu is ROLE-FILTERED (see navConfig.tsx): each role sees only its own
|
||||
// block. Every href below has a matching route in the embedded router
|
||||
// (src/App.tsx), which is now a superset of org-admin + super-admin routes.
|
||||
|
||||
// ── Org-admin / unit-admin surface ──
|
||||
{ label: "dashboard", href: "/user-management/user_management-dashboard", icon: "dashboard", roles: ["admin", "unit_admin"], isPrimary: true, enabled: true },
|
||||
{ label: "userManagement", href: "/user-management/user_management", icon: "users", roles: ["admin", "unit_admin"], isPrimary: true, enabled: true },
|
||||
{ label: "contentManagement", displayLabel: "contentManagement", href: "/user-management/content-management", icon: "content", roles: ["admin", "unit_admin"], isPrimary: true, enabled: true },
|
||||
{ label: "Position", displayLabel: "positionTypes", href: "/user-management/position-management", icon: "position", roles: ["admin", "unit_admin", "super_admin"], isPrimary: true, enabled: true },
|
||||
{ label: "settings", displayLabel: "settings", href: "/user-management/organization-settings", icon: "settings", roles: ["admin", "unit_admin"], isPrimary: true, enabled: true },
|
||||
{ label: "Bulk", displayLabel: "bulkUpload", href: "/user-management/bulk-upload", icon: "excel", roles: ["admin", "unit_admin"], isPrimary: true, enabled: true },
|
||||
{ label: "Archive Users", displayLabel: "Archive Users", href: "/user-management/archives", icon: "archive", roles: ["admin", "unit_admin"], isPrimary: true, enabled: true },
|
||||
{ label: "Archived Units & Positions", displayLabel: "Archived Units & Positions", href: "/user-management/archived", icon: "units", roles: ["admin", "unit_admin"], isPrimary: true, enabled: true },
|
||||
|
||||
// ── Super-admin surface (routes now wired in App.tsx) ──
|
||||
{ label: "dashboard", href: "/user-management/dashboard", icon: "dashboard", roles: ["super_admin"], isPrimary: true, enabled: true },
|
||||
{ label: "organizations", href: "/user-management/organizations", icon: "organizations", roles: ["super_admin"], isPrimary: true, enabled: true },
|
||||
{ label: "organizationAdmins", href: "/user-management/organization_admins", icon: "admins", roles: ["super_admin"], isPrimary: true, enabled: true },
|
||||
{ label: "externalUsers", href: "/user-management/external_users", icon: "admins", roles: ["super_admin"], isPrimary: true, enabled: true },
|
||||
{ label: "Migrated Records", displayLabel: "migratedRecords", href: "/user-management/migrated-records-management", icon: "file", roles: ["super_admin"], isPrimary: true, enabled: true },
|
||||
{ label: "Archive Users", displayLabel: "Archive Users", href: "/user-management/archive-users", icon: "archive", roles: ["super_admin"], isPrimary: true, enabled: true },
|
||||
{ label: "Archived Organizations", displayLabel: "Archived Organizations", href: "/user-management/archived-organizations", icon: "archive", roles: ["super_admin"], isPrimary: true, enabled: true },
|
||||
{ label: "activityLog", href: "/user-management/activity_log", icon: "activity", roles: ["super_admin"], isPrimary: false, enabled: true },
|
||||
{ label: "setting", href: "/user-management/settings", icon: "settings", roles: ["super_admin"], isPrimary: false, enabled: true },
|
||||
{ label: "Letter Template", href: "/user-management/templates", icon: "file", roles: ["super_admin"], isPrimary: false, enabled: true },
|
||||
],
|
||||
|
||||
// ── Top tab bar skin (legacy view) ─────────────────────────────────────
|
||||
menuBackground: "#ffffff", // TODO: tab bar background
|
||||
menuColor: "#334155", // inactive tab text
|
||||
menuActiveColor: "#357ABD", // active tab text (FHC blue)
|
||||
menuActiveBorderColor: "#357ABD", // active tab underline
|
||||
menuHoverColor: "#357ABD", // tab hover text
|
||||
|
||||
// ── Create / edit modal skin (shared BackofficeModal) ──────────────────
|
||||
modalAccentColor: "#5D2E1F", // brick top strip
|
||||
modalHeaderBackground: "#F6ECE8", // header bg (view)
|
||||
modalHeaderEditBackground: "#EACFC4", // header bg (edit)
|
||||
modalIconBackground: "#EACFC4", // header icon chip bg
|
||||
modalIconColor: "#5D2E1F", // header icon chip color
|
||||
modalTitleColor: "#1F2937", // modal title text
|
||||
modalFocusColor: "#357ABD", // input focus ring inside modals
|
||||
modalSurface: "#ffffff", // modal body surface
|
||||
},
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
// EXTRA CSS VARS
|
||||
// Inject any CSS custom property that isn't covered above.
|
||||
// Keys are variable names WITHOUT the leading "--".
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
// cssVars: {
|
||||
// "sidebar-width": "260px",
|
||||
// "header-height": "64px",
|
||||
// "content-max-width": "1440px",
|
||||
// "custom-gradient": "linear-gradient(135deg, #18aa9d 0%, #0f7a70 100%)",
|
||||
// },
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
// MANTINE THEME ESCAPE HATCH
|
||||
// Any Mantine theme key — merged on top of everything above.
|
||||
// Full list: https://mantine.dev/theming/theme-object/
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
// The FHC look & feel preset — provides the fhcBlue/fhcBrick/fhcGold/fhcGray
|
||||
// palettes and the `other.fhcLayout` / `other.fhcLayoutDark` tokens that the
|
||||
// "classic" user-management view renders with. Lives alongside this file in
|
||||
// app-config/ so the whole host config moves together at submodule-split time.
|
||||
mantineTheme: fhcMantineTheme,
|
||||
};
|
||||
25
user-management-config/tsconfig.json
Normal file
25
user-management-config/tsconfig.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"jsx": "react-jsx",
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": false,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["../user-management/src/*"],
|
||||
"@app-config/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": ["main.tsx", "project.theme.ts", "fhc.theme.ts", "../user-management/src"]
|
||||
}
|
||||
17
user-management-config/tsconfig.node.json
Normal file
17
user-management-config/tsconfig.node.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"strict": true,
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
107
user-management-config/vite.config.ts
Normal file
107
user-management-config/vite.config.ts
Normal file
@@ -0,0 +1,107 @@
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
import { defineConfig, loadEnv } from "vite";
|
||||
|
||||
export default defineConfig(({ mode }) => {
|
||||
const env = loadEnv(mode, process.cwd(), "");
|
||||
|
||||
// Same-origin sub-path the host server serves the module from. `base` makes
|
||||
// built asset URLs resolve under it AND is read back inside the module
|
||||
// (import.meta.env.BASE_URL) to set the router basename. Override with UM_BASE.
|
||||
const base = env.UM_BASE || "/_um/";
|
||||
|
||||
// Build straight into the host app's public dir so its ONE server serves the
|
||||
// module at <origin>/_um/ — no second server, same origin as the host.
|
||||
const outDir = path.resolve(__dirname, "../apps/backoffice/public/_um");
|
||||
|
||||
return {
|
||||
base,
|
||||
plugins: [
|
||||
tailwindcss(),
|
||||
react(),
|
||||
{
|
||||
// TinyMCE is self-hosted; the module references it at the ABSOLUTE path
|
||||
// /tinymce/..., which resolves at the host origin. Mirror the assets into
|
||||
// BOTH the module public dir AND the host public root. Regenerated on
|
||||
// build, so neither copy is a hand-managed artifact.
|
||||
name: "copy-tinymce-assets",
|
||||
buildStart() {
|
||||
const src = path.resolve(__dirname, "node_modules/tinymce");
|
||||
const dests = [
|
||||
path.resolve(__dirname, "../user-management/public/tinymce"),
|
||||
path.resolve(__dirname, "../apps/backoffice/public/tinymce"),
|
||||
];
|
||||
const runtimeEntries = [
|
||||
"tinymce.min.js",
|
||||
"icons",
|
||||
"models",
|
||||
"plugins",
|
||||
"skins",
|
||||
"themes",
|
||||
];
|
||||
|
||||
if (!fs.existsSync(src)) {
|
||||
throw new Error(
|
||||
"[copy-tinymce-assets] node_modules/tinymce not found in this app. Run `npm install` here first."
|
||||
);
|
||||
}
|
||||
|
||||
for (const dest of dests) {
|
||||
fs.mkdirSync(dest, { recursive: true });
|
||||
for (const entry of runtimeEntries) {
|
||||
const entrySrc = path.resolve(src, entry);
|
||||
const entryDest = path.resolve(dest, entry);
|
||||
if (!fs.existsSync(entrySrc)) continue;
|
||||
fs.cpSync(entrySrc, entryDest, { recursive: true, force: true });
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
assetsInclude: ["**/*.TTF"],
|
||||
// Static assets (incl. tinymce/) live in the module's public dir.
|
||||
publicDir: path.resolve(__dirname, "../user-management/public"),
|
||||
build: {
|
||||
rollupOptions: {
|
||||
external: [
|
||||
"file-type",
|
||||
"readable-web-to-node-stream",
|
||||
"strtok3",
|
||||
"token-types",
|
||||
],
|
||||
},
|
||||
outDir,
|
||||
assetsDir: "assets",
|
||||
sourcemap: false,
|
||||
emptyOutDir: true,
|
||||
minify: "esbuild",
|
||||
},
|
||||
resolve: {
|
||||
alias: [
|
||||
// @app-config = this host folder itself (project.theme.ts / fhc.theme.ts).
|
||||
{ find: /^@app-config\//, replacement: path.resolve(__dirname) + "/" },
|
||||
// @/ = the reusable module's source in the SIBLING module folder.
|
||||
{ find: /^@\//, replacement: path.resolve(__dirname, "../user-management/src") + "/" },
|
||||
],
|
||||
// node_modules is linked to the module's, but pin the singletons so the host
|
||||
// entry and the module code share ONE React 18 (no "invalid hook call").
|
||||
dedupe: ["react", "react-dom", "react-router-dom", "@tanstack/react-query", "@mantine/core", "@mantine/hooks"],
|
||||
},
|
||||
server: {
|
||||
port: env.DEV_PORT ? Number(env.DEV_PORT) : 5173,
|
||||
strictPort: true,
|
||||
fs: { allow: [path.resolve(__dirname, "..")] },
|
||||
},
|
||||
optimizeDeps: {
|
||||
exclude: ["file-type", "readable-web-to-node-stream", "strtok3", "token-types"],
|
||||
},
|
||||
esbuild: {
|
||||
drop: mode === "production" ? ["console", "debugger"] : [],
|
||||
},
|
||||
define: {
|
||||
global: {},
|
||||
},
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user