127 lines
3.3 KiB
Markdown
127 lines
3.3 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)
|
|
|
|
## 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
|