design dark mode turns & add-doctor & account & layout and components MUI

components/panel/turns/head/Date.js

@@ -1,4 +1,4 @@
-import { Button, ButtonGroup } from "@mui/material";
+import FilterDate from "./FilterDate";
 
 function Date() {
   return (
@@ -6,20 +6,7 @@ function Date() {
       <p className="text-[#616161] text-[14px] font-normal md:hidden dark:text-[#a1a1a1]">
         انتخاب بازه زمانی
       </p>
-      <ButtonGroup variant="outlined">
-        <Button
-          className="!border-[#EFEFEF] dark:!border-[#343645] !bg-[#FFF] dark:!bg-[#222433] !py-[4.5px] !text-[#7E7E7E] 
-        dark:!text-[#A1A1A1]  !text-[16px] !font-normal !w-[115px]"
-        >
-          از تاریخ
-        </Button>
-        <Button
-          className="!border-[#EFEFEF] dark:!border-[#343645] !bg-[#FFF] dark:!bg-[#222433] !py-[4.5px] !text-[#7E7E7E] 
-        dark:!text-[#A1A1A1]  !text-[16px] !font-normal !w-[115px]"
-        >
-          تا تاریخ
-        </Button>
-      </ButtonGroup>
+      <FilterDate />
     </div>
   );
 }

components/panel/turns/head/FilterDate.js

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { convertToJalali } from "@/helper";
+import { ButtonGroup } from "@mui/material";
+import PopoverDate from "@/app/component/PopoverDate";
+
+function FilterDate() {
+  const [date, setDate] = useState({
+    start: null,
+    end: null,
+  });
+
+  const updateDate = (newDate, type) => {
+    setDate({
+      ...date,
+      [type]: newDate,
+    });
+  };
+
+  return (
+    <ButtonGroup variant="outlined">
+      <PopoverDate
+        type="start"
+        date={date.start}
+        updateDate={updateDate}
+        text={date.start ? convertToJalali(date.start) : "از تاریخ"}
+      />
+      <PopoverDate
+        type="end"
+        date={date.end}
+        updateDate={updateDate}
+        text={date.end ? convertToJalali(date.end) : "تا تاریخ"}
+      />
+    </ButtonGroup>
+  );
+}
+
+export default FilterDate;