nexus-shared 1.1.18 → 1.1.20

package/src/proxy-api/proxy-helpers.tsx

@@ -0,0 +1,91 @@
+import { NextRequest, NextResponse } from "next/server";
+import { EErrorCodes, EExceptionCategories } from "../interfaces/exception-interfaces";
+import { GetResponse, PROXY_PUBLIC_BASE_PATH } from "../interfaces/http-interfaces";
+import { EModules } from "../interfaces/system-interfaces";
+import { PROXY_REQUEST_HEADERS_TO_SKIP, PROXY_RESPONSE_HEADERS_TO_SKIP } from "./proxy-constants";
+
+const BACKEND_NOT_CONFIGURED_ERROR = "Backend API is not configured.";
+
+export function BuildBackendUrl(backendBase: string, pathSegments: string[], searchParams: URLSearchParams): string {
+  if (pathSegments.some((segment) => segment === ".." || segment === "." || segment.includes("\\"))) throw new Error("Invalid path.");
+  else if (!backendBase) throw new Error(BACKEND_NOT_CONFIGURED_ERROR);
+
+  const path = pathSegments.map(encodeURIComponent).join("/");
+  const query = searchParams.toString();
+
+  return query ? `${backendBase}/${path}?${query}` : `${backendBase}/${path}`;
+}
+
+export function BuildForwardHeaders(req: NextRequest): Headers {
+  const headers = new Headers();
+
+  req.headers.forEach((value, key) => {
+    if (PROXY_REQUEST_HEADERS_TO_SKIP.has(key.toLowerCase())) {
+      return;
+    }
+
+    headers.set(key, value);
+  });
+
+  return headers;
+}
+
+export async function ReadRequestBody(req: NextRequest, method: string): Promise<BodyInit | undefined> {
+  if (method === "GET" || method === "HEAD" || method === "OPTIONS") {
+    return undefined;
+  }
+
+  return await req.arrayBuffer();
+}
+
+export function ProxyErrorResponse(message: string, status: number, messageCode = "PROXY_ERROR", errorCode: EErrorCodes = EErrorCodes.Unknown): NextResponse {
+  return NextResponse.json(GetResponse.ERROR(message, messageCode, EExceptionCategories.Application, errorCode, undefined, null, status), { status });
+}
+function stripBackendBasePath(pathname: string, backendBaseUrl: string): string {
+  try {
+    const basePath = new URL(backendBaseUrl).pathname.replace(/\/+$/, "");
+    if (pathname.startsWith(basePath)) {
+      return pathname.slice(basePath.length).replace(/^\/+/, "");
+    }
+  } catch {
+    // Fall through to pathname cleanup below.
+  }
+
+  return pathname.replace(/^\/+/, "");
+}
+export function SanitizeResponseHeaders(headers: Headers, backendBaseUrl: string, module: EModules): Headers {
+  const sanitized = new Headers();
+  let backendHost: string | undefined;
+
+  try {
+    backendHost = new URL(backendBaseUrl).host;
+  } catch {
+    backendHost = undefined;
+  }
+
+  headers.forEach((value, key) => {
+    const lowerKey = key.toLowerCase();
+
+    if (PROXY_RESPONSE_HEADERS_TO_SKIP.has(lowerKey)) {
+      return;
+    }
+
+    if (lowerKey === "location" && backendHost) {
+      try {
+        const location = new URL(value, backendBaseUrl);
+        if (location.host === backendHost) {
+          const relativePath = stripBackendBasePath(location.pathname, backendBaseUrl);
+          const proxyPath = `${PROXY_PUBLIC_BASE_PATH}/${module}/${relativePath}${location.search}`;
+          sanitized.set(key, proxyPath);
+          return;
+        }
+      } catch {
+        // Relative locations are forwarded as-is.
+      }
+    }
+
+    sanitized.set(key, value);
+  });
+
+  return sanitized;
+}

package/src/proxy-api-client.tsx

@@ -0,0 +1 @@
+export * from "./proxy-api/proxy-constants";

package/src/proxy-api-server.tsx

@@ -0,0 +1,2 @@
+export * from "./proxy-api/proxy-backend";
+export * from "./proxy-api/proxy-constants";

package/src/services/http-client-services.tsx

@@ -1,7 +1,13 @@
 "use client";
 
-import { EBody, IErrorRespose, ISuccessResponse } from "../interface";
+/**
+ * Client-side HTTP utilities for `"use client"` pages and components.
+ * Adds UI-level response handling (loader/toast hooks). For Route Handlers and
+ * Server Components use `http-services` (`HttpPost`, `HttpGet`, …) from `nexus-shared` instead.
+ */
+import { DatasourceTypes, EBody, GetApiInformations, GetResponse, IApiInformations, IErrorRespose, IInterface, ISuccessResponse, UN } from "../interface";
 import { HttpDelete, HttpGet, HttpPost, HttpPut } from "./http-services";
+import { ErrorMessage, SuccessMessage } from "./message-services";
 
 /** // if same url is called multiple times, it will only send one request and return the same promise
 // this is to prevent multiple requests to the same url at the same time
@@ -12,7 +18,7 @@ import { HttpDelete, HttpGet, HttpPost, HttpPut } from "./http-services";
 // this is useful for example when user is typing in a search box and multiple requests are sent to the server
 */
 const pendingRequests: { [url: string]: Promise<any> | undefined } = {};
-export const Get = async (apiUrl: string, successMessage?: boolean, errorMessage?: boolean, revalidate?: number): Promise<ISuccessResponse | IErrorRespose> => {
+export const Get = async (apiUrl: string, successMessage?: boolean | UN, errorMessage?: boolean | UN): Promise<ISuccessResponse | IErrorRespose> => {
   if (pendingRequests[apiUrl] !== undefined) return pendingRequests[apiUrl]!;
 
   pendingRequests[apiUrl] = HttpGet(apiUrl)
@@ -23,21 +29,21 @@ export const Get = async (apiUrl: string, successMessage?: boolean, errorMessage
   return pendingRequests[apiUrl]!;
 };
 
-export const Put = async (apiUrl: string, body?: any | null, bodyType?: EBody, successMessage?: boolean, errorMessage?: boolean, revalidate?: number) => {
-  return await handleResponse(await HttpPut(apiUrl, body, bodyType, null, revalidate, null), successMessage ?? true, errorMessage ?? true);
+export const Put = async (apiUrl: string, body?: any | UN, bodyType?: EBody | UN, successMessage?: boolean | UN, errorMessage?: boolean | UN) => {
+  return await handleResponse(await HttpPut(apiUrl, body, bodyType, null, 0, null), successMessage ?? true, errorMessage ?? true);
 };
 
-export const Post = async (apiUrl: string, body?: any | null, bodyType?: EBody, successMessage?: boolean, errorMessage?: boolean, revalidate?: number) => {
+export const Post = async (apiUrl: string, body?: any | UN, bodyType?: EBody | UN, successMessage?: boolean | UN, errorMessage?: boolean | UN) => {
   const isFindListing = Array.isArray(body) && apiUrl.endsWith("/FindListing");
 
   if (!isFindListing) {
-    return await handleResponse(await HttpPost(apiUrl, body, bodyType, null, revalidate, null), successMessage ?? true, errorMessage ?? true);
+    return await handleResponse(await HttpPost(apiUrl, body, bodyType, null, 0, null), successMessage ?? true, errorMessage ?? true);
   } else {
     const apiKey = `${apiUrl}__${(body as string[]).sort().join(",")}`;
 
     if (pendingRequests[apiKey]) return pendingRequests[apiKey];
 
-    pendingRequests[apiKey] = HttpPost(apiUrl, body, bodyType, null, revalidate, null)
+    pendingRequests[apiKey] = HttpPost(apiUrl, body, bodyType, null, 0, null)
       .then((response) => handleResponse(response, successMessage ?? true, errorMessage ?? true))
       .finally(() => {
         delete pendingRequests[apiKey];
@@ -46,15 +52,24 @@ export const Post = async (apiUrl: string, body?: any | null, bodyType?: EBody,
   }
 };
 
-export const Delete = async (apiUrl: string, successMessage?: boolean, errorMessage?: boolean, revalidate?: number) => {
-  return await handleResponse(await HttpDelete(apiUrl, null, revalidate, null), successMessage ?? true, errorMessage ?? true);
+export const Delete = async (apiUrl: string, successMessage?: boolean | UN, errorMessage?: boolean | UN) => {
+  return await handleResponse(await HttpDelete(apiUrl, null, 0, null), successMessage ?? true, errorMessage ?? true);
+};
+export const SubmitApi = async (api: DatasourceTypes | UN, parameters: IInterface | IInterface[] | UN, successMessage?: boolean | UN, errorMessage?: boolean | UN): Promise<IErrorRespose | ISuccessResponse> => {
+  if (!api || Array.isArray(api) || !GetApiInformations.IS_API(api)) return Promise.resolve(GetResponse.SUCCESS(api));
+  const apiInfo = api as IApiInformations;
+
+  const url = GetApiInformations.BUILD_API(apiInfo, parameters);
+
+  // TODO:
+  return Post(url, parameters, null, successMessage, errorMessage);
 };
 
 const handleResponse = async (result: ISuccessResponse | IErrorRespose, successMessage?: boolean, errorMessage?: boolean): Promise<ISuccessResponse | IErrorRespose> => {
   if (result.isSuccess && !(result as IErrorRespose).exception) {
-    // TODO: if (successMessage) SuccessMessage("Request Success!", result.message ?? "Success");
+    if (successMessage) SuccessMessage("Request Success!", result.message ?? "Success");
     return result;
   }
-  // TODO: if (errorMessage) ErrorMessage("Request Failed!", result.message ?? "Failed");
+  if (errorMessage) ErrorMessage("Request Failed!", result.message ?? "Failed");
   return result;
 };

package/src/services/http-services.tsx

@@ -1,27 +1,30 @@
+/**
+ * Server-side HTTP utilities for Route Handlers, Server Components, and Server Actions.
+ * For browser/client components use `http-client-services` (`Post`, `Get`, …) via `nexus-shared/client`.
+ */
 import { Delay } from "../helpers/utility-helpers";
-import { EActions, EBody, EModules, GetMethod, IErrorRespose, ISuccessResponse } from "../interface";
+import { EActions, EBody, EModules, GetMethod, GetResponse, IErrorRespose, ISuccessResponse, UN } from "../interface";
 import { EErrorCodes, EExceptionCategories } from "../interfaces/exception-interfaces";
 import { APIS, NEXUS_CONFIG, NEXUS_INFO } from "../nexus.environments";
 
 const MAX_RETRIES = NEXUS_INFO.IS_PRODUCTION ? 2 : 1;
 const RETRY_DELAY_MS = NEXUS_INFO.IS_PRODUCTION ? 50 : 1;
 
-const NEXUS_HEADERS = (formdata?: any, httpMethod: EActions = EActions.Get, bodyType: EBody = EBody.JSON, token?: string | null, revalidate?: number | null, browserId?: string | null): RequestInit & { next?: { revalidate: number } } => {
+export const BuildApiHeader = (formdata?: any, httpMethod?: EActions | string, bodyType: EBody | UN = EBody.JSON, token?: string | UN, revalidate?: number | UN, browserId?: string | UN): RequestInit & { next?: { revalidate: number } } => {
+  httpMethod = httpMethod ?? "GET";
+  bodyType = bodyType ?? EBody.JSON;
+
   const headers = new Headers();
-  if (token && token.length > 50) headers.append("authorization", `${token}`);
+  if (token && token.length > 50) headers.append("authorization", token.startsWith("Bearer ") ? token : `Bearer ${token}`);
   if (browserId) headers.append("bid", browserId);
-  if (bodyType === EBody.JSON && (httpMethod === EActions.Post || httpMethod === EActions.Put)) {
-    headers.append("Content-Type", "application/json");
-  }
+  headers.append("Content-Type", bodyType);
 
   const options: RequestInit & { next?: { revalidate: number } } = {
-    method: GetMethod(httpMethod),
+    method: typeof httpMethod === "string" ? httpMethod : GetMethod(httpMethod),
     headers,
   };
 
-  if (formdata) {
-    options.body = bodyType === EBody.JSON ? JSON.stringify(formdata) : formdata;
-  }
+  if (formdata) options.body = bodyType === EBody.JSON ? JSON.stringify(formdata) : formdata;
 
   if (!revalidate || revalidate <= 0) {
     // No caching
@@ -55,29 +58,41 @@ const fetchWithTimeout = async (url: string, options?: RequestInit, timeout = NE
   const id = setTimeout(() => controller.abort(), timeout);
   try {
     const response = await fetch(url, { ...options, signal: controller.signal });
-    clearTimeout(id);
     return response;
   } catch (error) {
-    clearTimeout(id);
     throw error;
+  } finally {
+    clearTimeout(id);
   }
 };
-export const HttpGet = async (apiUrl: string, token?: string | null, revalidate?: number, browserId?: string | null) => {
-  return await safeFetch(() => fetchWithTimeout(apiUrl, NEXUS_HEADERS(undefined, EActions.Get, EBody.JSON, token, revalidate, browserId)));
+export const HttpGet = async (apiUrl: string, token?: string | UN, revalidate?: number | UN, browserId?: string | UN) => {
+  return await safeFetch(() => fetchWithTimeout(apiUrl, BuildApiHeader(undefined, EActions.Get, EBody.JSON, token, revalidate, browserId)));
+};
+export const HttpPost = async (apiUrl: string, body?: any | UN, bodyType?: EBody | UN, token?: string | UN, revalidate?: number | UN, browserId?: string | UN) => {
+  return await safeFetch(() => fetchWithTimeout(apiUrl, BuildApiHeader(body, EActions.Post, bodyType, token, revalidate, browserId)));
 };
-export const HttpPost = async (apiUrl: string, body?: any, bodyType?: EBody, token?: string | null, revalidate?: number, browserId?: string | null) => {
-  return await safeFetch(() => fetchWithTimeout(apiUrl, NEXUS_HEADERS(body, EActions.Post, bodyType, token, revalidate, browserId)));
+
+export const HttpPut = async (apiUrl: string, body?: any | UN, bodyType?: EBody | UN, token?: string | UN, revalidate?: number | UN, browserId?: string | UN) => {
+  return await safeFetch(() => fetchWithTimeout(apiUrl, BuildApiHeader(body, EActions.Put, bodyType, token, revalidate, browserId)));
 };
 
-export const HttpPut = async (apiUrl: string, body?: any, bodyType?: EBody, token?: string | null, revalidate?: number, browserId?: string | null) => {
-  return await safeFetch(() => fetchWithTimeout(apiUrl, NEXUS_HEADERS(body, EActions.Put, bodyType, token, revalidate, browserId)));
+export const HttpDelete = async (apiUrl: string, token?: string | UN, revalidate?: number | UN, browserId?: string | UN) => {
+  return await safeFetch(() => fetchWithTimeout(apiUrl, BuildApiHeader(undefined, EActions.Delete, undefined, token, revalidate, browserId)));
 };
 
-export const HttpDelete = async (apiUrl: string, token?: string | null, revalidate?: number, browserId?: string | null) => {
-  return await safeFetch(() => fetchWithTimeout(apiUrl, NEXUS_HEADERS(undefined, EActions.Delete, undefined, token, revalidate, browserId)));
+export const HttpFetch = async (apiUrl: string, method: EActions | string, body?: any, bodyType?: EBody, token?: string | UN, revalidate?: number, browserId?: string | UN): Promise<Response | Error> => {
+  try {
+    const response = await fetch(apiUrl, BuildApiHeader(body, method, bodyType, token, revalidate, browserId));
+    return response;
+  } catch (error: Error | any) {
+    return error;
+  }
 };
+
 export const GetRootApi = (nexusModule: EModules) => {
   switch (nexusModule) {
+    case EModules.None:
+      return "/api";
     case EModules.Authentication:
       return APIS.AUTHENTICATION;
     case EModules.Configuration:
@@ -100,8 +115,9 @@ const handleResponse = async (response: Response): Promise<IErrorRespose> => {
   const status = response.status;
   try {
     const errorData = await response.json();
-    return handleError({ ...errorData, status });
-  } catch {
+
+    return handleError({ ...errorData, code: status, status: status });
+  } catch (error: any) {
     let message = "Unexpected server error.";
     switch (status) {
       case 401:
@@ -116,24 +132,23 @@ const handleResponse = async (response: Response): Promise<IErrorRespose> => {
         message = "Method not allowed.";
         break;
     }
-    return handleError({ status, message });
+    return handleError(GetResponse.ERROR(message, "GENERIC_ERROR", EExceptionCategories.Application, EErrorCodes.Unknown, undefined, undefined, status));
   }
 };
 export const handleError = (error: any): IErrorRespose => {
   return {
     isSuccess: false,
-    exception: error,
     code: error?.code,
     message: error?.message || "An unknown error occurred.",
-    messageCode: error?.key || "GENERIC_ERROR",
+    messageCode: error?.messageCode || "GENERIC_ERROR",
     exceptionCategory: error?.exceptionCategory || EExceptionCategories.Application,
     errorCode: error?.errorCode || EErrorCodes.Unknown,
     inputName: error?.inputName || undefined,
-    result: null,
+    exception: error?.exception || undefined,
+    result: error?.result || undefined,
   };
 };
 const handleNetworkError = (error: any): IErrorRespose => {
-  console.error("\n\nNetwork error encountered:", error);
   return handleError({
     status: 503,
     message: "Unable to connect to the server. Please check your network or backend status.",

package/src/services/loader-service.tsx

@@ -36,17 +36,17 @@ const _findExistingLoader = (parent: HTMLElement): HTMLElement | null => {
   const loaderElement = FindChildElement(parent, `#${LOADER_IDENTITY}`);
   return loaderElement as HTMLElement | null;
 };
-const _updateLoaderProperties = (loaderElement: HTMLElement, type: EAnimationClasses, size: ESizes) => {
+const _updateLoaderProperties = (loaderElement: HTMLElement, type: EAnimationClasses, size: ESizes, isInputLoader: boolean) => {
   if (type === EAnimationClasses.SPIN) {
     if (size === ESizes.VeryTiny) {
-      loaderElement.style.setProperty("--SPIN_BOX_SIZE", "2.5rem");
-      loaderElement.style.setProperty("--SPIN_BOX_BORDER_SIZE", "0.34rem");
+      loaderElement.style.setProperty("--SPIN_BOX_SIZE", isInputLoader ? "1.5rem" : "2.5rem");
+      loaderElement.style.setProperty("--SPIN_BOX_BORDER_SIZE", isInputLoader ? "0.28rem" : "0.34rem");
     } else if (size === ESizes.Tiny) {
-      loaderElement.style.setProperty("--SPIN_BOX_SIZE", "2.8rem");
-      loaderElement.style.setProperty("--SPIN_BOX_BORDER_SIZE", "0.36rem");
+      loaderElement.style.setProperty("--SPIN_BOX_SIZE", isInputLoader ? "2.0rem" : "2.8rem");
+      loaderElement.style.setProperty("--SPIN_BOX_BORDER_SIZE", isInputLoader ? "0.31rem" : "0.36rem");
     } else if (size === ESizes.VerySmall) {
-      loaderElement.style.setProperty("--SPIN_BOX_SIZE", "3rem");
-      loaderElement.style.setProperty("--SPIN_BOX_BORDER_SIZE", "0.38rem");
+      loaderElement.style.setProperty("--SPIN_BOX_SIZE", isInputLoader ? "2.4rem" : "3rem");
+      loaderElement.style.setProperty("--SPIN_BOX_BORDER_SIZE", isInputLoader ? "0.34rem" : "0.38rem");
     } else if (size === ESizes.Small) {
       loaderElement.style.setProperty("--SPIN_BOX_SIZE", "3.5rem");
       loaderElement.style.setProperty("--SPIN_BOX_BORDER_SIZE", "0.45rem");
@@ -68,25 +68,30 @@ const _updateLoaderProperties = (loaderElement: HTMLElement, type: EAnimationCla
     }
   }
 };
-const _updateLoaderAttributes = (loaderElement: HTMLElement, type: EAnimationClasses, size: ESizes, disabledInputs: boolean, count: number) => {
+const _updateLoaderAttributes = (loaderElement: HTMLElement, type: EAnimationClasses, size: ESizes, disabledInputs: boolean, count: number, isInputLoader: boolean) => {
   loaderElement.setAttribute(LOADER_DATA_COUNT_ATTRIBUTE, count.toString());
   loaderElement.setAttribute(LOADER_DATA_TYPE_ATTRIBUTE, type);
   loaderElement.setAttribute(LOADER_DATA_SIZE_ATTRIBUTE, size);
   loaderElement.setAttribute(LOADER_DATA_DISABLED_INPUTS_ATTRIBUTE, disabledInputs ? "true" : "false");
 };
-const _createLoaderElement = (parent: HTMLElement, type: EAnimationClasses, size: ESizes, showLogo: boolean, disabledInputs: boolean, background: EBackgrounds): HTMLElement | null => {
+const _createLoaderElement = (parent: HTMLElement, type: EAnimationClasses, size: ESizes, showLogo: boolean, disabledInputs: boolean, background: EBackgrounds, defaultClass?: string | UN, isInputLoader?: boolean): HTMLElement | null => {
   const loaderElement = _findExistingLoader(parent);
   if (loaderElement && !loaderElement.classList.contains(DISPOSED_LOADER_CLASS)) {
     const count = parseInt(loaderElement.getAttribute(LOADER_DATA_COUNT_ATTRIBUTE) ?? "0") + 1;
-    _updateLoaderAttributes(loaderElement, type, size, disabledInputs, count);
-    _updateLoaderProperties(loaderElement, type, size);
+    _updateLoaderAttributes(loaderElement, type, size, disabledInputs, count, isInputLoader ?? false);
+    _updateLoaderProperties(loaderElement, type, size, isInputLoader ?? false);
     return loaderElement as HTMLElement;
   }
 
   const newLoaderElement = document.createElement("div");
   newLoaderElement.id = LOADER_IDENTITY;
   newLoaderElement.classList.add("nexus-container", "o0", EAnimationClasses.FADE_IN, background);
-  _updateLoaderAttributes(newLoaderElement, type, size, disabledInputs, 1);
+  if (defaultClass) newLoaderElement.classList.add(...defaultClass.split(" "));
+  _updateLoaderAttributes(newLoaderElement, type, size, disabledInputs, 1, isInputLoader ?? false);
+  _updateLoaderProperties(newLoaderElement, type, size, isInputLoader ?? false);
+
+  newLoaderElement.style.maxHeight = "100%!important";
+  newLoaderElement.style.maxWidth = "100%!important";
 
   const loader = document.createElement("div");
   newLoaderElement.appendChild(loader);
@@ -97,9 +102,7 @@ const _createLoaderElement = (parent: HTMLElement, type: EAnimationClasses, size
     loader.innerText = "Loading...";
     loader.classList.add("tx52");
     loader.style.fontSize = "1.5rem";
-  } else if (showLogo) {
-    _updateLoaderProperties(newLoaderElement, type, size);
-
+  } else if (showLogo && type !== EAnimationClasses.SLIDE_BAR && type !== EAnimationClasses.BOUNCE_BAR) {
     const logoElement = document.createElement("img");
     logoElement.src = FILES.LOGO.ICON;
     logoElement.alt = "Logo";
@@ -123,7 +126,7 @@ const _createLoaderElement = (parent: HTMLElement, type: EAnimationClasses, size
   return newLoaderElement;
 };
 
-export const ShowLoader = async (parent?: String | HTMLElement | UN, type?: EAnimationClasses | UN, disabledInputs?: boolean | UN, size?: ESizes | UN, delay?: number | UN, showLogo?: boolean | UN, background?: EBackgrounds | UN): Promise<HTMLElement | null> => {
+export const ShowLoader = async (parent?: String | HTMLElement | UN, type?: EAnimationClasses | UN, disabledInputs?: boolean | UN, size?: ESizes | UN, delay?: number | UN, showLogo?: boolean | UN, background?: EBackgrounds | UN, defaultClass?: string | UN, isInputLoader?: boolean | UN): Promise<HTMLElement | null> => {
   if (!IsBrowser()) return Promise.resolve(null);
   type = type ?? DEFAULT_LOADER_TYPE;
   size = size ?? DEFAULT_LOADER_SIZE;
@@ -133,7 +136,7 @@ export const ShowLoader = async (parent?: String | HTMLElement | UN, type?: EAni
     const timeout = setTimeout(() => {
       clearTimeout(timeout);
       const parentElement = _findParentElement(parent);
-      const loaderElement = _createLoaderElement(parentElement, type, size, showLogo ?? true, disabledInputs ?? false, background);
+      const loaderElement = _createLoaderElement(parentElement, type, size, showLogo ?? true, disabledInputs ?? false, background, defaultClass, isInputLoader ?? false);
       resolve(loaderElement);
     }, delay ?? DEFAULT_LOADER_DELAY);
   });
@@ -166,3 +169,17 @@ export const HideLoader = (parent?: String | HTMLElement | UN, force?: boolean |
     }, delay ?? DEFAULT_LOADER_DELAY);
   });
 };
+
+export const InputLoader = async (parent: String | HTMLElement, isShow: boolean, defaultClass?: string | UN): Promise<HTMLElement | null> => {
+  if (isShow !== false) {
+    const loaderElement = await ShowLoader(parent, EAnimationClasses.SPIN, false, ESizes.VeryTiny, null, false, EBackgrounds.None, defaultClass, true);
+    if (loaderElement) {
+      loaderElement.style.width = "100%";
+      loaderElement.style.height = "100%";
+    }
+    return loaderElement;
+  }
+
+  HideLoader(parent);
+  return null;
+};

package/src/services/localstorage-service.tsx

@@ -1,30 +1,84 @@
 import { CreateUpdatePreference } from "../api-services/preference-service";
 import { IsBrowser } from "../helpers/browser-helpers";
 import { Debounce } from "../helpers/utility-helpers";
+import { EFlexPositions, UN } from "../interface";
 import { LOCAL_STORAGE_KEYS } from "../interfaces/storage-interfaces";
 import { EPreferenceTargets } from "../interfaces/system-interfaces";
 import { IThemeInformation } from "../interfaces/theme-interfaces";
 import { O } from "../nexus-client";
 
+/**
+ * Create a debounce function to update the preference in the server
+ * This is used to update the preference in the server
+ * @param CreateUpdatePreference The function to create the update preference
+ * @param debounceTime The debounce time in milliseconds
+ * @returns The debounce function
+ */
 const _createUpdatePreferenceDebounce = Debounce(CreateUpdatePreference, 1000);
 
-const _syncStorageToServer = async (key: string, value: string | null, isSyncWithServer?: boolean, target?: EPreferenceTargets) => {
+/**
+ * Sync the value of the local storage to the server
+ * This is used to sync the value of the local storage to the server
+ * @param key The key of the local storage
+ * @param value The value to set
+ * @param isSyncWithServer Whether to sync with the server
+ * @param target The target of the local storage
+ */
+const _syncStorageToServer = async (key: string, value: string | UN, isSyncWithServer?: boolean | UN, target?: EPreferenceTargets | UN) => {
   if (!IsBrowser() || !isSyncWithServer || !target) return;
 
-  await _createUpdatePreferenceDebounce(target, key, value);
+  await _createUpdatePreferenceDebounce(target, key, value ?? null);
 };
 
-export const SetLocalStorage = (key: string, value: string, isSyncWithServer?: boolean, target?: EPreferenceTargets) => {
+/**
+ * Set the value of the local storage
+ * This is used to set the value of the local storage
+ * @param key The key of the local storage
+ * @param value The value to set
+ * @param isSyncWithServer Whether to sync with the server
+ * @param target The target of the local storage
+ */
+export const SetLocalStorage = (key: string, value: string | UN, isSyncWithServer?: boolean | UN, target?: EPreferenceTargets | UN) => {
   if (!IsBrowser()) return;
 
   _syncStorageToServer(key, value, isSyncWithServer, target);
-  localStorage.setItem(key, value);
+
+  if (value === null || value === undefined) RemoveLocalStorage(key, isSyncWithServer, target);
+  else localStorage.setItem(key, value);
+};
+export const SetSessionStorage = (key: string, value: string | UN) => {
+  if (!IsBrowser()) return;
+  if (value === null || value === undefined) RemoveSessionStorage(key);
+  else sessionStorage.setItem(key, value);
 };
-export const RemoveLocalStorage = (key: string, isSyncWithServer?: boolean, target?: EPreferenceTargets) => {
+export const GetSessionStorage = (key: string): string | null => {
+  if (!IsBrowser()) return null;
+  const data = sessionStorage.getItem(key);
+  if (!data) return null;
+  return data;
+};
+export const RemoveSessionStorage = (key: string) => {
+  if (!IsBrowser()) return;
+  sessionStorage.removeItem(key);
+};
+/**
+ * Remove the value of the local storage
+ * This is used to remove the value of the local storage
+ * @param key The key of the local storage
+ * @param isSyncWithServer Whether to sync with the server
+ * @param target The target of the local storage
+ */
+export const RemoveLocalStorage = (key: string, isSyncWithServer?: boolean | UN, target?: EPreferenceTargets | UN) => {
   _syncStorageToServer(key, null, isSyncWithServer, target);
   localStorage.removeItem(key);
 };
 
+/**
+ * Get the value of the local storage
+ * This is used to get the value of the local storage
+ * @param key The key of the local storage
+ * @returns The value of the local storage
+ */
 export function GetLocalStorage(key: string): string | null {
   if (!IsBrowser()) return null;
   const data = localStorage.getItem(key);
@@ -32,6 +86,11 @@ export function GetLocalStorage(key: string): string | null {
   return data;
 }
 
+/**
+ * Set the current theme in the local storage
+ * This is used to determine the current theme in the application
+ * @param themeCode The code of the theme to set
+ */
 export const SetCurrentTheme = (themeCode: string) => SetLocalStorage(LOCAL_STORAGE_KEYS.ACTIVE_THEME, themeCode, true, EPreferenceTargets.User);
 export const GetCurrentTheme = (): IThemeInformation => {
   const themeInformations = O.systemThemes;
@@ -41,3 +100,20 @@ export const GetCurrentTheme = (): IThemeInformation => {
   return themeInformations.find((theme) => theme.systemName === activeTheme) || themeInformations[0];
 };
 export const GetCurrentThemeName = (): string => GetCurrentTheme().systemName;
+
+/**
+ * Get the position of the form buttons from the local storage
+ * This is used to determine the position of the form buttons in the form
+ * @returns The position of the form buttons
+ */
+export const GetFormButtonPosition = (): EFlexPositions => {
+  const position = GetLocalStorage(LOCAL_STORAGE_KEYS.FORM_BUTTON_POSITION);
+  if (!position) return EFlexPositions.Left;
+  return position as EFlexPositions;
+};
+/**
+ * Set the position of the form buttons in the local storage
+ * This is used to determine the position of the form buttons in the form
+ * @param position The position of the form buttons
+ */
+export const SetFormButtonPosition = (position: EFlexPositions) => SetLocalStorage(LOCAL_STORAGE_KEYS.FORM_BUTTON_POSITION, position, true, EPreferenceTargets.User);