- 404-page added and fallback for project not found

- page nav handling for project-not-found updated

app/src/app.tsx

@@ -7,6 +7,7 @@ import UserAuth from "./pages/UserAuth";
 import "./styles/main.scss";
 import { LoggerProvider } from "./components/ui/log/LoggerContext";
 import ForgotPassword from "./pages/ForgotPassword";
+import PageNotFound from "./pages/PageNotFound";
 
 const App: React.FC = () => {
 
@@ -23,6 +24,7 @@ const App: React.FC = () => {
           <Route path="/forgot" element={<ForgotPassword />} />
           <Route path="/dashboard" element={<Dashboard />} />
           <Route path="/projects/:projectId" element={<Project />} />
+          <Route path="*" element={<PageNotFound />} />
         </Routes>
       </Router>
     </LoggerProvider>

app/src/assets/image/404/404.svg

@@ -0,0 +1,9 @@
+<svg width="435" height="192" viewBox="0 0 435 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M434.294 35.8327L419.597 87.2712C406.577 88.0129 399.354 88.9272 386.529 90.946L393.877 59.3474L332.885 112.991L377.711 126.218L379.915 115.93C393.611 111.893 401.218 109.947 414.453 107.847L407.84 134.301L427.681 140.18L419.597 167.37L401.226 162.226L392.407 191.62L362.279 183.537L369.627 151.938L297.612 132.097L304.961 104.173L398.286 24.8093L434.294 35.8327Z" fill="#0F0F0F"/>
+<path d="M107.287 110.787L127.128 106.378L132.271 133.567L113.9 137.976L119.779 168.84L86.7109 176.923L80.833 144.59L63.9316 148.999C72.6686 121.327 81.38 109.098 102.144 91.6804L107.287 110.787Z" fill="#0F0F0F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M204.287 0.55928C212.617 -0.162914 217.275 -0.209574 225.598 0.55928C254.396 3.22002 271.652 31.4235 274.832 50.529C276.587 61.0745 277.015 67.0381 277.037 77.7185C265.905 97.6708 263.444 104.779 252.787 126.218C243.954 141.438 233.146 152.429 218.249 162.226C186.397 160.022 167.896 140.12 157.991 109.317C154.89 92.6487 155.445 73.5003 156.521 59.3474C158.678 31.0003 174.892 6.89136 204.287 0.55928ZM217.147 23.9997C197.265 23.9997 181.147 48.624 181.147 78.9997C181.147 109.375 197.265 134 217.147 134C237.029 133.999 253.147 109.375 253.147 78.9997C253.147 48.6243 237.029 24.0001 217.147 23.9997Z" fill="#0F0F0F"/>
+<path d="M99.2041 71.1052L66.1357 81.3923L60.2568 50.529L29.3936 126.953L66.1357 120.34C58.6892 132.967 56.9985 139.297 54.3779 150.468L7.34766 160.757L0 131.362L49.2344 17.4606L85.2422 10.113L99.2041 71.1052Z" fill="#0F0F0F"/>
+<path d="M277.037 96.8249C275.203 113.08 274.273 122.314 268.953 134.301C257.417 152.202 250.176 154.67 237.354 160.021C254.909 142.239 264.111 127.901 277.037 96.8249Z" fill="#0F0F0F"/>
+<path d="M99.2041 81.3923C89.3926 88.8475 83.8084 94.1174 73.4844 109.317L68.3398 91.6804L99.2041 81.3923Z" fill="#0F0F0F"/>
+<path d="M383.59 100.499C397.029 98.1517 404.407 97.8166 417.393 98.2946C404.464 99.701 397.094 100.893 383.59 104.173V100.499Z" fill="#0F0F0F"/>
+</svg>

app/src/modules/scene/controls/selectionControls/selection3D/boundingBoxHelper3D.tsx

@@ -88,9 +88,9 @@ const BoundingBox = ({ boundingBoxRef, isPerAsset = true }: BoundingBoxProps) =>
                 >
                     <Line
                         name="SelectionGroupBoundingBox"
-                        depthWrite={false}
                         points={box.points}
                         color={savedTheme === "dark" ? "#c4abf1" : "#6f42c1"}
+                        depthWrite={false}
                         lineWidth={2.7}
                         segments
                         position={[box.position[0], box.position[1], box.position[2]]}

app/src/pages/PageNotFound.tsx

@@ -0,0 +1,57 @@
+import { useLocation, useNavigate } from "react-router-dom";
+import text404 from "../assets/image/404/404.svg";
+import hero from "../assets/image/404/404_bk.png";
+
+const PageNotFound = () => {
+  const savedTheme = localStorage.getItem("theme");
+  const isLogedIn = localStorage.getItem("userId");
+  const navigate = useNavigate();
+  const { hash } = useLocation();
+
+  function getErrorContext() {
+    const contexts = hash.split("#");
+    const context = contexts[1];
+    const info = contexts.length > 1 ? contexts[2] : "";
+    switch (context) {
+      case "project_not_found":
+        return `Project Not found - The project ${
+          info !== "" && `with ID (${info})`
+        } was not found.`;
+      default:
+        return "Page not Found - looks like we have hit a roadblock";
+    }
+  }
+
+  return (
+    <div className="page-not-found-wrapper">
+      <div className="page-not-found-container">
+        <div className="text-404">
+          <img
+            src={text404}
+            alt=""
+            style={savedTheme === "dark" ? { filter: "invert(1)" } : {}}
+          />
+        </div>
+        <div className="hero-container">
+          <img src={hero} alt="" />
+        </div>
+        <div className="context">{getErrorContext()}</div>
+        <button
+          className="back-to-home"
+          id="go-back-home-404-btn"
+          onClick={() => {
+            if (isLogedIn) {
+              navigate("/Dashboard");
+            } else {
+              navigate("/");
+            }
+          }}
+        >
+          Go Back to Home
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default PageNotFound;

app/src/pages/Project.tsx

@@ -42,6 +42,7 @@ const Project: React.FC = () => {
   useEffect(() => {
     if (!email || !userId) {
       console.error("User data not found in localStorage");
+      navigate("/page-not-found");
       return;
     }
 
@@ -60,6 +61,7 @@ const Project: React.FC = () => {
           await viewProject(organization, matchedProject._id, userId);
         } else {
           console.warn("Project not found with given ID:", projectId);
+          navigate(`/not_found#project_not_found#${projectId}`);
         }
       } catch (error) {
         console.error("Error fetching projects:", error);
@@ -72,6 +74,7 @@ const Project: React.FC = () => {
 
   useEffect(() => {
     if (!projectId) return;
+
     getVersionHistoryApi(projectId)
       .then((data) => {
         const versions: VersionHistory = [];

app/src/pages/UserAuth.tsx

@@ -36,8 +36,6 @@ const UserAuth: React.FC = () => {
     initializeFingerprint();
   }, []);
 
-  const { userId, organization } = getUserData();
-
   const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const organization = email.split("@")[1].split(".")[0];

app/src/styles/main.scss

@@ -45,6 +45,7 @@
 @use "pages/realTimeViz";
 @use "pages/userAuth";
 @use "pages/forgotPassword";
+@use "pages/pageNotFound.scss";
 
 //
 @use "./scene/scene";

app/src/styles/pages/pageNotFound.scss

@@ -0,0 +1,56 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.page-not-found-wrapper {
+  height: 100vh;
+  width: 100vw;
+  background: var(--background-color);
+  .page-not-found-container {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 30px;
+    &::after {
+      content: "";
+      position: absolute;
+      background: var(--faint-gradient-color);
+      height: 100vh;
+      width: 100vw;
+      top: 0;
+      left: 0;
+      z-index: -1;
+    }
+    .text-404 {
+      height: 10vh;
+      img {
+        height: 100%;
+        width: 100%;
+      }
+    }
+    .hero-container {
+      height: 50vh;
+      img {
+        height: 100%;
+        width: 100%;
+      }
+    }
+    .context {
+      color: var(--text-color);
+      font-size: 1rem;
+    }
+    .back-to-home {
+      background: var(--background-color-button);
+      color: var(--text-button-color);
+      padding: 8px 16px;
+      border-radius: 30px;
+      cursor: pointer;
+      transition: all 0.2s;
+      &:hover {
+        transform: translateY(-2px);
+      }
+    }
+  }
+}