MyClub/DOCS/CONTACTS_ADMIN_FIXES.md

# Contacts Admin Page - Fixes Summary

## Issues Fixed

### 1. ✅ Save Failure (400 Bad Request)
**Problem:** The save operation was failing with a 400 error due to improper type casting and sending undefined values.

**Solution:**
- Removed excessive `as any` type casts throughout the payload construction
- Added proper type validation for latitude, longitude, and zoom level
- Filter out undefined values from payload to prevent backend validation errors
- Only send defined fields to the API

**Changes in `ContactsAdminPage.tsx`:**
```typescript
// Before (problematic)
const payload = {
  location_latitude: (settings as any).location_latitude as any,
  show_map_on_homepage: hasCoordinates as any,
  // ... excessive casting
}

// After (fixed)
const lat = typeof settings.location_latitude === 'number' ? settings.location_latitude : undefined;
const lng = typeof settings.location_longitude === 'number' ? settings.location_longitude : undefined;
const payload: Partial<AdminSettings> = {};
if (lat !== undefined) payload.location_latitude = lat;
// ... proper type handling
```

### 2. ✅ Missing Contact Fields from Initial Setup
**Problem:** `contact_phone` and `contact_email` were not being saved during initial setup despite being sent by the frontend.

**Solution:**
- Added `ContactPhone` and `ContactEmail` fields to the backend's `SetupInitialize` request body
- Added handling logic to save these fields in the settings table
- Also added `MapStyle` field support for complete setup

**Changes in `base_controller.go`:**
```go
// Added to reqBody struct (line ~1881-1882)
ContactPhone      string  `json:"contact_phone"`
ContactEmail      string  `json:"contact_email"`
MapStyle          string  `json:"map_style"`

// Added save logic (line ~2026-2040)
if v := strings.TrimSpace(body.ContactPhone); v != "" {
    s.ContactPhone = v
}
if v := strings.TrimSpace(body.ContactEmail); v != "" {
    s.ContactEmail = v
}
if v := strings.TrimSpace(body.MapStyle); v != "" {
    s.MapStyle = v
}
```

### 3. ✅ Map Style Matching Issues
**Problem:** Map style was not properly syncing between admin preview and actual map display.

**Solution:**
- Fixed type casting issues in map style handling
- Ensured default value of 'positron' is used consistently
- Added proper value passing to MapStyleSelector component

**Changes:**
- Removed `(settings as any).map_style` casts
- Used `settings.map_style || 'positron'` consistently
- Fixed MapStyleSelector value prop to use proper type

### 4. ✅ Enhanced Dark Mode Support
**Problem:** Dark mode colors were incomplete, making the page hard to read in dark mode.

**Solution:**
- Added comprehensive color mode values for all major UI elements
- Enhanced both `ContactsAdminPage` and `MapStyleSelector` with dark mode support

**New Color Variables Added:**
```typescript
// ContactsAdminPage.tsx
const bgMain = useColorModeValue('gray.50', 'gray.900');
const tableBg = useColorModeValue('white', 'gray.800');
const hoverBg = useColorModeValue('gray.50', 'gray.700');
const infoBg = useColorModeValue('blue.50', 'blue.900');
const infoBorder = useColorModeValue('blue.200', 'blue.700');

// MapStyleSelector.tsx
const previewBg = useColorModeValue('gray.50', 'gray.700');
const tipsBg = useColorModeValue('blue.50', 'blue.900');
const tipsBorder = useColorModeValue('blue.200', 'blue.700');
const textColor = useColorModeValue('gray.700', 'gray.300');
const secondaryText = useColorModeValue('gray.600', 'gray.400');
const selectBg = useColorModeValue('white', 'gray.700');
```

### 5. ✅ Live Map Preview Enhancement
**Problem:** No way to see the actual map with current coordinates before saving.

**Solution:**
- Added a live map preview section that only shows when coordinates are set
- Preview uses the actual club coordinates, address, name, and selected style
- Provides real-time feedback on how the map will appear to visitors

**New Feature:**
```tsx
{settings.location_latitude && settings.location_longitude && (
  <Box bg={cardBg} p={6} borderRadius="lg" borderWidth="1px" borderColor={borderColor}>
    <VStack align="stretch" spacing={3}>
      <HStack justify="space-between">
        <Heading size="md">Náhled vaší mapy</Heading>
        <Badge colorScheme="green">Aktuální poloha</Badge>
      </HStack>
      <Text fontSize="sm" color={textSecondary}>
        Toto je náhled mapy s vaší aktuální polohou a vybraným stylem.
      </Text>
      <ContactMap
        latitude={settings.location_latitude}
        longitude={settings.location_longitude}
        zoom={settings.map_zoom_level || 15}
        address={`${settings.contact_address || ''}${settings.contact_city ? ', ' + settings.contact_city : ''}`}
        clubName={settings.club_name}
        mapStyle={settings.map_style || 'positron'}
        clubPrimaryColor={settings.primary_color}
        clubSecondaryColor={settings.accent_color}
        height={400}
      />
    </VStack>
  </Box>
)}
```

### 6. ✅ Better Error Handling
**Problem:** Generic error messages didn't help diagnose issues.

**Solution:**
- Enhanced error toast to show detailed backend error messages
- Added console logging of full error objects for debugging
- Increased toast duration and made it closable for better UX

**Changes:**
```typescript
const errorMsg = error?.response?.data?.chyba || 
                 error?.response?.data?.detail || 
                 error?.response?.data?.error || 
                 error?.message || 
                 'Uložení nastavení se nezdařilo';
console.error('Settings save error:', error);
toast({
  title: 'Chyba při ukládání',
  description: errorMsg,
  status: 'error',
  duration: 5000,
  isClosable: true,
});
```

## Files Modified

### Frontend
1. **`frontend/src/pages/admin/ContactsAdminPage.tsx`**
   - Fixed type handling in `handleSaveSettings`
   - Added comprehensive dark mode colors
   - Added live map preview section
   - Enhanced error handling
   - Improved UI with better visual hierarchy

2. **`frontend/src/components/admin/MapStyleSelector.tsx`**
   - Added complete dark mode support
   - Enhanced color contrast for readability

### Backend
3. **`internal/controllers/base_controller.go`**
   - Added `ContactPhone` and `ContactEmail` fields to setup request body
   - Added save logic for phone, email, and map style during initial setup
   - Ensures data from setup page is properly persisted

## Testing Checklist

- [ ] Initial setup: Verify contact_phone and contact_email are saved
- [ ] Admin page: Verify all contact fields load correctly
- [ ] Admin page: Verify save button works without 400 error
- [ ] Admin page: Verify map style selector shows correct preview
- [ ] Admin page: Verify live map preview shows actual coordinates
- [ ] Admin page: Test in both light and dark modes
- [ ] Frontend: Verify map displays correctly with saved settings
- [ ] Backend: Check database that all fields are persisted

## Benefits

1. **Reliability:** No more 400 errors when saving settings
2. **Data Integrity:** All contact fields are now properly saved from initial setup
3. **User Experience:** Live preview lets admins see exactly how the map will look
4. **Accessibility:** Comprehensive dark mode support improves readability
5. **Debugging:** Better error messages help diagnose issues quickly

## Notes

- The default map style is now consistently set to 'positron' (clean light map)
- All type casting has been properly handled to prevent validation errors
- The page now provides real-time visual feedback for all map-related settings
- Dark mode colors maintain proper contrast ratios for accessibility