nexus-shared 1.1.19 → 1.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nexus-shared",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "description": "Nexus shared React components for Next.js",
   "type": "module",
   "sideEffects": [

package/src/api-services/authentication-service.tsx

@@ -0,0 +1,23 @@
+import { GetSignOutPageURL } from "../helpers/browser-helpers";
+import { BuildProxyApiUrl, EModules, ICurrentUser, IErrorRespose, ISuccessResponse } from "../interface";
+import { HttpGet, HttpPost } from "../services/http-services";
+import { ShowLoader } from "../services/loader-service";
+
+export const GetProfileDetails = async (autoRefresh?: boolean): Promise<ICurrentUser | null> => {
+  //Profile/Details
+  const response = await HttpGet(BuildProxyApiUrl(EModules.Authentication, "Profile/Details"), null, 0);
+  if (response?.isSuccess) return response.result as ICurrentUser;
+
+  if (response?.code === 401 && autoRefresh) {
+    const refreshResponse = await RefreshAuthToken();
+    if (refreshResponse?.isSuccess) return GetProfileDetails(false);
+    else {
+      ShowLoader();
+      window.location.href = GetSignOutPageURL();
+    }
+  }
+
+  return null;
+};
+
+export const RefreshAuthToken = async (): Promise<ISuccessResponse | IErrorRespose> => HttpPost("/api/auth/refresh", null, null, null, 0);

package/src/api-services/system-service.tsx

@@ -1,321 +1,29 @@
-import { EIcons } from "../interfaces/icon-interfaces";
-import { EMenuVisibility, IClientMenu, IPanelMenu, IUtilityMenu } from "../interfaces/menu-interfaces";
+"use server";
 
-export const GetClientMenus = async (): Promise<IClientMenu[]> => {
-  return [
-    {
-      id: 1,
-      menuCode: "home",
-      menuIcon: EIcons.HOME,
-      menuName: "Home",
-      menuUrl: "/home",
-      documentTitle: "Home Page",
-      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
-      displayOrder: 1,
-      pageTitle: "Home Page",
-      breadcrumbTitle: "Home",
-    },
-    {
-      id: 2,
-      menuCode: "about-me",
-      menuIcon: EIcons.PERSON,
-      menuName: "About Me",
-      menuUrl: "/about-me",
-      documentTitle: "About Me",
-      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
-      displayOrder: 2,
-      pageTitle: "About Me",
-      breadcrumbTitle: "About Me",
-    },
-    {
-      id: 3,
-      menuCode: "about-us",
-      menuIcon: EIcons.PERSON,
-      menuName: "About Us",
-      menuUrl: "/about-us",
-      documentTitle: "About Us",
-      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
-      displayOrder: 2,
-      pageTitle: "About Us",
-      breadcrumbTitle: "About Us",
-    },
-    {
-      id: 4,
-      menuCode: "my-projects",
-      menuIcon: EIcons.BRIEFCASE,
-      menuName: "My Projects",
-      menuUrl: "/my-projects",
-      documentTitle: "My Projects",
-      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
-      displayOrder: 3,
-      pageTitle: "My Projects",
-      breadcrumbTitle: "My Projects",
-    },
-    {
-      id: 5,
-      menuCode: "products",
-      menuIcon: EIcons.CUBE,
-      menuName: "My Products",
-      menuUrl: "/products",
-      documentTitle: "My Products",
-      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
-      displayOrder: 4,
-      pageTitle: "My Products",
-      breadcrumbTitle: "My Products",
-    },
-    {
-      id: 6,
-      menuCode: "products",
-      menuIcon: EIcons.CUBE,
-      menuName: "Our Products",
-      menuUrl: "/our-products",
-      documentTitle: "Our Products",
-      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
-      displayOrder: 4,
-      pageTitle: "Our Products",
-      breadcrumbTitle: "Our Products",
-    },
-    {
-      id: 7,
-      menuCode: "blog",
-      menuIcon: EIcons.NEWSPAPER,
-      menuName: "Blog",
-      menuUrl: "/blog",
-      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
-      displayOrder: 5,
-      pageTitle: "Blog",
-      breadcrumbTitle: "Blog",
-      documentTitle: "Blog",
-    },
-    {
-      id: 8,
-      menuCode: "portfolio-gallery",
-      menuIcon: EIcons.IMAGES,
-      menuName: "Portfolio Gallery",
-      menuUrl: "/portfolio-gallery",
-      documentTitle: "Portfolio Gallery",
-      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
-      displayOrder: 6,
-      pageTitle: "Portfolio Gallery",
-      breadcrumbTitle: "Portfolio Gallery",
-    },
-    {
-      id: 9,
-      menuCode: "our-gallery",
-      menuIcon: EIcons.IMAGES,
-      menuName: "Our Gallery",
-      menuUrl: "/our-gallery",
-      documentTitle: "Our Gallery",
-      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
-      displayOrder: 6,
-      pageTitle: "Our Gallery",
-      breadcrumbTitle: "Our Gallery",
-    },
-    {
-      id: 10,
-      menuCode: "services",
-      menuIcon: EIcons.CONSTRUCT,
-      menuName: "Services",
-      menuUrl: "/services",
-      documentTitle: "Services",
-      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
-      displayOrder: 7,
-      pageTitle: "Services",
-      breadcrumbTitle: "Services",
-    },
-    {
-      id: 11,
-      menuCode: "faq",
-      menuIcon: EIcons.HELP_CIRCLE,
-      menuName: "FAQ",
-      menuUrl: "/faq",
-      documentTitle: "FAQ",
-      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
-      displayOrder: 8,
-      pageTitle: "FAQ",
-      breadcrumbTitle: "FAQ",
-    },
-    {
-      id: 12,
-      menuCode: "contact-me",
-      menuIcon: EIcons.CALL,
-      menuName: "Contact Me",
-      menuUrl: "/contact-me",
-      documentTitle: "Contact Me",
-      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
-      displayOrder: 9,
-      pageTitle: "Contact Me",
-      breadcrumbTitle: "Contact Me",
-    },
-    {
-      id: 13,
-      menuCode: "contact-us",
-      menuIcon: EIcons.CALL,
-      menuName: "Contact Us",
-      menuUrl: "/contact-us",
-      documentTitle: "Contact Us",
-      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
-      displayOrder: 9,
-      pageTitle: "Contact Us",
-      breadcrumbTitle: "Contact Us",
-    },
-  ];
-};
+import { IThemeInformation } from "../interface";
+import { EMenuTargets, IPanelMenu, IUtilityMenu } from "../interfaces/menu-interfaces";
+import { APIS, NEXUS_CONFIG, NEXUS_INFO } from "../nexus.environments";
+import { HttpGet } from "../services/http-services";
+
+// @ts-ignore
+const processEnv = process.env;
+const TOKEN_GLOBAL_UTILITY_MENU = processEnv.TOKEN_GLOBAL_UTILITY_MENU as string;
+const TOKEN_GLOBAL_PANEL_MENU = processEnv.TOKEN_GLOBAL_PANEL_MENU as string;
+const TOKEN_GLOBAL_THEMES = processEnv.TOKEN_GLOBAL_THEMES as string;
 
-export const GetUtilityMenus = async (): Promise<IUtilityMenu[]> => {
-  return [
-    {
-      id: 1,
-      menuCode: "root-search",
-      menuIcon: EIcons.SEARCH,
-      menuName: "Search",
-      menuVisibilities: EMenuVisibility.AuthenticatedOnly | EMenuVisibility.GuestOnly,
-      displayOrder: 1,
-    },
-    {
-      id: 2,
-      menuCode: "favorite-menu",
-      menuIcon: EIcons.HEART,
-      menuName: "Favorite",
-      menuVisibilities: EMenuVisibility.AuthenticatedOnly | EMenuVisibility.GuestOnly,
-      displayOrder: 2,
-    },
-    {
-      id: 3,
-      menuCode: "cart-menu",
-      menuIcon: EIcons.CART,
-      menuName: "Cart",
-      menuVisibilities: EMenuVisibility.AuthenticatedOnly | EMenuVisibility.GuestOnly,
-      displayOrder: 3,
-    },
-    {
-      id: 4,
-      menuCode: "switch-theme",
-      menuIcon: EIcons.COLOR_PALETTE,
-      menuName: "Theme",
-      menuVisibilities: EMenuVisibility.AuthenticatedOnly | EMenuVisibility.GuestOnly,
-      displayOrder: 4,
-    },
-    {
-      id: 5,
-      menuCode: "mega-menu",
-      menuIcon: EIcons.GRID,
-      menuName: "Mega Menu",
-      menuVisibilities: EMenuVisibility.AuthenticatedOnly | EMenuVisibility.GuestOnly,
-      displayOrder: 5,
-    },
-  ];
+export const GetUtilityMenusAsync = async (): Promise<IUtilityMenu[]> => {
+  const response = await HttpGet(`${APIS.CONFIGURATION}/Resources/UtilityMenus/${NEXUS_INFO.CURRENT_MODULE}/${NEXUS_INFO.IS_ADMIN_MODULE ? EMenuTargets.AdminModule : EMenuTargets.ClientModule}/${TOKEN_GLOBAL_UTILITY_MENU}`, null, NEXUS_CONFIG.DEFAULT_REVALIDATE_TIME_ONE_DAY);
+  if (!response.isSuccess) return [];
+  return response.result as IUtilityMenu[];
 };
 
-export const GetUserPanels = async (): Promise<IPanelMenu[]> => {
-  return [
-    {
-      id: 1,
-      menuCode: "message-menu",
-      menuIcon: EIcons.MAIL,
-      menuName: "Messages",
-      menuVisibilities: EMenuVisibility.AuthenticatedOnly,
-      displayOrder: 1,
-      groupOrder: 1,
-    },
-    {
-      id: 2,
-      menuCode: "notification-menu",
-      menuIcon: EIcons.NOTIFICATIONS,
-      menuName: "Notifications",
-      menuVisibilities: EMenuVisibility.AuthenticatedOnly,
-      displayOrder: 2,
-      groupOrder: 1,
-    },
-    {
-      id: 3,
-      menuCode: "switch-theme",
-      menuIcon: EIcons.COLOR_PALETTE,
-      menuName: "Theme Mode",
-      menuVisibilities: EMenuVisibility.AuthenticatedOnly | EMenuVisibility.GuestOnly,
-      displayOrder: 2,
-      groupOrder: 2,
-    },
-    {
-      id: 4,
-      menuCode: "language",
-      menuIcon: EIcons.LANGUAGE,
-      menuName: "Language",
-      menuVisibilities: EMenuVisibility.AuthenticatedOnly | EMenuVisibility.GuestOnly,
-      displayOrder: 2,
-      groupOrder: 2,
-    },
-    {
-      id: 5,
-      menuCode: "currency",
-      menuIcon: EIcons.CASH,
-      menuName: "Currency Format",
-      menuVisibilities: EMenuVisibility.AuthenticatedOnly | EMenuVisibility.GuestOnly,
-      displayOrder: 2,
-      groupOrder: 2,
-    },
-    {
-      id: 6,
-      menuCode: "calendar-date",
-      menuIcon: EIcons.CALENDAR,
-      menuName: "Calendar Date",
-      menuVisibilities: EMenuVisibility.AuthenticatedOnly | EMenuVisibility.GuestOnly,
-      displayOrder: 2,
-      groupOrder: 2,
-    },
-    {
-      id: 7,
-      menuCode: "help-support",
-      menuIcon: EIcons.HELP_CIRCLE,
-      menuName: "Help & Support",
-      menuVisibilities: EMenuVisibility.AuthenticatedOnly | EMenuVisibility.GuestOnly,
-      displayOrder: 2,
-      groupOrder: 2,
-    },
-    {
-      id: 8,
-      menuCode: "settings",
-      menuIcon: EIcons.SETTINGS,
-      menuName: "Account Settings",
-      menuVisibilities: EMenuVisibility.AuthenticatedOnly,
-      displayOrder: 3,
-      groupOrder: 3,
-    },
-    {
-      id: 9,
-      menuCode: "switch-branch",
-      menuIcon: EIcons.REPEAT,
-      menuName: "Switch Branch",
-      menuVisibilities: EMenuVisibility.AuthenticatedOnly,
-      displayOrder: 3,
-      groupOrder: 3,
-    },
-    {
-      id: 10,
-      menuCode: "switch-fiscal-year",
-      menuIcon: EIcons.CALENDAR,
-      menuName: "Switch Fiscal Year",
-      menuVisibilities: EMenuVisibility.AuthenticatedOnly,
-      displayOrder: 3,
-      groupOrder: 3,
-    },
-    {
-      id: 11,
-      menuCode: "sign-out",
-      menuIcon: EIcons.EXIT,
-      menuName: "Sign Out",
-      menuVisibilities: EMenuVisibility.AuthenticatedOnly,
-      displayOrder: 3,
-      groupOrder: 3,
-    },
-    {
-      id: 12,
-      menuCode: "sign-in",
-      menuIcon: EIcons.LOGIN,
-      menuName: "Sign In",
-      menuVisibilities: EMenuVisibility.GuestOnly,
-      displayOrder: 3,
-      groupOrder: 3,
-    },
-  ];
+export const GetUserPanelsAsync = async (): Promise<IPanelMenu[]> => {
+  const response = await HttpGet(`${APIS.CONFIGURATION}/Resources/PanelMenus/${NEXUS_INFO.CURRENT_MODULE}/${NEXUS_INFO.IS_ADMIN_MODULE ? EMenuTargets.AdminModule : EMenuTargets.ClientModule}/${TOKEN_GLOBAL_PANEL_MENU}`, null, NEXUS_CONFIG.DEFAULT_REVALIDATE_TIME_ONE_DAY);
+  if (!response.isSuccess) return [];
+  return response.result as IPanelMenu[];
+};
+export const GetSystemThemesAsync = async (): Promise<IThemeInformation[]> => {
+  const response = await HttpGet(`${APIS.CONFIGURATION}/Resources/Themes/${TOKEN_GLOBAL_THEMES}`, null, NEXUS_CONFIG.DEFAULT_REVALIDATE_TIME_ONE_DAY);
+  if (!response.isSuccess) return [];
+  return response.result as IThemeInformation[];
 };

package/src/client.ts

@@ -24,9 +24,8 @@ export * from "./helpers/browser-helpers";
 export * from "./services/http-client-services";
 export * from "./services/loader-service";
 export * from "./services/localstorage-service";
+export * from "./services/user-services";
 export * from "./services/message-services";
 export * from "./services/theme-service";
 // Core
 export * from "./nexus-client";
-export * from "./proxy-api-client";
-export * from "./sso-client";

package/src/components/documents/button.tsx

@@ -1,33 +1,26 @@
 import Link from "next/link";
 import React from "react";
 import { IsValidURL } from "../../helpers/browser-helpers";
-import { SetElementStyles } from "../../helpers/element-helpers";
+import { SET_BUTTON_ACTIVE_CLASS, SetElementStyles } from "../../helpers/element-helpers";
+
+export { SET_BUTTON_ACTIVE_CLASS };
 import { DEFAULT_BUTTON_CLASS, DEFAULT_LINK_BUTTON_STYLE, EButtonTypes, ETargets, IButton } from "../../interfaces/button-interfaces";
-import { EIconTypes } from "../../interfaces/icon-interfaces";
-import { COLUMN_SIZE_ATTRIBUTE_KEY, EFlexPositions, EOpacity, ESizes } from "../../interfaces/layout-interfaces";
+import { DEFAULT_ICON_SIZE, EIconTypes } from "../../interfaces/icon-interfaces";
+import { COLUMN_SIZE_ATTRIBUTE_KEY, EFlexPositions, EOpacity } from "../../interfaces/layout-interfaces";
 import { EBackgroundColors, EBackgrounds } from "../../interfaces/theme-interfaces";
 import { ClickHandler, UN } from "../../interfaces/type-interfaces";
 import { NEXUS_CONFIG } from "../../nexus.environments";
 import { CreateIcon, Icon } from "./icon-box";
 
-export const SET_BUTTON_ACTIVE_CLASS = (isActive: boolean, element: HTMLElement, overrideColor?: EBackgroundColors | null, overrideActive?: string) => {
-  if (!element) return;
-
-  if (overrideColor) element.style.setProperty("--ACTIVE_BORDER_COLOR", overrideColor);
-
-  if (isActive) element.classList.add(overrideActive ?? "active");
-  else element.classList.remove(overrideActive ?? "active");
-};
-
 export const Button = ({ button, buttonType, styles, needColumnSize }: { button: IButton; buttonType?: EButtonTypes; styles?: React.CSSProperties | UN; needColumnSize?: boolean | UN }) => {
   return IsValidURL(button.url) ? (
     <Link href={button.url ?? "#"} style={styles ?? undefined} className={DEFAULT_BUTTON_CLASS(button.columnSize, undefined, button.borderSize, button.background, button.defaultClass, needColumnSize)} key={button.displayOrder ?? 0} type={buttonType ?? EButtonTypes.BUTTON} onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => button.onClick?.(event, event.currentTarget as HTMLElement, button.data, button.displayOrder)}>
-      {button.icon && <Icon icon={button.icon} type={button.iconType ?? EIconTypes.FILLED} opacity={EOpacity.O08} size={ESizes.Small} defaultClass="mr4" />}
+      {button.icon && <Icon icon={button.icon} type={button.iconType ?? EIconTypes.OUTLINED} opacity={EOpacity.O08} size={button.iconSize ?? DEFAULT_ICON_SIZE} defaultClass="mr4" />}
       <span>{button.label instanceof Function ? button.label(button.data) : button.label}</span>
     </Link>
   ) : (
-    <button style={styles ?? undefined} className={DEFAULT_BUTTON_CLASS(button.columnSize, undefined, button.borderSize, button.background, button.defaultClass, needColumnSize)} key={button.displayOrder} type={buttonType ?? EButtonTypes.BUTTON} onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => button.onClick?.(event, event.currentTarget as HTMLElement, button.data, button.displayOrder)}>
-      {button.icon && <Icon icon={button.icon} type={button.iconType ?? EIconTypes.FILLED} opacity={EOpacity.O08} size={ESizes.Small} defaultClass="mr4" />}
+    <button style={styles ?? { minHeight: "var(--IH)" }} className={DEFAULT_BUTTON_CLASS(button.columnSize, undefined, button.borderSize, button.background, button.defaultClass, needColumnSize)} key={button.displayOrder} type={buttonType ?? EButtonTypes.BUTTON} onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => button.onClick?.(event, event.currentTarget as HTMLElement, button.data, button.displayOrder)}>
+      {button.icon && <Icon icon={button.icon} type={button.iconType ?? EIconTypes.OUTLINED} opacity={EOpacity.O08} size={button.iconSize ?? DEFAULT_ICON_SIZE} defaultClass="mr4" />}
       <span>{button.label instanceof Function ? button.label(button.data) : button.label}</span>
     </button>
   );
@@ -36,7 +29,7 @@ export const CreateButton = (param: IButton, parent?: HTMLElement | UN, styles?:
   const button = document.createElement(param.url ? "a" : "button");
   button.setAttribute(COLUMN_SIZE_ATTRIBUTE_KEY, (param.columnSize ?? 12).toString());
   if (param.icon) {
-    const icon = CreateIcon(param.icon, button, param.iconType, param.iconSize ?? ESizes.Small, null, null);
+    const icon = CreateIcon(param.icon, button, param.iconType ?? EIconTypes.OUTLINED, param.iconSize ?? DEFAULT_ICON_SIZE, null, null);
     icon.classList.add("mr4");
   }
 

package/src/components/documents/icon-box.tsx

@@ -90,4 +90,4 @@ export const CreateIconBox = (icon: EIcons, parent?: HTMLElement | UN, children?
   return iconBox;
 };
 
-export const CreateToggleButton = (parentElement?: HTMLElement | null, children?: HTMLElement | UN, id?: string, boxSize?: ESizes | null, iconSize?: ESizes | null, opacity?: EOpacity | UN, iconType?: EIconTypes | null, boxBackground?: EBackgrounds) => CreateIconBox(EIcons.ELLIPSIS_HORIZONTAL, parentElement, children, id, iconType, boxBackground, boxSize, iconSize, `h ${boxBackground ?? NEXUS_CONFIG.DEFAULT_BACKGROUND} ml5`, "r90");
+export const CreateToggleButton = (parentElement?: HTMLElement | null, children?: HTMLElement | UN, id?: string | UN, boxSize?: ESizes | null, iconSize?: ESizes | null, opacity?: EOpacity | UN, iconType?: EIconTypes | null, boxBackground?: EBackgrounds) => CreateIconBox(EIcons.ELLIPSIS_HORIZONTAL, parentElement, children, id, iconType, boxBackground, boxSize, iconSize, `h ${boxBackground ?? NEXUS_CONFIG.DEFAULT_BACKGROUND} ml5`, "r90");

package/src/components/documents/tab-button.tsx

@@ -123,7 +123,7 @@ export const TabButtons = ({ buttons, activeButton, onClicked }: { buttons: IBut
 
       for (const btn of visibleItems) {
         if (active && active.id && btn.id === active.id) {
-          btn.iconType = EIconTypes.FILLED;
+          btn.iconType = EIconTypes.OUTLINED;
           btn.defaultClass = "btn active jc r";
         } else btn.defaultClass = `jc r ${NEXUS_CONFIG.DEFAULT_BACKGROUND}`;
       }
@@ -157,7 +157,7 @@ export const TabButtons = ({ buttons, activeButton, onClicked }: { buttons: IBut
       ))}
 
       {tabButtons.hiddenButtons && (
-        <Iconbox defaultClass="ml5" icon={EIcons.ELLIPSIS_HORIZONTAL} iconType={EIconTypes.FILLED} iconDefaultClass="r90" id={THEME_MENU_ELIPSE_BTN_ID}>
+        <Iconbox defaultClass="ml5" icon={EIcons.ELLIPSIS_HORIZONTAL} iconType={EIconTypes.OUTLINED} iconDefaultClass="r90" id={THEME_MENU_ELIPSE_BTN_ID}>
           <GlobalDialogbox defaultPadding={0} iggnoreChildClick={false} buttonIdentity={THEME_MENU_ELIPSE_BTN_ID} position={EPositions.Right}>
             <Buttons buttons={tabButtons.hiddenButtons} />
           </GlobalDialogbox>

package/src/components/documents/tag.tsx

@@ -0,0 +1,30 @@
+import { CSSProperties } from "react";
+import { EBackgrounds, EOpacity, EUserRoles, UN } from "../../interface";
+
+export const GlobalTag = ({ value, background, isSmall, defaultClass, fontOpacity }: { value: string; background?: EBackgrounds; isSmall?: boolean; defaultClass?: string; fontOpacity?: EOpacity }) => {
+  isSmall = isSmall ?? true;
+  const style = { width: "fit-content" } as CSSProperties;
+  if (isSmall) style.minHeight = "1.2rem";
+  return (
+    <small style={style} className={`pr3 pl3 r pr item nw ${fontOpacity ?? EOpacity.O08} ${isSmall ? "fs-07" : "p1"} ${defaultClass ?? ""} df ac jc ${background ?? EBackgrounds.ThemeColor600}`}>
+      {value}
+    </small>
+  );
+};
+export function GetUserRoleTag(role: string | EUserRoles | UN, isShort?: boolean, defaultClass?: string): React.JSX.Element {
+  const status = role?.toString();
+
+  switch (status) {
+    case "3":
+    case "SuperAdmin":
+      return <GlobalTag isSmall={true} value={isShort ? "SA" : "Super"} defaultClass={defaultClass} />;
+    case "2":
+    case "Admin":
+      return <GlobalTag isSmall={true} value={isShort ? "A" : "Admin"} defaultClass={defaultClass} />;
+    case "1":
+    case "User":
+      return <GlobalTag isSmall={true} value={isShort ? "U" : "User"} defaultClass={defaultClass} />;
+    default:
+      return <GlobalTag isSmall={true} value={isShort ? "G" : "Guest"} defaultClass={defaultClass} />;
+  }
+}

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

@@ -56,7 +56,7 @@ export const CreateInputButton = (param: ISubmitbutton, parentElement: HTMLEleme
     const span = document.createElement("span");
     span.textContent = value;
     span.classList.add("nw", "toh", "fs-10", "fw-600");
-    const icon = CreateIconBox(iconParam.icon, button, null, null, iconParam.type ?? EIconTypes.FILLED, iconParam.background ?? param.background ?? EBackgrounds.None, iconParam.boxSize, iconParam.iconSize, null, null, null, null, iconParam.opacity, null, null, null, null, iconParam.onClicked, iconParam.onMouseEnter);
+    const icon = CreateIconBox(iconParam.icon, button, null, null, iconParam.type ?? EIconTypes.OUTLINED, iconParam.background ?? param.background ?? EBackgrounds.None, iconParam.boxSize, iconParam.iconSize, null, null, null, null, iconParam.opacity, null, null, null, null, iconParam.onClicked, iconParam.onMouseEnter);
     icon.classList.add("mr3");
     button.appendChild(span);
   } else button.innerText = value;

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

@@ -94,7 +94,7 @@ export const CreateSubmitForm = (param: ISubmitForm, parentIdentifier: HTMLEleme
     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.FILLED, null, 0, null, EButtonTypes.SUBMIT);
+    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)";
@@ -103,7 +103,7 @@ export const CreateSubmitForm = (param: ISubmitForm, parentIdentifier: HTMLEleme
     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.FILLED, null, 0, null, EButtonTypes.BUTTON);
+      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);
     }
   }

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";
@@ -15,9 +16,13 @@ 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>
@@ -50,6 +55,9 @@ export const GlobalLayout = async ({ children, globalLayout }: Readonly<{ childr
         {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

@@ -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);