From b3b0831a7f232ffb632a72a3af08de891324f81c Mon Sep 17 00:00:00 2001
From: Poovizhi99 <poovizhi@hexrfactory.com>
Date: Thu, 26 Jun 2025 09:25:02 +0530
Subject: [PATCH] Enhance dashboard components with user collaboration features
 and project management improvements

---
 .../components/Dashboard/DashboardCard.tsx    |  85 ++++---
 .../components/Dashboard/DashboardHome.tsx    |   8 +-
 .../Dashboard/DashboardProjects.tsx           | 222 +++++++++++++++---
 .../Dashboard/socket/projectSocketRes.dev.tsx |  16 +-
 .../templates/CollaborationPopup.tsx          |  22 +-
 app/src/components/templates/LoadingPage.tsx  |  55 ++++-
 .../components/ui/inputs/MultiEmailInvite.tsx |  18 +-
 app/src/modules/scene/scene.tsx               |   4 +-
 app/src/pages/Project.tsx                     |  34 ++-
 .../services/dashboard/sharedWithMeProject.ts |  30 +++
 10 files changed, 380 insertions(+), 114 deletions(-)
 create mode 100644 app/src/services/dashboard/sharedWithMeProject.ts

diff --git a/app/src/components/Dashboard/DashboardCard.tsx b/app/src/components/Dashboard/DashboardCard.tsx
index 47fa261..68d91e7 100644
--- a/app/src/components/Dashboard/DashboardCard.tsx
+++ b/app/src/components/Dashboard/DashboardCard.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, act } from "react";
 import img from "../../assets/image/image.png";
 import { useNavigate } from "react-router-dom";
 import { getUserData } from "../../functions/getUserData";
@@ -14,13 +14,15 @@ interface DashBoardCardProps {
     projectId: string;
     createdAt?: string;
     isViewed?: string;
+    createdBy?: { _id: string, userName: string };
     handleDeleteProject?: (projectId: string) => Promise<void>;
     handleTrashDeleteProject?: (projectId: string) => Promise<void>;
     handleRestoreProject?: (projectId: string) => Promise<void>;
     handleDuplicateWorkspaceProject?: (
         projectId: string,
         projectName: string,
-        thumbnail: string
+        thumbnail: string,
+        userId?: string
     ) => Promise<void>;
     handleDuplicateRecentProject?: (
         projectId: string,
@@ -31,6 +33,7 @@ interface DashBoardCardProps {
     setIsSearchActive?: React.Dispatch<React.SetStateAction<boolean>>;
     setRecentDuplicateData?: React.Dispatch<React.SetStateAction<Object>>;
     setProjectDuplicateData?: React.Dispatch<React.SetStateAction<Object>>;
+    setActiveFolder?: React.Dispatch<React.SetStateAction<string>>;
 }
 type RelativeTimeFormatUnit = any;
 
@@ -45,8 +48,10 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
     handleDuplicateWorkspaceProject,
     handleDuplicateRecentProject,
     createdAt,
+    createdBy,
     setRecentDuplicateData,
     setProjectDuplicateData,
+    setActiveFolder
 }) => {
     const navigate = useNavigate();
     const { setProjectName } = useProjectName();
@@ -59,10 +64,18 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
     const kebabRef = useRef<HTMLDivElement>(null);
 
     const navigateToProject = async (e: any) => {
+        console.log('active: ', active);
         if (active && active == "trash") return;
-        setLoadingProgress(1)
-        setProjectName(projectName);
-        navigate(`/${projectId}`);
+        try {
+            const viewProjects = await viewProject(organization, projectId, userId)
+            console.log('viewProjects: ', viewProjects);
+            console.log('projectName: ', projectName);
+            setLoadingProgress(1)
+            setProjectName(projectName);
+            navigate(`/${projectId}`);
+        } catch {
+
+        }
     };
 
     const handleOptionClick = async (option: string) => {
@@ -81,11 +94,18 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
                 break;
             case "open in new tab":
                 try {
-                    await viewProject(organization, projectId, userId);
-                    setProjectName(projectName);
-                    setIsKebabOpen(false);
+                    if (active === "shared" && createdBy) {
+                        console.log("ihreq");
+                        const newTab = await viewProject(organization, projectId, createdBy?._id);
+                        console.log('newTab: ', newTab);
+                    } else {
+                        const newTab = await viewProject(organization, projectId, userId);
+                        console.log('newTab: ', newTab);
+                        setProjectName(projectName);
+                        setIsKebabOpen(false);
+                    }
                 } catch (error) {
-                    console.error("Error opening project in new tab:", error);
+
                 }
                 window.open(`/${projectId}`, "_blank");
                 break;
@@ -100,13 +120,17 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
                             projectName,
                             thumbnail,
                         });
-                    await handleDuplicateWorkspaceProject(projectId, projectName, thumbnail);
+                    await handleDuplicateWorkspaceProject(projectId, projectName, thumbnail, userId);
+                    if (active === "shared" && setActiveFolder) {
+                        setActiveFolder("myProjects")
+                    }
                 } else if (handleDuplicateRecentProject) {
                     setRecentDuplicateData &&
                         setRecentDuplicateData({
                             projectId,
                             projectName,
                             thumbnail,
+                            userId
                         });
                     await handleDuplicateRecentProject(projectId, projectName, thumbnail);
                 }
@@ -128,7 +152,6 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
         try {
             const projects = await getAllProjects(userId, organization);
             if (!projects || !projects.Projects) return;
-            // console.log("projects: ", projects);
             let projectUuid = projects.Projects.find(
                 (val: any) => val.projectUuid === projectId || val._id === projectId
             );
@@ -173,6 +196,19 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
         return "just now";
     }
 
+    const kebabOptionsMap: Record<string, string[]> = {
+        default: ["rename", "delete", "duplicate", "open in new tab"],
+        trash: ["restore", "delete"],
+        shared: ["duplicate", "open in new tab"],
+    };
+
+    const getOptions = () => {
+        if (active === "trash") return kebabOptionsMap.trash;
+        if (active === "shared") return kebabOptionsMap.shared;
+        if (createdBy && createdBy?._id !== userId) return kebabOptionsMap.shared;
+        return kebabOptionsMap.default;
+    };
+
     return (
         <button
             className="dashboard-card-container"
@@ -212,13 +248,12 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
                             <div className="project-data">
                                 {active && active == "trash" ? `Trashed by you` : `Edited `}{" "}
                                 {getRelativeTime(createdAt)}
-
                             </div>
                         )}
                     </div>
                     <div className="users-list-container" ref={kebabRef}>
                         <div className="user-profile">
-                            {userName ? userName.charAt(0).toUpperCase() : "A"}
+                            {(!createdBy) ? userName ? userName?.charAt(0).toUpperCase() : "A" : createdBy?.userName?.charAt(0).toUpperCase()}
                         </div>
                         <button
                             className="kebab-wrapper"
@@ -232,29 +267,9 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
                     </div>
                 </div>
             </div>
-
-            {isKebabOpen && active !== "trash" && (
+            {isKebabOpen && (
                 <div className="kebab-options-wrapper">
-                    {["rename", "delete", "duplicate", "open in new tab"].map(
-                        (option) => (
-                            <button
-                                key={option}
-                                className="option"
-                                title={""}
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    handleOptionClick(option);
-                                }}
-                            >
-                                {option}
-                            </button>
-                        )
-                    )}
-                </div>
-            )}
-            {isKebabOpen && active && active == "trash" && (
-                <div className="kebab-options-wrapper">
-                    {["restore", "delete"].map((option) => (
+                    {getOptions().map((option) => (
                         <button
                             key={option}
                             className="option"
diff --git a/app/src/components/Dashboard/DashboardHome.tsx b/app/src/components/Dashboard/DashboardHome.tsx
index fcb5c10..058c0d2 100644
--- a/app/src/components/Dashboard/DashboardHome.tsx
+++ b/app/src/components/Dashboard/DashboardHome.tsx
@@ -13,7 +13,7 @@ interface Project {
   _id: string;
   projectName: string;
   thumbnail: string;
-  createdBy: string;
+  createdBy: { _id: string, userName: string };
   projectUuid?: string;
   createdAt: string;
   isViewed?: string
@@ -34,7 +34,8 @@ const DashboardHome: React.FC = () => {
   const fetchRecentProjects = async () => {
     try {
       const projects = await recentlyViewed(organization, userId);
-     
+      console.log('projects: ', projects);
+
       if (JSON.stringify(projects) !== JSON.stringify(recentProjects)) {
         setRecentProjects(projects);
       }
@@ -126,7 +127,8 @@ const DashboardHome: React.FC = () => {
           projectName={project.projectName}
           thumbnail={project.thumbnail}
           projectId={project._id}
-          createdAt={project.isViewed}
+          createdBy={project.createdBy}
+          createdAt={project.createdAt}
           handleDeleteProject={handleDeleteProject}
           handleDuplicateRecentProject={handleDuplicateRecentProject}
           setRecentDuplicateData={setRecentDuplicateData}
diff --git a/app/src/components/Dashboard/DashboardProjects.tsx b/app/src/components/Dashboard/DashboardProjects.tsx
index 988c185..0e736f0 100644
--- a/app/src/components/Dashboard/DashboardProjects.tsx
+++ b/app/src/components/Dashboard/DashboardProjects.tsx
@@ -7,6 +7,8 @@ import { getAllProjects } from "../../services/dashboard/getAllProjects";
 import { searchProject } from "../../services/dashboard/searchProjects";
 import { deleteProject } from "../../services/dashboard/deleteProject";
 import ProjectSocketRes from "./socket/projectSocketRes.dev";
+import { sharedWithMeProjects } from "../../services/dashboard/sharedWithMeProject";
+import { duplicateProject } from "../../services/dashboard/duplicateProject";
 
 interface Project {
   _id: string;
@@ -25,12 +27,25 @@ const DashboardProjects: React.FC = () => {
   const [workspaceProjects, setWorkspaceProjects] = useState<WorkspaceProjects>(
     {}
   );
+  const [sharedwithMeProject, setSharedWithMeProjects] = useState<any>([])
   const [projectDuplicateData, setProjectDuplicateData] = useState<Object>({});
   const [isSearchActive, setIsSearchActive] = useState<boolean>(false);
   const [activeFolder, setActiveFolder] = useState<string>("myProjects");
   const { projectSocket } = useSocketStore();
   const { userId, organization } = getUserData();
 
+  const handleProjectsSearch = async (inputValue: string) => {
+    if (!inputValue.trim()) {
+      setIsSearchActive(false);
+      return;
+    }
+    if (!setWorkspaceProjects || !setIsSearchActive) return;
+
+    const searchedProject = await searchProject(organization, userId, inputValue);
+    setIsSearchActive(true);
+    setWorkspaceProjects(searchedProject.message ? {} : searchedProject);
+  };
+
   const fetchAllProjects = async () => {
     try {
       const projects = await getAllProjects(userId, organization);
@@ -44,18 +59,6 @@ const DashboardProjects: React.FC = () => {
     }
   };
 
-  const handleProjectsSearch = async (inputValue: string) => {
-    if (!inputValue.trim()) {
-      setIsSearchActive(false);
-      return;
-    }
-    if (!setWorkspaceProjects || !setIsSearchActive) return;
-
-    const searchedProject = await searchProject(organization, userId, inputValue);
-    setIsSearchActive(true);
-    setWorkspaceProjects(searchedProject.message ? {} : searchedProject);
-  };
-
   const handleDeleteProject = async (projectId: any) => {
     try {
       // const deletedProject = await deleteProject(
@@ -97,18 +100,9 @@ const DashboardProjects: React.FC = () => {
   const handleDuplicateWorkspaceProject = async (
     projectId: string,
     projectName: string,
-    thumbnail: string
+    thumbnail: string,
   ) => {
-    // await handleDuplicateProjects({
-    //   userId,
-    //   organization,
-    //   projectId,
-    //   projectName,
-    //   projectSocket,
-    //   thumbnail,
-    //   setWorkspaceProjects,
-    //   setIsSearchActive
-    // });
+
     const duplicateProjectData = {
       userId,
       thumbnail,
@@ -121,9 +115,7 @@ const DashboardProjects: React.FC = () => {
 
   const renderProjects = () => {
     if (activeFolder !== "myProjects") return null;
-
     const projectList = workspaceProjects[Object.keys(workspaceProjects)[0]];
-
     if (!projectList?.length) {
       return <div className="empty-state">No projects found</div>;
     }
@@ -143,12 +135,49 @@ const DashboardProjects: React.FC = () => {
     ));
   };
 
+  const renderSharedProjects = () => {
+    return sharedwithMeProject?.map((project: any) => (
+      <DashboardCard
+        key={project._id}
+        projectName={project.projectName}
+        thumbnail={project.thumbnail}
+        projectId={project._id}
+        createdAt={project.createdAt}
+        setIsSearchActive={setIsSearchActive}
+        active="shared"
+        createdBy={project.createdBy}
+        setProjectDuplicateData={setProjectDuplicateData}
+        handleDuplicateWorkspaceProject={handleDuplicateWorkspaceProject}
+        setActiveFolder={setActiveFolder}
+      />
+    ));
+  };
+
+
+  const sharedProject = async () => {
+    try {
+      const sharedWithMe = await sharedWithMeProjects();
+      console.log('sharedWithMe: ', sharedWithMe);
+      setSharedWithMeProjects(sharedWithMe)
+    } catch {
+
+    }
+  }
+
+
   useEffect(() => {
     if (!isSearchActive) {
       fetchAllProjects();
     }
   }, [isSearchActive]);
 
+  useEffect(() => {
+    if (activeFolder === "shared") {
+      sharedProject()
+    }
+  }, [activeFolder])
+
+
   return (
     <div className="dashboard-home-container">
       <DashboardNavBar
@@ -171,7 +200,8 @@ const DashboardProjects: React.FC = () => {
             Shared with me
           </button>
         </div>
-        <div className="cards-container">{renderProjects()}</div>
+        <div className="cards-container">{activeFolder == "myProjects" ? renderProjects() : renderSharedProjects()}</div>
+
         {projectDuplicateData && Object.keys(projectDuplicateData).length > 0 && (
           <ProjectSocketRes
             setIsSearchActive={setIsSearchActive}
@@ -183,4 +213,142 @@ const DashboardProjects: React.FC = () => {
   );
 };
 
-export default DashboardProjects;
\ No newline at end of file
+export default DashboardProjects;
+
+
+
+// const MyProjects = () => {
+//   const { projectSocket } = useSocketStore();
+//   const { userId, organization } = getUserData();
+
+//   const fetchAllProjects = async () => {
+//     try {
+//       const projects = await getAllProjects(userId, organization);
+//       if (!projects || !projects.Projects) return;
+
+//       if (JSON.stringify(projects) !== JSON.stringify(workspaceProjects)) {
+//         setWorkspaceProjects(projects);
+//       }
+//     } catch (error) {
+//       console.error("Error fetching projects:", error);
+//     }
+//   };
+//   const handleDeleteProject = async (projectId: any) => {
+//     try {
+//       // const deletedProject = await deleteProject(
+//       //   projectId,
+//       //   userId,
+//       //   organization
+//       // );
+//       // console.log('deletedProject: ', deletedProject);
+//       const deleteProjects = {
+//         projectId,
+//         organization,
+//         userId,
+//       };
+
+//       //socket for deleting the project
+//       if (projectSocket) {
+//         projectSocket.emit("v1:project:delete", deleteProjects);
+//       } else {
+//         console.error("Socket is not connected.");
+//       }
+//       setWorkspaceProjects((prevDiscardedProjects: WorkspaceProjects) => {
+//         if (!Array.isArray(prevDiscardedProjects?.Projects)) {
+//           return prevDiscardedProjects;
+//         }
+//         const updatedProjectDatas = prevDiscardedProjects.Projects.filter(
+//           (project) => project._id !== projectId
+//         );
+//         return {
+//           ...prevDiscardedProjects,
+//           Projects: updatedProjectDatas,
+//         };
+//       });
+//       setIsSearchActive(false);
+//     } catch (error) {
+//       console.error("Error deleting project:", error);
+//     }
+//   };
+
+//   const handleDuplicateWorkspaceProject = async (
+//     projectId: string,
+//     projectName: string,
+//     thumbnail: string
+//   ) => {
+//     // await handleDuplicateProjects({
+//     //   userId,
+//     //   organization,
+//     //   projectId,
+//     //   projectName,
+//     //   projectSocket,
+//     //   thumbnail,
+//     //   setWorkspaceProjects,
+//     //   setIsSearchActive
+//     // });
+//     const duplicateProjectData = {
+//       userId,
+//       thumbnail,
+//       organization,
+//       projectUuid: projectId,
+//       projectName,
+//     };
+//     projectSocket.emit("v1:project:Duplicate", duplicateProjectData);
+//   };
+
+//   const renderProjects = () => {
+//     if (activeFolder !== "myProjects") return null;
+
+//     const projectList = workspaceProjects[Object.keys(workspaceProjects)[0]];
+
+//     if (!projectList?.length) {
+//       return <div className="empty-state">No projects found</div>;
+//     }
+
+//     return projectList.map((project) => (
+//       <DashboardCard
+//         key={project._id}
+//         projectName={project.projectName}
+//         thumbnail={project.thumbnail}
+//         projectId={project._id}
+//         createdAt={project.createdAt}
+//         handleDeleteProject={handleDeleteProject}
+//         setIsSearchActive={setIsSearchActive}
+//         handleDuplicateWorkspaceProject={handleDuplicateWorkspaceProject}
+//         setProjectDuplicateData={setProjectDuplicateData}
+//       />
+//     ));
+//   };
+
+//   const renderSharedProjects = () => {
+//     if (activeFolder !== "shared") return null;
+
+//     const projectList = workspaceProjects[Object.keys(workspaceProjects)[0]];
+
+//     if (!projectList?.length) {
+//       return <div className="empty-state">No projects found</div>;
+//     }
+
+//     return projectList.map((project) => (
+//       <DashboardCard
+//         key={project._id}
+//         projectName={project.projectName}
+//         thumbnail={project.thumbnail}
+//         projectId={project._id}
+//         createdAt={project.createdAt}
+//         handleDeleteProject={handleDeleteProject}
+//         setIsSearchActive={setIsSearchActive}
+//         handleDuplicateWorkspaceProject={handleDuplicateWorkspaceProject}
+//         setProjectDuplicateData={setProjectDuplicateData}
+//       />
+//     ));
+//   };
+
+//   useEffect(() => {
+//     if (!isSearchActive) {
+//       fetchAllProjects();
+//     }
+//   }, [isSearchActive]);
+
+//   return null
+// }
\ No newline at end of file
diff --git a/app/src/components/Dashboard/socket/projectSocketRes.dev.tsx b/app/src/components/Dashboard/socket/projectSocketRes.dev.tsx
index 981d1ed..9fac261 100644
--- a/app/src/components/Dashboard/socket/projectSocketRes.dev.tsx
+++ b/app/src/components/Dashboard/socket/projectSocketRes.dev.tsx
@@ -14,12 +14,24 @@ interface Project {
     createdAt: string;
     isViewed?: string
 }
+interface RecentProject {
+    _id: string;
+    projectName: string;
+    thumbnail: string;
+    createdBy: { _id: string, userName: string };
+    projectUuid?: string;
+    createdAt: string;
+    isViewed?: string
+}
 
+interface RecentProjectData {
+    [key: string]: RecentProject[];
+}
 interface ProjectsData {
     [key: string]: Project[];
 }
 interface ProjectSocketResProps {
-    setRecentProjects?: React.Dispatch<React.SetStateAction<ProjectsData>>;
+    setRecentProjects?: React.Dispatch<React.SetStateAction<RecentProjectData>>;
     setWorkspaceProjects?: React.Dispatch<React.SetStateAction<ProjectsData>>;
     setIsSearchActive?: React.Dispatch<React.SetStateAction<boolean>>;
 }
@@ -52,7 +64,7 @@ const ProjectSocketRes = ({
         };
 
         const handleDuplicate = async (data: any) => {
-            // console.log("Project duplicate response:", data);
+            console.log("Project duplicate response:", data);
             if (data?.message === "Project Duplicated successfully") {
                 if (setWorkspaceProjects) {
                     const allProjects = await getAllProjects(userId, organization);
diff --git a/app/src/components/templates/CollaborationPopup.tsx b/app/src/components/templates/CollaborationPopup.tsx
index 6093955..eca8eac 100644
--- a/app/src/components/templates/CollaborationPopup.tsx
+++ b/app/src/components/templates/CollaborationPopup.tsx
@@ -16,18 +16,14 @@ import { getAvatarColor } from "../../modules/collaboration/functions/getAvatarC
 interface UserListTemplateProps {
   user: User;
 }
-interface UserData {
-  _id: string;
-  Email: string;
-  userName: string
-}
+
 const UserListTemplate: React.FC<UserListTemplateProps> = ({ user }) => {
   const [accessSelection, setAccessSelection] = useState<string>(user?.Access);
-  const { projectId } = useParams()
+  const { projectId } = useParams();
+
   const accessUpdate = async ({ option }: AccessOption) => {
     if (!projectId) return
     const accessSelection = await shareAccess(projectId, user.userId, option)
-    console.log('accessSelection: ', accessSelection);
     setAccessSelection(option);
   }
 
@@ -79,24 +75,24 @@ const CollaborationPopup: React.FC<CollaborateProps> = ({
   const { userName } = getUserData();
   const [users, setUsers] = useState([])
   const { projectId } = useParams();
-  const [searchedEmail, setSearchedEmail] = useState<UserData[]>([]);
-  const [emails, setEmails] = useState<any>([]);
 
   function getData() {
     if (!projectId) return;
     getProjectSharedList(projectId).then((allUser) => {
       const accesMail = allUser?.datas || []
+      console.log('accesMail: ', accesMail);
       setUsers(accesMail)
     }).catch((err) => {
-      console.log(err);
+
     })
   }
 
   useEffect(() => {
     getData();
   }, [])
+
   useEffect(() => {
-    // console.log("activeUsers: ", activeUsers);
+    // 
   }, [activeUsers]);
   return (
     <RenderOverlay>
@@ -116,7 +112,7 @@ const CollaborationPopup: React.FC<CollaborateProps> = ({
           <div className="header">
             <div className="content">Share this file</div>
             <div className="content">
-              <div className="copy-link-button">copy link</div>
+              {/* <div className="copy-link-button">copy link</div> */}
               <div
                 className="close-button"
                 onClick={() => {
@@ -128,7 +124,7 @@ const CollaborationPopup: React.FC<CollaborateProps> = ({
             </div>
           </div>
           <div className="invite-input-container">
-            <MultiEmailInvite setSearchedEmail={setSearchedEmail} searchedEmail={searchedEmail} users={users} getData={getData} />
+            <MultiEmailInvite users={users} getData={getData} />
           </div>
           <div className="split"></div>
           <section>
diff --git a/app/src/components/templates/LoadingPage.tsx b/app/src/components/templates/LoadingPage.tsx
index f371a53..e6bcb8a 100644
--- a/app/src/components/templates/LoadingPage.tsx
+++ b/app/src/components/templates/LoadingPage.tsx
@@ -6,6 +6,8 @@ import { useProjectName } from "../../store/builder/store";
 import { getAllProjects } from "../../services/dashboard/getAllProjects";
 import { useComparisonProduct } from "../../store/simulation/useSimulationStore";
 import { getUserData } from "../../functions/getUserData";
+import { recentlyViewed } from "../../services/dashboard/recentlyViewed";
+import { sharedWithMeProjects } from "../../services/dashboard/sharedWithMeProject";
 
 interface LoadingPageProps {
   progress: number; // Expect progress as a percentage (0-100)
@@ -19,18 +21,51 @@ const LoadingPage: React.FC<LoadingPageProps> = ({ progress }) => {
 
   const validatedProgress = Math.min(100, Math.max(0, progress));
 
-  useEffect(() => {
-    if (!userId) return;
+  // useEffect(() => {
+  //   if (!userId) return;
 
-    getAllProjects(userId, organization).then((projects) => {
-      if (!projects || !projects.Projects) return;
-      const filterProject = projects?.Projects.find((val: any) => val.projectUuid === projectId || val._id === projectId);
-      if (filterProject) {
-        setProjectName(filterProject.projectName);
+
+  //   // getAllProjects(userId, organization).then((projects) => {
+  //   //   sharedWithMeProjects().then((shared) => {
+  //   //     console.log('filterProject: ', shared);
+  //   //     const filterProject = (projects?.Projects || shared)?.find((val: any) => val.projectUuid === projectId || val._id === projectId)
+  //   //     console.log('filterProject: ', filterProject);
+  //   //     // setProjectName(filterProject?.projectName)
+
+  //   //   })
+  //   // }).catch(() => {
+  //   //   console.error("Error fetching projects")
+  //   // })
+  // }, []);
+  useEffect(() => {
+    if (!userId) {
+      console.error("User data not found in localStorage");
+      return;
+    }
+
+    const fetchProjects = async () => {
+      try {
+        const projects = await getAllProjects(userId, organization);
+        const shared = await sharedWithMeProjects();
+
+        const allProjects = [...(projects?.Projects || []), ...(shared || [])];
+
+        const matchedProject = allProjects.find(
+          (val: any) => val.projectUuid === projectId || val._id === projectId
+        );
+
+        if (matchedProject) {
+          setProjectName(matchedProject.projectName);
+
+        } else {
+          console.warn("Project not found with given ID:", projectId);
+        }
+      } catch (error) {
+        console.error("Error fetching projects:", error);
       }
-    }).catch((error) => {
-      console.log(error);
-    })
+    };
+
+    fetchProjects();
   }, []);
 
   return (
diff --git a/app/src/components/ui/inputs/MultiEmailInvite.tsx b/app/src/components/ui/inputs/MultiEmailInvite.tsx
index 3cd4b92..4a3bbf3 100644
--- a/app/src/components/ui/inputs/MultiEmailInvite.tsx
+++ b/app/src/components/ui/inputs/MultiEmailInvite.tsx
@@ -8,18 +8,15 @@ interface UserData {
   _id: string;
   Email: string;
   userName: string;
-
 }
 
 interface MultiEmailProps {
-  searchedEmail: UserData[];
-  setSearchedEmail: React.Dispatch<React.SetStateAction<UserData[]>>
   users: any,
   getData: any,
 }
-const MultiEmailInvite: React.FC<MultiEmailProps> = ({ searchedEmail, setSearchedEmail, users, getData }) => {
-  console.log('users: ', users);
+const MultiEmailInvite: React.FC<MultiEmailProps> = ({ users, getData }) => {
   const [emails, setEmails] = useState<any>([]);
+  const [searchedEmail, setSearchedEmail] = useState<UserData[]>([]);
   const [inputFocus, setInputFocus] = useState(false);
   const [inputValue, setInputValue] = useState("");
   const { projectId } = useParams();
@@ -33,10 +30,6 @@ const MultiEmailInvite: React.FC<MultiEmailProps> = ({ searchedEmail, setSearche
       const isNotCurrentUser = selectedUser._id !== userId;
       const alreadyExistsInEmails = prev.some(email => email._id === selectedUser._id);
       const alreadyExistsInUsers = users.some((val: any) => val.userId === selectedUser._id);
-
-      console.log('alreadyExistsInEmails: ', alreadyExistsInEmails);
-      console.log('alreadyExistsInUsers:', alreadyExistsInUsers);
-
       if (isNotCurrentUser && !alreadyExistsInEmails && !alreadyExistsInUsers) {
         return [...prev, selectedUser];
       }
@@ -52,9 +45,7 @@ const MultiEmailInvite: React.FC<MultiEmailProps> = ({ searchedEmail, setSearche
     if (trimmedEmail.length < 3) return;
     try {
       const searchedMail = await getSearchUsers(trimmedEmail);
-      console.log('searchedMail: ', searchedMail);
       const filteredEmail = searchedMail.sharchMail?.filtered;
-      console.log('filteredEmail: ', filteredEmail);
       if (filteredEmail) {
         setSearchedEmail(filteredEmail)
       }
@@ -94,6 +85,7 @@ const MultiEmailInvite: React.FC<MultiEmailProps> = ({ searchedEmail, setSearche
             console.error("Error sharing project:", err);
           });
         setEmails([])
+        setInputValue("")
       });
       setTimeout(() => {
         getData()
@@ -123,9 +115,9 @@ const MultiEmailInvite: React.FC<MultiEmailProps> = ({ searchedEmail, setSearche
         />
       </div>
       <div onClick={handleInvite} className="invite-button">
-        Invite
+        Add
       </div>
-      {inputFocus && inputValue.length > 0 && searchedEmail && searchedEmail.length > 0 && (
+      {inputFocus && inputValue.length > 2 && searchedEmail && searchedEmail.length > 0 && (
         <div className="users-list-container">
           {/* list available users here */}
           {searchedEmail.map((val: any, i: any) => (
diff --git a/app/src/modules/scene/scene.tsx b/app/src/modules/scene/scene.tsx
index b4ef721..499aef5 100644
--- a/app/src/modules/scene/scene.tsx
+++ b/app/src/modules/scene/scene.tsx
@@ -40,10 +40,10 @@ export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Co
                 if (!canvas) return;
                 const screenshotDataUrl = (canvas as HTMLCanvasElement)?.toDataURL("image/png");
                 const updateProjects = {
-                    projectId: project.projectUuid,
+                    projectId: project?.projectUuid,
                     organization,
                     userId,
-                    projectName: project.projectName,
+                    projectName: project?.projectName,
                     thumbnail: screenshotDataUrl,
                 };
                 if (projectSocket) {
diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx
index ed9eb06..c655469 100644
--- a/app/src/pages/Project.tsx
+++ b/app/src/pages/Project.tsx
@@ -29,6 +29,8 @@ import { SceneProvider } from "../modules/scene/sceneContext";
 import { getVersionHistoryApi } from "../services/factoryBuilder/versionControl/getVersionHistoryApi";
 import { useVersionHistoryStore } from "../store/builder/useVersionHistoryStore";
 import { VersionProvider } from "../modules/builder/version/versionContext";
+import { recentlyViewed } from "../services/dashboard/recentlyViewed";
+import { sharedWithMeProjects } from "../services/dashboard/sharedWithMeProject";
 
 const Project: React.FC = () => {
 	let navigate = useNavigate();
@@ -54,18 +56,32 @@ const Project: React.FC = () => {
 			return;
 		}
 
-		getAllProjects(userId, organization).then((projects) => {
-			if (!projects || !projects.Projects) return;
-			const filterProject = projects?.Projects.find((val: any) => val.projectUuid === projectId || val._id === projectId)
-			setProjectName(filterProject.projectName)
-			viewProject(organization, filterProject._id, userId).then((viewedProject) => {
-			});
-		}).catch(() => {
-			console.error("Error fetching projects")
-		})
+		const fetchProjects = async () => {
+			try {
+				const projects = await getAllProjects(userId, organization);
+				const shared = await sharedWithMeProjects();
 
+				const allProjects = [...(projects?.Projects || []), ...(shared || [])];
+
+				const matchedProject = allProjects.find(
+					(val: any) => val.projectUuid === projectId || val._id === projectId
+				);
+
+				if (matchedProject) {
+					setProjectName(matchedProject.projectName);
+					await viewProject(organization, matchedProject._id, userId);
+				} else {
+					console.warn("Project not found with given ID:", projectId);
+				}
+			} catch (error) {
+				console.error("Error fetching projects:", error);
+			}
+		};
+
+		fetchProjects();
 	}, []);
 
+
 	useEffect(() => {
 		if (!projectId) return;
 		getVersionHistoryApi(projectId).then((data) => {
diff --git a/app/src/services/dashboard/sharedWithMeProject.ts b/app/src/services/dashboard/sharedWithMeProject.ts
new file mode 100644
index 0000000..8ba422a
--- /dev/null
+++ b/app/src/services/dashboard/sharedWithMeProject.ts
@@ -0,0 +1,30 @@
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+
+export const sharedWithMeProjects = async (
+) => {
+  try {
+    const response = await fetch(`${url_Backend_dwinzo}/api/V1/sharedWithMe`, {
+      method: "GET",
+      headers: {
+        Authorization: "Bearer <access_token>",
+        "Content-Type": "application/json",
+        token: localStorage.getItem("token") || "",
+        refresh_token: localStorage.getItem("refreshToken") || "",
+      },
+    });
+    const newAccessToken = response.headers.get("x-access-token");
+    if (newAccessToken) {
+      //console.log("New token received:", newAccessToken);
+      localStorage.setItem("token", newAccessToken);
+    }
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch assets");
+    }
+
+    return await response.json();
+  } catch (error: any) {
+    echo.error("Failed to get asset image");
+    console.log(error.message);
+  }
+};