change design all page & component page booking and account & cleancode

app/component/date/datePicker/index.js

@@ -1,12 +1,17 @@
 'use client';
 
-import { 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';
 
 function DatePicker({ date, updateDate }) {
 
+    const nextIconDatePicker = useRef();
+
     const [startDate, setStartDate] = useState(null);
-    const [endDate, setEndDate] = useState(null);
+    const [endDate, setEndDate] = useState();
+    const [loading, setLoading] = useState(true);
 
     const handleStartDateChange = (date) => {
         if (date) {
@@ -24,20 +29,67 @@ function DatePicker({ date, updateDate }) {
         }
     };
 
+    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'>
-            <DatePickerJalali
-                value={startDate}
-                className='w-1/2'
-                timePicker={false}
-                onChange={handleStartDateChange}
-            />
-            <div className='w-1/2 hidden md:flex lg:hidden xl:flex'>
+            <div className='w-1/2 relative flex justify-center'>
                 <DatePickerJalali
-                    value={endDate}
+                    value={startDate}
+                    className={`w-full ${loading ? 'opacity-0' : 'opacity-100'}`}
                     timePicker={false}
-                    onChange={handleEndDateChange}
+                    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}
+                                />
+                            </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>
     );