# 🎯 Dashboard mit SECTIONS-Layout (AKTUELL!)

## ⚡ Das solltest du wissen

Ich habe **3 neue Dashboards** mit dem **modernen Sections-Layout** erstellt!

### 🆕 Sections-Layout (EMPFOHLEN)

Das neue Layout ist seit Home Assistant 2024.x der Standard und bietet:

✅ Bessere Organisation durch Section-Überschriften  
✅ Automatisches responsive Grid-System  
✅ Einfachere Anpassung und Wartung  
✅ Moderne Struktur mit `max_columns`  
✅ Zukunftssicher und von HA unterstützt  

---

## 📦 Verfügbare Dashboards

### 🆕 **SECTIONS-LAYOUT** (2024.x) - NUTZE DIESE!

| Datei | Sections | Beste für |
|-------|----------|-----------|
| `battery_optimizer_sections_compact.yaml` ⭐ | 7 | Tablet/Desktop |
| `battery_optimizer_sections_minimal.yaml` | 7 | Smartphone |
| `battery_optimizer_sections_standard.yaml` | 10 | Desktop Detail |

### 📜 Klassisches Layout (Fallback)

Falls dein Home Assistant älter als 2024.2 ist:
- `battery_optimizer_dashboard_compact.yaml`
- `battery_optimizer_dashboard_minimal.yaml`
- `battery_optimizer_dashboard.yaml`

---

## 🚀 Quick-Start (3 Minuten)

### Schritt 1: Dashboard erstellen

1. Home Assistant → **Einstellungen** → **Dashboards**
2. **"+ Dashboard hinzufügen"**
3. **"Mit Sections erstellen"** ⭐ (Wichtig!)
4. Name: `Batterie Optimierung`
5. Icon: `mdi:battery-charging`
6. **"Erstellen"**

### Schritt 2: Code einfügen

1. **⋮** (3 Punkte oben rechts) → **"Rohe Konfiguration bearbeiten"**
2. Alles löschen
3. Kopiere Inhalt von `battery_optimizer_sections_compact.yaml`
4. Einfügen
5. **"Speichern"**

### Schritt 3: Entity-IDs anpassen

Prüfe in **Entwicklerwerkzeuge** → **Zustände** ob diese Entities existieren:

```yaml
sensor.openems_ess0_activepower
sensor.esssoc
sensor.openems_grid_activepower
sensor.hastrom_flex_extended_current_price
pyscript.battery_charging_plan
```

Falls anders: Im Dashboard mit Suchen & Ersetzen anpassen!

### Schritt 4: Fertig! 🎉

Navigiere zu: **Sidebar** → **"Batterie Optimierung"**

---

## 💡 Meine Empfehlung

**Starte mit:**
```
📄 battery_optimizer_sections_compact.yaml
📊 7 Sections
📱 Perfekt für Desktop + Tablet
⚡ max_columns: 4
```

**Warum?**
- Beste Balance zwischen Detail und Übersicht
- Nutzt alle deine HACS Cards optimal
- Funktioniert super auf allen Geräten
- Nicht überladen, aber vollständig

---

## 📖 Dokumentation

| Datei | Inhalt |
|-------|--------|
| **README_SECTIONS.md** ⭐ | Sections-Layout Anleitung |
| QUICKSTART.md | Schnellstart (für altes Layout) |
| README_Dashboard.md | Vollständige Anleitung |
| DASHBOARD_COMPARISON.md | Visueller Vergleich |

---

## 🎨 Section-Übersicht (Kompakt)

Die **Kompakt-Version** enthält 7 Sections:

1. 🏠 **Status & Steuerung**
   - Power Flow Card
   - Auto/Manuell Toggles
   - Quick-Status (SOC, Preis)

2. 📅 **Ladeplanung**
   - Plan-Status
   - Nächste Ladung
   - Kompakte Plan-Liste

3. 💶 **Strompreis-Visualisierung**
   - 48h Preis-Graph
   - Geplante Ladungen als Marker

4. 🔋 **Batterie-Übersicht**
   - 24h SOC & Leistung Graph
   - Dual-Achsen

5. 📋 **Detaillierter Plan**
   - Statistik-Bubble-Cards
   - Vollständige Plan-Tabelle

6. ⚙️ **Einstellungen**
   - Alle Parameter
   - Min/Max SOC, Ladeleistung, etc.

7. ℹ️ **System**
   - OpenEMS Status
   - PV-Prognosen
   - Automation-Status

---

## 🔧 Anpassungen

### Spaltenanzahl ändern:

```yaml
type: sections
max_columns: 3  # Statt 4 für weniger Spalten
```

### Section entfernen:

Einfach die komplette Section löschen (von `- type: grid` bis zur nächsten Section)

### Reihenfolge ändern:

Sections im YAML nach oben/unten verschieben

---

## 📱 Responsive Verhalten

Das Sections-Layout passt sich **automatisch** an:

- **Desktop (>1920px):** 4 Spalten nebeneinander
- **Laptop (1366-1920px):** 3-4 Spalten
- **Tablet (768-1366px):** 2-3 Spalten
- **Smartphone (<768px):** 1 Spalte

Kein manuelles Responsive-CSS nötig! 🎯

---

## ✅ Voraussetzungen

- ✅ Home Assistant **2024.2 oder neuer**
- ✅ HACS Custom Cards:
  - Bubble Card ✅
  - Plotly Graph Card ✅
  - Power Flow Card Plus ✅
  - Stack-in-Card (optional)

Alle bereits bei dir installiert! 🚀

---

## 🐛 Fehlerbehebung

### "Sections not supported"

➜ Home Assistant auf 2024.2+ updaten  
➜ Oder: Klassisches Layout nutzen

### Cards werden nicht angezeigt

➜ Browser-Cache leeren (Strg+Shift+R)  
➜ Home Assistant neu starten

### Plotly zeigt keine Daten

➜ Prüfe Entity-Historie in Developer Tools  
➜ Recorder-Integration prüfen

---

## 🎯 Nächste Schritte

Nach Dashboard-Installation:

1. ✅ **Plan-Historie** implementieren
2. ✅ **InfluxDB-Integration** erweitern
3. ✅ **Notifications** einrichten
4. ✅ **Grafana-Dashboard** als Alternative

Womit möchtest du weitermachen?

---

## 🆚 Sections vs. Klassisch

| Feature | Sections | Klassisch |
|---------|----------|-----------|
| HA Version | 2024.2+ | Alle |
| Struktur | Modern | Traditionell |
| Responsive | Automatisch | Manuell |
| Überschriften | Integriert | Manuell |
| Wartung | Einfacher | Komplexer |
| Zukunft | ✅ Standard | ⚠️ Legacy |

**Empfehlung:** Nutze **Sections** wenn möglich! 🚀

---

## 🎉 Los geht's!

**Starte jetzt:**

1. 📖 Lies: `README_SECTIONS.md`
2. 📄 Öffne: `battery_optimizer_sections_compact.yaml`
3. 🚀 Folge: Quick-Start oben
4. ✅ Teste: Auf verschiedenen Geräten

**Viel Erfolg mit deinem modernen Dashboard!** 🎊

---

**Erstellt:** 16. November 2025  
**Layout:** Home Assistant Sections (2024.x)  
**Empfohlung:** COMPACT-Version ⭐