@asaleh37/ui-base 25.6.2-0.4 → 25.6.2

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/OrgMemberRoleForm.tsx

@@ -1,83 +1,83 @@
-import { useEffect, useState } from "react";
-import TransferList from "../../templates/TransferList";
-import { Box, Button } from "@mui/material";
-import { toast } from "react-toastify";
-import { useAxios } from "../../../hooks";
-
-type OrgMemberRoleFormProps = {
-  selectedRecord: any;
-  closeModalFn: () => void;
-};
-
-const OrgMemberRoleForm: React.FC<OrgMemberRoleFormProps> = (props) => {
-  const [selectedOptions, setSelectedOptions] = useState([]);
-  const [availableOptions, setAvailableOptions] = useState([]);
-  const { handlePostRequest, handleGetRequest } = useAxios();
-
-  const getOrgMemberRoles = async () => {
-    await handleGetRequest({
-      endPointURI: "api/v1/admin/organization/member/roles",
-      showMask: true,
-      parameters: {
-        orgMemberId: props.selectedRecord.id,
-        organizationId: props.selectedRecord.organizationId,
-      },
-      successCallBkFn: (response: any) => {
-        setSelectedOptions(response.data.currentRoles);
-        setAvailableOptions(response.data.availableRoles);
-      },
-    });
-  };
-
-  useEffect(() => {
-    if (props.selectedRecord) {
-      getOrgMemberRoles();
-    }
-  }, [props.selectedRecord]);
-  const saveOrgMemberRoles = async () => {
-    await handlePostRequest({
-      endPointURI: "api/v1/admin/organization/member/roles",
-      showMask: true,
-      parameters: { orgMemberId: props.selectedRecord.id },
-      data: selectedOptions,
-      successCallBkFn: () => {
-        toast.success("Your request has been proccesed successfully");
-        if (props.closeModalFn) {
-          props.closeModalFn();
-        }
-      },
-    });
-  };
-  return (
-    <>
-      <TransferList
-        displayField="roleName"
-        options={availableOptions}
-        valueField="id"
-        selectedOptions={selectedOptions}
-        setSelection={setSelectedOptions}
-      />
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "flex-end",
-          width: "100%",
-        }}
-      >
-        <Button
-          variant="contained"
-          onClick={saveOrgMemberRoles}
-          sx={{ marginRight: 1, marginLeft: 1 }}
-        >
-          Save
-        </Button>
-        <Button variant="contained" color="error" onClick={props.closeModalFn}>
-          Cancel
-        </Button>
-      </Box>
-    </>
-  );
-};
-
-export default OrgMemberRoleForm;
+import { useEffect, useState } from "react";
+import TransferList from "../../templates/TransferList";
+import { Box, Button } from "@mui/material";
+import { toast } from "react-toastify";
+import { useAxios } from "../../../hooks";
+
+type OrgMemberRoleFormProps = {
+  selectedRecord: any;
+  closeModalFn: () => void;
+};
+
+const OrgMemberRoleForm: React.FC<OrgMemberRoleFormProps> = (props) => {
+  const [selectedOptions, setSelectedOptions] = useState([]);
+  const [availableOptions, setAvailableOptions] = useState([]);
+  const { handlePostRequest, handleGetRequest } = useAxios();
+
+  const getOrgMemberRoles = async () => {
+    await handleGetRequest({
+      endPointURI: "api/v1/admin/organization/member/roles",
+      showMask: true,
+      parameters: {
+        orgMemberId: props.selectedRecord.id,
+        organizationId: props.selectedRecord.organizationId,
+      },
+      successCallBkFn: (response: any) => {
+        setSelectedOptions(response.data.currentRoles);
+        setAvailableOptions(response.data.availableRoles);
+      },
+    });
+  };
+
+  useEffect(() => {
+    if (props.selectedRecord) {
+      getOrgMemberRoles();
+    }
+  }, [props.selectedRecord]);
+  const saveOrgMemberRoles = async () => {
+    await handlePostRequest({
+      endPointURI: "api/v1/admin/organization/member/roles",
+      showMask: true,
+      parameters: { orgMemberId: props.selectedRecord.id },
+      data: selectedOptions,
+      successCallBkFn: () => {
+        toast.success("Your request has been proccesed successfully");
+        if (props.closeModalFn) {
+          props.closeModalFn();
+        }
+      },
+    });
+  };
+  return (
+    <>
+      <TransferList
+        displayField="appRoleDisplay"
+        options={availableOptions}
+        valueField="id"
+        selectedOptions={selectedOptions}
+        setSelection={setSelectedOptions}
+      />
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          width: "100%",
+        }}
+      >
+        <Button
+          variant="contained"
+          onClick={saveOrgMemberRoles}
+          sx={{ marginRight: 1, marginLeft: 1 }}
+        >
+          Save
+        </Button>
+        <Button variant="contained" color="error" onClick={props.closeModalFn}>
+          Cancel
+        </Button>
+      </Box>
+    </>
+  );
+};
+
+export default OrgMemberRoleForm;