show only the first item in appo list & update appo item text && change key in /doctors page URL && handle setting and updating data on first modal filter load

components/doctor/appointmentList/ItemAppointment.js

@@ -39,7 +39,7 @@ function ItemAppointment({ turn, loading }) {
           <GreenCalendarTurn />
           <TextLoading width={100} height={15} loading={loading}>
             <p className="text-[#05BA58] text-[12px] font-medium">
-              اولین نوبت آزاد: {turn.first_free_turn}
+              اولین نوبت آزاد: {turn.first_free_turn || "یکشنبه 24 اردیبهشت"}
             </p>
           </TextLoading>
         </div>

components/doctor/appointmentList/index.js

@@ -9,9 +9,13 @@ function AppointmentList({ doctors, loading }) {
   return (
     <>
       <ul className="hidden sticky top-[122px] sm:top-[150px] mt:top-[178px] lg:top-[206px] lg:flex w-[38%] flex-col justify-start items-center gap-8">
-        {doctors?.map((item) => (
-          <ItemAppointment turn={item} key={item.id} loading={loading} />
-        ))}
+        {doctors && doctors.length && (
+          <ItemAppointment
+            loading={loading}
+            turn={doctors[0]}
+            key={doctors[0].id}
+          />
+        )}
       </ul>
       <div
         className="fixed lg:hidden bg-[#FFF] border-t border-transparent border-t-[#D7D7D7]