nexus-shared 1.1.21 → 3.0.0

package/src/components/layouts/global-dialogbox.tsx

@@ -1,431 +0,0 @@
-"use client";
-
-import React, { useEffect } from "react";
-import { ConvertRemToPixels, IsKeyPressed } from "../../helpers/browser-helpers";
-import { Debounce, DebouncedFunction } from "../../helpers/utility-helpers";
-import { EKeys } from "../../interfaces/browser-interfaces";
-import { IDialogboxResults } from "../../interfaces/dialogbox-interfaces";
-import { DEFAULT_ANIMATION_DURATION, EPositions } from "../../interfaces/layout-interfaces";
-import { EBackgrounds } from "../../interfaces/theme-interfaces";
-import { UN } from "../../interfaces/type-interfaces";
-import { NEXUS_CONFIG } from "../../nexus.environments";
-
-const GetDialogId = (buttonIdentity: string) => `dialog-${buttonIdentity}`;
-const VISIBILITY_KEY = "data-dialog-visibility";
-export const DEFAULT_DIALOGBOX_HOVER_EFFECT_DELAY = 500;
-
-interface IDialogRegistryEntry {
-  triggerElement: HTMLElement;
-  affectedElement: HTMLElement;
-  iggnoreChildClick?: boolean | UN;
-  close: (isInitial: boolean) => void;
-}
-
-/** All initialized dialogs — O(1) lookup by trigger. */
-const dialogRegistry = new Map<HTMLElement, IDialogRegistryEntry>();
-/** Only open dialogs — hot paths iterate this (usually 1–2), not all 100+ instances. */
-const openDialogs = new Set<HTMLElement>();
-
-let globalDocumentClickAttached = false;
-let globalDocumentClickTimeout: ReturnType<typeof setTimeout>;
-
-const shouldKeepDialogOpen = (entry: IDialogRegistryEntry, path: EventTarget[], target: HTMLElement) => {
-  if (entry.iggnoreChildClick === false) return target === entry.triggerElement;
-
-  return path.includes(entry.triggerElement) || path.includes(entry.affectedElement) || isClickInsideOpenNestedDialog(entry.triggerElement, path) || entry.triggerElement.contains(target);
-};
-
-const isClickInsideOpenNestedDialog = (parentTrigger: HTMLElement, path: EventTarget[]) => {
-  for (const trigger of openDialogs) {
-    if (trigger === parentTrigger) continue;
-    const nested = dialogRegistry.get(trigger);
-    if (!nested || !parentTrigger.contains(nested.triggerElement)) continue;
-    if (path.includes(nested.triggerElement) || path.includes(nested.affectedElement)) return true;
-  }
-  return false;
-};
-
-const onGlobalDocumentClick = (e: MouseEvent) => {
-  if (openDialogs.size === 0) return;
-
-  const path = e.composedPath();
-  const target = e.target as HTMLElement;
-
-  for (const trigger of [...openDialogs]) {
-    const entry = dialogRegistry.get(trigger);
-    if (!entry || shouldKeepDialogOpen(entry, path, target)) continue;
-    entry.close(false);
-  }
-};
-
-const scheduleGlobalDocumentClick = () => {
-  clearTimeout(globalDocumentClickTimeout);
-  globalDocumentClickTimeout = setTimeout(() => {
-    if (openDialogs.size === 0) return;
-    if (!globalDocumentClickAttached) {
-      document.addEventListener("click", onGlobalDocumentClick);
-      globalDocumentClickAttached = true;
-    }
-  }, 0);
-};
-
-const teardownGlobalDocumentClick = () => {
-  if (openDialogs.size > 0) return;
-  clearTimeout(globalDocumentClickTimeout);
-  document.removeEventListener("click", onGlobalDocumentClick);
-  globalDocumentClickAttached = false;
-};
-
-/** Keep parent panels open when opening a nested dialog (e.g. theme overflow ellipsis inside utility menu). */
-const closeOtherDialogs = (currentTrigger: HTMLElement, isInitial: boolean) => {
-  for (const trigger of openDialogs) {
-    if (trigger === currentTrigger) continue;
-    const entry = dialogRegistry.get(trigger);
-    if (!entry) continue;
-    if (entry.triggerElement.contains(currentTrigger)) continue;
-    entry.close(isInitial);
-  }
-};
-
-const closeNestedDialogs = (parentTrigger: HTMLElement, isInitial: boolean) => {
-  for (const trigger of openDialogs) {
-    if (trigger === parentTrigger) continue;
-    const entry = dialogRegistry.get(trigger);
-    if (!entry || !parentTrigger.contains(entry.triggerElement)) continue;
-    entry.close(isInitial);
-  }
-};
-
-const registerDialog = (entry: IDialogRegistryEntry) => {
-  dialogRegistry.set(entry.triggerElement, entry);
-};
-
-const unregisterDialog = (triggerElement: HTMLElement) => {
-  openDialogs.delete(triggerElement);
-  dialogRegistry.delete(triggerElement);
-  teardownGlobalDocumentClick();
-};
-
-/**
- *
- * @param children
- * @param position
- * @param buttonIdentity
- * @param background
- * @param defaultWidth The default width of the dialog box (in REM units).
- * @param defaultPadding
- * @param iggnoreChildClick
- * @param isFixedHeight
- * @param defaultClass
- * @param preferTopWhenEnoughSpace
- *
- * @returns
- */
-interface IDialogboxProps {
-  children: React.ReactNode;
-  hoverEffectDelay?: number | boolean;
-  position?: EPositions;
-  buttonIdentity: string;
-  background?: EBackgrounds;
-  defaultWidth?: number;
-  defaultPadding?: number;
-  autoAdjuctPosition?: boolean;
-  iggnoreChildClick?: boolean;
-  isFixedHeight?: boolean;
-  preferTopWhenEnoughSpace?: boolean;
-  defaultClass?: string;
-}
-
-export const GlobalDialogbox = ({ children, hoverEffectDelay, position, buttonIdentity, background, defaultWidth, defaultPadding, iggnoreChildClick, isFixedHeight, defaultClass, preferTopWhenEnoughSpace }: Readonly<IDialogboxProps>) => {
-  const [isVisible, setIsVisible] = React.useState<boolean>(false);
-
-  const onVisibilityChanged = (visible: boolean) => {
-    setIsVisible(visible);
-  };
-  const onDisposed = () => {};
-
-  useEffect(() => {
-    let dialogResults: IDialogboxResults | null = null;
-    const timeout = setTimeout(() => {
-      clearTimeout(timeout);
-      const button = document.getElementById(buttonIdentity);
-      const dialog = document.getElementById(GetDialogId(buttonIdentity));
-      if (!button || !dialog) return;
-
-      const defaultHeight = isFixedHeight ? "80vh" : undefined;
-      dialogResults = InitializeDialogbox(button, dialog, hoverEffectDelay, defaultHeight, defaultPadding, defaultWidth, background, onVisibilityChanged, onDisposed, iggnoreChildClick, position, defaultClass, preferTopWhenEnoughSpace, null);
-    }, 0);
-    return () => {
-      dialogResults?.destroy();
-      clearTimeout(timeout);
-    };
-  }, []);
-
-  return <ul id={GetDialogId(buttonIdentity)}>{isVisible && children}</ul>;
-};
-
-export const InitializeDialogbox = (triggerElement: HTMLElement, affectedElement: HTMLElement, hoverEffectDelay?: number | boolean | UN, defaultHeight?: string | UN, defaultPadding?: number | UN, defaultWidth?: number | UN, background?: EBackgrounds | UN, onVisibilityChanged?: (isVisible: boolean) => void | UN, onDisposed?: () => void | UN, iggnoreChildClick?: boolean | UN, position?: EPositions | UN, defaultClass?: string | UN, preferTopWhenEnoughSpace?: boolean | UN, targetInput?: HTMLTextAreaElement | HTMLInputElement | UN, isAutoHideInInitialization?: boolean | UN): IDialogboxResults | null => {
-  if (!triggerElement || !affectedElement) return null;
-  defaultHeight = defaultHeight ?? "auto";
-  defaultPadding = defaultPadding ?? 5;
-  defaultWidth = defaultWidth ?? 34;
-
-  const isTargetForInput: boolean = targetInput ? true : false;
-
-  const forceUpdate = (index: number) => {
-    if (index === 0) {
-      affectedElement.classList.remove("anim", "dn");
-    } else if (index === 1) {
-      affectedElement.classList.add("dn");
-      affectedElement.classList.remove("anim");
-    }
-  };
-  const forceUpdateDebounced = Debounce(forceUpdate, 300);
-  const refreshDialog = () => {
-    const dialog = affectedElement;
-    const parentElement = triggerElement;
-
-    if (!parentElement) return;
-
-    const inputRec = parentElement.getBoundingClientRect();
-    const boxRec = dialog.getBoundingClientRect();
-    const style = window.getComputedStyle(parentElement);
-    const inputHeight = inputRec.height + parseFloat(style.borderBottomWidth) + parseFloat(style.borderTopWidth);
-    const top = inputRec.top + inputHeight;
-    const windowHeight = window.innerHeight;
-    const bottomOverflow = top + boxRec.height;
-    dialog.classList.remove("T");
-
-    const topSpace = inputRec.top - boxRec.height;
-    const bottomSpace = windowHeight - (inputRec.top + inputHeight + boxRec.height);
-
-    if (!isTargetForInput) {
-      if (preferTopWhenEnoughSpace && topSpace > 0 && bottomSpace > 0) {
-        // Both sides have space, prefer top
-        dialog.classList.add("T");
-        dialog.style.top = `${top - inputHeight - boxRec.height}px`;
-      } else if (bottomOverflow > windowHeight) {
-        // Bottom overflow
-        if (top - inputHeight - boxRec.height > 0) {
-          dialog.classList.add("T");
-          dialog.style.top = `${top - inputHeight - boxRec.height}px`;
-        } else {
-          // If no space on top either, push to bottom of screen
-          dialog.style.top = `${windowHeight - boxRec.height}px`;
-        }
-      } else {
-        // Default to bottom
-        dialog.style.top = `${top}px`;
-      }
-    }
-
-    // REM to PX conversion
-
-    const DEFAULT_PADDING = ConvertRemToPixels(1);
-
-    if (position === EPositions.Right) dialog.style.left = `${inputRec.right - boxRec.width}px`;
-    else if (position === EPositions.Left) dialog.style.left = `${inputRec.left}px`;
-    else if (position === EPositions.Center) dialog.style.left = `${inputRec.left + inputRec.width / 2 - boxRec.width / 2}px`;
-
-    // Handle viewport overflow for dialogs without explicit position
-    if (!position) {
-      if (inputRec.left + boxRec.width > window.innerWidth) dialog.style.left = `${window.innerWidth - boxRec.width - DEFAULT_PADDING}px`;
-      else dialog.style.left = `${inputRec.left}px`;
-    } else {
-      // For positioned dialogs, just check if they overflow and adjust if needed
-      const currentLeft = parseFloat(dialog.style.left);
-      if (!isNaN(currentLeft) && currentLeft + boxRec.width > window.innerWidth) {
-        dialog.style.left = `${window.innerWidth - boxRec.width - DEFAULT_PADDING}px`;
-      }
-    }
-
-    if (parseFloat(dialog.style.left) < DEFAULT_PADDING) dialog.style.left = `${DEFAULT_PADDING}px`;
-
-    // ----- Arrow positioning (works for Left / Center / Right) -----
-    const dialogRect = dialog.getBoundingClientRect();
-    const inputCenterX = inputRec.left + inputRec.width / 2;
-
-    // Arrow position relative to dialog
-    let arrowLeft = inputCenterX - dialogRect.left + ConvertRemToPixels(0.15);
-
-    // Clamp arrow to dialog bounds (optional but recommended)
-    const ARROW_MARGIN = ConvertRemToPixels(1);
-    arrowLeft = Math.max(ARROW_MARGIN, Math.min(arrowLeft, boxRec.width - ARROW_MARGIN));
-
-    dialog.style.setProperty("--arrow-left", `${arrowLeft}px`);
-
-    const pxWidth = inputRec.width;
-    const DEFAULT_WIDTH = ConvertRemToPixels(defaultWidth);
-    dialog.style.width = `${Math.max(pxWidth, DEFAULT_WIDTH)}px`;
-  };
-  const _onMouseEnter = (e: MouseEvent) => {
-    if (!triggerElement.matches(":hover")) return;
-    if (e.target !== triggerElement) return;
-
-    const isVisible = triggerElement.getAttribute(VISIBILITY_KEY) === "true";
-    if (!isVisible) visibility(true, false);
-  };
-  let hoverListenersAttached = false;
-  let onMouseEnterDebounced: DebouncedFunction<typeof _onMouseEnter> | null = null;
-  const getHoverDebounce = () => {
-    if (!onMouseEnterDebounced) {
-      onMouseEnterDebounced = Debounce(_onMouseEnter, (hoverEffectDelay === true ? DEFAULT_DIALOGBOX_HOVER_EFFECT_DELAY : (hoverEffectDelay as number)) ?? DEFAULT_DIALOGBOX_HOVER_EFFECT_DELAY);
-    }
-    return onMouseEnterDebounced;
-  };
-  const onMouseLeaveCancelHover = () => {
-    onMouseEnterDebounced?.cancel();
-  };
-  const attachHoverListeners = () => {
-    if (!hoverEffectDelay || hoverListenersAttached) return;
-    triggerElement.addEventListener("mouseenter", getHoverDebounce());
-    triggerElement.addEventListener("mouseleave", onMouseLeaveCancelHover);
-    hoverListenersAttached = true;
-  };
-  const onHoverProxy = (e: MouseEvent) => {
-    attachHoverListeners();
-    triggerElement.removeEventListener("mouseenter", onHoverProxy);
-    getHoverDebounce()(e);
-  };
-
-  const setupDialog = () => {
-    triggerElement.addEventListener("click", onClick);
-    if (hoverEffectDelay) triggerElement.addEventListener("mouseenter", onHoverProxy);
-    if (isTargetForInput) {
-      triggerElement.addEventListener("focusin", onFocus);
-      triggerElement.addEventListener("focusout", onFocusOut);
-      document.addEventListener("keydown", onKeyDown, true);
-    }
-
-    const timeout = setTimeout(() => {
-      clearTimeout(timeout);
-      refreshDialog();
-      isAutoHideInInitialization = isAutoHideInInitialization ?? true;
-      visibility(!isAutoHideInInitialization, true);
-    }, 0);
-  };
-  const cleanupDialog = () => {
-    triggerElement.setAttribute(VISIBILITY_KEY, "false");
-    triggerElement.removeEventListener("click", onClick);
-    if (hoverEffectDelay) {
-      triggerElement.removeEventListener("mouseenter", onHoverProxy);
-      if (hoverListenersAttached) {
-        triggerElement.removeEventListener("mouseenter", getHoverDebounce());
-        triggerElement.removeEventListener("mouseleave", onMouseLeaveCancelHover);
-        onMouseEnterDebounced?.cancel();
-      }
-    }
-    clearTimeout(visibilityTimeout);
-    teardownGlobalDocumentClick();
-    if (isTargetForInput) {
-      triggerElement.removeEventListener("focusin", onFocus);
-      triggerElement.removeEventListener("focusout", onFocusOut);
-      document.removeEventListener("keydown", onKeyDown);
-      document.removeEventListener("scroll", onDocumentScroll);
-    }
-    unregisterDialog(triggerElement);
-    onDisposed?.();
-  };
-  // @ts-ignore
-  let visibilityTimeout: NodeJS.Timeout;
-  const visibility = (visible: boolean, isInitial: boolean) => {
-    const isVisible = visible;
-    if (!triggerElement) return;
-    if (isVisible) {
-      if (!isInitial) closeOtherDialogs(triggerElement, false);
-
-      openDialogs.add(triggerElement);
-      scheduleGlobalDocumentClick();
-
-      clearTimeout(visibilityTimeout);
-      forceUpdateDebounced.cancel();
-      onMouseEnterDebounced?.cancel();
-
-      onVisibilityChanged?.(isVisible);
-      refreshDialog();
-      const timeout2 = setTimeout(() => {
-        clearTimeout(timeout2);
-        refreshDialog();
-      }, 0);
-
-      affectedElement.classList.remove("dn");
-      affectedElement.style.pointerEvents = "";
-      const timeout = setTimeout(() => {
-        clearTimeout(timeout);
-        affectedElement.classList.remove("o0");
-        affectedElement.classList.add("anim");
-        triggerElement.setAttribute(VISIBILITY_KEY, "true");
-      }, 10);
-      forceUpdateDebounced(0);
-
-      if (isTargetForInput) document.addEventListener("scroll", onDocumentScroll);
-    } else {
-      if (!isInitial) closeNestedDialogs(triggerElement, false);
-
-      openDialogs.delete(triggerElement);
-      teardownGlobalDocumentClick();
-
-      if (isTargetForInput) document.removeEventListener("scroll", onDocumentScroll);
-
-      affectedElement.classList.add("o0", "anim");
-      affectedElement.style.pointerEvents = "none";
-      if (isInitial) forceUpdate(1);
-      forceUpdateDebounced(1);
-      visibilityTimeout = setTimeout(() => {
-        if (!isInitial) onVisibilityChanged?.(false);
-        clearTimeout(visibilityTimeout);
-        triggerElement.setAttribute(VISIBILITY_KEY, "false");
-      }, DEFAULT_ANIMATION_DURATION);
-    }
-  };
-  const onKeyDown = (e: KeyboardEvent) => {
-    if (IsKeyPressed(e, EKeys.TAB)) if (document.activeElement !== triggerElement) visibility(false, false);
-  };
-  const onClick = (e: MouseEvent) => {
-    const isOpen = triggerElement.getAttribute(VISIBILITY_KEY) === "true";
-    const target = e.target as HTMLElement;
-    if (isOpen && target.id !== triggerElement.id && target !== triggerElement) return;
-
-    if (isOpen && isTargetForInput) return;
-
-    visibility(!isOpen, false);
-    e.stopPropagation();
-  };
-  const onFocus = (e: FocusEvent) => {
-    if (isTargetForInput) visibility(true, false);
-  };
-
-  const onFocusOut = (e: FocusEvent) => {
-    if (!isTargetForInput) return;
-
-    if (!triggerElement) return;
-    if (!e.relatedTarget || triggerElement.contains(e.relatedTarget as Node | null)) return;
-
-    visibility(false, false);
-  };
-  const onDocumentScroll = (e: Event) => {};
-
-  registerDialog({
-    triggerElement,
-    affectedElement,
-    iggnoreChildClick,
-    close: (isInitial) => visibility(false, isInitial),
-  });
-
-  if (!affectedElement.classList.contains("dialog")) {
-    affectedElement.className = defaultClass ?? "dialog";
-    affectedElement.classList.add("pf", "r", "bs2", "b1", "df", "ddc", `p${defaultPadding}`, background ?? NEXUS_CONFIG.DEFAULT_BACKGROUND, position ?? EPositions.Left);
-    setupDialog();
-    affectedElement.style.maxWidth = `calc(100vw - ${ConvertRemToPixels(2)}px)`;
-    affectedElement.style.maxHeight = `calc(80vh)`;
-  }
-
-  // Add input-dialog class if it's a target for input to handle specific styling
-  if (isTargetForInput && !affectedElement.classList.contains("input-dialog")) affectedElement.classList.add("input-dialog");
-
-  return {
-    destroy: cleanupDialog,
-    visibility: visibility,
-    isValid: () => !!affectedElement?.parentElement,
-  } as IDialogboxResults;
-};

package/src/components/layouts/global-layout.tsx

@@ -1,64 +0,0 @@
-"use server";
-import { Inter } from "next/font/google";
-import Script from "next/script";
-import React from "react";
-import { IGlobalLayout, ROOT_LOADER_IDENTITY } from "../../interfaces/layout-interfaces";
-import { FILES } from "../../nexus.environments";
-import { LayoutHelpers } from "./layout-helpers";
-
-import { GetSystemThemesAsync } from "../../api-services/system-service";
-import "./../../styles/nexus.animation.css";
-import "./../../styles/nexus.core.css";
-import "./../../styles/nexus.dialog.css";
-import "./../../styles/nexus.icon.css";
-import "./../../styles/nexus.input.css";
-import "./../../styles/nexus.loader.css";
-import "./../../styles/nexus.logic.css";
-import "./../../styles/nexus.utility.css";
-
-//  import "./../../styles/nexus.grid-view.css";
-
-const inter = Inter({ weight: ["300", "400", "500", "600", "700", "800"], subsets: ["latin"] });
-
-export const GlobalLayout = async ({ children, globalLayout }: Readonly<{ children: React.ReactNode; globalLayout: IGlobalLayout }>) => {
-  const systemThemes = await GetSystemThemesAsync();
-  globalLayout.systemThemes = systemThemes;
-  return (
-    <html lang="en">
-      <head>
-        <title>{globalLayout.defaultDocumentTitle}</title>
-        <meta name="description" content={globalLayout.defaultDocumentDescription} />
-        <meta name="keywords" content={globalLayout.defaultDocumentKeywords.join(", ")} />
-        <link rel="icon" href="/favicon.ico" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <style id="nexus-styles"></style>
-      </head>
-      <body className={inter.className}>
-        <LayoutHelpers globalLayout={globalLayout} />
-        <div
-          style={{
-            zIndex: "1000",
-            width: "100vw",
-            height: "100vh",
-            position: "fixed",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            backgroundColor: "rgb(60, 60, 60)",
-          }}
-          id={ROOT_LOADER_IDENTITY}
-        >
-          <a href={"/"} className="p5  h r bg52" style={{ marginTop: "8rem" }} title="Visit Home Page">
-            <img src={FILES.LOGO.ICON} alt={"logo"} style={{ minHeight: "3rem", minWidth: "3rem", width: "3rem", height: "3rem" }} />
-          </a>
-        </div>
-        {children}
-        <Script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@5.5.2/dist/ionicons/ionicons.esm.js" strategy="lazyOnload"></Script>
-        <Script noModule src="https://cdn.jsdelivr.net/npm/ionicons@5.5.2/dist/ionicons/ionicons.js" strategy="lazyOnload"></Script>
-        {
-          // <div id="half-mm-grid"></div>
-        }
-      </body>
-    </html>
-  );
-};

package/src/components/layouts/layout-helpers.tsx

@@ -1,20 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import { RemoveElement } from "../../helpers/browser-helpers";
-import { IGlobalLayout, ROOT_LOADER_IDENTITY } from "../../interfaces/layout-interfaces";
-import { O } from "../../nexus-client";
-import { InitializeStyles } from "../../services/theme-service";
-
-export const LayoutHelpers = ({ globalLayout }: Readonly<{ globalLayout: IGlobalLayout }>) => {
-  useEffect(() => {
-    O.systemThemes = globalLayout.systemThemes;
-    const timeout = setTimeout(() => {
-      clearTimeout(timeout);
-      RemoveElement(ROOT_LOADER_IDENTITY, 500);
-      InitializeStyles();
-    }, 50);
-  }, [globalLayout]);
-
-  return <div className="nexus-popup-container"></div>;
-};

package/src/components/layouts/panels/user-panel.tsx

@@ -1,112 +0,0 @@
-import Image from "next/image";
-import React, { JSX, useEffect, useMemo, useState } from "react";
-import { GetProfileDetails } from "../../../api-services/authentication-service";
-import { BuildImageUrl, GetAuthPageURL, GetSignOutPageURL } from "../../../helpers/browser-helpers";
-import { BUTTON_IDENTITY, ClickHandler, EBackgrounds, EButtonTypes, EFileSizes, EIcons, EMenuVisibility, EOpacity, EPositions, ESizes, GetButton, GetUtilityMenuCode, IButton, ICurrentUser, IGlobalLayout, IPanelMenu, IsAdmin_SuperAdmin, UN } from "../../../interface";
-import { FILES } from "../../../nexus.environments";
-import { InputLoader, ShowLoader } from "../../../services/loader-service";
-import { SetCurrentUser } from "../../../services/user-services";
-import { Buttons } from "../../documents/button";
-import { Iconbox } from "../../documents/icon-box";
-import { GetUserRoleTag } from "../../documents/tag";
-import { GlobalDialogbox } from "../global-dialogbox";
-
-const USER_PROFILE_ID = GetUtilityMenuCode("user-profile");
-export const DEFAULT_USER_PROFILE_PICTURE_CLASS = "profile-user";
-const USER_PROFILE_BUTTON_ID = "user-profile-menu-tab";
-
-export const ProfilePanel = ({ globalLayout, userPanels, boxBackground, hasAccessToken }: Readonly<{ globalLayout: IGlobalLayout; userPanels: IPanelMenu[]; boxBackground?: EBackgrounds; hasAccessToken?: boolean | UN }>): JSX.Element => {
-  const [isLoading, setIsLoading] = useState(hasAccessToken === true);
-  const [currentUser, setCurrentUser] = useState<ICurrentUser | null>(null);
-  const groupPanels = useMemo(() => {
-    // TODO: Implement menu visibility logic
-    const isAuthenticated = currentUser && currentUser.username && hasAccessToken === true;
-    const visibilityFlag = isAuthenticated ? EMenuVisibility.AuthenticatedOnly : EMenuVisibility.GuestOnly;
-    const visibleMenus = userPanels.filter((x) => (x.menuVisibilities & visibilityFlag) !== 0);
-    return groupByGroupOrder(visibleMenus);
-  }, [userPanels, currentUser]);
-  const fetchProfileDetails = async () => {
-    setIsLoading(true);
-    InputLoader(USER_PROFILE_ID, true);
-    const response = await GetProfileDetails(true);
-    setCurrentUser(response);
-    SetCurrentUser(response);
-    setIsLoading(false);
-    InputLoader(USER_PROFILE_ID, false);
-  };
-  useEffect(() => {
-    if (hasAccessToken) fetchProfileDetails();
-  }, [hasAccessToken]);
-  return (
-    <div id={USER_PROFILE_ID} className={`pr ${ESizes.Small} ib ${boxBackground} h p2 r`}>
-      <Image src={FILES.ICONS.USER} alt="logo" width={74} height={74} className="img" />
-      {!isLoading && (
-        <GlobalDialogbox hoverEffectDelay={false} defaultPadding={0} position={EPositions.Left} buttonIdentity={USER_PROFILE_ID} iggnoreChildClick={false} defaultWidth={25}>
-          <React.Fragment>
-            <div className="bb h100 oh df ddc pl5">
-              <div style={{ display: currentUser ? "flex" : "none" }} className="df ac pr5 pt5">
-                <div className="ib xl oh item pr">
-                  {currentUser && <Iconbox onClicked={() => onEditProfileClicked(currentUser)} iconOpacity={EOpacity.NONE} iconDefaultClass="xl" defaultClass="xl pa ho1 bg950 rr" background={EBackgrounds.None} icon={EIcons.CAMERA} />}
-                  <img src={BuildImageUrl(currentUser?.profilePicture, EFileSizes.SIZE_128, FILES.ICONS.USER)} alt="profile-picture" className={`${DEFAULT_USER_PROFILE_PICTURE_CLASS} img ba2 rr`} />
-                </div>
-                <div className="ml5 w100">
-                  <div className="df ac">
-                    <h5 className="fw500 bg1 o09">{currentUser?.fullname}</h5>
-                  </div>
-                  <div className="df ac mt2">
-                    <p className="bg1 mr5 o06">{currentUser?.emailAddress ?? `@${currentUser?.username}`}</p>
-                    {IsAdmin_SuperAdmin(currentUser?.roleName) && GetUserRoleTag(currentUser?.roleName, true, "")}
-                  </div>
-                </div>
-              </div>
-
-              <div className="sb sm h100 mt5 mb5 pr5">
-                {groupPanels.map((group, index) => (
-                  <Buttons key={index} padding={0} pt={index !== 0 ? 5 : 0} buttons={group} />
-                ))}
-              </div>
-            </div>
-          </React.Fragment>
-        </GlobalDialogbox>
-      )}
-    </div>
-  );
-};
-
-const onEditProfileClicked = (currentUser: ICurrentUser) => {
-  // TODO: Implement edit profile functionality
-};
-
-function groupByGroupOrder(menuArray: IPanelMenu[]): IButton[][] {
-  const grouped: Record<number, IButton[]> = {};
-  menuArray.forEach((menu) => {
-    if (!grouped[menu.groupOrder]) {
-      grouped[menu.groupOrder] = [];
-    }
-    grouped[menu.groupOrder].push(GetButton(menu.menuName, menu.menuCode, menu.menuUrl, menu.menuIcon, onClickedPanelMenu, menu, null, null, menu.displayOrder, null, null, 12, 0, EButtonTypes.BUTTON));
-  });
-
-  const groupedArray = Object.keys(grouped)
-    .sort((a, b) => Number(a) - Number(b)) // Sort groups by groupOrder
-    .map((groupKey) => grouped[Number(groupKey)].sort((a, b) => (a.displayOrder ?? 0) - (b.displayOrder ?? 0)));
-
-  return groupedArray;
-}
-
-const onClickedPanelMenu: ClickHandler = async (event, element, data: IPanelMenu) => {
-  switch (data.menuCode) {
-    case BUTTON_IDENTITY(false).SIGN_IN_BUTTON: {
-      ShowLoader();
-      const url = GetAuthPageURL();
-      return (window.location.href = url);
-    }
-    case BUTTON_IDENTITY(false).SIGN_OUT_BUTTON: {
-      ShowLoader();
-      SetCurrentUser(null);
-      return (window.location.href = GetSignOutPageURL());
-    }
-    default: {
-      break;
-    }
-  }
-};

package/src/components/layouts/utility-menu.tsx

@@ -1,49 +0,0 @@
-import { UN } from "nexus-shared";
-import { EIconTypes } from "../../interfaces/icon-interfaces";
-import { EOpacity, EPositions, ESizes, IGlobalLayout } from "../../interfaces/layout-interfaces";
-import { BUTTON_IDENTITY, GetUtilityMenuCode, IPanelMenu, IUtilityMenu } from "../../interfaces/menu-interfaces";
-import { EBackgrounds } from "../../interfaces/theme-interfaces";
-import { Iconbox } from "../documents/icon-box";
-import { PageTitle } from "../documents/page-title";
-import { ThemePanel } from "../panels/theme-panel";
-import { GlobalDialogbox } from "./global-dialogbox";
-import { ProfilePanel } from "./panels/user-panel";
-
-export const UtilityMenu = ({ utilityMenus, userPanels, column, paddingRight, globalLayout, iconBoxBackground, hasAccessToken }: Readonly<{ utilityMenus: IUtilityMenu[]; userPanels: IPanelMenu[]; column?: number; paddingRight?: number; globalLayout: IGlobalLayout; iconBoxBackground: EBackgrounds; hasAccessToken?: boolean | UN }>) => {
-  return (
-    <div className={`utilities df fr ac jr h100p pr${paddingRight ?? 0} col-${column ?? 12}`}>
-      {utilityMenus.map((utilityMenu, index) => (
-        <UtilityIcon key={index} utilityMenu={utilityMenu} boxBackground={iconBoxBackground} globalLayout={globalLayout} />
-      ))}
-      <ProfilePanel globalLayout={globalLayout} boxBackground={iconBoxBackground} userPanels={userPanels} hasAccessToken={hasAccessToken} />
-    </div>
-  );
-};
-
-const UtilityIcon = ({ utilityMenu, globalLayout, boxBackground }: Readonly<{ utilityMenu: IUtilityMenu; globalLayout: IGlobalLayout; boxBackground?: EBackgrounds }>) => {
-  return (
-    <Iconbox id={GetUtilityMenuCode(utilityMenu.menuCode)} icon={utilityMenu.menuIcon} iconType={EIconTypes.FILLED} iconSize={ESizes.Small} boxSize={ESizes.Small} background={boxBackground} iconOpacity={EOpacity.O07} defaultClass="ml2">
-      <UtilityDialogBox utilityMenu={utilityMenu} globalLayout={globalLayout} />
-    </Iconbox>
-  );
-};
-
-const UtilityDialogBox = ({ utilityMenu, globalLayout }: Readonly<{ utilityMenu: IUtilityMenu; globalLayout: IGlobalLayout }>) => {
-  return (
-    <GlobalDialogbox hoverEffectDelay={false} defaultPadding={5} position={EPositions.Left} buttonIdentity={GetUtilityMenuCode(utilityMenu.menuCode)} defaultWidth={30}>
-      <div>
-        <PageTitle marginBottom={5} borderBottom={1} title={utilityMenu.menuName} />
-        <UtilityPanel utilityMenu={utilityMenu} globalLayout={globalLayout} />
-      </div>
-    </GlobalDialogbox>
-  );
-};
-
-const UtilityPanel = ({ utilityMenu, globalLayout }: Readonly<{ utilityMenu: IUtilityMenu; globalLayout: IGlobalLayout }>) => {
-  switch (utilityMenu.menuCode) {
-    case BUTTON_IDENTITY(false).THEME_BOX:
-      return <ThemePanel />;
-    default:
-      return <div>Unknown Panel: {utilityMenu.menuName}</div>;
-  }
-};