feat: initial architecture - requirements, architecture.md, task_graph, AGENTS.md, UI prototype v8d

2026-07-13 03:34:35 +02:00
commit afe6d0a168
10 changed files with 4991 additions and 0 deletions
@@ -0,0 +1,95 @@
+# 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