Konzept: Vereinheitlichung der Zuweisungs-UIs (Assignment UIs)¶

tfx_gruppen (int_gruppenid, int_vereineid, var_name)
  ↓ M:N via tfx_gruppen_x_teilnehmer
tfx_teilnehmer

VIRTUAL Squad Object (in-memory, nicht in DB)
  ↓ M:N via tfx_riegen_x_disziplinen
tfx_disziplinen (Geräte: Reck, Barren, etc.)

tfx_mannschaften (
  int_mannschaftenid, 
  int_wettkaempfeid NOT NULL,  -- PFLICHT!
  int_vereineid NOT NULL,       -- PFLICHT!
  int_nummer, 
  var_riege, 
  int_startnummer
)
  ↓ M:N via tfx_man_x_teilnehmer
tfx_teilnehmer

tfx_teilnehmer (
  int_teilnehmerid, 
  int_vereineid, 
  var_vorname, 
  var_nachname, 
  int_geschlecht, 
  dat_geburtstag
)
  ↓ 1:N via tfx_wertungen (M:N Join-Table!)
tfx_wettkaempfe (competitions within event)

Container (Team) ↔ Items (Participants) zuweisen
↑
Fokus: Teilnehmer zwischen Teams hin- und herbewegen

Stufe 1: Athlete → Event hinzufügen (wird zu EventParticipant)
Stufe 2: EventParticipant ↔ Competitions zuweisen (M:N)
↑
Fokus: Competitions an bestehende Participants zuweisen

┌─────────────────────────────────────────────────┐
│  Person bearbeiten                             │
├─────────────────────────────────────────────────┤
│  Name:      [Max Mustermann          ]         │
│  Geburtstag: [01.01.2000             ]         │
│                                                 │
│  ┌─ Profil-Details ────────────────────────┐   │
│  │ Bio:     [Sportler seit...          ]   │   │
│  │ Website: [https://...               ]   │   │
│  │ Foto:    [Upload...]                    │   │
│  └─────────────────────────────────────────┘   │
│                                                 │
│  [Speichern] [Abbrechen]                       │
└─────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────┐
│  Event: Bezirksmeisterschaft 2025              │
├─────────────────────────────────────────────────┤
│  [Filter: Verein ▼] [Filter: Geschlecht ▼]    │
├─────────────────────────────────────────────────┤
│  Teilnehmer-Liste (Tabelle/Cards)              │
│  ┌──────────────────────────────────────────┐  │
│  │ □ Max Mustermann | TV Musterstadt | m   │  │
│  │ □ Anna Beispiel  | SV Beispiel    | w   │  │
│  │ □ Peter Test     | TV Musterstadt | m   │  │
│  └──────────────────────────────────────────┘  │
│  [+ Teilnehmer hinzufügen] [Bulk-Actions]     │
└─────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────┐
│  Gruppe: "U12 Jungs" - Mitglieder verwalten   [X] │
├─────────────────────────────────────────────────────┤
│  [Search: Suche...]  [Filter: Verein ▼]           │
├──────────────────────┬──────────────────────────────┤
│  Verfügbar (25)      │  Zugewiesen zu Gruppe (8)   │
│  ┌────────────────┐  │  ┌────────────────┐         │
│  │ ☐ Max M.   [→] │  │  │ ☑ Anna B.  [←] │         │
│  │ ☐ Peter T. [→] │  │  │ ☑ Lisa S.  [←] │         │
│  │ ☐ Tom K.   [→] │  │  │ ☑ Jan W.   [←] │         │
│  │   ...          │  │  │   ...          │         │
│  └────────────────┘  │  └────────────────┘         │
│  [Assign Selected]   │  [Remove Selected]          │
└──────────────────────┴──────────────────────────────┘

┌───────────────────────────────────────────────────────────────┐
│  Riegen Management                                   [X]      │
├───────────────────────────────────────────────────────────────┤
│  [Search] [Filter: Verein ▼] [Filter: Wettkampf ▼]          │
├──────────────┬─────────────────────┬──────────────────────────┤
│  Riegen (5)  │  Verfügbar (50)     │  Riege "A" Details      │
│  ┌────────┐  │  ┌──────────────┐   │  ┌──────────────────┐   │
│  │▶ Riege A│  │  │☐ Max M.  [→] │   │  │☑ Anna B.    [←]  │   │
│  │  Riege B│  │  │☐ Peter T.[→] │   │  │☑ Lisa S.    [←]  │   │
│  │  Riege C│  │  │☐ Tom K.  [→] │   │  │☑ Jan W.     [←]  │   │
│  │  + Neu  │  │  │   ...        │   │  │   ...            │   │
│  └────────┘  │  └──────────────┘   │  └──────────────────┘   │
│              │                     │                          │
│  Master-List │  Available Items    │  Detail-Pane             │
│  (Container) │  (zum Zuweisen)     │  (Zugewiesene + Info)    │
└──────────────┴─────────────────────┴──────────────────────────┘

Event: "Bezirksmeisterschaft 2025"
├── Teilnehmer: Max Mustermann
├── Teilnehmer: Anna Beispiel
├── Teilnehmer: Peter Test
└── Teilnehmer: Lisa Schmidt

→ Jeder Teilnehmer gehört NUR zu diesem Event
→ Fokus: Liste anzeigen, filtern, bearbeiten
→ UI: Tabelle/Cards mit Filtern

Riege A (Boden)          Teilnehmer            Riege B (Sprung)
├── Max Mustermann ←───→ Max Mustermann ←───→ (auch hier!)
├── Anna Beispiel  ←───→ Anna Beispiel  ←───→ (auch hier!)
└── Peter Test                                └── Lisa Schmidt

→ Max und Anna sind in BEIDEN Riegen
→ Fokus: Items zwischen Riegen hin- und herbewegen
→ UI: Two/Three-Column Assignment mit "Verfügbar"/"Zugewiesen"

Beziehungstyp?
│
├─ 1:1 (One-to-One)
│  └─ Inline-Formular oder Modal mit Autocomplete
│
├─ 1:N (One-to-Many)
│  └─ Anzahl Items?
│     ├─ Wenig (<20)     → Master-Detail (links Liste, rechts Details)
│     ├─ Mittel (20-100) → Tabelle mit Inline-Edit
│     └─ Viel (>100)     → Tabelle + Filter + Pagination
│
└─ M:N (Many-to-Many)
   └─ Gibt es mehrere "Container"?
      ├─ Nein (1 Container)
      │  └─ Anzahl Items?
      │     ├─ Wenig (<20)     → Single-Column (Dropdown + Liste)
      │     ├─ Mittel (20-50)  → Two-Column Assignment
      │     └─ Viel (>50)      → Two-Column + Search + Filter
      │
      └─ Ja (Mehrere Container, z.B. mehrere Riegen)
         └─ Three-Column Master-Detail
            ├─ Spalte 1: Container-Auswahl (Master-List)
            ├─ Spalte 2: Verfügbare Items (Available-List)
            └─ Spalte 3: Zugewiesene Items + Details (Detail-Pane)

// Daten-Struktur
disciplines: { disciplineId: number; maxScore: number }[]

// UI-Features
- Gender-basierte Filterung
- Disziplinen-Gruppen Dropdown
- Bulk-Actions (alle setzen)
- Inline validation
- Visuelles Feedback (bereits zugewiesen)

// UI-Features
- Multi-select für Teilnehmer
- Dropdown für Wettkampf-Auswahl
- Bulk-Zuweisung
- Status-Badge mit Count

// UI-Features
- Master-List: Riegen-Auswahl (links)
- Available List: Teilnehmer zum Zuweisen (mitte)
- Detail Pane: Zugewiesene Teilnehmer + Riegen-Info (rechts)
- Click-to-assign (Pfeil-Button)
- Umfangreiche Filter (gender, club, competition)
- Virtuelle "Nicht zugeordnet" Riege
- Competition-basiertes Highlighting
- PDF Export
- 3-Spalten Grid Layout: lg:grid-cols-3

// UI-Features
- Dropdown mit verfügbaren Teilnehmern
- Liste der aktuellen Mitglieder
- Add/Remove Buttons
- Automatische Filterung (gleicher Verein)
- Keine Duplikate möglich

// UI-Features
- Dropdown mit verfügbaren Penalty-Types
- Liste mit zugewiesenen Penalties
- Automatische Duplikat-Vermeidung
- Sofortige Punktzahl-Anzeige

// UI-Features
- Suchfeld für Teilnehmer
- Tabelle mit allen verfügbaren Teilnehmern
- Gender-Badge Anzeige
- Club-Anzeige
- Add-Button pro Zeile

interface AssignmentItem {
  id: number;
  displayName: string;
  secondaryInfo?: string;
  metadata?: Record<string, any>;
  badge?: {
    text: string;
    variant: 'success' | 'warning' | 'info' | 'error';
  };
}

// NEW: Container für Master-Detail Pattern (z.B. Riegen)
interface AssignmentContainer {
  id: number | string;
  name: string;
  displayName: string;
  itemCount: number;
  metadata?: Record<string, any>;
  isVirtual?: boolean;
  badge?: {
    text: string;
    variant: 'success' | 'warning' | 'info' | 'error';
  };
}

interface AssignmentConfig<TItem extends AssignmentItem = AssignmentItem> {
  // Titles & Labels
  title: string;
  availableLabel: string;
  assignedLabel: string;
  searchPlaceholder: string;
  emptyAvailableMessage: string;
  emptyAssignedMessage: string;

  // Data
  availableItems: TItem[];
  assignedItems: TItem[];

  // Master-Detail Pattern (NEW - optional, for 3-column layout)
  containers?: AssignmentContainer[];
  selectedContainer?: AssignmentContainer | null;
  onContainerSelect?: (container: AssignmentContainer) => void;
  onContainerCreate?: () => void;
  onContainerDelete?: (containerId: number | string) => void;
  containerLabel?: string; // e.g. "Riegen", "Teams"

  // Actions
  onAssign: (item: TItem, containerId?: number | string) => Promise<void>;
  onUnassign: (item: TItem, containerId?: number | string) => Promise<void>;
  onBulkAssign?: (items: TItem[], containerId?: number | string) => Promise<void>;
  onBulkUnassign?: (items: TItem[], containerId?: number | string) => Promise<void>;

  // Features
  enableSearch?: boolean;
  enableBulkActions?: boolean;
  enableDragDrop?: boolean;
  enableFilters?: boolean;
  filters?: AssignmentFilter[];

  // Display
  displayMode?: 'two-column' | 'three-column' | 'single-column' | 'checkbox-grid';
  columns?: AssignmentColumn[];

  // Additional data per assignment
  additionalFields?: AssignmentField[];

  // Validation
  validateAssignment?: (item: TItem, containerId?: number | string) => string | null;

  // Custom renderers
  renderItem?: (item: TItem) => React.ReactNode;
  renderBadge?: (item: TItem) => React.ReactNode;
  renderContainer?: (container: AssignmentContainer) => React.ReactNode; // NEW
  renderDetailPane?: (container: AssignmentContainer, items: TItem[]) => React.ReactNode; // NEW
}

interface AssignmentFilter {
  id: string;
  label: string;
  type: 'select' | 'text' | 'checkbox';
  options?: { value: string; label: string }[];
  filterFn: (item: AssignmentItem, value: any) => boolean;
}

interface AssignmentColumn {
  id: string;
  label: string;
  width?: string;
  render: (item: AssignmentItem) => React.ReactNode;
  sortable?: boolean;
}

interface AssignmentField {
  id: string;
  label: string;
  type: 'number' | 'text' | 'select';
  required?: boolean;
  defaultValue?: any;
  options?: { value: any; label: string }[];
  validate?: (value: any) => string | null;
}

┌─────────────────────────────────────────────────────┐
│  Modal Title                              [X]       │
├─────────────────────────────────────────────────────┤
│  [Search] [Filter ▼] [Filter ▼]                   │
├──────────────────────┬──────────────────────────────┤
│  Verfügbar (50)      │  Zugewiesen (12)            │
│  ┌────────────────┐  │  ┌────────────────┐         │
│  │ ☐ Item 1   [→] │  │  │ ☑ Item A   [X] │         │
│  │ ☐ Item 2   [→] │  │  │ ☑ Item B   [X] │         │
│  │ ☐ Item 3   [→] │  │  │ ☑ Item C   [X] │         │
│  │   ...          │  │  │   ...          │         │
│  └────────────────┘  │  └────────────────┘         │
│  [Assign Selected]   │  [Remove Selected]          │
└──────────────────────┴──────────────────────────────┘

┌───────────────────────────────────────────────────────────────┐
│  Squad Management                                    [X]      │
├───────────────────────────────────────────────────────────────┤
│  [Search] [Filter ▼] [Filter ▼] [Filter ▼]                  │
├──────────────┬─────────────────────┬──────────────────────────┤
│  Riegen (5)  │  Verfügbar (50)     │  Riege "A" Details      │
│  ┌────────┐  │  ┌──────────────┐   │  ┌──────────────────┐   │
│  │▶ Riege A│  │  │☐ Person 1 [→]│   │  │☑ Person X    [←] │   │
│  │  Riege B│  │  │☐ Person 2 [→]│   │  │☑ Person Y    [←] │   │
│  │  Riege C│  │  │☐ Person 3 [→]│   │  │☑ Person Z    [←] │   │
│  │  + Neu  │  │  │   ...        │   │  │   ...            │   │
│  └────────┘  │  └──────────────┘   │  └──────────────────┘   │
│              │                     │                          │
│              │  [Assign Selected]  │  Competitions:           │
│              │                     │  • Competition 1         │
│              │                     │  • Competition 2         │
│              │                     │                          │
│              │                     │  [Delete Squad]          │
└──────────────┴─────────────────────┴──────────────────────────┘

┌─────────────────────────────────────────────────────┐
│  Modal Title                              [X]       │
├─────────────────────────────────────────────────────┤
│  Zugewiesen (5)                                    │
│  ┌─────────────────────────────────────────────┐   │
│  │ ● Item A                           [Remove] │   │
│  │ ● Item B                           [Remove] │   │
│  │ ● Item C                           [Remove] │   │
│  └─────────────────────────────────────────────┘   │
│                                                     │
│  Verfügbar hinzufügen                              │
│  [Dropdown: Select item...        ▼] [Add]        │
│  oder                                              │
│  [Search: Type to search...]                       │
│  ┌─────────────────────────────────────────────┐   │
│  │ ○ Item 1                          [Add]     │   │
│  │ ○ Item 2                          [Add]     │   │
│  │ ○ Item 3                          [Add]     │   │
│  └─────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────┐
│  Select Disciplines                                │
│  [Filter by group: All ▼]                         │
│  ┌─────────────────────────────────────────────┐   │
│  │ ☑ Boden      [Max Score: 10.0]            │   │
│  │ ☐ Sprung     [Max Score: 10.0]            │   │
│  │ ☑ Barren     [Max Score: 10.0]            │   │
│  │ ☐ Reck       [Max Score: 10.0]            │   │
│  └─────────────────────────────────────────────┘   │
│  [Set all to: 10.0] [Apply]                       │
└─────────────────────────────────────────────────────┘

UnifiedAssignmentModal (Container)
├── AssignmentHeader
│   ├── Title
│   ├── SearchBar
│   └── FilterBar
├── AssignmentContent (Layout-specific)
│   ├── TwoColumnLayout
│   │   ├── AvailableList
│   │   │   ├── AssignmentItem[]
│   │   │   └── BulkActions
│   │   └── AssignedList
│   │       ├── AssignmentItem[]
│   │       └── BulkActions
│   ├── ThreeColumnLayout (NEW - Master-Detail)
│   │   ├── MasterList (Container Selection)
│   │   │   ├── ContainerItem[]
│   │   │   └── CreateButton
│   │   ├── AvailableList
│   │   │   ├── AssignmentItem[]
│   │   │   └── BulkActions
│   │   └── DetailPane (Selected Container)
│   │       ├── ContainerInfo
│   │       ├── AssignedList
│   │       │   └── AssignmentItem[]
│   │       └── ContainerActions
│   ├── SingleColumnLayout
│   │   ├── AssignedList
│   │   ├── DropdownSelector
│   │   └── AvailableList
│   └── InlineCheckboxLayout
│       ├── FilterRow
│       └── CheckboxGrid
└── AssignmentFooter
    ├── Stats
    └── Actions (Save/Cancel)

// Internal state
interface AssignmentState {
  // Data
  availableItems: AssignmentItem[];
  assignedItems: AssignmentItem[];

  // UI State
  searchTerm: string;
  filters: Record<string, any>;
  selectedAvailable: Set<number>;
  selectedAssigned: Set<number>;

  // Operation State
  isLoading: boolean;
  isSaving: boolean;
  error: string | null;

  // Drag & Drop (if enabled)
  draggedItem: AssignmentItem | null;
}

// Actions
type AssignmentAction =
  | { type: 'SET_SEARCH'; payload: string }
  | { type: 'SET_FILTER'; payload: { key: string; value: any } }
  | { type: 'SELECT_AVAILABLE'; payload: number[] }
  | { type: 'SELECT_ASSIGNED'; payload: number[] }
  | { type: 'ASSIGN_ITEMS'; payload: AssignmentItem[] }
  | { type: 'UNASSIGN_ITEMS'; payload: AssignmentItem[] }
  | { type: 'SET_LOADING'; payload: boolean }
  | { type: 'SET_ERROR'; payload: string | null };

// Backend-Seite standardisieren
interface AssignmentEndpoints {
  // Get available items (not yet assigned)
  getAvailable: (entityId: number, params?: Record<string, any>) => Promise<TItem[]>;

  // Get assigned items
  getAssigned: (entityId: number) => Promise<TItem[]>;

  // Assign single item
  assign: (entityId: number, itemId: number, data?: Record<string, any>) => Promise<void>;

  // Unassign single item
  unassign: (entityId: number, itemId: number) => Promise<void>;

  // Bulk assign (optional)
  bulkAssign?: (entityId: number, itemIds: number[], data?: Record<string, any>) => Promise<void>;

  // Bulk unassign (optional)
  bulkUnassign?: (entityId: number, itemIds: number[]) => Promise<void>;
}

<UnifiedAssignmentModal
  isOpen={isOpen}
  onClose={onClose}
  config={{
    title: t('groups.members.title', { name: group.name }),
    availableLabel: t('groups.members.available'),
    assignedLabel: t('groups.members.assigned'),
    searchPlaceholder: t('groups.members.searchPlaceholder'),

    displayMode: 'list',
    enableSearch: true,
    enableBulkActions: false,

    availableItems: availableParticipants.map(p => ({
      id: p.id,
      displayName: `${p.firstname} ${p.lastname}`,
      secondaryInfo: p.club,
      badge: { text: p.gender, variant: 'info' }
    })),

    assignedItems: members.map(m => ({
      id: m.id,
      displayName: `${m.firstname} ${m.lastname}`,
      secondaryInfo: m.club
    })),

    onAssign: async (item) => {
      await apiPost(`/groups/${group.id}/members`, {
        participantId: item.id
      });
    },

    onUnassign: async (item) => {
      await apiDelete(`/groups/${group.id}/members/${item.id}`);
    },

    filters: [
      {
        id: 'club',
        label: t('common.club'),
        type: 'select',
        options: clubOptions,
        filterFn: (item, value) => item.metadata?.clubId === value
      }
    ]
  }}
/>

<UnifiedAssignmentModal
  isOpen={isOpen}
  onClose={onClose}
  config={{
    title: t('squadManagement.title'),
    availableLabel: t('squadManagement.available'),
    assignedLabel: t('squadManagement.assigned'),
    containerLabel: t('squadManagement.squads.label'),

    displayMode: 'three-column',
    enableSearch: true,
    enableBulkActions: true,
    enableDragDrop: true, // Future: drag from available to detail pane
    enableFilters: true,

    // Master List (Riegen)
    containers: squads.map(s => ({
      id: s.id,
      name: s.name,
      displayName: s.name,
      itemCount: s.participantCount,
      isVirtual: s.isVirtual,
      metadata: {
        competitions: s.competitions,
        hints: s.hints
      },
      badge: s.isVirtual ? {
        text: t('squadManagement.squads.virtual'),
        variant: 'warning'
      } : undefined
    })),

    selectedContainer: selectedSquad ? {
      id: selectedSquad.id,
      name: selectedSquad.name,
      displayName: selectedSquad.name,
      itemCount: selectedSquad.participantCount,
      metadata: selectedSquad
    } : null,

    onContainerSelect: (container) => {
      const squad = squads.find(s => s.id === container.id);
      setSelectedSquad(squad);
    },

    onContainerCreate: () => {
      setIsCreateModalOpen(true);
    },

    onContainerDelete: async (containerId) => {
      if (!window.confirm(t('squadManagement.confirmDelete'))) return;
      await apiDelete(`/squads/${containerId}`);
      await loadSquads();
    },

    // Available Items
    availableItems: filteredParticipants.map(p => ({
      id: p.id,
      displayName: `${p.firstname} ${p.lastname}`,
      secondaryInfo: p.club,
      metadata: {
        firstname: p.firstname,
        lastname: p.lastname,
        gender: p.gender,
        birthYear: p.birthYear,
        competitions: p.competitions,
        competitionCount: p.competitionCount
      },
      badge: {
        text: p.gender,
        variant: 'info'
      }
    })),

    // Assigned Items (from selected container)
    assignedItems: selectedSquad?.participants.map(p => ({
      id: p.id,
      displayName: `${p.firstname} ${p.lastname}`,
      secondaryInfo: p.club,
      metadata: {
        competitions: p.competitions,
        gender: p.gender
      }
    })) || [],

    // Table columns for available/assigned lists
    columns: [
      {
        id: 'name',
        label: t('common.name'),
        render: (item) => item.displayName,
        sortable: true
      },
      {
        id: 'club',
        label: t('common.club'),
        render: (item) => item.secondaryInfo,
        sortable: true
      },
      {
        id: 'age',
        label: t('common.age'),
        render: (item) => {
          const age = new Date().getFullYear() - item.metadata.birthYear;
          return age;
        },
        sortable: true
      },
      {
        id: 'competitions',
        label: t('common.competitions'),
        render: (item) => (
          <span className="text-xs">
            {item.metadata.competitionCount || 0} {t('common.competitions')}
          </span>
        )
      }
    ],

    // Actions
    onAssign: async (item, containerId) => {
      if (!containerId) {
        alert(t('squadManagement.messages.selectSquadFirst'));
        return;
      }
      await apiPost('/squad-management/assign', {
        squadId: containerId,
        participantId: item.id,
        eventId: eventId
      });
      await forceLoadSquads();
      await loadAvailableParticipants();
    },

    onUnassign: async (item) => {
      await apiDelete(`/squad-management/unassign`, {
        params: { 
          participantId: item.id, 
          eventId: eventId 
        }
      });
      await forceLoadSquads();
      await loadAvailableParticipants();
    },

    onBulkAssign: async (items, containerId) => {
      if (!containerId) {
        alert(t('squadManagement.messages.selectSquadFirst'));
        return;
      }
      await apiPost('/squad-management/bulk-assign', {
        squadId: containerId,
        participantIds: items.map(i => i.id),
        eventId: eventId
      });
      await forceLoadSquads();
      await loadAvailableParticipants();
    },

    // Filters
    filters: [
      {
        id: 'gender',
        label: t('common.gender'),
        type: 'select',
        options: [
          { value: '', label: t('common.all') },
          { value: 'male', label: t('gender.male') },
          { value: 'female', label: t('gender.female') }
        ],
        filterFn: (item, value) => {
          if (!value) return true;
          return item.metadata.gender === value;
        }
      },
      {
        id: 'competition',
        label: t('common.competition'),
        type: 'select',
        options: [
          { value: '', label: t('common.all') },
          ...allCompetitions.map(c => ({
            value: c.id.toString(),
            label: `${c.name} (Nr. ${c.number})`
          }))
        ],
        filterFn: (item, value) => {
          if (!value) return true;
          return item.metadata.competitions?.some(
            c => c.id.toString() === value
          );
        }
      },
      {
        id: 'club',
        label: t('common.club'),
        type: 'select',
        options: [
          { value: '', label: t('common.all') },
          ...allClubs.map(club => ({ value: club, label: club }))
        ],
        filterFn: (item, value) => {
          if (!value) return true;
          return item.secondaryInfo === value;
        }
      }
    ],

    // Custom render for container item (in master list)
    renderContainer: (container) => (
      <div className={`p-4 rounded-lg border cursor-pointer transition-colors ${
        selectedSquad?.id === container.id 
          ? 'border-blue-500 bg-blue-50' 
          : 'hover:border-gray-300'
      } ${container.isVirtual ? 'border-l-4 border-l-orange-400' : ''}`}>
        <div className="flex items-center gap-2 mb-1">
          <h4 className="font-medium text-gray-900">{container.displayName}</h4>
          {container.badge && (
            <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
              {container.badge.text}
            </span>
          )}
        </div>
        <p className="text-sm text-gray-500">
          {container.itemCount} {t('squadManagement.squads.participants')}
        </p>
        {container.metadata?.hints?.storage && (
          <p className="text-xs text-orange-600 mt-1">
            💾 {container.metadata.hints.storage}
          </p>
        )}
        {container.metadata?.competitions && (
          <div className="mt-2 flex flex-wrap gap-1">
            {container.metadata.competitions.slice(0, 2).map((comp, idx) => (
              <span 
                key={idx} 
                className="px-2 py-1 bg-gray-100 text-gray-700 rounded text-xs"
              >
                {comp.name} (Nr. {comp.number})
              </span>
            ))}
            {container.metadata.competitions.length > 2 && (
              <span className="px-2 py-1 bg-gray-100 text-gray-700 rounded text-xs">
                +{container.metadata.competitions.length - 2}
              </span>
            )}
          </div>
        )}
      </div>
    ),

    // Custom render for detail pane
    renderDetailPane: (container, items) => (
      <div className="space-y-4">
        <div className="bg-white rounded-lg border p-4">
          <h4 className="font-medium text-gray-900 mb-2">
            {t('squadManagement.squadDetails.info')}
          </h4>
          <dl className="space-y-2 text-sm">
            <div className="flex justify-between">
              <dt className="text-gray-500">{t('common.name')}:</dt>
              <dd className="font-medium">{container.displayName}</dd>
            </div>
            <div className="flex justify-between">
              <dt className="text-gray-500">{t('squadManagement.squads.participants')}:</dt>
              <dd className="font-medium">{items.length}</dd>
            </div>
            {container.metadata?.competitions && (
              <div>
                <dt className="text-gray-500 mb-1">{t('common.competitions')}:</dt>
                <dd className="space-y-1">
                  {container.metadata.competitions.map((comp, idx) => (
                    <div key={idx} className="text-xs bg-blue-50 px-2 py-1 rounded">
                      {comp.name} (Nr. {comp.number})
                    </div>
                  ))}
                </dd>
              </div>
            )}
          </dl>
        </div>

        {container.isVirtual && (
          <div className="bg-orange-50 border border-orange-200 rounded-lg p-3">
            <p className="text-xs text-orange-800">
              <strong>{t('squadManagement.virtualInfo.title')}</strong><br />
              {t('squadManagement.virtualInfo.description')}
            </p>
          </div>
        )}
      </div>
    ),

    validateAssignment: (item, containerId) => {
      if (!containerId) {
        return t('squadManagement.messages.selectSquadFirst');
      }
      // Add custom validation logic here
      return null;
    }
  }}
/>

<UnifiedAssignmentModal
  isOpen={isOpen}
  onClose={onClose}
  config={{
    title: t('squadManagement.title'),
    availableLabel: t('squadManagement.available'),
    assignedLabel: t('squadManagement.assigned', { name: squad.name }),

    displayMode: 'table',
    enableSearch: true,
    enableBulkActions: true,
    enableDragDrop: true,
    enableFilters: true,

    columns: [
      {
        id: 'name',
        label: t('common.name'),
        render: (item) => `${item.metadata.firstname} ${item.metadata.lastname}`,
        sortable: true
      },
      {
        id: 'club',
        label: t('common.club'),
        render: (item) => item.secondaryInfo,
        sortable: true
      },
      {
        id: 'competitions',
        label: t('common.competitions'),
        render: (item) => (
          <span className="text-xs">
            {item.metadata.competitions?.join(', ')}
          </span>
        )
      }
    ],

    availableItems: availableParticipants,
    assignedItems: squadParticipants,

    onAssign: async (item) => {
      await apiPost('/squad-management/assign', {
        squadId: squad.id,
        participantId: item.id,
        eventId: eventId
      });
    },

    onUnassign: async (item) => {
      await apiDelete(`/squad-management/unassign`, {
        params: { participantId: item.id, eventId: eventId }
      });
    },

    onBulkAssign: async (items) => {
      await apiPost('/squad-management/bulk-assign', {
        squadId: squad.id,
        participantIds: items.map(i => i.id),
        eventId: eventId
      });
    },

    filters: [
      {
        id: 'gender',
        label: t('common.gender'),
        type: 'select',
        options: [
          { value: 'männlich', label: t('gender.male') },
          { value: 'weiblich', label: t('gender.female') }
        ],
        filterFn: (item, value) => item.metadata.gender === value
      },
      {
        id: 'competition',
        label: t('common.competition'),
        type: 'select',
        options: competitionOptions,
        filterFn: (item, value) => 
          item.metadata.competitions?.includes(value)
      }
    ]
  }}
/>

<UnifiedAssignmentModal
  isOpen={isOpen}
  onClose={onClose}
  config={{
    title: t('competitions.selectDisciplines'),

    displayMode: 'checkbox-grid',
    enableSearch: false,
    enableFilters: true,

    availableItems: disciplines.map(d => ({
      id: d.id,
      displayName: d.name,
      metadata: {
        maleAllowed: d.male_allowed,
        femaleAllowed: d.female_allowed,
        groupId: d.groupId
      }
    })),

    assignedItems: formData.disciplines.map(d => ({
      id: d.disciplineId,
      displayName: d.name,
      metadata: { maxScore: d.maxScore }
    })),

    additionalFields: [
      {
        id: 'maxScore',
        label: t('competitions.maxScore'),
        type: 'number',
        required: true,
        defaultValue: 10.0,
        validate: (value) => {
          if (value <= 0) return t('competitions.maxScoreMustBePositive');
          if (value > 100) return t('competitions.maxScoreTooHigh');
          return null;
        }
      }
    ],

    onAssign: async (item) => {
      // Inline: update formData directly
      setFormData(prev => ({
        ...prev,
        disciplines: [
          ...prev.disciplines,
          { disciplineId: item.id, maxScore: item.metadata.maxScore }
        ]
      }));
    },

    onUnassign: async (item) => {
      setFormData(prev => ({
        ...prev,
        disciplines: prev.disciplines.filter(d => d.disciplineId !== item.id)
      }));
    },

    filters: [
      {
        id: 'group',
        label: t('disciplines.group'),
        type: 'select',
        options: disciplineGroupOptions,
        filterFn: (item, value) => item.metadata.groupId === value
      },
      {
        id: 'gender',
        label: t('common.gender'),
        type: 'checkbox',
        filterFn: (item, value) => {
          if (value === 'male') return item.metadata.maleAllowed;
          if (value === 'female') return item.metadata.femaleAllowed;
          return true;
        }
      }
    ],

    validateAssignment: (item) => {
      // Example: Check gender compatibility
      if (formData.gender === 'männlich' && !item.metadata.maleAllowed) {
        return t('competitions.disciplineNotAllowedForGender');
      }
      return null;
    }
  }}
/>