worked with socket for dashboard

2025-06-02 11:20:00 +05:30
parent c8627e0249 c77abff424
commit de3eb81740
40 changed files with 1415 additions and 320 deletions
--- a/app/src/components/Dashboard/DashboardCard.tsx
+++ b/app/src/components/Dashboard/DashboardCard.tsx
@@ -1,160 +1,293 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import img from "../../assets/image/image.png";
 import { useNavigate } from "react-router-dom";
 import { getUserData } from "./functions/getUserData";
-import { useProjectName } from "../../store/builder/store";
+import { useProjectName, useSocketStore } from "../../store/builder/store";
 import { viewProject } from "../../services/dashboard/viewProject";
 import OuterClick from "../../utils/outerClick";
 import { KebabIcon } from "../icons/ExportCommonIcons";
+import darkThemeImage from "../../assets/image/darkThemeProject.png";
+import lightThemeImage from "../../assets/image/lightThemeProject.png";
+import { updateProject } from "../../services/dashboard/updateProject";
+import { getAllProjects } from "../../services/dashboard/getAllProjects";
+import { duplicateProject } from "../../services/dashboard/duplicateProject";

 interface DashBoardCardProps {
-  projectName: string;
-  thumbnail: any;
-  projectId: string;
-  handleDeleteProject?: (projectId: string) => Promise<void>;
-  handleRestoreProject?: (projectId: string) => Promise<void>;
-  active?: string;
+    projectName: string;
+    thumbnail: any;
+    projectId: string;
+    handleDeleteProject?: (projectId: string) => Promise<void>;
+    handleTrashDeleteProject?: (projectId: string) => Promise<void>;
+    handleRestoreProject?: (projectId: string) => Promise<void>;
+    handleDuplicateWorkspaceProject?: (projectId: string, projectName: string, thumbnail: string) => Promise<void>;
+    handleDuplicateRecentProject?: (projectId: string, projectName: string, thumbnail: string) => Promise<void>;
+    active?: string;
+    setIsSearchActive?: React.Dispatch<React.SetStateAction<boolean>>;
 }

 const DashboardCard: React.FC<DashBoardCardProps> = ({
-  projectName,
-  handleDeleteProject,
-  thumbnail,
-  projectId,
-  handleRestoreProject,
-  active
+    projectName,
+    thumbnail,
+    projectId,
+    active,
+    handleDeleteProject,
+    handleRestoreProject,
+    handleTrashDeleteProject,
+    setIsSearchActive,
+    handleDuplicateWorkspaceProject,
+    handleDuplicateRecentProject
 }) => {
-  const navigate = useNavigate();
-  const { setProjectName } = useProjectName();
-  const { userId, organization, userName } = getUserData();
-  const [isKebabOpen, setIsKebabOpen] = useState(false);
+    const navigate = useNavigate();
+    const { setProjectName } = useProjectName();
+    const { userId, organization, userName } = getUserData();
+    const [isKebabOpen, setIsKebabOpen] = useState(false);
+    const [renameValue, setRenameValue] = useState(projectName);
+    const [isRenaming, setIsRenaming] = useState(false);
+    const { projectSocket } = useSocketStore();

-  const kebabRef = useRef<HTMLDivElement>(null);
+    const kebabRef = useRef<HTMLDivElement>(null);
+    const savedTheme = localStorage.getItem("theme") ?? "light";

-  const navigateToProject = async () => {
-    try {
-      const viewedProject = await viewProject(organization, projectId, userId);
-      console.log("Viewed project:", viewedProject);
-    } catch (error) {
-      console.error("Error opening project:", error);
-    }
-
-    setProjectName(projectName);
-    navigate(`/${projectId}`);
-  };
-
-  const handleOptionClick = async (option: string) => {
-    switch (option) {
-      case "delete":
-        if (handleDeleteProject) {
-          await handleDeleteProject(projectId);
-        }
-        break;
-      case "restore":
-        if (handleRestoreProject) {
-          await handleRestoreProject(projectId);
-        }
-        break;
-      case "open in new tab":
+    const navigateToProject = async (e: any) => {
+        if (active && active == "trash") return
        try {
-          await viewProject(organization, projectId, userId);
-          setProjectName(projectName); // optional depending on scope
+            const viewedProject = await viewProject(organization, projectId, userId);
+            console.log("Viewed project:", viewedProject);
        } catch (error) {
-          console.error("Error opening project in new tab:", error);
+            console.error("Error opening project:", error);
        }
-        window.open(`/${projectId}`, "_blank");
-        break;
-      case "rename":
-        // Add rename logic here
-        break;
-      case "duplicate":
-        // Add duplication logic here
-        break;
-      default:
-        break;
-    }
-    setIsKebabOpen(false);
-  };

-  OuterClick({
-    contextClassName: ["kebab-wrapper", "kebab-options-wrapper"],
-    setMenuVisible: () => setIsKebabOpen(false),
-  });
-  return (
-    <button
-      className="dashboard-card-container"
-      onClick={navigateToProject}
-      title={projectName}
-    >
-      <div className="dashboard-card-wrapper">
-        <div className="preview-container">
-          {thumbnail ? (
-            <img src={thumbnail} alt="" />
-          ) : (
-            <img src={img} alt="" />
-          )}
-        </div>
-        <div className="project-details-container">
-          <div className="project-details">
-            <div className="project-name">{projectName}</div>
-            <div className="project-data">24-12-2025</div>
-          </div>
-          <div className="users-list-container" ref={kebabRef}>
-            <div className="user-profile">
-              {userName ? userName.charAt(0).toUpperCase() : "A"}
+        setProjectName(projectName);
+        navigate(`/${projectId}`);
+    };
+
+    const handleOptionClick = async (option: string) => {
+        switch (option) {
+            case "delete":
+                if (handleDeleteProject) {
+                    await handleDeleteProject(projectId);
+                }
+                else if (handleTrashDeleteProject) {
+                    console.log('projectId:dashboard ', projectId);
+                    // await handleTrashDeleteProject(projectId);
+                    handleTrashDeleteProject(projectId);
+                }
+                break;
+            case "restore":
+                if (handleRestoreProject) {
+                    await handleRestoreProject(projectId);
+                }
+                break;
+            case "open in new tab":
+                try {
+                    await viewProject(organization, projectId, userId);
+                    setProjectName(projectName); // optional depending on scope
+                    setIsKebabOpen(false);
+                } catch (error) {
+                    console.error("Error opening project in new tab:", error);
+                }
+                window.open(`/${projectId}`, "_blank");
+                break;
+            case "rename":
+                setIsRenaming(true);
+                // setRenameValue(projectName);
+                // Add rename logic here
+                break;
+            case "duplicate":
+                if (handleDuplicateWorkspaceProject) {
+                    await handleDuplicateWorkspaceProject(projectId, projectName, thumbnail);
+                } else if (handleDuplicateRecentProject) {
+                    await handleDuplicateRecentProject(projectId, projectName, thumbnail);
+                }
+                // try {
+                //     // const project = await duplicateProject(
+                //     //     projectId,
+                //     //     savedTheme === "dark" ? darkThemeImage : lightThemeImage,
+                //     //     projectName
+                //     // );
+                //     // console.log('project: ', project);
+                //     // const duplicateProjectData = {
+                //     //     userId,
+                //     //     thumbnail: savedTheme === "dark" ? darkThemeImage : lightThemeImage,
+                //     //     organization,
+                //     //     projectUuid: projectId,
+                //     //     projectName,
+                //     // };
+                //     // if (projectSocket) {
+                //     //     // console.log('addProject: ', addProject);
+                //     //     const handleResponse = (data: any) => {
+                //     //         console.log('Project add response:', data);
+                //     //         projectSocket.off("v1-project:response:Duplicate", handleResponse); // Clean up
+                //     //     };
+                //     //     projectSocket.on("v1-project:response:Duplicate", handleResponse);
+
+                //     //     console.log('duplicate: ', duplicateProjectData);
+                //     //     projectSocket.emit("v1:project:Duplicate", duplicateProjectData);
+
+                //     //     const projects = await getAllProjects(userId, organization);
+                //     //     console.log("after duplicate", projects);
+
+                //     //     setIsSearchActive && setIsSearchActive(false)
+                //     // }
+
+                // } catch (error) {
+                //     console.error("Error creating project:", error);
+                // }
+                // Add duplication logic here
+                break;
+            default:
+                break;
+        }
+        setIsKebabOpen(false);
+    };
+
+    OuterClick({
+        contextClassName: ["kebab-wrapper", "kebab-options-wrapper"],
+        setMenuVisible: () => setIsKebabOpen(false),
+    });
+    const handleProjectName = async (projectName: string) => {
+        setProjectName(projectName);
+        setRenameValue(projectName)
+        if (!projectId) return
+        // localStorage.setItem("projectName", newName);
+        try {
+
+            const projects = await getAllProjects(
+                userId, organization
+            );
+            console.log('projects: ', projects);
+            let projectUuid = projects.Projects.find((val: any) => val.projectUuid === projectId || val._id === projectId)
+            const updateProjects = {
+                projectId: projectUuid,
+                organization,
+                userId,
+                projectName,
+                thumbnail: undefined
+            }
+
+            if (projectSocket) {
+                const handleResponse = (data: any) => {
+                    console.log('Project update response:', data);
+                    projectSocket.off("v1-project:response:update", handleResponse); // Clean up
+                };
+
+                projectSocket.on("v1-project:response:update", handleResponse);
+
+                projectSocket.emit("v1:project:update", updateProjects);
+            }
+
+            //API for projects rename
+            // const updatedProjectName = await updateProject(
+            //     projectId,
+            //     userId,
+            //     organization,
+            //     undefined,
+            //     projectName
+            // );
+            // 
+        } catch (error) {
+
+        }
+    };
+
+    return (
+        <button
+            className="dashboard-card-container"
+            onClick={navigateToProject}
+            title={projectName}
+        >
+            <div className="dashboard-card-wrapper">
+                <div className="preview-container">
+                    {thumbnail ? (
+                        <img src={thumbnail} alt="" />
+                    ) : (
+                        <img src={img} alt="" />
+                    )}
+                </div>
+                <div className="project-details-container">
+                    <div className="project-details">
+
+                        {isRenaming ? (
+                            <input
+                                value={renameValue}
+                                onChange={(e) => {
+                                    handleProjectName(e.target.value);
+                                }}
+                                onBlur={() => {
+                                    setIsRenaming(false);
+                                    setProjectName(renameValue);
+                                }}
+                                onKeyDown={(e) => {
+                                    if (e.key === "Enter") {
+                                        setProjectName(renameValue);
+                                        setIsRenaming(false);
+                                    }
+                                }}
+                                autoFocus
+                            />
+                        ) : (
+                            <span>{renameValue}</span>
+                        )}
+                        {/* <div className="project-name">{projectName}</div> */}
+                        <div className="project-data">24-12-2025</div>
+                    </div>
+                    <div className="users-list-container" ref={kebabRef}>
+                        <div className="user-profile">
+                            {userName ? userName.charAt(0).toUpperCase() : "A"}
+                        </div>
+
+                        <button
+                            className="kebab-wrapper"
+                            onClick={(e) => {
+                                e.stopPropagation(); // Prevents click from bubbling up
+                                console.log("Kebab menu clicked");
+                                setIsKebabOpen((prev) => !prev);
+                            }}
+                        >
+                            <KebabIcon />
+                        </button>
+                    </div>
+                </div>
            </div>

-            <button
-              className="kebab-wrapper"
-              onClick={(e) => {
-                e.stopPropagation(); // Prevents click from bubbling up
-                console.log("Kebab menu clicked");
-                setIsKebabOpen((prev) => !prev);
-              }}
-            >
-              <KebabIcon />
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {isKebabOpen && active !== "trash" && (
-        <div className="kebab-options-wrapper">
-          {["rename", "delete", "duplicate", "open in new tab"].map((option) => (
-            <button
-              key={option}
-              className="option"
-              onClick={(e) => {
-                console.log(option);
-                e.stopPropagation();
-                handleOptionClick(option);
-              }}
-            >
-              {option}
-            </button>
-          ))}
-        </div>
-      )}
-      {isKebabOpen && active && active == "trash" && (
-        < div className="kebab-options-wrapper">
-          {["restore", "delete"].map((option) => (
-            <button
-              key={option}
-              className="option"
-              onClick={(e) => {
-                console.log(option);
-                e.stopPropagation();
-                handleOptionClick(option);
-              }}
-            >
-              {option}
-            </button>
-          ))}
-        </div>
-      )
-      }
-    </button >
-  );
+            {isKebabOpen && active !== "trash" && (
+                <div className="kebab-options-wrapper">
+                    {["rename", "delete", "duplicate", "open in new tab"].map((option) => (
+                        <button
+                            key={option}
+                            className="option"
+                            title={""}
+                            onClick={(e) => {
+                                console.log(option);
+                                e.stopPropagation();
+                                handleOptionClick(option);
+                            }}
+                        >
+                            {option}
+                        </button>
+                    ))}
+                </div>
+            )}
+            {isKebabOpen && active && active == "trash" && (
+                < div className="kebab-options-wrapper">
+                    {["restore", "delete"].map((option) => (
+                        <button
+                            key={option}
+                            className="option"
+                            onClick={(e) => {
+                                console.log("option", option);
+                                e.stopPropagation();
+                                handleOptionClick(option);
+                            }}
+                        >
+                            {option}
+                        </button>
+                    ))}
+                </div>
+            )
+            }
+        </button >
+    );
 };

 export default DashboardCard;
--- a/app/src/components/Dashboard/DashboardHome.tsx
+++ b/app/src/components/Dashboard/DashboardHome.tsx
@@ -7,6 +7,7 @@ import { useSocketStore } from "../../store/builder/store";
 import { recentlyViewed } from "../../services/dashboard/recentlyViewed";
 import { searchProject } from "../../services/dashboard/searchProjects";
 import { deleteProject } from "../../services/dashboard/deleteProject";
+import { handleDuplicateProjects } from "./functions/handleDuplicateProject";

 interface Project {
  _id: string;
@@ -24,7 +25,7 @@ const DashboardHome: React.FC = () => {
  const [recentProjects, setRecentProjects] = useState<RecentProjectsData>({});
  const [isSearchActive, setIsSearchActive] = useState<boolean>(false);
  const { userId, organization } = getUserData();
-  const { dashBoardSocket } = useSocketStore();
+  const { projectSocket } = useSocketStore();

  const fetchRecentProjects = async () => {
    try {
@@ -49,35 +50,38 @@ const DashboardHome: React.FC = () => {
      userId,
      inputValue
    );
+    console.log('filterRecentProcess: ', filterRecentProcess);
    setIsSearchActive(true);
    setRecentProjects(filterRecentProcess.message ? {} : filterRecentProcess);
  };

  const handleDeleteProject = async (projectId: any) => {
+    console.log('projectId:delete ', projectId);
    try {
      //API for delete project
-      const deletedProject = await deleteProject(
-        projectId,
-        userId,
-        organization
-      );
+      // const deletedProject = await deleteProject(
+      //   projectId,
+      //   userId,
+      //   organization
+      // );
+      // console.log('deletedProject: ', deletedProject);

      //socket for delete Project
-      // const deleteProject = {
-      //   projectId,
-      //   organization,
-      //   userId,
-      // };
+      const deleteProject = {
+        projectId,
+        organization,
+        userId,
+      };

-      // if (dashBoardSocket) {
-      //   const handleResponse = (data: any) => {
-      //     console.log("Project add response:", data);
-      //     dashBoardSocket.off("v1-project:response:delete", handleResponse);
-      //   };
+      if (projectSocket) {
+        const handleResponse = (data: any) => {
+          console.log("Project add response:", data);
+          projectSocket.off("v1-project:response:delete", handleResponse);
+        };

-      //   dashBoardSocket.on("v1-project:response:delete", handleResponse);
-      //   dashBoardSocket.emit("v1:project:delete", deleteProject);
-      // }
+        projectSocket.on("v1-project:response:delete", handleResponse);
+        projectSocket.emit("v1:project:delete", deleteProject);
+      }

      setRecentProjects((prevDiscardedProjects: RecentProjectsData) => {
        if (!Array.isArray(prevDiscardedProjects?.RecentlyViewed)) {
@@ -97,6 +101,21 @@ const DashboardHome: React.FC = () => {
    }
  };

+  const handleDuplicateRecentProject = async (projectId: string, projectName: string, thumbnail: string) => {
+
+    await handleDuplicateProjects({
+      userId,
+      organization,
+      projectId,
+      projectName,
+      projectSocket,
+      thumbnail,
+      setRecentProjects,
+      setIsSearchActive
+    });
+
+  }
+
  const renderProjects = () => {
    const projectList = recentProjects[Object.keys(recentProjects)[0]];

@@ -111,12 +130,12 @@ const DashboardHome: React.FC = () => {
        thumbnail={project.thumbnail}
        projectId={project._id}
        handleDeleteProject={handleDeleteProject}
+        handleDuplicateRecentProject={handleDuplicateRecentProject}
      />
    ));
  };

  useEffect(() => {
-    console.log('isSearchActive: ', isSearchActive);
    if (!isSearchActive) {
      fetchRecentProjects();
    }
--- a/app/src/components/Dashboard/DashboardProjects.tsx
+++ b/app/src/components/Dashboard/DashboardProjects.tsx
@@ -6,6 +6,7 @@ import { useSocketStore } from "../../store/builder/store";
 import { getAllProjects } from "../../services/dashboard/getAllProjects";
 import { searchProject } from "../../services/dashboard/searchProjects";
 import { deleteProject } from "../../services/dashboard/deleteProject";
+import { handleDuplicateProjects } from "./functions/handleDuplicateProject";

 interface Project {
  _id: string;
@@ -23,9 +24,11 @@ const DashboardProjects: React.FC = () => {
  const [workspaceProjects, setWorkspaceProjects] = useState<WorkspaceProjects>(
    {}
  );
+  console.log('workspaceProjects: ', workspaceProjects);
  const [isSearchActive, setIsSearchActive] = useState<boolean>(false);
+
  const [activeFolder, setActiveFolder] = useState<string>("myProjects");
-  const { dashBoardSocket } = useSocketStore();
+  const { projectSocket } = useSocketStore();
  const { userId, organization } = getUserData();

  const fetchAllProjects = async () => {
@@ -39,6 +42,7 @@ const DashboardProjects: React.FC = () => {
      console.error("Error fetching projects:", error);
    }
  };
+
  const handleProjectsSearch = async (inputValue: string) => {
    if (!inputValue.trim()) {
      setIsSearchActive(false);
@@ -54,14 +58,15 @@ const DashboardProjects: React.FC = () => {
    setIsSearchActive(true);
    setWorkspaceProjects(searchedProject.message ? {} : searchedProject);
  };
+
  const handleDeleteProject = async (projectId: any) => {
    try {
-      const Organization = organization;
-      const deletedProject = await deleteProject(
-        projectId,
-        userId,
-        Organization
-      );
+      // const deletedProject = await deleteProject(
+      //   projectId,
+      //   userId,
+      //   organization
+      // );
+      // console.log('deletedProject: ', deletedProject);
      const deleteProjects = {
        projectId,
        organization: organization,
@@ -69,18 +74,18 @@ const DashboardProjects: React.FC = () => {
      };

      //socket for deleting the project
-      // if (dashBoardSocket) {
-      //   const handleResponse = (data: any) => {
-      //     console.log("Project add response:", data);
-      //     dashBoardSocket.off("v1-project:response:delete", handleResponse); // Clean up
-      //   };
+      if (projectSocket) {
+        const handleResponse = (data: any) => {
+          console.log("Project add response:", data);
+          projectSocket.off("v1-project:response:delete", handleResponse); // Clean up
+        };

-      //   dashBoardSocket.on("v1-project:response:delete", handleResponse);
+        projectSocket.on("v1-project:response:delete", handleResponse);

-      //   dashBoardSocket.emit("v1:project:delete", deleteProjects);
-      // } else {
-      //   console.error("Socket is not connected.");
-      // }
+        projectSocket.emit("v1:project:delete", deleteProjects);
+      } else {
+        console.error("Socket is not connected.");
+      }
      setWorkspaceProjects((prevDiscardedProjects: WorkspaceProjects) => {
        if (!Array.isArray(prevDiscardedProjects?.Projects)) {
          return prevDiscardedProjects;
@@ -99,6 +104,21 @@ const DashboardProjects: React.FC = () => {
    }
  };

+  const handleDuplicateWorkspaceProject = async (projectId: string, projectName: string, thumbnail: string) => {
+
+    await handleDuplicateProjects({
+      userId,
+      organization,
+      projectId,
+      projectName,
+      projectSocket,
+      thumbnail,
+      setWorkspaceProjects,
+      setIsSearchActive
+    });
+
+  }
+
  const renderProjects = () => {
    if (activeFolder !== "myProjects") return null;

@@ -115,6 +135,8 @@ const DashboardProjects: React.FC = () => {
        thumbnail={project.thumbnail}
        projectId={project._id}
        handleDeleteProject={handleDeleteProject}
+        setIsSearchActive={setIsSearchActive}
+        handleDuplicateWorkspaceProject={handleDuplicateWorkspaceProject}
      />
    ));
  };
--- a/app/src/components/Dashboard/DashboardTrash.tsx
+++ b/app/src/components/Dashboard/DashboardTrash.tsx
@@ -5,6 +5,8 @@ import { getUserData } from "./functions/getUserData";
 import { trashSearchProject } from "../../services/dashboard/trashSearchProject";
 import { restoreTrash } from "../../services/dashboard/restoreTrash";
 import { getTrash } from "../../services/dashboard/getTrash";
+import { deleteTrash } from "../../services/dashboard/deleteTrash";
+import { useSocketStore } from "../../store/builder/store";

 interface Project {
  _id: string;
@@ -22,15 +24,14 @@ const DashboardTrash: React.FC = () => {
  const [discardedProjects, setDiscardedProjects] = useState<DiscardedProjects>(
    {}
  );
-  console.log("discardedProjects: ", discardedProjects);
  const [isSearchActive, setIsSearchActive] = useState(false);
  const { userId, organization } = getUserData();
+  const { projectSocket } = useSocketStore();
+

  const fetchTrashProjects = async () => {
    try {
      const projects = await getTrash(organization);
-      console.log("organization: ", organization);
-      console.log("trashedprojects: ", projects);

      if (JSON.stringify(projects) !== JSON.stringify(discardedProjects)) {
        setDiscardedProjects(projects);
@@ -59,9 +60,8 @@ const DashboardTrash: React.FC = () => {
  const handleRestoreProject = async (projectId: any) => {
    console.log('projectId: ', projectId);
    try {
-      const Organization = organization;
-      const restoreProject = await restoreTrash(Organization, projectId);
-      console.log('restoreProject: ', restoreProject);
+      const restoreProject = await restoreTrash(organization, projectId);
+      // console.log('restoreProject: ', restoreProject);

      setDiscardedProjects((prevDiscardedProjects: DiscardedProjects) => {
        // Check if TrashDatas exists and is an array
@@ -82,6 +82,46 @@ const DashboardTrash: React.FC = () => {
      console.error("Error deleting project:", error);
    }
  };
+  const handleTrashDeleteProject = async (projectId: any) => {
+    try {
+      // const deletedProject = await deleteTrash(
+      //   organization, projectId
+      // );
+
+
+      const deleteProjectTrash = {
+        projectId,
+        organization,
+        userId,
+      };
+      if (projectSocket) {
+        const handleResponse = (data: any) => {
+          console.log('data:deleteTrash ', data);
+          projectSocket.off("v1:trash:response:delete", handleResponse);
+        };
+        projectSocket.on("v1:trash:response:delete", handleResponse);
+        console.log("duplicate: ", deleteProjectTrash);
+        projectSocket.emit("v1:trash:delete", deleteProjectTrash);
+      }
+      setDiscardedProjects((prevDiscardedProjects: DiscardedProjects) => {
+        if (!Array.isArray(prevDiscardedProjects?.TrashDatas)) {
+          return prevDiscardedProjects;
+        }
+        const updatedProjectDatas = prevDiscardedProjects.TrashDatas.filter(
+          (project) => project._id !== projectId
+        );
+        // console.log('updatedProjectDatas: ', updatedProjectDatas);
+        return {
+          ...prevDiscardedProjects,
+          TrashDatas: updatedProjectDatas,
+        };
+      });
+      setIsSearchActive(false);
+    } catch (error) {
+      console.error("Error deleting project:", error);
+    }
+  };
+
  const renderTrashProjects = () => {
    const projectList = discardedProjects[Object.keys(discardedProjects)[0]];

@@ -96,13 +136,13 @@ const DashboardTrash: React.FC = () => {
        thumbnail={project.thumbnail}
        projectId={project._id}
        handleRestoreProject={handleRestoreProject}
+        handleTrashDeleteProject={handleTrashDeleteProject}
        active={"trash"}
      />
    ));
  };

  useEffect(() => {
-    console.log("isSearchActive:trash ", isSearchActive);
    if (!isSearchActive) {
      fetchTrashProjects();
    }
--- a/app/src/components/Dashboard/SidePannel.tsx
+++ b/app/src/components/Dashboard/SidePannel.tsx
@@ -13,7 +13,7 @@ import darkThemeImage from "../../assets/image/darkThemeProject.png";
 import lightThemeImage from "../../assets/image/lightThemeProject.png";
 import { SettingsIcon, TrashIcon } from "../icons/ExportCommonIcons";
 import { getUserData } from "./functions/getUserData";
-import { useSocketStore } from "../../store/builder/store";
+import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
 import { createProject } from "../../services/dashboard/createProject";
 interface SidePannelProps {
  setActiveTab: React.Dispatch<React.SetStateAction<string>>;
@@ -21,9 +21,10 @@ interface SidePannelProps {
 }

 const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
-  const { userName, userId, organization } = getUserData();
+  const { email, userName, userId, organization } = getUserData();
  const navigate = useNavigate();
-  const { dashBoardSocket } = useSocketStore();
+  const { loadingProgress, setLoadingProgress } = useLoadingProgress();
+  const { dashBoardSocket, projectSocket } = useSocketStore();
  const savedTheme = localStorage.getItem("theme") ?? "light";
  function generateProjectId() {
    const randomBytes = new Uint8Array(12);
@@ -34,18 +35,21 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {


  const handleCreateNewProject = async () => {
+    const token = localStorage.getItem("token");
    try {
      const projectId = generateProjectId();
+      useSocketStore.getState().initializeSocket(email, organization, token);
      console.log('projectId: ', projectId);
      navigate(`/${projectId}`);
+      setLoadingProgress(1)
      //API for creating new Project
-      const project = await createProject(
-        projectId,
-        userId,
-        savedTheme === "dark" ? darkThemeImage : lightThemeImage,
-        organization
-      );
-      console.log('Created project: ', project);
+      // const project = await createProject(
+      //   projectId,
+      //   userId,
+      //   savedTheme === "dark" ? darkThemeImage : lightThemeImage,
+      //   organization
+      // );
+      // console.log('Created project: ', project);
      const addProject = {
        userId,
        thumbnail: savedTheme === "dark" ? darkThemeImage : lightThemeImage,
@@ -54,19 +58,20 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
      };
      // socket for creating new project
      // console.log('dashBoardSocket: ', dashBoardSocket);
-      // if (dashBoardSocket) {
-      //   // console.log('addProject: ', addProject);
-      //   const handleResponse = (data: any) => {
-      //     console.log('Project add response:', data);
-      //     dashBoardSocket.off("v1-project:response:add", handleResponse); // Clean up
-      //   };
-      //   dashBoardSocket.on("v1-project:response:add", handleResponse);
+      console.log('projectSocket: ', projectSocket);
+      if (projectSocket) {
+        // console.log('addProject: ', addProject);
+        const handleResponse = (data: any) => {
+          console.log('Project add response:', data);
+          projectSocket.off("v1-project:response:add", handleResponse); // Clean up
+        };
+        projectSocket.on("v1-project:response:add", handleResponse);

-      //   console.log('addProject: ', addProject);
-      //   dashBoardSocket.emit("v1:project:add", addProject);
-      // } else {
-      //   console.error("Socket is not connected.");
-      // }
+        console.log('addProject: ', addProject);
+        projectSocket.emit("v1:project:add", addProject);
+      } else {
+        console.error("Socket is not connected.");
+      }
    } catch (error) {
      console.error("Error creating project:", error);
    }
--- a/app/src/components/Dashboard/functions/handleDuplicateProject.ts
+++ b/app/src/components/Dashboard/functions/handleDuplicateProject.ts
@@ -0,0 +1,117 @@
+// import { getAllProjects } from "../../../services/dashboard/getAllProjects";
+
+// interface HandleDuplicateProjectsParams {
+//   userId: string;
+//   organization: string;
+//   projectId: string;
+//   projectName: string;
+//   projectSocket: any;
+//   thumbnail: string;
+//   setWorkspaceProjects?: React.Dispatch<React.SetStateAction<any>>;
+//   setRecentProjects?: React.Dispatch<React.SetStateAction<any>>;
+//   setIsSearchActive: React.Dispatch<React.SetStateAction<boolean>>;
+// }
+
+// export const handleDuplicateProjects = async ({
+//   userId,
+//   organization,
+//   projectId,
+//   projectName,
+//   projectSocket,
+//   thumbnail,
+//   setWorkspaceProjects,
+//   setRecentProjects,
+//   setIsSearchActive,
+// }: HandleDuplicateProjectsParams): Promise<void> => {
+//   const duplicateProjectData = {
+//     userId,
+//     thumbnail,
+//     organization,
+//     projectUuid: projectId,
+//     projectName,
+//   };
+
+//   if (projectSocket) {
+//     const handleResponse = (data: any) => {
+//       console.log("Project add response:", data);
+//       projectSocket.off("v1-project:response:Duplicate", handleResponse); // Clean up
+//     };
+
+//     projectSocket.on("v1-project:response:Duplicate", handleResponse);
+//     console.log("duplicate: ", duplicateProjectData);
+//     projectSocket.emit("v1:project:Duplicate", duplicateProjectData);
+
+//     const projects = await getAllProjects(userId, organization);
+//     console.log("projects: works", projects);
+//     if (setIsSearchActive) {
+//       if (setWorkspaceProjects) {
+//         setWorkspaceProjects(projects);
+//       } else if (setRecentProjects) {
+//         setRecentProjects(projects);
+//       }
+//       setIsSearchActive(false);
+//     }
+//   }
+// };
+
+import { getAllProjects } from "../../../services/dashboard/getAllProjects";
+import { recentlyViewed } from "../../../services/dashboard/recentlyViewed";
+
+interface HandleDuplicateProjectsParams {
+  userId: string;
+  organization: string;
+  projectId: string;
+  projectName: string;
+  projectSocket: any;
+  thumbnail: string;
+  setWorkspaceProjects?: React.Dispatch<React.SetStateAction<any>>;
+  setRecentProjects?: React.Dispatch<React.SetStateAction<any>>;
+  setIsSearchActive: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const handleDuplicateProjects = async ({
+  userId,
+  organization,
+  projectId,
+  projectName,
+  projectSocket,
+  thumbnail,
+  setWorkspaceProjects,
+  setRecentProjects,
+  setIsSearchActive,
+}: HandleDuplicateProjectsParams): Promise<void> => {
+  const duplicateProjectData = {
+    userId,
+    thumbnail,
+    organization,
+    projectUuid: projectId,
+    projectName,
+  };
+
+  if (projectSocket) {
+    const handleResponse = async (data: any) => {
+      console.log("Project add response:", data);
+
+      if (data?.message === "Project Duplicated successfully") {
+        if (setWorkspaceProjects) {
+          const allProjects = await getAllProjects(userId, organization);
+          setWorkspaceProjects(allProjects);
+        } else if (setRecentProjects) {
+          const recentProjects = await recentlyViewed(organization, userId);
+          console.log('recentProjects: ', recentProjects);
+          setRecentProjects(recentProjects);
+        }
+
+        setIsSearchActive(false);
+      } else {
+        console.warn("Duplication failed or unexpected response.");
+      }
+
+      projectSocket.off("v1-project:response:Duplicate", handleResponse); // Clean up
+    };
+
+    projectSocket.on("v1-project:response:Duplicate", handleResponse);
+    console.log("Emitting duplicate:", duplicateProjectData);
+    projectSocket.emit("v1:project:Duplicate", duplicateProjectData);
+  }
+};