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:

// 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:

// 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:

// 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:

{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:

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