update style default modal + added date in modal

src/components/DefaulModal.tsx

@@ -26,9 +26,9 @@ const DefaulModal: FC<Props> = (props: Props) => {
             {
                 props.open && (
                     <Fragment>
-                        <div style={{ maxWidth: props.width }} className='xl:justify-center xl:items-center items-end flex overflow-x-hidden  overflow-y-auto fixed inset-0 z-[60]  h-auto top-0 bottom-0 m-auto outline-none focus:outline-none xl:max-w-xl mx-auto'>
-                            <div className='relative xl:h-full h-[80%] bottom-0 left-0  flex xl:items-center sm:h-auto w-full xl:my-6 xl:p-2'>
-                                <div className='border-0 h-auto p-5 lg:min-w-full overflow-y-auto rounded-3xl rounded-b-none xl:rounded-b-3xl relative flex flex-col w-full modalGlass2  outline-none focus:outline-none'>
+                        <div style={{ maxWidth: props.width }} className='xl:justify-center xl:items-center items-end flex overflow-hidden fixed inset-0 z-[60] h-auto top-0 bottom-0 m-auto outline-none focus:outline-none xl:max-w-xl mx-auto'>
+                            <div className='relative max-h-[85vh] bottom-0 left-0 flex xl:items-center items-end w-full xl:my-6 xl:p-2'>
+                                <div className='border-0 max-h-[85vh] p-5 lg:min-w-full overflow-y-auto rounded-3xl rounded-b-none xl:rounded-b-3xl relative flex flex-col w-full modalGlass2 outline-none focus:outline-none'>
 
 
                                     {

src/langs/fa.json

@@ -995,6 +995,7 @@
       "user_management": "مدیریت کاربران",
       "checklist": "چک لیست",
       "attachment": "ضمیمه",
+      "date": "تاریخ",
       "date_settings": "تنظیمات تاریخ",
       "description": "توضیحات",
       "description_placeholder": "توضیحات خود را اضافه کنید",

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

@@ -1,20 +1,25 @@
 import { Add } from "iconsax-react";
 import { type FC } from "react";
+import type DateObject from "react-date-object";
 import { useTranslation } from "react-i18next";
 import AvatarImage from "../../../../assets/images/avatar_image.png";
+import { formatDateRange } from "./date/utils";
 import type { TaskLabel } from "./labels/types";
 import type { TaskUser } from "./users/types";
 
 type Props = {
   selectedLabels: TaskLabel[];
   selectedUsers: TaskUser[];
+  startDate: DateObject | null;
+  endDate: DateObject | null;
 };
 
-const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers }) => {
+const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, startDate, endDate }) => {
   const { t } = useTranslation("global");
+  const dateLabel = formatDateRange(startDate, endDate);
 
   return (
-    <div className="mt-4 grid grid-cols-2 gap-4">
+    <div className="mt-7 flex gap-10">
       <div>
         <div className="text-xs font-medium mb-2">{t("taskmanager.task_detail.labels")}</div>
         <div className="flex items-center gap-2 flex-wrap">
@@ -32,7 +37,10 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers })
             className="size-7 rounded-lg border border-[#D0D0D0] bg-white/60 flex items-center justify-center cursor-pointer"
             aria-label={t("taskmanager.task_detail.new_label")}
           >
-            <Add size={14} color="#292D32" />
+            <Add
+              size={14}
+              color="#292D32"
+            />
           </button>
         </div>
       </div>
@@ -41,8 +49,15 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers })
         <div className="text-xs font-medium mb-2">{t("taskmanager.users")}</div>
         <div className="flex items-center gap-2 flex-wrap">
           {selectedUsers.map((user) => (
-            <div key={user.id} className="size-8 rounded-full bg-[#D0D0D0] overflow-hidden">
-              <img src={user.avatar ?? AvatarImage} alt={user.name} className="size-full object-cover" />
+            <div
+              key={user.id}
+              className="size-8 rounded-full bg-[#D0D0D0] overflow-hidden"
+            >
+              <img
+                src={user.avatar ?? AvatarImage}
+                alt={user.name}
+                className="size-full object-cover"
+              />
             </div>
           ))}
           <button
@@ -50,10 +65,18 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers })
             className="size-7 rounded-full border border-[#D0D0D0] bg-white/60 flex items-center justify-center cursor-pointer"
             aria-label={t("taskmanager.users")}
           >
-            <Add size={14} color="#292D32" />
+            <Add
+              size={14}
+              color="#292D32"
+            />
           </button>
         </div>
       </div>
+
+      <div>
+        <div className="text-xs font-medium mb-2">{t("taskmanager.task_detail.date")}</div>
+        {dateLabel ? <span className="inline-flex items-center h-7 px-3 rounded-lg text-xs font-medium bg-[#E8E8E8] text-[#292D32]">{dateLabel}</span> : null}
+      </div>
     </div>
   );
 };

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

@@ -1,5 +1,6 @@
 import { type FC, 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 { DEFAULT_CHECKLISTS } from "./checklist/constants";
@@ -25,6 +26,8 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
   const [selectedLabelIds, setSelectedLabelIds] = useState<Set<string>>(new Set(["1"]));
   const [selectedUserIds, setSelectedUserIds] = useState<Set<string>>(new Set(["1"]));
   const [checklists, setChecklists] = useState<TaskChecklist[]>(DEFAULT_CHECKLISTS);
+  const [startDate, setStartDate] = useState<DateObject | null>(DEFAULT_DATE_RANGE.startDate);
+  const [endDate, setEndDate] = useState<DateObject | null>(DEFAULT_DATE_RANGE.endDate);
 
   const selectedLabels = labels.filter((label) => selectedLabelIds.has(label.id));
   const selectedUsers = DEFAULT_USERS.filter((user) => selectedUserIds.has(user.id));
@@ -101,7 +104,9 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
     if (isDateOpen) onTabChange("date");
   };
 
-  const handleDateSubmit = (_data: { startDate: DateObject | null; endDate: DateObject | null }) => {
+  const handleDateSubmit = (data: { startDate: DateObject | null; endDate: DateObject | null }) => {
+    setStartDate(data.startDate);
+    setEndDate(data.endDate);
     handleDateClose();
   };
 
@@ -148,7 +153,12 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
         }
       />
 
-      <TaskDetailMetadataPreview selectedLabels={selectedLabels} selectedUsers={selectedUsers} />
+      <TaskDetailMetadataPreview
+        selectedLabels={selectedLabels}
+        selectedUsers={selectedUsers}
+        startDate={startDate}
+        endDate={endDate}
+      />
     </div>
   );
 };

src/pages/taskmanager/components/task-detail/date/TaskDetailDateForm.tsx

@@ -7,17 +7,13 @@ import { Calendar } from "react-multi-date-picker";
 import Button from "../../../../../components/Button";
 import TaskDetailLabelCheckbox from "../labels/TaskDetailLabelCheckbox";
 import type { TaskDateField } from "./types";
+import { formatDateLabel } from "./utils";
 
 type Props = {
   onClose: () => void;
   onSubmit: (data: { startDate: DateObject | null; endDate: DateObject | null }) => void;
 };
 
-const formatDateLabel = (date: DateObject | null) => {
-  if (!date) return "";
-  return date.convert(persian, persian_fa).format("D MMMM");
-};
-
 const TaskDetailDateForm: FC<Props> = ({ onClose, onSubmit }) => {
   const { t } = useTranslation("global");
   const [startDate, setStartDate] = useState<DateObject | null>(null);

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

@@ -0,0 +1,8 @@
+import DateObject from "react-date-object";
+import persian from "react-date-object/calendars/persian";
+import persian_fa from "react-date-object/locales/persian_fa";
+
+export const DEFAULT_DATE_RANGE = {
+  startDate: new DateObject({ calendar: persian, locale: persian_fa, year: 1404, month: 2, day: 1 }),
+  endDate: new DateObject({ calendar: persian, locale: persian_fa, year: 1404, month: 2, day: 20 }),
+};

src/pages/taskmanager/components/task-detail/date/utils.ts

@@ -0,0 +1,16 @@
+import DateObject from "react-date-object";
+import persian from "react-date-object/calendars/persian";
+import persian_fa from "react-date-object/locales/persian_fa";
+
+export const formatDateLabel = (date: DateObject | null) => {
+  if (!date) return "";
+  return date.convert(persian, persian_fa).format("D MMMM");
+};
+
+export const formatDateRange = (startDate: DateObject | null, endDate: DateObject | null) => {
+  const start = formatDateLabel(startDate);
+  const end = formatDateLabel(endDate);
+
+  if (start && end) return `${start} - ${end}`;
+  return start || end;
+};