# ERP EDI Bridge – Erweiterung: IFM-Flows & Ordnerüberwachung

Erweiterung der bestehenden Browser-App um:
1. **IFM-spezifische Converter** in der UI verfügbar machen (Inbound: IFM DELFOR → VDA 4905, Outbound: VDA 4913 → IFM DESADV / DELVRY03)
2. **Settings-Seite** mit Input-/Output-Ordner Konfiguration
3. **Ordnerüberwachung** (Folder Watch) mit Pause/Resume

## User Review Required

> [!IMPORTANT]
> **Architektur-Entscheidung: Ordnerüberwachung**
> 
> Die aktuelle App läuft als reine HTML/JS-Datei im Browser. Ein echter File-System-Watcher (der einen Netzwerkordner auf neue Dateien überwacht und automatisch konvertiert) ist im Browser **nicht** möglich.
> 
> **Vorgeschlagene Lösung:** Umstellung auf eine **Electron**-App. Damit kann die App:
> - Netzwerkordner per `fs.watch()` / `chokidar` überwachen
> - Dateien automatisch lesen und konvertieren
> - Ergebnisse direkt ins Dateisystem schreiben
> 
> Die bestehende HTML/CSS/JS-Architektur bleibt dabei größtenteils erhalten – Electron wrapped sie nur.
> 
> **Alternative:** Falls kein Electron gewünscht, könnte man einen **kleinen Node.js-Hintergrundprozess** implementieren, der separat gestartet wird. Die Browser-UI würde dann über WebSocket mit dem Watcher kommunizieren.
> 
> **Welche Variante bevorzugen Sie?**

> [!WARNING]
> Die Datei `vda4913-to-delvry03.js.js` hat einen doppelten `.js.js` Dateinamen – soll das korrigiert werden?

## Proposed Changes

### Navigation & Seitenstruktur

Die Single-Page-App bekommt eine einfache Tab-Navigation am oberen Rand:
- **Converter** (bestehende Hauptseite)
- **Settings** (neue Seite für Ordnerkonfiguration & Watcher-Status)

#### [MODIFY] [index.html](file:///c:/Users/Zed/vda-to-edifact-converter/index.html)
- Navigation-Tabs hinzufügen (`<nav>` mit Converter / Settings)
- Mode-Toggle erweitern: 4 Modi statt 2
  - VDA 4913 → Bosch DESADV (Outbound)
  - VDA 4913 → IFM DESADV (Outbound)
  - Bosch DELFOR → VDA 4905 (Inbound)
  - IFM DELFOR → VDA 4905 (Inbound)
- Settings-Seite HTML hinzufügen (Input-Ordner, Output-Ordner, Watcher-Buttons, Log-Bereich)
- Script-Tags für neue Module ergänzen

---

### Converter-Erweiterung

#### [MODIFY] [app.js](file:///c:/Users/Zed/vda-to-edifact-converter/js/app.js)
- `setMode()` erweitern für 4 Modi: `outbound-bosch`, `outbound-ifm`, `inbound-bosch`, `inbound-ifm`
- `processInbound()` erweitern: Bei IFM-Mode den `DelforToVDA4905Converter` nutzen statt den generischen Parser
- `processOutbound()` bleibt für Bosch; neuer Flow für IFM Outbound (→ DELVRY03/DESADV)
- `generateOutput()` erweitern für IFM-Outbound
- Automatische Dateierkennung anpassen (IFM DELFOR erkennen vs. Bosch DELFOR)

---

### Ordnerüberwachung (Electron-Variante)

#### [NEW] [main.js](file:///c:/Users/Zed/vda-to-edifact-converter/main.js)
- Electron Main-Prozess: Fenster erstellen, IPC-Handler registrieren
- `fs.watch()` oder `chokidar`-basierter Folder-Watcher
- IPC-Channels: `select-folder`, `start-watcher`, `stop-watcher`, `watcher-status`, `file-converted`

#### [NEW] [js/watcher-bridge.js](file:///c:/Users/Zed/vda-to-edifact-converter/js/watcher-bridge.js)
- Renderer-seitiger Code der per `ipcRenderer` mit dem Main-Prozess kommuniziert
- Stellt Watcher-Status und Konvertierungs-Log in der UI dar

#### [NEW] [preload.js](file:///c:/Users/Zed/vda-to-edifact-converter/preload.js)
- Electron Preload-Script: sichere Brücke zwischen Main/Renderer Prozess via `contextBridge`

#### [NEW] [package.json](file:///c:/Users/Zed/vda-to-edifact-converter/package.json)
- Electron + chokidar als Dependencies
- Start-Script: `electron .`

---

### Styling

#### [MODIFY] [styles.css](file:///c:/Users/Zed/vda-to-edifact-converter/styles.css)
- Styles für Tab-Navigation
- Styles für Settings-Seite (Ordner-Inputs, Watcher-Status-Anzeige, Log-Container)
- Styles für 4-Spalten Mode-Toggle (responsive)
- Watcher-Status Badge (Aktiv/Pausiert/Gestoppt)

---

## Verification Plan

### Manuelle Tests (im Browser / Electron)

1. **Tab-Navigation**: Converter ↔ Settings wechseln – beide Seiten korrekt angezeigt
2. **Mode-Toggle**: Alle 4 Modi nacheinander auswählen
3. **Bosch Outbound**: VDA 4913 Datei hochladen → DESADV generieren (Bestandsverhalten, Regression)
4. **IFM Inbound**: IFM DELFOR Datei hochladen → VDA 4905 erzeugen (mit `ifm_delfor-vda4905.js`)
5. **IFM Outbound**: VDA 4913 Datei hochladen → IFM DELVRY03 erzeugen
6. **Settings**: Input/Output-Ordner eingeben, Watcher starten/pausieren
7. **Watcher**: Datei in Input-Ordner legen → automatische Konvertierung → Ergebnis im Output-Ordner prüfen
8. **Pause/Resume**: Watcher pausieren → Datei einlegen → keine Konvertierung → Resume → Konvertierung findet statt