Setting design

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

@@ -1,5 +1,7 @@
 import { type FC, useState } from "react";
 import TaskDetailAttachmentPopover from "./attachment/TaskDetailAttachmentPopover";
+import TaskDetailDatePopover from "./date/TaskDetailDatePopover";
+import type DateObject from "react-date-object";
 import { DEFAULT_CHECKLISTS } from "./checklist/constants";
 import TaskDetailChecklistPopover from "./checklist/TaskDetailChecklistPopover";
 import type { TaskChecklist } from "./checklist/types";
@@ -30,6 +32,7 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
   const isUsersOpen = activeTab === "users";
   const isChecklistOpen = activeTab === "checklist";
   const isAttachmentOpen = activeTab === "attachment";
+  const isDateOpen = activeTab === "date";
 
   const handleTabChange = (tab: TaskDetailTab) => {
     if (tab === "labels" && activeTab !== "labels") {
@@ -94,6 +97,14 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
     handleAttachmentClose();
   };
 
+  const handleDateClose = () => {
+    if (isDateOpen) onTabChange("date");
+  };
+
+  const handleDateSubmit = (_data: { startDate: DateObject | null; endDate: DateObject | null }) => {
+    handleDateClose();
+  };
+
   return (
     <div className="relative">
       <TaskDetailActionBar
@@ -130,6 +141,11 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
             <TaskDetailAttachmentPopover onClose={handleAttachmentClose} onSubmit={handleAttachmentCreate} />
           ) : null
         }
+        datePopover={
+          isDateOpen ? (
+            <TaskDetailDatePopover onClose={handleDateClose} onSubmit={handleDateSubmit} />
+          ) : null
+        }
       />
 
       <TaskDetailMetadataPreview selectedLabels={selectedLabels} selectedUsers={selectedUsers} />