# Component Inventory - ERP Nutzfahrzeuge

## Version: 1.0
## Datum: 2026-07-10

## Shared Components

| Component | Description | States |
|---|---|---|
| **Icon** | SVG-Icon-System mit 50+ Icons | default |
| **Badge** | Status-Badge (success, warning, error, info, neutral, primary) | default |
| **Button** | Button-Komponente (primary, secondary, ghost, danger) mit Größen (sm, md, lg) | default, hover, focus, active, disabled |
| **Card** | Container-Karte mit Header und Body | default |
| **KpiCard** | KPI-Kennzahlen-Karte mit Label, Value, Trend, Icon | default, hover |
| **Spinner** | Lade-Indikator (sm, lg) | loading |
| **EmptyState** | Leer-Zustand mit Icon, Titel, Text, CTA-Button | empty |
| **ErrorState** | Fehler-Zustand mit Icon, Titel, Text, Retry-Button | error |
| **Avatar** | Nutzer-Avatar mit Initialen (md, lg) | default |
| **Toast** | Toast-Notification (success, error, warning, info) mit Auto-Dismiss | default, exit-animation |
| **ToastContainer** | Container für Toast-Stack | - |

## Layout Components

| Component | Description | States |
|---|---|---|
| **App** | Root-Komponente mit Router, Sidebar, Topbar, Content | - |
| **Sidebar** | Navigation-Sidebar mit Sektionen, Rollen-Filter, User-Profil | active, hover, collapsed (mobile) |
| **Topbar** | Header mit Breadcrumb, Sprachumschalter, Dark-Mode-Toggle, Profil-Menü | default, dropdown-open |
| **useRouter** | Hash-based SPA Router | - |

## View Components

| Component | View | Description | States |
|---|---|---|---|
| **DashboardView** | #/dashboard | KPIs, Schnellzugriffe, Letzte Aktivitäten, Bevorstehende Tasks, Top-Fahrzeuge | loading, error, happy |
| **FahrzeugListe** | #/fahrzeuge | Filterbare/sortierbare Tabelle mit Suche, Pagination, mobile.de-Status | loading, error, empty, happy, partial |
| **FahrzeugDetail** | #/fahrzeug/:id | Detailansicht mit 7 Tabs (Allgemein, Technisch, Baumaschinen, Verkaufsinfo, Dokumente, Fotos, mobile.de) | loading, error, not-found, happy |
| **FahrzeugForm** | #/fahrzeuge/neu | Formular mit OCR-Upload, Standarddaten, Baumaschinen-Feldern, LKW-Feldern, Validierung | default, ocr-loading, saving, validation-error |
| **KontakteListe** | #/kontakte | Kontakt-Liste mit Filter (Rolle, Land), USt-IdNr.-Status, Sortierung | loading, error, empty, happy |
| **VerkaufsModul** | #/verkauf | 4-Step Wizard: Fahrzeug/Kunde → Vertragsdetails → Prüfung → Abschluss | step-1, step-2, step-3, step-4, generating, gwg-warning, ust-warning |
| **KiCopilot** | #/ki-copilot | Chat-Interface mit Beispiel-Befehlen, Spracheingabe-Button, KI-Funktionen-Übersicht | default, loading, listening |
| **Einstellungen** | #/einstellungen | 4 Tabs: Stammdaten, Vertragsvorlagen, Benutzerverwaltung, Firmenprofil | default |

## Form Components

| Component | Description | States |
|---|---|---|
| **Input** | Text-Eingabefeld | default, focus, disabled, error |
| **Select** | Dropdown-Auswahl | default, focus, disabled |
| **Textarea** | Mehrzeilige Text-Eingabe | default, focus, disabled |
| **Label** | Form-Label mit Required-Indikator | default |
| **Dropzone** | Drag-and-Drop Upload-Zone | default, hover, dragover, loading |

## Interactive Components

| Component | Description | States |
|---|---|---|
| **Tabs** | Tab-Navigation mit aktiven/inaktiven Tabs | default, active, hover |
| **Pagination** | Seiten-Navigation mit Info und Controls | default, active, disabled |
| **Toggle** | Switch-Toggle (z.B. Dark Mode) | default, active |
| **ProgressBar** | Fortschrittsbalken | default |
| **WarningBanner** | Warnungs-Banner mit Icon und Text | default |

## Data Display Components

| Component | Description | States |
|---|---|---|
| **DataTable** | Sortierbare Tabelle mit Header, Zeilen, Hover-Effekt | default, sorted-asc, sorted-desc, hover |
| **InfoGrid** | Grid mit Info-Items (Label + Value) | default |
| **ImageGrid** | Grid für Foto-Galerie | default, hover |

## i18n System

| Component | Description |
|---|---|
| **translations** | DE + EN Übersetzungs-Objekt (250+ Keys) |
| **t(key)** | Übersetzungs-Funktion mit Fallback |
| **setLang(lang)** | Sprache setzen und anwenden |
| **applyTranslations()** | Alle data-i18n Attribute aktualisieren |

## Rollen-System

| Rolle | Berechtigungen |
|---|---|
| **Admin** | Vollzugriff auf alle Module |
| **Verkäufer** | Fahrzeugbestand, mobile.de, Kontakte, Verkauf, KI-Copilot, Bildretusche |
| **Buchhaltung** | Lesen: Fahrzeuge/Kontakte/Verkauf, Schreiben: USt-IdNr./GwG/Rechnungen/DATEV |

## Accessibility Features
- Skip-Link zum Hauptinhalt
- ARIA-Labels für Icon-Buttons
- :focus-visible Outline
- Semantisches HTML (nav, main, header, aside, table)
- Keyboard-Navigation unterstützt
- Kontrast-Level WCAG 2.1 AA