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.
This commit is contained in:
iamkiddy
parent
0297e6e3e5
commit
85afc8c840
@ -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 [endTime, setEndTime] = useState<string>("17:00");
|
||||
const [dayTimeRanges, setDayTimeRanges] = useState<Record<number, { startTime: string; endTime: string }>>({});
|
||||
|
||||
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) =>
|
||||
prev.includes(day) ? prev.filter((d) => d !== day) : [...prev, day].sort()
|
||||
);
|
||||
setSelectedDays((prev) => {
|
||||
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) {
|
||||
toast.error("End time must be after start time");
|
||||
return;
|
||||
// Validate all time ranges
|
||||
for (const day of selectedDays) {
|
||||
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 */}
|
||||
{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 */}
|
||||
{/* Days Selection with Time Ranges */}
|
||||
<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-2">
|
||||
<label className={`text-sm font-medium ${isDark ? "text-gray-300" : "text-gray-700"}`}>
|
||||
End Time
|
||||
</label>
|
||||
<Select value={endTime} onValueChange={setEndTime}>
|
||||
<SelectTrigger className={isDark ? "bg-gray-700 border-gray-600 text-white" : "bg-white border-gray-300"}>
|
||||
<SelectValue placeholder="Select end 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" : ""}
|
||||
<div className="space-y-3">
|
||||
{daysOfWeek.map((day) => {
|
||||
const isSelected = selectedDays.includes(day.value);
|
||||
const timeRange = dayTimeRanges[day.value] || { startTime: "09:00", endTime: "17:00" };
|
||||
|
||||
return (
|
||||
<div
|
||||
key={day.value}
|
||||
className={`rounded-lg border p-4 transition-all ${
|
||||
isSelected
|
||||
? isDark
|
||||
? "bg-rose-500/10 border-rose-500/30"
|
||||
: "bg-rose-50 border-rose-200"
|
||||
: isDark
|
||||
? "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", {
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
hour12: true,
|
||||
})}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`w-5 h-5 rounded border-2 flex items-center justify-center flex-shrink-0 ${
|
||||
isSelected
|
||||
? isDark
|
||||
? "bg-rose-600 border-rose-500"
|
||||
: "bg-rose-500 border-rose-500"
|
||||
: isDark
|
||||
? "border-gray-500"
|
||||
: "border-gray-300"
|
||||
}`}
|
||||
>
|
||||
{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 */}
|
||||
<div className={`p-3 rounded-lg border ${isDark ? "bg-gray-700/50 border-gray-600" : "bg-gray-50 border-gray-200"}`}>
|
||||
<p className={`text-sm ${isDark ? "text-gray-300" : "text-gray-700"}`}>
|
||||
<span className="font-medium">Available hours:</span>{" "}
|
||||
{new Date(`2000-01-01T${startTime}`).toLocaleTimeString("en-US", {
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
hour12: true,
|
||||
})}{" "}
|
||||
-{" "}
|
||||
{new Date(`2000-01-01T${endTime}`).toLocaleTimeString("en-US", {
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
hour12: true,
|
||||
})}
|
||||
</p>
|
||||
{isSelected && (
|
||||
<div className="mt-3 pt-3 border-t border-gray-300 dark:border-gray-600">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
{/* Start Time */}
|
||||
<div className="space-y-1.5">
|
||||
<label className={`text-xs font-medium ${isDark ? "text-gray-400" : "text-gray-600"}`}>
|
||||
Start Time
|
||||
</label>
|
||||
<Select
|
||||
value={timeRange.startTime}
|
||||
onValueChange={(value) => handleTimeRangeChange(day.value, "startTime", 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>
|
||||
|
||||
{/* 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 ? (
|
||||
|
||||
@ -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)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user