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

components/booking/date/PlaceVisit.js

@@ -3,7 +3,7 @@
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect"
 import { useState } from "react";
 
-function PlaceVisit() {
+function PlaceVisit({ locateVisit, setLocateVisit, isError }) {
 
     const clinics = [
         { label: 'درمانگاه رازی', id: 10 },
@@ -11,14 +11,13 @@ function PlaceVisit() {
         { label: 'درمانگاه مرکزی', id: 30 }
     ];
 
-    const [locateVisit, setLocateVisit] = useState();
-
     const updateData = event => setLocateVisit(event.target.innerText);
 
     return (
         <div className="flex flex-col items-start gap-[19px] justify-start">
             <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">1. انتخاب محل ویزیت</p>
             <AutoCompleteSelect
+                isError={isError && !locateVisit}
                 updateData={updateData}
                 label='درمانگاه'
                 list={clinics}

components/booking/date/hour/index.js

@@ -1,11 +1,14 @@
 import DateTime from "@/app/component/date/dateTime"
 
-function Hour({ doctor }) {
+function Hour({ doctor, setStep, setIsError, locateVisit }) {
     return (
         <div className="flex mt-[24px] flex-col items-start gap-[12px] justify-start">
             <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">3. انتخاب ساعت</p>
             <DateTime
                 doctor={doctor}
+                setStep={setStep}
+                setIsError={setIsError}
+                locateVisit={locateVisit}
             />
         </div>
     )

components/booking/date/index.js

@@ -1,14 +1,29 @@
+import { useState } from "react";
 import Hour from "./hour"
 import PlaceVisit from "./PlaceVisit"
 import Time from "./Time"
 
-function Date({ doctor }) {
+function Date({ doctor, setStep }) {
+
+    const [locateVisit, setLocateVisit] = useState();
+    const [isError, setIsError] = useState(false);
+
     return (
         <div className="w-full lg:w-[61%]">
             <div className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF] bg-transparent lg:bg-[#FFF]">
-                <PlaceVisit />
+                <PlaceVisit
+                    setLocateVisit={setLocateVisit}
+                    locateVisit={locateVisit}
+                    isError={isError}
+                />
                 <Time />
-                <Hour doctor={doctor} />
+                <Hour
+                    setLocateVisit={setLocateVisit}
+                    locateVisit={locateVisit}
+                    setIsError={setIsError}
+                    setStep={setStep}
+                    doctor={doctor}
+                />
             </div>
         </div>
     )