feat(backoffice): integrate IAM user management with host auth adapter and freight theming

This commit is contained in:
Dagimassefa
2026-06-21 12:16:48 +03:00
parent 8111606e89
commit e6d3e2401b

View File

@@ -1,36 +1,208 @@
import type { DesignConfig } from "@tria-plc/iamui";
import {
FREIGHT_BRAND,
FREIGHT_BRAND_DARK,
FREIGHT_BRAND_LIGHT,
freightBrand,
} from "@/theme/freight-brand";
export const iamConfig: DesignConfig = {
brand: {
appName: "EDR Freight Backoffice",
logoUrl: "/assets/logo.svg",
},
colors: {
primary: "#1d7754",
primary: FREIGHT_BRAND,
primaryForeground: "#ffffff",
secondary: "#ebb53d",
background: "#f6f8f4",
foreground: "#12261c",
border: "#d7e1da",
muted: "#eaf1ec",
mutedForeground: "#557164",
secondary: "#f4f7fb",
background: "#f7f9fb",
foreground: "#0f172a",
border: "#eef1f4",
muted: "#f1f5f9",
mutedForeground: "#64748b",
card: "#ffffff",
danger: "#c93d2b",
sidebar: "#ffffff",
danger: "#ef4444",
},
typography: {
fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif",
headingFontFamily: "Inter, ui-sans-serif, system-ui, sans-serif",
fontFamily: "'Outfit', var(--font-sans), system-ui, sans-serif",
headingFontFamily: "'Outfit', var(--font-sans), system-ui, sans-serif",
baseFontSize: "15px",
fontWeight: "500",
},
shape: {
radius: "0.875rem",
radius: "1rem",
},
shadows: {
card: "0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)",
dropdown: "0 12px 30px rgba(15, 23, 42, 0.12)",
modal: "0 20px 45px rgba(15, 23, 42, 0.2)",
},
components: {
buttonDefaultVariant: "filled",
inputDefaultSize: "sm",
inputRadius: "md",
modalRadius: "lg",
tableHighlightOnHover: true,
},
layout: {
userManagementView: "classic",
showTopBar: true,
sidebarBrandLabel: "User Management",
sidebarBrandSublabel: "EDR Freight",
sidebarWidth: "280px",
sidebarCollapsedWidth: "80px",
headerHeight: "80px",
contentMaxWidth: "none",
sidebarBackground: "#ffffff",
sidebarColor: "#475569",
sidebarMutedColor: "#94a3b8",
sidebarActiveBackground:
"linear-gradient(135deg, rgba(45, 191, 149, 0.14) 0%, rgba(27, 158, 122, 0.06) 100%)",
sidebarActiveColor: FREIGHT_BRAND,
sidebarHoverBackground: "#f5f7fa",
sidebarBorder: "#eef1f4",
sidebarRail: `linear-gradient(180deg, ${FREIGHT_BRAND_LIGHT} 0%, ${FREIGHT_BRAND} 100%)`,
sidebarBrandLabel: "EDR Freight",
sidebarBrandSublabel: "Backoffice Console",
menuBackground: "#ffffff",
menuActiveColor: FREIGHT_BRAND,
menuActiveBorderColor: FREIGHT_BRAND,
menuColor: "#64748b",
menuHoverColor: "#0f172a",
modalAccentColor: `linear-gradient(135deg, ${FREIGHT_BRAND_LIGHT} 0%, ${FREIGHT_BRAND} 100%)`,
modalHeaderBackground: "#ffffff",
modalHeaderEditBackground: "#ffffff",
modalIconBackground: freightBrand.mutedBg,
modalIconColor: FREIGHT_BRAND,
modalTitleColor: "#0f172a",
modalFocusColor: FREIGHT_BRAND,
modalSurface: "#ffffff",
},
appearance: {
colorScheme: "light",
slots: {
root: {
styles: {
background: "#f7f9fb",
color: "#0f172a",
fontFamily: "'Outfit', var(--font-sans), system-ui, sans-serif",
},
},
shell: {
styles: {
background: "#f7f9fb",
},
},
content: {
styles: {
background: "#f7f9fb",
},
},
page: {
styles: {
background: "#ffffff",
border: "1px solid #eef1f4",
borderRadius: "24px",
boxShadow:
"0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)",
},
},
card: {
styles: {
background: "#ffffff",
border: "1px solid #eef1f4",
borderRadius: "20px",
boxShadow:
"0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)",
},
},
sidebar: {
styles: {
background: "#ffffff",
border: "1px solid #eef1f4",
borderRadius: "16px",
boxShadow:
"0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)",
},
},
"sidebar-brand": {
styles: {
minHeight: "80px",
borderBottom: "1px solid #f1f5f9",
},
},
topbar: {
styles: {
background: "#ffffff",
border: "1px solid #eef1f4",
borderRadius: "16px",
boxShadow:
"0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.12)",
},
},
"topbar-panel": {
styles: {
background: "#f7f9fb",
border: "1px solid #eef1f4",
borderRadius: "12px",
},
},
"topbar-user-summary": {
styles: {
borderRadius: "14px",
},
},
table: {
styles: {
background: "#ffffff",
border: "1px solid #eef1f4",
borderRadius: "20px",
overflow: "hidden",
},
},
"table-header": {
styles: {
background: "#f8fafc",
},
},
modal: {
styles: {
borderRadius: "24px",
overflow: "hidden",
},
},
"modal-header": {
styles: {
background: "#ffffff",
borderBottom: "1px solid #eef1f4",
},
},
},
customCss: `
[data-um-app="user-management"] {
--um-page-gap: 20px;
}
[data-um-app="user-management"] h1,
[data-um-app="user-management"] h2,
[data-um-app="user-management"] h3,
[data-um-app="user-management"] h4,
[data-um-app="user-management"] h5,
[data-um-app="user-management"] h6 {
letter-spacing: -0.02em;
color: #0f172a;
}
[data-um-app="user-management"] [data-um-slot="sidebar-item"][aria-current="page"] {
box-shadow: inset 3px 0 0 ${FREIGHT_BRAND};
}
[data-um-app="user-management"] button,
[data-um-app="user-management"] input,
[data-um-app="user-management"] select,
[data-um-app="user-management"] textarea {
font-family: 'Outfit', var(--font-sans), system-ui, sans-serif;
}
`,
},
};