fix: Settings courts list not loading and status display

- Handle Courts API returning array directly (not wrapped in data property)
- Map pricePerHour to hourlyRate for frontend compatibility
- Handle uppercase DB status values (AVAILABLE, MAINTENANCE, CLOSED)
- Send pricePerHour field when creating/updating courts

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ivan
2026-03-04 03:52:08 +00:00
parent 7d0d6d32f1
commit a713369e03

View File

@@ -103,7 +103,12 @@ export default function SettingsPage() {
const res = await fetch("/api/courts"); const res = await fetch("/api/courts");
if (res.ok) { if (res.ok) {
const data = await res.json(); const data = await res.json();
setCourts(data.data || []); // Courts API returns array directly, map pricePerHour to hourlyRate for frontend
const courtsArray = Array.isArray(data) ? data : data.data || [];
setCourts(courtsArray.map((c: Record<string, unknown>) => ({
...c,
hourlyRate: c.pricePerHour ?? c.hourlyRate,
})));
} }
} catch (error) { } catch (error) {
console.error("Error fetching courts:", error); console.error("Error fetching courts:", error);
@@ -494,14 +499,14 @@ export default function SettingsPage() {
<td className="px-4 py-3"> <td className="px-4 py-3">
<span <span
className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${ className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
court.status === "active" ["active", "AVAILABLE"].includes(court.status)
? "bg-accent/10 text-accent-700" ? "bg-accent/10 text-accent-700"
: court.status === "maintenance" : ["maintenance", "MAINTENANCE"].includes(court.status)
? "bg-amber-100 text-amber-700" ? "bg-amber-100 text-amber-700"
: "bg-gray-100 text-gray-600" : "bg-gray-100 text-gray-600"
}`} }`}
> >
{court.status === "active" ? "Active" : court.status === "maintenance" ? "Maintenance" : "Inactive"} {["active", "AVAILABLE"].includes(court.status) ? "Active" : ["maintenance", "MAINTENANCE"].includes(court.status) ? "Maintenance" : "Inactive"}
</span> </span>
</td> </td>
<td className="px-4 py-3 text-right"> <td className="px-4 py-3 text-right">
@@ -726,10 +731,11 @@ function CourtFormModal({
siteId, siteId,
type, type,
hourlyRate: parseFloat(hourlyRate), hourlyRate: parseFloat(hourlyRate),
pricePerHour: parseFloat(hourlyRate),
peakHourlyRate: peakHourlyRate ? parseFloat(peakHourlyRate) : null, peakHourlyRate: peakHourlyRate ? parseFloat(peakHourlyRate) : null,
status, status,
isOpenPlay, isOpenPlay,
}); } as Partial<Court> & { pricePerHour?: number });
}; };
return ( return (