diff --git a/src/new/.env b/src/new/.env
index 07a5174b1..4de9b9f50 100644
--- a/src/new/.env
+++ b/src/new/.env
@@ -32,3 +32,4 @@ JWT_PASSPHRASE=f7754c7a99638fe7162a144825ddaea7
LOCK_DSN=flock
###< symfony/lock ###
+MAILER_DSN=smtp://smtp4dev:25
diff --git a/src/new/assets/tailwind/css/backend.css b/src/new/assets/tailwind/css/backend.css
index f6c04a21b..2d9099e27 100644
--- a/src/new/assets/tailwind/css/backend.css
+++ b/src/new/assets/tailwind/css/backend.css
@@ -57,10 +57,10 @@
}
.badge-yes {
- @apply inline-flex rounded-sm bg-lime-500 px-2 py-1 text-sm font-medium text-white hover:bg-opacity-90 justify-center shadow-xl;
+ @apply inline-flex items-center rounded-full bg-lime-500 px-2 py-1 text-xs font-medium text-white hover:bg-opacity-90 justify-center shadow-xl;
}
.badge-no {
- @apply inline-flex rounded-sm bg-orange-500 px-2 py-1 text-sm font-medium text-white hover:bg-opacity-90 justify-center shadow-xl;
+ @apply inline-flex items-center rounded-full bg-orange-500 px-2 py-1 text-xs font-medium text-white hover:bg-opacity-90 justify-center shadow-xl;
}
.table-icon, .button-icon {
@@ -68,11 +68,11 @@
}
.psc-button-save {
- @apply inline-flex items-center justify-center py-1 gap-1 font-medium rounded-sm px-4 text-sm text-white shadow-lg bg-psc-500 hover:bg-psc-600 hover:ring-2 hover:ring-psc-500 hover:ring-offset-2 min-h-[2.25rem];
+ @apply inline-flex items-center justify-center py-1 gap-2 font-medium rounded-md px-4 text-sm text-white shadow-lg bg-psc-500 hover:bg-psc-600 hover:ring-2 hover:ring-psc-500 hover:ring-offset-2 min-h-[2.25rem];
}
.psc-button-secondary {
- @apply inline-flex items-center justify-center py-1 gap-1 font-medium rounded-sm px-4 text-xs text-white shadow-lg bg-psc-500 hover:bg-psc-600 hover:ring-2 hover:ring-psc-500 hover:ring-offset-2 min-h-[1.8rem];
+ @apply inline-flex items-center justify-center py-1 gap-2 font-medium rounded-md px-4 text-xs text-white shadow-lg bg-psc-500 hover:bg-psc-600 hover:ring-2 hover:ring-psc-500 hover:ring-offset-2 min-h-[1.8rem];
}
.form-label {
diff --git a/src/new/docs/design-system.md b/src/new/docs/design-system.md
new file mode 100644
index 000000000..5df9eac2a
--- /dev/null
+++ b/src/new/docs/design-system.md
@@ -0,0 +1,2478 @@
+# PrintshopCreator Design System
+
+**Version:** 1.0
+**Letzte Aktualisierung:** 2025-12-22
+**Status:** Living Document
+
+---
+
+## Inhaltsverzeichnis
+
+1. [Einleitung](#einleitung)
+2. [Architektur](#architektur)
+3. [Farbsystem](#farbsystem)
+4. [Typografie](#typografie)
+5. [Spacing & Layout](#spacing--layout)
+6. [Komponenten-Bibliothek](#komponenten-bibliothek)
+7. [Layout-Patterns](#layout-patterns)
+8. [Code-Standards](#code-standards)
+9. [Barrierefreiheit](#barrierefreiheit)
+10. [Migration Guide](#migration-guide)
+
+---
+
+## Einleitung
+
+### Zweck
+
+Dieses Design System definiert die visuellen und funktionalen Standards für alle Module im PrintshopCreator Backend. Es gewährleistet:
+
+- **Konsistenz**: Einheitliches Erscheinungsbild über alle 32 Bundles hinweg
+- **Effizienz**: Wiederverwendbare Komponenten reduzieren Entwicklungszeit
+- **Wartbarkeit**: Zentrale Standards erleichtern Updates und Änderungen
+- **User Experience**: Konsistente Interaktionsmuster verbessern die Benutzerfreundlichkeit
+
+### Zielgruppe
+
+- Frontend-Entwickler
+- Backend-Entwickler (Symfony/Twig)
+- UI/UX Designer
+- Product Owner
+
+---
+
+## Architektur
+
+### Tech Stack
+
+| Technologie | Version | Verwendung |
+|------------|---------|------------|
+| **Tailwind CSS** | 3.x | Primäres CSS-Framework |
+| **Alpine.js** | 3.x | UI State Management |
+| **Symfony** | 6.x | Backend Framework |
+| **Twig** | 3.x | Template Engine |
+| **Font Awesome** | 5.7.2 | Icon Library |
+
+### Framework-Strategie
+
+**Primär: Tailwind CSS**
+- Alle neuen Komponenten und Module verwenden Tailwind CSS
+- Utility-First Ansatz für maximale Flexibilität
+- Custom PSC-Farbschema über Tailwind-Konfiguration
+
+**Legacy: Bootstrap 4/5**
+- Wird schrittweise durch Tailwind ersetzt
+- Keine neuen Bootstrap-Komponenten mehr erstellen
+- Bestehende Bootstrap-Komponenten bei Änderungen zu Tailwind migrieren
+
+### Dateistruktur
+
+```
+templates/
+├── backend_tailwind_base.html.twig # Primäres Base-Template (verwenden!)
+├── backend_base.html.twig # Legacy Bootstrap (nicht verwenden)
+├── form_div_layout_tailwind.html.twig # Form Theme (verwenden!)
+└── [bundle]/
+ └── backend/
+ ├── edit.html.twig
+ ├── list.html.twig
+ └── components/
+
+assets/
+├── tailwind/
+│ ├── backend.css # Hauptstyles
+│ └── login.css
+└── backend/dashboard/ # Legacy (nicht verwenden)
+```
+
+---
+
+## Farbsystem
+
+### Primäre Farbpalette
+
+#### PSC Brand Color
+
+```css
+/* Primary Brand Color */
+--color-psc-50: #f0f9ff;
+--color-psc-100: #e0f2fe;
+--color-psc-200: #bae6fd;
+--color-psc-300: #7dd3fc;
+--color-psc-400: #38bdf8;
+--color-psc-500: #0ea5e9; /* Haupt-Markenfarbe */
+--color-psc-600: #0284c7;
+--color-psc-700: #0369a1;
+--color-psc-800: #075985;
+--color-psc-900: #0c4a6e;
+```
+
+**Tailwind-Klassen:** `bg-psc-500`, `text-psc-600`, `border-psc-400`, etc.
+
+#### Status-Farben
+
+```css
+/* Success - Grün */
+--color-success: #10b981; /* bg-green-500 */
+--color-success-light: #d1fae5; /* bg-green-100 */
+
+/* Warning - Orange/Gelb */
+--color-warning: #f59e0b; /* bg-orange-500 */
+--color-warning-light: #fef3c7; /* bg-orange-100 */
+
+/* Error - Rot */
+--color-error: #ef4444; /* bg-red-500 */
+--color-error-light: #fee2e2; /* bg-red-100 */
+
+/* Info - Blau */
+--color-info: #3b82f6; /* bg-blue-500 */
+--color-info-light: #dbeafe; /* bg-blue-100 */
+```
+
+#### Neutrale Farben
+
+```css
+/* Graustufen */
+--color-gray-50: #f9fafb;
+--color-gray-100: #f3f4f6;
+--color-gray-200: #e5e7eb;
+--color-gray-300: #d1d5db;
+--color-gray-500: #6b7280;
+--color-gray-700: #374151;
+--color-gray-900: #111827;
+```
+
+### Dark Mode
+
+```css
+/* Dark Mode Variablen */
+dark:bg-boxdark /* #24303f */
+dark:bg-strokedark /* #2e3a47 */
+dark:text-bodydark /* #aeb7c0 */
+```
+
+**Verwendung:**
+```html
+
+
Titel
+
+```
+
+### Badge-Farben
+
+**WICHTIG: Für Ja/Nein-Anzeigen immer `badge-yes` und `badge-no` Klassen verwenden!**
+
+| Typ | Klasse | Farbe | Verwendung |
+|-----|--------|-------|------------|
+| **Ja / Aktiv** | `badge-yes` | Grün (`bg-lime-500` + weiß) | true, ja, aktiv, enabled |
+| **Nein / Inaktiv** | `badge-no` | Orange (`bg-orange-500` + weiß) | false, nein, inaktiv, disabled |
+| Info | - | `bg-blue-500` + `text-white` | Information, Hinweis |
+| Draft | - | `bg-yellow-100` + `text-yellow-800` | Entwurf, In Bearbeitung |
+
+---
+
+## Typografie
+
+### Schriftarten
+
+```css
+/* System Font Stack */
+font-family: system-ui, -apple-system, BlinkMacSystemFont,
+ "Segoe UI", Roboto, "Helvetica Neue", Arial,
+ sans-serif;
+```
+
+**Tailwind-Klasse:** `font-sans` (Standard)
+
+### Schriftgrößen
+
+| Größe | Tailwind | Pixel | Verwendung |
+|-------|----------|-------|------------|
+| XS | `text-xs` | 12px | Labels, Badges, Hinweise |
+| SM | `text-sm` | 14px | Body Text, Formulare |
+| Base | `text-base` | 16px | Standard Body Text |
+| LG | `text-lg` | 18px | Hervorgehobener Text |
+| XL | `text-xl` | 20px | Überschriften (H3) |
+| 2XL | `text-2xl` | 24px | Überschriften (H2) |
+| 3XL | `text-3xl` | 30px | Seitentitel (H1) |
+
+### Schriftgewichte
+
+| Gewicht | Tailwind | Wert | Verwendung |
+|---------|----------|------|------------|
+| Normal | `font-normal` | 400 | Body Text |
+| Medium | `font-medium` | 500 | Buttons, Labels |
+| Semibold | `font-semibold` | 600 | Wichtige Labels |
+| Bold | `font-bold` | 700 | Überschriften |
+
+### Typografie-Beispiele
+
+```html
+
+
+ Seitentitel
+
+
+
+
+ Abschnittstitel
+
+
+
+
+
+
+
+ Beschreibungstext
+
+```
+
+---
+
+## Spacing & Layout
+
+### Spacing-System
+
+Tailwind verwendet ein 4px-basiertes Spacing-System:
+
+| Wert | Pixel | Verwendung |
+|------|-------|------------|
+| `0.5` | 2px | Minimaler Abstand |
+| `1` | 4px | Sehr enger Abstand |
+| `2` | 8px | Enger Abstand |
+| `4` | 16px | Standard Abstand |
+| `6` | 24px | Mittlerer Abstand |
+| `8` | 32px | Großer Abstand |
+| `12` | 48px | Sehr großer Abstand |
+
+### Layout-Konstanten
+
+```css
+/* Sidebar */
+--sidebar-width: 20rem; /* 320px */
+--collapsed-sidebar-width: 5.4rem; /* 86px */
+
+/* Container */
+--max-content-width: 1280px; /* max-w-7xl */
+```
+
+### Responsive Breakpoints
+
+```css
+/* Tailwind Breakpoints */
+sm: 640px /* Tablet Portrait */
+md: 768px /* Tablet Landscape */
+lg: 1024px /* Desktop */
+xl: 1280px /* Large Desktop */
+2xl: 1536px /* Extra Large Desktop */
+```
+
+### Grid-System
+
+```html
+
+
+
+
+
+```
+
+---
+
+## Komponenten-Bibliothek
+
+### 1. Buttons
+
+**WICHTIG: Einheitliche Rundung - Alle interaktiven Elemente verwenden `rounded-md` (6px)**
+
+#### Primary Button (Haupt-Aktion)
+
+```html
+
+```
+
+**Verwendung:** Primäre Aktionen (Speichern, Erstellen, Absenden)
+
+**CSS-Klasse:** `.psc-button-save` (bereits definiert in `backend.css`)
+
+#### Secondary Button
+
+```html
+
+```
+
+**Verwendung:** Sekundäre Aktionen (Abbrechen, Zurück)
+
+#### Danger Button
+
+```html
+
+```
+
+**Verwendung:** Destruktive Aktionen (Löschen, Entfernen)
+
+#### Text Button / Link
+
+```html
+
+ Bearbeiten
+
+```
+
+**Verwendung:** Tertäre Aktionen, Links
+
+#### Button-Gruppe
+
+```html
+
+
+
+
+
+```
+
+### 2. Cards
+
+#### Standard Card
+
+```html
+
+
+
+
+ Card Titel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Statistik Name
+
+
+ 1,234
+
+
+
+
+
+
+
+ +12% seit letztem Monat
+
+
+
+
+
Hilfetext (optional)
+
+
+
+
+```
+
+#### Checkbox
+
+```html
+
+
+
+
+```
+
+#### Toggle Switch
+
+```html
+
+```
+
+#### Form Validation States
+
+```html
+
+
+
+
+
+
+ Dieses Feld ist erforderlich
+
+
+
+
+
+
+ Eingabe gültig
+
+
+
+
+
+
+ |
+
+ Name
+
+
+ |
+
+ Status
+ |
+
+ Aktionen
+ |
+
+
+
+
+
+
+ |
+ Beispiel Name
+ |
+
+ Aktiv
+ |
+
+
+ |
+
+
+
+
+
+
+
+
+
+ |
+ Name:
+ Beispiel
+ |
+
+ Status:
+ Aktiv
+ |
+
+
+
+
+
+
+ 123
+
+ |
+```
+
+**Nicht-klickbare UID (falls kein Link benötigt):**
+```html
+
+
+
+ ABC-123
+
+ |
+```
+
+**Design-Specs für UID/ID Badges:**
+- **Font:** `font-mono` (Monospace für technische Werte)
+- **Größe:** `text-xs` (12px)
+- **Padding:** `px-2.5 py-1`
+- **Rundung:** `rounded-md` (mittlere Rundung)
+- **Icon:** Hash (#) Symbol, `w-3.5 h-3.5`
+- **Hover:** PSC-Farbe bei Links
+- **Border:** Subtiler Border für bessere Abgrenzung
+
+**In Twig:**
+```twig
+{# Klickbare UID #}
+
+
+ {{ item.id }}
+
+```
+
+#### Tabellen-Aktionen mit Icons
+
+**WICHTIG: Einheitliche Aktions-Icon-Farben**
+
+Alle Aktions-Icons in Tabellen müssen folgende Farben verwenden:
+
+| Aktion | Farbe | Tailwind-Klasse | Verwendung |
+|--------|-------|-----------------|------------|
+| **Löschen** | Rot | `text-red-600` | Alle Delete/Remove-Aktionen |
+| **Bearbeiten** | Grün | `text-green-600` | Alle Edit/Update-Aktionen |
+| **Alle anderen** | Blau | `text-blue-600` | View, Download, Info, etc. |
+
+**Icon-Größe:** Alle Tabellen-Icons sollten die Klasse `table-icon` (entspricht `w-6`) verwenden.
+
+```html
+
+
+ |
+```
+
+**Weitere Icon-Aktionen (alle BLAU):**
+- Info/Hilfe: `text-blue-600`
+- Kopieren/Duplizieren: `text-blue-600`
+- Export: `text-blue-600`
+- Drucken: `text-blue-600`
+- Verschieben: `text-blue-600`
+- Teilen: `text-blue-600`
+
+### 5. Badges & Tags
+
+#### Ja/Nein Status Badges
+
+**WICHTIG: Einheitliche Ja/Nein-Anzeige**
+
+Für Ja/Nein-Anzeigen (Boolean-Werte) in Tabellen und Listen müssen **immer** die vordefinierten Klassen verwendet werden:
+
+| Status | Klasse | Farbe | Verwendung |
+|--------|--------|-------|------------|
+| **Ja** | `badge-yes` | Grün (`bg-lime-500`) | true, aktiv, ja, enabled |
+| **Nein** | `badge-no` | Orange (`bg-orange-500`) | false, inaktiv, nein, disabled |
+
+```html
+
+Ja
+
+
+
+Nein
+
+```
+
+**In Twig Templates:**
+```twig
+{# Boolean-Wert anzeigen #}
+{% if item.active %}
+ {{'yes'|trans}}
+{% else %}
+ {{'no'|trans}}
+{% endif %}
+
+{# In Tabellen #}
+
+ {% if product.isPublished %}
+ Veröffentlicht
+ {% else %}
+ Entwurf
+ {% endif %}
+ |
+```
+
+**CSS-Definition (bereits in `assets/tailwind/css/backend.css`):**
+```css
+.badge-yes {
+ @apply inline-flex items-center rounded-full bg-lime-500 px-2 py-1
+ text-xs font-medium text-white hover:bg-opacity-90
+ justify-center shadow-xl;
+}
+
+.badge-no {
+ @apply inline-flex items-center rounded-full bg-orange-500 px-2 py-1
+ text-xs font-medium text-white hover:bg-opacity-90
+ justify-center shadow-xl;
+}
+```
+
+**Design-Specs:**
+- **Rundung:** `rounded-full` (vollständig abgerundet)
+- **Schriftgröße:** `text-xs` (12px)
+- **Padding:** `px-2 py-1` (horizontal 8px, vertikal 4px)
+- **Font-Weight:** `font-medium` (500)
+
+#### Weitere Status Badges
+
+```html
+
+
+ Information
+
+
+
+
+ Warnung
+
+
+
+
+ Erfolgreich
+
+
+
+
+ Entwurf
+
+
+
+
+ Fehler
+
+```
+
+**WICHTIG:** Alle Status-Badges verwenden:
+- `rounded-full` für vollständige Rundung
+- `text-xs` für einheitliche Schriftgröße (12px)
+- `px-2 py-1` für konsistentes Padding
+
+#### Count Badge
+
+```html
+
+```
+
+### 6. Alerts & Flash Messages
+
+#### Success Alert
+
+```html
+
+
+
+ Erfolgreich!
+ Ihre Änderungen wurden gespeichert.
+
+
+
+
+
+ Fehler!
+ Es ist ein Problem aufgetreten.
+
+
+
+
+ Achtung!
+ Bitte überprüfen Sie Ihre Eingaben.
+
+
+
+
+ Hinweis:
+ Zusätzliche Informationen...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Modal Titel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Zeige {{ pagination.first }} bis
+ {{ pagination.last }} von
+ {{ pagination.total }} Ergebnissen
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Keine Einträge vorhanden
+
+
+ Erstellen Sie Ihren ersten Eintrag, um loszulegen.
+
+
+
+
+
+
+ {# Page Header #}
+
+
+ {# Flash Messages #}
+ {% for label, messages in app.flashes %}
+ {% for message in messages %}
+
+ {{ message }}
+
+ {% endfor %}
+ {% endfor %}
+
+ {# Main Content #}
+
+
+ {# Your content here #}
+
+
+
+
+
+ {# Header mit Search & Filters #}
+
+
+
+ {# Search & Filters #}
+
+
+
+
+
+
+
+
+ {# Table Card #}
+
+
+
+
+
+ |
+ {{ knp_pagination_sortable(pagination, 'Name', 'name') }}
+ |
+
+ Status
+ |
+
+ Aktionen
+ |
+
+
+
+ {% for item in pagination %}
+
+ |
+ {{ item.name }}
+ |
+
+ {% if item.active %}
+ Aktiv
+ {% else %}
+ Inaktiv
+ {% endif %}
+ |
+
+
+ Bearbeiten
+
+
+ Löschen
+
+ |
+
+ {% else %}
+
+ |
+ Keine Einträge vorhanden
+ |
+
+ {% endfor %}
+
+
+
+
+ {# Pagination #}
+ {{ knp_pagination_render(pagination, 'tailwind_pagination.html.twig') }}
+
+
+
+
+
+ Module Name Bearbeiten
+
+
+
+{% endblock %}
+
+{% block body %}
+
+ {{ form_start(form, {attr: {class: ''}}) }}
+
+ {# Vertikales Tab-Layout #}
+
+
+ {# Tab Navigation - Links (2/12) #}
+
+
+ {# Content Area - Rechts (10/12) #}
+
+
+ {# General Tab #}
+
+
Allgemein
+
+ {# Felder in 3er-Gruppen (4/12 Breite) #}
+
+
+ {{ form_row(form.title) }}
+
+
+ {{ form_row(form.position) }}
+
+
+ {{ form_row(form.active) }}
+
+
+
+ {# Felder in 2er-Gruppen (6/12 Breite) #}
+
+
+ {{ form_row(form.startDate) }}
+
+
+ {{ form_row(form.endDate) }}
+
+
+
+ {# Einzelnes Feld (volle Breite) #}
+
+
+ {{ form_row(form.description) }}
+
+
+
+
+ {# Settings Tab #}
+
+
Einstellungen
+
+
+
+ {{ form_row(form.settings) }}
+
+
+
+
+
+
+
+ {# Save Button außerhalb der Card #}
+
+ {{ form_widget(form.save, {
+ attr: {
+ class: 'inline-flex items-center justify-center py-1 gap-1 font-medium rounded-md px-4 text-sm text-white shadow-lg bg-psc-500 hover:bg-psc-600 hover:ring-2 hover:ring-psc-500 hover:ring-offset-2 min-h-[2.25rem]'
+ }
+ }) }}
+
+
+ {{ form_end(form) }}
+
+ {# Changes History (nur bei Edit, nicht bei Create) #}
+
+
Änderungen
+
+
+ {% for change in changes %}
+
+
{{ change.created|date('H:i:s d.m.Y') }}
+
{{ change.username }}
+
+ {% for key, set in change.changeset %}
+ {% if set|length > 1 and set[1] is not iterable %}
+ {{ key }} {{ set[0] }} {% if set[1] is null %}0{% else %}{{ set[1] }}{% endif %}
+ {% endif %}
+ {% endfor %}
+
+
+ {% endfor %}
+
+
+
+
+ {{ form_row(form.field1) }}
+
+
+ {{ form_row(form.field2) }}
+
+
+ {{ form_row(form.field3) }}
+
+
+
+ {{ form_row(form.field1) }}
+
+
+ {{ form_row(form.field2) }}
+
+
+
+ {{ form_row(form.description) }}
+
+