# Migration Guide: Von Ausgaben (PHP/jQuery) zu Ausgaben-Next

Dieser Leitfaden hilft Ihnen bei der Migration von der alten PHP/jQuery-basierten Ausgaben-Anwendung zur neuen Next.js-Version.

## Übersicht

### Alte Version (`../Ausgaben`)
- **Frontend:** HTML + jQuery + jqGrid
- **Backend:** PHP
- **Styling:** Custom CSS
- **Datums-Handling:** jQuery UI Datepicker
- **Tab-System:** jQuery UI Tabs

### Neue Version (`ausgaben-next`)
- **Frontend:** React 19 + TypeScript
- **Backend:** Next.js API Routes
- **Styling:** Tailwind CSS v4
- **Datums-Handling:** Native HTML5 Date Input
- **Tab-System:** React State Management

## Was bleibt gleich?

✓ **Datenbank:** Gleiche MySQL-Datenbank (`RXF.Ausgaben_Tag`)
✓ **Datenstruktur:** Identische Tabellenfelder
✓ **Funktionalität:** Alle Features der alten Version
✓ **Look & Feel:** Ähnliches Design (angelehnt an werte-next)

## Feature-Vergleich

| Feature | Alte Version | Neue Version | Status |
|---------|-------------|--------------|---------|
| Eingabe-Formular | ✓ jQuery | ✓ React | ✓ Implementiert |
| Letzte 10 Einträge | ✓ jqGrid | ✓ React Table | ✓ Implementiert |
| Liste aller Einträge | ✓ jqGrid | ✓ React Table | ✓ Implementiert |
| Monats-Statistiken | ✓ PHP + AJAX | ✓ API Routes | ✓ Implementiert |
| Bearbeiten | ✓ | ✓ | ✓ Implementiert |
| Löschen | ✓ | ✓ | ✓ Implementiert |
| Datepicker | ✓ jQuery UI | ✓ HTML5 | ✓ Implementiert |
| Wochentag auto | ✓ | ✓ | ✓ Implementiert |
| OK-Checkbox | ✓ | ✓ | ✓ Implementiert |
| Tab-Navigation | ✓ jQuery UI | ✓ React | ✓ Implementiert |

## Datenbank

Die Datenbanktabelle bleibt **unverändert**:

```sql
Ausgaben_Tag (
  ID          int(11) AUTO_INCREMENT,
  Datum       date,
  WochTag     varchar(20),
  Wo          varchar(255),
  Was         varchar(500),
  Wieviel     decimal(10,2),
  Wie         varchar(50),
  OK          tinyint(1)
)
```

### Wichtig:
- Beide Anwendungen können parallel auf **derselben Datenbank** laufen!
- Keine Datenmigration notwendig
- Bestehende Daten werden automatisch übernommen

## Parallelbetrieb

Sie können beide Versionen gleichzeitig laufen lassen:

1. **Alte Version:** Bleibt unter ihrem bisherigen Pfad aktiv
2. **Neue Version:** Läuft auf eigenem Port (z.B. 3001)
3. **Datenbank:** Wird von beiden genutzt

### Vorteile:
- Sanfte Migration ohne Downtime
- Training mit neuer Version möglich
- Fallback zur alten Version jederzeit möglich
- Schrittweise Umstellung der Nutzer

## Unterschiede im Verhalten

### 1. Datepicker
**Alt:** jQuery UI Datepicker mit Pop-up
**Neu:** Native HTML5 Date Input (Browser-native Erscheinung)

### 2. Auto-Complete
**Alt:** jQuery Autocomplete für "Wo" und "Was" Felder
**Neu:** Noch nicht implementiert (kann später hinzugefügt werden)

### 3. Tab-Umschaltung
**Alt:** Seite bleibt identisch, nur Tabs wechseln
**Neu:** React State Management, kein Page Reload

### 4. Datums-Formatierung
**Alt:** Server-seitig (PHP) formatiert
**Neu:** Client-seitig (JavaScript Intl API)

## Migrationsschritte

### Schritt 1: Installation
```bash
cd /home/rxf/Projekte/ausgaben-next
npm install
```

### Schritt 2: Umgebungsvariablen
```bash
cp .env.example .env
# Bearbeiten Sie .env und verwenden Sie die gleichen
# Datenbankzugangsdaten wie die alte Version
```

### Schritt 3: Test
```bash
npm run dev
```
Öffnen Sie http://localhost:3000 und testen Sie die Funktionalität.

### Schritt 4: Production Build
```bash
npm run build
```

### Schritt 5: Docker Deployment (Optional)
```bash
docker-compose -f docker-compose.local.yml up -d
```

### Schritt 6: Parallelbetrieb testen
- Alte Version: Weiter unter bisheriger URL
- Neue Version: Unter Port 3001 (oder konfiguriert)
- Beide greifen auf gleiche Datenbank zu

### Schritt 7: Umstellung
Wenn Sie mit der neuen Version zufrieden sind:
1. Ändern Sie die Ports/URLs in Ihrer Infrastruktur
2. Leiten Sie Traffic zur neuen Version um
3. Behalten Sie alte Version als Backup

## Was wurde verbessert?

### Performance
- ✓ Schnelleres Loading durch Server-Side Rendering
- ✓ Optimierte Bundles durch Webpack/Turbopack
- ✓ Lazy Loading von Komponenten

### Entwicklung
- ✓ TypeScript für bessere Code-Qualität
- ✓ Moderne React Patterns (Hooks)
- ✓ Wiederverwendbare Komponenten

### Wartbarkeit
- ✓ Klare Trennung von Logik und Präsentation
- ✓ Testbare Komponenten
- ✓ Moderne Toolchain

### Security
- ✓ Aktuellere Dependencies
- ✓ Keine direct SQL-Queries im Frontend
- ✓ Input Validation

## Bekannte Einschränkungen

1. **Auto-Complete:** Noch nicht implementiert für "Wo" und "Was" Felder
2. **Drucken:** Print-Funktionalität noch nicht implementiert
3. **Anleitung-Seite:** Noch nicht erstellt (kann kopiert werden)

Diese Features können bei Bedarf hinzugefügt werden.

## Rollback-Plan

Falls Sie zur alten Version zurück müssen:

1. Stoppen Sie den Next.js Server/Container
2. Die alte PHP-Version funktioniert weiterhin
3. Keine Datenbank-Änderungen notwendig

## Support und Wartung

### Alte Version
- PHP 7.4+ erforderlich
- jQuery und jQuery UI müssen geladen bleiben
- Keine aktive Weiterentwicklung geplant

### Neue Version
- Node.js 22+
- Regelmäßige Dependency-Updates empfohlen
- Moderne Stack ermöglicht einfache Erweiterungen

## Nächste Schritte

Nach erfolgreicher Migration:

1. **Auto-Complete implementieren** (optional)
   - Suche nach häufigen "Wo"-Einträgen
   - Vorschläge für "Was"-Einträge

2. **Print-Funktion** (optional)
   - CSS für Print-Layout
   - Export als PDF

3. **Anleitung-Seite**
   - Kopieren Sie die alte Anleitung
   - Passen Sie sie an die neue UI an

4. **Mobile Optimierung**
   - Responsive Design ist bereits vorhanden
   - Kann weiter optimiert werden

5. **Erweiterte Statistiken**
   - Jahresübersichten
   - Grafische Darstellungen
   - Kategorien-Auswertungen

## Fragen?

Bei Problemen oder Fragen:
- Prüfen Sie [DEPLOYMENT.md](DEPLOYMENT.md)
- Lesen Sie [README.md](README.md)
- Kontakt: rxf@gmx.de