design dark mode add-doctor & change field time to date-picker

app/component/TimePickerField.js

@@ -1,8 +1,16 @@
 import { useState } from "react";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
+import { handleTwoLength } from "@/helper";
 
-function TimePickerField({ dataChange, disable, setData, timeStart, data }) {
+function TimePickerField({
+  dataChange,
+  isVacation,
+  disable,
+  setData,
+  timeStart,
+  data,
+}) {
   const [value, setValue] = useState("00:00");
 
   return (
@@ -10,7 +18,7 @@ function TimePickerField({ dataChange, disable, setData, timeStart, data }) {
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <TimePicker
           ampm={false}
-          disabled={disable}
+          disabled={isVacation}
           format="hh:mm"
           className="!w-full"
           shouldDisableTime={(timeValue, clockType) => {
@@ -32,8 +40,6 @@ function TimePickerField({ dataChange, disable, setData, timeStart, data }) {
           onChange={(e) => {
             const hours = e.$H;
             const minute = e.$m;
-            const handleTwoLength = (value) =>
-              String(value).length === 1 ? `0${value}` : value;
             const newValue = `${handleTwoLength(hours)}:${handleTwoLength(
               minute
             )}`;

app/component/TimePickerInput.js

@@ -0,0 +1,60 @@
+import { useState } from "react";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
+import { handleTwoLength } from "@/helper";
+
+function TimePickerInput() {
+  const [value, setValue] = useState("00:00");
+
+  return (
+    <div className="w-full relative">
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <TimePicker
+          ampm={false}
+          format="hh:mm"
+          className="!w-full"
+          views={["hours", "minutes"]}
+          placeholder="انتخاب کنید..."
+          onChange={(e) => {
+            const hours = e.$H;
+            const minute = e.$m;
+            const newValue = `${handleTwoLength(hours)}:${handleTwoLength(
+              minute
+            )}`;
+            setValue(newValue);
+          }}
+          sx={{
+            "& .MuiFormLabel-root": {
+              top: "-4px !important",
+            },
+            "& .MuiInputBase-input": { padding: "12.5px 14px" },
+            "& .MuiOutlinedInput-notchedOutline": {
+              border: "1px solid #D7D7D7 !important",
+            },
+            "& .MuiInputBase-root": {
+              borderRadius: "8px !important",
+            },
+            ".Mui-focused": {
+              "& .MuiOutlinedInput-notchedOutline": {
+                border: "1px solid #5559CE !important",
+                transition: "0.5s all",
+              },
+            },
+            "& .muirtl-jv54yp-MuiList-root-MuiMultiSectionDigitalClockSection-root::after":
+              {
+                display: "none !important",
+              },
+          }}
+        />
+        <p
+          className="absolute dark:bg-[#222433] dark:!text-[#A1A1A1] flex items-center right-[4px] h-[44px] py-[8px] px-[8px] 
+            w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2"
+        >
+          {value}
+        </p>
+      </LocalizationProvider>
+    </div>
+  );
+}
+
+export default TimePickerInput;

app/globals.css

@@ -664,6 +664,10 @@ html {
   width: 464px !important;
 }
 
+.sm-datepicker .panel-jalaali {
+  width: 300px !important;
+}
+
 .day-label-bar,
 .panel-header-inner,
 .days-body {

components/layoutPanel/userDetail/Date.js

@@ -4,7 +4,7 @@ import { DatePicker } from "jalaali-react-date-picker";
 
 function Date() {
   return (
-    <div className="flex justify-center">
+    <div className="flex justify-center sm-datepicker">
       <DatePicker
         nextIcon={<></>}
         prevIcon={<></>}

components/panel/addDoctor/listMenu/specialDays/Form.js

@@ -7,6 +7,7 @@ import FieldIcon from "@/app/component/FieldIcon";
 import { Button } from "@mui/material";
 import PlusBlueP from "@/components/icons/PlusBlueP";
 import ClockP from "@/components/icons/ClockP";
+import TimePickerInput from "@/app/component/TimePickerInput";
 
 function Form() {
   const [data, setData] = useState({
@@ -38,7 +39,7 @@ function Form() {
             list={turnsPerDay}
           />
         </ContentText>
-        <ContentText text="تعداد نوبت در هر روز">
+        <ContentText text="زمان هر نوبت">
           <AutoCompleteSelect
             updateData={updateSelect}
             label="انتخاب کنید..."
@@ -50,7 +51,7 @@ function Form() {
         <div className="hidden lg:flex min-w-[152px]"></div>
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:flex items-end justify-center gap-[16px] mt-[32px]">
-        <ContentText text="تعداد نوبت در هر روز">
+        <ContentText text="روز هفته">
           <AutoCompleteSelect
             updateData={updateSelect}
             label="انتخاب کنید..."
@@ -59,7 +60,7 @@ function Form() {
           />
         </ContentText>
         <ContentText text="زمان شروع">
-          <FieldIcon
+          <TimePickerInput
             placeholder="انتخاب کنید..."
             changeData={changeData}
             icon={<ClockP />}
@@ -67,7 +68,7 @@ function Form() {
           />
         </ContentText>
         <ContentText text="زمان پایان">
-          <FieldIcon
+          <TimePickerInput
             placeholder="انتخاب کنید..."
             changeData={changeData}
             icon={<ClockP />}

components/panel/addDoctor/listMenu/workingDays/modal/ContentModal.js

@@ -14,8 +14,13 @@ function ContentModal({
   handleClose,
 }) {
   const [value, setValue] = useState(0);
+  const [isVacation, setIsVacation] = useState(false);
 
-  const handleChange = (event) => setValue(+event.target.value);
+  const handleChange = (event) => {
+    const valueRadio = +event.target.value;
+    setIsVacation(valueRadio);
+    setValue(valueRadio);
+  };
 
   return (
     <Modal open={open} onClose={handleClose}>
@@ -36,6 +41,7 @@ function ContentModal({
           <Radios value={value} handleChange={handleChange} />
           <Form
             handleClose={handleClose}
+            isVacation={isVacation}
             dataChange={dataChange}
             setData={setData}
             value={value}

components/panel/addDoctor/listMenu/workingDays/modal/Form.js

@@ -2,27 +2,38 @@ import { Button } from "@mui/material";
 import ContentText from "@/components/panel/ContentText";
 import TimePickerField from "@/app/component/TimePickerField";
 
-function Form({ handleClose, setData, dataChange, data, value }) {
+function Form({ handleClose, isVacation, setData, dataChange, data, value }) {
+  // console.log(isVacation);
+
   return (
     <div className="flex flex-col gap-[32px] md:gap-[36px] lg:gap-[40px] min-w-fit md:min-w-[420px]">
-      <ContentText text="زمان شروع">
-        <TimePickerField
-          dataChange={dataChange}
-          disable={value === 1}
-          setData={setData}
-          timeStart={true}
-          data={data}
-        />
-      </ContentText>
-      <ContentText text="زمان پایان">
-        <TimePickerField
-          dataChange={dataChange}
-          disable={value === 1}
-          setData={setData}
-          timeStart={false}
-          data={data}
-        />
-      </ContentText>
+      <div className="flex relative flex-col gap-[32px] md:gap-[36px] lg:gap-[40px]">
+        <ContentText text="زمان شروع">
+          <TimePickerField
+            dataChange={dataChange}
+            isDisable={isVacation}
+            disable={value === 1}
+            setData={setData}
+            timeStart={true}
+            data={data}
+          />
+        </ContentText>
+        <ContentText text="زمان پایان">
+          <TimePickerField
+            dataChange={dataChange}
+            isDisable={isVacation}
+            disable={value === 1}
+            setData={setData}
+            timeStart={false}
+            data={data}
+          />
+        </ContentText>
+        <div
+          className={`
+            absolute transition-all duration-500 right-0 top-0 w-full h-full bg-[rgba(255,255,255,.85)] dark:bg-[rgba(34,36,51,.85)]
+            ${isVacation ? "max-w-full" : "max-w-0"}`}
+        ></div>
+      </div>
       <div className="flex flex-wrap items-center justify-center gap-[16px]">
         <Button
           variant="outlined"

helper/index.js

@@ -18,3 +18,6 @@ export const convertToJalali = (date) => {
 
   return `${jalaliYear}/${jalaliMonth}/${jalaliDay}`;
 };
+
+export const handleTwoLength = (value) =>
+  String(value).length === 1 ? `0${value}` : value;