worked with socket for dashboard

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;