ausgaben-next/MIGRATION.md

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:

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

cd /home/rxf/Projekte/ausgaben-next
npm install

Schritt 2: Umgebungsvariablen

cp .env.example .env
# Bearbeiten Sie .env und verwenden Sie die gleichen
# Datenbankzugangsdaten wie die alte Version

Schritt 3: Test

npm run dev

Öffnen Sie http://localhost:3000 und testen Sie die Funktionalität.

Schritt 4: Production Build

npm run build

Schritt 5: Docker Deployment (Optional)

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
• Lesen Sie README.md
• Kontakt: rxf@gmx.de