refactor(dateTime): streamline slot handling and improve session management

app/component/date/dateTime/hours/List.js

@@ -1,8 +1,8 @@
 import { Button } from "@mui/material";
 import React from "react";
 
-function List({ appo, hour, setHour, value }) {
-  const list = appo && appo[value ? "evening" : "morning"];
+function List({ slots, hour, setHour }) {
+  const list = slots;
   const checkHour = (item) => JSON.stringify(item) === JSON.stringify(hour);
   const isSelectable = (item) =>
     item.is_available && !(item?.start && item.start * 1000 < Date.now());
@@ -30,8 +30,7 @@ function List({ appo, hour, setHour, value }) {
   } else {
     return (
       <p className="text-[#525252] text-[14px] md:text-[16px] font-medium py-[56px]">
-        در حال حاضر، نوبتی برای ساعت‌های {[value ? "بعد از ظهر" : "صبح"]} موجود
-        نمی‌باشد.
+        در حال حاضر، نوبتی برای این شیفت موجود نمی‌باشد.
       </p>
     );
   }

app/component/date/dateTime/hours/index.js

@@ -1,7 +1,7 @@
 import List from "./List";
 import Loading from "./Loading";
 
-function Hours({ appo, doctor, hour, setHour, value, nameHours, locationAddress }) {
+function Hours({ appo, slots, hour, setHour, locationAddress }) {
   if (appo === "loading") {
     return <Loading />;
   } else if (typeof appo === "string") {
@@ -13,7 +13,7 @@ function Hours({ appo, doctor, hour, setHour, value, nameHours, locationAddress
   } else {
     return (
       <>
-        <List appo={appo} hour={hour} value={value} setHour={setHour} />
+        <List slots={slots} hour={hour} setHour={setHour} />
         {locationAddress && (
           <div className="mt-4 p-3 bg-[#F5F5F5] dark:bg-[#2A2A2A] rounded-lg">
             <p className="text-[#616161] dark:text-[#A1A1A1] text-[14px] font-medium mb-1">

app/component/date/dateTime/index.js

@@ -8,14 +8,15 @@ import { request } from "@/services/response";
 import SendAppo from "./SendAppo";
 import { adaptSlots, hasAvailable } from "@/lib/appointmentSlots";
 
-const listTab = ["صبح", "بعد از ظهر"];
-const nameHours = ["hours_morning", "hours_afternoon"];
-
 function DateTime({ date, doctor, setStep, setSelectedSlot, setSelectedDate }) {
   const [value, setValue] = useState(0);
   const [hour, setHour] = useState();
   const [appo, setAppo] = useState("تاریخ مورد نظرتان را انتخاب کنید.");
 
+  const sessions = Array.isArray(appo) ? appo : [];
+  const listTab = sessions.map((s) => s.label);
+  const currentSlots = sessions[value]?.slots ?? [];
+
   const handleChange = (event, newValue) => {
     setHour();
     setValue(newValue);
@@ -33,9 +34,15 @@ function DateTime({ date, doctor, setStep, setSelectedSlot, setSelectedDate }) {
       request
         .getAppointmentSlots(doctor.uuid, dateStr)
         .then((res) => {
-          const slots = adaptSlots(res);
-          setAppo(slots);
-          setValue(hasAvailable(slots.morning) || !hasAvailable(slots.evening) ? 0 : 1);
+          const parsed = adaptSlots(res);
+          if (!parsed.length) {
+            setAppo("در حال حاضر، نوبتی برای این روز موجود نمی‌باشد.");
+            setValue(0);
+            return;
+          }
+          setAppo(parsed);
+          const firstAvailable = parsed.findIndex((s) => hasAvailable(s.slots));
+          setValue(firstAvailable >= 0 ? firstAvailable : 0);
         })
         .catch(() => {
           setAppo("در حال حاضر، نوبتی برای این روز موجود نمی‌باشد.");
@@ -46,36 +53,36 @@ function DateTime({ date, doctor, setStep, setSelectedSlot, setSelectedDate }) {
 
   return (
     <div className="w-full">
-      <Tabs
-        isSm={true}
-        style={{
-          ".MuiTabs-indicator": {
-            height: "4px",
-            borderRadius: "8px",
-            background: "#F17732",
-          },
-          "& .MuiTabs-flexContainer": {
-            borderBottom: "2px solid #EFEFEF",
-            marginBottom: "1px",
-          },
-          "& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
-            color: "#F17732 !important",
-          },
-          "& .MuiButtonBase-root.Mui-selected": {
-            color: "#F17732 !important",
-          },
-        }}
-        value={value}
-        listTab={listTab}
-        handleChange={handleChange}
-      />
+      {sessions.length > 1 && (
+        <Tabs
+          isSm={sessions.length === 2}
+          style={{
+            ".MuiTabs-indicator": {
+              height: "4px",
+              borderRadius: "8px",
+              background: "#F17732",
+            },
+            "& .MuiTabs-flexContainer": {
+              borderBottom: "2px solid #EFEFEF",
+              marginBottom: "1px",
+            },
+            "& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
+              color: "#F17732 !important",
+            },
+            "& .MuiButtonBase-root.Mui-selected": {
+              color: "#F17732 !important",
+            },
+          }}
+          value={value}
+          listTab={listTab}
+          handleChange={handleChange}
+        />
+      )}
       <Hours
         appo={appo}
+        slots={currentSlots}
         hour={hour}
-        value={value}
-        doctor={doctor}
         setHour={setHour}
-        nameHours={nameHours}
         locationAddress={locationAddress}
       />
       <SendAppo