From b7c02c94181a8d24f5d3cf06756ea274c177b1ed Mon Sep 17 00:00:00 2001
From: Guillermo Pages <mail@guillermo.at>
Date: Fri, 7 Nov 2025 22:05:52 +0100
Subject: [PATCH] fix(admin): remove blur auto-close + parse settings from GET
 response

Fixed two critical issues:

1. Profile form blur bug - ACTUAL FIX:
   - Removed ALL blur auto-close handlers from EditableField component
   - Removed blur auto-close from name and timezone inline inputs
   - Users can now type freely without inputs closing prematurely
   - Form uses Save/Cancel buttons for submission, not blur events

2. Settings parsing from GET response:
   - Backend GET /admin/clubs/{id} returns nested structure with club object
   - Updated getClubProfile to extract club from response.club
   - Settings now properly loaded and displayed from GET response
   - PATCH response already worked (returns club directly)

Root cause of blur bug: blur handlers were closing inputs when field had
content, but this prevented multi-character input. Removed blur logic
entirely since form has explicit Save/Cancel buttons.

Impact: Profile form now fully functional for editing all fields including
settings (address + contact). Settings persist and display correctly.

Related: BUILD #20, Backend Brooke BUILD:297 (settings support)
---
 .../admin/clubs/[club_id]/tabs/ClubProfileTab.tsx      | 10 ----------
 src/lib/api/courts.ts                                  |  5 ++++-
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/app/[locale]/admin/clubs/[club_id]/tabs/ClubProfileTab.tsx b/src/app/[locale]/admin/clubs/[club_id]/tabs/ClubProfileTab.tsx
index 42144a3..198ff5a 100644
--- a/src/app/[locale]/admin/clubs/[club_id]/tabs/ClubProfileTab.tsx
+++ b/src/app/[locale]/admin/clubs/[club_id]/tabs/ClubProfileTab.tsx
@@ -36,20 +36,12 @@ function EditableField({
 }: EditableFieldProps) {
   const hasValue = value && value.trim().length > 0;
 
-  function handleBlur() {
-    // Only close edit mode if field has content
-    if (value && value.trim().length > 0) {
-      onToggleEdit();
-    }
-  }
-
   if (isEditing || !hasValue) {
     return (
       <input
         type={type}
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        onBlur={handleBlur}
         autoFocus
         placeholder={placeholder}
         maxLength={maxLength}
@@ -323,7 +315,6 @@ export default function ClubProfileTab({ clubId, onUpdate }: ClubProfileTabProps
                   type="text"
                   value={name}
                   onChange={(e) => setName(e.target.value)}
-                  onBlur={() => hasFieldValue(name) && toggleEditField('name')}
                   autoFocus
                   className={`w-full px-4 py-3 border-2 rounded-lg font-medium transition-colors ${
                     errors.name
@@ -355,7 +346,6 @@ export default function ClubProfileTab({ clubId, onUpdate }: ClubProfileTabProps
                 <select
                   value={timezone}
                   onChange={(e) => setTimezone(e.target.value)}
-                  onBlur={() => toggleEditField('timezone')}
                   autoFocus
                   className={`w-full px-4 py-3 border-2 rounded-lg font-medium transition-colors ${
                     errors.timezone
diff --git a/src/lib/api/courts.ts b/src/lib/api/courts.ts
index c3fd732..744ada9 100644
--- a/src/lib/api/courts.ts
+++ b/src/lib/api/courts.ts
@@ -54,7 +54,10 @@ export async function getClubProfile(clubId: number): Promise<ApiResult<ClubProf
       return { success: false, error };
     }
 
-    const data: ClubProfile = await response.json();
+    const responseData = await response.json();
+    // Backend returns { club: {...}, courts: [], provider: {...}, ... }
+    // Extract the club object
+    const data: ClubProfile = responseData.club;
     return { success: true, data };
   } catch (error) {
     return {