app/(admin)/admin/booking/[id]/page.tsx

@@ -20,7 +20,7 @@ import {
   MapPin,
 } from "lucide-react";
 import { useAppTheme } from "@/components/ThemeProvider";
-import { getAppointmentDetail, scheduleAppointment, rejectAppointment, listAppointments } from "@/lib/actions/appointments";
+import { getAppointmentDetail, scheduleAppointment, rejectAppointment } from "@/lib/actions/appointments";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -58,23 +58,8 @@ export default function AppointmentDetailPage() {
       
       setLoading(true);
       try {
-        // Fetch both detail and list to get selected_slots from list endpoint
+        const data = await getAppointmentDetail(appointmentId);
-        const [detailData, listData] = await Promise.all([
+        setAppointment(data);
-          getAppointmentDetail(appointmentId),
-          listAppointments().catch(() => []) // Fallback to empty array if list fails
-        ]);
-        
-        // Find matching appointment in list to get selected_slots
-        const listAppointment = Array.isArray(listData) 
-          ? listData.find((apt: Appointment) => apt.id === appointmentId)
-          : null;
-        
-        // Merge selected_slots from list into detail data
-        if (listAppointment && listAppointment.selected_slots && Array.isArray(listAppointment.selected_slots) && listAppointment.selected_slots.length > 0) {
-          detailData.selected_slots = listAppointment.selected_slots;
-        }
-        
-        setAppointment(detailData);
       } catch (error) {
         toast.error("Failed to load appointment details");
         router.push("/admin/booking");
@@ -382,7 +367,7 @@ export default function AppointmentDetailPage() {
               </div>
             )}
 
-            {/* Selected Slots */}
+            {/* Selected Slots (replacing Matching Slots) */}
             {appointment.selected_slots && Array.isArray(appointment.selected_slots) && appointment.selected_slots.length > 0 && (
               <div className={`rounded-2xl border shadow-sm overflow-hidden ${isDark ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}`}>
                 <div className={`px-6 py-4 border-b ${isDark ? "border-gray-700 bg-gray-800/50" : "border-gray-200 bg-gray-50/50"}`}>
@@ -397,7 +382,8 @@ export default function AppointmentDetailPage() {
                   </h2>
                 </div>
                 <div className="p-6">
-                  {(() => {
+                  <div className="flex flex-wrap gap-3">
+                    {appointment.selected_slots.map((slot: any, idx: number) => {
                       const dayNames: Record<number, string> = {
                         0: "Monday",
                         1: "Tuesday",
@@ -412,51 +398,31 @@ export default function AppointmentDetailPage() {
                         afternoon: "Lunchtime",
                         evening: "Evening",
                       };
-
+                      const dayName = dayNames[slot.day] || `Day ${slot.day}`;
-                    // Group slots by date
+                      const timeSlot = String(slot.time_slot).toLowerCase().trim();
-                    const slotsByDate: Record<string, typeof appointment.selected_slots> = {};
+                      const timeLabel = timeSlotLabels[timeSlot] || slot.time_slot;
-                    appointment.selected_slots.forEach((slot: any) => {
-                      const date = slot.date || "";
-                      if (!slotsByDate[date]) {
-                        slotsByDate[date] = [];
-                      }
-                      slotsByDate[date].push(slot);
-                    });
                       
                       return (
-                      <div className="space-y-4">
+                        <div
-                        {Object.entries(slotsByDate).map(([date, slots]) => (
+                          key={idx}
-                          <div key={date} className={`p-4 rounded-xl border ${isDark ? "bg-gray-700/50 border-gray-600" : "bg-gray-50 border-gray-200"}`}>
+                          className={`px-4 py-3 rounded-xl border ${isDark ? "bg-green-500/10 border-green-500/30" : "bg-green-50 border-green-200"}`}
-                            <div className="mb-3">
+                        >
-                              <p className={`text-base font-semibold ${isDark ? "text-white" : "text-gray-900"}`}>
+                          <p className={`text-sm font-semibold ${isDark ? "text-green-300" : "text-green-700"}`}>
-                                {formatShortDate(date)}
+                            {dayName}
                           </p>
-                              {slots.length > 0 && slots[0]?.day !== undefined && (
+                          <p className={`text-xs mt-1 ${isDark ? "text-green-400" : "text-green-600"}`}>
-                                <p className={`text-sm mt-1 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
+                            {timeLabel}
-                                  {dayNames[slots[0].day] || `Day ${slots[0].day}`}
+                          </p>
+                          {slot.date && (
+                            <p className={`text-xs mt-1 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
+                              {formatShortDate(slot.date)}
                             </p>
                           )}
                         </div>
-                            <div className="flex flex-wrap gap-2">
-                              {slots.map((slot: any, idx: number) => {
-                                const timeSlot = String(slot.time_slot).toLowerCase().trim();
-                                const timeLabel = timeSlotLabels[timeSlot] || slot.time_slot;
-                                return (
-                                  <span
-                                    key={idx}
-                                    className={`px-3 py-1.5 rounded-lg text-sm font-medium ${isDark ? "bg-green-500/20 text-green-300 border border-green-500/30" : "bg-green-50 text-green-700 border border-green-200"}`}
-                                  >
-                                    {timeLabel}
-                                  </span>
                       );
                     })}
                   </div>
                 </div>
-                        ))}
-                      </div>
-                    );
-                  })()}
-                </div>
               </div>
             )}
 

app/(admin)/admin/booking/page.tsx

@@ -680,52 +680,27 @@ export default function Booking() {
                         </td>
                         <td className={`px-3 sm:px-4 md:px-6 py-4 text-xs sm:text-sm hidden lg:table-cell ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                           {(() => {
-                            const dayNames: Record<number, string> = {
+                            // Handle preferred_dates
-                              0: "Monday",
-                              1: "Tuesday",
-                              2: "Wednesday",
-                              3: "Thursday",
-                              4: "Friday",
-                              5: "Saturday",
-                              6: "Sunday",
-                            };
-                            const timeSlotLabels: Record<string, string> = {
-                              morning: "Morning",
-                              afternoon: "Lunchtime",
-                              evening: "Evening",
-                            };
-                            
-                            // Show selected_slots if available
-                            if (appointment.selected_slots && Array.isArray(appointment.selected_slots) && appointment.selected_slots.length > 0) {
-                              return (
-                                <div className="flex flex-col gap-1">
-                                  {appointment.selected_slots.slice(0, 2).map((slot, idx) => (
-                                    <span key={idx} className="text-xs sm:text-sm">
-                                      {dayNames[slot.day] || `Day ${slot.day}`} - {timeSlotLabels[slot.time_slot] || slot.time_slot}
-                                    </span>
-                                  ))}
-                                  {appointment.selected_slots.length > 2 && (
-                                    <span className="text-xs opacity-75">
-                                      +{appointment.selected_slots.length - 2} more
-                                    </span>
-                                  )}
-                                </div>
-                              );
-                            }
-                            
-                            // Fallback to preferred_dates and preferred_time_slots if selected_slots not available
                             const dates = Array.isArray(appointment.preferred_dates) 
                               ? appointment.preferred_dates 
                               : appointment.preferred_dates 
                                 ? [appointment.preferred_dates] 
                                 : [];
                             
+                            // Handle preferred_time_slots
                             const timeSlots = Array.isArray(appointment.preferred_time_slots)
                               ? appointment.preferred_time_slots
                               : appointment.preferred_time_slots
                                 ? [appointment.preferred_time_slots]
                                 : [];
                             
+                            // Time slot labels
+                            const timeSlotLabels: Record<string, string> = {
+                              morning: "Morning",
+                              afternoon: "Lunchtime",
+                              evening: "Evening",
+                            };
+                            
                             if (dates.length === 0 && timeSlots.length === 0) {
                               return <span>-</span>;
                             }

app/(user)/user/appointments/[id]/page.tsx

@@ -18,7 +18,7 @@ import {
   Copy,
 } from "lucide-react";
 import { useAppTheme } from "@/components/ThemeProvider";
-import { getAppointmentDetail, listAppointments } from "@/lib/actions/appointments";
+import { getAppointmentDetail } from "@/lib/actions/appointments";
 import { Button } from "@/components/ui/button";
 import { Navbar } from "@/components/Navbar";
 import { toast } from "sonner";
@@ -40,23 +40,8 @@ export default function UserAppointmentDetailPage() {
       
       setLoading(true);
       try {
-        // Fetch both detail and list to get selected_slots from list endpoint
+        const data = await getAppointmentDetail(appointmentId);
-        const [detailData, listData] = await Promise.all([
+        setAppointment(data);
-          getAppointmentDetail(appointmentId),
-          listAppointments().catch(() => []) // Fallback to empty array if list fails
-        ]);
-        
-        // Find matching appointment in list to get selected_slots
-        const listAppointment = Array.isArray(listData) 
-          ? listData.find((apt: Appointment) => apt.id === appointmentId)
-          : null;
-        
-        // Merge selected_slots from list into detail data
-        if (listAppointment && listAppointment.selected_slots && Array.isArray(listAppointment.selected_slots) && listAppointment.selected_slots.length > 0) {
-          detailData.selected_slots = listAppointment.selected_slots;
-        }
-        
-        setAppointment(detailData);
       } catch (error) {
         toast.error("Failed to load appointment details");
         router.push("/user/dashboard");
@@ -321,7 +306,7 @@ export default function UserAppointmentDetailPage() {
               </div>
             )}
 
-            {/* Selected Slots */}
+            {/* Selected Slots (replacing Matching Slots) */}
             {appointment.selected_slots && Array.isArray(appointment.selected_slots) && appointment.selected_slots.length > 0 && (
               <div className={`rounded-2xl border shadow-sm overflow-hidden ${isDark ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}`}>
                 <div className={`px-6 py-4 border-b ${isDark ? "border-gray-700 bg-gray-800/50" : "border-gray-200 bg-gray-50/50"}`}>
@@ -336,7 +321,8 @@ export default function UserAppointmentDetailPage() {
                   </h2>
                 </div>
                 <div className="p-6">
-                  {(() => {
+                  <div className="flex flex-wrap gap-3">
+                    {appointment.selected_slots.map((slot: any, idx: number) => {
                       const dayNames: Record<number, string> = {
                         0: "Monday",
                         1: "Tuesday",
@@ -351,51 +337,31 @@ export default function UserAppointmentDetailPage() {
                         afternoon: "Lunchtime",
                         evening: "Evening",
                       };
-
+                      const dayName = dayNames[slot.day] || `Day ${slot.day}`;
-                    // Group slots by date
+                      const timeSlot = String(slot.time_slot).toLowerCase().trim();
-                    const slotsByDate: Record<string, typeof appointment.selected_slots> = {};
+                      const timeLabel = timeSlotLabels[timeSlot] || slot.time_slot;
-                    appointment.selected_slots.forEach((slot: any) => {
-                      const date = slot.date || "";
-                      if (!slotsByDate[date]) {
-                        slotsByDate[date] = [];
-                      }
-                      slotsByDate[date].push(slot);
-                    });
                       
                       return (
-                      <div className="space-y-4">
+                        <div
-                        {Object.entries(slotsByDate).map(([date, slots]) => (
+                          key={idx}
-                          <div key={date} className={`p-4 rounded-xl border ${isDark ? "bg-gray-700/50 border-gray-600" : "bg-gray-50 border-gray-200"}`}>
+                          className={`px-4 py-3 rounded-xl border ${isDark ? "bg-green-500/10 border-green-500/30" : "bg-green-50 border-green-200"}`}
-                            <div className="mb-3">
+                        >
-                              <p className={`text-base font-semibold ${isDark ? "text-white" : "text-gray-900"}`}>
+                          <p className={`text-sm font-semibold ${isDark ? "text-green-300" : "text-green-700"}`}>
-                                {formatShortDate(date)}
+                            {dayName}
                           </p>
-                              {slots.length > 0 && slots[0]?.day !== undefined && (
+                          <p className={`text-xs mt-1 ${isDark ? "text-green-400" : "text-green-600"}`}>
-                                <p className={`text-sm mt-1 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
+                            {timeLabel}
-                                  {dayNames[slots[0].day] || `Day ${slots[0].day}`}
+                          </p>
+                          {slot.date && (
+                            <p className={`text-xs mt-1 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
+                              {formatShortDate(slot.date)}
                             </p>
                           )}
                         </div>
-                            <div className="flex flex-wrap gap-2">
-                              {slots.map((slot: any, idx: number) => {
-                                const timeSlot = String(slot.time_slot).toLowerCase().trim();
-                                const timeLabel = timeSlotLabels[timeSlot] || slot.time_slot;
-                                return (
-                                  <span
-                                    key={idx}
-                                    className={`px-3 py-1.5 rounded-lg text-sm font-medium ${isDark ? "bg-green-500/20 text-green-300 border border-green-500/30" : "bg-green-50 text-green-700 border border-green-200"}`}
-                                  >
-                                    {timeLabel}
-                                  </span>
                       );
                     })}
                   </div>
                 </div>
-                        ))}
-                      </div>
-                    );
-                  })()}
-                </div>
               </div>
             )}