change design and data list in doctor-item & handle component appointment in doctor-item & handle functionality date-picker & fix bug appointment page & add req get appointment list

app/component/date/dateTime/Hours.js

@@ -3,28 +3,30 @@ 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-[12px] sm:gap-y-[16px] md:gap-y-[20px] lg:gap-y-[24px] mt-[24px] mb-[40px]">
-      {doctor[nameHours[value]].map((item, idx) => (
-        <li key={idx}>
-          <Button
-            onClick={() => setHour(idx)}
-            disabled={!item.active}
-            className={`
+      {doctor &&
+        nameHours &&
+        doctor[nameHours[value]]?.map((item, idx) => (
+          <li key={idx}>
+            <Button
+              onClick={() => setHour(idx)}
+              disabled={!item.active}
+              className={`
                         !w-full !rounded-[8px] !bg-[#EFEFEF] !flex !justify-center !items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
                         ${idx === hour ? "!bg-[#F79463] " : ""}
                     `}
-          >
-            <p
-              className={`
+            >
+              <p
+                className={`
                         text-[16px] font-semibold text-[#525252]
                         ${item.active ? "text-[#525252]" : "text-[#D7D7D7]"}
                         ${idx === hour ? "!text-[#FAFAFA] " : ""}
                     `}
-            >
-              {item.hour}
-            </p>
-          </Button>
-        </li>
-      ))}
+              >
+                {item.hour}
+              </p>
+            </Button>
+          </li>
+        ))}
     </ul>
   );
 }