delete task and update task

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

@@ -1,8 +1,11 @@
-import { type FC, useState } from "react";
+import { type FC, useEffect, useState } from "react";
 import TaskDetailAttachmentPopover from "./attachment/TaskDetailAttachmentPopover";
 import { DEFAULT_DATE_RANGE } from "./date/constants";
 import TaskDetailDatePopover from "./date/TaskDetailDatePopover";
 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";
@@ -14,13 +17,21 @@ import TaskDetailMetadataPreview from "./TaskDetailMetadataPreview";
 import type { TaskDetailTab } from "./types";
 import { DEFAULT_USERS } from "./users/constants";
 import TaskDetailUsersPopover from "./users/TaskDetailUsersPopover";
+import type { TaskDetailType } from "../../task/types/TaskTypes";
 
 type Props = {
   activeTab: TaskDetailTab | null;
   onTabChange: (tab: TaskDetailTab) => void;
+  taskDetail?: TaskDetailType;
 };
 
-const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
+const parseDate = (value?: string): DateObject | null => {
+  if (!value) return null;
+  const date = new DateObjectClass({ date: value, calendar: persian, locale: persian_fa });
+  return date.isValid ? date : null;
+};
+
+const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail }) => {
   const [labelsView, setLabelsView] = useState<LabelsView>("list");
   const [labels, setLabels] = useState<TaskLabel[]>(DEFAULT_LABELS);
   const [selectedLabelIds, setSelectedLabelIds] = useState<Set<string>>(new Set(["1"]));
@@ -29,8 +40,36 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
   const [startDate, setStartDate] = useState<DateObject | null>(DEFAULT_DATE_RANGE.startDate);
   const [endDate, setEndDate] = useState<DateObject | null>(DEFAULT_DATE_RANGE.endDate);
 
+  useEffect(() => {
+    if (!taskDetail) return;
+
+    if (taskDetail.labels?.length) {
+      setLabels(taskDetail.labels);
+      setSelectedLabelIds(new Set(taskDetail.labels.map((label) => label.id)));
+    }
+
+    if (taskDetail.users?.length) {
+      setSelectedUserIds(new Set(taskDetail.users.map((user) => user.id)));
+    }
+
+    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);
+    if (parsedEndDate) setEndDate(parsedEndDate);
+  }, [taskDetail]);
+
   const selectedLabels = labels.filter((label) => selectedLabelIds.has(label.id));
-  const selectedUsers = DEFAULT_USERS.filter((user) => selectedUserIds.has(user.id));
+  const users = taskDetail?.users?.length
+    ? taskDetail.users.map((user) => ({
+        id: user.id,
+        name: `${user.firstName} ${user.lastName}`.trim(),
+      }))
+    : DEFAULT_USERS;
+  const selectedUsers = users.filter((user) => selectedUserIds.has(user.id));
   const isLabelsOpen = activeTab === "labels";
   const isUsersOpen = activeTab === "users";
   const isChecklistOpen = activeTab === "checklist";
@@ -129,7 +168,7 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
         }
         usersPopover={
           isUsersOpen ? (
-            <TaskDetailUsersPopover users={DEFAULT_USERS} selectedIds={selectedUserIds} onToggle={handleUserToggle} />
+            <TaskDetailUsersPopover users={users} selectedIds={selectedUserIds} onToggle={handleUserToggle} />
           ) : null
         }
         checklistPopover={