@asaleh37/ui-base 25.9.3 → 25.9.5-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asaleh37/ui-base",
-  "version": "25.9.3",
+  "version": "25.9.5-2",
   "description": "",
   "license": "ISC",
   "author": "Ahmed Saleh Mohamed",

package/src/components/administration/admin/PersonGrid.tsx

@@ -23,7 +23,7 @@ const PersonGrid: React.FC = () => {
   );
   const [data, setData] = useState([]);
   const apiActions = useApiActions({
-    findAll: "api/v1/public/person/all",
+    commonStoreKey: "persons",
     deleteById: "api/v1/admin/person",
     save: "api/v1/admin/person",
     findById: "api/v1/admin/person",
@@ -276,10 +276,10 @@ const PersonGrid: React.FC = () => {
         data={data}
         setData={setData}
         editMode={{
-          editMode: "modal",
+          editMode: "modal",          
           specs: {
             modalIcon: "user",
-            modalTitle: "Person Profile",
+            modalTitle: "Person Profile",             
             modalWidth: 300,
           },
         }}
@@ -320,7 +320,7 @@ const PersonGrid: React.FC = () => {
         ]}
         girdIcon="users"
         editAction={{
-          isEnabled: true,
+          isEnabled: true,          
           authority: "PERSON_EDIT",
           preActionValidation: (data) => {
             if (

package/src/components/common/AzureLogin.tsx

@@ -1,11 +1,26 @@
 import { PublicClientApplication } from "@azure/msal-browser";
-import { Box, Button } from "@mui/material";
+import {
+  Box,
+  Button,
+  CircularProgress,
+  createTheme,
+  Paper,
+  Typography,
+} from "@mui/material";
 import { useDispatch, useSelector } from "react-redux";
 import { AppInfo } from "../../redux/features/common/AppInfoSlice";
 import { useAxios } from "../../hooks";
 import { UserSessionActions } from "../../redux/features/common/UserSessionSlice";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
+import { ThemeProvider } from "@emotion/react";
+import {
+  DARK_THEME_INITIAL_MAIN_COLOR,
+  DARK_THEME_INITIAL_SECANDARY_COLOR,
+  LIGHT_THEME_INITIAL_MAIN_COLOR,
+  LIGHT_THEME_INITIAL_SECANDARY_COLOR,
+} from "../../util";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 interface AzureLoginProps {
   msalInstance: PublicClientApplication;
 }
@@ -13,16 +28,17 @@ interface AzureLoginProps {
 const AzureLogin: React.FC<AzureLoginProps> = ({ msalInstance }) => {
   const appInfo: AppInfo = useSelector((state: any) => state.AppInfo.value);
   const userSession = useSelector((state: any) => state.UserSession.value);
+  const [isLoginInProcess, setIsLoginInProcess] = useState(false);
   const { handleGetRequest } = useAxios();
   const dispatch = useDispatch();
   const checkUserSession = async () => {
-    if (appInfo?.apiBaseUrl) {
-      if (userSession.isAuthenticated == null) {
-        const token = localStorage.getItem("TOKEN");
+    if (localStorage.getItem("TOKEN")) {
+      if (appInfo?.apiBaseUrl) {
         handleGetRequest({
           endPointURI: "api/auth/userInfo",
           showMask: true,
           successCallBkFn: (response) => {
+            setIsLoginInProcess(false);
             if (response != null && response.data != null) {
               const UserSession = {
                 ...response.data,
@@ -34,36 +50,172 @@ const AzureLogin: React.FC<AzureLoginProps> = ({ msalInstance }) => {
               localStorage.removeItem("TOKEN");
             }
           },
+          failureCallBkFn: () => {
+            setIsLoginInProcess(false);
+          },
         });
       }
+    } else {
+      dispatch(UserSessionActions.setUnAuthenticated());
+      setIsLoginInProcess(false);
     }
   };
   const handleLogin = async () => {
+    setIsLoginInProcess(true);
     const response = await msalInstance.acquireTokenPopup({
       scopes: appInfo?.azureConfiguration?.scopes,
     });
     if (response?.accessToken) {
       localStorage.setItem("TOKEN", response.accessToken);
       checkUserSession();
+    } else {
+      setIsLoginInProcess(false);
     }
   };
-  const getUserInfo = async () => {
-    const response = await handleGetRequest({
-      endPointURI: "api/auth/userInfo",
-      showMask: true,
-      successCallBkFn: (response) => {
-        console.log(response);
-      },
-    });
-  };
+  const UserSessionState = useSelector((state: any) => state.UserSession.value);
 
-  // useEffect(()=>{
-  //   handleLogin()
-  // },[])
+  useEffect(() => {
+    checkUserSession();
+  }, [appInfo]);
+
+  const loginTheme = createTheme({
+    components: {
+      MuiCssBaseline: {
+        styleOverrides: `
+          /* Custom Scrollbar */
+          * {
+            scrollbar-width: thin;
+            scrollbar-color: ${
+              appInfo.appTheme?.dark?.primaryColor ||
+              DARK_THEME_INITIAL_MAIN_COLOR
+            } #121212;
+          }
+    
+          /* Webkit Browsers */
+          *::-webkit-scrollbar {
+            width: 12px;
+            height: 10px;
+          }   
+        `,
+      },
+    },
+    palette: {
+      mode: appInfo?.loginScreenStyle?.themeMode || "dark",
+      primary: {
+        main:
+          appInfo?.loginScreenStyle?.themeMode === "light"
+            ? appInfo.appTheme?.light?.primaryColor ||
+              LIGHT_THEME_INITIAL_MAIN_COLOR
+            : appInfo.appTheme?.dark?.primaryColor ||
+              DARK_THEME_INITIAL_MAIN_COLOR,
+      },
+      secondary: {
+        main:
+          appInfo?.loginScreenStyle?.themeMode === "light"
+            ? appInfo.appTheme?.light?.secondaryColor ||
+              LIGHT_THEME_INITIAL_SECANDARY_COLOR
+            : appInfo.appTheme?.dark?.secondaryColor ||
+              DARK_THEME_INITIAL_SECANDARY_COLOR,
+      },
+    },
+  });
   return (
-    <Box>
-      <Button onClick={handleLogin}>Azure Login </Button>
-    </Box>
+    <ThemeProvider theme={loginTheme}>
+      {UserSessionState.isAuthenticated == false ? (
+        <Box
+          sx={{
+            // position: "relative",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            minHeight: "100vh",
+            width: "100%",
+            backgroundImage: "url('/bg.jpg')",
+            backgroundRepeat: "no-repeat",
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            "&::before": {
+              content: '""',
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.4)", // 👈 controls opacity
+              zIndex: 0,
+            },
+          }}
+        >
+          <Paper
+            sx={{
+              display: "flex",
+              width: "fit-content",
+              padding: 2,
+              height: "fit-content",
+              borderRadius: 5,
+              alignItems: "center",
+              justifyContent: "center",
+              textAlign: "center",
+              zIndex: 1,
+              p: 4,
+            }}
+          >
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <img src={appInfo?.appLogo} width={150} height={150} />
+              <Typography sx={{ m: 1 }} variant="h4" color="textSecondary">
+                {appInfo?.appName}
+              </Typography>
+              <Typography
+                sx={{
+                  paddingRight: 1,
+                  width: "100%",
+                  textAlign: "right",
+                  fontSize: 10,
+                }}
+                variant="caption"
+                color="textSecondary"
+              >
+                V.{appInfo.appVersion}
+              </Typography>
+              <Button
+                loading={isLoginInProcess}
+                onClick={handleLogin}
+                variant="contained"
+                color="primary"
+                sx={{ m: 1 }}
+                startIcon={
+                  <FontAwesomeIcon
+                    icon={{ iconName: "microsoft", prefix: "fab" }}
+                  />
+                }
+              >
+                login
+              </Button>
+            </Box>
+          </Paper>
+        </Box>
+      ) : (
+        <Paper
+          sx={{
+            width: "100%",
+            height: "100vh",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <CircularProgress sx={{ marginRight: 1 }} />
+          <div>You will be redirected shortly ... please wait</div>
+        </Paper>
+      )}
+    </ThemeProvider>
   );
 };
 

package/src/components/common/Login.tsx

@@ -140,39 +140,50 @@ const Login: React.FC = () => {
     }
   };
   useEffect(() => {
-    console.log("checking usersession on reload", userSession);
-    console.log("checking usersession app info", appInfo);
     checkUserSession();
   }, [appInfo, userSession.isAuthenticated]);
 
   return (
     <ThemeProvider theme={loginTheme}>
-      <Box
-        sx={{
-          minHeight: "100vh", // full page height
-          width: "100%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          background: appInfo?.loginScreenStyle?.backgroundColor,
-          backgroundImage: `url('/${appInfo?.loginScreenStyle?.backgroundImageNameInPublicFolder}')`,
-          backgroundRepeat: "no-repeat",
-          backgroundSize: "cover", // 🔥 makes it responsive
-          backgroundPosition: "center", // keeps it centered
-        }}
-      >
-        <Paper
+      {UserSessionState.isAuthenticated == false ? (
+        <Box
           sx={{
+            // position: "relative",
             display: "flex",
-            width: "fit-content",
-            padding: 2,
-            height: "fit-content",
-            borderRadius: 5,
             alignItems: "center",
             justifyContent: "center",
+            minHeight: "100vh",
+            width: "100%",
+            backgroundImage: "url('/bg.jpg')",
+            backgroundRepeat: "no-repeat",
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            "&::before": {
+              content: '""',
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.4)", // 👈 controls opacity
+              zIndex: 0,
+            },
           }}
         >
-          {UserSessionState.isAuthenticated == false ? (
+          <Paper
+            sx={{
+              display: "flex",
+              width: "fit-content",
+              padding: 2,
+              height: "fit-content",
+              borderRadius: 5,
+              alignItems: "center",
+              justifyContent: "center",
+              textAlign: "center",
+              zIndex: 1,
+              p: 4,
+            }}
+          >
             <Box
               sx={{
                 display: "flex",
@@ -234,14 +245,22 @@ const Login: React.FC = () => {
                 login
               </Button>
             </Box>
-          ) : (
-            <>
-              <CircularProgress sx={{ marginRight: 1 }} />
-              <div>You will be redirected shortly ... please wait</div>
-            </>
-          )}
+          </Paper>
+        </Box>
+      ) : (
+        <Paper
+          sx={{
+            width: "100%",
+            height: "100vh",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <CircularProgress sx={{ marginRight: 1 }} />
+          <div>You will be redirected shortly ... please wait</div>
         </Paper>
-      </Box>
+      )}
     </ThemeProvider>
   );
 };

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

@@ -30,7 +30,7 @@ const FormElementField: React.FC<FormElementFieldProps> = (
         return element?.fieldInfo?.fieldLabel;
       }
     };
-    return !element.hiddenFields.includes(fieldName) ? (
+    return (
       <Grid2
         size={
           props?.formProps?.fieldSize || {
@@ -49,16 +49,7 @@ const FormElementField: React.FC<FormElementFieldProps> = (
             {...props.muiTextFieldProps}
             fullWidth
             type={fieldType}
-            disabled={
-              props?.disabled || element.disabledFields.includes(fieldName)
-                ? true
-                : false
-            }
-            // hidden={
-            //   props?.hidden || element.hiddenFields.includes(fieldName)
-            //     ? true
-            //     : false
-            // }
+            disabled={element.disabledFields.includes(fieldName)}
             label={getFieldLabel()}
             value={formValues[fieldName]}
             onChange={(event) => {
@@ -89,6 +80,9 @@ const FormElementField: React.FC<FormElementFieldProps> = (
                 height: "100% !important", // forces full height usage
               },
               ...props?.formProps?.style,
+              display: element.hiddenFields.includes(fieldName)
+                ? "none"
+                : undefined,
             }}
             error={formManager.formState.errors[fieldName] != undefined}
             helperText={formManager?.formState?.errors[
@@ -99,16 +93,8 @@ const FormElementField: React.FC<FormElementFieldProps> = (
           <Datefield
             format={props?.dateFormat || DATE_FORMAT}
             sx={props?.formProps?.style || { width: "100%" }}
-            disabled={
-              props?.disabled || element.disabledFields.includes(fieldName)
-                ? true
-                : false
-            }
-            // hidden={
-            //   props?.hidden || element.hiddenFields.includes(fieldName)
-            //     ? true
-            //     : false
-            // }
+            disabled={element.disabledFields.includes(fieldName)}
+            hidden={element.hiddenFields.includes(fieldName)}
             label={getFieldLabel()}
             onChangeCallBack={(v: any) => {
               formManager.setValue(fieldName, v);
@@ -132,11 +118,8 @@ const FormElementField: React.FC<FormElementFieldProps> = (
           <DatetimeField
             format={props?.dateFormat || DATE_TIME_FORMAT}
             sx={props?.formProps?.style || { width: "100%" }}
-            disabled={
-              props?.disabled || element.disabledFields.includes(fieldName)
-                ? true
-                : false
-            }
+            disabled={element.disabledFields.includes(fieldName)}
+            hidden={element.hiddenFields.includes(fieldName)}
             label={getFieldLabel()}
             onChangeCallBack={(v: any) => {
               formManager.setValue(fieldName, v);
@@ -150,11 +133,6 @@ 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[
@@ -176,35 +154,19 @@ 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}
-            disabled={
-              props?.disabled || element.disabledFields.includes(fieldName)
-                ? true
-                : false
-            }
+            disabled={element.disabledFields.includes(fieldName)}
+            hidden={element.hiddenFields.includes(fieldName)}
             sx={props?.formProps?.style}
           />
         ) : props?.fieldType === "combobox" ? (
           <ComboBox
             sx={props?.formProps?.style || { width: "100%" }}
             label={getFieldLabel()}
-            disabled={
-              props?.disabled || element.disabledFields.includes(fieldName)
-                ? true
-                : false
-            }
-            // hidden={
-            //   props?.hidden || element.hiddenFields.includes(fieldName)
-            //     ? true
-            //     : false
-            // }
+            disabled={element.disabledFields.includes(fieldName)}
+            hidden={element.hiddenFields.includes(fieldName)}
             onChangeCallBack={(v: any, selectedRecord: any) => {
               let newValue = null;
               if (v) {
@@ -234,16 +196,8 @@ const FormElementField: React.FC<FormElementFieldProps> = (
           <SystemLookupCombobox
             sx={props?.formProps?.style || { width: "100%" }}
             label={getFieldLabel()}
-            disabled={
-              props?.disabled || element.disabledFields.includes(fieldName)
-                ? true
-                : false
-            }
-            // hidden={
-            //   props?.hidden || element.hiddenFields.includes(fieldName)
-            //     ? true
-            //     : false
-            // }
+            disabled={element.disabledFields.includes(fieldName)}
+            hidden={element.hiddenFields.includes(fieldName)}
             onChangeCallBack={(v: any, selectedRecord: any) => {
               let newValue = null;
               if (v) {
@@ -269,8 +223,6 @@ const FormElementField: React.FC<FormElementFieldProps> = (
           />
         ) : null}
       </Grid2>
-    ) : (
-      <></>
     );
   } else {
     return <></>;

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

@@ -8,6 +8,7 @@ const TemplateTextField: React.FC<Omit<TextFieldProps, "outlined">> = (
   return (
     <TextField
       {...props}
+      hidden={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/TemplateDataForm/TemplateForm.tsx

@@ -45,13 +45,20 @@ const TemplateForm: React.FC<TemplateFormProps> = (
   const [attachmentPanelEnabledForRecord, setAttachmentPanelEnabledForRecord] =
     useState<boolean>(true);
   const { t } = useTranslation();
-  const fields = getAllFields(props.elements);
+  const fields = getAllFields(props.elements);  
   const initiallyHiddenFields = [];
+  const initiallyDisabledFields = [];
   for (const field of fields) {
     if (field?.hidden) {
       initiallyHiddenFields.push(field.fieldName);
     }
+    if (field?.disabled) {
+      initiallyDisabledFields.push(field.fieldName);
+    }
   }
+  const [disabledFields, setDisabledFields] = useState<string[]>(
+    initiallyDisabledFields
+  );
   const [hiddenFields, setHiddenFields] = useState<string[]>(
     initiallyHiddenFields
   );
@@ -65,7 +72,7 @@ const TemplateForm: React.FC<TemplateFormProps> = (
       initialValues[element.props.fieldName] = element.props.defaultValue;
     }
   }
-  const [disabledFields, setDisabledFields] = useState<string[]>([]);
+
   let formSchema = null;
   if (props?.validationSchema) {
     formSchema = props.validationSchema;

package/src/main.tsx

@@ -8,11 +8,11 @@ createRoot(document.getElementById("root")!).render(
     appLogo={"/logo.png"}
     appName="UI Base Library"
     loginScreenStyle={{
-      themeMode: "light",
+      themeMode: "dark",
       backgroundImageNameInPublicFolder: "bg.jpg",
     }}
     appVersion="0.0"
-    authenticationMethod="APP"
+    authenticationMethod="AZURE"
     azureConfiguration={{
       frontEndClientId: "c3bbbdbd-f392-4459-b3dd-2351cb07f924",
       tenantId: "9f136fef-4529-475f-98e6-d271eb04eb00",

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

@@ -145,4 +145,9 @@ export const ADMINISTRATION_STORES: CommonStores = {
     authority: "SYSTEM_ADMIN",
     url: "api/v1/admin/systemapplicationrole/all",
   },
+  persons: {
+    autoLoad: true,
+    data: [],
+    url: "api/v1/public/person/all",
+  },
 };