varminer-app-header 2.6.2 → 2.6.4

package/dist/index.js

@@ -34,6 +34,40 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
+const tenantFallbackCss = "/* ================================================================\r\n   TENANT MODULE CSS — varminer-app-header-npm-fe\r\n   Auto-generated by generate-tenant-css.js\r\n   Branch scanned: Development\r\n   Covers: CSS var() references, SCSS $variables, and hardcoded\r\n   brand values detected in component files.\r\n   ================================================================ */\r\n\r\n\r\n\n/* ── FONT FACES: local dev fallback (generate-tenant-css) ────────────── */\n/* @font-face rules for local dev fallback.  In production the CDN\n   tenant.css @font-face declarations (built by generate-tenant-all.js)\n   load via injectTenantCss() and override these automatically.\n   To change the local font path, update LOCAL_FONT_BASE_URL above. */\n@font-face {\n  font-family: \"OpenSans-Light\";\n  src: url(\"/asset/font/OpenSans-Light.ttf\") format(\"truetype\");\n  font-weight: 300;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-LightItalic\";\n  src: url(\"/asset/font/OpenSans-LightItalic.ttf\") format(\"truetype\");\n  font-weight: 300;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-Regular\";\n  src: url(\"/asset/font/OpenSans-Regular.ttf\") format(\"truetype\");\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-Italic\";\n  src: url(\"/asset/font/OpenSans-Italic.ttf\") format(\"truetype\");\n  font-weight: 400;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-Medium\";\n  src: url(\"/asset/font/OpenSans-Medium.ttf\") format(\"truetype\");\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-MediumItalic\";\n  src: url(\"/asset/font/OpenSans-MediumItalic.ttf\") format(\"truetype\");\n  font-weight: 500;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-SemiBold\";\n  src: url(\"/asset/font/OpenSans-SemiBold.ttf\") format(\"truetype\");\n  font-weight: 600;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-SemiBoldItalic\";\n  src: url(\"/asset/font/OpenSans-SemiBoldItalic.ttf\") format(\"truetype\");\n  font-weight: 600;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-Bold\";\n  src: url(\"/asset/font/OpenSans-Bold.ttf\") format(\"truetype\");\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-BoldItalic\";\n  src: url(\"/asset/font/OpenSans-BoldItalic.ttf\") format(\"truetype\");\n  font-weight: 700;\n  font-style: italic;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-ExtraBold\";\n  src: url(\"/asset/font/OpenSans-ExtraBold.ttf\") format(\"truetype\");\n  font-weight: 800;\n  font-style: normal;\n  font-display: swap;\n}\n@font-face {\n  font-family: \"OpenSans-ExtraBoldItalic\";\n  src: url(\"/asset/font/OpenSans-ExtraBoldItalic.ttf\") format(\"truetype\");\n  font-weight: 800;\n  font-style: italic;\n  font-display: swap;\n}\n/* ── END FONT FACES ── */\n\n/* ── FONT FACES: local dev fallback (generate-tenant-css) ────────────── */\r\n/* @font-face rules for local dev fallback.  In production the CDN\r\n   tenant.css @font-face declarations (built by generate-tenant-all.js)\r\n   load via injectTenantCss() and override these automatically.\r\n   To change the local font path, update LOCAL_FONT_BASE_URL above. */\r\n@font-face {\r\n  font-family: \"OpenSans-Light\";\r\n  src: url(\"/asset/font/OpenSans-Light.ttf\") format(\"truetype\");\r\n  font-weight: 300;\r\n  font-style: normal;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-LightItalic\";\r\n  src: url(\"/asset/font/OpenSans-LightItalic.ttf\") format(\"truetype\");\r\n  font-weight: 300;\r\n  font-style: italic;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-Regular\";\r\n  src: url(\"/asset/font/OpenSans-Regular.ttf\") format(\"truetype\");\r\n  font-weight: 400;\r\n  font-style: normal;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-Italic\";\r\n  src: url(\"/asset/font/OpenSans-Italic.ttf\") format(\"truetype\");\r\n  font-weight: 400;\r\n  font-style: italic;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-Medium\";\r\n  src: url(\"/asset/font/OpenSans-Medium.ttf\") format(\"truetype\");\r\n  font-weight: 500;\r\n  font-style: normal;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-MediumItalic\";\r\n  src: url(\"/asset/font/OpenSans-MediumItalic.ttf\") format(\"truetype\");\r\n  font-weight: 500;\r\n  font-style: italic;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-SemiBold\";\r\n  src: url(\"/asset/font/OpenSans-SemiBold.ttf\") format(\"truetype\");\r\n  font-weight: 600;\r\n  font-style: normal;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-SemiBoldItalic\";\r\n  src: url(\"/asset/font/OpenSans-SemiBoldItalic.ttf\") format(\"truetype\");\r\n  font-weight: 600;\r\n  font-style: italic;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-Bold\";\r\n  src: url(\"/asset/font/OpenSans-Bold.ttf\") format(\"truetype\");\r\n  font-weight: 700;\r\n  font-style: normal;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-BoldItalic\";\r\n  src: url(\"/asset/font/OpenSans-BoldItalic.ttf\") format(\"truetype\");\r\n  font-weight: 700;\r\n  font-style: italic;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-ExtraBold\";\r\n  src: url(\"/asset/font/OpenSans-ExtraBold.ttf\") format(\"truetype\");\r\n  font-weight: 800;\r\n  font-style: normal;\r\n  font-display: swap;\r\n}\r\n@font-face {\r\n  font-family: \"OpenSans-ExtraBoldItalic\";\r\n  src: url(\"/asset/font/OpenSans-ExtraBoldItalic.ttf\") format(\"truetype\");\r\n  font-weight: 800;\r\n  font-style: italic;\r\n  font-display: swap;\r\n}\r\n/* ── END FONT FACES ── */\r\n\r\n/* ═══════════════════════════════════════════════════════════════\r\n   MODULE: app-header (varminer-app-header-npm-fe)\r\n   CSS custom-properties consumed by this micro-frontend.\r\n   These are default / fallback values overridden by tenant.css.\r\n   ═══════════════════════════════════════════════════════════════ */\r\n:root {\r\n  --color-border-header: #e5e9eb;\r\n  --color-brand-accent: #1aa7ee;\r\n  --color-brand-deep-navy: #0f1e75;\r\n  --color-brand-primary: #1e2f97;\r\n  --color-brand-primary-hover-bg: rgba(30, 47, 151, 0.04);\r\n  --color-header-bg: #ffffff;\r\n  --color-menu-bg-gradient: linear-gradient(180deg, #fff, #ddf7ff, #ddf7ff);\r\n  --color-menu-bg-gradient-end: #ddf7ff;\r\n  --color-menu-shadow: rgba(0,0,0,0.32);\r\n  --color-menu-text: #000;\r\n  --color-profile-email: rgba(0, 0, 0, 0.6);\r\n  --color-profile-name: #1e2f97;\r\n  --color-profile-role: rgba(0, 0, 0, 0.38);\r\n  --color-status-offline: #808080;\r\n  --color-status-online: #44b700;\r\n  --font-brand-regular: OpenSans-Regular, Roboto, sans-serif;\r\n  --font-brand-semibold: OpenSans-SemiBold, Roboto, sans-serif;\r\n  --image-logo-svg: url(\"asset/logo.svg\");\r\n  --size-header-height: 65px;\r\n  --size-header-zindex: 200;\r\n  --size-menu-width: 280px;\r\n\n  /* ── Auto-discovered on 2026-03-17 ── */\n  --color-white: #fff;\n  --color-hex-aacccc: #acc;\n  --color-selected-row: #ddf7ff;\n  --color-black: #000;\n  --color-text-secondary-alpha: rgba(0, 0, 0, 0.6);\n  --color-text-muted-alpha: rgba(0, 0, 0, 0.38);\n  --color-brand-primary-dark: #0b1659;\n  --color-primary-dark: #111c56;\n  --color-brand-navy-header: #13257b;\n  --color-brand-accent-hover: #0a8bcc;\n  --color-brand-switch: #657bfd;\n  --color-brand-secondary: #3f8cff;\n  --color-igv-gradient-start: #1e3c72;\n  --color-igv-gradient-end: #2a5298;\n  --color-bg-page: #f5f9ff;\n  --color-bg-title-section: #e6f2ff;\n  --color-bg-dialog: #f7fbff;\n  --color-bg-panel: #e3f4fd;\n  --color-bg-side-menu-hover: #e3f2fd;\n  --color-bg-subtle: #f5f5f5;\n  --color-bg-scrollbar-track: #f1f1f1;\n  --Grey-50: #ebeff5;\n  --color-border-blue: #b5e6ff;\n  --color-border-default: #dadada;\n  --color-border-sky-blue-300: #4fc4ff;\n  --color-border-light: #e4e4e4;\n  --color-border-chip: #bdbdbd;\n  --color-text-heading: #27323d;\n  --color-text-dark: #0f172a;\n  --color-text-input: #0a0a0a;\n  --color-text-muted-slate: #64748b;\n  --Grey-600: #586d81;\n  --Grey-400: #7c8fa3;\n  --color-status-success: #4caf50;\n  --color-status-success-dark: #2e7d32;\n  --color-status-warning: #ef6c00;\n  --color-status-error: #d32f2f;\n  --color-scrollbar-thumb: #1976d2;\n  --color-scrollbar-track: #e3edf7;\n  --color-side-menu-active-bg: #1565c0;\n  --color-column-rows-even: #edfbff;\n  --color-bg-error-row: #fcefef;\n  --color-bg-error-row-hover: #f9e0e0;\n  --color-border-error-row: #e78e8e;\n  --color-bg-warning-row: #fff5ed;\n  --color-bg-warning-row-hover: #ffe8d6;\n  --color-border-warning-row: #e8a87c;\n  --color-bg-success-row: #eff5ef;\n  --color-bg-success-row-hover: #e5ede5;\n  --color-shadow-dark: #b3b3b3;\n  --color-bg-success-toast: #edf7ed;\n  --color-bg-error-toast: #ffebee;\n  --color-text-success-toast: #1e4620;\n  --color-text-error-toast: #c62828;\n  --color-gene-type-uncertain: #5034ee;\n  --color-gene-type-candidate: #ff9800;\n  --color-gene-type-known: #2196f3;\n  --color-border-disabled: #ccc;\n  --color-scrollbar-handle: #888;\n  --color-text-placeholder: #666;\n  --color-scrollbar-handle-dark: #555;\n  --color-text-dark-secondary: #333;\n  --color-text-near-black: #222;\n  --color-hex-e0e0e0: #e0e0e0;\n  --color-hex-c0c0c0: #c0c0c0;\n  --color-hex-f8f9fa: #f8f9fa;\n  --color-brand-primary-active-bg: rgba(30, 47, 151, 0.08);\n  --color-chip-background: rgba(30, 47, 151, 0.12);\n  --color-border-brand-muted: rgba(30, 47, 151, 0.23);\n  --color-accent-hover-subtle: rgba(26, 167, 238, 0.04);\n  --color-accent-hover-bg: rgba(26, 167, 238, 0.08);\n  --color-accent-selected: rgba(26, 167, 238, 0.12);\n  --color-accent-selected-dark: rgba(26, 167, 238, 0.16);\n  --color-accent-light: rgba(26, 167, 238, 0.34);\n  --color-accent-border: rgba(26, 167, 238, 0.54);\n  --color-shadow-dialog: rgba(8, 37, 68, 0.18);\n  --color-shadow-card: rgba(10, 33, 62, 0.08);\n  --color-shadow-card-hover: rgba(10, 33, 62, 0.16);\n  --color-deep-navy-hover-bg: rgba(15, 30, 117, 0.08);\n  --color-shadow-body: rgba(15, 23, 42, 0.08);\n  --color-white-overlay: rgba(255, 255, 255, 0.1);\n  --color-action-hover-bg: rgba(0, 0, 0, 0.04);\n  --color-overlay-subtle: rgba(0, 0, 0, 0.10);\n  --color-divider: rgba(0, 0, 0, 0.12);\n  --color-overlay-medium: rgba(0, 0, 0, 0.14);\n  --color-shadow-light: rgba(0, 0, 0, 0.15);\n  --color-shadow-medium: rgba(0, 0, 0, 0.20);\n  --color-border-outline: rgba(0, 0, 0, 0.26);\n  --color-border-medium: rgba(0, 0, 0, 0.5);\n  --color-icon-default: rgba(0, 0, 0, 0.54);\n  --color-action-active: rgba(0, 0, 0, 0.56);\n  --color-border-dark: rgba(0, 0, 0, 0.7);\n  --color-text-primary-alpha: rgba(0, 0, 0, 0.87);\n\n  /* ── Auto-discovered on 2026-03-17 ── */\n  --color-header-accent: #aacccc;\n  --color-error-pink: #dc004e;\n  --color-text-disabled: #999999;\n  --color-overlay-40: rgba(0, 0, 0, 0.4);\n  --color-white-70: rgba(255, 255, 255, 0.7);\n  --color-white-90: rgba(255, 255, 255, 0.9);\n  --color-white-95: rgba(255, 255, 255, 0.95);\n  --color-success-90: rgba(76, 175, 80, 0.9);\n  --color-error-solid: rgba(211, 47, 47, 1);\n  --color-error-50: rgba(211, 47, 47, 0.5);\n  --color-rgba-000000: rgb(0,0,0);\n}\n";
+
+const TENANT_FALLBACK_STYLE_ID = "tenant-fallback-css";
+function rewriteFallbackAssetUrls(cssText) {
+    const baseUrl = undefined?.BASE_URL ?? "/";
+    const normalizedBaseUrl = baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`;
+    return cssText.replace(/url\((["']?)\/asset\//g, `url($1${normalizedBaseUrl}asset/`);
+}
+function injectTenantFallbackCss(cssText) {
+    if (typeof document === "undefined")
+        return;
+    const rewrittenCss = rewriteFallbackAssetUrls(cssText);
+    const existingStyle = document.getElementById(TENANT_FALLBACK_STYLE_ID);
+    if (existingStyle) {
+        if (existingStyle.textContent?.includes(rewrittenCss))
+            return;
+        existingStyle.textContent = existingStyle.textContent
+            ? `${existingStyle.textContent}\n\n${rewrittenCss}`
+            : rewrittenCss;
+        return;
+    }
+    const style = document.createElement("style");
+    style.id = TENANT_FALLBACK_STYLE_ID;
+    style.textContent = rewrittenCss;
+    const tenantCssLink = document.querySelector('link[rel="stylesheet"][href*="tenant.css"]');
+    if (tenantCssLink) {
+        document.head.insertBefore(style, tenantCssLink);
+        return;
+    }
+    document.head.appendChild(style);
+}
+
+injectTenantFallbackCss(tenantFallbackCss);
+
 const DrawerContext = React__namespace.createContext({
     isDrawerOpen: false,
     openDrawer: () => { },
@@ -94,21 +128,79 @@ function setHeaderAuth(auth) {
     }
 }
 /**
- * User display data: from IAM only (linn-i-am-userDetails). No dependency on persist:userdb.
+ * User display data: prefers linn-i-am-userDetails (IAM), falls back to
+ * persist:userdb → profileInformation.userDetails, then authDetails.auth.user.
  */
 const getUserDataFromStorage = () => {
+    // Primary source: IAM app sets this after OTP verification
     const iamUser = getStoredUserDetails();
-    if (!iamUser)
-        return null;
-    const name = [iamUser.firstName, iamUser.lastName].filter(Boolean).join(" ").trim();
-    const role = iamUser.roles?.length ? iamUser.roles[0] : iamUser.workInfo?.jobTitle ?? "";
-    return {
-        name: name || "",
-        email: iamUser.email || "",
-        role: role || "",
-        avatar: undefined,
-        initials: name ? name.split(/\s+/).map((s) => s[0]).join("").slice(0, 2).toUpperCase() : undefined,
-    };
+    if (iamUser) {
+        const name = [iamUser.firstName, iamUser.lastName].filter(Boolean).join(" ").trim();
+        const role = iamUser.roles?.length ? iamUser.roles[0] : iamUser.workInfo?.jobTitle ?? "";
+        return {
+            name: name || "",
+            email: iamUser.email || "",
+            role: role || "",
+            avatar: undefined,
+            initials: name ? name.split(/\s+/).map((s) => s[0]).join("").slice(0, 2).toUpperCase() : undefined,
+        };
+    }
+    // Fallback: read from persist:userdb which is written by the IAM/login app
+    try {
+        const raw = localStorage.getItem("persist:userdb");
+        if (!raw)
+            return null;
+        const outer = JSON.parse(raw);
+        const parseNested = (v) => {
+            if (typeof v === "string") {
+                try {
+                    return JSON.parse(v);
+                }
+                catch {
+                    return v;
+                }
+            }
+            return v;
+        };
+        // profileInformation.userDetails has firstName, lastName, email, roles[]
+        const profileInfo = parseNested(outer.profileInformation);
+        const userDetails = profileInfo?.userDetails;
+        if (userDetails && (userDetails.firstName || userDetails.lastName || userDetails.email)) {
+            const first = userDetails.firstName || "";
+            const last = userDetails.lastName || "";
+            const name = [first, last].filter(Boolean).join(" ").trim();
+            const roles = userDetails.roles;
+            const role = roles?.length ? roles[0] : userDetails.jobTitle ?? "";
+            return {
+                name,
+                email: userDetails.email || "",
+                role: role || "",
+                avatar: undefined,
+                initials: name ? name.split(/\s+/).map((s) => s[0]).join("").slice(0, 2).toUpperCase() : undefined,
+            };
+        }
+        // authDetails.auth.user has firstname/lastname (lowercase n) + activeRole
+        const authDetailsRaw = parseNested(outer.authDetails);
+        const auth = authDetailsRaw?.auth;
+        const userObj = auth?.user;
+        if (auth && (userObj?.firstname || userObj?.lastname)) {
+            const first = userObj?.firstname || "";
+            const last = userObj?.lastname || "";
+            const name = [first, last].filter(Boolean).join(" ").trim();
+            const role = auth.activeRole || "";
+            return {
+                name,
+                email: "",
+                role,
+                avatar: undefined,
+                initials: name ? name.split(/\s+/).map((s) => s[0]).join("").slice(0, 2).toUpperCase() : undefined,
+            };
+        }
+    }
+    catch {
+        // ignore parse errors
+    }
+    return null;
 };
 const getNotificationCountFromStorage = () => {
     const userDbString = localStorage.getItem("persist:userdb");