mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-08-26 13:02:50 +00:00
215 lines
16 KiB
TypeScript
215 lines
16 KiB
TypeScript
/**
|
|
* 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: "EMA Portal", // EMA — shown in the browser tab
|
|
logoUrl: "/assets/ema-logo.png",
|
|
faviconUrl: "/assets/ema-logo.png",
|
|
},
|
|
|
|
// ─────────────────────────────────────────────────────────────────────────
|
|
// 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: "#4b7fe5", // 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, #1A3A5C 0%, #0F2440 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, #4A90E2 0%, #1A3A5C 100%)",
|
|
sidebarBrandLabel: "EMA Portal",
|
|
sidebarBrandSublabel: "User Management",
|
|
|
|
// ── 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: "#4b7fe5", // active tab text (FHC blue)
|
|
menuActiveBorderColor: "#4b7fe5", // active tab underline
|
|
menuHoverColor: "#4b7fe5", // tab hover text
|
|
|
|
// ── Create / edit modal skin (shared BackofficeModal) ──────────────────
|
|
modalAccentColor: "#4b7fe5", // blue top strip
|
|
modalHeaderBackground: "#EEF4FC", // header bg (view)
|
|
modalHeaderEditBackground: "#D9E8FA", // header bg (edit)
|
|
modalIconBackground: "#D9E8FA", // header icon chip bg
|
|
modalIconColor: "#4b7fe5", // header icon chip color
|
|
modalTitleColor: "#1F2937", // modal title text
|
|
modalFocusColor: "#4b7fe5", // 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,
|
|
};
|