From 707908fe03ca44159df888944cc736effa34e1c5 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Wed, 17 Jun 2026 12:20:54 +0330
Subject: [PATCH] check list

---
 src/components/ProgressBar.tsx                | 18 ++++++++
 src/components/TrashWithConfrim.tsx           | 41 ++++++++----------
 .../task-detail/TaskDetailModal.tsx           |  3 ++
 .../task-detail/checklist/ChecklistItem.tsx   | 42 +++++++++++++++++++
 .../components/task-detail/checklist/List.tsx | 42 +++++++++++++++++++
 .../labels/TaskDetailLabelCheckbox.tsx        |  2 +-
 6 files changed, 123 insertions(+), 25 deletions(-)
 create mode 100644 src/components/ProgressBar.tsx
 create mode 100644 src/pages/taskmanager/components/task-detail/checklist/ChecklistItem.tsx
 create mode 100644 src/pages/taskmanager/components/task-detail/checklist/List.tsx

diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
new file mode 100644
index 0000000..1ba58e4
--- /dev/null
+++ b/src/components/ProgressBar.tsx
@@ -0,0 +1,18 @@
+import { type FC } from "react";
+
+type Props = {
+  value: number;
+  className?: string;
+};
+
+const ProgressBar: FC<Props> = ({ value, className = "" }) => {
+  const progress = Math.min(100, Math.max(0, value));
+
+  return (
+    <div className={`flex-1 h-[5px] rounded-full bg-white/40 flex overflow-hidden ${className}`}>
+      <div className="h-full rounded-full bg-black" style={{ width: `${progress}%` }} />
+    </div>
+  );
+};
+
+export default ProgressBar;
diff --git a/src/components/TrashWithConfrim.tsx b/src/components/TrashWithConfrim.tsx
index a04f3e2..3e189b2 100644
--- a/src/components/TrashWithConfrim.tsx
+++ b/src/components/TrashWithConfrim.tsx
@@ -1,30 +1,23 @@
-import { Trash } from 'iconsax-react'
-import { FC, useState } from 'react'
-import ModalConfrim from './ModalConfrim'
+import { Trash } from "iconsax-react";
+import { FC, useState } from "react";
+import ModalConfrim from "./ModalConfrim";
 
 interface Props {
-    onDelete: () => void,
-    isLoading?: boolean
+  onDelete: () => void;
+  isLoading?: boolean;
+  size?: number;
+  color?: string;
 }
 
-const TrashWithConfrim: FC<Props> = ({ onDelete, isLoading = false }) => {
-    const [isConfirm, setIsConfirm] = useState(false)
-    return (
-        <div>
-            <Trash
-                onClick={() => setIsConfirm(true)}
-                className='size-5'
-                color='#888'
-            />
+const TrashWithConfrim: FC<Props> = ({ onDelete, isLoading = false, size = 20, color = "#888" }) => {
+  const [isConfirm, setIsConfirm] = useState(false);
+  return (
+    <div>
+      <Trash onClick={() => setIsConfirm(true)} color={color} size={size} />
 
-            <ModalConfrim
-                isOpen={isConfirm}
-                close={() => setIsConfirm(false)}
-                onConfrim={() => onDelete()}
-                isLoading={isLoading}
-            />
-        </div>
-    )
-}
+      <ModalConfrim isOpen={isConfirm} close={() => setIsConfirm(false)} onConfrim={() => onDelete()} isLoading={isLoading} />
+    </div>
+  );
+};
 
-export default TrashWithConfrim
\ No newline at end of file
+export default TrashWithConfrim;
diff --git a/src/pages/taskmanager/components/task-detail/TaskDetailModal.tsx b/src/pages/taskmanager/components/task-detail/TaskDetailModal.tsx
index 029c52f..bc1e80c 100644
--- a/src/pages/taskmanager/components/task-detail/TaskDetailModal.tsx
+++ b/src/pages/taskmanager/components/task-detail/TaskDetailModal.tsx
@@ -1,6 +1,7 @@
 import { type FC, useEffect, useState } from "react";
 import DefaulModal from "../../../../components/DefaulModal";
 import type { Task } from "../../types";
+import CheckLists from "./checklist/List";
 import TaskDetailDescription from "./TaskDetailDescription";
 import TaskDetailHeader from "./TaskDetailHeader";
 import TaskDetailToolbar from "./TaskDetailToolbar";
@@ -41,6 +42,8 @@ const TaskDetailModal: FC<Props> = ({ open, task, statusLabel, onClose }) => {
       </div>
 
       <TaskDetailDescription value={description} onChange={setDescription} />
+
+      <CheckLists />
     </DefaulModal>
   );
 };
diff --git a/src/pages/taskmanager/components/task-detail/checklist/ChecklistItem.tsx b/src/pages/taskmanager/components/task-detail/checklist/ChecklistItem.tsx
new file mode 100644
index 0000000..1a04e45
--- /dev/null
+++ b/src/pages/taskmanager/components/task-detail/checklist/ChecklistItem.tsx
@@ -0,0 +1,42 @@
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
+import { More } from "iconsax-react";
+import { type FC } from "react";
+import TaskDetailLabelCheckbox from "../labels/TaskDetailLabelCheckbox";
+
+type Props = {
+  title: string;
+  checked: boolean;
+  onToggle: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+};
+
+const ChecklistItem: FC<Props> = ({ title, checked, onToggle, onEdit, onDelete }) => {
+  return (
+    <div className="flex gap-1 h-[27px] items-center">
+      <TaskDetailLabelCheckbox checked={checked} onToggle={onToggle} />
+
+      <div className="group flex justify-between flex-1 h-full hover:bg-white hover:bg-opacity-10 items-center px-2 relative">
+        <div className="text-xs">{title}</div>
+
+        <Popover className="relative">
+          <PopoverButton className="flex items-center opacity-0 group-hover:opacity-100 data-[open]:opacity-100 transition-opacity outline-none">
+            <More size={20} color="#000" />
+          </PopoverButton>
+
+          <PopoverPanel anchor="bottom end" className="z-[80] mt-1  rounded-[10px] bg-white shadow-md text-right p-3">
+            <button type="button" onClick={onEdit} className="w-full text-sm text-right">
+              ویرایش
+            </button>
+
+            <button type="button" onClick={onDelete} className="w-full mt-3 text-sm text-right text-[#FF0000]">
+              پاک کردن
+            </button>
+          </PopoverPanel>
+        </Popover>
+      </div>
+    </div>
+  );
+};
+
+export default ChecklistItem;
diff --git a/src/pages/taskmanager/components/task-detail/checklist/List.tsx b/src/pages/taskmanager/components/task-detail/checklist/List.tsx
new file mode 100644
index 0000000..a73c85f
--- /dev/null
+++ b/src/pages/taskmanager/components/task-detail/checklist/List.tsx
@@ -0,0 +1,42 @@
+import { Edit } from "iconsax-react";
+import ProgressBar from "../../../../../components/ProgressBar";
+import TrashWithConfrim from "../../../../../components/TrashWithConfrim";
+import ChecklistItem from "./ChecklistItem";
+
+const CheckLists = () => {
+  const items = [
+    { id: "1", title: "آیتم ۱", checked: true },
+    { id: "2", title: "آیتم ۱", checked: true },
+    { id: "3", title: "آیتم ۱", checked: true },
+  ];
+
+  return (
+    <div className="mt-6">
+      <div className="flex gap-2 items-center">
+        <div className="text-sm font-bold mt-px">چک لیست</div>
+        <Edit size={20} color="#0047FF" />
+        <TrashWithConfrim onDelete={() => {}} color="#FF0000" />
+      </div>
+
+      <div className="mt-4 flex gap-2 items-center">
+        <div className="text-xs shrink-0">۲۵٪</div>
+        <ProgressBar value={25} />
+      </div>
+
+      <div className="mt-4 flex flex-col gap-2">
+        {items.map((item) => (
+          <ChecklistItem
+            key={item.id}
+            title={item.title}
+            checked={item.checked}
+            onToggle={() => {}}
+            onEdit={() => {}}
+            onDelete={() => {}}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CheckLists;
diff --git a/src/pages/taskmanager/components/task-detail/labels/TaskDetailLabelCheckbox.tsx b/src/pages/taskmanager/components/task-detail/labels/TaskDetailLabelCheckbox.tsx
index 280a672..7e45d50 100644
--- a/src/pages/taskmanager/components/task-detail/labels/TaskDetailLabelCheckbox.tsx
+++ b/src/pages/taskmanager/components/task-detail/labels/TaskDetailLabelCheckbox.tsx
@@ -4,7 +4,7 @@ import { clx } from "../../../../../helpers/utils";
 type Props = {
   checked: boolean;
   onToggle: () => void;
-  ariaLabel: string;
+  ariaLabel?: string;
 };
 
 const TaskDetailLabelCheckbox: FC<Props> = ({ checked, onToggle, ariaLabel }) => {