Create check list

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

@@ -0,0 +1,60 @@
+import { ArrowRight2 } from "iconsax-react";
+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;
+};
+
+const TaskDetailChecklistForm: FC<Props> = ({ checklists, onClose, onSubmit }) => {
+  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);
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center justify-center relative">
+        <Button type="button" onClick={onClose} className="absolute right-0 size-7 bg-transparent text-inherit w-auto h-auto p-0 border-0 rounded-none shadow-none" aria-label={t("back")}>
+          <ArrowRight2 size={16} color="#292D32" />
+        </Button>
+        <h3 className="text-xs font-bold">{t("taskmanager.task_detail.checklist")}</h3>
+      </div>
+
+      <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]">
+          {t("save")}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default TaskDetailChecklistForm;

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

@@ -0,0 +1,19 @@
+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;
+};
+
+const TaskDetailChecklistPopover: FC<Props> = ({ checklists, onClose, onSubmit }) => {
+  return (
+    <div className="absolute top-full right-0 mt-2 z-30 w-[300px] bg-white/90 backdrop-blur-md rounded-2xl p-4 shadow-lg border border-white/80">
+      <TaskDetailChecklistForm checklists={checklists} onClose={onClose} onSubmit={onSubmit} />
+    </div>
+  );
+};
+
+export default TaskDetailChecklistPopover;

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

@@ -0,0 +1,6 @@
+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

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