96 lines
4.6 KiB
Markdown
96 lines
4.6 KiB
Markdown
# 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
|