upload

DOCS/CLUB_MODAL_IMPLEMENTATION.md

@@ -0,0 +1,52 @@
+# Club Modal Implementation
+
+## Overview
+Added an interactive modal that displays detailed club information when clicking on any team in the league tables.
+
+## Features
+- **Click-to-view**: Users can click on any club row in the table to view details
+- **Club Information Display**:
+  - Club logo with fallback
+  - Club name
+  - Current rank position badge
+  - Statistics (matches played, wins, draws, losses, score, points)
+  - Direct link to FACR profile
+- **Modern UI**: Clean modal design with blur backdrop effect
+
+## Components Modified
+
+### 1. New Component: `ClubModal.tsx`
+- Location: `frontend/src/components/home/ClubModal.tsx`
+- Displays club details in a modal dialog
+- Supports both football and futsal club types
+- Generates FACR profile links dynamically
+
+### 2. `LeagueTablePro.tsx` (Homepage)
+- Added modal state management
+- Made table rows clickable with hover cursor
+- Integrated ClubModal component
+
+### 3. `TableSection.tsx` (Alternative Homepage)
+- Added modal state management
+- Made table rows clickable with hover cursor
+- Integrated ClubModal component
+
+### 4. `TablesPage.tsx` (Tables Page)
+- Added modal state management
+- Made table rows clickable with hover cursor
+- Integrated ClubModal component
+- Extended TableRow type to include `team_id` for FACR links
+
+## User Experience
+1. User clicks on any team row in the standings table
+2. Modal opens with smooth animation and backdrop blur
+3. Displays comprehensive club statistics
+4. User can click "Zobrazit na FAČR" to open the club's official profile
+5. Modal closes via close button, X button, or clicking outside
+
+## Technical Details
+- **Chakra UI Modal** component for consistent design
+- **State management** via React hooks (useState)
+- **TypeScript** typed props for type safety
+- **Responsive** design that works on all screen sizes
+- **Fallback handling** for missing logos or data