Tria/emaui
1
0
Fork 0
mirror of https://github.com/Tria-plc/emaui.git synced 2026-08-26 19:12:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

user managment ui

Browse Source
This commit is contained in:
mengstabketemaw
2026-06-12 11:46:25 +03:00
parent e6de85e62b
commit dacf39d95c
16 changed files with 752 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
user-management-config/project.theme.ts Normal file
View 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,
};