# ⚡ CPLv4.0 – Frontend für das Kabelüberwachungssystem

Das Frontend von CPLv4.0 stellt verschiedene Systeminformationen, Messdaten und Konfigurationen übersichtlich dar.
Die Benutzeroberfläche ist intuitiv und modular aufgebaut und bietet Zugriff auf digitale sowie analoge Ein-/Ausgänge, TDR-Messungen, Referenzkurven, Systemmeldungen und Einstellungen.

---

## 🧭 Seitenübersicht

### 🔹 **Header**

- Zeigt den Namen der Station / des Geräts (CPL)
- Abmelden-Button für Admins

### 🔹 **Footer**

- Firmenname, Telefonnummer, E-Mail
- PDF-Handbücher (Anleitung) als Slider mit Download-Funktion

---

### 🖥️ **/dashboard** – Übersicht

- Letzten 20 Meldungen aus dem System
- Versionsinformationen (Frontend, Backend)
- Baugruppenträger mit Modulnamen und Statusanzeige (grün = OK, rot = Fehler)
- Netzwerk-Informationen:
  - IP-Adresse
  - Subnetzmaske
  - Gateway
  - OPC UA Status (in Betrieb oder offline)
  - OPC UA Nodeset Name

---

### 📡 **/kabelueberwachung** – Kabelüberwachung

- Visualisierung der Slots (KUE 1–32) in 4 Racks
- Darstellung von:
  - Isolationswiderstand
  - Schleifenwiderstand
  - TDR-Messkurven und Vergleich mit Referenzkurve
  - Alarme (z. B. Erdschluss, Aderbruch)
- Einstellung pro Slot (via Zahnrad → Modal)

---

### 🔌 **/einausgaenge** – Digitale Ein- und Ausgänge

- Digitale Eingänge (1–32) mit Statusanzeige
- Digitale Ausgänge (1–4) mit Umschaltfunktion (Toggle)
- Modale für Beschreibung und Konfiguration

---

### 🌡️ **/analogeEingaenge**

- Tabelle mit analogen Eingangswerten (z. B. Temperatur, Spannung)
- Diagramm zur Visualisierung von Verlauf / Trends

---

### 📝 **/meldungen**

- Gesamte Meldungshistorie
- Anzeige von Statusfarbe, Zeit, Gewichtung, Nachricht, Quelle
- Pagination (10 Meldungen pro Seite)

---

### ⚙️ **/einstellungen**

- Allgemeine Systemeinstellungen
- OPC UA Konfiguration
  - Benutzer, Verschlüsselung, Clients
  - Verbindung & Nodeset-Verwaltung

---

## 🔧 Technologien

- **Next.js** (Pages Router)
- **React** (mit funktionalen Komponenten & Hooks)
- **Tailwind CSS** für responsives UI-Design
- **Redux Toolkit** zur Zustandverwaltung
- **Mockdaten** im Verzeichnis `public/CPLmockData/`
- **Iconify Icons** & **Bootstrap Icons** für UI-Darstellung

---

## 🔧 Installation auf dem CPLv4.0

```bash
git clone http://10.10.0.12:3000/ISA/CPL_V4_Frontend
cd cplv4-frontend
npm install
npm run build

Danach:
Inhalt des out-Verzeichnisses per FTP auf das CPL-Gerät kopieren
Ziel: B → WEBS Verzeichnis
```