delete task and update task

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

@@ -1,14 +1,26 @@
 import { Edit } from "iconsax-react";
 import ProgressBar from "../../../../../components/ProgressBar";
 import TrashWithConfrim from "../../../../../components/TrashWithConfrim";
+import type { TaskChecklistType } from "../../../task/types/TaskTypes";
 import ChecklistItem from "./ChecklistItem";
 
-const CheckLists = () => {
-  const items = [
-    { id: "1", title: "آیتم ۱", checked: true },
-    { id: "2", title: "آیتم ۱", checked: true },
-    { id: "3", title: "آیتم ۱", checked: true },
-  ];
+type Props = {
+  checklists?: TaskChecklistType[];
+};
+
+const CheckLists = ({ checklists = [] }: Props) => {
+  const items = checklists.flatMap((checklist) =>
+    checklist.items.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;
+
+  if (checklists.length === 0) return null;
 
   return (
     <div className="mt-6">
@@ -19,8 +31,8 @@ const CheckLists = () => {
       </div>
 
       <div className="mt-4 flex gap-2 items-center">
-        <div className="text-xs shrink-0">۲۵٪</div>
-        <ProgressBar value={25} />
+        <div className="text-xs shrink-0">{progress}٪</div>
+        <ProgressBar value={progress} />
       </div>
 
       <div className="mt-4 flex flex-col gap-2">