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

package/src/components/App.tsx

@@ -1,123 +1,123 @@
-import { useDispatch, useSelector } from "react-redux";
-import { createTheme, ThemeOptions } from "@mui/material";
-import { ThemeProvider } from "@emotion/react";
-import React, { useEffect } from "react";
-import Layout from "../layout/Layout";
-import { AppInfo, AppInfoActions } from "../redux/features/common/AppInfoSlice";
-import { LicenseInfo } from "@mui/x-license";
-import {
-  DARK_THEME_INITIAL_MAIN_COLOR,
-  DARK_THEME_INITIAL_SECANDARY_COLOR,
-  LIGHT_THEME_INITIAL_MAIN_COLOR,
-  LIGHT_THEME_INITIAL_SECANDARY_COLOR,
-} from "../util";
-import { setStoresMetaData } from "../redux/features/common/CommonStoreSlice";
-import { ADMINISTRATION_STORES } from "../redux/features/administration/AdministrationStoresMetaData";
-
-const App: React.FC<AppInfo> = (props: AppInfo) => {
-  const dispatch = useDispatch();
-  LicenseInfo.setLicenseKey(props.muiPremiumKey);
-  const LightThemeOptions: ThemeOptions = {
-    components: {
-      MuiCssBaseline: {
-        styleOverrides: `
-        /* Custom Scrollbar */
-        * {
-          scrollbar-width: thin;
-          scrollbar-color: ${
-            props.appTheme?.light?.primaryColor ||
-            LIGHT_THEME_INITIAL_MAIN_COLOR
-          } #ffffff;
-        }
-  
-        /* Webkit Browsers */
-        *::-webkit-scrollbar {
-          width: 12px;
-          height: 10px;
-        }   
-      `,
-      },
-    },
-    palette: {
-      mode: "light",
-      primary: {
-        main:
-          props.appTheme?.light?.primaryColor || LIGHT_THEME_INITIAL_MAIN_COLOR,
-      },
-      secondary: {
-        main:
-          props.appTheme?.light?.secondaryColor ||
-          LIGHT_THEME_INITIAL_SECANDARY_COLOR,
-      },
-      background: {
-        default: "#f5f5f5",
-        paper: "#f5f5f5",
-      },
-    },
-  };
-  const DarkThemeOptions: ThemeOptions = {
-    components: {
-      MuiCssBaseline: {
-        styleOverrides: `
-        /* Custom Scrollbar */
-        * {
-          scrollbar-width: thin;
-          scrollbar-color: ${
-            props.appTheme?.dark?.primaryColor || DARK_THEME_INITIAL_MAIN_COLOR
-          } #121212;
-        }
-  
-        /* Webkit Browsers */
-        *::-webkit-scrollbar {
-          width: 12px;
-          height: 10px;
-        }   
-      `,
-      },
-    },
-    palette: {
-      mode: "dark",
-      primary: {
-        main:
-          props.appTheme?.dark?.primaryColor || DARK_THEME_INITIAL_MAIN_COLOR,
-      },
-      secondary: {
-        main:
-          props.appTheme?.dark?.secondaryColor ||
-          DARK_THEME_INITIAL_SECANDARY_COLOR,
-      },
-    },
-  };
-
-  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") {
-    themeOptions = { ...DarkThemeOptions };
-  }
-  const theme = createTheme({
-    direction: AppLayoutState.appDirection,
-    ...themeOptions,
-  });
-  useEffect(() => {
-    document.title = props.documentTitle;
-    dispatch(AppInfoActions.setAppInfo(props));
-  }, []);
-  return (
-    <ThemeProvider theme={theme}>
-      <Layout />
-    </ThemeProvider>
-  );
-};
-
-export default App;
+import { useDispatch, useSelector } from "react-redux";
+import { createTheme, ThemeOptions } from "@mui/material";
+import { ThemeProvider } from "@emotion/react";
+import React, { useEffect } from "react";
+import Layout from "../layout/Layout";
+import { AppInfo, AppInfoActions } from "../redux/features/common/AppInfoSlice";
+import { LicenseInfo } from "@mui/x-license";
+import {
+  DARK_THEME_INITIAL_MAIN_COLOR,
+  DARK_THEME_INITIAL_SECANDARY_COLOR,
+  LIGHT_THEME_INITIAL_MAIN_COLOR,
+  LIGHT_THEME_INITIAL_SECANDARY_COLOR,
+} from "../util";
+import { setStoresMetaData } from "../redux/features/common/CommonStoreSlice";
+import { ADMINISTRATION_STORES } from "../redux/features/administration/AdministrationStoresMetaData";
+
+const App: React.FC<AppInfo> = (props: AppInfo) => {
+  const dispatch = useDispatch();
+  LicenseInfo.setLicenseKey(props.muiPremiumKey);
+  const LightThemeOptions: ThemeOptions = {
+    components: {
+      MuiCssBaseline: {
+        styleOverrides: `
+        /* Custom Scrollbar */
+        * {
+          scrollbar-width: thin;
+          scrollbar-color: ${
+            props.appTheme?.light?.primaryColor ||
+            LIGHT_THEME_INITIAL_MAIN_COLOR
+          } #ffffff;
+        }
+  
+        /* Webkit Browsers */
+        *::-webkit-scrollbar {
+          width: 12px;
+          height: 10px;
+        }   
+      `,
+      },
+    },
+    palette: {
+      mode: "light",
+      primary: {
+        main:
+          props.appTheme?.light?.primaryColor || LIGHT_THEME_INITIAL_MAIN_COLOR,
+      },
+      secondary: {
+        main:
+          props.appTheme?.light?.secondaryColor ||
+          LIGHT_THEME_INITIAL_SECANDARY_COLOR,
+      },
+      background: {
+        default: "#f5f5f5",
+        paper: "#f5f5f5",
+      },
+    },
+  };
+  const DarkThemeOptions: ThemeOptions = {
+    components: {
+      MuiCssBaseline: {
+        styleOverrides: `
+        /* Custom Scrollbar */
+        * {
+          scrollbar-width: thin;
+          scrollbar-color: ${
+            props.appTheme?.dark?.primaryColor || DARK_THEME_INITIAL_MAIN_COLOR
+          } #121212;
+        }
+  
+        /* Webkit Browsers */
+        *::-webkit-scrollbar {
+          width: 12px;
+          height: 10px;
+        }   
+      `,
+      },
+    },
+    palette: {
+      mode: "dark",
+      primary: {
+        main:
+          props.appTheme?.dark?.primaryColor || DARK_THEME_INITIAL_MAIN_COLOR,
+      },
+      secondary: {
+        main:
+          props.appTheme?.dark?.secondaryColor ||
+          DARK_THEME_INITIAL_SECANDARY_COLOR,
+      },
+    },
+  };
+
+  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") {
+    themeOptions = { ...DarkThemeOptions };
+  }
+  const theme = createTheme({
+    direction: AppLayoutState.appDirection,
+    ...themeOptions,
+  });
+  useEffect(() => {
+    document.title = props.documentTitle;
+    dispatch(AppInfoActions.setAppInfo(props));
+  }, []);
+  return (
+    <ThemeProvider theme={theme}>
+      <Layout />
+    </ThemeProvider>
+  );
+};
+
+export default App;

package/src/components/BaseApp.tsx

@@ -1,53 +1,53 @@
-import { Provider } from "react-redux";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { fab } from "@fortawesome/free-brands-svg-icons";
-import { far } from "@fortawesome/free-regular-svg-icons";
-import { fas } from "@fortawesome/free-solid-svg-icons";
-import "../styles/index.css";
-import "react-toastify/dist/ReactToastify.css";
-import App from "./App";
-import { AppInfo } from "../redux/features/common/AppInfoSlice";
-import AppLayoutReducer from "../redux/features/common/AppLayoutSlice";
-import UserSessionReducer from "../redux/features/common/UserSessionSlice";
-import LoadingMaskReducer from "../redux/features/common/LoadingMaskSlice";
-import CommonStoreReducer from "../redux/features/common/CommonStoreSlice";
-import AppInfoReducer from "../redux/features/common/AppInfoSlice";
-import SideBarReducer from "../redux/features/common/SideBarSlice";
-import { configureStore } from "@reduxjs/toolkit";
-import i18n from "../locales/i18n";
-import { initReactI18next } from "react-i18next";
-import { ENGLISH_TRANS } from "../locales/english";
-import { ARABIC_TRANS } from "../locales/arabic";
-
-library.add(fab);
-library.add(far);
-library.add(fas);
-
-export const BaseApp: React.FC<AppInfo> = (props) => {
-  const systemReducers = {
-    AppLayout: AppLayoutReducer,
-    UserSession: UserSessionReducer,
-    loadingMask: LoadingMaskReducer,
-    commonStores: CommonStoreReducer,
-    SideBar: SideBarReducer,
-    AppInfo: AppInfoReducer,
-    ...props?.businessReduxReducers,
-  };
-  const store = configureStore({
-    reducer: systemReducers,
-  });
-  const resources = {
-    en: { translation: { ...ENGLISH_TRANS, ...props?.businessLocals?.en } },
-    ar: { translation: { ...ARABIC_TRANS, ...props?.businessLocals?.ar } },
-  };
-  i18n.use(initReactI18next).init({
-    resources: resources, // Where we're gonna put translations' files
-    lng: localStorage.getItem("language") || "en", // Set the initial language of the App
-    fallbackLng: "en",
-  });
-  return (
-    <Provider store={store}>
-      <App {...props} />
-    </Provider>
-  );
-};
+import { Provider } from "react-redux";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fab } from "@fortawesome/free-brands-svg-icons";
+import { far } from "@fortawesome/free-regular-svg-icons";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import "../styles/index.css";
+import "react-toastify/dist/ReactToastify.css";
+import App from "./App";
+import { AppInfo } from "../redux/features/common/AppInfoSlice";
+import AppLayoutReducer from "../redux/features/common/AppLayoutSlice";
+import UserSessionReducer from "../redux/features/common/UserSessionSlice";
+import LoadingMaskReducer from "../redux/features/common/LoadingMaskSlice";
+import CommonStoreReducer from "../redux/features/common/CommonStoreSlice";
+import AppInfoReducer from "../redux/features/common/AppInfoSlice";
+import SideBarReducer from "../redux/features/common/SideBarSlice";
+import { configureStore } from "@reduxjs/toolkit";
+import i18n from "../locales/i18n";
+import { initReactI18next } from "react-i18next";
+import { ENGLISH_TRANS } from "../locales/english";
+import { ARABIC_TRANS } from "../locales/arabic";
+
+library.add(fab);
+library.add(far);
+library.add(fas);
+
+export const BaseApp: React.FC<AppInfo> = (props) => {
+  const systemReducers = {
+    AppLayout: AppLayoutReducer,
+    UserSession: UserSessionReducer,
+    loadingMask: LoadingMaskReducer,
+    commonStores: CommonStoreReducer,
+    SideBar: SideBarReducer,
+    AppInfo: AppInfoReducer,
+    ...props?.businessReduxReducers,
+  };
+  const store = configureStore({
+    reducer: systemReducers,
+  });
+  const resources = {
+    en: { translation: { ...ENGLISH_TRANS, ...props?.businessLocals?.en } },
+    ar: { translation: { ...ARABIC_TRANS, ...props?.businessLocals?.ar } },
+  };
+  i18n.use(initReactI18next).init({
+    resources: resources, // Where we're gonna put translations' files
+    lng: localStorage.getItem("language") || "en", // Set the initial language of the App
+    fallbackLng: "en",
+  });
+  return (
+    <Provider store={store}>
+      <App {...props} />
+    </Provider>
+  );
+};

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

@@ -1,128 +1,128 @@
-import { Box, Button, Divider, Paper } from "@mui/material";
-import { TemplateTextField } from "../../templates";
-import { useState } from "react";
-import { toast } from "react-toastify";
-import { useAxios } from "../../../hooks";
-
-interface ChangePasswordPanelProps {
-  selectedPerson: any;
-  isSelfService: boolean;
-  onSuccessCallBk: () => void;
-}
-
-const ChangePasswordPanel: React.FC<ChangePasswordPanelProps> = (props) => {
-  const [currentPassword, setCurrentPassword] = useState("");
-  const [password1, setPassword1] = useState("");
-  const [password2, setPassword2] = useState("");
-  const { handlePostRequest } = useAxios();
-  const handleChangePasswordRequest = async () => {
-    if (props.isSelfService) {
-      if (currentPassword === null || currentPassword.trim() === "") {
-        toast.error(
-          "You must enter your current password to process your request"
-        );
-        return;
-      }
-    }
-    if (
-      password1 === null ||
-      password1 === "" ||
-      password2 === null ||
-      password2 === "" ||
-      password1 != password2
-    ) {
-      toast.error(
-        "You must enter new password in required fields and must be identical"
-      );
-      return;
-    }
-    await handlePostRequest({
-      endPointURI: props.isSelfService
-        ? "api/v1/ss/changeMyPassword"
-        : "api/v1/admin/changeUserPassword",
-      data: {
-        personId: props?.selectedPerson?.id,
-        currentPassword,
-        newPassword: password1,
-      },
-      successCallBkFn: () => {
-        props.onSuccessCallBk();
-        toast.success("Your request has been processed successfully");
-      },
-      showMask: true,
-    });
-  };
-  return (
-    <Paper
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        width: 400,
-        padding: 1,
-      }}
-    >
-      <Box
-        sx={{
-          m: 1,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "flex-start",
-          width: "100%",
-          fontWeight: "bold",
-          fontSize: 16,
-        }}
-      >
-        Changing Password For : {props?.selectedPerson?.employeeEnName}
-      </Box>
-      <Divider variant="fullWidth" sx={{ width: "100%", marginBottom: 2 }} />
-      {props.isSelfService ? (
-        <TemplateTextField
-          label="Current Password"
-          value={currentPassword}
-          onChange={(e) => {
-            setCurrentPassword(e.target.value);
-          }}
-          sx={{ m: 1 }}
-          fullWidth
-          type="password"
-        />
-      ) : (
-        <></>
-      )}
-
-      <TemplateTextField
-        label="New Password"
-        value={password1}
-        onChange={(e) => {
-          setPassword1(e.target.value);
-        }}
-        sx={{ m: 1 }}
-        fullWidth
-        type="password"
-      />
-      <TemplateTextField
-        label="Confirm New Password"
-        value={password2}
-        onChange={(e) => {
-          setPassword2(e.target.value);
-        }}
-        sx={{ m: 1 }}
-        fullWidth
-        type="password"
-      />
-      <Button
-        sx={{ m: 1 }}
-        variant="contained"
-        onClick={() => {
-          handleChangePasswordRequest();
-        }}
-      >
-        Change Password
-      </Button>
-    </Paper>
-  );
-};
-
-export default ChangePasswordPanel;
+import { Box, Button, Divider, Paper } from "@mui/material";
+import { TemplateTextField } from "../../templates";
+import { useState } from "react";
+import { toast } from "react-toastify";
+import { useAxios } from "../../../hooks";
+
+interface ChangePasswordPanelProps {
+  selectedPerson: any;
+  isSelfService: boolean;
+  onSuccessCallBk: () => void;
+}
+
+const ChangePasswordPanel: React.FC<ChangePasswordPanelProps> = (props) => {
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [password1, setPassword1] = useState("");
+  const [password2, setPassword2] = useState("");
+  const { handlePostRequest } = useAxios();
+  const handleChangePasswordRequest = async () => {
+    if (props.isSelfService) {
+      if (currentPassword === null || currentPassword.trim() === "") {
+        toast.error(
+          "You must enter your current password to process your request"
+        );
+        return;
+      }
+    }
+    if (
+      password1 === null ||
+      password1 === "" ||
+      password2 === null ||
+      password2 === "" ||
+      password1 != password2
+    ) {
+      toast.error(
+        "You must enter new password in required fields and must be identical"
+      );
+      return;
+    }
+    await handlePostRequest({
+      endPointURI: props.isSelfService
+        ? "api/v1/ss/changeMyPassword"
+        : "api/v1/admin/changeUserPassword",
+      data: {
+        personId: props?.selectedPerson?.id,
+        currentPassword,
+        newPassword: password1,
+      },
+      successCallBkFn: () => {
+        props.onSuccessCallBk();
+        toast.success("Your request has been processed successfully");
+      },
+      showMask: true,
+    });
+  };
+  return (
+    <Paper
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 400,
+        padding: 1,
+      }}
+    >
+      <Box
+        sx={{
+          m: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-start",
+          width: "100%",
+          fontWeight: "bold",
+          fontSize: 16,
+        }}
+      >
+        Changing Password For : {props?.selectedPerson?.employeeEnName}
+      </Box>
+      <Divider variant="fullWidth" sx={{ width: "100%", marginBottom: 2 }} />
+      {props.isSelfService ? (
+        <TemplateTextField
+          label="Current Password"
+          value={currentPassword}
+          onChange={(e) => {
+            setCurrentPassword(e.target.value);
+          }}
+          sx={{ m: 1 }}
+          fullWidth
+          type="password"
+        />
+      ) : (
+        <></>
+      )}
+
+      <TemplateTextField
+        label="New Password"
+        value={password1}
+        onChange={(e) => {
+          setPassword1(e.target.value);
+        }}
+        sx={{ m: 1 }}
+        fullWidth
+        type="password"
+      />
+      <TemplateTextField
+        label="Confirm New Password"
+        value={password2}
+        onChange={(e) => {
+          setPassword2(e.target.value);
+        }}
+        sx={{ m: 1 }}
+        fullWidth
+        type="password"
+      />
+      <Button
+        sx={{ m: 1 }}
+        variant="contained"
+        onClick={() => {
+          handleChangePasswordRequest();
+        }}
+      >
+        Change Password
+      </Button>
+    </Paper>
+  );
+};
+
+export default ChangePasswordPanel;