ausgaben-next/README.md

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

• Zwei Tabs für verschiedene Ausgabenkategorien:

  • Haushalt (TYP=0): Zahlungsarten ECR, ECB, barR, barB, Ein(nahme), Uber(weisung)
  • Privat (TYP=1): Zahlungsarten bar, EC, VISA, MASTER, Einnahme, Uber(weisung)

• Eingabeformular mit integrierten Features:

  • Datum (mit automatischem Wochentag)
  • Wo (Geschäft/Ort)
  • Was (Beschreibung)
  • Wieviel (Betrag in Euro)
  • Wie (Zahlungsart - abhängig vom aktiven Tab)
  • Monatliche Statistiken im Formular (Gesamtsumme, aufgeschlüsselt nach Zahlungsart)
  • Letzte 10 Einträge direkt unter dem Formular mit Bearbeiten/Löschen-Funktion
  • Bearbeiten-Funktion: Klick auf Eintrag lädt ihn ins Formular
  • Filterung nach aktivem TYP (Haushalt/Privat)

• Anmeldung per Passkey (WebAuthn) alternativ zu Benutzername/Passwort

Anmeldung & Passkeys

Benutzer und bcrypt-Passworthashes stehen in AUTH_USERS (Format name:hash,name2:hash2), die Session ist ein JWT-Cookie (AUTH_SECRET).

Zusätzlich kann sich jeder Benutzer per Passkey anmelden (Fingerabdruck, Gesichtserkennung oder Geräte-PIN). Das Passwort bleibt als Alternative bestehen.

• Registrieren: nach der Anmeldung im Tab Einstellungen → „Passkey hinzufügen". Der Passkey wird dem angemeldeten Benutzer zugeordnet; mehrere Geräte sind möglich.
• Anmelden: auf der Login-Seite „Mit Passkey anmelden".
• Speicherung: Tabelle ausgaben_passkeys (siehe create_table.sql); sie wird beim ersten Zugriff automatisch angelegt, falls der DB-Benutzer CREATE-Rechte hat. Der app-spezifische Name ist nötig, weil sich mehrere Apps auf dem Server die Datenbank RXF teilen und werte-next dort die Tabelle passkeys belegt.
• Konfiguration: RP_ID (nur der Host), RP_ORIGIN (volle URL), RP_NAME. Lokal sind localhost / http://localhost:3005 voreingestellt.
• Wichtig: WebAuthn funktioniert nur über HTTPS oder auf localhost.

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 mit folgenden Feldern:

• ID (auto_increment)
• Datum (date)
• Wo (varchar) - Geschäft/Ort
• Was (varchar) - Beschreibung
• Wieviel (decimal) - Betrag
• Wie (varchar) - Zahlungsart
• TYP (tinyint) - 0=Haushalt, 1=Privat
• OK (tinyint) - Kontrollstatus

Hinweis: Der Wochentag (WochTag) wird nicht in der Datenbank gespeichert, sondern dynamisch aus dem Datum-Feld berechnet.

API Endpoints

• GET /api/ausgaben - Einträge abrufen (mit limit, startDate, month, year, typ params)
• POST /api/ausgaben - Neuen Eintrag erstellen (mit TYP)
• PUT /api/ausgaben/[id] - Eintrag aktualisieren (mit TYP)
• DELETE /api/ausgaben/[id] - Eintrag löschen
• GET /api/ausgaben/stats - Monatsstatistiken (mit month, year, typ 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