# BeoAnswer React App

Eine React-Anwendung zur Nachbearbeitung von Sonderführungen mit Backend-Integration.

## 📋 Features

- **Interaktive Formulare** für Führungsnachbearbeitung
- **Backend-Integration** mit PHP über FormData
- **HTTP Basic Authentication** Support
- **Professionelle Modal-Dialoge** anstatt Browser-Alerts
- **Intelligente Navigation** mit Zurück-Button
- **Automatisches Fenster schließen** nach Aktionen
- **Environment-Variable Konfiguration**
- **Responsive Design**

## 🚀 Quick Start

### Voraussetzungen

- Node.js (v16 oder höher)
- npm oder yarn

### Installation

```bash
# Repository klonen
git clone <repository-url>
cd beoanswer_react

# Dependencies installieren
npm install

# Terser für Production Builds installieren
npm install --save-dev terser

# Environment-Datei erstellen
cp .env.example .env
```

### Konfiguration

Erstelle eine `.env` Datei und passe die Werte an:

```env
# Backend API Configuration
VITE_API_URL=/api/intern/sofue/php/sofueDB.php

# HTTP Basic Authentication für geschütztes Backend
VITE_API_USERNAME=dein_username
VITE_API_PASSWORD=dein_passwort
```

### Development

```bash
# Development Server starten
npm run dev

# App öffnet sich auf http://localhost:5173
# Mit URL-Parameter: http://localhost:5173/?id=123
```

### Production

```bash
# Production Build erstellen
npm run build:prod

# Production Preview
npm run preview:prod

# Build-Dateien befinden sich in ./dist/
```

## 📦 Versionsverwaltung

Die App zeigt automatisch die Version aus der `package.json` und das aktuelle Build-Datum an.

### Version erhöhen

```bash
# Patch-Version erhöhen (1.0.0 → 1.0.1)
npm version patch

# Minor-Version erhöhen (1.0.0 → 1.1.0)
npm version minor

# Major-Version erhöhen (1.0.0 → 2.0.0)
npm version major
```

### Manuell in package.json

```json
{
  "version": "1.2.3"
}
```

**Wichtig:** Nach Versionänderungen den Development Server neu starten:
```bash
npm run dev
```

## 🛠 Scripts

```bash
npm run dev          # Development Server
npm run build        # Standard Build
npm run build:prod   # Production Build
npm run preview      # Preview des Builds
npm run preview:prod # Preview des Production Builds
npm run lint         # Code Linting
```

## 🌐 Deployment

### 1. Environment Variables setzen

Für Production eine `.env.production` erstellen:

```env
VITE_API_URL=https://dein-server.com/intern/sofue/php/sofueDB.php
VITE_API_USERNAME=production_user
VITE_API_PASSWORD=production_password
```

### 2. Build erstellen

```bash
npm run build:prod
```

### 3. Dateien auf Server kopieren

```bash
# Beispiel mit rsync
rsync -avz dist/ user@server:/var/www/html/beoanswer/

# Oder mit scp
scp -r dist/* user@server:/var/www/html/beoanswer/
```

### 4. Webserver konfigurieren

Siehe [DEPLOYMENT.md](./DEPLOYMENT.md) für detaillierte Anweisungen.

## 📱 Verwendung

### URL-Parameter

Die App erwartet einen `id` URL-Parameter:

```
https://dein-server.com/beoanswer/?id=123
```

### Workflow

1. **Link aus E-Mail** öffnen
2. **Formular ausfüllen**:
   - Ja/Nein ob Führung stattfand
   - Bei "Ja": Besucherzahl, Spenden-Art, etc.
   - Bei "Nein": Absage oder Verschiebung
3. **Daten speichern** - Fenster schließt automatisch

### Navigation

- **Zurück-Button**: Schrittweise Navigation rückwärts
- **Abbruch**: Bestätigung mit Modal, dann Fenster schließen
- **Anleitung**: Hilfe-Modal mit Workflow-Beschreibung

## 🔧 Entwicklung

### Projektstruktur

```
src/
├── App.jsx              # Hauptkomponente mit Routing-Logik
├── FormContext.jsx      # Globaler State für Formulardaten
├── main.jsx            # React App Entry Point
├── App.css             # Haupt-Styling
├── components/
│   ├── BesucherBar.jsx     # Eingabe für Besucher/Betrag
│   ├── Bemerkungen.jsx     # Textarea für Bemerkungen
│   ├── FandStattVer.jsx    # Radio-Button Komponente
│   ├── LastButtons.jsx     # Abbruch/Anleitung/Senden Buttons
│   ├── LastLine.jsx        # Version/Datum Anzeige
│   ├── Modal.jsx           # Standard Modal Dialog
│   ├── ConfirmModal.jsx    # Bestätigungs Modal
│   ├── Spende.jsx          # Spenden-Art Auswahl
│   └── Verschoben.jsx      # Datum-Eingabe für Verschiebung
```

### FormContext

Zentrale State-Verwaltung für alle Formulardaten:

```javascript
const { formData, updateFormData, resetFormData } = useFormData()

// Daten setzen
updateFormData('besucher', '15')

// Daten lesen
console.log(formData.besucher)

// Formular zurücksetzen
resetFormData()
```

### Backend Integration

Die App sendet Daten via FormData an das PHP Backend:

```javascript
const backendData = new FormData()
backendData.append('cmd', 'UPDATEAFTER')
backendData.append('id', id)
backendData.append('besucher', formData.besucher)
// ...weitere Felder
```

## 🐛 Troubleshooting

### Build-Fehler: "terser not found"

```bash
npm install --save-dev terser
```

### CORS-Fehler im Development

Vite Proxy ist konfiguriert für `localhost:8080`. Anpassen in `vite.config.js`:

```javascript
proxy: {
  '/api': 'http://localhost:8080'
}
```

### Environment Variables werden nicht geladen

1. Development Server neu starten
2. Variablen müssen mit `VITE_` beginnen
3. `.env` Datei im Projektroot erstellen

### Modal-Buttons haben keinen Abstand

Browser-Cache leeren oder Hard-Refresh (`Ctrl+F5`).

## 📄 Weitere Dokumentation

- [DEPLOYMENT.md](./DEPLOYMENT.md) - Detaillierte Deployment-Anweisungen
- [.env.example](./.env.example) - Environment Variable Template

## 🤝 Beitragen

1. Feature Branch erstellen
2. Änderungen committen
3. Version mit `npm version` erhöhen
4. Build testen: `npm run build:prod`
5. Pull Request erstellen

## 📝 Lizenz

Private Projekt - Alle Rechte vorbehalten.

---

**Version:** Automatisch aus package.json  
**Build-Datum:** Automatisch generiert  
**Letztes Update:** Oktober 2025