nexus-shared 1.1.18 → 1.1.20

package/src/components/inputs/input-form.tsx

@@ -1,8 +1,13 @@
-'use client';
+"use client";
 
 import React, { useEffect } from "react";
-import { GetInputId } from "../../helpers/input-helpers";
-import { IForm, IFormCreateResults, IInputCreateResults } from "../../interfaces/input-interfaces";
+import { HideLoader, ShowLoader, SubmitApi, WarningMessage } from "../../client";
+import { GetInputId, SetResponseErrorMessage } from "../../helpers/input-helpers";
+import { IsValidInputs } from "../../helpers/validation-helpers";
+import { EActions, EAnimationClasses, EBackgrounds, EButtonTypes, EFlexPositions, EIcons, EIconTypes, ESizes, GetApiInformations, GetButton, UN, VoidCallbackHandler } from "../../interface";
+import { DEFAULT_ROW_GAP, EInputTypes, GetForms, IApiForm, IForm, IFormCreateResults, IInputCreateResults, ISubmitForm, ISubmitFormCreateResults, OnFormChangeHandler, OnFormSubmitHandler } from "../../interfaces/input-interfaces";
+import { GetFormButtonPosition } from "../../services/localstorage-service";
+import { CreateButton } from "../documents/button";
 import { CreateInputs, DisposeInputs } from "./input";
 
 const forceChangeDefaultValue = (inputResults: IInputCreateResults[], newDefaultValue: any): boolean => {
@@ -16,37 +21,144 @@ const forceChangeDefaultValue = (inputResults: IInputCreateResults[], newDefault
   }
   return isChanged;
 };
-export const CreateForm = (param: IForm, rowGap?: number): IFormCreateResults | null => {
-  const { inputs, onChanged, index, isTabularForm, parentIdentifier } = param;
+export const CreateForm = (param: IForm, parentIdentifier: HTMLElement | string | UN, rowGap?: number, onFormRendered?: VoidCallbackHandler): IFormCreateResults | null => {
+  const { inputs, onChanged, index, isTabularForm, defaultValue } = param;
   const parentElement = typeof parentIdentifier === "string" ? document.getElementById(parentIdentifier) : parentIdentifier;
 
   if (!parentElement || inputs.length === 0 || !onChanged) {
     //TODO: WarningMessage("Invalid Inputs", "Please provide valid inputs, onChanged function and parent element.");
     return null;
   }
+  const rowElement = document.createElement("div");
+  if (parentElement) parentElement.appendChild(rowElement);
 
-  const parent = document.createElement("div");
-  parent.className = `row g${rowGap ?? 3} sb fg`;
-  parent.style.paddingTop = "var(--IEM)";
-  if (parentElement) parentElement.appendChild(parent);
+  rowElement.className = `row g${rowGap ?? DEFAULT_ROW_GAP} sb fg`;
+  rowElement.style.paddingTop = "var(--IEM)";
 
-  const inputResults = CreateInputs(inputs, onChanged, index, isTabularForm, parent, param.defaultValue);
+  const inputResults = CreateInputs(inputs, onChanged, index, isTabularForm, rowElement, defaultValue);
+
+  onFormRendered?.(inputResults);
 
   return {
     inputResults: inputResults,
-    formElement: parent,
+    formElement: rowElement,
     dispose: (invokeOnChanged?: boolean) => {
       DisposeInputs(inputResults, invokeOnChanged);
-      parent.remove();
+      rowElement.remove();
     },
     forceChangeDefaultValue: (newDefaultValue: any) => forceChangeDefaultValue(inputResults, newDefaultValue),
   } as IFormCreateResults;
 };
 
-export const Form = ({ param, rowGap }: { param: IForm; rowGap?: number }): React.ReactNode => {
+export const Form = ({ param, parentIdentifier, rowGap, onFormRendered }: { param: IForm; parentIdentifier: HTMLElement | string | UN; rowGap?: number; onFormRendered?: VoidCallbackHandler }): React.ReactNode => {
   useEffect(() => {
-    const formResults = CreateForm(param, rowGap);
+    const formResults = CreateForm(param, parentIdentifier, rowGap, onFormRendered);
     return () => formResults?.dispose();
   }, [param, rowGap]);
   return <React.Fragment></React.Fragment>;
 };
+
+export const CreateSubmitForm = (param: ISubmitForm, parentIdentifier: HTMLElement | string | UN, rowGap?: number, buttonPosition?: EFlexPositions, formAction?: EActions | UN, onFormRendered?: VoidCallbackHandler): ISubmitFormCreateResults | null => {
+  const parentElement = typeof parentIdentifier === "string" ? document.getElementById(parentIdentifier) : parentIdentifier;
+  buttonPosition = buttonPosition ?? GetFormButtonPosition();
+
+  if (!parentElement || !param.inputs || param.inputs.length === 0 || !param.onSubmit) return null;
+
+  let formValue: any | UN;
+  let defaultValue: any | UN = GetApiInformations.IS_API(param.defaultValue) ? null : param.defaultValue;
+  const onChangedHandler: OnFormChangeHandler = (currentValue, isInitilizing, isForcedChanged, isDisposed, currentKey, index, type, dataSource) => {
+    formValue = currentValue;
+    if (param.onChanged) param.onChanged(currentValue, isInitilizing, isForcedChanged, isDisposed, currentKey, index, type, dataSource);
+  };
+  const onFormSubmit = async (event: Event) => {
+    event.preventDefault();
+    const isValidForm = IsValidInputs(formResults?.inputResults, formValue, true, true);
+    const isValid = param.overrideValidation ? await param.overrideValidation(formValue, isValidForm, formResults, formAction) : isValidForm;
+
+    param.onSubmit({ ...formValue }, isValidForm, event, formResults!, defaultValue);
+    if (!isValid) WarningMessage("Invalid Inputs", "Please fill all required fields correctly.");
+  };
+  const formParameters = GetForms.FORM(param.inputs, onChangedHandler, defaultValue);
+  const formElement = document.createElement("form");
+  parentElement.appendChild(formElement);
+  const formResults = CreateForm(formParameters, formElement, rowGap, onFormRendered);
+  if (!formResults) return null;
+  formResults.formElement.classList.add("h100", "fg");
+
+  const submitButton = param.inputs.find((input) => input.inputType === EInputTypes.SubmitButton);
+  if (!submitButton) {
+    const buttonStyle: React.CSSProperties = {
+      width: "fit-content",
+    };
+    const DEFAULT_BUTTON_CLASS = "col- jc r";
+    rowGap = rowGap ?? DEFAULT_ROW_GAP;
+    const PADDING = rowGap * 2;
+
+    const buttonParam = GetButton("Submit", null, null, EIcons.SAVE, null, null, EBackgrounds.PrimaryColor, DEFAULT_BUTTON_CLASS, null, EIconTypes.OUTLINED, null, 0, null, EButtonTypes.SUBMIT);
+    const buttonContainer = document.createElement("div");
+    buttonContainer.className = `df ac pt1 pb5 ${buttonPosition} bb pr${PADDING} pl${PADDING}`;
+    buttonContainer.style.minHeight = "calc(var(--IH) * 1.5)";
+
+    formElement.appendChild(buttonContainer);
+    CreateButton(buttonParam, buttonContainer, buttonStyle, false);
+
+    if (param.onCancelClick) {
+      const buttonParam = GetButton("Cancel", null, null, EIcons.CLOSE, param.onCancelClick, null, EBackgrounds.ErrorColor, DEFAULT_BUTTON_CLASS + ` ml${PADDING}`, null, EIconTypes.OUTLINED, null, 0, null, EButtonTypes.BUTTON);
+      CreateButton(buttonParam, buttonContainer, buttonStyle, false);
+    }
+  }
+
+  formElement.className = `df ddc w100 h100 oh fg pr`;
+  formElement.addEventListener("submit", onFormSubmit);
+
+  const onDispose = () => {
+    formResults?.dispose();
+    formElement.remove();
+  };
+
+  return {
+    formElement: formElement,
+    dispose: () => onDispose(),
+    formObject: formResults,
+  };
+};
+
+export const SubmitForm = ({ param, parentIdentifier, rowGap, buttonPosition, formAction, onFormRendered }: { param: ISubmitForm; parentIdentifier: HTMLElement | string | UN; rowGap?: number; buttonPosition?: EFlexPositions; formAction?: EActions | UN; onFormRendered?: VoidCallbackHandler }): React.ReactNode => {
+  useEffect(() => {
+    const submitForm = CreateSubmitForm(param, parentIdentifier, rowGap, buttonPosition, formAction, onFormRendered);
+    return () => submitForm?.dispose();
+  }, [param, parentIdentifier, rowGap, buttonPosition, formAction]);
+  return <React.Fragment></React.Fragment>;
+};
+
+export const CreateApiForm = (param: IApiForm, parentIdentifier: HTMLElement | string | UN, rowGap?: number, buttonPosition?: EFlexPositions, formAction?: EActions | UN, overrideLoaderParend?: HTMLElement | string | UN, successMessage?: boolean | UN, errorMessage?: boolean | UN, onFormRendered?: VoidCallbackHandler): ISubmitFormCreateResults | null => {
+  let isLoading = false;
+  const onFormSubmit: OnFormSubmitHandler = async (currentValue, isValidForm, event, form, defaultValue) => {
+    if (isLoading) return;
+    isLoading = true;
+
+    if (param.onSubmit) param.onSubmit(currentValue, isValidForm, event, form, defaultValue);
+    if (!isValidForm) return;
+
+    const loaderParent = overrideLoaderParend ?? submitForm?.formElement ?? parentIdentifier;
+    ShowLoader(loaderParent, EAnimationClasses.SPIN, true, ESizes.Normal, null, null, null, "r");
+    const apiResponse = await SubmitApi(param.api, currentValue, successMessage, errorMessage);
+    if (!apiResponse.isSuccess) SetResponseErrorMessage(apiResponse, submitForm?.formObject.inputResults);
+    HideLoader(loaderParent);
+    param.onApiSubmit(currentValue, apiResponse, submitForm!, defaultValue);
+    isLoading = false;
+  };
+  const submitFormParam = GetForms.SUBMITFORM(param?.inputs, onFormSubmit, param?.defaultValue, param?.overrideValidation, param?.onChanged, param?.onCancelClick);
+  const submitForm = CreateSubmitForm(submitFormParam, parentIdentifier, rowGap, buttonPosition, formAction, onFormRendered);
+  if (!submitForm) return null;
+
+  return submitForm;
+};
+
+export const ApiForm = ({ param, parentIdentifier, rowGap, buttonPosition, formAction, overrideLoaderParend, successMessage, errorMessage, onFormRendered }: { param: IApiForm; parentIdentifier: HTMLElement | string | UN; rowGap?: number; buttonPosition?: EFlexPositions; formAction?: EActions | UN; overrideLoaderParend?: HTMLElement | string | UN; successMessage?: boolean | UN; errorMessage?: boolean | UN; onFormRendered?: VoidCallbackHandler }): React.ReactNode => {
+  useEffect(() => {
+    const apiForm = CreateApiForm(param, parentIdentifier, rowGap, buttonPosition, formAction, overrideLoaderParend, successMessage, errorMessage, onFormRendered);
+    return () => apiForm?.dispose();
+  }, [param, parentIdentifier, rowGap, buttonPosition, formAction, overrideLoaderParend, successMessage, errorMessage]);
+  return <React.Fragment></React.Fragment>;
+};

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

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import React, { useEffect } from "react";
 import { ConvertRemToPixels, IsKeyPressed } from "../../helpers/browser-helpers";
@@ -17,7 +17,7 @@ export const DEFAULT_DIALOGBOX_HOVER_EFFECT_DELAY = 500;
 interface IDialogRegistryEntry {
   triggerElement: HTMLElement;
   affectedElement: HTMLElement;
-  iggnoreChildClick?: boolean;
+  iggnoreChildClick?: boolean | UN;
   close: (isInitial: boolean) => void;
 }
 
@@ -32,12 +32,7 @@ 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)
-  );
+  return path.includes(entry.triggerElement) || path.includes(entry.affectedElement) || isClickInsideOpenNestedDialog(entry.triggerElement, path) || entry.triggerElement.contains(target);
 };
 
 const isClickInsideOpenNestedDialog = (parentTrigger: HTMLElement, path: EventTarget[]) => {
@@ -169,7 +164,7 @@ export const GlobalDialogbox = ({ children, hoverEffectDelay, position, buttonId
   return <ul id={GetDialogId(buttonIdentity)}>{isVisible && children}</ul>;
 };
 
-export const InitializeDialogbox = (triggerElement: HTMLElement, affectedElement: HTMLElement, hoverEffectDelay?: number | boolean, defaultHeight?: string, defaultPadding?: number, defaultWidth?: number, background?: EBackgrounds, onVisibilityChanged?: (isVisible: boolean) => void, onDisposed?: () => void, iggnoreChildClick?: boolean, position?: EPositions, defaultClass?: string, preferTopWhenEnoughSpace?: boolean, targetInput?: HTMLTextAreaElement | HTMLInputElement | UN, isAutoHideInInitialization?: boolean): IDialogboxResults | null => {
+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;
@@ -331,6 +326,7 @@ export const InitializeDialogbox = (triggerElement: HTMLElement, affectedElement
     unregisterDialog(triggerElement);
     onDisposed?.();
   };
+  // @ts-ignore
   let visibilityTimeout: NodeJS.Timeout;
   const visibility = (visible: boolean, isInitial: boolean) => {
     const isVisible = visible;

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

@@ -6,6 +6,7 @@ import { IGlobalLayout, ROOT_LOADER_IDENTITY } from "../../interfaces/layout-int
 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";
@@ -18,6 +19,8 @@ import "./../../styles/nexus.utility.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>

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

@@ -3,15 +3,12 @@
 import { useEffect } from "react";
 import { RemoveElement } from "../../helpers/browser-helpers";
 import { IGlobalLayout, ROOT_LOADER_IDENTITY } from "../../interfaces/layout-interfaces";
-import { DEFAULT_THEME_INFORMATIONS } from "../../interfaces/theme-interfaces";
 import { O } from "../../nexus-client";
 import { InitializeStyles } from "../../services/theme-service";
 
 export const LayoutHelpers = ({ globalLayout }: Readonly<{ globalLayout: IGlobalLayout }>) => {
   useEffect(() => {
-    globalLayout.systemThemes = DEFAULT_THEME_INFORMATIONS;
-    O.systemThemes = DEFAULT_THEME_INFORMATIONS;
-
+    O.systemThemes = globalLayout.systemThemes;
     const timeout = setTimeout(() => {
       clearTimeout(timeout);
       RemoveElement(ROOT_LOADER_IDENTITY, 500);

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

@@ -0,0 +1,112 @@
+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,56 +1,36 @@
-import React, { JSX } from "react";
+import { UN } from "nexus-shared";
 import { EIconTypes } from "../../interfaces/icon-interfaces";
-import { EPositions, ESizes, IGlobalLayout } from "../../interfaces/layout-interfaces";
-import { GetUtilityMenuCode, IPanelMenu, IUtilityMenu, UTILITIES_BUTTON_PREFIX } from "../../interfaces/menu-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 BUTTON_IDENTITY = (isneedPrefix: boolean) => {
-  const _ = isneedPrefix ? UTILITIES_BUTTON_PREFIX : "";
-  return {
-    PROFILE_BOX: `${_}profile`,
-    SEARCH_BOX: `${_}root-search`,
-    FAVORITE_BOX: `${_}favorite-menu`,
-    CARD_BOX: `${_}cart-menu`,
-    THEME_BOX: `${_}switch-theme`,
-    MEGA_BOX: `${_}mega-menu`,
-    SIGN_IN_BUTTON: `${_}sign-in`,
-    SIGN_OUT_BUTTON: `${_}sign-out`,
-  };
-};
-export const UtilityMenu = ({ utilityMenus, userPanels, column, paddingRight, globalLayout, iconBoxBackground }: Readonly<{ utilityMenus: IUtilityMenu[]; userPanels: IPanelMenu[]; column?: number; paddingRight?: number; globalLayout: IGlobalLayout; iconBoxBackground: EBackgrounds }>) => {
+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 style={{ paddingRight: paddingRight ?? 0, zIndex: 3 }} className={`utilities df fr ac jr h100p col-${column ?? 12}`}>
+    <div style={{ paddingRight: paddingRight ?? 0 }} className={`utilities df fr ac jr h100p col-${column ?? 12}`}>
       {utilityMenus.map((utilityMenu, index) => (
         <UtilityIcon key={index} utilityMenu={utilityMenu} boxBackground={iconBoxBackground} globalLayout={globalLayout} />
       ))}
-      <ProfilePanel globalLayout={globalLayout} boxBackground={iconBoxBackground} userPanels={userPanels} />
+      <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} defaultClass="mr2">
+    <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>
   );
 };
 
-export const ProfilePanel = ({ globalLayout, userPanels, boxBackground }: Readonly<{ globalLayout: IGlobalLayout; userPanels: IPanelMenu[]; boxBackground?: EBackgrounds }>): JSX.Element => {
-  return (
-    <div className={`pr ${ESizes.Small} ib ${boxBackground} h p2 r`}>
-      <h6>BA</h6>
-    </div>
-  );
-};
-
 const UtilityDialogBox = ({ utilityMenu, globalLayout }: Readonly<{ utilityMenu: IUtilityMenu; globalLayout: IGlobalLayout }>) => {
   return (
-    <GlobalDialogbox hoverEffectDelay={true} defaultPadding={5} position={EPositions.Left} buttonIdentity={GetUtilityMenuCode(utilityMenu.menuCode)} defaultWidth={30}>
+    <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} />

package/src/components/panels/theme-panel.tsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import React, { useEffect } from "react";
 import { GetButton, IButton } from "../../interfaces/button-interfaces";
@@ -30,7 +30,7 @@ const RenderSwitchTheme = (baseElement: HTMLElement) => {
     baseElement.appendChild(p);
     return;
   }
-  const themeButtons: IButton[] = themes.map((theme, index) => GetButton(theme.displayName, theme.systemName, null, theme.icon, onClicked, theme, null, null, theme.displayOrder, EIconTypes.FILLED, null));
+  const themeButtons: IButton[] = themes.map((theme, index) => GetButton(theme.displayName, theme.systemName, null, theme.iconName, onClicked, theme, null, null, theme.displayOrder, EIconTypes.OUTLINED, null));
   const activeButton = themeButtons.find((button) => button.id === currentTheme);
   CreateTabButtons(themeButtons, baseElement, activeButton, onClicked);
 

package/src/helpers/browser-helpers.tsx

@@ -1,12 +1,13 @@
+import { BuildProxyApiUrl, EModules, ESigninRequestMode, UN } from "../interface";
 import { EAnimationClasses } from "../interfaces/layout-interfaces";
-import { NEXUS_INFO } from "../nexus.environments";
-import { EKeyModifier, EKeys } from "./../interfaces/browser-interfaces";
+import { FILES, NEXUS_INFO, URLS } from "../nexus.environments";
+import { EFileSizes, EKeyModifier, EKeys } from "./../interfaces/browser-interfaces";
 import { HasFlag } from "./bitwise-helpers";
 import { Debounce } from "./utility-helpers";
 
 export const IsBrowser = (): boolean => typeof window !== "undefined" && typeof document !== "undefined";
 
-export const RemoveElement = async (elementIdentity: string | HTMLElement, timeout?: number, animation?: EAnimationClasses): Promise<boolean> => {
+export const RemoveElement = async (elementIdentity: string | HTMLElement, timeout?: number | UN, animation?: EAnimationClasses | UN): Promise<boolean> => {
   return new Promise(async (resolve) => {
     if (!IsBrowser() || !elementIdentity) return resolve(false);
     else if (typeof elementIdentity === "string") {
@@ -69,3 +70,87 @@ export const FindChildElements = (parent: HTMLElement, childSelector: string, sh
     return children.length > 0 ? [children[0]] : [];
   }
 };
+export const PxToRem = (px: number): number => {
+  const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+  return Math.round((px / fontSize) * 1000) / 1000;
+};
+
+export const ConvertColorToRGBA = (color: string, alpha: number = 0.1): string => {
+  if (!color) return "rgba(0, 0, 0, 0.1)";
+
+  let finalColor = color.trim();
+  if (finalColor.startsWith("var(")) finalColor = finalColor.replace(/^var\(\s*/, "").replace(/\s*\)$/, "");
+  // CSS Variable Support
+  if (finalColor.startsWith("--")) finalColor = getComputedStyle(document.documentElement).getPropertyValue(finalColor).trim();
+
+  // Create temporary element for browser auto parsing
+  const temp = document.createElement("div");
+  temp.style.color = finalColor;
+
+  document.body.appendChild(temp);
+
+  const computed = getComputedStyle(temp).color;
+
+  document.body.removeChild(temp);
+
+  // computed => rgb(...) or rgba(...)
+  const match = computed.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)(?:[,\s\/]+([\d.]+))?\s*\)/i);
+
+  if (!match) return "rgba(0, 0, 0, 1)";
+
+  const r = parseInt(match[1], 10);
+  const g = parseInt(match[2], 10);
+  const b = parseInt(match[3], 10);
+
+  let a = match[4] !== undefined ? parseFloat(match[4]) : 1;
+
+  // Override alpha if provided
+  if (alpha) a = alpha;
+
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+};
+export function FindParentElement<ELEMENT extends Element>(element: Element | null | undefined, selector: string): ELEMENT | null {
+  if (!element || !selector || !element.matches) return null;
+
+  if (element.matches(selector)) return element as ELEMENT;
+
+  return FindParentElement<ELEMENT>(element.parentElement, selector);
+}
+export const GetCurrentFullURL = () => window?.location?.href;
+export const GetCurrentBaseURL = () => window?.location?.origin;
+export const BuildImageUrl = (viewToken?: string | UN, size?: EFileSizes | UN, fallback?: string | UN, isPublic: boolean = false) => {
+  if (!viewToken) return fallback ?? FILES.ICONS.NO_IMAGE;
+  if (!size) size = EFileSizes.SIZE_256;
+  if (isPublic) return BuildProxyApiUrl(EModules.Drive, `Public/Image/${size}/${viewToken}`);
+  else return BuildProxyApiUrl(EModules.Drive, `Private/Image/${size}/${viewToken}`);
+};
+
+const resolveReturnPath = (redirectURL?: string | UN): string => {
+  if (redirectURL) {
+    try {
+      const url = new URL(redirectURL, GetCurrentBaseURL());
+      return url.pathname + url.search || "/";
+    } catch {
+      /* fall through to current location */
+    }
+  }
+  if (!IsBrowser()) return "/";
+  return window.location.pathname + window.location.search || "/";
+};
+
+export const GetAuthPageURL = (redirectURL?: string | UN, signinMode?: ESigninRequestMode | UN) => {
+  const setupUrl = new URL(URLS.GLOBAL_SIGNIN);
+  setupUrl.searchParams.set("redirect_uri", `${GetCurrentBaseURL()}/api/auth/callback`);
+  setupUrl.searchParams.set("state", resolveReturnPath(redirectURL));
+  setupUrl.searchParams.set("signin_mode", signinMode ?? ESigninRequestMode.DEFAULT);
+  return setupUrl.toString();
+};
+
+/** Clears the session via /api/auth/sign-out; non-admin apps return to the current page (with query params). */
+export const GetSignOutPageURL = (returnPath?: string | UN) => {
+  const signOutUrl = new URL(`${GetCurrentBaseURL()}/api/auth/sign-out`);
+  if (!NEXUS_INFO.IS_ADMIN_MODULE) {
+    signOutUrl.searchParams.set("returnUrl", resolveReturnPath(returnPath));
+  }
+  return signOutUrl.toString();
+};

package/src/helpers/input-helpers.tsx

@@ -1,8 +1,10 @@
-import { DEFAULT_ICON_ELEMENT_NAME } from "../interface";
+import { DEFAULT_ICON_ELEMENT_NAME, IErrorRespose } from "../interface";
 import { EValueChangeTypes, IInputCreateResults, IInputRootParameters } from "../interfaces/input-interfaces";
 import { ESizes } from "../interfaces/layout-interfaces";
 import { UN } from "../interfaces/type-interfaces";
+import { AddRemoveErrorFromInput } from "./validation-helpers";
 
+export const INPUT_ICON_BOX_CLASS = "input-icon-box";
 export const GetParentKey = (parentKey?: string | null) => {
   if (parentKey) return parentKey.split("|")[0];
   return undefined;
@@ -23,22 +25,50 @@ export const ForceSetValue = (input?: IInputCreateResults | null, value?: any |
     clearTimeout(timeoutValue);
   }, timeout ?? 0);
 };
+
+export const ApplyPasswordInputs = (inputResults: IInputCreateResults[] | UN, selectors: string[] | UN) => {
+  if (!inputResults || inputResults.length === 0 || !selectors || selectors.length === 0) return;
+  for (const selector of selectors) {
+    const input = inputResults.find((x) => x.input.id === selector);
+    if (input) ApplyPasswordInput(input.rootElement.querySelector(`div.ib.${INPUT_ICON_BOX_CLASS}`), input.inputElement);
+  }
+};
+
 export const ApplyPasswordInput = (iconbox: HTMLElement | null, inputElement: HTMLElement | null) => {
   const input = inputElement as HTMLInputElement | undefined;
   if (!input || !iconbox) return;
+
+  if (!iconbox.classList.contains("h")) iconbox.classList.add("h");
+
   const icon = iconbox.querySelector(DEFAULT_ICON_ELEMENT_NAME) as HTMLElement | null;
-  if (icon) icon.setAttribute("name", "eye");
+  if (!icon) return;
   const onMouseLeave = () => {
     iconbox.removeEventListener("mouseleave", onMouseLeave);
     iconbox.removeEventListener("click", onClicked);
     input.type = "password";
     if (icon) icon.setAttribute("name", "key");
   };
+  const onMouseEnter = () => {
+    icon.setAttribute("name", "eye");
+    iconbox.addEventListener("mouseleave", onMouseLeave);
+    iconbox.addEventListener("click", onClicked);
+  };
   const onClicked = () => {
     const isPassword = input.type === "password";
     input.type = isPassword ? "text" : "password";
     if (icon) icon.setAttribute("name", isPassword ? "eye-off" : "eye");
   };
-  iconbox.addEventListener("mouseleave", onMouseLeave);
-  iconbox.addEventListener("click", onClicked);
+  iconbox.addEventListener("mouseenter", onMouseEnter);
+};
+
+export const SetResponseErrorMessage = (apiResponse: IErrorRespose, inputResults: IInputCreateResults[] | UN) => {
+  if (!apiResponse || !inputResults || inputResults.length === 0 || !apiResponse.inputName) return;
+
+  const inputKeys = apiResponse.inputName.toLowerCase().split("|");
+  let isFirstElement = true;
+  for (const inputKey of inputKeys) {
+    const input = inputResults.find((x) => GetInputId(x.input).toLowerCase() === inputKey);
+    if (input) AddRemoveErrorFromInput(input.input, input.inputElement, true, apiResponse.message, isFirstElement);
+    isFirstElement = false;
+  }
 };