# 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:
```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_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