show attachment in task card and show check list item in task card

src/pages/taskmanager/components/Task.tsx

@@ -72,7 +72,7 @@ const Task: FC<Props> = ({ task, isDragging, onClick }) => {
       </div>
 
       {task.users?.length ? (
-        <div className="mt-2 flex justify-end">
+        <div className="mt-2 flex justify-end pl-1.5">
           <div className="flex items-center -space-x-1.5 rtl:space-x-reverse">
             {task.users.map((user) => (
               <UserAvatar

src/pages/taskmanager/components/task-detail/attachment/AttachmentItem.tsx

@@ -1,7 +1,9 @@
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
-import { Document, Link2, More } from "iconsax-react";
+import { CloseCircle, Document, Link2, More } from "iconsax-react";
-import { type FC } from "react";
+import { useEffect, useState, type FC } from "react";
+import { createPortal } from "react-dom";
 import { timeAgo } from "../../../../../config/func";
+import { isImageAttachment } from "./isImageAttachment";
 
 type Props = {
   title: string;
@@ -13,41 +15,102 @@ type Props = {
 };
 
 const AttachmentItem: FC<Props> = ({ title, createdAt, type, url, onEdit, onDelete }) => {
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  const isImage = type === "file" && isImageAttachment(url);
+
+  useEffect(() => {
+    if (!isPreviewOpen) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setIsPreviewOpen(false);
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isPreviewOpen]);
+
   return (
-    <div className="flex items-center justify-between gap-2">
+    <>
-      <div className="flex items-center gap-2 flex-1 min-w-0">
+      <div className="flex items-center justify-between gap-2">
-        <div className="shrink-0 size-9 bg-white rounded-[10px] flex items-center justify-center">
+        <div className="flex items-center gap-2 flex-1 min-w-0">
-          {type === "file" ? <Document size={20} color="#292D32" /> : <Link2 size={20} color="#292D32" />}
+          {isImage && url ? (
+            <button
+              type="button"
+              onClick={() => setIsPreviewOpen(true)}
+              className="shrink-0 size-14 rounded-[10px] overflow-hidden bg-white outline-none"
+            >
+              <img src={url} alt={title} className="size-full object-cover" />
+            </button>
+          ) : (
+            <div className="shrink-0 size-9 bg-white rounded-[10px] flex items-center justify-center">
+              {type === "file" ? <Document size={20} color="#292D32" /> : <Link2 size={20} color="#292D32" />}
+            </div>
+          )}
+
+          <div className="min-w-0">
+            {isImage && url ? (
+              <button
+                type="button"
+                onClick={() => setIsPreviewOpen(true)}
+                className="text-xs font-bold text-[#0047FF] underline truncate block max-w-full text-right outline-none"
+              >
+                {title}
+              </button>
+            ) : url ? (
+              <a href={url} target="_blank" rel="noopener noreferrer" className="text-xs font-bold text-[#0047FF] underline truncate block">
+                {title}
+              </a>
+            ) : (
+              <div className="text-xs font-bold truncate">{title}</div>
+            )}
+            {createdAt && <div className="text-[11px] mt-0.5">{timeAgo(createdAt)}</div>}
+          </div>
         </div>
 
-        <div className="min-w-0">
+        <Popover className="relative shrink-0">
-          {url ? (
+          <PopoverButton className="size-7 bg-white/60 rounded-[8px] flex items-center justify-center outline-none">
-            <a href={url} target="_blank" rel="noopener noreferrer" className="text-xs font-bold text-[#0047FF] underline truncate block">
+            <More size={18} color="#292D32" />
-              {title}
+          </PopoverButton>
-            </a>
+
-          ) : (
+          <PopoverPanel anchor="bottom end" className="z-[80] mt-1 rounded-[10px] bg-white shadow-md text-right p-3">
-            <div className="text-xs font-bold truncate">{title}</div>
+            <button type="button" onClick={onEdit} className="w-full text-sm text-right">
-          )}
+              ویرایش
-          {createdAt && <div className="text-[11px] mt-0.5">{timeAgo(createdAt)}</div>}
+            </button>
-        </div>
+
+            <button type="button" onClick={onDelete} className="w-full mt-3 text-sm text-right text-[#FF0000]">
+              پاک کردن
+            </button>
+          </PopoverPanel>
+        </Popover>
       </div>
 
-      <Popover className="relative shrink-0">
+      {isPreviewOpen &&
-        <PopoverButton className="size-7 bg-white/60 rounded-[8px] flex items-center justify-center outline-none">
+        url &&
-          <More size={18} color="#292D32" />
+        createPortal(
-        </PopoverButton>
+          <div className="fixed inset-0 z-[100] flex items-center justify-center p-4" role="dialog" aria-modal="true">
+            <button
+              type="button"
+              aria-label="بستن"
+              className="absolute inset-0 bg-black/70 outline-none"
+              onClick={() => setIsPreviewOpen(false)}
+            />
 
-        <PopoverPanel anchor="bottom end" className="z-[80] mt-1 rounded-[10px] bg-white shadow-md text-right p-3">
+            <div className="relative z-10 max-w-[90vw] max-h-[90vh]">
-          <button type="button" onClick={onEdit} className="w-full text-sm text-right">
+              <button
-            ویرایش
+                type="button"
-          </button>
+                aria-label="بستن"
+                onClick={() => setIsPreviewOpen(false)}
+                className="absolute -top-3 -left-3 size-9 rounded-full bg-white flex items-center justify-center shadow outline-none"
+              >
+                <CloseCircle size={22} color="#292D32" />
+              </button>
 
-          <button type="button" onClick={onDelete} className="w-full mt-3 text-sm text-right text-[#FF0000]">
+              <img src={url} alt={title} className="max-w-[90vw] max-h-[90vh] rounded-2xl object-contain bg-white" />
-            پاک کردن
+            </div>
-          </button>
+          </div>,
-        </PopoverPanel>
+          document.body,
-      </Popover>
+        )}
-    </div>
+    </>
   );
 };
 

src/pages/taskmanager/components/task-detail/attachment/isImageAttachment.ts

@@ -0,0 +1,10 @@
+const IMAGE_EXTENSIONS = new Set(["jpg", "jpeg", "png", "gif", "webp", "bmp", "svg", "avif"]);
+
+export const isImageAttachment = (url?: string): boolean => {
+  if (!url) return false;
+
+  const path = url.split("?")[0].split("#")[0];
+  const extension = path.split(".").pop()?.toLowerCase();
+
+  return !!extension && IMAGE_EXTENSIONS.has(extension);
+};

src/pages/taskmanager/task/hooks/useTaskData.ts

@@ -124,6 +124,7 @@ export const useCreateCheckListItem = () => {
     mutationFn: (variables: CreateCheckListItemType) => api.createCheckListItem(variables),
     onSuccess: (_data, variables) => {
       queryClient.invalidateQueries({ queryKey: ["task-detail", variables.taskId] });
+      queryClient.invalidateQueries({ queryKey: ["tasks-by-task-phase"] });
       queryClient.invalidateQueries({ queryKey: ["project"] });
     },
   });
@@ -137,6 +138,7 @@ export const useUpdateCheckListItem = () => {
       api.updateCheckListItem(id, params),
     onSuccess: (_data, variables) => {
       queryClient.invalidateQueries({ queryKey: ["task-detail", variables.taskId] });
+      queryClient.invalidateQueries({ queryKey: ["tasks-by-task-phase"] });
       queryClient.invalidateQueries({ queryKey: ["project"] });
     },
   });
@@ -149,6 +151,7 @@ export const useDeleteCheckListItem = () => {
     mutationFn: ({ id }: { id: string; taskId: string }) => api.deleteCheckListItem(id),
     onSuccess: (_data, variables) => {
       queryClient.invalidateQueries({ queryKey: ["task-detail", variables.taskId] });
+      queryClient.invalidateQueries({ queryKey: ["tasks-by-task-phase"] });
       queryClient.invalidateQueries({ queryKey: ["project"] });
     },
   });
@@ -161,6 +164,7 @@ export const useCreateTaskAttachment = () => {
     mutationFn: (variables: CreateTaskAttachmentType) => api.createTaskAttachment(variables),
     onSuccess: (_data, variables) => {
       queryClient.invalidateQueries({ queryKey: ["task-detail", variables.taskId] });
+      queryClient.invalidateQueries({ queryKey: ["tasks-by-task-phase"] });
       queryClient.invalidateQueries({ queryKey: ["project"] });
     },
   });

src/pages/taskmanager/task/types/TaskTypes.ts

@@ -23,9 +23,9 @@ export type TaskItemType = {
   endDate?: string | null;
   tag?: string;
   dateRange?: string;
-  attachments?: number;
+  attachmentCount?: number;
-  checklistDone?: number;
+  checkListItemCount?: number;
-  checklistTotal?: number;
+  completedCheckListItemCount?: number;
   ticketId?: string | null;
   users?: TaskUserType[];
 };

src/pages/taskmanager/task/utils/mapTaskItemToTask.ts

@@ -9,9 +9,9 @@ export const mapTaskItemToTask = (task: TaskItemType, taskPhaseId: string, fallb
   tag: task.tag ?? "",
   dateRange: task.dateRange ?? "",
   color: task.color || null,
-  attachments: task.attachments ?? 0,
+  attachments: task.attachmentCount ?? 0,
-  checklistDone: task.checklistDone ?? 0,
+  checklistDone: task.completedCheckListItemCount ?? 0,
-  checklistTotal: task.checklistTotal ?? 0,
+  checklistTotal: task.checkListItemCount ?? 0,
   ticketId: task.ticketId ?? null,
   users: task.users ?? [],
 });

src/pages/taskmanager/workspace.tsx

@@ -115,9 +115,9 @@ const Workspace: FC = () => {
           tag: activeTask.tag,
           dateRange: activeTask.dateRange,
           color: activeTask.color,
-          attachments: activeTask.attachments,
+          attachmentCount: activeTask.attachments,
-          checklistDone: activeTask.checklistDone,
+          completedCheckListItemCount: activeTask.checklistDone,
-          checklistTotal: activeTask.checklistTotal,
+          checkListItemCount: activeTask.checklistTotal,
           ticketId: activeTask.ticketId,
           users: activeTask.users,
         },