refactor: Simplify imports and clean up DashboardCard component for improved readability and maintainability

app/src/components/Dashboard/DashboardCard.tsx

@@ -3,11 +3,7 @@ import { createPortal } from "react-dom";
 import { useNavigate } from "react-router-dom";
 import img from "../../assets/image/image.png";
 import { getUserData } from "../../functions/getUserData";
-import {
+import { useLoadingProgress, useProjectName, useSocketStore } from "../../store/builder/store";
-  useLoadingProgress,
-  useProjectName,
-  useSocketStore,
-} from "../../store/builder/store";
 import OuterClick from "../../utils/outerClick";
 import { KebabIcon } from "../icons/ExportCommonIcons";
 import { getAllProjects } from "../../services/dashboard/getAllProjects";
@@ -24,17 +20,8 @@ interface DashBoardCardProps {
     handleDeleteProject?: (projectId: string) => Promise<void>;
     handleTrashDeleteProject?: (projectId: string) => Promise<void>;
     handleRestoreProject?: (projectId: string) => Promise<void>;
-  handleDuplicateWorkspaceProject?: (
+    handleDuplicateWorkspaceProject?: (projectId: string, projectName: string, thumbnail: string, userId?: string) => Promise<void>;
-    projectId: string,
+    handleDuplicateRecentProject?: (projectId: string, projectName: string, thumbnail: string) => Promise<void>;
-    projectName: string,
-    thumbnail: string,
-    userId?: string
-  ) => Promise<void>;
-  handleDuplicateRecentProject?: (
-    projectId: string,
-    projectName: string,
-    thumbnail: string
-  ) => Promise<void>;
     active?: "shared" | "trash" | "recent" | string;
     setIsSearchActive?: React.Dispatch<React.SetStateAction<boolean>>;
     setRecentDuplicateData?: React.Dispatch<React.SetStateAction<object>>;
@@ -44,14 +31,7 @@ interface DashBoardCardProps {
     setOpenKebabProjectId: React.Dispatch<React.SetStateAction<string | null>>;
 }
 
-type RelativeTimeFormatUnit =
+type RelativeTimeFormatUnit = "year" | "month" | "week" | "day" | "hour" | "minute" | "second";
-  | "year"
-  | "month"
-  | "week"
-  | "day"
-  | "hour"
-  | "minute"
-  | "second";
 
 const kebabOptionsMap: Record<string, string[]> = {
     default: ["rename", "delete", "duplicate", "open in new tab"],
@@ -101,14 +81,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
         setLoadingProgress(1);
         setProjectName(projectName);
         navigate(`/projects/${projectId}`);
-  }, [
+    }, [active, projectId, projectName, navigate, setLoadingProgress, setProjectName]);
-    active,
-    projectId,
-    projectName,
-    navigate,
-    setLoadingProgress,
-    setProjectName,
-  ]);
 
     const getOptions = useCallback(() => {
         if (active === "trash") return kebabOptionsMap.trash;
@@ -125,9 +98,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
 
             try {
                 const projects = await getAllProjects(userId, organization);
-        const projectUuid = projects?.Projects?.find(
+                const projectUuid = projects?.Projects?.find((val: any) => val.projectUuid === projectId || val._id === projectId);
-          (val: any) => val.projectUuid === projectId || val._id === projectId
-        );
                 if (!projectUuid) return;
 
                 const updatePayload = {
@@ -151,8 +122,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
         async (option: string) => {
             switch (option) {
                 case "delete":
-          await (handleDeleteProject?.(projectId) ??
+                    await (active === "trash" ? handleTrashDeleteProject?.(projectId) : handleDeleteProject?.(projectId));
-            handleTrashDeleteProject?.(projectId));
                     break;
                 case "restore":
                     await handleRestoreProject?.(projectId);
@@ -167,12 +137,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
                 case "duplicate":
                     if (handleDuplicateWorkspaceProject) {
                         setProjectDuplicateData?.({ projectId, projectName, thumbnail });
-            await handleDuplicateWorkspaceProject(
+                        await handleDuplicateWorkspaceProject(projectId, projectName, thumbnail, userId);
-              projectId,
-              projectName,
-              thumbnail,
-              userId
-            );
                         if (active === "shared") {
                             setActiveFolder?.("myProjects");
                         }
@@ -183,11 +148,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
                             thumbnail,
                             userId,
                         });
-            await handleDuplicateRecentProject(
+                        await handleDuplicateRecentProject(projectId, projectName, thumbnail);
-              projectId,
-              projectName,
-              thumbnail
-            );
                     }
                     break;
             }
@@ -246,20 +207,13 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
     }, [isKebabOpen]);
 
     return (
-    <div
+        <div className="dashboard-card-container" onClick={navigateToProject} title={projectName}>
-      className="dashboard-card-container"
-      onClick={navigateToProject}
-      title={projectName}
-    >
             <div className="dashboard-card-wrapper">
                 <div className="preview-container">
                     <img src={thumbnail || img} alt={`${projectName} thumbnail`} />
                 </div>
 
-        <div
+                <div className="project-details-container" onClick={(e) => e.stopPropagation()}>
-          className="project-details-container"
-          onClick={(e) => e.stopPropagation()}
-        >
                     <div className="project-details">
                         {isRenaming ? (
                             <input
@@ -283,16 +237,13 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
                         )}
                         {createdAt && (
                             <div className="project-data">
-                {active === "trash" ? "Trashed" : "Edited"}{" "}
+                                {active === "trash" ? "Trashed" : "Edited"} {getRelativeTime(createdAt)}
-                {getRelativeTime(createdAt)}
                             </div>
                         )}
                     </div>
 
                     <div className="users-list-container" ref={kebabRef}>
-            <div className="user-profile">
+                        <div className="user-profile">{(createdBy?.userName || userName || "A").charAt(0).toUpperCase()}</div>
-              {(createdBy?.userName || userName || "A").charAt(0).toUpperCase()}
-            </div>
                         <button
                             className="kebab-wrapper"
                             onClick={(e) => {
@@ -311,10 +262,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
 
             {isKebabOpen &&
                 createPortal(
-          <div
+                    <div className={`kebab-options-wrapper tag-${projectId}`} style={{ position: "fixed", zIndex: 9999, ...kebabPosition }}>
-            className={`kebab-options-wrapper tag-${projectId}`}
-            style={{ position: "fixed", zIndex: 9999, ...kebabPosition }}
-          >
                         {getOptions().map((option) => (
                             <button
                                 key={option}