From 45e859694b67d70a77071b0d99a0a048f6b3420a Mon Sep 17 00:00:00 2001
From: Guillermo Pages <mail@guillermo.at>
Date: Sat, 8 Nov 2025 22:44:25 +0100
Subject: [PATCH] fix(slot-definitions): show actual court names in dropdown

Changed from hardcoded MOCK_COURTS to fetching real court data from club detail API.
Dropdown now shows actual court names (e.g., 'Padel 1', 'Tennis Int 1') instead of generic 'Court 1', 'Court 2'.

Changes:
- Fetch courts from getAdminClubDetail() on component mount
- Pass real courts array to SlotDefinitionForm
- Split loadData() (courts + definitions) and loadDefinitions() (refresh after CRUD)

Artifacts: src/app/[locale]/admin/clubs/[club_id]/slot-definitions/SlotDefinitionsComponent.tsx:36-38,298
---
 .../SlotDefinitionsComponent.tsx              | 38 ++++++++++++++-----
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/app/[locale]/admin/clubs/[club_id]/slot-definitions/SlotDefinitionsComponent.tsx b/src/app/[locale]/admin/clubs/[club_id]/slot-definitions/SlotDefinitionsComponent.tsx
index 5ead518..2b06f68 100644
--- a/src/app/[locale]/admin/clubs/[club_id]/slot-definitions/SlotDefinitionsComponent.tsx
+++ b/src/app/[locale]/admin/clubs/[club_id]/slot-definitions/SlotDefinitionsComponent.tsx
@@ -7,6 +7,8 @@ import useTranslation from '@/src/hooks/useTranslation';
 import { getSlotDefinitions, getMockSlotDefinitions, deleteSlotDefinition } from '@/src/lib/api/slot-definitions';
 import type { SlotDefinition, SlotDefinitionError } from '@/src/types/slot-definitions';
 import { DAY_NAMES, formatTime, calculateEndTime } from '@/src/types/slot-definitions';
+import { getAdminClubDetail } from '@/src/lib/api/admin-clubs';
+import type { Court } from '@/src/types/courts';
 import SlotDefinitionForm from './SlotDefinitionForm';
 import MaterialisationStatusPanel from './MaterialisationStatusPanel';
 
@@ -14,28 +16,28 @@ interface SlotDefinitionsComponentProps {
   clubId: number;
 }
 
-// Mock courts data (will come from parent/API later)
-const MOCK_COURTS = [
-  { court_id: 101, name: 'Court 1' },
-  { court_id: 102, name: 'Court 2' },
-  { court_id: 103, name: 'Court 3' },
-];
-
 export default function SlotDefinitionsComponent({ clubId }: SlotDefinitionsComponentProps) {
   const { t, locale } = useTranslation();
   const [definitions, setDefinitions] = useState<SlotDefinition[]>([]);
+  const [courts, setCourts] = useState<Court[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<SlotDefinitionError | null>(null);
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [editingDefinition, setEditingDefinition] = useState<SlotDefinition | undefined>(undefined);
 
   useEffect(() => {
-    loadDefinitions();
+    loadData();
   }, [clubId]);
 
-  async function loadDefinitions() {
+  async function loadData() {
     setLoading(true);
 
+    // Fetch club detail to get courts with actual names
+    const clubResult = await getAdminClubDetail(clubId);
+    if (clubResult.success) {
+      setCourts(clubResult.data.courts);
+    }
+
     // Use mock data for now (until backend is ready)
     const USE_MOCKS = true;
 
@@ -59,6 +61,22 @@ export default function SlotDefinitionsComponent({ clubId }: SlotDefinitionsComp
     setLoading(false);
   }
 
+  async function loadDefinitions() {
+    // Reload just definitions (for after create/edit/delete)
+    const USE_MOCKS = true;
+
+    if (USE_MOCKS) {
+      await new Promise(resolve => setTimeout(resolve, 300));
+      setDefinitions(getMockSlotDefinitions());
+      return;
+    }
+
+    const result = await getSlotDefinitions(clubId);
+    if (result.success) {
+      setDefinitions(result.data);
+    }
+  }
+
   function handleCreate() {
     setEditingDefinition(undefined);
     setShowCreateModal(true);
@@ -277,7 +295,7 @@ export default function SlotDefinitionsComponent({ clubId }: SlotDefinitionsComp
       {showCreateModal && (
         <SlotDefinitionForm
           clubId={clubId}
-          courts={MOCK_COURTS}
+          courts={courts}
           definition={editingDefinition}
           onClose={handleFormClose}
           onSuccess={handleFormSuccess}