@asaleh37/ui-base 25.8.1-4 → 25.8.1-5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asaleh37/ui-base",
-  "version": "25.8.1-4",
+  "version": "25.8.15.1",
   "description": "",
   "license": "ISC",
   "author": "Ahmed Saleh Mohamed",
@@ -113,7 +113,7 @@
     "stylis-plugin-rtl": "^2.1.1",
     "zod": "^3.24.2"
   },
-  "dependencies": {
+  "dependencies": {    
     "@rollup/plugin-json": "^6.1.0",
     "rollup-plugin-terser": "^7.0.2"
   }

package/src/components/App.tsx

@@ -89,17 +89,6 @@ const App: React.FC<AppInfo> = (props: AppInfo) => {
     },
   };
 
-  let commonStores = {};
-  if (props.enableAdministrationModule) {
-    commonStores = { ...ADMINISTRATION_STORES };
-  }
-  if (props.businessCommonStoresMetaData) {
-    commonStores = {
-      ...commonStores,
-      ...props.businessCommonStoresMetaData,
-    };
-  }
-  dispatch(setStoresMetaData(commonStores));
   const AppLayoutState = useSelector((state: any) => state.AppLayout);
   let themeOptions = { ...LightThemeOptions };
   if (AppLayoutState.themeMode === "dark") {
@@ -112,6 +101,17 @@ const App: React.FC<AppInfo> = (props: AppInfo) => {
   useEffect(() => {
     document.title = props.documentTitle;
     dispatch(AppInfoActions.setAppInfo(props));
+    let commonStores = {};
+    if (props.enableAdministrationModule) {
+      commonStores = { ...ADMINISTRATION_STORES };
+    }
+    if (props.businessCommonStoresMetaData) {
+      commonStores = {
+        ...commonStores,
+        ...props.businessCommonStoresMetaData,
+      };
+    }
+    dispatch(setStoresMetaData(commonStores));
   }, []);
   return (
     <ThemeProvider theme={theme}>

package/src/components/common/Login.tsx

@@ -126,6 +126,13 @@ const Login: React.FC = () => {
   useEffect(() => {
     checkUserSession();
   }, [appInfo]);
+
+  useEffect(() => {
+    if (userSession.isAuthenticated === null) {
+      console.log("checking usersession on reload", userSession);
+      checkUserSession();
+    }
+  }, [userSession.isAuthenticated]);
   return (
     <ThemeProvider theme={loginTheme}>
       <Paper

package/src/components/common/NoLicenseComponent.tsx

@@ -0,0 +1,79 @@
+import { Box, Typography } from "@mui/material";
+import {
+  AppInfo,
+  LicenseCheckObject,
+} from "../../redux/features/common/AppInfoSlice";
+import { useSelector } from "react-redux";
+import { useEffect, useState } from "react";
+import { useAxios } from "../../hooks";
+
+const NoLicenseComponent: React.FC = () => {
+  const [licenseCheckObj, setLicenseCheckObject] = useState<LicenseCheckObject>(
+    { isLicensed: true, lastLicenseCheckMessage: "", lastLicenseCheckTime: "" }
+  );
+  const { handleGetRequest } = useAxios();
+  const appInfo: AppInfo = useSelector((state: any) => state.AppInfo.value);
+  const checkSystemLicense = async () => {
+    if (appInfo?.checkLicense?.endpoint) {
+      await handleGetRequest({
+        endPointURI: appInfo.checkLicense?.endpoint,
+        successCallBkFn: (response) => {
+          setLicenseCheckObject(response.data);
+        },
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (appInfo?.checkLicense?.endpoint) {
+      const interval = appInfo?.checkLicense?.interval || 60000;
+      const intervalId = setInterval(() => {
+        checkSystemLicense();
+      }, interval);
+      return () => {
+        clearInterval(intervalId);
+        console.log("Interval cleared");
+      };
+    }
+  }, [appInfo]);
+  return !licenseCheckObj.isLicensed ? (
+    <Box
+      sx={{
+        flex: 1,
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "fixed",
+        top: 0,
+        background: "rgba(235, 235, 235, 0.8)",
+        left: 0,
+        zIndex: 9999,
+      }}
+    >
+      <img src={appInfo.appLogo} style={{ height: 200, width: 200 }} />
+      <Typography variant="h5">
+        {appInfo.appName} - {appInfo.appVersion}
+      </Typography>
+      <Typography variant="h6" color="error">
+        Your license is missing or has expired.
+      </Typography>
+      <Typography variant="h6" color="error">
+        Please reach out to your vendor for assistance.
+      </Typography>
+      <Typography>
+        License Check @{licenseCheckObj?.lastLicenseCheckTime || "--------"}
+      </Typography>
+      <Typography>
+        License Check Result :{" "}
+        {licenseCheckObj?.lastLicenseCheckMessage || "--------"}
+      </Typography>
+    </Box>
+  ) : (
+    <></>
+  );
+};
+
+export default NoLicenseComponent;

package/src/components/index.ts

@@ -1,8 +1,5 @@
-export { useDispatch, useSelector } from "react-redux";
-export { useParams as useParams } from "react-router-dom";
 export * from "./BaseApp";
 export * from "@mui/material";
-export * from "zod";
 export * from "@mui/lab";
 export { toast } from "react-toastify";
 export { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormElementField.tsx

@@ -46,7 +46,11 @@ const FormElementField: React.FC<FormElementFieldProps> = (
                 ? true
                 : false
             }
-            hidden={props?.hidden || false}
+            hidden={
+              props?.hidden || element.hiddenFields.includes(fieldName)
+                ? true
+                : false
+            }
             label={props?.fieldLabel}
             value={formValues[fieldName]}
             onChange={(event) => {
@@ -90,6 +94,11 @@ const FormElementField: React.FC<FormElementFieldProps> = (
                 ? true
                 : false
             }
+            hidden={
+              props?.hidden || element.hiddenFields.includes(fieldName)
+                ? true
+                : false
+            }
             label={props?.fieldLabel}
             onChangeCallBack={(v: any) => {
               formManager.setValue(fieldName, v);
@@ -127,6 +136,11 @@ const FormElementField: React.FC<FormElementFieldProps> = (
                 );
               }
             }}
+            hidden={
+              props?.hidden || element.hiddenFields.includes(fieldName)
+                ? true
+                : false
+            }
             value={formValues[fieldName]}
             error={formManager.formState.errors[fieldName] != undefined}
             errorMessage={formManager?.formState?.errors[
@@ -146,6 +160,11 @@ const FormElementField: React.FC<FormElementFieldProps> = (
                 );
               }
             }}
+            hidden={
+              props?.hidden || element.hiddenFields.includes(fieldName)
+                ? true
+                : false
+            }
             value={formValues[fieldName]}
             checkedValue={props?.checkedValue || true}
             unCheckedValue={props?.unCheckedValue || false}
@@ -165,10 +184,15 @@ const FormElementField: React.FC<FormElementFieldProps> = (
                 ? true
                 : false
             }
+            hidden={
+              props?.hidden || element.hiddenFields.includes(fieldName)
+                ? true
+                : false
+            }
             onChangeCallBack={(v: any, selectedRecord: any) => {
               let newValue = null;
               if (v) {
-                newValue = v + "";
+                newValue = v;
               }
               formManager.setValue(fieldName, newValue);
               if (props?.formProps?.onValueChangeCallBack) {
@@ -197,10 +221,15 @@ const FormElementField: React.FC<FormElementFieldProps> = (
                 ? true
                 : false
             }
+            hidden={
+              props?.hidden || element.hiddenFields.includes(fieldName)
+                ? true
+                : false
+            }
             onChangeCallBack={(v: any, selectedRecord: any) => {
               let newValue = null;
               if (v) {
-                newValue = v + "";
+                newValue = v ;
               }
               formManager.setValue(fieldName, newValue);
               if (props?.formProps?.onValueChangeCallBack) {

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/CheckBox.tsx

@@ -5,6 +5,7 @@ interface CheckBoxProps {
   value: any;
   disabled?: boolean;
   required?: boolean;
+  hidden?: boolean;
   label: string;
   checkedValue?: any;
   unCheckedValue?: any;
@@ -17,6 +18,7 @@ const CheckBox: React.FC<CheckBoxProps> = (props) => {
   return (
     <FormControlLabel
       sx={props.sx}
+      hidden={props?.hidden || false}
       disabled={props.disabled || false}
       required={props.required || false}
       control={

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/ComboBox.tsx

@@ -10,6 +10,7 @@ interface ComboBoxProps {
   required?: boolean;
   options: Array<any>;
   errorMessage?: any;
+  hidden?: boolean;
   displayField: string;
   valueField: string;
   sx?: any;
@@ -32,6 +33,7 @@ const ComboBox: React.FC<ComboBoxProps> = (props) => {
       value={getValue(props.value)}
       options={props.options}
       disabled={props.disabled}
+      hidden={props?.hidden || false}
       onChange={(event, newValue) => {
         if (
           props.onChangeCallBack !== undefined &&
@@ -71,7 +73,9 @@ const ComboBox: React.FC<ComboBoxProps> = (props) => {
             {...params}
             required={props.required || false}
             variant="outlined"
-            InputLabelProps={{ shrink: true }}
+            slotProps={{
+              inputLabel: { shrink: true, sx: { fontWeight: "bold" } },
+            }}
             label={t(props.label)}
             error={
               props.errorMessage != null && props.errorMessage !== undefined

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/Datefield.tsx

@@ -3,12 +3,14 @@ import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
 import moment from "moment";
 import { DATE_FORMAT } from "../../../../../util/constants";
 import { useTranslation } from "react-i18next";
+import TemplateTextField from "./TemplateTextField";
 
 interface DatefieldProps {
   value: string | null;
   label: string;
   disabled?: boolean;
   required?: boolean;
+  hidden?: boolean;
   sx?: any;
   format?: string;
   errorMessage?: any;
@@ -18,6 +20,9 @@ interface DatefieldProps {
 
 const Datefield: React.FC<DatefieldProps> = (props) => {
   const { t } = useTranslation();
+  if (props?.hidden) {
+    return <></>;
+  }
   return (
     <LocalizationProvider dateAdapter={AdapterMoment}>
       <DatePicker
@@ -44,7 +49,7 @@ const Datefield: React.FC<DatefieldProps> = (props) => {
         }}
         slotProps={{
           textField: {
-            InputLabelProps: { shrink: true },
+            InputLabelProps: { shrink: true, sx: { fontWeight: "bold" } },
             variant: "outlined",
             required: props.required,
             error:

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/DatetimeField.tsx

@@ -3,12 +3,15 @@ import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
 import moment from "moment";
 import { useTranslation } from "react-i18next";
 import { DATE_TIME_FORMAT } from "../../../../../util/constants";
+import TemplateTextField from "./TemplateTextField";
+import { Hidden, TextField } from "@mui/material";
 
 interface DatetimeFieldProps {
   value: string | null;
   label: string;
   disabled?: boolean;
   required?: boolean;
+  hidden?: boolean;
   format?: string;
   sx?: any;
   errorMessage?: any;
@@ -18,6 +21,9 @@ interface DatetimeFieldProps {
 
 const DatetimeField: React.FC<DatetimeFieldProps> = (props) => {
   const { t } = useTranslation();
+  if (props?.hidden) {
+    return <></>;
+  }
   return (
     <LocalizationProvider dateAdapter={AdapterMoment}>
       <DateTimePicker
@@ -44,6 +50,7 @@ const DatetimeField: React.FC<DatetimeFieldProps> = (props) => {
         }}
         slotProps={{
           textField: {
+            InputLabelProps: { shrink: true, sx: { fontWeight: "bold" } },
             variant: "outlined",
             required: props.required,
             error:

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/SystemLookupCombobox.tsx

@@ -10,6 +10,7 @@ type SystemLookupListProps = {
   label: string;
   disabled?: boolean;
   required?: boolean;
+  hidden?: boolean;
   errorMessage?: any;
   sx?: any;
 };

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/TemplateTextField.tsx

@@ -8,8 +8,9 @@ const TemplateTextField: React.FC<Omit<TextFieldProps, "outlined">> = (
   return (
     <TextField
       {...props}
-      slotProps={{ inputLabel: { shrink: true } }}
+      slotProps={{ inputLabel: { shrink: true, sx: { fontWeight: "bold" } } }}
       label={<>{props?.label ? t(props.label) : ""}</>}
+      helperText={props?.helperText ? t(props.helperText) : undefined}
     />
   );
 };

package/src/components/templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid.tsx

@@ -820,7 +820,9 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
                 navigate(-1, { replace: true });
               }}
             >
-              <FontAwesomeIcon icon="arrow-left" />
+              <FontAwesomeIcon
+                icon={themeDirection === "ltr" ? "arrow-left" : "arrow-right"}
+              />
             </IconButton>
           ) : (
             <></>

package/src/components/templates/index.ts

@@ -29,5 +29,7 @@ export { default as TemplatePieChart } from "./visuals/charts/TemplatePieChart";
 export { default as DashboardRouteView } from "./visuals/DashboardRouteView";
 export { default as DashboardViewer } from "./visuals/DashboardViewer";
 
+export { default as FormElement } from "./DataEntryTemplates/TemplateDataForm/FormElementField";
+
 export type * from "./DataEntryTemplates/DataEntryTypes";
 export type { TransferListProps } from "./TransferList";

package/src/hooks/UseConfirmationWindow.tsx

@@ -28,6 +28,7 @@ export const useConfirmationWindow = (props: ConfirmationWindowProps) => {
         <DialogActions>
           <Button
             variant="contained"
+            sx={{marginRight:2,marginLeft:2}}
             color="primary"
             onClick={() => {
               setOpen(false);
@@ -37,6 +38,7 @@ export const useConfirmationWindow = (props: ConfirmationWindowProps) => {
           </Button>
           <Button
             variant="contained"
+            sx={{marginRight:2,marginLeft:2}}
             color="error"
             onClick={() => {
               props.onConfirmationCallBk();

package/src/hooks/index.ts

@@ -1,3 +1,11 @@
+import { useRef } from 'react';
+import { useTranslation } from "react-i18next";
+import { useForm } from "react-hook-form";
+import { useParams } from "react-router-dom";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate } from "react-router-dom";
+import * as z from "zod";
+import { useDispatch, useSelector } from "react-redux";
 export { default as useAxios } from "./useAxios";
 export { useConfirmationWindow } from "./UseConfirmationWindow";
 export { default as useLoadingMask } from "./useLoadingMask";
@@ -5,3 +13,9 @@ export { useIsMobile } from "./UseMobile";
 export { default as useSession } from "./UseSession";
 export { useWindow } from "./UseWindow";
 export { default as useApiActions } from "./useApiActions";
+export { useDispatch };
+export { useSelector };
+export { useParams };
+export { useForm, zodResolver, z };
+export { useTranslation };
+export {useNavigate};

package/src/hooks/useAxios.tsx

@@ -57,6 +57,19 @@ const useAxios = () => {
         toast.error("your session is now expired, you need to login again", {
           autoClose: false,
         });
+      } else if (
+        error
+          ? error.response
+            ? error.response.status
+              ? error.response.status === 402
+              : false
+            : false
+          : false
+      ) {
+        dispatch(UserSessionActions.setUnAuthenticated());
+        toast.error(
+          "Your license is missing or has expired,Please reach out to your vendor for assistance."
+        );
       } else if (
         error
           ? error.response

package/src/layout/Layout.tsx

@@ -8,16 +8,12 @@ import MainContent from "./MainContent";
 import { BrowserRouter } from "react-router-dom";
 import MobileDrawer from "./MobileDrawer";
 import { ToastContainer } from "react-toastify";
-import { useEffect, useState } from "react";
-import useLoadingMask from "../hooks/useLoadingMask";
 import { useIsMobile } from "../hooks/UseMobile";
-import useSession from "../hooks/UseSession";
-import useAxios from "../hooks/useAxios";
 import { DRAWER_WIDTH } from "../redux/features/common/AppLayoutSlice";
 import { UserSessionProps } from "../redux/features/common/UserSessionSlice";
 import LoadingMask from "../components/common/LoadingMask";
 import Login from "../components/common/Login";
-import { setStoreData } from "../redux/features/common/CommonStoreSlice";
+import NoLicenseComponent from "../components/common/NoLicenseComponent";
 
 const Main = styled("main", {
   shouldForwardProp: (prop) => prop !== "open",
@@ -59,12 +55,12 @@ const Main = styled("main", {
 
 export default function Layout() {
   const SideBarState = useSelector((state: any) => state.SideBar);
+
   const isMobile = useIsMobile();
   const UserSession: UserSessionProps = useSelector(
     (state: any) => state.UserSession
   );
   const AppLayout = useSelector((state: any) => state.AppLayout);
-
   return (
     <BrowserRouter>
       <ToastContainer
@@ -74,6 +70,7 @@ export default function Layout() {
       />
       <LoadingMask />
       {UserSession.value.isAuthenticated === true ? (
+        // licenseCheckObj?.isLicensed ? (
         <Main open={SideBarState.isOpened}>
           <CssBaseline />
           <TopBar />
@@ -81,6 +78,7 @@ export default function Layout() {
           {isMobile ? <MobileDrawer /> : null}
           <DrawerHeader />
           <MainContent />
+          <NoLicenseComponent />
         </Main>
       ) : (
         <Login />

package/src/locales/arabic/adminLocalsAr.json

@@ -46,7 +46,8 @@
   "ORGANIZATION_UNIT_TYPE_UNIT_TYPE_CODE": "Unit type code",
   "ORGANIZATION_UNIT_TYPE_UNIT_TYPE_EN_NAME": "Unit type en name",
   "PERSON_SINGULAR": "person",
-  "PERSON_PLURAL": "persons",
+  "PERSON_PLURAL": "المستخدمين",
+  "ROLES": "الصلاحيات",
   "PERSON_EMAIL": "Email",
   "PERSON_EMPLOYEE_AR_NAME": "Employee ar name",
   "PERSON_EMPLOYEE_EN_NAME": "Employee en name",

package/src/locales/english/adminLocalsEn.json

@@ -26,6 +26,7 @@
   "ORGANIZATION_RANK_ENABLED": "Enabled",
   "ORGANIZATION_RANK_ORGANIZATION_ID": "Organization id",
   "ORGANIZATION_RANK_RANK_ORDER": "Rank order",
+  "ROLES": "System Roles",
   "ORGANIZATION_RANK_RANK_AR_NAME": "Rank ar name",
   "ORGANIZATION_RANK_RANK_CODE": "Rank code",
   "ORGANIZATION_RANK_RANK_EN_NAME": "Rank en name",

package/src/main.tsx

@@ -1,10 +1,10 @@
 import { createRoot } from "react-dom/client";
 import { BaseApp } from "./components";
 
-
 createRoot(document.getElementById("root")!).render(
   <BaseApp
     apiBaseUrl="http://localhost:8080/api-base"
+    enableUINotifications={false}
     appLogo={"/logo.png"}
     appName="UI Base Library"
     appVersion="0.0"

package/src/navigationItems/Administration/adminNavigationItems.tsx

@@ -11,10 +11,18 @@ export const adminNavigationItems: TreeViewBaseItem<ExtendedTreeItemProps>[] = [
       {
         id: "system_admin.Person",
         label: "PERSON_PLURAL",
+        authority: "SYSTEM_ADMIN",
         icon: "users",
         action: "NAVIGATION",
         actionPayload: { path: "admin/persons" },
       },
+      {
+        id: "system_admin.devtools.rolesx",
+        label: "ROLES",
+        icon: "tag",
+        action: "NAVIGATION",
+        actionPayload: { path: "dev/system/roles" },
+      },
       {
         id: "development_admin.SystemApplication",
         label: "SYSTEM_APPLICATION_PLURAL",
@@ -192,7 +200,7 @@ export const adminNavigationItems: TreeViewBaseItem<ExtendedTreeItemProps>[] = [
       {
         id: "system_admin.followup",
         label: "SYSTEM_MONITORING",
-        authority: "SYSTEM_ADMIN",
+        authority: "DEVELOPMENT_ADMIN",
         icon: "tv",
         children: [
           {

package/src/redux/features/administration/AdministrationStoresMetaData.ts

@@ -130,19 +130,19 @@ export const ADMINISTRATION_STORES: CommonStores = {
   SystemApplicationModules: {
     autoLoad: true,
     data: [],
-    authority: "DEVELOPMENT_ADMIN",
+    authority: "SYSTEM_ADMIN",
     url: "api/v1/admin/systemapplicationmodule/application/all",
   },
   SystemApplicationAuthorities: {
     autoLoad: true,
     data: [],
-    authority: "DEVELOPMENT_ADMIN",
+    authority: "SYSTEM_ADMIN",
     url: "api/v1/admin/systemapplicationauthority/all",
   },
   SystemApplicationRoles: {
     autoLoad: true,
     data: [],
-    authority: "DEVELOPMENT_ADMIN",
+    authority: "SYSTEM_ADMIN",
     url: "api/v1/admin/systemapplicationrole/all",
   },
 };

package/src/redux/features/common/AppInfoSlice.ts

@@ -3,6 +3,12 @@ import { SystemRoute } from "../../../routes/types";
 import { ExtendedTreeItemProps } from "../../../navigationItems";
 import { StoreMetaData } from "./CommonStoreSlice";
 
+export type LicenseCheckObject = {
+  isLicensed: boolean;
+  lastLicenseCheckMessage: string;
+  lastLicenseCheckTime: string;
+};
+
 export type AppInfo = {
   documentTitle: string | null;
   apiBaseUrl: string | null;
@@ -24,6 +30,7 @@ export type AppInfo = {
     light: { primaryColor: string; secondaryColor: string };
     dark: { primaryColor: string; secondaryColor: string };
   };
+  checkLicense?: { endpoint: string; interval: number };
 };
 
 export type AppInfoProp = {

package/src/routes/index.ts

@@ -2,10 +2,4 @@ import Home from "../components/common/Home";
 import { ADMINISTRATION_ROUTES } from "./administration";
 import { SystemRoute } from "./types";
 
-export const SYSTEM_ROUTES: Array<SystemRoute> = [
-  {
-    path: "/",
-    component: Home,
-  },
-  ...ADMINISTRATION_ROUTES,
-];
+export const SYSTEM_ROUTES: Array<SystemRoute> = [...ADMINISTRATION_ROUTES];

package/src/util/index.ts

@@ -1,2 +1,5 @@
+import axios from "axios";
+
 export * from "./AppUtils";
 export * from "./constants";
+export { axios };

package/tsconfig.json

@@ -131,5 +131,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"]
+  "include": ["src"] 
 }