werte-next/README.md

# Werte Next.js - Gesundheitsdaten Tracking

Eine moderne Next.js-Anwendung zur Erfassung und Verwaltung von Gesundheitsdaten, basierend auf dem ursprünglichen Werte-Projekt.

## Features

- ✅ **Eingabeformular** für Gesundheitsdaten:
  - Datum und Zeit
  - Blutzucker (mg/dl)
  - Mahlzeiten-Informationen
  - Gewicht (kg)
  - Blutdruck (systolisch/diastolisch in mmHg)
  - Puls

- ✅ **Anzeige der letzten 10 Einträge** mit Löschfunktion
- ✅ **Responsive Design** mit Tailwind CSS
- ✅ **TypeScript** für Type-Safety
- ✅ **MySQL-Datenbankanbindung** (Docker-Container)
- ✅ **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 `passkeys` (siehe `create_table.sql`); sie wird beim ersten
  Zugriff automatisch angelegt, falls der DB-Benutzer CREATE-Rechte hat.
- **Konfiguration**: `RP_ID` (nur der Host), `RP_ORIGIN` (volle URL), `RP_NAME`.
  Lokal sind `localhost` / `http://localhost:3000` voreingestellt.
- **Wichtig**: WebAuthn funktioniert nur über **HTTPS** oder auf `localhost`.

## Technologie-Stack

- **Framework**: Next.js 16.x (App Router)
- **Sprache**: TypeScript
- **Styling**: Tailwind CSS
- **Datenbank**: MySQL 5.6 (Docker)
- **ORM**: mysql2

## Voraussetzungen

- Node.js 18.x oder höher
- Docker (für MySQL-Container)
- Die MySQL-Datenbank muss bereits laufen (siehe docker-compose.yml im übergeordneten Verzeichnis)

## Installation

1. **Dependencies installieren**:
   ```bash
   npm install
   ```

2. **Umgebungsvariablen konfigurieren**:
   Die Datei `.env.local` ist bereits mit den korrekten Datenbankzugangsdaten angelegt:
   ```
   DB_HOST=mydbase_mysql
   DB_USER=root
   DB_PASS=SFluorit
   DB_NAME=RXF
   ```

3. **Datenbank prüfen**:
   Stelle sicher, dass die MySQL-Datenbank läuft und die Tabelle `RXF.Werte_BZG` existiert.

## Entwicklung

Development-Server starten:

```bash
npm run dev
```

Die Anwendung ist dann unter [http://localhost:3000](http://localhost:3000) erreichbar.

## Produktion

### Lokale Produktion

Build erstellen:

```bash
npm run build
```

Produktions-Server starten:

```bash
npm start
```

### Docker Deployment

Für das Deployment auf einem externen Server ist die Anwendung vollständig containerisiert. Alle Details zur Installation und Verwaltung finden Sie in der **[DEPLOYMENT.md](DEPLOYMENT.md)**.

Kurzanleitung:

```bash
# Docker-Container bauen und starten
docker-compose up -d --build

# Status prüfen
docker-compose ps

# Logs anschauen
docker-compose logs -f
```

Die Anwendung ist dann unter `http://<server-ip>:3000` erreichbar.

## Projekt-Struktur

```
werte_next/
├── app/
│   ├── api/
│   │   └── werte/
│   │       ├── route.ts          # GET/POST API für Einträge
│   │       └── [id]/
│   │           └── route.ts      # DELETE API für einzelne Einträge
│   ├── layout.tsx                # Root Layout
│   ├── page.tsx                  # Hauptseite
│   └── globals.css               # Globale Styles
├── components/
│   ├── WerteForm.tsx             # Eingabeformular
│   └── WerteList.tsx             # Liste der letzten Einträge
├── lib/
│   └── db.ts                     # Datenbankverbindung
├── types/
│   └── werte.ts                  # TypeScript-Typen
├── .env.local                    # Umgebungsvariablen (lokal, gitignored)
└── package.json
```

## API-Endpunkte

### GET /api/werte
Holt die letzten N Einträge aus der Datenbank.

**Query Parameters**:
- `limit` (optional): Anzahl der Einträge (Standard: 10)

**Response**:
```json
{
  "success": true,
  "data": [...]
}
```

### POST /api/werte
Erstellt einen neuen Eintrag.

**Request Body**:
```json
{
  "Datum": "2026-02-21",
  "Zeit": "14:30",
  "Zucker": 120,
  "Essen": "nüchtern",
  "Gewicht": 75.5,
  "DruckS": 130,
  "DruckD": 85,
  "Puls": 72
}
```

### DELETE /api/werte/[id]
Löscht einen Eintrag anhand der ID.

## Design

Das Design orientiert sich am ursprünglichen Werte-Projekt:
- **Hintergrundfarbe**: #FFFFDD (hellgelb)
- **Eingabebereich**: #CCCCFF (hellblau)
- **Buttons**: #85B7D7 (blau)
- **Schriftarten**: Arial, Verdana, Helvetica

## Unterschiede zum Original

- **Modernes Framework**: Next.js statt PHP
- **TypeScript**: Type-Safety für bessere Wartbarkeit
- **React**: Komponentenbasierte Architektur
- **API Routes**: RESTful API statt direkter PHP-Skripte
- **Vereinfachte Features**: Fokus auf Eingabe und letzte 10 Einträge (Listen- und Statistik-Tabs wurden weggelassen wie gewünscht)

## Bekannte Einschränkungen

- Die Tabs "Liste" und "Statistik" aus dem Original wurden bewusst nicht implementiert
- Die jqGrid-Funktionalität wurde durch eine einfache Tabelle ersetzt

## Support

Bei Fragen oder Problemen: [rxf@gmx.de](mailto:rxf@gmx.de)

## Lizenz

Private Nutzung