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>

apps/web/app/(admin)/settings/page.tsx

@@ -103,7 +103,12 @@ export default function SettingsPage() {
       const res = await fetch("/api/courts");
       if (res.ok) {
         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) {
       console.error("Error fetching courts:", error);
@@ -494,14 +499,14 @@ export default function SettingsPage() {
                         <td className="px-4 py-3">
                           <span
                             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"
-                                : court.status === "maintenance"
+                                : ["maintenance", "MAINTENANCE"].includes(court.status)
                                 ? "bg-amber-100 text-amber-700"
                                 : "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>
                         </td>
                         <td className="px-4 py-3 text-right">
@@ -726,10 +731,11 @@ function CourtFormModal({
       siteId,
       type,
       hourlyRate: parseFloat(hourlyRate),
+      pricePerHour: parseFloat(hourlyRate),
       peakHourlyRate: peakHourlyRate ? parseFloat(peakHourlyRate) : null,
       status,
       isOpenPlay,
-    });
+    } as Partial<Court> & { pricePerHour?: number });
   };
 
   return (