@argusoft/medplat-app-shell 1.0.5 → 1.0.7

package/src/views/feature-components/NotFound.jsx

@@ -0,0 +1,66 @@
+import { Button } from '@mui/material';
+import { useNavigate } from 'react-router';
+import { useSelector } from 'react-redux';
+import { useEffect, useState } from 'react';
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import NotFoundImage from '@/assets/img/404.png';
+import GeneralUtil from '@/common/services/util/GeneralUtil';
+/**
+ * @module NotFound
+ * @returns {JSX.element}
+ */
+export default function NotFound() {
+  const [showNotFound, setShowNotFound] = useState(false);
+  const { user } = useSelector((state) => state.Authenticate);
+  const { translate } = useTranslateProvider();
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const res = GeneralUtil.angularRedirectionRouteMatch(user, navigate);
+    res ? setShowNotFound(true) : setShowNotFound(false);
+  }, []);
+
+  /**
+   * This function navigates to home page if a route is not found or mismatched
+   * @function navigateToHome
+   * @returns {void}
+   */
+  const navigateToHome = () => {
+    navigate('/ui/medplat/dashboard/webtasks');
+  };
+
+  return (
+    showNotFound && (
+      <>
+        <style>
+          {`
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+            transform: translateY(10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        .animate-fadeIn {
+          animation: fadeIn 0.6s ease-out;
+        }
+      `}
+        </style>
+        <div className="h-full flex items-center justify-center text-gray-800 dark:text-white">
+          <div className="text-center px-6 py-12 max-w-xl animate-fadeIn">
+            <div className="mt-10">
+              <img src={NotFoundImage} alt="Page Not Found" className="w-full max-w-md mx-auto" />
+              <Button variant="contained" onClick={navigateToHome} className="mt-4">
+                {translate('Back to Home')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  );
+}