add prettier formatter to all file

app/component/date/datePicker/ButtonDate.js

@@ -1,16 +1,16 @@
-import { Button as ButtonMUI } from '@mui/material'
-import React from 'react'
+import { Button as ButtonMUI } from "@mui/material";
+import React from "react";
 
 function ButtonDate({ handleClick, id, text }) {
-    return (
-        <ButtonMUI
-            onClick={handleClick}
-            aria-describedby={id}
-            className="!border-[#E9ECEF] !text-[#6C757D]"
-        >
-            {text}
-        </ButtonMUI>
-    )
+  return (
+    <ButtonMUI
+      onClick={handleClick}
+      aria-describedby={id}
+      className="!border-[#E9ECEF] !text-[#6C757D]"
+    >
+      {text}
+    </ButtonMUI>
+  );
 }
 
-export default ButtonDate
+export default ButtonDate;

app/component/date/datePicker/Field.js

@@ -1,32 +1,38 @@
-import { TextField } from "@mui/material"
+import { TextField } from "@mui/material";
 
 function Field({ title, handleClick }) {
-    return (
-        <div className="relative">
-            <TextField
-                label={title}
-                className="!w-full !mx-auto !bg-[#FFF]"
-                sx={{
-                    borderRadius: '8px !important',
-                    '& .MuiFormLabel-root': { transform: 'translate(16px, 50%) scale(1) !important' },
-                    '& .MuiInputLabel-shrink': { transform: 'translate(14px, -9px) scale(0.75) !important' },
-                    '& .MuiInputBase-input': { padding: '12.5px 14px' },
-                    '& .MuiInputBase-root': { borderRadius: '8px !important' },
-                    '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !important' },
-                    ".Mui-focused": {
-                        '& .MuiOutlinedInput-notchedOutline': {
-                            border: '1px solid #0FA1B3 !important',
-                            transition: '0.5s all'
-                        }
-                    }
-                }}
-            />
-            <span
-                className="absolute cursor-pointer left-0 top-0 w-full h-full"
-                onClick={handleClick}
-            ></span>
-        </div>
-    )
+  return (
+    <div className="relative">
+      <TextField
+        label={title}
+        className="!w-full !mx-auto !bg-[#FFF]"
+        sx={{
+          borderRadius: "8px !important",
+          "& .MuiFormLabel-root": {
+            transform: "translate(16px, 50%) scale(1) !important",
+          },
+          "& .MuiInputLabel-shrink": {
+            transform: "translate(14px, -9px) scale(0.75) !important",
+          },
+          "& .MuiInputBase-input": { padding: "12.5px 14px" },
+          "& .MuiInputBase-root": { borderRadius: "8px !important" },
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid #E9ECEF !important",
+          },
+          ".Mui-focused": {
+            "& .MuiOutlinedInput-notchedOutline": {
+              border: "1px solid #0FA1B3 !important",
+              transition: "0.5s all",
+            },
+          },
+        }}
+      />
+      <span
+        className="absolute cursor-pointer left-0 top-0 w-full h-full"
+        onClick={handleClick}
+      ></span>
+    </div>
+  );
 }
 
-export default Field
+export default Field;

app/component/date/datePicker/index.js

@@ -1,98 +1,97 @@
-'use client';
+"use client";
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from "react";
 import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker";
-import Image from 'next/image';
-import { Button, Skeleton } from '@mui/material';
+import Image from "next/image";
+import { Button, Skeleton } from "@mui/material";
 
 function DatePicker({ date, updateDate }) {
+  const nextIconDatePicker = useRef();
 
-    const nextIconDatePicker = useRef();
+  const [startDate, setStartDate] = useState(null);
+  const [endDate, setEndDate] = useState();
+  const [loading, setLoading] = useState(true);
 
-    const [startDate, setStartDate] = useState(null);
-    const [endDate, setEndDate] = useState();
-    const [loading, setLoading] = useState(true);
-
-    const handleStartDateChange = (date) => {
-        if (date) {
-            setStartDate(date);
-            setEndDate(null); // Clear end date if start date is selected
-            // updateDate(date); // Notify parent about the selected date
-        }
-    };
-
-    const handleEndDateChange = (date) => {
-        if (date) {
-            setEndDate(date);
-            setStartDate(null); // Clear start date if end date is selected
-            // updateDate(date); // Notify parent about the selected date
-        }
-    };
-
-    const handleDisableDate = e => {
-        const today = new Date();
-        return today >= e._d
+  const handleStartDateChange = (date) => {
+    if (date) {
+      setStartDate(date);
+      setEndDate(null); // Clear end date if start date is selected
+      // updateDate(date); // Notify parent about the selected date
     }
+  };
 
-    useEffect(() => {
-        if (nextIconDatePicker.current) {
-            nextIconDatePicker.current.click()
-            setLoading(false)
-        }
-    }, [nextIconDatePicker])
+  const handleEndDateChange = (date) => {
+    if (date) {
+      setEndDate(date);
+      setStartDate(null); // Clear start date if end date is selected
+      // updateDate(date); // Notify parent about the selected date
+    }
+  };
 
-    return (
-        <div className='flex items-start justify-evenly w-full'>
-            <div className='w-1/2 relative flex justify-center'>
-                <DatePickerJalali
-                    value={startDate}
-                    className={`w-full ${loading ? 'opacity-0' : 'opacity-100'}`}
-                    timePicker={false}
-                    onChange={handleStartDateChange}
-                    disabledDates={e => handleDisableDate(e)}
+  const handleDisableDate = (e) => {
+    const today = new Date();
+    return today >= e._d;
+  };
+
+  useEffect(() => {
+    if (nextIconDatePicker.current) {
+      nextIconDatePicker.current.click();
+      setLoading(false);
+    }
+  }, [nextIconDatePicker]);
+
+  return (
+    <div className="flex items-start justify-evenly w-full">
+      <div className="w-1/2 relative flex justify-center">
+        <DatePickerJalali
+          value={startDate}
+          className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
+          timePicker={false}
+          onChange={handleStartDateChange}
+          disabledDates={(e) => handleDisableDate(e)}
+        />
+        {loading && (
+          <Skeleton
+            variant="rectangular"
+            className="!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10"
+            height={352}
+          />
+        )}
+      </div>
+      <div className="w-1/2 hidden md:flex lg:hidden xl:flex">
+        <div className="w-full relative flex justify-center">
+          <DatePickerJalali
+            value={endDate}
+            timePicker={false}
+            className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
+            nextIcon={
+              <Button
+                className="!min-w-0 !p-0 !rounded-full"
+                ref={nextIconDatePicker}
+                onClick={(e) => e.preventDefault()}
+              >
+                <Image
+                  src="/assets/icons/arrow-right.svg"
+                  className="icon-left-datepicker"
+                  height={24}
+                  width={24}
                 />
-                {loading && (
-                    <Skeleton
-                        variant="rectangular"
-                        className='!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10'
-                        height={352}
-                    />
-                )}
-            </div>
-            <div className='w-1/2 hidden md:flex lg:hidden xl:flex'>
-                <div className='w-full relative flex justify-center'>
-                    <DatePickerJalali
-                        value={endDate}
-                        timePicker={false}
-                        className={`w-full ${loading ? 'opacity-0' : 'opacity-100'}`}
-                        nextIcon={
-                            <Button
-                                className='!min-w-0 !p-0 !rounded-full'
-                                ref={nextIconDatePicker}
-                                onClick={e => e.preventDefault()}
-                            >
-                                <Image
-                                    src='/assets/icons/arrow-right.svg'
-                                    className='icon-left-datepicker'
-                                    height={24}
-                                    width={24}
-                                />
-                            </Button>
-                        }
-                        onChange={handleEndDateChange}
-                        disabledDates={e => handleDisableDate(e)}
-                    />
-                    {loading && (
-                        <Skeleton
-                            variant="rectangular"
-                            className='!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10'
-                            height={352}
-                        />
-                    )}
-                </div>
-            </div>
+              </Button>
+            }
+            onChange={handleEndDateChange}
+            disabledDates={(e) => handleDisableDate(e)}
+          />
+          {loading && (
+            <Skeleton
+              variant="rectangular"
+              className="!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10"
+              height={352}
+            />
+          )}
         </div>
-    );
+      </div>
+    </div>
+  );
 }
 
 export default DatePicker;