@asaleh37/ui-base 25.8.23 → 25.8.26-1

package/package.json

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

package/src/components/administration/dev/EntityParameterGrid.tsx

@@ -116,6 +116,7 @@ const EntityParameterGrid: React.FC = () => {
         required: true,
         fieldType: "combobox",
         options: SystemParameterTypes,
+        comboboxValueDataType: "string",
         optionDisplayField: "value",
         optionValueField: "value",
         formProps: {

package/src/components/administration/dev/MailRecipientGrid.tsx

@@ -113,6 +113,7 @@ const MailRecipientGrid: React.FC<MailRecipientGridProps> = (props) => {
         options: [{ value: "To" }, { value: "CC" }],
         optionDisplayField: "value",
         optionValueField: "value",
+        comboboxValueDataType: "string",
       },
     },
     {
@@ -142,7 +143,7 @@ const MailRecipientGrid: React.FC<MailRecipientGridProps> = (props) => {
       apiActions={apiActions}
       data={data}
       hideInfoBar={true}
-      gridLoadParametersValues={{mailTemplateId:props.selectedRecord.id}}
+      gridLoadParametersValues={{ mailTemplateId: props.selectedRecord.id }}
       setData={setData}
       editMode={{ editMode: "row" }}
       formElements={formElements}

package/src/components/administration/dev/MailSenderConfigGrid.tsx

@@ -210,6 +210,7 @@ const MailSenderConfigGrid: React.FC = () => {
         fieldName: "mailEngine",
         required: true,
         fieldType: "combobox",
+        comboboxValueDataType: "string",
         options: [{ value: "Gmail" }, { value: "Azure" }],
         optionDisplayField: "value",
         optionValueField: "value",

package/src/components/administration/dev/ReportGrid.tsx

@@ -61,7 +61,7 @@ const adjustFormAccordingToReportType = (
   value: any,
   formActions: FormActionProps,
   formManager: UseFormReturn
-) => {
+) => {  
   if (value && validationObject[value]) {
     const validationObjects: ReportValidationOptions = validationObject[value];
     const fields = Object.keys(validationObjects);
@@ -208,6 +208,7 @@ const ReportGrid: React.FC = () => {
         optionValueField: "value",
         required: true,
         fieldType: "combobox",
+        comboboxValueDataType: "string",
         formProps: {
           onValueChangeCallBack(
             value,
@@ -247,6 +248,7 @@ const ReportGrid: React.FC = () => {
         fieldLabel: "ATTACHMENT_CONFIG_STORAGE_TYPE",
         fieldName: "storageType",
         required: true,
+        comboboxValueDataType: "string",
         fieldType: "combobox",
         options: storageTypes,
         optionDisplayField: "value",
@@ -354,10 +356,10 @@ const ReportGrid: React.FC = () => {
       props: {
         fieldLabel: "REPORT_REPORT_EXCEL_DATA_QUERY_ID",
         fieldName: "reportExcelDataQueryId",
-        hidden: true,
-        gridProps: {
-          hidden: true,
-        },
+        // hidden: true,
+        // gridProps: {
+        //   hidden: true,
+        // },
         required: false,
         fieldType: "combobox",
         options: SystemDataQueries,

package/src/components/common/Login.tsx

@@ -53,6 +53,9 @@ const Login: React.FC = () => {
           ...response.data,
           isAuthenticated: true,
         };
+        if (response?.data?.token) {
+          localStorage.setItem("TOKEN", response.data.token);
+        }
         dispatch(UserSessionActions.setAuthenticated(UserSession));
       }
     } catch (e: any) {
@@ -101,11 +104,13 @@ const Login: React.FC = () => {
   const checkUserSession = async () => {
     if (appInfo?.apiBaseUrl) {
       if (userSession.isAuthenticated == null) {
+        const token = localStorage.getItem("TOKEN");
         try {
           let response = await axios.get(
             `${appInfo.apiBaseUrl}/api/auth/userInfo`,
             {
               withCredentials: true,
+              headers: { Authorization: `Bearer ${token}` },
             }
           );
           if (response != null && response.data != null) {

package/src/components/index.ts

@@ -1,3 +1,4 @@
+import { DataGridPremium } from "@mui/x-data-grid-premium";
 export * from "./BaseApp";
 export * from "@mui/material";
 export * from "@mui/lab";
@@ -6,3 +7,4 @@ export { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 export type { FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
 export * from "./templates";
 export * from "@mui/x-tree-view/models";
+export { DataGridPremium } ;

package/src/components/templates/DataEntryTemplates/DataEntryTypes.ts

@@ -189,6 +189,7 @@ export type RecordFieldProps = {
     | "lookup"
     | "custom";
   lookupType?: string;
+  comboboxValueDataType?: "number" | "string";
   required?: boolean;
   disabled?: boolean;
   hidden?: boolean;

package/src/components/templates/DataEntryTemplates/DataEntryUtil.ts

@@ -197,6 +197,36 @@ export const constructValidationSchema = (fields: Array<RecordFieldProps>) => {
         } else {
           validationSchemaObj[fieldName] = z.boolean().optional().nullable();
         }
+      } else if (field.fieldType === "combobox") {
+        if (field?.comboboxValueDataType) {
+          if (field?.comboboxValueDataType === "number") {
+            if (field?.required === true) {
+              validationSchemaObj[fieldName] = z.number({
+                required_error: "This field is required",
+                invalid_type_error: "This field must be a number",
+              });
+            } else {
+              validationSchemaObj[fieldName] = z.number().optional().nullable();
+            }
+          } else if (field?.comboboxValueDataType === "string") {
+            if (field?.required === true) {
+              validationSchemaObj[fieldName] = z
+                .string({ message: "This field is required" })
+                .min(1, "This field is required");
+            } else {
+              validationSchemaObj[fieldName] = z.string().optional().nullable();
+            }
+          }
+        } else {
+          if (field?.required === true) {
+            validationSchemaObj[fieldName] = z.number({
+              required_error: "This field is required",
+              invalid_type_error: "This field must be a number",
+            });
+          } else {
+            validationSchemaObj[fieldName] = z.number().optional().nullable();
+          }
+        }
       } else {
         if (field?.required === true) {
           validationSchemaObj[fieldName] = z

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

@@ -229,7 +229,7 @@ const FormElementField: React.FC<FormElementFieldProps> = (
             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/ComboBox.tsx

@@ -22,7 +22,7 @@ const ComboBox: React.FC<ComboBoxProps> = (props) => {
   const getValue = (v: string) => {
     for (let option of props.options) {
       if (option[props.valueField] == v) {
-        return option + "";
+        return option;
       }
     }
     return null;
@@ -41,7 +41,7 @@ const ComboBox: React.FC<ComboBoxProps> = (props) => {
         ) {
           if (newValue != null) {
             let v = newValue[props.valueField];
-            props.onChangeCallBack(v + "", newValue);
+            props.onChangeCallBack(v, newValue);
           } else {
             props.onChangeCallBack(null, null);
           }

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

@@ -100,10 +100,20 @@ const TemplateForm: React.FC<TemplateFormProps> = (
             field?.fieldType === "combobox" &&
             retrievedRecord[field.fieldName]
           ) {
-            formManager.setValue(
-              field.fieldName,
-              retrievedRecord[field.fieldName] + ""
-            );
+            if (
+              field?.comboboxValueDataType &&
+              field?.comboboxValueDataType === "string"
+            ) {
+              formManager.setValue(
+                field.fieldName,
+                retrievedRecord[field.fieldName] + ""
+              );
+            } else {
+              formManager.setValue(
+                field.fieldName,
+                retrievedRecord[field.fieldName]
+              );
+            }
           }
         }
       }

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

@@ -89,7 +89,7 @@ export const generateComboColumn: (
     type: "custom",
     valueGetter: (value) => {
       if (value) {
-        return value + "";
+        return value;
       }
       return value;
     },
@@ -128,7 +128,7 @@ export const generateComboColumn: (
             params.api.setEditCellValue({
               id: params.id,
               field: params.field,
-              value: v + "",
+              value: v,
             });
           }}
         />

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

@@ -744,23 +744,24 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
     }
   };
 
-  const handleColumnWidthChange: GridEventListener<"columnWidthChange"> = (
-    params: GridColumnResizeParams
-  ) => {
-    const updatedWidths = {
-      ...columnWidths,
-      [params.colDef.field]: params.width,
-    };
-    setColumnWidths(updatedWidths);
-    if (props?.gridStateKey) {
-      saveGridState(props.gridStateKey, { columnWidths: updatedWidths });
-    }
-  };
+  // const handleColumnWidthChange: GridEventListener<"columnWidthChange"> = (
+  //   params: GridColumnResizeParams
+  // ) => {
+  //   const updatedWidths = {
+  //     ...columnWidths,
+  //     [params.colDef.field]: params.width,
+  //   };
+  //   setColumnWidths(updatedWidths);
+  //   if (props?.gridStateKey) {
+  //     saveGridState(props.gridStateKey, { columnWidths: updatedWidths });
+  //   }
+  // };
 
   const adjustedColumns: Array<TemplateGridColDef> = React.useMemo(() => {
     const baseCols = structuredColumns.map((col) => ({
       ...col,
-      width: columnWidths[col.field] || col.width,
+      minWidth: col?.width || 200,
+      flex: 1,
     }));
 
     // Reorder based on saved columnOrder
@@ -768,9 +769,9 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
       const fieldToCol = new Map(baseCols.map((col) => [col.field, col]));
       return columnOrder.map((field) => fieldToCol.get(field)!).filter(Boolean);
     }
-
     return baseCols;
   }, [columnOrder, columnWidths, structuredColumns]);
+
   return (
     <>
       <ConfirmationWindow />
@@ -984,7 +985,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
         columnVisibilityModel={columnVisibilityModel}
         onColumnVisibilityModelChange={handleColumnVisibilityChange}
         onColumnOrderChange={handleColumnOrderChange}
-        onColumnWidthChange={handleColumnWidthChange}
+        // onColumnWidthChange={handleColumnWidthChange}
         rowGroupingModel={gridRowGroupingModel}
         onRowGroupingModelChange={(model: GridRowGroupingModel) => {
           handleRowGroupChange(model);

package/src/components/templates/report/ExcelReportViewer.tsx

@@ -27,7 +27,8 @@ const getGridColumnsFromRecord = (data: Array<any>) => {
       },
     };
     formElements.push(formElement);
-  }  
+  }
+  debugger;
   return formElements;
 };
 

package/src/hooks/UseWindow.tsx

@@ -10,6 +10,7 @@ import {
 } from "@mui/material";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { useSelector } from "react-redux";
 
 export interface TemplateWindowProp {
   height?: any;
@@ -27,7 +28,9 @@ interface WindowProps {
 
 export const useWindow = (props: TemplateWindowProp) => {
   const [windowState, setWindowState] = useState(false);
-
+  const appDirection = useSelector(
+    (state: any) => state.AppLayout.appDirection
+  );
   const Window: React.FC<WindowProps> = (windowProps: WindowProps) => {
     return (
       <Modal
@@ -40,6 +43,7 @@ export const useWindow = (props: TemplateWindowProp) => {
         }}
       >
         <Box
+          dir={appDirection}
           sx={{
             position: "absolute",
             top: "50%",

package/src/hooks/useAxios.tsx

@@ -39,6 +39,16 @@ const useAxios = () => {
   });
 
   axiosInstance.defaults.withCredentials = true;
+  axiosInstance.interceptors.request.use(
+    (config) => {
+      const token = localStorage.getItem("TOKEN");
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+      return config;
+    },
+    (error) => Promise.reject(error)
+  );
   axiosInstance.interceptors.response.use(
     (response: any) => {
       return response;

package/src/layout/MainContent.tsx

@@ -36,7 +36,7 @@ const MainContent: React.FC = () => {
         stores[storeKey]?.url != "" &&
         stores[storeKey].autoLoad === true
       ) {
-        await handleGetRequest({
+        handleGetRequest({
           endPointURI: stores[storeKey].url,
           showMask: false,
           successCallBkFn: (response) => {
@@ -61,55 +61,57 @@ const MainContent: React.FC = () => {
     <CacheProvider
       value={AppLayoutState.appDirection === "ltr" ? cacheLtr : cacheRtl}
     >
-      {isAutoLoadLoaded ? (
-        <Box
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            // alignItems: "center",
-            justifyContent: "flex-start",
-            flex: 1,
-            overflow: "hidden",
-            padding: 3,
-          }}
-        >
-          <Routes>
-            {AppInfo.enableAdministrationModule
-              ? SYSTEM_ROUTES.map((route: SystemRoute, index) => {
-                  return (
-                    <Route
-                      key={"adm" + index}
-                      path={route.path}
-                      element={
-                        <RouteWrapper
-                          authority={route.authority}
-                          applicationModule={route.applicationModule}
-                        >
-                          <route.component />
-                        </RouteWrapper>
-                      }
-                    />
-                  );
-                })
-              : null}
-            {businessRoutes.map((route: SystemRoute, index) => {
-              return (
-                <Route
-                  key={"bs" + index}
-                  path={route.path}
-                  element={
-                    <RouteWrapper authority={route.authority}>
-                      <route.component />
-                    </RouteWrapper>
-                  }
-                />
-              );
-            })}
-          </Routes>
-        </Box>
-      ) : (
+      {/* {isAutoLoadLoaded ? ( */}
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          // alignItems: "center",
+          justifyContent: "flex-start",
+          flex: 1,
+          overflow: "hidden",
+          padding: 3,
+        }}
+      >
+        <Routes>
+          {AppInfo.enableAdministrationModule
+            ? SYSTEM_ROUTES.map((route: SystemRoute, index) => {
+                return (
+                  <Route
+                    key={"adm" + index}
+                    path={route.path}
+                    element={
+                      <RouteWrapper
+                        authority={route.authority}
+                        applicationModule={route.applicationModule}
+                      >
+                        <route.component />
+                      </RouteWrapper>
+                    }
+                  />
+                );
+              })
+            : null}
+          {businessRoutes.map((route: SystemRoute, index) => {
+            return (
+              <Route
+                key={"bs" + index}
+                path={route.path}
+                element={
+                  <RouteWrapper authority={route.authority}>
+                    <route.component />
+                  </RouteWrapper>
+                }
+              />
+            );
+          })}
+        </Routes>
+      </Box>
+      )
+      {/* : (
         <></>
-      )}
+      )
+      } */}
     </CacheProvider>
   );
 };