Enhance Booking component for admin availability management. Implement time range selection for each day, load saved time ranges from localStorage, and validate time inputs. Update API integration to ensure available_days is an array of numbers and improve error handling for availability updates. Refactor UI for better user experience in managing weekly availability.

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

@@ -50,11 +50,10 @@ export default function Booking() {
   const isDark = theme === "dark";
   
   // Availability management
-  const { adminAvailability, isLoadingAdminAvailability, updateAdminAvailability, isUpdatingAvailability } = useAppointments();
+  const { adminAvailability, isLoadingAdminAvailability, updateAvailability, isUpdatingAvailability, refetchAdminAvailability } = useAppointments();
   const [selectedDays, setSelectedDays] = useState<number[]>([]);
   const [availabilityDialogOpen, setAvailabilityDialogOpen] = useState(false);
-  const [startTime, setStartTime] = useState<string>("09:00");
+  const [dayTimeRanges, setDayTimeRanges] = useState<Record<number, { startTime: string; endTime: string }>>({});
-  const [endTime, setEndTime] = useState<string>("17:00");
 
   const daysOfWeek = [
     { value: 0, label: "Monday" },
@@ -66,10 +65,48 @@ export default function Booking() {
     { value: 6, label: "Sunday" },
   ];
 
-  // Initialize selected days when availability is loaded
+  // Load time ranges from localStorage on mount
+  useEffect(() => {
+    const savedTimeRanges = localStorage.getItem("adminAvailabilityTimeRanges");
+    if (savedTimeRanges) {
+      try {
+        const parsed = JSON.parse(savedTimeRanges);
+        setDayTimeRanges(parsed);
+      } catch (error) {
+        console.error("Failed to parse saved time ranges:", error);
+      }
+    }
+  }, []);
+
+  // Initialize selected days and time ranges when availability is loaded
   useEffect(() => {
     if (adminAvailability?.available_days) {
       setSelectedDays(adminAvailability.available_days);
+      // Load saved time ranges or use defaults
+      const savedTimeRanges = localStorage.getItem("adminAvailabilityTimeRanges");
+      let initialRanges: Record<number, { startTime: string; endTime: string }> = {};
+      
+      if (savedTimeRanges) {
+        try {
+          const parsed = JSON.parse(savedTimeRanges);
+          // Only use saved ranges for days that are currently available
+          adminAvailability.available_days.forEach((day) => {
+            initialRanges[day] = parsed[day] || { startTime: "09:00", endTime: "17:00" };
+          });
+        } catch (error) {
+          // If parsing fails, use defaults
+          adminAvailability.available_days.forEach((day) => {
+            initialRanges[day] = { startTime: "09:00", endTime: "17:00" };
+          });
+        }
+      } else {
+        // No saved ranges, use defaults
+        adminAvailability.available_days.forEach((day) => {
+          initialRanges[day] = { startTime: "09:00", endTime: "17:00" };
+        });
+      }
+      
+      setDayTimeRanges(initialRanges);
     }
   }, [adminAvailability]);
 
@@ -88,9 +125,40 @@ export default function Booking() {
   const timeSlotsForPicker = generateTimeSlots();
 
   const handleDayToggle = (day: number) => {
-    setSelectedDays((prev) =>
+    setSelectedDays((prev) => {
-      prev.includes(day) ? prev.filter((d) => d !== day) : [...prev, day].sort()
+      const newDays = prev.includes(day) 
-    );
+        ? prev.filter((d) => d !== day)
+        : [...prev, day].sort();
+      
+      // Initialize time range for newly added day
+      if (!prev.includes(day) && !dayTimeRanges[day]) {
+        setDayTimeRanges((prevRanges) => ({
+          ...prevRanges,
+          [day]: { startTime: "09:00", endTime: "17:00" },
+        }));
+      }
+      
+      // Remove time range for removed day
+      if (prev.includes(day)) {
+        setDayTimeRanges((prevRanges) => {
+          const newRanges = { ...prevRanges };
+          delete newRanges[day];
+          return newRanges;
+        });
+      }
+      
+      return newDays;
+    });
+  };
+
+  const handleTimeRangeChange = (day: number, field: "startTime" | "endTime", value: string) => {
+    setDayTimeRanges((prev) => ({
+      ...prev,
+      [day]: {
+        ...prev[day],
+        [field]: value,
+      },
+    }));
   };
 
   const handleSaveAvailability = async () => {
@@ -99,14 +167,32 @@ export default function Booking() {
       return;
     }
 
-    if (startTime >= endTime) {
+    // Validate all time ranges
-      toast.error("End time must be after start time");
+    for (const day of selectedDays) {
-      return;
+      const timeRange = dayTimeRanges[day];
+      if (!timeRange || !timeRange.startTime || !timeRange.endTime) {
+        toast.error(`Please set time range for ${daysOfWeek.find(d => d.value === day)?.label}`);
+        return;
+      }
+      if (timeRange.startTime >= timeRange.endTime) {
+        toast.error(`End time must be after start time for ${daysOfWeek.find(d => d.value === day)?.label}`);
+        return;
+      }
     }
 
     try {
-      await updateAdminAvailability({ available_days: selectedDays });
+      // Ensure selectedDays is an array of numbers
+      const daysToSave = selectedDays.map(day => Number(day)).sort();
+      await updateAvailability({ available_days: daysToSave });
+      
+      // Save time ranges to localStorage
+      localStorage.setItem("adminAvailabilityTimeRanges", JSON.stringify(dayTimeRanges));
+      
       toast.success("Availability updated successfully!");
+      // Refresh availability data
+      if (refetchAdminAvailability) {
+        await refetchAdminAvailability();
+      }
       setAvailabilityDialogOpen(false);
     } catch (error) {
       console.error("Failed to update availability:", error);
@@ -118,6 +204,12 @@ export default function Booking() {
   const handleOpenAvailabilityDialog = () => {
     if (adminAvailability?.available_days) {
       setSelectedDays(adminAvailability.available_days);
+      // Initialize time ranges for each day
+      const initialRanges: Record<number, { startTime: string; endTime: string }> = {};
+      adminAvailability.available_days.forEach((day) => {
+        initialRanges[day] = dayTimeRanges[day] || { startTime: "09:00", endTime: "17:00" };
+      });
+      setDayTimeRanges(initialRanges);
     }
     setAvailabilityDialogOpen(true);
   };
@@ -334,6 +426,60 @@ export default function Booking() {
             </div>
           </div>
 
+          {/* Available Days Display Card */}
+          {adminAvailability && (
+            <div className={`mb-4 sm:mb-6 rounded-lg border p-4 sm:p-5 ${isDark ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}`}>
+              <div className="flex items-start gap-3">
+                <div className={`p-2 rounded-lg ${isDark ? "bg-rose-500/20" : "bg-rose-50"}`}>
+                  <CalendarCheck className={`w-5 h-5 ${isDark ? "text-rose-400" : "text-rose-600"}`} />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <h3 className={`text-sm font-semibold mb-3 ${isDark ? "text-white" : "text-gray-900"}`}>
+                    Weekly Availability
+                  </h3>
+                    {adminAvailability.available_days_display && adminAvailability.available_days_display.length > 0 ? (
+                      <div className="flex flex-wrap gap-2">
+                        {adminAvailability.available_days.map((dayNum, index) => {
+                          const dayName = daysOfWeek.find(d => d.value === dayNum)?.label || adminAvailability.available_days_display[index];
+                          const timeRange = dayTimeRanges[dayNum] || { startTime: "09:00", endTime: "17:00" };
+                          return (
+                            <div
+                              key={dayNum}
+                              className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-sm max-w-[200px] ${
+                                isDark
+                                  ? "bg-rose-500/10 text-rose-200 border border-rose-500/20"
+                                  : "bg-rose-50 text-rose-700 border border-rose-200"
+                              }`}
+                            >
+                              <Check className={`w-3.5 h-3.5 shrink-0 ${isDark ? "text-rose-400" : "text-rose-600"}`} />
+                              <span className="font-medium">{dayName}</span>
+                              <span className={`ml-auto text-sm ${isDark ? "text-rose-300" : "text-rose-600"}`}>
+                                ({new Date(`2000-01-01T${timeRange.startTime}`).toLocaleTimeString("en-US", {
+                                  hour: "numeric",
+                                  minute: "2-digit",
+                                  hour12: true,
+                                })}{" "}
+                                -{" "}
+                                {new Date(`2000-01-01T${timeRange.endTime}`).toLocaleTimeString("en-US", {
+                                  hour: "numeric",
+                                  minute: "2-digit",
+                                  hour12: true,
+                                })})
+                              </span>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    ) : (
+                      <p className={`text-sm ${isDark ? "text-gray-400" : "text-gray-500"}`}>
+                        No availability set. Click "Manage Availability" to set your available days.
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+          )}
+
           {loading ? (
             <div className="flex items-center justify-center py-12">
               <div className={`animate-spin rounded-full h-8 w-8 border-b-2 ${isDark ? "border-gray-600" : "border-gray-400"}`}></div>
@@ -682,131 +828,145 @@ export default function Booking() {
                 </div>
               ) : (
                 <>
-                  {/* Current Availability Display */}
+                  {/* Days Selection with Time Ranges */}
-                  {adminAvailability?.available_days_display && adminAvailability.available_days_display.length > 0 && (
-                    <div className={`p-3 rounded-lg border ${isDark ? "bg-blue-900/20 border-blue-800" : "bg-blue-50 border-blue-200"}`}>
-                      <p className={`text-sm ${isDark ? "text-blue-200" : "text-blue-900"}`}>
-                        <span className="font-medium">Current availability:</span> {adminAvailability.available_days_display.join(", ")}
-                      </p>
-                    </div>
-                  )}
-
-                  {/* Days Selection */}
-                  <div>
-                    <label className={`text-sm font-medium mb-3 block ${isDark ? "text-gray-300" : "text-gray-700"}`}>
-                      Available Days *
-                    </label>
-                    <p className={`text-xs mb-3 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
-                      Select the days of the week when you accept appointment requests
-                    </p>
-                    <div className="flex flex-wrap gap-2 sm:gap-3">
-                      {daysOfWeek.map((day) => (
-                        <button
-                          key={day.value}
-                          type="button"
-                          onClick={() => handleDayToggle(day.value)}
-                          className={`flex items-center gap-2 px-4 py-2 rounded-lg border transition-all ${
-                            selectedDays.includes(day.value)
-                              ? isDark
-                                ? "bg-rose-600 border-rose-500 text-white"
-                                : "bg-rose-500 border-rose-500 text-white"
-                              : isDark
-                              ? "bg-gray-700 border-gray-600 text-gray-300 hover:border-rose-500"
-                              : "bg-white border-gray-300 text-gray-700 hover:border-rose-500"
-                          }`}
-                        >
-                          {selectedDays.includes(day.value) && (
-                            <Check className="w-4 h-4" />
-                          )}
-                          <span className="text-sm font-medium">{day.label}</span>
-                        </button>
-                      ))}
-                    </div>
-                  </div>
-
-                  {/* Time Selection */}
                   <div className="space-y-4">
                     <div>
                       <label className={`text-sm font-medium mb-3 block ${isDark ? "text-gray-300" : "text-gray-700"}`}>
-                        Available Hours
+                        Available Days & Times *
                       </label>
                       <p className={`text-xs mb-3 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
-                        Set the time range when appointments can be scheduled
+                        Select days and set time ranges for each day
                       </p>
                     </div>
-                    
-                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                      {/* Start Time */}
-                      <div className="space-y-2">
-                        <label className={`text-sm font-medium ${isDark ? "text-gray-300" : "text-gray-700"}`}>
-                          Start Time
-                        </label>
-                        <Select value={startTime} onValueChange={setStartTime}>
-                          <SelectTrigger className={isDark ? "bg-gray-700 border-gray-600 text-white" : "bg-white border-gray-300"}>
-                            <SelectValue placeholder="Select start time" />
-                          </SelectTrigger>
-                          <SelectContent className={isDark ? "bg-gray-800 border-gray-700" : "bg-white"}>
-                            {timeSlotsForPicker.map((time) => (
-                              <SelectItem 
-                                key={time} 
-                                value={time}
-                                className={isDark ? "text-white hover:bg-gray-700" : ""}
-                              >
-                                {new Date(`2000-01-01T${time}`).toLocaleTimeString("en-US", {
-                                  hour: "numeric",
-                                  minute: "2-digit",
-                                  hour12: true,
-                                })}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                      </div>
 
-                      {/* End Time */}
+                    <div className="space-y-3">
-                      <div className="space-y-2">
+                      {daysOfWeek.map((day) => {
-                        <label className={`text-sm font-medium ${isDark ? "text-gray-300" : "text-gray-700"}`}>
+                        const isSelected = selectedDays.includes(day.value);
-                          End Time
+                        const timeRange = dayTimeRanges[day.value] || { startTime: "09:00", endTime: "17:00" };
-                        </label>
+                        
-                        <Select value={endTime} onValueChange={setEndTime}>
+                        return (
-                          <SelectTrigger className={isDark ? "bg-gray-700 border-gray-600 text-white" : "bg-white border-gray-300"}>
+                          <div
-                            <SelectValue placeholder="Select end time" />
+                            key={day.value}
-                          </SelectTrigger>
+                            className={`rounded-lg border p-4 transition-all ${
-                          <SelectContent className={isDark ? "bg-gray-800 border-gray-700" : "bg-white"}>
+                              isSelected
-                            {timeSlotsForPicker.map((time) => (
+                                ? isDark
-                              <SelectItem 
+                                  ? "bg-rose-500/10 border-rose-500/30"
-                                key={time} 
+                                  : "bg-rose-50 border-rose-200"
-                                value={time}
+                                : isDark
-                                className={isDark ? "text-white hover:bg-gray-700" : ""}
+                                ? "bg-gray-700/50 border-gray-600"
+                                : "bg-gray-50 border-gray-200"
+                            }`}
+                          >
+                            <div className="flex items-start justify-between gap-4 mb-3">
+                              <button
+                                type="button"
+                                onClick={() => handleDayToggle(day.value)}
+                                className={`flex items-center gap-2 flex-1 ${
+                                  isSelected ? "cursor-pointer" : "cursor-pointer"
+                                }`}
                               >
-                                {new Date(`2000-01-01T${time}`).toLocaleTimeString("en-US", {
+                                <div
-                                  hour: "numeric",
+                                  className={`w-5 h-5 rounded border-2 flex items-center justify-center flex-shrink-0 ${
-                                  minute: "2-digit",
+                                    isSelected
-                                  hour12: true,
+                                      ? isDark
-                                })}
+                                        ? "bg-rose-600 border-rose-500"
-                              </SelectItem>
+                                        : "bg-rose-500 border-rose-500"
-                            ))}
+                                      : isDark
-                          </SelectContent>
+                                      ? "border-gray-500"
-                        </Select>
+                                      : "border-gray-300"
-                      </div>
+                                  }`}
-                    </div>
+                                >
+                                  {isSelected && <Check className="w-3 h-3 text-white" />}
+                                </div>
+                                <span className={`text-sm font-medium ${isDark ? "text-white" : "text-gray-900"}`}>
+                                  {day.label}
+                                </span>
+                              </button>
+                            </div>
 
-                    {/* Time Range Display */}
+                            {isSelected && (
-                    <div className={`p-3 rounded-lg border ${isDark ? "bg-gray-700/50 border-gray-600" : "bg-gray-50 border-gray-200"}`}>
+                              <div className="mt-3 pt-3 border-t border-gray-300 dark:border-gray-600">
-                      <p className={`text-sm ${isDark ? "text-gray-300" : "text-gray-700"}`}>
+                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                        <span className="font-medium">Available hours:</span>{" "}
+                                  {/* Start Time */}
-                        {new Date(`2000-01-01T${startTime}`).toLocaleTimeString("en-US", {
+                                  <div className="space-y-1.5">
-                          hour: "numeric",
+                                    <label className={`text-xs font-medium ${isDark ? "text-gray-400" : "text-gray-600"}`}>
-                          minute: "2-digit",
+                                      Start Time
-                          hour12: true,
+                                    </label>
-                        })}{" "}
+                                    <Select
-                        -{" "}
+                                      value={timeRange.startTime}
-                        {new Date(`2000-01-01T${endTime}`).toLocaleTimeString("en-US", {
+                                      onValueChange={(value) => handleTimeRangeChange(day.value, "startTime", value)}
-                          hour: "numeric",
+                                    >
-                          minute: "2-digit",
+                                      <SelectTrigger className={`h-9 text-sm ${isDark ? "bg-gray-700 border-gray-600 text-white" : "bg-white border-gray-300"}`}>
-                          hour12: true,
+                                        <SelectValue />
-                        })}
+                                      </SelectTrigger>
-                      </p>
+                                      <SelectContent className={isDark ? "bg-gray-800 border-gray-700" : "bg-white"}>
+                                        {timeSlotsForPicker.map((time) => (
+                                          <SelectItem
+                                            key={time}
+                                            value={time}
+                                            className={isDark ? "text-white hover:bg-gray-700" : ""}
+                                          >
+                                            {new Date(`2000-01-01T${time}`).toLocaleTimeString("en-US", {
+                                              hour: "numeric",
+                                              minute: "2-digit",
+                                              hour12: true,
+                                            })}
+                                          </SelectItem>
+                                        ))}
+                                      </SelectContent>
+                                    </Select>
+                                  </div>
+
+                                  {/* End Time */}
+                                  <div className="space-y-1.5">
+                                    <label className={`text-xs font-medium ${isDark ? "text-gray-400" : "text-gray-600"}`}>
+                                      End Time
+                                    </label>
+                                    <Select
+                                      value={timeRange.endTime}
+                                      onValueChange={(value) => handleTimeRangeChange(day.value, "endTime", value)}
+                                    >
+                                      <SelectTrigger className={`h-9 text-sm ${isDark ? "bg-gray-700 border-gray-600 text-white" : "bg-white border-gray-300"}`}>
+                                        <SelectValue />
+                                      </SelectTrigger>
+                                      <SelectContent className={isDark ? "bg-gray-800 border-gray-700" : "bg-white"}>
+                                        {timeSlotsForPicker.map((time) => (
+                                          <SelectItem
+                                            key={time}
+                                            value={time}
+                                            className={isDark ? "text-white hover:bg-gray-700" : ""}
+                                          >
+                                            {new Date(`2000-01-01T${time}`).toLocaleTimeString("en-US", {
+                                              hour: "numeric",
+                                              minute: "2-digit",
+                                              hour12: true,
+                                            })}
+                                          </SelectItem>
+                                        ))}
+                                      </SelectContent>
+                                    </Select>
+                                  </div>
+                                </div>
+
+                                {/* Time Range Preview */}
+                                <div className={`mt-2 p-2 rounded text-xs ${isDark ? "bg-gray-800/50 text-gray-300" : "bg-white text-gray-600"}`}>
+                                  {new Date(`2000-01-01T${timeRange.startTime}`).toLocaleTimeString("en-US", {
+                                    hour: "numeric",
+                                    minute: "2-digit",
+                                    hour12: true,
+                                  })}{" "}
+                                  -{" "}
+                                  {new Date(`2000-01-01T${timeRange.endTime}`).toLocaleTimeString("en-US", {
+                                    hour: "numeric",
+                                    minute: "2-digit",
+                                    hour12: true,
+                                  })}
+                                </div>
+                              </div>
+                            )}
+                          </div>
+                        );
+                      })}
                     </div>
                   </div>
                 </>
@@ -829,7 +989,7 @@ export default function Booking() {
               </Button>
               <Button
                 onClick={handleSaveAvailability}
-                disabled={isUpdatingAvailability || selectedDays.length === 0 || startTime >= endTime}
+                disabled={isUpdatingAvailability || selectedDays.length === 0}
                 className="bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white"
               >
                 {isUpdatingAvailability ? (

lib/actions/appointments.ts

@@ -331,23 +331,58 @@ export async function updateAdminAvailability(
     throw new Error("Authentication required.");
   }
 
+  // Ensure available_days is an array of numbers
+  const payload = {
+    available_days: Array.isArray(input.available_days) 
+      ? input.available_days.map(day => Number(day))
+      : input.available_days
+  };
+
   const response = await fetch(API_ENDPOINTS.meetings.adminAvailability, {
     method: "PUT",
     headers: {
       "Content-Type": "application/json",
       Authorization: `Bearer ${tokens.access}`,
     },
-    body: JSON.stringify(input),
+    body: JSON.stringify(payload),
   });
 
-  const data: AdminAvailability = await response.json();
+  let data: any;
+  try {
+    data = await response.json();
+  } catch (parseError) {
+    // If response is not JSON, use status text
+    throw new Error(response.statusText || "Failed to update availability");
+  }
 
   if (!response.ok) {
     const errorMessage = extractErrorMessage(data as unknown as ApiError);
+    console.error("Availability update error:", {
+      status: response.status,
+      statusText: response.statusText,
+      data,
+      payload
+    });
     throw new Error(errorMessage);
   }
 
-  return data;
+  // Handle both string and array formats for available_days in response
+  let availableDays: number[] = [];
+  if (typeof data.available_days === 'string') {
+    try {
+      availableDays = JSON.parse(data.available_days);
+    } catch {
+      // If parsing fails, try splitting by comma
+      availableDays = data.available_days.split(',').map((d: string) => parseInt(d.trim())).filter((d: number) => !isNaN(d));
+    }
+  } else if (Array.isArray(data.available_days)) {
+    availableDays = data.available_days;
+  }
+
+  return {
+    available_days: availableDays,
+    available_days_display: data.available_days_display || [],
+  } as AdminAvailability;
 }
 
 // Get appointment stats (Admin only)