@asaleh37/ui-base 26.2.16 → 27.5.26

package/src/components/common/NoLicenseComponent.tsx

@@ -1,79 +1,79 @@
-import { Box, Typography } from "@mui/material";
-import {
-  AppInfo,
-  LicenseCheckObject,
-} from "../../redux/features/common/AppInfoSlice";
-import { useSelector } from "react-redux";
-import { useEffect, useState } from "react";
-import { useAxios } from "../../hooks";
-
-const NoLicenseComponent: React.FC = () => {
-  const [licenseCheckObj, setLicenseCheckObject] = useState<LicenseCheckObject>(
-    { isLicensed: true, lastLicenseCheckMessage: "", lastLicenseCheckTime: "" }
-  );
-  const { handleGetRequest } = useAxios();
-  const appInfo: AppInfo = useSelector((state: any) => state.AppInfo.value);
-  const checkSystemLicense = async () => {
-    if (appInfo?.checkLicense?.endpoint) {
-      await handleGetRequest({
-        endPointURI: appInfo.checkLicense?.endpoint,
-        successCallBkFn: (response) => {
-          setLicenseCheckObject(response.data);
-        },
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (appInfo?.checkLicense?.endpoint) {
-      const interval = appInfo?.checkLicense?.interval || 60000;
-      const intervalId = setInterval(() => {
-        checkSystemLicense();
-      }, interval);
-      return () => {
-        clearInterval(intervalId);
-        console.log("Interval cleared");
-      };
-    }
-  }, [appInfo]);
-  return !licenseCheckObj.isLicensed ? (
-    <Box
-      sx={{
-        flex: 1,
-        width: "100%",
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        position: "fixed",
-        top: 0,
-        background: "rgba(235, 235, 235, 0.8)",
-        left: 0,
-        zIndex: 9999,
-      }}
-    >
-      <img src={appInfo.appLogo} style={{ height: 200, width: 200 }} />
-      <Typography variant="h5">
-        {appInfo.appName} - {appInfo.appVersion}
-      </Typography>
-      <Typography variant="h6" color="error">
-        Your license is missing or has expired.
-      </Typography>
-      <Typography variant="h6" color="error">
-        Please reach out to your vendor for assistance.
-      </Typography>
-      <Typography>
-        License Check @{licenseCheckObj?.lastLicenseCheckTime || "--------"}
-      </Typography>
-      <Typography>
-        License Check Result :{" "}
-        {licenseCheckObj?.lastLicenseCheckMessage || "--------"}
-      </Typography>
-    </Box>
-  ) : (
-    <></>
-  );
-};
-
-export default NoLicenseComponent;
+import { Box, Typography } from "@mui/material";
+import {
+  AppInfo,
+  LicenseCheckObject,
+} from "../../redux/features/common/AppInfoSlice";
+import { useSelector } from "react-redux";
+import { useEffect, useState } from "react";
+import { useAxios } from "../../hooks";
+
+const NoLicenseComponent: React.FC = () => {
+  const [licenseCheckObj, setLicenseCheckObject] = useState<LicenseCheckObject>(
+    { isLicensed: true, lastLicenseCheckMessage: "", lastLicenseCheckTime: "" }
+  );
+  const { handleGetRequest } = useAxios();
+  const appInfo: AppInfo = useSelector((state: any) => state.AppInfo.value);
+  const checkSystemLicense = async () => {
+    if (appInfo?.checkLicense?.endpoint) {
+      await handleGetRequest({
+        endPointURI: appInfo.checkLicense?.endpoint,
+        successCallBkFn: (response) => {
+          setLicenseCheckObject(response.data);
+        },
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (appInfo?.checkLicense?.endpoint) {
+      const interval = appInfo?.checkLicense?.interval || 60000;
+      const intervalId = setInterval(() => {
+        checkSystemLicense();
+      }, interval);
+      return () => {
+        clearInterval(intervalId);
+        console.log("Interval cleared");
+      };
+    }
+  }, [appInfo]);
+  return !licenseCheckObj.isLicensed ? (
+    <Box
+      sx={{
+        flex: 1,
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "fixed",
+        top: 0,
+        background: "rgba(235, 235, 235, 0.8)",
+        left: 0,
+        zIndex: 9999,
+      }}
+    >
+      <img src={appInfo.appLogo} style={{ height: 200, width: 200 }} />
+      <Typography variant="h5">
+        {appInfo.appName} - {appInfo.appVersion}
+      </Typography>
+      <Typography variant="h6" color="error">
+        Your license is missing or has expired.
+      </Typography>
+      <Typography variant="h6" color="error">
+        Please reach out to your vendor for assistance.
+      </Typography>
+      <Typography>
+        License Check @{licenseCheckObj?.lastLicenseCheckTime || "--------"}
+      </Typography>
+      <Typography>
+        License Check Result :{" "}
+        {licenseCheckObj?.lastLicenseCheckMessage || "--------"}
+      </Typography>
+    </Box>
+  ) : (
+    <></>
+  );
+};
+
+export default NoLicenseComponent;

package/src/components/common/NotificationItem.tsx

@@ -1,138 +1,138 @@
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { Box, Button, Divider, keyframes, Typography } from "@mui/material";
-import { useSelector } from "react-redux";
-import { useNavigate } from "react-router-dom";
-import { useAxios, useSession } from "../../hooks";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { timeAgo } from "../../util";
-
-const beatFade = keyframes`
-  0% { transform: scale(1); opacity: 1; }
-  25% { transform: scale(1); opacity: 0.6; }
-  50% { transform: scale(1); opacity: 1; }
-  75% { transform: scale(1); opacity: 0.6; }
-  100% { transform: scale(1); opacity: 1; }
-`;
-
-export type Notification = {
-  id: number;
-  notificationIcon?: IconProp;
-  notificationIconColor?: string;
-  notificationEnText: string;
-  notificationArText: string;
-  notificationTextColor?: string;
-  notificationAction?: "NAVIGATION";
-  notificationActionPayload?: string;
-  isNotified?: boolean;
-  createTime: string;
-  setOpen?: (state: boolean) => void;
-  showDivider?: boolean;
-};
-const NotificationItem: React.FC<Notification> = (notification) => {
-  const navigate = useNavigate();
-  const AppLayout = useSelector((state: any) => state.AppLayout);
-  const { handlePostRequest } = useAxios();
-  const acknowledgeNotification = (notificationId) => {
-    handlePostRequest({
-      endPointURI: "api/v1/public/notification/notified",
-      showMask: false,
-      parameters: { notificationQueueId: notificationId },
-    });
-  };
-  return (
-    <>
-      <Button
-        fullWidth
-        onClick={() => {
-          if (
-            notification?.notificationAction === "NAVIGATION" &&
-            notification?.notificationActionPayload
-          ) {
-            navigate(notification.notificationActionPayload);
-          }
-          if (!notification?.isNotified) {
-            acknowledgeNotification(notification.id);
-          }
-          if (notification?.setOpen) {
-            notification.setOpen(false);
-          }
-        }}
-        sx={{
-          marginBottom: 1,
-          justifyContent: "flex-start",
-          alignItems: "flex-start",
-          color: notification?.notificationTextColor,
-          display: "flex",
-          flexDirection: "column",
-          cursor: "pointer",
-        }}
-      >
-        <Box
-          sx={{
-            cursor: "pointer",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "flex-start",
-            width: "100%",
-          }}
-        >
-          {notification?.notificationIcon ? (
-            <FontAwesomeIcon
-              icon={notification.notificationIcon}
-              style={{
-                marginRight: 10,
-                marginLeft: 10,
-                color: notification?.notificationIconColor,
-              }}
-            />
-          ) : (
-            <></>
-          )}
-          {AppLayout.appDirection === "ltr"
-            ? notification.notificationEnText
-            : notification.notificationArText}
-          <Box sx={{ flex: 1 }}></Box>
-          {!notification?.isNotified ? (
-            <Typography
-              color="warning"
-              sx={{
-                animation: `${beatFade} 2s infinite ease-in-out`,
-                textTransform: "none",
-                display: "inline-block",
-              }}
-            >
-              <FontAwesomeIcon
-                icon="bell"
-                style={{ marginRight: 5, marginLeft: 5 }}
-              />
-              {AppLayout.appDirection === "ltr" ? "New" : "جديد"}
-            </Typography>
-          ) : (
-            <></>
-          )}
-        </Box>
-        <Box
-          sx={{
-            width: "100%",
-            fontSize: 12,
-            display: "flex",
-            justifyContent: "flex-end",
-            alignItems: "center",
-            cursor: "pointer",
-          }}
-        >
-          <Box sx={{ marginRight: 1, marginLeft: 1 }}>
-            {timeAgo(notification.createTime, AppLayout.appDirection)}
-          </Box>
-          <Box sx={{ flex: 1 }}></Box>
-          <Box sx={{ marginRight: 1, marginLeft: 1 }}>
-            {notification.createTime}
-          </Box>
-        </Box>
-      </Button>
-      {notification?.showDivider ? <Divider flexItem /> : <></>}
-    </>
-  );
-};
-
-export default NotificationItem;
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { Box, Button, Divider, keyframes, Typography } from "@mui/material";
+import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { useAxios, useSession } from "../../hooks";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { timeAgo } from "../../util";
+
+const beatFade = keyframes`
+  0% { transform: scale(1); opacity: 1; }
+  25% { transform: scale(1); opacity: 0.6; }
+  50% { transform: scale(1); opacity: 1; }
+  75% { transform: scale(1); opacity: 0.6; }
+  100% { transform: scale(1); opacity: 1; }
+`;
+
+export type Notification = {
+  id: number;
+  notificationIcon?: IconProp;
+  notificationIconColor?: string;
+  notificationEnText: string;
+  notificationArText: string;
+  notificationTextColor?: string;
+  notificationAction?: "NAVIGATION";
+  notificationActionPayload?: string;
+  isNotified?: boolean;
+  createTime: string;
+  setOpen?: (state: boolean) => void;
+  showDivider?: boolean;
+};
+const NotificationItem: React.FC<Notification> = (notification) => {
+  const navigate = useNavigate();
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const { handlePostRequest } = useAxios();
+  const acknowledgeNotification = (notificationId) => {
+    handlePostRequest({
+      endPointURI: "api/v1/public/notification/notified",
+      showMask: false,
+      parameters: { notificationQueueId: notificationId },
+    });
+  };
+  return (
+    <>
+      <Button
+        fullWidth
+        onClick={() => {
+          if (
+            notification?.notificationAction === "NAVIGATION" &&
+            notification?.notificationActionPayload
+          ) {
+            navigate(notification.notificationActionPayload);
+          }
+          if (!notification?.isNotified) {
+            acknowledgeNotification(notification.id);
+          }
+          if (notification?.setOpen) {
+            notification.setOpen(false);
+          }
+        }}
+        sx={{
+          marginBottom: 1,
+          justifyContent: "flex-start",
+          alignItems: "flex-start",
+          color: notification?.notificationTextColor,
+          display: "flex",
+          flexDirection: "column",
+          cursor: "pointer",
+        }}
+      >
+        <Box
+          sx={{
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            width: "100%",
+          }}
+        >
+          {notification?.notificationIcon ? (
+            <FontAwesomeIcon
+              icon={notification.notificationIcon}
+              style={{
+                marginRight: 10,
+                marginLeft: 10,
+                color: notification?.notificationIconColor,
+              }}
+            />
+          ) : (
+            <></>
+          )}
+          {AppLayout.appDirection === "ltr"
+            ? notification.notificationEnText
+            : notification.notificationArText}
+          <Box sx={{ flex: 1 }}></Box>
+          {!notification?.isNotified ? (
+            <Typography
+              color="warning"
+              sx={{
+                animation: `${beatFade} 2s infinite ease-in-out`,
+                textTransform: "none",
+                display: "inline-block",
+              }}
+            >
+              <FontAwesomeIcon
+                icon="bell"
+                style={{ marginRight: 5, marginLeft: 5 }}
+              />
+              {AppLayout.appDirection === "ltr" ? "New" : "جديد"}
+            </Typography>
+          ) : (
+            <></>
+          )}
+        </Box>
+        <Box
+          sx={{
+            width: "100%",
+            fontSize: 12,
+            display: "flex",
+            justifyContent: "flex-end",
+            alignItems: "center",
+            cursor: "pointer",
+          }}
+        >
+          <Box sx={{ marginRight: 1, marginLeft: 1 }}>
+            {timeAgo(notification.createTime, AppLayout.appDirection)}
+          </Box>
+          <Box sx={{ flex: 1 }}></Box>
+          <Box sx={{ marginRight: 1, marginLeft: 1 }}>
+            {notification.createTime}
+          </Box>
+        </Box>
+      </Button>
+      {notification?.showDivider ? <Divider flexItem /> : <></>}
+    </>
+  );
+};
+
+export default NotificationItem;

package/src/components/index.ts

@@ -1,10 +1,10 @@
-import { DataGridPremium, GridActionsCellItem } from "@mui/x-data-grid-premium";
-export * from "./BaseApp";
-export * from "@mui/material";
-export * from "@mui/lab";
-export { toast } from "react-toastify";
-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 };
+import { DataGridPremium, GridActionsCellItem } from "@mui/x-data-grid-premium";
+export * from "./BaseApp";
+export * from "@mui/material";
+export * from "@mui/lab";
+export { toast } from "react-toastify";
+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/msalConfig.ts

@@ -1,11 +1,11 @@
-import { PublicClientApplication } from "@azure/msal-browser";
-
-export const msalConfig = {
-  auth: {
-    clientId: "your-frontend-client-id",
-    authority: "https://login.microsoftonline.com/<tenant-id>",
-    redirectUri: "http://localhost:3000"
-  }
-};
-
-export const msalInstance = new PublicClientApplication(msalConfig);
+import { PublicClientApplication } from "@azure/msal-browser";
+
+export const msalConfig = {
+  auth: {
+    clientId: "your-frontend-client-id",
+    authority: "https://login.microsoftonline.com/<tenant-id>",
+    redirectUri: "http://localhost:3000"
+  }
+};
+
+export const msalInstance = new PublicClientApplication(msalConfig);