check list

src/pages/taskmanager/components/task-detail/TaskDetailModal.tsx

@@ -150,7 +150,11 @@ const TaskDetailModal: FC<Props> = ({ open, task, statusLabel, onClose }) => {
 
           <AttachmentList attachments={taskDetail?.attachments} />
 
-          <CheckLists checklists={taskDetail?.checklists} />
+          <CheckLists
+            checkListItems={taskDetail?.checkListItems}
+            checkListItemCount={taskDetail?.checkListItemCount}
+            completedCheckListItemCount={taskDetail?.completedCheckListItemCount}
+          />
         </>
       )}
     </DefaulModal>

src/pages/taskmanager/components/task-detail/TaskDetailToolbar.tsx

@@ -9,9 +9,7 @@ import type DateObject from "react-date-object";
 import DateObjectClass from "react-date-object";
 import persian from "react-date-object/calendars/persian";
 import persian_fa from "react-date-object/locales/persian_fa";
-import { DEFAULT_CHECKLISTS } from "./checklist/constants";
 import TaskDetailChecklistPopover from "./checklist/TaskDetailChecklistPopover";
-import type { TaskChecklist } from "./checklist/types";
 import TaskDetailLabelsPopover from "./labels/TaskDetailLabelsPopover";
 import type { LabelsView, TaskLabel } from "./labels/types";
 import TaskDetailActionBar from "./TaskDetailActionBar";
@@ -19,7 +17,7 @@ import TaskDetailMetadataPreview from "./TaskDetailMetadataPreview";
 import type { TaskDetailTab } from "./types";
 import TaskDetailUsersPopover from "./users/TaskDetailUsersPopover";
 import type { TaskDetailType } from "../../task/types/TaskTypes";
-import { useCreateTaskRemark, useUpdateTask } from "../../task/hooks/useTaskData";
+import { useCreateCheckListItem, useCreateTaskRemark, useUpdateTask } from "../../task/hooks/useTaskData";
 import { ErrorType } from "../../../../helpers/types";
 
 type Props = {
@@ -38,13 +36,13 @@ const parseDate = (value?: string): DateObject | null => {
 const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, taskId }) => {
   const { t } = useTranslation("global");
   const createTaskRemark = useCreateTaskRemark();
+  const createCheckListItem = useCreateCheckListItem();
   const updateTask = useUpdateTask();
   const getUsers = useGetUsers("");
   const [labelsView, setLabelsView] = useState<LabelsView>("list");
   const [labels, setLabels] = useState<TaskLabel[]>([]);
   const [selectedLabelIds, setSelectedLabelIds] = useState<Set<string>>(new Set());
   const [selectedUserIds, setSelectedUserIds] = useState<Set<string>>(new Set());
-  const [checklists, setChecklists] = useState<TaskChecklist[]>(DEFAULT_CHECKLISTS);
   const [startDate, setStartDate] = useState<DateObject | null>(DEFAULT_DATE_RANGE.startDate);
   const [endDate, setEndDate] = useState<DateObject | null>(DEFAULT_DATE_RANGE.endDate);
 
@@ -67,10 +65,6 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
       setSelectedUserIds(new Set());
     }
 
-    if (taskDetail.checklists?.length) {
-      setChecklists(taskDetail.checklists.map((checklist) => ({ id: checklist.id, title: checklist.title })));
-    }
-
     const parsedStartDate = parseDate(taskDetail.startDate);
     const parsedEndDate = parseDate(taskDetail.endDate);
     if (parsedStartDate) setStartDate(parsedStartDate);
@@ -188,13 +182,22 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
     if (isChecklistOpen) onTabChange("checklist");
   };
 
-  const handleChecklistCreate = (title: string, _copyFromId: string) => {
-    const newChecklist: TaskChecklist = {
-      id: crypto.randomUUID(),
-      title,
-    };
-    setChecklists((prev) => [...prev, newChecklist]);
+  const handleChecklistCreate = (title: string) => {
+    const effectiveTaskId = taskId || taskDetail?.id;
+    if (!effectiveTaskId) return;
+
+    createCheckListItem.mutate(
+      { title, isDone: false, taskId: effectiveTaskId },
+      {
+        onSuccess: () => {
           handleChecklistClose();
+          toast.success(t("success"));
+        },
+        onError: (error: ErrorType) => {
+          toast.error(error.response?.data?.error.message[0]);
+        },
+      },
+    );
   };
 
   const handleAttachmentClose = () => {
@@ -247,9 +250,9 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
         checklistPopover={
           isChecklistOpen ? (
             <TaskDetailChecklistPopover
-              checklists={checklists}
               onClose={handleChecklistClose}
               onSubmit={handleChecklistCreate}
+              isSubmitting={createCheckListItem.isPending}
             />
           ) : null
         }

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

@@ -1,26 +1,31 @@
 import { Edit } from "iconsax-react";
 import ProgressBar from "../../../../../components/ProgressBar";
 import TrashWithConfrim from "../../../../../components/TrashWithConfrim";
-import type { TaskChecklistType } from "../../../task/types/TaskTypes";
+import type { TaskChecklistItemType } from "../../../task/types/TaskTypes";
 import ChecklistItem from "./ChecklistItem";
 
 type Props = {
-  checklists?: TaskChecklistType[];
+  checkListItems?: TaskChecklistItemType[];
+  checkListItemCount?: number;
+  completedCheckListItemCount?: number;
 };
 
-const CheckLists = ({ checklists = [] }: Props) => {
-  const items = checklists.flatMap((checklist) =>
-    checklist.items.map((item) => ({
+const CheckLists = ({
+  checkListItems = [],
+  checkListItemCount,
+  completedCheckListItemCount,
+}: Props) => {
+  const items = checkListItems.map((item) => ({
     id: item.id,
     title: item.title,
     checked: item.isDone,
-    })),
-  );
+  }));
 
-  const doneCount = items.filter((item) => item.checked).length;
-  const progress = items.length > 0 ? Math.round((doneCount / items.length) * 100) : 0;
+  const totalCount = checkListItemCount ?? items.length;
+  const doneCount = completedCheckListItemCount ?? items.filter((item) => item.checked).length;
+  const progress = totalCount > 0 ? Math.round((doneCount / totalCount) * 100) : 0;
 
-  if (checklists.length === 0) return null;
+  if (checkListItems.length === 0) return null;
 
   return (
     <div className="mt-6">

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

@@ -3,26 +3,21 @@ import { type FC, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Button from "../../../../../components/Button";
 import Input from "../../../../../components/Input";
-import Select from "../../../../../components/Select";
-import type { TaskChecklist } from "./types";
 
 type Props = {
-  checklists: TaskChecklist[];
   onClose: () => void;
-  onSubmit: (title: string, copyFromId: string) => void;
+  onSubmit: (title: string) => void;
+  isSubmitting?: boolean;
 };
 
-const TaskDetailChecklistForm: FC<Props> = ({ checklists, onClose, onSubmit }) => {
+const TaskDetailChecklistForm: FC<Props> = ({ onClose, onSubmit, isSubmitting = false }) => {
   const { t } = useTranslation("global");
   const [title, setTitle] = useState("");
-  const [copyFromId, setCopyFromId] = useState("");
-
-  const copyFromItems = [{ value: "", label: t("taskmanager.task_detail.none") }, ...checklists.map((checklist) => ({ value: checklist.id, label: checklist.title }))];
 
   const handleSubmit = () => {
     const trimmed = title.trim();
     if (!trimmed) return;
-    onSubmit(trimmed, copyFromId);
+    onSubmit(trimmed);
   };
 
   return (
@@ -36,20 +31,16 @@ const TaskDetailChecklistForm: FC<Props> = ({ checklists, onClose, onSubmit }) =
 
       <Input label={t("taskmanager.task_detail.label_title")} value={title} onChange={(e) => setTitle(e.target.value)} className="h-8 bg-white/63 border-white" labelClassName="text-xs" />
 
-      <Select
-        label={t("taskmanager.task_detail.copy_from")}
-        labelClassName="text-xs"
-        value={copyFromId}
-        onChange={(e) => setCopyFromId(e.target.value)}
-        items={copyFromItems}
-        className="h-8 bg-white/63 border-white text-xs rounded-xl"
-      />
-
       <div className="flex justify-end gap-2">
         <Button type="button" onClick={onClose} className="h-8 bg-[#E8E4F0] text-[#292D32] rounded-xl text-xs w-[95px]">
           {t("cancel")}
         </Button>
-        <Button type="button" onClick={handleSubmit} disabled={!title.trim()} className="h-8 bg-[#292D32] text-white rounded-xl text-xs disabled:opacity-50 w-[95px]">
+        <Button
+          type="button"
+          onClick={handleSubmit}
+          disabled={!title.trim() || isSubmitting}
+          className="h-8 bg-[#292D32] text-white rounded-xl text-xs disabled:opacity-50 w-[95px]"
+        >
           {t("save")}
         </Button>
       </div>

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

@@ -1,15 +1,14 @@
 import { type FC } from "react";
 import TaskDetailChecklistForm from "./TaskDetailChecklistForm";
-import type { TaskChecklist } from "./types";
 
 type Props = {
-  checklists: TaskChecklist[];
   onClose: () => void;
-  onSubmit: (title: string, copyFromId: string) => void;
+  onSubmit: (title: string) => void;
+  isSubmitting?: boolean;
 };
 
-const TaskDetailChecklistPopover: FC<Props> = ({ checklists, onClose, onSubmit }) => {
-  return <TaskDetailChecklistForm checklists={checklists} onClose={onClose} onSubmit={onSubmit} />;
+const TaskDetailChecklistPopover: FC<Props> = ({ onClose, onSubmit, isSubmitting }) => {
+  return <TaskDetailChecklistForm onClose={onClose} onSubmit={onSubmit} isSubmitting={isSubmitting} />;
 };
 
 export default TaskDetailChecklistPopover;

src/pages/taskmanager/components/task-detail/checklist/constants.ts

@@ -1,6 +0,0 @@
-import type { TaskChecklist } from "./types";
-
-export const DEFAULT_CHECKLISTS: TaskChecklist[] = [
-  { id: "1", title: "چک لیست پروژه" },
-  { id: "2", title: "چک لیست انتشار" },
-];

src/pages/taskmanager/components/task-detail/checklist/types.ts

@@ -1,4 +0,0 @@
-export type TaskChecklist = {
-  id: string;
-  title: string;
-};

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

@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as api from "../service/TaskService";
-import { CreateTaskRemarkType, CreateTaskType, UpdateTaskType } from "../types/TaskTypes";
+import { CreateCheckListItemType, CreateTaskRemarkType, CreateTaskType, UpdateTaskType } from "../types/TaskTypes";
 
 export const useGetTaskDetail = (id: string, enabled = true) => {
   return useQuery({
@@ -57,3 +57,15 @@ export const useCreateTaskRemark = () => {
     },
   });
 };
+
+export const useCreateCheckListItem = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (variables: CreateCheckListItemType) => api.createCheckListItem(variables),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["task-detail", variables.taskId] });
+      queryClient.invalidateQueries({ queryKey: ["project"] });
+    },
+  });
+};

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

@@ -1,5 +1,7 @@
 import axios from "../../../../config/axios";
 import {
+  CreateCheckListItemResponse,
+  CreateCheckListItemType,
   CreateTaskRemarkResponse,
   CreateTaskRemarkType,
   CreateTaskType,
@@ -31,3 +33,8 @@ export const createTaskRemark = async (params: CreateTaskRemarkType): Promise<Cr
   const { data } = await axios.post(`/task-manager/remarks`, params);
   return data;
 };
+
+export const createCheckListItem = async (params: CreateCheckListItemType): Promise<CreateCheckListItemResponse> => {
+  const { data } = await axios.post(`/task-manager/check-list-items`, params);
+  return data;
+};

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

@@ -47,6 +47,16 @@ export type TaskChecklistItemType = {
   isDone: boolean;
 };
 
+export type CreateCheckListItemType = {
+  title: string;
+  isDone: boolean;
+  taskId: string;
+};
+
+export interface CreateCheckListItemResponse extends IResponse<{ checkListItem: TaskChecklistItemType }> {
+  statusCode: number;
+}
+
 export type TaskChecklistType = {
   id: string;
   title: string;
@@ -63,17 +73,22 @@ export type TaskAttachmentType = {
 
 export type TaskDetailType = {
   id: string;
+  createdAt: string;
+  updatedAt: string;
   title: string;
-  description?: string;
+  description?: string | null;
+  color?: string | null;
   taskPhaseId: string;
-  order: number;
-  projectId: string;
-  startDate?: string;
-  endDate?: string;
+  order?: number;
+  projectId?: string;
+  startDate?: string | null;
+  endDate?: string | null;
   labels?: TaskLabelType[];
   remarks?: TaskLabelType[];
   users?: TaskUserType[];
-  checklists?: TaskChecklistType[];
+  checkListItems?: TaskChecklistItemType[];
+  checkListItemCount?: number;
+  completedCheckListItemCount?: number;
   attachments?: TaskAttachmentType[];
 };