change design dashboard & side booking page

app/booking/[slug]/page.js

@@ -53,7 +53,9 @@ function Booking({ params: { slug } }) {
                     <BookingPage
                         disableSide={step === 5 || step === 6}
                         isFirst={step === 0}
+                        setStep={setStep}
                         doctor={doctor}
+                        step={step}
                     >
                         {elements[step]}
                     </BookingPage>

app/component/element/AutoCompleteSelect.js

@@ -25,9 +25,6 @@ function AutoCompleteSelect({ list, isError, updateData, name, label }) {
                     borderRadius: 2,
                     padding: '5px 16px !important'
                 },
-                '& .MuiOutlinedInput-notchedOutline': {
-                    border: isError ? '1px solid red' : ''
-                },
                 '& .MuiOutlinedInput-notchedOutline': {
                     border: '1px solid #D7D7D7'
                 },
@@ -36,8 +33,10 @@ function AutoCompleteSelect({ list, isError, updateData, name, label }) {
                 },
                 '& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
                     border: '1px solid #5559CE !important'
+                },
+                '& .MuiOutlinedInput-notchedOutline': {
+                    border: isError ? '1px solid red !important' : ''
                 }
-
             }}
             renderInput={params =>
                 <TextField