base url

src/pages/taskmanager/components/Task.tsx

@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Pages } from "../../../config/Pages";
 import type { Task as TaskType } from "../types";
+import UserAvatar from "./UserAvatar";
 
 type Props = {
   task: TaskType;
@@ -70,10 +71,21 @@ const Task: FC<Props> = ({ task, isDragging, onClick }) => {
         </div>
       </div>
 
+      {task.users?.length ? (
         <div className="mt-2 flex justify-end">
-        <div className="size-6 bg-gray-200 rounded-full"></div>
+          <div className="flex items-center -space-x-1.5 rtl:space-x-reverse">
+            {task.users.map((user) => (
+              <UserAvatar
+                key={user.id}
+                src={user.profilePic}
+                alt={`${user.firstName} ${user.lastName}`}
+                className="size-6 ring-2 ring-white"
+              />
+            ))}
           </div>
         </div>
+      ) : null}
+    </div>
   );
 };
 

src/pages/taskmanager/components/task-detail/checklist/List.tsx

@@ -1,10 +1,11 @@
 import { Edit } from "iconsax-react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import ModalConfrim from "../../../../../components/ModalConfrim";
 import { toast } from '../../../../../components/Toast';
 import ProgressBar from "../../../../../components/ProgressBar";
-import TrashWithConfrim from "../../../../../components/TrashWithConfrim";
 import { ErrorType } from "../../../../../helpers/types";
-import { useUpdateCheckListItem } from "../../../task/hooks/useTaskData";
+import { useDeleteCheckListItem, useUpdateCheckListItem } from "../../../task/hooks/useTaskData";
 import type { TaskChecklistItemType } from "../../../task/types/TaskTypes";
 import ChecklistItem from "./ChecklistItem";
 
@@ -23,6 +24,8 @@ const CheckLists = ({
 }: Props) => {
   const { t } = useTranslation("global");
   const updateCheckListItem = useUpdateCheckListItem();
+  const deleteCheckListItem = useDeleteCheckListItem();
+  const [deleteItemId, setDeleteItemId] = useState<string | null>(null);
 
   const items = checkListItems.map((item) => ({
     id: item.id,
@@ -45,6 +48,22 @@ const CheckLists = ({
     );
   };
 
+  const handleDelete = () => {
+    if (!deleteItemId) return;
+
+    deleteCheckListItem.mutate(
+      { id: deleteItemId, taskId },
+      {
+        onSuccess: () => {
+          setDeleteItemId(null);
+        },
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error.message[0], 'error');
+        },
+      },
+    );
+  };
+
   if (checkListItems.length === 0) return null;
 
   return (
@@ -52,7 +71,6 @@ const CheckLists = ({
       <div className="flex gap-2 items-center">
         <div className="text-sm font-bold mt-px">{t("taskmanager.task_detail.checklist")}</div>
         <Edit size={20} color="#0047FF" />
-        <TrashWithConfrim onDelete={() => {}} color="#FF0000" />
       </div>
 
       <div className="mt-4 flex gap-2 items-center">
@@ -68,10 +86,17 @@ const CheckLists = ({
             checked={item.checked}
             onToggle={() => handleToggle(item.id, item.checked)}
             onEdit={() => {}}
-            onDelete={() => {}}
+            onDelete={() => setDeleteItemId(item.id)}
           />
         ))}
       </div>
+
+      <ModalConfrim
+        isOpen={deleteItemId !== null}
+        close={() => setDeleteItemId(null)}
+        onConfrim={handleDelete}
+        isLoading={deleteCheckListItem.isPending}
+      />
     </div>
   );
 };

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

@@ -142,6 +142,18 @@ export const useUpdateCheckListItem = () => {
   });
 };
 
+export const useDeleteCheckListItem = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id }: { id: string; taskId: string }) => api.deleteCheckListItem(id),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["task-detail", variables.taskId] });
+      queryClient.invalidateQueries({ queryKey: ["project"] });
+    },
+  });
+};
+
 export const useCreateTaskAttachment = () => {
   const queryClient = useQueryClient();
 

src/pages/taskmanager/task/service/TaskService.ts

@@ -76,6 +76,11 @@ export const updateCheckListItem = async (
   return data;
 };
 
+export const deleteCheckListItem = async (id: string) => {
+  const { data } = await axios.delete(`/task-manager/check-list-items/${id}`);
+  return data;
+};
+
 export const createTaskAttachment = async (params: CreateTaskAttachmentType) => {
   const { data } = await axios.post(`/task-manager/attachments`, params);
   return data;

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

@@ -27,6 +27,7 @@ export type TaskItemType = {
   checklistDone?: number;
   checklistTotal?: number;
   ticketId?: string | null;
+  users?: TaskUserType[];
 };
 
 export type TaskPhaseTasksPagerType = {

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

@@ -13,4 +13,5 @@ export const mapTaskItemToTask = (task: TaskItemType, taskPhaseId: string, fallb
   checklistDone: task.checklistDone ?? 0,
   checklistTotal: task.checklistTotal ?? 0,
   ticketId: task.ticketId ?? null,
+  users: task.users ?? [],
 });

src/pages/taskmanager/types.ts

@@ -1,3 +1,5 @@
+import type { TaskUserType } from "./task/types/TaskTypes";
+
 export type Column = {
   id: string;
   title: string;
@@ -17,6 +19,7 @@ export type Task = {
   checklistDone: number;
   checklistTotal: number;
   ticketId?: string | null;
+  users?: TaskUserType[];
 };
 
 export type WorkspaceData = {

src/pages/taskmanager/workspace.tsx

@@ -119,6 +119,7 @@ const Workspace: FC = () => {
           checklistDone: activeTask.checklistDone,
           checklistTotal: activeTask.checklistTotal,
           ticketId: activeTask.ticketId,
+          users: activeTask.users,
         },
         index,
       ),