# Modernes Admin-Panel - Dokumentation

## 🎯 Übersicht

Das SwimMonitor Admin-Panel wurde komplett neu gestaltet mit einer modernen Sidebar-Navigation und übersichtlicher Struktur. Die alte, unübersichtliche `/public/appointments/admin` Seite wurde in mehrere spezialisierte Bereiche aufgeteilt.

## 📍 Neue Struktur

### Haupt-Routen:

**Wichtig**: Alle Admin-Routen sind unter `/appointments/admin/` strukturiert, da das Buchungssystem ein eigenständiger Bereich ist.

| Route | Beschreibung |
|-------|--------------|
| `/appointments/admin/dashboard` | **Dashboard** - Übersicht mit Stats und Quick Actions |
| `/appointments/admin/appointments-list` | **Termine** - Terminverwaltung mit Filtern |
| `/appointments/admin/waiting-list` | **Warteliste** - Separate Wartelisten-Verwaltung |
| `/appointments/admin/courses/` | **Kurse** - Kursverwaltung (bereits vorhanden, jetzt im neuen Layout) |
| `/appointments/admin/locations/` | **Standorte** - Standortverwaltung |
| `/appointments/admin/calendar/` | **Kalender-Sync** - Universal Kalender Integration |
| `/appointments/admin/email-templates/` | **E-Mail Templates** - Template-Verwaltung |
| `/appointments/admin/user/` | **Benutzer** - Benutzerverwaltung (nur Super Admin) |

## 🎨 Design-Features

### Sidebar-Navigation
- **Fixierte Sidebar** auf der linken Seite
- **Responsive Design** - auf Mobile wird Sidebar ausblendbar
- **Aktive Markierung** - aktueller Menüpunkt hervorgehoben
- **Kategorisierte Menüs**: Hauptmenü, Verwaltung, Integration, System
- **Badge-Unterstützung** für Zähler (z.B. Anzahl heutiger Termine)

### Farbschema
- **Primary**: #4e73df (Blau)
- **Success**: #1cc88a (Grün)
- **Warning**: #f6c23e (Gelb)
- **Danger**: #e74a3b (Rot)
- **Sidebar**: #1a1d2e (Dunkelblau)

### UI-Komponenten
- **Stats Cards** mit Icons und Hover-Effekten
- **Moderne Tabellen** mit Gradient-Header
- **Quick Action Cards** für häufige Aktionen
- **Filter-Cards** für Such- und Filterfunktionen
- **Badge-System** für Status-Anzeigen
- **Customer Avatars** mit Initialen

## 📋 Seiten-Details

### 1. Dashboard (`/admin/`)

**Features:**
- 4 Statistik-Karten (Heute, Diese Woche, Kurse, Warteliste)
- Quick Actions für häufige Aufgaben
- Kurse mit freien Plätzen (mit Auslastungs-Balken)
- Heutige Termine (Seitenleiste)
- Bevorstehende Termine (Tabelle)
- Auto-Refresh alle 5 Minuten

**Controller:** `App\Controller\Admin\AdminDashboardController`

### 2. Termine (`/admin/appointments/`)

**Features:**
- Filter nach Datum, Status, Standort
- Suchfunktion (Name, E-Mail, Telefon)
- Mini-Stats (Gesamt, Bestätigt, Ausstehend)
- Moderne Tabelle mit Customer-Info
- Aktionen: Anzeigen, Bearbeiten, Löschen
- Export-Funktion (kommt bald)

**Controller:** `App\Controller\Admin\AdminAppointmentsController`
**API:** `/admin/appointments/api/list` (GET)

### 3. Warteliste (`/admin/waiting-list/`)

**Features:**
- Tab-System (Aktiv / Archiviert / Alle)
- Suchfunktion
- Mini-Stats
- Unterscheidung zwischen aktiven und archivierten Einträgen
- Notizen-Vorschau
- Aktion: In Termin umwandeln

**Controller:** `App\Controller\Admin\AdminWaitingListController`
**API:** `/admin/waiting-list/api/list` (GET)

### 4. Kurse (`/admin/courses/`)

**Features:**
- Kurs erstellen/bearbeiten
- Kurs kopieren
- Bulk-Delete
- Suchfunktion
- Kurs-Details-Modal
- Wartelisten-Vorschau beim Löschen

**Bereits vorhanden, nur Layout angepasst**

### 5. Kalender-Sync (`/admin/calendar/`)

**Features:**
- Multi-Provider-Support (Microsoft, Google, CalDAV, iCal)
- Auto-Sync Toggle
- Bulk-Sync
- Export als .ics

**Bereits vorhanden, nur Layout angepasst**

## 🔧 Technische Details

### Base Template: `admin_base.html.twig`

**Struktur:**
```
<aside class="admin-sidebar">     → Fixierte Sidebar
  <div class="sidebar-brand">      → Logo & Titel
  <nav class="sidebar-nav">        → Navigation
    → Menüpunkte mit Icons
    → Badge-Support
    → Active-State
    
<div class="admin-wrapper">        → Main Content Wrapper
  <header class="admin-header">    → Top Header
    → Sidebar-Toggle (Mobile)
    → User Dropdown
    → Benachrichtigungen
  
  <main class="admin-content">     → Content Area
    → Page Header
    → {% block content %}
```

### Responsive Breakpoints

- **Desktop**: Sidebar fixiert (260px breit)
- **Tablet/Mobile** (< 768px): 
  - Sidebar ausblendbar
  - Hamburger-Menu sichtbar
  - Overlay beim Öffnen
  - User-Info kompakt

### JavaScript-Features

- **Sidebar-Toggle**: Für Mobile
- **Tab-Switching**: Für Warteliste
- **Filter & Search**: Asynchrone Datenladung
- **Auto-Refresh**: Dashboard (5 Min)
- **Smooth Animations**: Slide-in, Hover-Effekte

## 🚀 Verwendung

### Layout für neue Seiten verwenden:

```twig
{% extends 'admin_base.html.twig' %}

{% block title %}Meine Seite{% endblock %}
{% block header_title %}Meine Überschrift{% endblock %}

{% block content %}
    <div class="page-header">
        <h1><i class="fas fa-icon me-2"></i>Mein Titel</h1>
        <div class="page-breadcrumb">
            <a href="{{ path('admin_dashboard') }}">
                <i class="fas fa-home"></i> Dashboard
            </a>
            <i class="fas fa-chevron-right"></i>
            <span>Meine Seite</span>
        </div>
    </div>
    
    <!-- Ihr Content hier -->
{% endblock %}
```

### Neue Sidebar-Einträge hinzufügen:

Bearbeiten Sie `templates/admin_base.html.twig`:

```twig
<div class="nav-item">
    <a href="{{ path('meine_route') }}" 
       class="nav-link {% if app.request.get('_route') == 'meine_route' %}active{% endif %}">
        <i class="fas fa-icon"></i>
        <span>Mein Menüpunkt</span>
    </a>
</div>
```

## 📊 Vorteile des neuen Systems

✅ **Übersichtlichkeit**: Jeder Bereich hat seine eigene Seite  
✅ **Performance**: Weniger Daten auf einmal geladen  
✅ **Wartbarkeit**: Klare Code-Struktur  
✅ **UX**: Moderne, intuitive Bedienung  
✅ **Responsive**: Funktioniert auf allen Geräten  
✅ **Konsistent**: Einheitliches Design  
✅ **Erweiterbar**: Neue Seiten einfach hinzufügbar  

## 🔄 Migration vom alten System

Das alte Dashboard unter `/public/appointments/admin` existiert weiterhin als Fallback. Sie können über die Sidebar unter "Altes Dashboard" darauf zugreifen.

**Empfehlung**: Nutzen Sie das neue System für alle Admin-Aufgaben. Das alte Dashboard kann später entfernt werden, wenn alle Features migriert sind.

## 🎯 Nächste Schritte

1. **Termin erstellen/bearbeiten** - Modale implementieren
2. **Warteliste → Termin** - Umwandlungs-Funktion
3. **Export-Funktionen** - CSV/Excel-Export
4. **Benachrichtigungen** - Echtzeit-Notifications
5. **Statistiken erweitern** - Charts/Graphs
6. **Benutzer-Profile** - Detaillierte Benutzerseiten

## 📝 Anpassungen

### Farben ändern:

Bearbeiten Sie in `admin_base.html.twig`:

```css
:root {
    --primary-color: #4e73df;      /* Ihre Primärfarbe */
    --sidebar-bg: #1a1d2e;         /* Sidebar-Hintergrund */
    --sidebar-hover: #252938;      /* Sidebar-Hover */
}
```

### Sidebar-Breite ändern:

```css
:root {
    --sidebar-width: 280px;  /* Standard: 260px */
}
```

## 🐛 Bekannte Einschränkungen

- Termin erstellen/bearbeiten noch nicht vollständig implementiert
- Export-Funktionen noch als Platzhalter
- Einige Aktionen zeigen noch Alerts statt Modale

Diese Features werden in zukünftigen Updates hinzugefügt.

## 📞 Support

Bei Fragen oder Problemen:
1. Prüfen Sie die Browser-Konsole auf Fehler
2. Prüfen Sie `var/log/dev.log` für Backend-Fehler
3. Cache leeren: `php bin/console cache:clear`