@asaleh37/ui-base 25.6.1 → 25.6.2-0.1

package/src/components/common/Home.tsx

@@ -1,43 +1,43 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Box } from "@mui/material";
-import { TemplateForm } from "../templates";
-import ReportViewer from "../templates/report/ReportViewer";
-import WorkflowDocumentPanel from "../templates/workflow/WorkflowDocumentPanel";
-import DashboardViewer from "../templates/visuals/DashboardViewer";
-import AttachmentPanel from "../templates/attachment/AttachmentPanel";
-import { useSelector } from "react-redux";
-
-const Home: React.FC = () => {
-  const AppInfo = useSelector((state: any) => state.AppInfo.value);  
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        flex: 1,
-        fontSize: 24,
-        fontWeight: "bold",
-      }}
-    >
-      <img
-        src={AppInfo.appLogo}
-        style={{ margin: 5, height: 200, width: 200 }}
-      />
-      <div>
-        Welcome to {AppInfo.appName} v.{AppInfo.appVersion}
-      </div>
-      <div style={{ fontSize: 16 }}>
-        Use side menu [
-        <FontAwesomeIcon
-          icon="bars"
-          style={{ marginLeft: 10, marginRight: 10 }}
-        />
-        ] to navigate to your authorized system modules
-      </div>
-    </Box>
-  );
-};
-
-export default Home;
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Box } from "@mui/material";
+import { TemplateForm } from "../templates";
+import ReportViewer from "../templates/report/ReportViewer";
+import WorkflowDocumentPanel from "../templates/workflow/WorkflowDocumentPanel";
+import DashboardViewer from "../templates/visuals/DashboardViewer";
+import AttachmentPanel from "../templates/attachment/AttachmentPanel";
+import { useSelector } from "react-redux";
+
+const Home: React.FC = () => {
+  const AppInfo = useSelector((state: any) => state.AppInfo.value);  
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        flex: 1,
+        fontSize: 24,
+        fontWeight: "bold",
+      }}
+    >
+      <img
+        src={AppInfo.appLogo}
+        style={{ margin: 5, height: 200, width: 200 }}
+      />
+      <div>
+        Welcome to {AppInfo.appName} v.{AppInfo.appVersion}
+      </div>
+      <div style={{ fontSize: 16 }}>
+        Use side menu [
+        <FontAwesomeIcon
+          icon="bars"
+          style={{ marginLeft: 10, marginRight: 10 }}
+        />
+        ] to navigate to your authorized system modules
+      </div>
+    </Box>
+  );
+};
+
+export default Home;

package/src/components/common/LanguageSwitcher.tsx

@@ -1,25 +1,25 @@
-import { changeLanguage } from "../../locales/i18n";
-
-
-const LanguageSwitcher: React.FC = () => {
-  return (
-    <div>
-      <button
-        onClick={() => {
-          changeLanguage("ar");
-        }}
-      >
-        arabic
-      </button>
-      <button
-        onClick={() => {
-          changeLanguage("en");
-        }}
-      >
-        english
-      </button>
-    </div>
-  );
-};
-
-export default LanguageSwitcher;
+import { changeLanguage } from "../../locales/i18n";
+
+
+const LanguageSwitcher: React.FC = () => {
+  return (
+    <div>
+      <button
+        onClick={() => {
+          changeLanguage("ar");
+        }}
+      >
+        arabic
+      </button>
+      <button
+        onClick={() => {
+          changeLanguage("en");
+        }}
+      >
+        english
+      </button>
+    </div>
+  );
+};
+
+export default LanguageSwitcher;

package/src/components/common/LayoutHandlers.tsx

@@ -1,12 +1,12 @@
-import rtlPlugin from "stylis-plugin-rtl";
-import { prefixer } from "stylis";
-import createCache from "@emotion/cache";
-
-export const cacheRtl = createCache({
-  key: "muirtl",
-  stylisPlugins: [prefixer, rtlPlugin],
-});
-
-export const cacheLtr = createCache({
-  key: "mui",
+import rtlPlugin from "stylis-plugin-rtl";
+import { prefixer } from "stylis";
+import createCache from "@emotion/cache";
+
+export const cacheRtl = createCache({
+  key: "muirtl",
+  stylisPlugins: [prefixer, rtlPlugin],
+});
+
+export const cacheLtr = createCache({
+  key: "mui",
 });

package/src/components/common/LoadingMask.tsx

@@ -1,24 +1,24 @@
-import { useSelector } from "react-redux";
-import { Backdrop, CircularProgress } from "@mui/material";
-import { useTranslation } from "react-i18next";
-
-const LoadingMask: React.FC = () => {
-  const { t } = useTranslation();
-  const loadingMask = useSelector((state: any) => state.loadingMask.value);
-  const AppLayoutState = useSelector((state: any) => state.AppLayout);
-
-  return (
-    <Backdrop
-      dir={AppLayoutState.appDirection}
-      sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
-      open={loadingMask.isOpened}
-    >
-      <CircularProgress color="inherit" />
-      <div style={{ marginRight: 10, marginLeft: 10 }}>
-        {loadingMask?.message || t("DEFAULT_LOADING_MESSAGE")}
-      </div>
-    </Backdrop>
-  );
-};
-
-export default LoadingMask;
+import { useSelector } from "react-redux";
+import { Backdrop, CircularProgress } from "@mui/material";
+import { useTranslation } from "react-i18next";
+
+const LoadingMask: React.FC = () => {
+  const { t } = useTranslation();
+  const loadingMask = useSelector((state: any) => state.loadingMask.value);
+  const AppLayoutState = useSelector((state: any) => state.AppLayout);
+
+  return (
+    <Backdrop
+      dir={AppLayoutState.appDirection}
+      sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
+      open={loadingMask.isOpened}
+    >
+      <CircularProgress color="inherit" />
+      <div style={{ marginRight: 10, marginLeft: 10 }}>
+        {loadingMask?.message || t("DEFAULT_LOADING_MESSAGE")}
+      </div>
+    </Backdrop>
+  );
+};
+
+export default LoadingMask;

package/src/components/common/Login.tsx

@@ -1,214 +1,214 @@
-import {
-  Box,
-  Button,
-  CircularProgress,
-  createTheme,
-  Paper,
-  TextField,
-  Typography,
-} from "@mui/material";
-import { useDispatch, useSelector } from "react-redux";
-import { ThemeProvider } from "@emotion/react";
-import { useEffect, useState } from "react";
-import axios from "axios";
-import { toast } from "react-toastify";
-import { UserSessionActions } from "../../redux/features/common/UserSessionSlice";
-import {
-  DARK_THEME_INITIAL_MAIN_COLOR,
-  DARK_THEME_INITIAL_SECANDARY_COLOR,
-} from "../../util";
-
-const Login: React.FC = () => {
-  const appInfo = useSelector((state: any) => state.AppInfo.value);
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [isLoginInProcess, setIsLoginInProcess] = useState(false);
-  const UserSessionState = useSelector((state: any) => state.UserSession.value);
-  const dispatch = useDispatch();
-  const handleLogin = async () => {
-    if (username == null || username == "") {
-      toast.error("username is required to proceed");
-      return;
-    }
-    if (password == null || password == "") {
-      toast.error("password is required to proceed");
-      return;
-    }
-    setIsLoginInProcess(true);
-    let response: any = null;
-    try {
-      response = await axios.post(
-        `${appInfo.apiBaseUrl}/api/auth/login`,
-        {
-          username,
-          password,
-        },
-        {
-          withCredentials: true,
-        }
-      );
-      if (response.data != null && response.data !== "") {
-        setIsLoginInProcess(false);
-        const UserSession = {
-          ...response.data,
-          isAuthenticated: true,
-        };
-        dispatch(UserSessionActions.setAuthenticated(UserSession));
-      }
-    } catch (e: any) {
-      setIsLoginInProcess(false);
-      toast.error(
-        e?.response?.data ||
-          "failed to authenticate, contact your administrator"
-      );
-    }
-  };
-  const userSession = useSelector((state: any) => state.UserSession.value);
-  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: "dark",
-      primary: {
-        main:
-          appInfo.appTheme?.dark?.primaryColor || DARK_THEME_INITIAL_MAIN_COLOR,
-      },
-      secondary: {
-        main:
-          appInfo.appTheme?.dark?.secondaryColor ||
-          DARK_THEME_INITIAL_SECANDARY_COLOR,
-      },
-    },
-  });
-  const checkUserSession = async () => {
-    if (appInfo?.apiBaseUrl) {
-      if (userSession.isAuthenticated == null) {
-        try {
-          let response = await axios.get(
-            `${appInfo.apiBaseUrl}/api/auth/userInfo`,
-            {
-              withCredentials: true,
-            }
-          );
-          if (response != null && response.data != null) {
-            const UserSession = {
-              ...response.data,
-              isAuthenticated: true,
-            };
-            dispatch(UserSessionActions.setAuthenticated(UserSession));
-          } else {
-            dispatch(UserSessionActions.setUnAuthenticated());
-          }
-        } catch (error) {
-          dispatch(UserSessionActions.setUnAuthenticated());
-        }
-      }
-    }
-  };
-  useEffect(() => {
-    checkUserSession();
-  }, [appInfo]);
-  return (
-    <ThemeProvider theme={loginTheme}>
-      <Paper
-        sx={{
-          display: "flex",
-          height: "100vh",
-          width: "100%",
-          borderRadius: 0,
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
-        {UserSessionState.isAuthenticated == false ? (
-          <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>
-            <TextField
-              label="username"
-              sx={{ width: 300, m: 1 }}
-              value={username}
-              onChange={(event) => {
-                setUsername(event.target.value);
-              }}
-              onKeyDown={(event) => {
-                if (event.key === "Enter") {
-                  handleLogin();
-                }
-              }}
-            />
-            <TextField
-              label="password"
-              sx={{ width: 300, m: 1 }}
-              value={password}
-              type="password"
-              onChange={(event) => {
-                setPassword(event.target.value);
-              }}
-              onKeyDown={(event) => {
-                if (event.key === "Enter") {
-                  handleLogin();
-                }
-              }}
-            />
-            <Button
-              loading={isLoginInProcess}
-              onClick={handleLogin}
-              variant="contained"
-              color="primary"
-              sx={{ m: 1 }}
-            >
-              login
-            </Button>
-          </Box>
-        ) : (
-          <>
-            <CircularProgress sx={{ marginRight: 1 }} />
-            <div>You will be redirected shortly ... please wait</div>
-          </>
-        )}
-      </Paper>
-    </ThemeProvider>
-  );
-};
-
-export default Login;
+import {
+  Box,
+  Button,
+  CircularProgress,
+  createTheme,
+  Paper,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { useDispatch, useSelector } from "react-redux";
+import { ThemeProvider } from "@emotion/react";
+import { useEffect, useState } from "react";
+import axios from "axios";
+import { toast } from "react-toastify";
+import { UserSessionActions } from "../../redux/features/common/UserSessionSlice";
+import {
+  DARK_THEME_INITIAL_MAIN_COLOR,
+  DARK_THEME_INITIAL_SECANDARY_COLOR,
+} from "../../util";
+
+const Login: React.FC = () => {
+  const appInfo = useSelector((state: any) => state.AppInfo.value);
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [isLoginInProcess, setIsLoginInProcess] = useState(false);
+  const UserSessionState = useSelector((state: any) => state.UserSession.value);
+  const dispatch = useDispatch();
+  const handleLogin = async () => {
+    if (username == null || username == "") {
+      toast.error("username is required to proceed");
+      return;
+    }
+    if (password == null || password == "") {
+      toast.error("password is required to proceed");
+      return;
+    }
+    setIsLoginInProcess(true);
+    let response: any = null;
+    try {
+      response = await axios.post(
+        `${appInfo.apiBaseUrl}/api/auth/login`,
+        {
+          username,
+          password,
+        },
+        {
+          withCredentials: true,
+        }
+      );
+      if (response.data != null && response.data !== "") {
+        setIsLoginInProcess(false);
+        const UserSession = {
+          ...response.data,
+          isAuthenticated: true,
+        };
+        dispatch(UserSessionActions.setAuthenticated(UserSession));
+      }
+    } catch (e: any) {
+      setIsLoginInProcess(false);
+      toast.error(
+        e?.response?.data ||
+          "failed to authenticate, contact your administrator"
+      );
+    }
+  };
+  const userSession = useSelector((state: any) => state.UserSession.value);
+  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: "dark",
+      primary: {
+        main:
+          appInfo.appTheme?.dark?.primaryColor || DARK_THEME_INITIAL_MAIN_COLOR,
+      },
+      secondary: {
+        main:
+          appInfo.appTheme?.dark?.secondaryColor ||
+          DARK_THEME_INITIAL_SECANDARY_COLOR,
+      },
+    },
+  });
+  const checkUserSession = async () => {
+    if (appInfo?.apiBaseUrl) {
+      if (userSession.isAuthenticated == null) {
+        try {
+          let response = await axios.get(
+            `${appInfo.apiBaseUrl}/api/auth/userInfo`,
+            {
+              withCredentials: true,
+            }
+          );
+          if (response != null && response.data != null) {
+            const UserSession = {
+              ...response.data,
+              isAuthenticated: true,
+            };
+            dispatch(UserSessionActions.setAuthenticated(UserSession));
+          } else {
+            dispatch(UserSessionActions.setUnAuthenticated());
+          }
+        } catch (error) {
+          dispatch(UserSessionActions.setUnAuthenticated());
+        }
+      }
+    }
+  };
+  useEffect(() => {
+    checkUserSession();
+  }, [appInfo]);
+  return (
+    <ThemeProvider theme={loginTheme}>
+      <Paper
+        sx={{
+          display: "flex",
+          height: "100vh",
+          width: "100%",
+          borderRadius: 0,
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        {UserSessionState.isAuthenticated == false ? (
+          <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>
+            <TextField
+              label="username"
+              sx={{ width: 300, m: 1 }}
+              value={username}
+              onChange={(event) => {
+                setUsername(event.target.value);
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  handleLogin();
+                }
+              }}
+            />
+            <TextField
+              label="password"
+              sx={{ width: 300, m: 1 }}
+              value={password}
+              type="password"
+              onChange={(event) => {
+                setPassword(event.target.value);
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  handleLogin();
+                }
+              }}
+            />
+            <Button
+              loading={isLoginInProcess}
+              onClick={handleLogin}
+              variant="contained"
+              color="primary"
+              sx={{ m: 1 }}
+            >
+              login
+            </Button>
+          </Box>
+        ) : (
+          <>
+            <CircularProgress sx={{ marginRight: 1 }} />
+            <div>You will be redirected shortly ... please wait</div>
+          </>
+        )}
+      </Paper>
+    </ThemeProvider>
+  );
+};
+
+export default Login;