admin
d3718da1f8
Passkey-Login analog zu werte-next: auf der Login-Seite "Mit Passkey anmelden", Verwaltung der eigenen Passkeys im neuen Tab Einstellungen. Das Passwort bleibt als Alternative bestehen. - lib/webauthn.ts, lib/passkeys.ts sowie API-Routen unter /api/passkey - proxy.ts: /api/passkey/authenticate ohne Session erreichbar - TabLayout: dritter Tab Einstellungen (Index-Tabs statt Route wie werte) - RP-Konfiguration ueber AUSGABEN_RP_*, da sich die .env auf dem Server mit anderen Apps teilt, die RP_ID/RP_ORIGIN bereits belegen - Eigene Tabelle ausgaben_passkeys aus demselben Grund: werte-next nutzt in der gemeinsamen Datenbank RXF bereits die Tabelle passkeys - eslint.config.mjs auf die Flat-Config von eslint-config-next umgestellt Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
148 lines
4.5 KiB
Markdown
148 lines
4.5 KiB
Markdown
# 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:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. Umgebungsvariablen konfigurieren:
|
|
```bash
|
|
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):
|
|
```bash
|
|
mysql -u root -p RXF < create_table.sql
|
|
```
|
|
|
|
## Entwicklung
|
|
|
|
Development-Server starten:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Die Anwendung ist dann unter [http://localhost:3000](http://localhost:3000) erreichbar.
|
|
|
|
## Production Build
|
|
|
|
```bash
|
|
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
|