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

app/component/date/dateTime/Hours.js

@@ -3,7 +3,7 @@ import { Button } from "@mui/material";
 function Hours({ doctor, hour, setHour, value, nameHours }) {
     return (
         <ul
-            className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-[16px] gap-y-[24px] mt-[24px] mb-[40px]"
+            className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-[16px] gap-y-[12px] sm:gap-y-[16px] md:gap-y-[20px] lg:gap-y-[24px] mt-[24px] mb-[40px]"
         >
             {doctor[nameHours[value]].map((item, idx) => (
                 <li
@@ -11,13 +11,14 @@ function Hours({ doctor, hour, setHour, value, nameHours }) {
                 >
                     <Button
                         onClick={() => setHour(idx)}
+                        disabled={!item.active}
                         className={`
-                        !w-full !rounded-[8px] !grid !place-items-center !bg-[#EFEFEF] !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
+                        !w-full !rounded-[8px] !bg-[#EFEFEF] !grid !place-items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
                         ${idx === hour ? '!bg-[#F79463] ' : ''}
                     `}
                     >
                         <p className={`
-                        text-[16px] font-semibold
+                        text-[16px] font-semibold text-[#525252]
                         ${item.active ? 'text-[#525252]' : 'text-[#D7D7D7]'}
                         ${idx === hour ? '!text-[#FAFAFA] ' : ''}
                     `}>{item.hour}</p>

app/component/date/dateTime/index.js

@@ -1,16 +1,15 @@
 'use client';
 
 import { useState } from "react";
-import Tabs from "../../Tabs";
 import Hours from "./Hours";
+import Tabs from "../../Tabs";
 import { Button } from "@mui/material";
 import ArrowLeftB from "@/components/icons/ArrowLeftB";
-import Link from "next/link";
 
 const listTab = ['صبح', 'بعد از ظهر'];
 const nameHours = ['hours_morning', 'hours_afternoon']
 
-function DateTime({ doctor }) {
+function DateTime({ doctor, setStep, setIsError, locateVisit }) {
 
   const [value, setValue] = useState(0);
   const [hour, setHour] = useState(0);
@@ -32,21 +31,23 @@ function DateTime({ doctor }) {
         setHour={setHour}
         nameHours={nameHours}
       />
-      <Link
-        href='/login-verify'
-        className="w-full flex justify-end"
-      >
+      <div className="w-full flex justify-end">
         <Button
           className="!gap-[4px] !px-[12px] !py-[8px] md:!py-[9px] !w-full md:!w-fit !min-w-[157px]"
-          onClick={() =>
-            localStorage.setItem('doctor-id', doctor?.id)
-          }
+          onClick={() => {
+            if (locateVisit) {
+              localStorage.setItem('doctor-id', doctor?.id);
+              setStep(prev => prev + 1);
+            } else {
+              setIsError(true);
+            }
+          }}
           variant="contained"
         >
           <p className="text-[#EFEFEF] text-[16px] font-medium">تایید نوبت</p>
           <ArrowLeftB />
         </Button>
-      </Link>
+      </div>
     </div>
   )
 }