Ausgaben - Log (Next.js)

Moderne Ausgaben-Tracking-Anwendung mit Next.js, React, TypeScript und MySQL.

Übersicht

Dies ist die modernisierte Version des alten PHP/jQuery-basierten Ausgaben-Programms. Die Anwendung wurde neu in Next.js/React/TypeScript entwickelt und verwendet das gleiche Look & Feel wie die werte-next Anwendung.

Features

• Eingabe-Tab: Erfassen von Ausgaben mit:

  • Datum (mit automatischem Wochentag)
  • Wo (Geschäft/Ort)
  • Was (Beschreibung)
  • Wieviel (Betrag in Euro)
  • Wie (Zahlungsart: bar, EC, VISA, MASTER, Einnahme, Überweisung)
  • OK-Checkbox für Kontrolle
  • Monatsstatistiken
  • Letzte 10 Einträge

• Listen-Tab: Vollständige Auflistung aller Einträge mit:

  • Bearbeiten-Funktion
  • Löschen-Funktion
  • Sortierung nach Datum (absteigend)

• Statistik-Tab: Monatliche Auswertungen mit:

  • Gesamtausgaben
  • Aufschlüsselung nach Zahlungsart
  • Einnahmen
  • Überweisungen

Technologie-Stack

• Frontend: Next.js 16, React 19, TypeScript
• Styling: Tailwind CSS v4
• Datenbank: MySQL 8 (via Docker)
• ORM: mysql2

Installation

1. Repository klonen / Dateien kopieren

2. Dependencies installieren:

npm install

3. Umgebungsvariablen konfigurieren:

cp .env.example .env

Bearbeiten Sie .env und passen Sie die Datenbankverbindung an:

DB_HOST=localhost
DB_USER=root
DB_PASSWORD=ihr_passwort
DB_NAME=RXF

4. Datenbank-Tabelle erstellen (falls noch nicht vorhanden):

mysql -u root -p RXF < create_table.sql

Entwicklung

Development-Server starten:

npm run dev

Die Anwendung ist dann unter http://localhost:3000 erreichbar.

Production Build

npm run build
npm start

Datenbank-Schema

Die Anwendung verwendet die Tabelle Ausgaben_Tag mit folgenden Feldern:

• ID (auto_increment)
• Datum (date)
• WochTag (varchar)
• Wo (varchar) - Geschäft/Ort
• Was (varchar) - Beschreibung
• Wieviel (decimal) - Betrag
• Wie (varchar) - Zahlungsart
• OK (tinyint) - Kontrollstatus

API Endpoints

• GET /api/ausgaben - Einträge abrufen (mit limit, startDate, month, year params)
• POST /api/ausgaben - Neuen Eintrag erstellen
• PUT /api/ausgaben/[id] - Eintrag aktualisieren
• DELETE /api/ausgaben/[id] - Eintrag löschen
• GET /api/ausgaben/stats - Monatsstatistiken (mit month, year params)

Migration von der alten Version

Die alte PHP/jQuery-Version in ../Ausgaben kann parallel weiter betrieben werden. Die Datenbank wird von beiden Anwendungen verwendet.

Unterschiede zur alten Version:

• Moderne React-basierte UI statt jQuery
• TypeScript statt JavaScript
• REST API statt direkte PHP-Aufrufe
• Tailwind CSS statt custom CSS
• Client-side Rendering statt Server-side (PHP)

Look & Feel

Das Design orientiert sich an der werte-next Anwendung:

• Gelber Hintergrund (#FFFFDD)
• Schwarze Rahmen um Hauptcontainer
• Blaue Akzente für Eingabebereich (#CCCCFF)
• Klare Tabellenstruktur
• Responsive Design

Autor

rxf@gmx.de

Version

1.0.0