nexus-shared 1.1.18 → 1.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nexus-shared",
-  "version": "1.1.18",
+  "version": "1.1.20",
   "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,34 @@
-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, IClientMenu, IPanelMenu, IUtilityMenu } from "../interfaces/menu-interfaces";
+import { APIS, NEXUS_CONFIG, NEXUS_INFO } from "../nexus.environments";
+import { HttpGet } from "../services/http-services";
+
+const TOKEN_GLOBAL_CLIENT_MENU = "DJ3FKL4_IOR4U5_I4O5J4KDLJ_U_IO";
+const TOKEN_GLOBAL_UTILITY_MENU = "DJ3FKL4_IOR4U5_I4O5J4KDLJ_dfj45k_d";
+const TOKEN_GLOBAL_PANEL_MENU = "dj_dfjk3453IOR4U5_I4O5J4KDLJ_dfj45k_d";
+const TOKEN_GLOBAL_THEMES = "DJWJR_GJDK_65GKD54ZJD_00";
+
+export const GetClientMenusAsync = async (): Promise<IClientMenu[]> => {
+  const response = await HttpGet(`${APIS.CONFIGURATION}/Resources/GlobalMenus/${NEXUS_INFO.CURRENT_MODULE}/${NEXUS_INFO.IS_ADMIN_MODULE ? EMenuTargets.AdminModule : EMenuTargets.ClientModule}/${TOKEN_GLOBAL_CLIENT_MENU}`, null, NEXUS_CONFIG.DEFAULT_REVALIDATE_TIME_ONE_DAY);
+  if (!response.isSuccess) return [];
+  return response.result as IClientMenu[];
 };
 
-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,8 +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 "./sso-client";
-

package/src/components/documents/button.tsx

@@ -3,31 +3,33 @@ import React from "react";
 import { IsValidURL } from "../../helpers/browser-helpers";
 import { SetElementStyles } from "../../helpers/element-helpers";
 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) => {
+export const SET_BUTTON_ACTIVE_CLASS = (isActive: boolean, element: HTMLElement, overrideBackgroundColor?: EBackgroundColors | UN, overrideBorderColor?: EBackgroundColors | UN, overrideTextColor?: EBackgroundColors | UN, overrideActiveClass?: string | UN) => {
   if (!element) return;
 
-  if (overrideColor) element.style.setProperty("--ACTIVE_BORDER_COLOR", overrideColor);
+  if (isActive && overrideBackgroundColor) element.style.setProperty("--ACTIVE_BACKGROUND_COLOR", overrideBackgroundColor);
+  if (isActive && overrideBorderColor) element.style.setProperty("--ACTIVE_BORDER_COLOR", overrideBorderColor);
+  if (isActive && overrideTextColor) element.style.setProperty("--ACTIVE_TEXT_COLOR", overrideTextColor);
 
-  if (isActive) element.classList.add(overrideActive ?? "active");
-  else element.classList.remove(overrideActive ?? "active");
+  if (isActive) element.classList.add(overrideActiveClass ?? "active");
+  else element.classList.remove(overrideActiveClass ?? "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,17 +38,21 @@ 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");
   }
 
   SetElementStyles(button, styles);
 
-  button.className = DEFAULT_BUTTON_CLASS(param.columnSize, undefined, param.borderSize, param.background ?? NEXUS_CONFIG.DEFAULT_BACKGROUND, undefined, needColumnSize);
+  button.className = DEFAULT_BUTTON_CLASS(param.columnSize ?? 0, 0, param.borderSize, param.background ?? NEXUS_CONFIG.DEFAULT_BACKGROUND, param.defaultClass, needColumnSize);
   const span = document.createElement("span");
   span.textContent = param.label instanceof Function ? (param.label(param.data) ?? null) : (param.label ?? null);
   button.appendChild(span);
   button.onclick = (e) => param.onClick?.(e, button, param.data, param.displayOrder);
+  button.style.height = "var(--IH)";
+
+  button.classList.add("df", "ac", "pl5", "pr5");
+
   if (param.url) {
     (button as HTMLAnchorElement).href = param.url;
     (button as HTMLAnchorElement).target = param.target ?? ETargets.Blank;

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-box.tsx

@@ -1,3 +1,4 @@
+import { INPUT_ICON_BOX_CLASS } from "../../helpers/input-helpers";
 import { DEFAULT_INPUT_BORDER_SIZE, IInputRootParameters, REQUIRED_TEXT1 } from "../../interfaces/input-interfaces";
 import { EBackgrounds } from "../../interfaces/theme-interfaces";
 import { NEXUS_CONFIG } from "../../nexus.environments";
@@ -16,7 +17,7 @@ export const CreateInputBox = (param: IInputRootParameters<any>, child: HTMLElem
   if (param.label && !isTabular) {
     const label = document.createElement("label");
     label.className = "pa t50 ty50 left ilb en anim ml2";
-    label.innerHTML = param.label + ((param as any).isRequired ? `<span class="tx21 fs-08 ml1">${REQUIRED_TEXT1}</span>` : "");
+    label.innerHTML = param.label + ((param as any).isRequired ? `<span style="color: var(--B13)" class="fs-08 ml1">${REQUIRED_TEXT1}</span>` : "");
     label.htmlFor = param.id;
     box.appendChild(label);
   }
@@ -24,7 +25,8 @@ export const CreateInputBox = (param: IInputRootParameters<any>, child: HTMLElem
   if (param.icon) {
     box.classList.add("df", "ac");
     const I = param.icon;
-    CreateIconBox(I.icon, box, null, null, I.type, I.background ?? param.background ?? EBackgrounds.None, I.boxSize, I.iconSize, null, null, null, null, I.opacity, null, null, null, null, I.onClicked, I.onMouseEnter, (I.onClicked || I.onMouseEnter) !== undefined);
+    const iconBox = CreateIconBox(I.icon, box, null, null, I.type, I.background ?? param.background ?? EBackgrounds.None, I.boxSize, I.iconSize, null, null, null, null, I.opacity, null, null, null, null, I.onClicked, I.onMouseEnter, (I.onClicked || I.onMouseEnter) !== undefined);
+    iconBox.classList.add(INPUT_ICON_BOX_CLASS);
   }
 
   if (parent) parent.appendChild(box);

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;