130 lines
3.0 KiB
Markdown
130 lines
3.0 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
|
|
|
|
- **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)
|
|
- 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:
|
|
```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)
|
|
- `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
|