erp-nutzfahrzeuge/docs/component_inventory.md

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