app/src/app.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import { Cache } from "three";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route, useParams } from "react-router-dom";
 import Dashboard from "./pages/Dashboard";
 import Project from "./pages/Project";
 import UserAuth from "./pages/UserAuth";
@@ -14,6 +14,7 @@ const App: React.FC = () => {
     Cache.enabled = true;
   }, []);
 
+
   return (
     <LoggerProvider>
       <Router>

app/src/components/Dashboard/DashboardHome.tsx

@@ -116,7 +116,6 @@ const DashboardHome: React.FC = () => {
   const renderProjects = () => {
     const projectList = recentProjects[Object.keys(recentProjects)[0]];
 
-    console.log('projectList: ', projectList);
     if (!projectList?.length) {
       return <div className="empty-state">No recent projects found</div>;
     }

app/src/modules/scene/scene.tsx

@@ -1,6 +1,5 @@
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { Canvas } from "@react-three/fiber";
-import { Color } from "three";
 import { KeyboardControls } from "@react-three/drei";
 import { SceneProvider } from "./sceneContext";
 
@@ -9,6 +8,12 @@ import Visualization from "../visualization/visualization";
 import Setup from "./setup/setup";
 import Simulation from "../simulation/simulation";
 import Collaboration from "../collaboration/collaboration";
+import useModuleStore from "../../store/useModuleStore";
+import { useParams } from "react-router-dom";
+import { getAllProjects } from "../../services/dashboard/getAllProjects";
+import { getUserData } from "../../components/Dashboard/functions/getUserData";
+import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
+import { useAssetsStore } from "../../store/builder/useAssetStore";
 
 export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Comparison Layout' }) {
     const map = useMemo(() => [
@@ -17,19 +22,76 @@ export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Co
         { name: "left", keys: ["ArrowLeft", "a", "A"] },
         { name: "right", keys: ["ArrowRight", "d", "D"] },
     ], []);
+    const { assets } = useAssetsStore();
+    const { userId, organization } = getUserData();
+    const { activeModule } = useModuleStore();
+    const { projectId } = useParams();
+    const { projectSocket } = useSocketStore();
+    const { loadingProgress } = useLoadingProgress();
+    const handleUpdatingProject = async () => {
+        if (!projectId) return;
+        try {
+            const projects = await getAllProjects(userId, organization);
+            let projectUuid = projects.Projects.find(
+                (val: any) => val.projectUuid === projectId || val._id === projectId
+            );
+
+
+            if (activeModule === "builder" && loadingProgress !== 1) {
+                const canvas =
+                    document.getElementById("sceneCanvas")?.children[0]?.children[0];
+                const screenshotDataUrl = (canvas as HTMLCanvasElement)?.toDataURL("image/png");
+                setTimeout(() => {
+                    const updateProjects = {
+                        projectId: projectUuid,
+                        organization,
+                        userId,
+                        projectName: projectUuid.projectName,
+                        thumbnail: screenshotDataUrl,
+                    };
+                    if (projectSocket) {
+                        projectSocket.emit("v1:project:update", updateProjects);
+                    }
+                }, 8000);
+            } else {
+                const canvas =
+                    document.getElementById("sceneCanvas")?.children[0]?.children[0];
+                const screenshotDataUrl = (canvas as HTMLCanvasElement)?.toDataURL("image/png");
+                const updateProjects = {
+                    projectId: projectUuid,
+                    organization,
+                    userId,
+                    projectName: projectUuid.projectName,
+                    thumbnail: screenshotDataUrl,
+                };
+                // console.log('screenshotDataUrl: ', screenshotDataUrl);
+                // console.log('updateProjects: ', updateProjects);
+                if (projectSocket) {
+                    projectSocket.emit("v1:project:update", updateProjects);
+                }
+            }
+
+        } catch (error) { }
+    };
+    useEffect(() => {
+        handleUpdatingProject()
+    }, [activeModule, assets, loadingProgress])
 
     return (
         <SceneProvider layout={layout}>
             <KeyboardControls map={map}>
                 <Canvas
+                    id="sceneCanvas"
+                    shadows
+                    color="#aaaa"
                     eventPrefix="client"
-                    gl={{ powerPreference: "high-performance", antialias: true }}
                     onContextMenu={(e) => {
                         e.preventDefault();
                     }}
                     onCreated={(e) => {
-                        e.scene.background = new Color(0x19191d);
+                        e.scene.background = null;
                     }}
+                    gl={{ powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
                 >
                     <Setup />
                     <Collaboration />