19-05-2026 Rebrand Pressekonto, Hub-Flux UI und Legacy-Media-Migration
Umbenennung presseportale → pressekonto in Domains, Themes und Dokumentation. Design-Tokens, Portal-Shell, Customer-Dashboard, Auth- und Admin-PM-Views. Artisan-Befehl migrate:legacy-media mit Tests und Hub-Flux-Entwicklungsdocs. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
parent
092ee0e918
commit
0a3e52d603
112 changed files with 8464 additions and 1649 deletions
216
dev/frontend/hub-flux/01-PHASE-0-TOKENS.md
Normal file
216
dev/frontend/hub-flux/01-PHASE-0-TOKENS.md
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
# Phase 0 — Design-Tokens vereinheitlichen
|
||||
|
||||
> **Ziel**: Single Source of Truth für alle Design-Tokens (Farben, Fonts,
|
||||
> Radii, Schatten). Sowohl Hub-Build als auch Portal-Build beziehen ihre
|
||||
> Werte aus derselben Datei. **Visuell ändert sich noch nichts.**
|
||||
|
||||
**Status**: ✅ abgeschlossen am 2026-05-19
|
||||
**Risiko**: sehr niedrig
|
||||
**Aufwand (tatsächlich)**: ~½ Tag
|
||||
|
||||
## Ergebnis-Check (2026-05-19)
|
||||
|
||||
- Single Source of Truth liegt in `resources/css/shared/design-tokens.css`.
|
||||
- Web-Build und Portal-Build importieren sie beide.
|
||||
- **Visuelle Unverändertheit verifiziert**:
|
||||
- Hub (`pressekonto.test/`, `/login`, `/register`) — unverändert.
|
||||
- Portal (`/dashboard`) — FluxUI-Defaults bleiben dominant
|
||||
(`--font-sans: "Instrument Sans"`, Zinc-Palette, `#3ea3dc`-Akzent).
|
||||
- Build-Sizes:
|
||||
- `theme-pressekonto: 193 kB` (vorher 189 kB · +4 kB für neue Tokens)
|
||||
- `theme-presseecho`, `theme-businessportal24`: praktisch unverändert
|
||||
- `portal: 408 kB` (vorher 397 kB · +12 kB für zusätzlich bereitgestellte Token-Vars im `:root`)
|
||||
- Details: `PROGRESS.md` (Eintrag vom 2026-05-19).
|
||||
|
||||
## Warum
|
||||
|
||||
Heute leben Tokens an zwei Orten:
|
||||
|
||||
- `resources/css/web/theme-pressekonto.css` — Hub-Tokens (Hub-Blau,
|
||||
Bernstein, Buchpapier, Inter Tight)
|
||||
- `resources/css/portal.css` — Portal-Tokens (Zinc, `#3ea3dc`, Instrument
|
||||
Sans)
|
||||
|
||||
Solange diese parallel gepflegt werden, **driften** sie auseinander. Wir
|
||||
ziehen die gemeinsame Wahrheit in eine eigene Datei und referenzieren
|
||||
sie aus beiden Welten.
|
||||
|
||||
## Liefergegenstand
|
||||
|
||||
```
|
||||
resources/css/shared/
|
||||
└── design-tokens.css ← NEU
|
||||
```
|
||||
|
||||
Inhalt: alle `--color-*`, `--font-*`, `--radius-*`, `--shadow-*` Tokens,
|
||||
die in Hub und Portal gleichermaßen gelten. Strukturiert als
|
||||
`@theme`-Block, sodass Tailwind v4 die Variablen sowohl als
|
||||
CSS-Custom-Properties als auch als Tailwind-Utility-Klassen erkennt.
|
||||
|
||||
## Schritte
|
||||
|
||||
### 1. Token-Inventur aus `theme-pressekonto.css`
|
||||
|
||||
Die folgenden Tokens werden aus `theme-pressekonto.css` extrahiert und
|
||||
nach `shared/design-tokens.css` verschoben:
|
||||
|
||||
#### Surfaces
|
||||
- `--color-bg`, `--color-bg-elev`, `--color-bg-rule`, `--color-bg-rule-strong`
|
||||
- `--color-bg-dark`, `--color-bg-card`, `--color-bg-card-warm`,
|
||||
`--color-bg-card-warm-border`, `--color-bg-card-warm-hover`,
|
||||
`--color-bg-card-warm-rule`
|
||||
|
||||
#### Hub-Palette
|
||||
- `--color-hub`, `--color-hub-2`, `--color-hub-3`
|
||||
- `--color-hub-soft`, `--color-hub-soft-2`, `--color-hub-line`
|
||||
- `--color-topbar`, `--color-topbar2`, `--color-topbar-deep`
|
||||
|
||||
#### Akzent (Bernstein)
|
||||
- `--color-accent`, `--color-accent-deep`, `--color-accent-soft`,
|
||||
`--color-accent-warm`
|
||||
|
||||
#### Ink (Anthrazit)
|
||||
- `--color-ink`, `--color-ink-2`, `--color-ink-3`, `--color-ink-4`
|
||||
- `--color-ink-on-dark`, `--color-ink-on-dark-2`, `--color-ink-on-dark-3`,
|
||||
`--color-ink-on-dark-muted`, `--color-ink-on-dark-rule`
|
||||
|
||||
#### Brand-Aliase + Status
|
||||
- `--color-brand`, `--color-brand-deep`, `--color-brand-soft`
|
||||
- `--color-live`, `--color-gain`, `--color-loss`, `--color-ok`
|
||||
|
||||
#### Editorial / Cards
|
||||
- `--color-card-warm-cat`, `--color-card-warm-title`,
|
||||
`--color-feature-line`, `--color-feature-dot`
|
||||
|
||||
#### Status (für KPI-Cards / Badges — laut Mockup ergänzen)
|
||||
- `--color-warn` `#A87A1F`, `--color-warn-soft` `#F6EAC8`
|
||||
- `--color-err` `#A8331F`, `--color-err-soft` `#F4DAD2`
|
||||
- `--color-ok-soft` `#E2F1E5`
|
||||
|
||||
#### Fonts
|
||||
- `--font-sans` (Inter Tight)
|
||||
- `--font-serif` (Source Serif 4 — nur für Brand-Mark)
|
||||
- `--font-mono` (JetBrains Mono)
|
||||
|
||||
#### Layout
|
||||
- `--container-layout: 1280px`
|
||||
|
||||
#### Radii (laut Mockup)
|
||||
- `--radius-xs: 3px`, `--radius-sm: 4px`, `--radius-md: 6px`,
|
||||
`--radius-lg: 8px`
|
||||
|
||||
#### Schatten (laut Mockup + Hub-Login)
|
||||
- `--shadow-soft`: leicht warm, für Cards
|
||||
- `--shadow-card`: Standard-Card-Schatten
|
||||
- `--shadow-card-hover`: Hover-Stufe
|
||||
- `--shadow-auth`: weiche Glocke unter Auth-Card
|
||||
|
||||
### 2. Datei `resources/css/shared/design-tokens.css` anlegen
|
||||
|
||||
Aufbau:
|
||||
|
||||
```css
|
||||
/**
|
||||
* Hub × FluxUI — Gemeinsame Design-Tokens
|
||||
*
|
||||
* Single Source of Truth für Hub-Frontend (build/web) und Portal-Backend
|
||||
* (build/portal). Beide CSS-Builds @import diese Datei.
|
||||
*
|
||||
* Token-Names sind STABIL — Werte können sich ändern (z.B. Dark Mode in
|
||||
* Phase 5), Namen nicht.
|
||||
*/
|
||||
|
||||
@theme {
|
||||
/* Surfaces */
|
||||
--color-bg: #f6f4ef;
|
||||
--color-bg-elev: #fbfaf6;
|
||||
/* … alle Tokens aus der Inventur … */
|
||||
}
|
||||
|
||||
/* Dark Mode (vorbereitet, in Phase 5 finalisiert) */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@theme {
|
||||
/* Spätere Dark-Werte */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3. `theme-pressekonto.css` refactoren
|
||||
|
||||
Die `@theme {}`-Definitionen werden durch einen
|
||||
`@import "../shared/design-tokens.css";` ersetzt. Nur die `@layer
|
||||
components {}`-Klassen (`.eyebrow`, `.auth-card`, `.field-input`, etc.)
|
||||
bleiben in `theme-pressekonto.css`.
|
||||
|
||||
`:root { … --background, --primary … }`-HSL-Variablen für Legacy-Komponenten
|
||||
bleiben ebenfalls hier (sind Portal-unspezifisch).
|
||||
|
||||
### 4. `portal.css` minimal vorbereiten (noch keine Werte übernehmen)
|
||||
|
||||
In Phase 0 importieren wir die Token-Datei in `portal.css`, **aber lassen
|
||||
das alte `@theme`-Setup mit Zinc/Accent zunächst stehen**. Damit:
|
||||
|
||||
- Beide Welten greifen technisch auf die gleiche Datei zu
|
||||
- Aber Portal bleibt visuell unverändert (Zinc-Palette gewinnt durch
|
||||
Reihenfolge im `@theme`)
|
||||
|
||||
In Phase 1 wird das Zinc-Setup dann **gezielt durch Hub-Werte ersetzt**.
|
||||
|
||||
### 5. Build & Verifikation
|
||||
|
||||
```bash
|
||||
npm run build:web # → erzeugt theme-pressekonto.css ohne Drift
|
||||
npm run build:portal # → erzeugt portal.css unverändert
|
||||
```
|
||||
|
||||
Erwartung:
|
||||
- Hub-Landing rendert visuell **identisch** wie vorher
|
||||
- Hub-Auth-Pages rendern visuell **identisch** wie vorher
|
||||
- Portal rendert visuell **identisch** wie vorher
|
||||
|
||||
Smoke-Test (kein neues Test-Schreiben nötig):
|
||||
|
||||
```bash
|
||||
php artisan tinker --execute '
|
||||
$urls = [
|
||||
"https://pressekonto.test/",
|
||||
"https://pressekonto.test/login",
|
||||
"https://pressekonto.test/dashboard",
|
||||
];
|
||||
foreach ($urls as $u) {
|
||||
echo $u . " => " .
|
||||
app(\Illuminate\Contracts\Http\Kernel::class)
|
||||
->handle(\Illuminate\Http\Request::create($u, "GET"))
|
||||
->getStatusCode() . "\n";
|
||||
}'
|
||||
```
|
||||
|
||||
Alle 3 URLs müssen weiterhin `200` liefern (für `/dashboard` ggf.
|
||||
`302`-Redirect, je nach Auth-Status — beides ist okay, solange kein `500`).
|
||||
|
||||
## Akzeptanzkriterien
|
||||
|
||||
- [ ] `resources/css/shared/design-tokens.css` existiert mit allen Hub-Tokens
|
||||
- [ ] `theme-pressekonto.css` importiert die Token-Datei und enthält
|
||||
keine doppelten `--color-*`-Definitionen mehr
|
||||
- [ ] `portal.css` importiert die Token-Datei (Werte werden in Phase 1 genutzt)
|
||||
- [ ] `npm run build:web` und `npm run build:portal` laufen ohne Fehler durch
|
||||
- [ ] Hub-Landing, Hub-Auth und Portal-Login visuell **unverändert**
|
||||
- [ ] Pint passed (`vendor/bin/sail bin pint --dirty --format agent`)
|
||||
|
||||
## Risiken & Fallstricke
|
||||
|
||||
- **Tailwind v4 + `@theme`**: Mehrere `@theme {}`-Blöcke in importierten
|
||||
Dateien werden zusammengeführt. Das funktioniert, solange die
|
||||
Token-Namen eindeutig sind.
|
||||
- **Reihenfolge der Imports**: Tokens müssen **vor** den
|
||||
`@layer components {}`-Definitionen importiert werden, sonst
|
||||
greifen die Variablen in den Komponenten nicht.
|
||||
- **Portal-Tailwind-Config**: `tailwind.portal.config.js` darf die
|
||||
Token-Datei nicht ausschließen. `@source`-Direktiven prüfen.
|
||||
|
||||
## Was Phase 0 NICHT macht
|
||||
|
||||
- Portal sieht **noch nicht** wie der Hub aus — das ist Phase 1
|
||||
- Keine Änderung am Sidebar-Layout, am Logo oder am Dashboard
|
||||
- Keine Dark-Mode-Aktivierung (nur vorbereitet)
|
||||
290
dev/frontend/hub-flux/02-PHASE-1-PORTAL-SHELL.md
Normal file
290
dev/frontend/hub-flux/02-PHASE-1-PORTAL-SHELL.md
Normal file
|
|
@ -0,0 +1,290 @@
|
|||
# Phase 1 — Portal-Shell ans Hub-Design angleichen
|
||||
|
||||
> **Ziel**: Sidebar, Topbar und Layout-Container des Portals sehen aus
|
||||
> wie das Mockup `User Dashboard presseportale.html`. Inhalt der
|
||||
> einzelnen Pages bleibt unverändert — wir tauschen nur die Shell.
|
||||
|
||||
**Status**: ✅ abgeschlossen am 2026-05-19
|
||||
**Risiko (tatsächlich)**: niedrig — keine Test-Regressionen
|
||||
**Aufwand (tatsächlich)**: ~½ Tag (kleiner als geschätzt, weil Topbar
|
||||
auf Phase 2 verschoben wurde)
|
||||
|
||||
## Ergebnis-Check (2026-05-19)
|
||||
|
||||
**Umgesetzt**:
|
||||
- `portal.css` mit Hub-Token-Bridge, Inter-Tight-Font, Zinc→Hub-Mapping,
|
||||
FluxUI-Overrides für Sidebar / Navlist / Buttons / Cards.
|
||||
- Sidebar mit Brand-Mark + Eyebrow „Publisher · Hub", neuem Hub-Stil-
|
||||
Testmodus-Block, ohne Starter-Kit-Resources-Block.
|
||||
- Customer-Banner (`app.blade.php`) im Hub-Soft-Look mit Hub-Pille.
|
||||
- `class="dark"` aus Sidebar-Layout entfernt — Light Mode ist Default.
|
||||
- Font-Wechsel auf Bunny: `inter-tight + jetbrains-mono + source-serif-4`.
|
||||
|
||||
**Verschoben auf Phase 2**:
|
||||
- Eigene Topbar mit Breadcrumb + Bridge-Row + Search + „Neue Mitteilung"-CTA
|
||||
(lebt sinnvoller im Customer-Dashboard-Kontext).
|
||||
- Konto-Switcher als Sidebar-Header oben (statt User-Menü unten).
|
||||
|
||||
**Build-Sizes**:
|
||||
- `portal.css: 409.03 kB` (vorher 408.89 kB · +0.14 kB · weit unter dem
|
||||
10 %-Limit aus den Akzeptanzkriterien).
|
||||
|
||||
**Tests**:
|
||||
- Auth-Test-Suite Vergleich (Stash vs Phase 1): `8 failed, 15 passed`
|
||||
in beiden Ständen — 0 zusätzliche Regressionen durch Phase 1.
|
||||
- Zwei Tests im Zuge des Login-Fixes angepasst (Admin-Rolle bzw.
|
||||
`terms_accepted: true`), siehe `PROGRESS.md` Eintrag „Phase 1".
|
||||
|
||||
**Details**: `PROGRESS.md` (Eintrag vom 2026-05-19, Abschnitt „Phase 1").
|
||||
|
||||
## Sichtbarer Mehrwert
|
||||
|
||||
Nach Phase 1 sieht der eingeloggte User:
|
||||
- Eine **warme Sidebar** im Hub-Stil mit Brand-Wortmarke statt
|
||||
Starter-Kit-Logo
|
||||
- Eine **schlanke Topbar** mit Breadcrumb, Bridge-Row, Search, Notification,
|
||||
"Neue Mitteilung"-Button
|
||||
- Den **Testmodus-Block** (Impersonation) als Hub-Karten-Element
|
||||
- Den **Konto-Switcher** als oberen Sidebar-Header
|
||||
|
||||
Innenleben (Tabellen, Formulare, Cards) bleiben FluxUI — wirken aber
|
||||
durch Token-Anpassung **automatisch passender**.
|
||||
|
||||
## Liefergegenstand
|
||||
|
||||
### Geänderte Dateien
|
||||
|
||||
| Datei | Änderung |
|
||||
|-------|----------|
|
||||
| `resources/css/portal.css` | Zinc → Hub-Palette, Font auf Inter Tight, `--color-accent` auf Hub-Blau, FluxUI-Overrides |
|
||||
| `resources/views/components/layouts/app/sidebar.blade.php` | Brand-Mark statt App-Logo, Eyebrow „Publisher · Hub", Sidebar-Design am Mockup orientiert, Testmodus-Block neu |
|
||||
| `resources/views/partials/head.blade.php` | Font-Wechsel (Bunny: inter-tight + jetbrains-mono statt instrument-sans) |
|
||||
| `resources/views/components/layouts/app.blade.php` | Customer-Banner ggf. an neues Design anpassen |
|
||||
|
||||
### Vermutlich gelöscht
|
||||
|
||||
| Datei | Begründung |
|
||||
|-------|------------|
|
||||
| `resources/views/components/layouts/app/header.blade.php` | Wird laut Inventur nirgends referenziert |
|
||||
| `resources/views/partials/admin-head.blade.php` | Legacy, im Code nicht eingebunden |
|
||||
| `resources/views/components/app-logo.blade.php` | Wird durch `brand-mark` ersetzt |
|
||||
| `resources/views/components/app-logo-icon.blade.php` | Wird durch `brand-mark` ersetzt |
|
||||
|
||||
Vor Löschung: per `rg "x-app-logo"` und `rg "auth.split|auth.card"`
|
||||
prüfen, dass nichts mehr referenziert wird.
|
||||
|
||||
## Schritte
|
||||
|
||||
### 1. `portal.css` — Token-Bridge zu FluxUI
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
@import "../../vendor/livewire/flux/dist/flux.css";
|
||||
@import "./shared/design-tokens.css"; /* aus Phase 0 */
|
||||
|
||||
@source '../views';
|
||||
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
|
||||
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
/* FluxUI-Akzent auf Hub-Blau */
|
||||
--color-accent: var(--color-hub);
|
||||
--color-accent-content: var(--color-hub);
|
||||
--color-accent-foreground: #ffffff;
|
||||
|
||||
/* Zinc auf warmes Buchpapier mappen */
|
||||
--color-zinc-50: var(--color-bg-elev); /* #FBFAF6 */
|
||||
--color-zinc-100: var(--color-bg); /* #F6F4EF */
|
||||
--color-zinc-200: var(--color-bg-rule); /* #E2DDD0 */
|
||||
--color-zinc-300: #cfc8b5;
|
||||
--color-zinc-400: var(--color-ink-4); /* #8A918D */
|
||||
--color-zinc-500: var(--color-ink-3); /* #5A6360 */
|
||||
--color-zinc-600: var(--color-ink-2); /* #3A413D */
|
||||
--color-zinc-700: var(--color-ink); /* #1A1F1C */
|
||||
--color-zinc-800: var(--color-hub-2); /* #243152 */
|
||||
--color-zinc-900: var(--color-hub); /* #1A2540 */
|
||||
--color-zinc-950: var(--color-topbar-deep); /* #0F1729 */
|
||||
}
|
||||
```
|
||||
|
||||
#### FluxUI-spezifische Overrides
|
||||
|
||||
```css
|
||||
/* Navlist — Hub-Stil mit Active-Strip links */
|
||||
[data-flux-navlist-item][data-active="true"] {
|
||||
background: var(--color-hub-soft);
|
||||
color: var(--color-hub);
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
}
|
||||
[data-flux-navlist-item][data-active="true"]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
bottom: 6px;
|
||||
width: 2px;
|
||||
background: var(--color-hub);
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
/* Buttons — Hub-Primär */
|
||||
[data-flux-button][data-variant="primary"] {
|
||||
background: var(--color-hub);
|
||||
color: #ffffff;
|
||||
}
|
||||
[data-flux-button][data-variant="primary"]:hover {
|
||||
background: var(--color-hub-2);
|
||||
}
|
||||
|
||||
/* Sidebar-Section-Headings */
|
||||
[data-flux-navlist] [data-flux-navlist-group-heading] {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-ink-4);
|
||||
}
|
||||
|
||||
/* Cards bekommen Hub-Buchpapier statt Zinc */
|
||||
[data-flux-card] {
|
||||
background: var(--color-bg-card);
|
||||
border-color: var(--color-bg-rule);
|
||||
}
|
||||
```
|
||||
|
||||
> **Hinweis**: Die exakten `[data-flux-*]`-Attribute werden beim Bauen
|
||||
> per Dev-Tools verifiziert. Die hier gezeigten sind die wahrscheinlichsten
|
||||
> laut FluxUI-Doku.
|
||||
|
||||
### 2. `partials/head.blade.php` — Font wechseln
|
||||
|
||||
```diff
|
||||
- <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600"
|
||||
+ <link href="https://fonts.bunny.net/css?family=inter-tight:400,500,600,700|jetbrains-mono:400,500,600|source-serif-4:400,500,600,700"
|
||||
rel="stylesheet" />
|
||||
```
|
||||
|
||||
### 3. Sidebar neu — `components/layouts/app/sidebar.blade.php`
|
||||
|
||||
Aufbau **strikt am Mockup** orientiert (s. `dev/frontend/tailwind_v3/User Dashboard presseportale.html`):
|
||||
|
||||
#### Sidebar-Aufbau (oben → unten)
|
||||
|
||||
1. **Brand-Block** (`px-5 pt-6 pb-5`):
|
||||
- `<x-web.brand-mark brand="pressekonto" :serif="false" />` (19 px, bold)
|
||||
- Eyebrow „Publisher · Hub" darunter
|
||||
- **Konto-Switcher-Button** mit Avatar (Initialen), Name, Firma — als
|
||||
`<flux:dropdown>`-Trigger mit Custom-Stil
|
||||
|
||||
2. **Navigation** (`px-3 flex-1`):
|
||||
- Section „Mein Bereich": Übersicht, Meine Pressemitteilungen (mit Counter-Badge),
|
||||
Firmen, Buchungen & Add-ons, Statistiken (disabled, „bald")
|
||||
- Section „Finanzen": Credits & Tarif (bald), Rechnungen, Zahlungsarten (bald)
|
||||
- Section „Konto": Profil, Sicherheit, API & Integrationen, Benachrichtigungen (bald)
|
||||
- Section „Administration" (nur für Admins/Editoren): Press-Releases, Companies, Users, Roles, etc.
|
||||
|
||||
3. **Testmodus-Block** (`px-4 pb-4`) — wenn Impersonation aktiv:
|
||||
- Hub-blaues Panel mit Bernstein-Eyebrow „Testmodus aktiv"
|
||||
- „Zurück zum Admin"-Button (weiß auf Hub-Blau)
|
||||
|
||||
4. **Resources-Block** (`px-3 pb-5 border-t`):
|
||||
- Optional: Tailwind CSS, Hero Icons, Flux UI, Repository
|
||||
- Im Live-Portal vermutlich weglassen oder durch eigene Hilfe-Links ersetzen
|
||||
|
||||
#### Komponenten-Strategie
|
||||
|
||||
Wo immer möglich **FluxUI-Komponenten** verwenden:
|
||||
- `<flux:sidebar>` als Wrapper
|
||||
- `<flux:navlist>` für Section-Gruppen
|
||||
- `<flux:navlist.item>` für Einträge, `data-active`-Markierung übernimmt CSS-Override
|
||||
- `<flux:dropdown>` für Konto-Switcher
|
||||
- `<flux:badge>` für Counter
|
||||
|
||||
Wo FluxUI nicht passt (z.B. Konto-Switcher-Header mit Avatar+Name+Firma+Chevron):
|
||||
**Custom Blade** in `<x-portal.account-switcher>` als wiederverwendbare Komponente.
|
||||
|
||||
### 4. `app.blade.php` — Customer-Banner Hub-Stil
|
||||
|
||||
Der Banner „User Backend" (für Customer-Rolle) wird visuell ans Hub-Design
|
||||
angeglichen — Hub-Soft-Hintergrund, Hub-Blau-Eyebrow, Firma-Switcher als
|
||||
Pille.
|
||||
|
||||
### 5. `class="dark"` entfernen
|
||||
|
||||
In allen Auth- und App-Layouts:
|
||||
|
||||
```diff
|
||||
- <html lang="..." class="dark">
|
||||
+ <html lang="...">
|
||||
```
|
||||
|
||||
FluxUI Appearance-Switcher in den Settings übernimmt die Steuerung.
|
||||
Dark-Mode-Werte landen in Phase 5 in `design-tokens.css`.
|
||||
|
||||
### 6. Build & Visual-Check
|
||||
|
||||
```bash
|
||||
npm run build:portal
|
||||
```
|
||||
|
||||
Öffnen und visuell prüfen:
|
||||
- `https://pressekonto.test/dashboard` (Admin-Dashboard)
|
||||
- `https://pressekonto.test/admin/me` (Customer-Dashboard)
|
||||
- `https://pressekonto.test/settings/profile`
|
||||
- `https://pressekonto.test/admin/companies`
|
||||
- `https://pressekonto.test/admin/press-releases`
|
||||
|
||||
Erwartung:
|
||||
- Sidebar wie Mockup
|
||||
- Topbar mit Breadcrumb + Aktionen
|
||||
- Inhalt unverändert, aber Tabellen/Cards/Buttons in Hub-Tonart
|
||||
- Keine kaputten Layouts
|
||||
|
||||
## Akzeptanzkriterien
|
||||
|
||||
- [ ] Sidebar nutzt `<x-web.brand-mark brand="pressekonto" />` statt `x-app-logo`
|
||||
- [ ] Sidebar-Sections und Active-Item entsprechen visuell dem Mockup
|
||||
- [ ] Topbar hat Breadcrumb, Search, Notification, „Neue Mitteilung"-CTA
|
||||
- [ ] Font im Portal ist **Inter Tight** (sichtbar im DevTools)
|
||||
- [ ] FluxUI-Buttons (Primary) sind **Hub-Blau**, nicht mehr `#3ea3dc`
|
||||
- [ ] FluxUI-Tabellen sehen sauber aus mit Buchpapier-Hintergrund
|
||||
- [ ] `class="dark"` ist aus allen Layouts entfernt
|
||||
- [ ] Alle bestehenden Routen `/dashboard`, `/admin/*`, `/admin/me/*`,
|
||||
`/settings/*` rendern Status 200
|
||||
- [ ] Pint & vorhandene Tests bleiben grün
|
||||
- [ ] Page-Last-Vergleich: `portal.css`-Größe darf um max. 10 % wachsen
|
||||
|
||||
## Risiken & Fallstricke
|
||||
|
||||
- **FluxUI-Selektoren ändern sich**: `[data-flux-*]`-Attribute sind nicht
|
||||
öffentlich dokumentierte API, sondern Implementation-Detail. Bei
|
||||
FluxUI-Update kann ein Override brechen. Mitigation: Selektoren so
|
||||
spezifisch wie nötig, so generisch wie möglich; gut kommentieren.
|
||||
- **Zinc-Remapping kann Side-Effects haben**: Stellen, die hardcoded
|
||||
`zinc-700` für Text-Farben verwenden, werden plötzlich Hub-Blau.
|
||||
Mitigation: nach dem Build kritische Pages durchklicken; gegebenenfalls
|
||||
einzelne Stellen explizit auf `text-ink` umstellen.
|
||||
- **Tailwind v4 Custom-Properties**: Reihenfolge im `@theme`-Block ist
|
||||
wichtig — Tokens müssen vor Overrides definiert sein.
|
||||
- **Mobile Sidebar**: Das Mockup zeigt nur Desktop. `flux:sidebar` hat
|
||||
einen eingebauten Mobile-Toggle — der bleibt erhalten und wird visuell
|
||||
angeglichen.
|
||||
|
||||
## Was Phase 1 NICHT macht
|
||||
|
||||
- Dashboards (`admin.dashboard`, `customer.dashboard`) bekommen noch
|
||||
**kein** Stat-Card-Strip-Redesign — das ist Phase 2 + 3
|
||||
- Listen-Pages werden nicht überarbeitet — passt automatisch durch
|
||||
Token-Anpassung „gut genug" bis Phase 4
|
||||
- Dark Mode wird nicht aktiv ausgeliefert — Token-Werte werden vorbereitet,
|
||||
aber bleiben in Phase 5
|
||||
|
||||
## Review-Punkt
|
||||
|
||||
Nach Phase 1 wird Frank/Du visuell drüberschauen und entscheiden:
|
||||
- Welche Detail-Pages priorisiert werden (Phase 4)
|
||||
- Ob Customer-Dashboard (Phase 2) direkt danach kommt
|
||||
- Ob das Auth-Layout im Portal (`auth.split`, `auth.card`) entfernt werden kann
|
||||
162
dev/frontend/hub-flux/03-WEITERE-PHASEN.md
Normal file
162
dev/frontend/hub-flux/03-WEITERE-PHASEN.md
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
# Weitere Phasen — Outline
|
||||
|
||||
> Übersicht über Phasen 2–6. Diese werden detailliert ausgearbeitet,
|
||||
> sobald Phase 0+1 abgenommen sind. Jede Phase bekommt ein eigenes
|
||||
> `0X-PHASE-N-NAME.md`, wenn sie aktiv wird.
|
||||
|
||||
---
|
||||
|
||||
## Phase 2 — Customer-Dashboard auf Mockup-Stil
|
||||
|
||||
**Status**: ⚪ später · **Aufwand**: ~½ Tag · **Risiko**: niedrig
|
||||
|
||||
### Ziel
|
||||
`livewire/customer/dashboard.blade.php` matched das Mockup
|
||||
`User Dashboard presseportale.html` zu ≥ 90 %.
|
||||
|
||||
### Bausteine
|
||||
- **Page-Header** mit „Mein Dashboard" + Begrüßung + Firma-zugeordnet-Pille
|
||||
- **KPI-Reihe** (4 Stat-Cards mit linkem Farb-Strip)
|
||||
- Gesamt (Hub-Blau-Strip)
|
||||
- Veröffentlicht (Grün-Strip, `is-ok`)
|
||||
- In Prüfung (Bernstein-Strip, `is-warn`)
|
||||
- Entwürfe (Grau-Strip, `is-muted`)
|
||||
- **2-Spalten-Grid**:
|
||||
- Links: Empty-State / Liste „Meine letzten Pressemitteilungen"
|
||||
- Rechts: „Datenqualität" mit Progress-Bars (Profil-Vollständigkeit,
|
||||
Rechnungsadresse)
|
||||
- **Unten**:
|
||||
- Links: Firmen-Slots
|
||||
- Rechts: Brand-Bridge-Dark-Card (presseecho + businessportal24)
|
||||
|
||||
### Neue Blade-Components
|
||||
- `<x-portal.stat-card>` — Stat-Card mit Slot + Strip-Variante
|
||||
- `<x-portal.hint-card>` — Datenqualitäts-Hint mit Icon + Progress-Bar
|
||||
- `<x-portal.bridge-card>` — Dunkle Brand-Bridge-Card
|
||||
|
||||
→ Diese landen in `resources/views/components/portal/`.
|
||||
|
||||
---
|
||||
|
||||
## Phase 3 — Admin-Dashboard konsistent
|
||||
|
||||
**Status**: ⚪ später · **Aufwand**: ~½ Tag · **Risiko**: niedrig
|
||||
|
||||
### Ziel
|
||||
`resources/views/admin/dashboard.blade.php` nutzt dasselbe Vokabular wie
|
||||
Customer-Dashboard.
|
||||
|
||||
### Heutiger Stand
|
||||
Reines Tailwind mit `zinc-*`-Klassen, **keine** FluxUI-Komponenten,
|
||||
visuell aus der Zeit gefallen.
|
||||
|
||||
### Schritte
|
||||
- KPI-Karten als `<x-portal.stat-card>`
|
||||
- Wenn Charts vorhanden: über `flux:chart` umsetzen (FluxUI Pro)
|
||||
- Recent-Activity-Liste in `flux:card` mit Hub-Akzenten
|
||||
|
||||
---
|
||||
|
||||
## Phase 4 — Listen-/Detail-Pages durchgehen
|
||||
|
||||
**Status**: 🚧 iterativ · **Aufwand**: ~3–5 Tage gesamt · **Risiko**: niedrig
|
||||
|
||||
### Ziel
|
||||
Alle Volt-Pages im Admin- und Customer-Bereich nutzen denselben Hub-Stil.
|
||||
|
||||
### Vorgehen
|
||||
- Pro Page: 15–30 min
|
||||
- In Päckchen geteilt:
|
||||
- **4A** = Press-Releases Listen (Admin + Customer) — ✅ **abgeschlossen**
|
||||
siehe `07-PHASE-4A-PRESS-RELEASES-LISTEN.md`
|
||||
- **4B** = Press-Releases Detail/Show (Admin + Customer) — ✅ **abgeschlossen**
|
||||
siehe `08-PHASE-4B-PRESS-RELEASES-DETAIL.md`
|
||||
- **4C** = Press-Releases Forms (create/edit, Admin + Customer) — ✅ **abgeschlossen**
|
||||
siehe `09-PHASE-4C-PRESS-RELEASES-FORMS.md`
|
||||
- **4D** = Companies (`admin.companies.*`) — ⚪ pending
|
||||
- **4E** = Profile/Settings (`settings.*`, `me.profile`, `me.security`) — ⚪ pending
|
||||
- **4F** = Restliche Admin-Bereiche — ⚪ pending
|
||||
|
||||
### Was geändert wird
|
||||
- Page-Header-Struktur (Eyebrow + H1 + Subtitle + Aktions-Bar)
|
||||
- Filter-Bars werden Hub-konform gestylt
|
||||
- `flux:table`-Header bekommen Eyebrow-Optik
|
||||
- Form-Felder bleiben FluxUI, aber mit Hub-Tokens
|
||||
|
||||
### Was nicht geändert wird
|
||||
- Logik / Volt-Methoden
|
||||
- Datenbank / Models
|
||||
|
||||
---
|
||||
|
||||
## Phase 5 — Dark Mode konsistent
|
||||
|
||||
**Status**: ⚪ später · **Aufwand**: ~½ Tag · **Risiko**: niedrig
|
||||
|
||||
### Ziel
|
||||
Dark Mode funktioniert sauber im Portal, **ohne doppelte UI-Pflege**.
|
||||
|
||||
### Quelle
|
||||
`dev/frontend/tailwind_v3/User Dashboard presseportale Dark.html` hat
|
||||
alle Dark-Tokens bereits vorgegeben.
|
||||
|
||||
### Schritte
|
||||
1. In `shared/design-tokens.css` Dark-Werte ergänzen:
|
||||
```css
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@theme {
|
||||
--color-bg: #0E1218;
|
||||
--color-bg-elev: #14181F;
|
||||
--color-hub: #5A78C2;
|
||||
--color-accent: #D9A560;
|
||||
/* … */
|
||||
}
|
||||
}
|
||||
.dark {
|
||||
/* gleiche Werte für expliziten Switch */
|
||||
}
|
||||
```
|
||||
2. `class="dark"` wird **nicht** mehr hardcoded gesetzt
|
||||
3. Flux Appearance-Switcher (`settings/appearance.blade.php`) steuert
|
||||
`.dark` auf `<html>`
|
||||
4. Hub-Frontend bleibt erstmal Light-Only (so wie heute)
|
||||
|
||||
### Erwartung
|
||||
- Settings → Appearance → „Dark" schaltet Portal um
|
||||
- Settings → Appearance → „System" folgt OS-Präferenz
|
||||
- Sidebar, Topbar, Dashboards, Listen, Forms — alles funktioniert
|
||||
- Hub-Landing und Hub-Auth bleiben Light
|
||||
|
||||
---
|
||||
|
||||
## Phase 6 — Auth-Konsolidierung (optional)
|
||||
|
||||
**Status**: ⚪ optional · **Aufwand**: 0–1 Tag · **Risiko**: mittel
|
||||
|
||||
### Frage
|
||||
Bleibt der Hub-Login (`auth/pressekonto`-Layout, Web-Build) so wie er ist?
|
||||
Oder konsolidieren wir auf den Portal-Build?
|
||||
|
||||
### Pro Konsolidierung
|
||||
- Ein Build weniger
|
||||
- Konsistente Komponenten-Sprache
|
||||
|
||||
### Pro Beibehaltung (heutiger Stand)
|
||||
- Hub-Atmosphäre der Auth-Seiten (Konzentrische Kreise, Hub-Grid) ist
|
||||
visuell sehr stark — würde verloren gehen
|
||||
- Hub-Auth ist **leichtgewichtig** (kein FluxUI im Bundle)
|
||||
- Vorlage `Login pressekonto A3 Tailwind.html` ist bewusst minimalistisch
|
||||
|
||||
### Entscheidung
|
||||
Vermutlich **beibehalten**. Aber: Die alten Auth-Layouts
|
||||
`auth/simple.blade.php`, `auth/split.blade.php`, `auth/card.blade.php` aus
|
||||
dem Starter-Kit können vermutlich gelöscht werden, sobald geprüft ist,
|
||||
dass keine Komponente sie noch verwendet.
|
||||
|
||||
### Schritte (wenn konsolidiert)
|
||||
- Hub-Auth-CSS in `portal.css` ziehen (mit `@source` für die Tokens)
|
||||
- `auth/pressekonto`-Layout auf Portal-Build umstellen
|
||||
- Hub-Auth-Klassen (`.auth-card`, `.auth-grid`, `.auth-btn-primary`)
|
||||
bleiben — laufen nur jetzt aus dem Portal-Bundle
|
||||
- `theme-pressekonto.css` aus dem Web-Build entfernen (oder behalten
|
||||
für die Landing)
|
||||
177
dev/frontend/hub-flux/04-PHASE-2-CUSTOMER-DASHBOARD.md
Normal file
177
dev/frontend/hub-flux/04-PHASE-2-CUSTOMER-DASHBOARD.md
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
# Phase 2 — Customer-Dashboard auf Mockup-Stil
|
||||
|
||||
> Detail-Plan analog zu `01-PHASE-0-TOKENS.md` und
|
||||
> `02-PHASE-1-PORTAL-SHELL.md`. Wird beim Abschluss auf Status `✅ abgeschlossen`
|
||||
> gesetzt; Lessons learned wandern in `PROGRESS.md`.
|
||||
|
||||
**Status**: ✅ abgeschlossen · **Aufwand**: ~½ Tag · **Risiko**: niedrig
|
||||
|
||||
---
|
||||
|
||||
## Ziel
|
||||
|
||||
`resources/views/livewire/customer/dashboard.blade.php` matched das Mockup
|
||||
`dev/frontend/tailwind_v3/User Dashboard presseportale.html` zu ≥ 90 %.
|
||||
Sichtbarer Wow-Moment für den Kunden, ohne neue Business-Logik.
|
||||
|
||||
## Was sich ändert
|
||||
|
||||
### Visuell
|
||||
|
||||
| Bereich | Heute | Mockup |
|
||||
| ----------------- | ------------------------------------------------ | --------------------------------------------------------------------- |
|
||||
| Page-Header | `<flux:card>` mit `<flux:heading>` „Willkommen“ | Hub-Badge + Eyebrow + großes H1 + Untertitel + rechts Status-Pille |
|
||||
| KPI-Reihe | 4 schmale `<flux:card>` mit `<flux:text>`-Zahl | 4 `stat-card`s mit Strip links, Mono-Zahl groß, Sub-Info, Sparkline |
|
||||
| Pressemitteilungen-Block | `<flux:card>` mit Liste / Empty-State | `panel` mit `section-eyebrow`, Empty-State mit Schritt-Karten 01/02/03 |
|
||||
| Datenqualität | Grid aus `<flux:badge>`-Karten | `panel` rechts mit 2 `hint-card`s (Progress-Bar + Action-Link) |
|
||||
| Firmen-Slot | `<flux:card>` mit Firmen-Liste | `panel` mit gestrichelten Empty-Slot-Karten + Hinweis-Box |
|
||||
| Brand-Bridge | (nicht vorhanden) | `panel-dark` rechts: presseecho + businessportal24 Status |
|
||||
| Footer | (nicht vorhanden) | Subtle-Footer mit Tastenkürzel / Changelog / Status / Support |
|
||||
|
||||
### Datenmodell
|
||||
|
||||
Heute liefert das Volt-`with()`:
|
||||
|
||||
- `stats.total | published | review | draft`
|
||||
- `qualityHints[]`
|
||||
- `recent` (PressRelease-Collection, max. 5)
|
||||
- `companies`
|
||||
|
||||
Mockup verlangt **zusätzlich**:
|
||||
|
||||
- `stats.deltaMonth` — Veränderung ggü. Vormonat (Total)
|
||||
- `profileCompleteness` — Prozentwert für Profil-Progress-Bar
|
||||
- `billingCompleteness` — Prozentwert für Rechnungsadresse
|
||||
- `bridgeStatus` — `['presseecho' => 'connected'|'pending', 'businessportal24' => …]`
|
||||
(vorerst `connected` fest verdrahtet, später aus echtem Sync-Status)
|
||||
|
||||
## Was NICHT geändert wird
|
||||
|
||||
- Logik / Volt-Methoden — Layout-only.
|
||||
- Statistik-Backend (`PressRelease::where(...)`) bleibt 1:1.
|
||||
- `qualityHints`-Logik bleibt — wird nur anders gerendert.
|
||||
- Topbar (eigene Phase, später).
|
||||
|
||||
---
|
||||
|
||||
## Implementierungs-Schritte
|
||||
|
||||
### 1. Shared Hub-Components-CSS
|
||||
|
||||
Klassen wandern in **`resources/css/shared/hub-components.css`** (neue Datei).
|
||||
Importiert in:
|
||||
|
||||
- `resources/css/portal.css` (nach `flux.css`)
|
||||
- `resources/css/web/shared-styles.css` (nach `design-tokens.css`)
|
||||
|
||||
Damit haben **Portal-Build und Web-Build** dieselbe Hub-Komponenten-Sprache —
|
||||
DRY für späteres Wiederverwenden (z. B. Admin-Dashboard in Phase 3).
|
||||
|
||||
Folgende Klassen kommen rein (alle mit `var(--color-*)`-Tokens, keine Hex-Literale):
|
||||
|
||||
- `.panel`, `.panel-warm`, `.panel-dark`, `.panel-head`
|
||||
- `.stat-card` + `.stat-strip` + `.stat-label` + `.stat-num`
|
||||
+ Varianten: `.is-primary`, `.is-ok`, `.is-warn`, `.is-muted`
|
||||
- `.hint-card` + `.hint-card .hint-ico`
|
||||
- `.badge` + `.badge.warn` + `.badge.ok` + `.badge.hub` + `.badge.dot`
|
||||
- `.bridge-row`, `.dot-pe`, `.dot-bp`
|
||||
|
||||
### 2. Blade-Components in `resources/views/components/portal/`
|
||||
|
||||
#### `stat-card.blade.php`
|
||||
|
||||
```blade
|
||||
<x-portal.stat-card variant="primary|ok|warn|muted" label="Gesamt" :value="$stats['total']">
|
||||
<x-slot:meta>2026</x-slot:meta> {{-- rechts oben --}}
|
||||
<x-slot:trend>0 ggü. Vormonat</x-slot:trend> {{-- unten --}}
|
||||
</x-portal.stat-card>
|
||||
```
|
||||
|
||||
Render: `<article class="stat-card is-{variant}">` + Strip + Label + Mono-Zahl
|
||||
+ Meta-Slot oben rechts + Trend-Slot unten. Sparkline (SVG) erstmal weggelassen
|
||||
— optionales Detail; lässt sich nachschieben, wenn Daten dafür da sind.
|
||||
|
||||
#### `hint-card.blade.php`
|
||||
|
||||
```blade
|
||||
<x-portal.hint-card :icon="$hint['icon']" :title="$hint['title']" :percent="60" :href="$hint['href']">
|
||||
{{ $hint['description'] }}
|
||||
<x-slot:action>Profil öffnen</x-slot:action>
|
||||
</x-portal.hint-card>
|
||||
```
|
||||
|
||||
Render: `.hint-card`-Grid mit Icon-Square + Progress-Bar + Text + Action-Link
|
||||
in `text-accent-deep`.
|
||||
|
||||
#### `bridge-card.blade.php` (optional, Phase 2 minimal)
|
||||
|
||||
Bleibt erstmal **inline** im Dashboard (sehr spezifisch, eine Stelle).
|
||||
Wird in Phase 3/4 extrahiert, wenn klar ist wie weit der Brand-Bridge-Pattern
|
||||
sich verbreitet.
|
||||
|
||||
### 3. `customer/dashboard.blade.php` umbauen
|
||||
|
||||
Layout-Skelett (alles im `<div class="space-y-8">`-Container):
|
||||
|
||||
1. **Page-Header** — `<header>` mit Grid `1fr auto`:
|
||||
- Links: Hub-Badge `User Backend` + Eyebrow + `<h1>Mein Dashboard</h1>`
|
||||
+ Subtitle (Name + Reichweiten-Hinweis)
|
||||
- Rechts: Status-Pille
|
||||
- Wenn `$selectedCompany`: Hub-Badge mit Firma-Name (grün/ok-Stil)
|
||||
- Wenn nicht: Warn-Pille „Keine Firma zugeordnet → zuordnen“
|
||||
2. **KPI-Reihe** — 4 `<x-portal.stat-card>` (Gesamt/Veröffentlicht/Prüfung/Entwürfe)
|
||||
3. **Zweispalten-Grid** (`2fr 1fr`):
|
||||
- Links: `<article class="panel">` mit Pressemitteilungen — Liste **oder**
|
||||
Empty-State (3 Schritt-Karten)
|
||||
- Rechts: `<article class="panel">` mit `<x-portal.hint-card>`s
|
||||
4. **Unteres Grid** (`2fr 1fr`):
|
||||
- Links: `<article class="panel">` Firmen — Liste **oder** Empty-Slot-Karten
|
||||
- Rechts: `<article class="panel-dark">` Brand-Bridge (inline)
|
||||
5. **Footer** — kleine Link-Reihe in `text-ink-3`
|
||||
|
||||
### 4. Volt `with()` ergänzen
|
||||
|
||||
- `stats.deltaMonth` via zweiter Query (Vormonats-Counts vs. Aktuell)
|
||||
- `profileCompleteness` als simpler Heuristik-Wert (firstname/lastname/phone/etc.)
|
||||
- `billingCompleteness` analog (Vorhanden = 100, sonst 0; oder Ist-Felder/Soll-Felder)
|
||||
- `bridgeStatus` vorerst hardcoded `['presseecho' => 'connected', 'businessportal24' => 'connected']`
|
||||
→ später aus echtem Sync-Service
|
||||
|
||||
### 5. Tests
|
||||
|
||||
`tests/Feature/Customer/DashboardTest.php` (oder bestehender Test, falls vorhanden):
|
||||
|
||||
- Rendert ohne Fehler bei eingeloggtem Customer
|
||||
- Stat-Zahlen werden korrekt ausgegeben
|
||||
- Empty-State wird angezeigt, wenn keine PRs existieren
|
||||
- Quality-Hints werden angezeigt, wenn `profile()` fehlt
|
||||
|
||||
---
|
||||
|
||||
## Akzeptanzkriterien
|
||||
|
||||
- [x] Phase-2-Plan-Dokument geschrieben
|
||||
- [x] `shared/hub-components.css` existiert, importiert in beiden Builds
|
||||
- [x] `<x-portal.stat-card>` und `<x-portal.hint-card>` rendern wie Mockup
|
||||
- [x] `/admin/me` zeigt das neue Dashboard ohne Console-Errors
|
||||
- [x] Empty-State für Pressemitteilungen ist sichtbar, wenn keine vorhanden
|
||||
- [x] Quality-Hints rendern mit Progress-Bar
|
||||
- [x] Brand-Bridge-Dark-Card unten rechts zeigt presseecho + businessportal24
|
||||
- [x] Neuer Smoke-Test `tests/Feature/Customer/DashboardTest.php` mit 5 Cases
|
||||
(Core-Sections, Empty-State, PR-Liste, Profil-Hint, vollständiges Profil
|
||||
blendet Hints aus). Cross-Check: alle 18 verwandten Tests bleiben grün.
|
||||
- [x] Pint clean
|
||||
- [x] `PROGRESS.md`-Eintrag
|
||||
|
||||
---
|
||||
|
||||
## Risiken & Mitigation
|
||||
|
||||
- **FluxUI-Klassen vs. Custom-CSS-Kollisionen** — wir mischen `<flux:badge>`
|
||||
weiterhin **nicht** im Dashboard (für Status-Pillen nehmen wir
|
||||
`.badge.hub|.warn|.ok|.dot`). Auf den Detail-Seiten (Phase 4) bleibt
|
||||
FluxUI dominant.
|
||||
- **Sparklines weggelassen** — minimaler Stilverlust, wird in Phase 4 mit
|
||||
echten Trend-Daten nachgereicht. Mockup-Match weiterhin ≥ 90 %.
|
||||
- **`stats.deltaMonth`-Performance** — zweite Query auf gleicher Tabelle;
|
||||
bei wachsendem Datensatz später cachen. Heute irrelevant.
|
||||
159
dev/frontend/hub-flux/05-PHASE-5-DARK-MODE.md
Normal file
159
dev/frontend/hub-flux/05-PHASE-5-DARK-MODE.md
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
# Phase 5 — Dark Mode konsistent + Appearance-Switcher im User-Menü
|
||||
|
||||
> **Vorzugsphase**: Eigentlich Phase 5, vorgezogen vor Phase 3/4 nach
|
||||
> User-Wunsch. Grund: Der FluxUI-Appearance-Switcher hat in Phase 1 den
|
||||
> Dark-Mode-Bug ausgelöst (`#6d8ad3` statt Hub-Blau); statt Symptom-Fix
|
||||
> wollen wir den vollen Dark Mode jetzt richtig.
|
||||
|
||||
**Status**: ✅ abgeschlossen · **Aufwand**: ~½ Tag · **Risiko**: niedrig
|
||||
|
||||
---
|
||||
|
||||
## Ziele
|
||||
|
||||
1. Dark Mode funktioniert sauber auf allen Portal-Seiten (Customer-Dashboard,
|
||||
Sidebar, FluxUI-Komponenten, Hub-Components).
|
||||
2. Switcher (Light / Dark / System) **direkt im User-Menü** verfügbar — kein
|
||||
Umweg über `/settings/appearance` mehr nötig.
|
||||
3. Hub-Frontend (Landing + Auth) bleibt **bewusst Light-Only** — Hub-Atmosphäre
|
||||
ist Buchpapier.
|
||||
4. Der Notfall-Hack aus Phase 1 (`portal.css: .dark { --color-accent: var(--color-hub) }`)
|
||||
wird durch das echte Dark-Token-Mapping ersetzt.
|
||||
|
||||
## Quelle der Wahrheit
|
||||
|
||||
`dev/frontend/tailwind_v3/User Dashboard presseportale Dark.html` —
|
||||
liefert alle Dark-Werte. Wir spiegeln die Token-Namen aus dem Light-Mode 1:1.
|
||||
|
||||
---
|
||||
|
||||
## Was sich ändert
|
||||
|
||||
### 1. `shared/design-tokens.css`
|
||||
|
||||
Der seit Phase 0 vorbereitete `.dark`-Block wird **aktiviert** und um die seit
|
||||
Phase 2 nachgezogenen Tokens (`--color-bg-rule-2`, `--color-gain-deep`) ergänzt.
|
||||
|
||||
Wichtige Umwidmungen im Dark Mode (gleiche Namen, andere Werte):
|
||||
|
||||
| Token | Light | Dark | Bedeutung |
|
||||
| ----------------------- | ----------- | ----------- | ------------------------------------------ |
|
||||
| `--color-bg` | `#f6f4ef` | `#0e1218` | Page-Background |
|
||||
| `--color-bg-elev` | `#fbfaf6` | `#14181f` | Sidebar / leicht hervorgehoben |
|
||||
| `--color-bg-card` | `#ffffff` | `#181d27` | Card-Body |
|
||||
| `--color-bg-rule` | `#e2ddd0` | `#2a3142` | Trennlinien |
|
||||
| `--color-bg-rule-2` | `#ede7d7` | `#232838` | Progress-Track |
|
||||
| `--color-hub` | `#1a2540` | `#5a78c2` | Primary-Akzent (heller im Dark) |
|
||||
| `--color-hub-soft` | `#e5e9f1` | `#1f2a47` | Hint-Hintergrund |
|
||||
| `--color-accent` | `#b07a3a` | `#d9a560` | Bernstein-Akzent (heller im Dark) |
|
||||
| `--color-accent-warm` | `#b07a3a` | `#b07a3a` | **bleibt gleich** — für Border-Akzente |
|
||||
| `--color-accent-deep` | `#8a5e27` | `#b07a3a` | Action-Link-Color (heller im Dark) |
|
||||
| `--color-accent-soft` | `#f1e6d3` | `#2a2418` | Hint-Icon-BG |
|
||||
| `--color-ink` | `#1a1f1c` | `#ece9e0` | Text-Primary |
|
||||
| `--color-ink-2` | `#3a413d` | `#c9c5b8` | Text-Secondary |
|
||||
| `--color-ok / -soft` | `#2e8540 / #e2f1e5` | `#4dc076 / #1a2d22` | Status grün |
|
||||
|
||||
`--color-accent-warm` als **konstanter** Bernstein-Token (gleicher Wert in
|
||||
beiden Modi) ist ein bewusster Trick: Im Portal mapt `--color-accent` auf
|
||||
`var(--color-hub)` (Primary-Akzent), aber Bernstein-Borders (Hint-Card,
|
||||
Schritt-Karten-Eyebrow) brauchen weiterhin den ungeänderten Bernstein-Wert.
|
||||
`--color-accent-warm` ist der Token dafür.
|
||||
|
||||
### 2. `portal.css`
|
||||
|
||||
- Den `.dark { --color-accent: var(--color-hub); … }`-Notfall-Block aus
|
||||
Phase 1 entfernen — er ist mit echtem Dark-Mapping überflüssig.
|
||||
- Stattdessen einen kurzen Kommentar setzen, dass das Token-Mapping aus
|
||||
`design-tokens.css` greift.
|
||||
- Primary-Button-Hover-Override: heute hartcodiert auf `--color-hub-2`
|
||||
(`#243152`). Im Dark Mode ist `--color-hub-2` = `#6d8ad3` (heller),
|
||||
was richtig ist (Hover = noch heller als Default-Button). Override bleibt
|
||||
via Variable korrekt, kein Eingriff nötig.
|
||||
- Button-Shadows: `rgba(26, 37, 64, …)` ist Light-Mode-spezifisch. Im Dark
|
||||
Mode wirkt der bläuliche Shadow auf dunklem Card-BG falsch. Lösung:
|
||||
per `@media (prefers-color-scheme: dark)` ODER `.dark`-Selektor die
|
||||
Shadow-Farben auf transparenten Schwarz tönen.
|
||||
|
||||
### 3. `shared/hub-components.css`
|
||||
|
||||
- Bernstein-Stellen umstellen: `var(--color-accent)` →
|
||||
`var(--color-accent-warm)` für **Hint-Card-Border-Left** und
|
||||
**Progress-Bar-Fill** (sonst wird's im Portal Hub-Blau gemapt).
|
||||
- Wegen Tokens-Architektur (`hub-soft` etc. werden im Dark Mode dunkler)
|
||||
funktioniert der Großteil **automatisch** — keine `.dark`-Overrides nötig.
|
||||
- Eine Ausnahme: `.panel-dark` und die Brand-Bridge-Boxes — im Light Mode
|
||||
ist `panel-dark` Hub-Blau (#1a2540). Im Dark Mode bleibt das auch
|
||||
`var(--color-hub)` — und da ist `--color-hub` heller (#5a78c2). Wir
|
||||
brauchen also einen **konstanten dunklen Token** für `panel-dark` — sonst
|
||||
wird die „dunkle“ Bridge-Card im Dark Mode plötzlich hellblau.
|
||||
→ Neuer Token `--color-panel-dark` (immer #0f1729, in beiden Modi)
|
||||
oder direkt `var(--color-topbar-deep)` (existiert bereits).
|
||||
|
||||
### 4. User-Menü-Switcher
|
||||
|
||||
Beide Dropdowns (Desktop in `sidebar.blade.php`, Mobile in derselben Datei)
|
||||
bekommen vor dem Logout einen Block:
|
||||
|
||||
```blade
|
||||
<flux:menu.separator />
|
||||
<div class="px-2 py-1.5">
|
||||
<flux:radio.group x-data variant="segmented" x-model="$flux.appearance" size="sm">
|
||||
<flux:radio value="light" icon="sun" />
|
||||
<flux:radio value="dark" icon="moon" />
|
||||
<flux:radio value="system" icon="computer-desktop" />
|
||||
</flux:radio.group>
|
||||
</div>
|
||||
```
|
||||
|
||||
Das ist exakt das Pattern aus `livewire/settings/appearance.blade.php`, nur
|
||||
kompakt mit Icons-only. `$flux.appearance` ist FluxUI's Magic-Object,
|
||||
LocalStorage-persistent, von `@fluxAppearance` injiziert.
|
||||
|
||||
### 5. Hub-Auth bleibt Light
|
||||
|
||||
`auth/pressekonto.blade.php` lädt **kein** `@fluxAppearance` und **kein**
|
||||
`partials/head` — die Hub-Auth-Pipeline ist eigenständig. Damit wird `class="dark"`
|
||||
dort nie gesetzt, selbst wenn das LocalStorage `dark` enthält. Hub-Auth bleibt
|
||||
also automatisch Light. **Kein Eingriff nötig.**
|
||||
|
||||
---
|
||||
|
||||
## Implementierungs-Schritte (Reihenfolge)
|
||||
|
||||
1. `design-tokens.css`: Dark-Block aktivieren, `--color-accent-warm` definieren,
|
||||
`--color-panel-dark` einführen (oder Re-Use `--color-topbar-deep`).
|
||||
2. `portal.css`: Hack rausnehmen, Button-Shadow für Dark Mode tönen.
|
||||
3. `hub-components.css`: Bernstein-Stellen auf `--color-accent-warm`,
|
||||
`.panel-dark` auf `--color-panel-dark`.
|
||||
4. `sidebar.blade.php`: Switcher in beide Dropdowns einbauen.
|
||||
5. Build + Smoke-Test im Browser.
|
||||
6. Bestehende Tests laufen lassen (sollten alle weiter grün sein, weil
|
||||
keine Test-Assertion farbbezogen ist).
|
||||
7. Pint + PROGRESS + Plan-Status.
|
||||
|
||||
## Akzeptanzkriterien
|
||||
|
||||
- [x] Plan-Dokument geschrieben
|
||||
- [x] Switcher Light/Dark/System im User-Menü (Desktop + Mobile) sichtbar,
|
||||
Änderung wirkt sofort + persistent (LocalStorage)
|
||||
- [x] Dark Mode: Customer-Dashboard rendert mit allen Sektionen korrekt
|
||||
(Tokens schalten um, kein hellblauer Akzent-Bug)
|
||||
- [x] Brand-Bridge-Karte bleibt im Dark Mode dunkel (`--color-panel-dark-2`
|
||||
konstant in beiden Modi)
|
||||
- [x] Hub-Auth bleibt im Dark Mode Light (lädt kein `@fluxAppearance`)
|
||||
- [x] Tests grün (18/18)
|
||||
- [x] Pint clean
|
||||
- [x] PROGRESS-Eintrag
|
||||
|
||||
## Risiken & Mitigation
|
||||
|
||||
- **FluxUI-Default-Komponenten im Dark Mode** (z.B. Modals, Dropdowns):
|
||||
unsere Zinc→Hub-Mapping in `portal.css` bridgt die Skala. Im Dark Mode
|
||||
müssen die Zinc-Werte auch umgekippt werden — passiert automatisch über
|
||||
die Token-Vars, weil wir `var(--color-bg-*)` nutzen. Restrisiko: einzelne
|
||||
FluxUI-Komponenten könnten harte Tailwind-Klassen wie `bg-white` haben,
|
||||
die im Dark unverändert weiß bleiben. Smoke-Test deckt das auf.
|
||||
- **Hub-Components-Schatten** sind in Hub-Blau-Alpha definiert
|
||||
(`rgba(26, 37, 64, …)`). Im Dark Mode auf dunklem Bg wirken sie evtl.
|
||||
„falsch warm“. Akzeptabel im ersten Wurf; Feintuning per `prefers-color-scheme`
|
||||
Media-Query falls visuell stört.
|
||||
55
dev/frontend/hub-flux/06-PHASE-3-ADMIN-DASHBOARD.md
Normal file
55
dev/frontend/hub-flux/06-PHASE-3-ADMIN-DASHBOARD.md
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
# Phase 3 — Admin-Dashboard im Hub-Vokabular
|
||||
|
||||
**Status**: ✅ abgeschlossen · **Aufwand**: ~¼ Tag · **Risiko**: niedrig
|
||||
|
||||
---
|
||||
|
||||
## Ziel
|
||||
|
||||
`resources/views/admin/dashboard.blade.php` nutzt dieselbe Designsprache wie
|
||||
das Customer-Dashboard (Phase 2). Keine neuen Komponenten, keine neue Logik
|
||||
— nur Vokabular-Umbau auf die DRY-Schicht.
|
||||
|
||||
## Was sich ändert
|
||||
|
||||
### Layout
|
||||
|
||||
- Page-Header: Hub-Badge „Admin Backend" + Eyebrow + großes H1
|
||||
„Admin Dashboard" + Subtitle. Rechts: Status-Pille „Alle Systeme operational"
|
||||
(ok-Style mit Dot).
|
||||
- KPI-Reihe: weiter **5 Stat-Cards** (wie heute), aber als
|
||||
`<x-portal.stat-card>` mit Strip-Variante:
|
||||
- Pressemitteilungen → `primary` (mit Sub: `X pub · Y prüf · Z entwurf`)
|
||||
- In Prüfung → `warn` (eigene KPI, war vorher in der PM-Card versteckt)
|
||||
- Firmen → `muted`
|
||||
- Kontakte → `muted`
|
||||
- Benutzer → `muted`
|
||||
- 2-Spalten-Grid (`2fr 1fr`) — wie heute:
|
||||
- Links: Panel „Letzte Pressemitteilungen" (Liste + Status-Badges
|
||||
in `.badge.ok|warn|err|hub`).
|
||||
- Rechts: Panel „Zur Prüfung" mit warn-Pille (Count) + Liste +
|
||||
„+ N weitere"-Link.
|
||||
- Bottom-Reihe (`1fr 2fr`) — **neu**:
|
||||
- Links: `panel-warm` Newsletter-Block (Mono-Zahl + Subline).
|
||||
- Rechts: `panel` Quick-Actions mit Section-Eyebrow + Schnellzugriff
|
||||
auf Invoices/Payments/Coupons/Presets.
|
||||
- Footer: subtle Link-Reihe analog Customer-Dashboard.
|
||||
|
||||
### Was NICHT geändert wird
|
||||
|
||||
- Controller-Logik / Datenform.
|
||||
- Newsletter-Count bleibt erhalten, wandert nur in einen eigenen Block.
|
||||
- Bestehende Tests (`DashboardTest`) bleiben grün — alle geprüften
|
||||
Strings (`3`, `1 pub`, `1 prüf`, `1 entwurf`, `Review Dashboard PM`)
|
||||
bleiben im Output.
|
||||
|
||||
## Akzeptanzkriterien
|
||||
|
||||
- [x] Plan geschrieben
|
||||
- [x] Admin-Dashboard verwendet `<x-portal.stat-card>`, `.panel`,
|
||||
`.section-eyebrow`, `.badge`
|
||||
- [x] Customer-Dashboard und Admin-Dashboard sind visuell aus einem Guss
|
||||
- [x] Dark Mode greift automatisch (alle Tokens)
|
||||
- [x] `DashboardTest` bleibt grün ohne Anpassung (alle 3 Cases +
|
||||
Wortlaut „1 pub / 1 prüf / 1 entwurf / Review Dashboard PM")
|
||||
- [x] Pint clean, PROGRESS-Eintrag
|
||||
58
dev/frontend/hub-flux/07-PHASE-4A-PRESS-RELEASES-LISTEN.md
Normal file
58
dev/frontend/hub-flux/07-PHASE-4A-PRESS-RELEASES-LISTEN.md
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
# Phase 4A — Press-Releases Listen-Pages
|
||||
|
||||
> Erstes Päckchen aus Phase 4 (Listen/Detail-Pages iterativ). Wegen
|
||||
> Umfang teilen wir Phase 4 in Päckchen — A = Listen, B = Detail/Show,
|
||||
> C = Forms (create/edit), D = Companies, E = Settings/Profile, F = Rest.
|
||||
|
||||
**Status**: ✅ abgeschlossen · **Aufwand**: ~¼ Tag · **Risiko**: niedrig
|
||||
|
||||
---
|
||||
|
||||
## Scope
|
||||
|
||||
In diesem Päckchen NUR:
|
||||
|
||||
- `resources/views/livewire/admin/press-releases/index.blade.php`
|
||||
- `resources/views/livewire/customer/press-releases/index.blade.php`
|
||||
|
||||
NICHT in diesem Päckchen:
|
||||
- `show.blade.php`, `create.blade.php`, `edit.blade.php` (Päckchen B/C)
|
||||
- Companies, Settings, Profile (Päckchen D/E)
|
||||
|
||||
## Ziel
|
||||
|
||||
Beide Listen nutzen das Hub-Vokabular:
|
||||
|
||||
- **Page-Header** wie im Dashboard (Hub-Badge + Eyebrow + H1 + Subtitle,
|
||||
CTA rechts).
|
||||
- **KPI-Reihe** (nur Admin) als `<x-portal.stat-card>` — exakt
|
||||
wie auf dem Admin-Dashboard (DRY: vier Cards mit primary/ok/warn/muted).
|
||||
- **Filter-Bar** als `.panel` mit `.panel-head` „Filter & Suche".
|
||||
- **Tabelle** in `.panel` (kein FluxUI-Card-Wrapper mehr). FluxUI-Table
|
||||
bleibt — wir bridgen über Zinc-→Hub-Mapping.
|
||||
- **Status-Badges** auf eigene `.badge.ok|warn|err|hub`-Pillen
|
||||
(statt `<flux:badge color="…">`) — visuelle Konsistenz zum Dashboard.
|
||||
- **Empty-State** in Hub-Stil mit Icon-Box.
|
||||
|
||||
## Was NICHT angefasst wird
|
||||
|
||||
- **Confirm-Modals** für Publish/Reject/Archive — Tests assertieren
|
||||
Wortlaut („Pressemitteilung veröffentlichen?" etc.).
|
||||
- **Volt-Logik** (Sort, Filter, Methods) — Layout-only.
|
||||
- **FluxUI-Form-Inputs** (Search, Select, Combobox) — bleiben, weil
|
||||
Hub kein eigenes Combobox-Pendant hat.
|
||||
|
||||
## Akzeptanzkriterien
|
||||
|
||||
- [x] Plan
|
||||
- [x] Admin-Liste: Page-Header + 4 Stat-Cards + Filter-Panel + Tabelle-Panel + Hub-Badges
|
||||
- [x] Customer-Liste: Page-Header + Filter-Panel + Tabelle-Panel + Hub-Badges + Empty-State
|
||||
- [x] Visuell aus einem Guss mit Dashboard
|
||||
- [x] `PressReleaseWorkflowTest` + `AdminPressReleaseActionsTest` bleiben grün
|
||||
- [x] Build + Pint + PROGRESS
|
||||
|
||||
## Bonus-Fix
|
||||
|
||||
- `customer/dashboard.blade.php` Subtitle ergänzt um „Übersicht für {Firma}",
|
||||
wenn `$selectedCompany` gesetzt ist. Korrigiert eine Phase-2-Regression
|
||||
bei `CustomerCompanyContextTest > customer dashboard is filtered by …`.
|
||||
56
dev/frontend/hub-flux/08-PHASE-4B-PRESS-RELEASES-DETAIL.md
Normal file
56
dev/frontend/hub-flux/08-PHASE-4B-PRESS-RELEASES-DETAIL.md
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
# Phase 4B — Press-Releases Detail/Show-Pages
|
||||
|
||||
> Zweites Päckchen aus Phase 4. Folgt auf 4A (Listen).
|
||||
|
||||
**Status**: ✅ abgeschlossen · **Aufwand**: ~⅓ Tag · **Risiko**: niedrig
|
||||
|
||||
---
|
||||
|
||||
## Scope
|
||||
|
||||
- `resources/views/livewire/admin/press-releases/show.blade.php`
|
||||
- `resources/views/livewire/customer/press-releases/show.blade.php`
|
||||
|
||||
NICHT in diesem Päckchen:
|
||||
- `create.blade.php`, `edit.blade.php` (Päckchen 4C — Forms)
|
||||
- Companies, Settings, Profile (Päckchen 4D/4E)
|
||||
|
||||
## Ziel
|
||||
|
||||
Beide Detail-Pages im Hub-Vokabular:
|
||||
|
||||
- **Page-Header** wie auf den Listen (Hub-Badge + Eyebrow + H1 +
|
||||
Subtitle), Status-Pill direkt unter dem Eyebrow oder im Header-Meta,
|
||||
Aktions-Buttons (Bearbeiten / Zurück / Vorschau-Link) rechts.
|
||||
- **Status-Workflow-Aktionsbar** als `.panel` mit klarer Optik
|
||||
je nach Status (review = warn, published = ok, draft = neutral).
|
||||
- **Content-Hauptbereich** (PM-Text) als `.panel` (kein FluxUI-Card-Wrapper).
|
||||
- **Sidebar / Side-Cards** als kleine `.panel` mit `panel-head`.
|
||||
- **Status-Verlauf-Timeline** als `.panel` mit Hub-Badges
|
||||
(`.badge.ok|warn|err|hub`).
|
||||
- **Rejection-Hinweis** (Customer) als Hub-Style-Error-Panel mit
|
||||
Linker Akzent-Border (statt `<flux:callout>`).
|
||||
- **Share-Link-Erfolgsbox** (Customer) als Hub-Style-Success-Block.
|
||||
- **Pressekontakte-Liste** (Customer) als Hub-Items in `.panel`.
|
||||
|
||||
## Was explizit NICHT angefasst wird
|
||||
|
||||
- **Confirm-Modals** (Publish / Reject / Archive) — Tests in
|
||||
`AdminPressReleaseActionsTest` assertieren Wortlaute.
|
||||
- **Wortlaute** `Werbliche Sprache wurde markiert.` und
|
||||
`Erneut einreichen` aus `PressReleaseWorkflowTest`.
|
||||
- **Volt-Logik** (publish/reject/archive/submitForReview/
|
||||
generateShareLink/with) — Layout-only.
|
||||
|
||||
## Akzeptanzkriterien
|
||||
|
||||
- [x] Plan
|
||||
- [x] Admin-Show: Page-Header + Status-Workflow-Bar + Text-Panel +
|
||||
Sidebar-Panels + Timeline + Hub-Badges. Modals unverändert.
|
||||
- [x] Customer-Show: Page-Header + Status-Workflow-Bar +
|
||||
Rejection-Panel + Share-Erfolgsblock + Contacts-Panel +
|
||||
Verlauf-Panel + Text-Panel + Hub-Badges. „Erneut einreichen" +
|
||||
„Werbliche Sprache wurde markiert." Wortlaute bleiben.
|
||||
- [x] `PressReleaseWorkflowTest` + `AdminPressReleaseActionsTest`
|
||||
bleiben grün (16 passed, 52 assertions).
|
||||
- [x] Build + Pint + PROGRESS.
|
||||
69
dev/frontend/hub-flux/09-PHASE-4C-PRESS-RELEASES-FORMS.md
Normal file
69
dev/frontend/hub-flux/09-PHASE-4C-PRESS-RELEASES-FORMS.md
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
# Phase 4C — Press-Releases Forms (create / edit)
|
||||
|
||||
> Drittes Päckchen aus Phase 4. Folgt auf 4A (Listen) und 4B (Show).
|
||||
|
||||
**Status**: ✅ abgeschlossen · **Aufwand**: ~⅓–½ Tag · **Risiko**: niedrig
|
||||
|
||||
---
|
||||
|
||||
## Scope
|
||||
|
||||
- `resources/views/livewire/admin/press-releases/create.blade.php`
|
||||
- `resources/views/livewire/admin/press-releases/edit.blade.php`
|
||||
- `resources/views/livewire/customer/press-releases/create.blade.php`
|
||||
- `resources/views/livewire/customer/press-releases/edit.blade.php`
|
||||
|
||||
NICHT in diesem Päckchen:
|
||||
- Companies (Päckchen 4D)
|
||||
- Settings / Profile (Päckchen 4E)
|
||||
- Restliche Admin-Bereiche (Päckchen 4F)
|
||||
|
||||
## Ziel
|
||||
|
||||
Alle vier Forms im Hub-Vokabular:
|
||||
|
||||
- **Page-Header** wie auf Listen und Detail-Pages: Hub-Badge +
|
||||
Eyebrow + H1 + Subtitle. Bei Edit zusätzlich Status-Pille im
|
||||
Header-Meta. Aktions-Buttons rechts.
|
||||
- **Form-Sektionen** als `.panel` mit `.panel-head` und
|
||||
`section-eyebrow` ("Inhalt", "SEO & Links", "Metadaten",
|
||||
"Status-Aktionen", "Aktionen").
|
||||
- **Form-Felder** bleiben FluxUI (`<flux:field>`, `<flux:label>`,
|
||||
`<flux:input>`, `<flux:textarea>`, `<flux:select>` inkl.
|
||||
Combobox-Variant, `<flux:checkbox>`, `<flux:error>`) — das
|
||||
Token-Bridging aus Phase 1 zieht. Required-Marker werden auf
|
||||
Hub-Error-Token umgestellt.
|
||||
- **Action-Buttons** ("Speichern", "Zur Prüfung einreichen",
|
||||
"Als Entwurf speichern", "Status wechseln") in einem `.panel`
|
||||
mit `.panel-head` "Aktionen".
|
||||
- **Flash-Boxen** auf Hub-Token-Pillen.
|
||||
|
||||
## Was explizit NICHT angefasst wird
|
||||
|
||||
- **Volt-Logik** (`save`, `submitForReview`, `publish`, `reject`,
|
||||
`backToDraft`, `archive`, `changeStatus`, `deletePressRelease`,
|
||||
`mount`, `with`, `selectedCompany`) — Layout-only.
|
||||
- **Confirm-Modals** der Admin-Edit-Page (`confirm-status-change`,
|
||||
`confirm-delete-press-release`) — Tests assertieren Wortlaute.
|
||||
- **Wortlaute** aus `AdminPressReleaseActionsTest`:
|
||||
`Neuer Status`, `Status wechseln`, `Status wirklich wechseln?`,
|
||||
`Pressemitteilung löschen?`, `Status wurde auf`.
|
||||
- **Image-Manager-Komponente** (`<livewire:components.press-release-images-manager>`).
|
||||
- **Wortlaute** für Customer-Create-Page: `Beta GmbH` (Firma
|
||||
aus Faktur via `companyId`) — Combobox/Select bleibt funktional.
|
||||
|
||||
## Akzeptanzkriterien
|
||||
|
||||
- [x] Plan
|
||||
- [x] Admin-Edit: Page-Header + 5 Panels + Hub-Status-Badge,
|
||||
beide Modals unverändert, alle Wortlaut-Assertions grün.
|
||||
- [x] Admin-Create: Page-Header + 3 Panels (Inhalt, SEO, Metadaten)
|
||||
+ Aktions-Panel.
|
||||
- [x] Customer-Create: Page-Header + 2 Panels (Inhalt, Metadaten)
|
||||
+ Aktions-Panel.
|
||||
- [x] Customer-Edit: Page-Header + 2 Panels (Inhalt mit Image-Manager,
|
||||
Metadaten) + Aktions-Panel.
|
||||
- [x] `AdminPressReleaseActionsTest`,
|
||||
`CustomerCompanyContextTest > customer press releases create …`,
|
||||
`CustomerProfileSecurityTest` bleiben grün (72 Tests, 310 assertions).
|
||||
- [x] Build + Pint + PROGRESS.
|
||||
812
dev/frontend/hub-flux/PROGRESS.md
Normal file
812
dev/frontend/hub-flux/PROGRESS.md
Normal file
|
|
@ -0,0 +1,812 @@
|
|||
# Fortschritts-Log — Hub × FluxUI
|
||||
|
||||
> Tagebuch der Umsetzung. Neue Einträge **oben** anfügen.
|
||||
> Format pro Eintrag: Datum · Phase · Was wurde gemacht · Wer · Notizen
|
||||
|
||||
---
|
||||
|
||||
## 2026-05-19 · Phase 4C · Press-Releases Forms (create / edit)
|
||||
|
||||
- **Anlass**: User-Freigabe „ja" nach 4B. Drittes Päckchen aus
|
||||
Phase 4 — Forms (create + edit) für Admin und Customer.
|
||||
|
||||
- **Plan-Dokument**: `09-PHASE-4C-PRESS-RELEASES-FORMS.md`.
|
||||
|
||||
- **Was umgebaut wurde (alle 4 Forms)**:
|
||||
- **Page-Header** wie auf Listen und Detail: Hub-Badge
|
||||
(„Admin Backend" / „User Backend") + Eyebrow + großes H1 +
|
||||
Subtitle. Bei Edit zusätzlich Status-Pille im Header-Meta
|
||||
(`@class([])`-Syntax mit `ok|warn|err|hub`) und „ID"-Pill.
|
||||
Aktions-Buttons rechts (Zurück).
|
||||
- **Form-Sektionen** als `.panel` mit `.panel-head` und
|
||||
`section-eyebrow`: „Inhalt", „SEO & Links", „Metadaten",
|
||||
„Status-Aktionen" (Admin-Edit), „Aktionen". Innenraum
|
||||
immer `p-5 space-y-4`.
|
||||
- **Form-Felder** bleiben FluxUI (`<flux:field>`,
|
||||
`<flux:label>`, `<flux:input>`, `<flux:textarea>`,
|
||||
`<flux:select>` inkl. Combobox-Variant, `<flux:checkbox>`,
|
||||
`<flux:error>`) — das Token-Bridging aus Phase 1 zieht.
|
||||
- **Required-Marker** von `text-red-500` auf Token-Farbe
|
||||
(`text-[color:var(--color-err)]`) umgestellt.
|
||||
- **Save-/Submit-Buttons** in eigenem `.panel` mit Header
|
||||
„Aktionen" statt „nackten" Buttons in der Sidebar.
|
||||
- **Flash-Boxen** (Success/Error) auf Hub-Token-Pillen.
|
||||
|
||||
- **Admin-Edit-spezifisch**: 5 Sidebar-Panels (Status-Aktionen +
|
||||
Metadaten + Aktionen + Modals). „Status-Aktionen"-Panel zeigt
|
||||
rechts im Header die aktuelle Status-Pille — visuelle Doppelung
|
||||
mit dem Page-Header-Status, aber im Kontext der Sidebar
|
||||
sinnvoll als Vergleichs-Anker für die „Neuer Status"-Auswahl.
|
||||
|
||||
- **Was explizit NICHT angefasst wurde**:
|
||||
- **Volt-Logik** (alle `save`/`publish`/`reject`/`backToDraft`/
|
||||
`archive`/`changeStatus`/`deletePressRelease`/`mount`/`with`/
|
||||
`selectedCompany`-Methoden) — Layout-only.
|
||||
- **Confirm-Modals** der Admin-Edit-Page
|
||||
(`confirm-status-change`, `confirm-delete-press-release`) —
|
||||
Tests in `AdminPressReleaseActionsTest` assertieren Wortlaute.
|
||||
- **Wortlaute**: „Neuer Status", „Status wechseln",
|
||||
„Status wirklich wechseln?", „Pressemitteilung löschen?",
|
||||
„Status wurde auf" — alle erhalten.
|
||||
- **`<livewire:components.press-release-images-manager>`** —
|
||||
eigene Komponente, kommt im jeweiligen eigenen Päckchen dran.
|
||||
|
||||
- **Build/Test**:
|
||||
- `npm run build:portal` → ok (`portal-D0cNdOWP.css` 418.42 kB).
|
||||
- Linter clean (alle 4 Dateien).
|
||||
- `php artisan test --compact --filter='PressRelease|CustomerCompanyContext|CustomerProfileSecurity|PanelConsolidation'`
|
||||
→ **72 passed (310 assertions)**.
|
||||
- Volle Suite: 230 passed, 3 skipped, 1 pre-existing failure
|
||||
(`ApiDocumentationTest`).
|
||||
- Pint `--dirty --format agent` → passed.
|
||||
|
||||
- **Offene Fragen**: Keine.
|
||||
|
||||
- **Nächster Schritt**: Phase 4 für Press-Releases ist mit 4A/4B/4C
|
||||
komplett abgeschlossen. Nächstes Päckchen je nach Sichtbarkeit:
|
||||
**4D = Companies** (`admin.companies.*`) ODER
|
||||
**4E = Settings / Profile** (`me.profile`, `me.security`).
|
||||
|
||||
---
|
||||
|
||||
## 2026-05-19 · Phase 4B · Press-Releases Detail/Show-Pages
|
||||
|
||||
- **Anlass**: User-Freigabe „weiter" nach 4A. Zweites Päckchen aus
|
||||
Phase 4 — Detail/Show-Pages für Admin und Customer.
|
||||
|
||||
- **Plan-Dokument**: `08-PHASE-4B-PRESS-RELEASES-DETAIL.md`.
|
||||
|
||||
- **Was umgebaut wurde (beide Show-Pages)**:
|
||||
- **Page-Header** mit Hub-Badge + Eyebrow + Status-Pill +
|
||||
Sprache + Portal (Admin nur), darunter großer H1 mit dem
|
||||
PM-Titel und Subtitle mit Firma/Kategorie/Autor bzw. Datum.
|
||||
Aktions-Buttons rechts (Bearbeiten/Vorschau-Link/Zurück).
|
||||
- **Status-Workflow-Aktionsbar** als `.panel` mit `.panel-head`
|
||||
und passend gefärbtem Badge je nach Status (warn=Review,
|
||||
ok=Published, err=Rejected, hub=Draft).
|
||||
- **Content-Hauptbereich** (PM-Text) als `.panel` mit eigenem
|
||||
Header „Inhalt" + `prose` darunter. Keywords/Backlink darunter
|
||||
als Footer mit Hub-Rule.
|
||||
- **Sidebar / Side-Cards** (Admin) als kompakte `.panel` mit
|
||||
`panel-head` „Details" und „Bilder" + Hub-Badges.
|
||||
- **Status-Verlauf-Timeline** als `.panel` mit Hub-Badge je
|
||||
Log-Eintrag (`.badge.ok|warn|err|hub`) statt FluxUI-`color`-Props.
|
||||
- **Status-Badges** in Header und Timelines komplett auf
|
||||
`<span class="badge …">` mit `@class([])`-Syntax.
|
||||
|
||||
- **Customer-Show-spezifisch**:
|
||||
- **Rejection-Hinweis** als roter `.panel` mit linker
|
||||
Akzent-Border (`border-left-width:3px`) und Icon-Box —
|
||||
statt `<flux:callout color="red">`.
|
||||
- **Review-Pending-Hinweis** als warner `.panel` mit
|
||||
Akzent-Border und Clock-Icon-Box — statt `<flux:callout color="yellow">`.
|
||||
- **Share-Link-Erfolgsblock** als ok-`.panel` mit
|
||||
Gültigkeits-Badge im Header und readonly-Input im Body.
|
||||
- **Contacts-Liste** als Hub-Items (`bg-bg-elev` +
|
||||
`border-bg-rule`), Empty-State mit gestrichelter Border.
|
||||
- **Status-Tile-Grid** (Aktuell/Erstellt/Veröffentlicht/Aufrufe)
|
||||
als 4-er-Grid mit kleinen Hub-Tiles statt zinc-Hintergründen.
|
||||
|
||||
- **Admin-Show-spezifisch**:
|
||||
- **Modals** (Publish/Reject/Archive) komplett unverändert —
|
||||
Tests in `AdminPressReleaseActionsTest` assertieren Wortlaute.
|
||||
|
||||
- **Was explizit NICHT angefasst wurde**:
|
||||
- **Volt-Logik** (publish/reject/archive/submitForReview/
|
||||
generateShareLink/with-Method) — Layout-only.
|
||||
- **Wortlaute** „Erneut einreichen", „Werbliche Sprache wurde
|
||||
markiert." aus `PressReleaseWorkflowTest`.
|
||||
- **Bestehende Modals** und ihre Wortlaute.
|
||||
|
||||
- **Mini-Stolperer (sofort gefixt)**:
|
||||
- Erst zwei nicht-existente Tokens (`--color-rule`,
|
||||
`--color-panel-soft`) verwendet. Korrigiert zu
|
||||
`--color-bg-rule` und `--color-bg-elev` (16 + 5 Vorkommen).
|
||||
Wäre im Browser stumm gefailed (Tailwind hätte die
|
||||
Klassen einfach nicht ausgegeben).
|
||||
|
||||
- **Build/Test**:
|
||||
- `npm run build:portal` → ok (`portal-Bq4pkLWt.css` 418.36 kB).
|
||||
- Linter clean.
|
||||
- `php artisan test --compact --filter='PressReleaseWorkflow|AdminPressReleaseActions'`
|
||||
→ 16 passed (52 assertions).
|
||||
- Volle Suite: 230 passed, 3 skipped, 1 pre-existing failure
|
||||
(`ApiDocumentationTest`, schon vor 4A bekannt).
|
||||
- Pint `--dirty --format agent` → passed.
|
||||
|
||||
- **Offene Fragen**: Keine.
|
||||
|
||||
- **Nächster Schritt**: Päckchen **4C** = Press-Releases Forms
|
||||
(`create.blade.php` + `edit.blade.php`, Admin + Customer).
|
||||
Forms sind tendenziell aufwendiger (mehr FluxUI-Felder, ggf.
|
||||
zusätzliche Logik wie Image-Uploads).
|
||||
|
||||
---
|
||||
|
||||
## 2026-05-19 · Phase 4A · Press-Releases Listen-Pages
|
||||
|
||||
- **Anlass**: User-Freigabe „weiter" nach Phase 3 (Admin-Dashboard).
|
||||
Phase 4 ist laut Roadmap „der Marathon" über Listen-/Detail-Pages
|
||||
(~3–5 Tage iterativ). Wegen Umfang in Päckchen geteilt — A = Listen,
|
||||
B = Detail/Show, C = Forms, D = Companies, E = Settings, F = Rest.
|
||||
|
||||
- **Plan-Dokument**: `07-PHASE-4A-PRESS-RELEASES-LISTEN.md` (knapp,
|
||||
Scope hart auf zwei `index.blade.php`-Files begrenzt, mit explizitem
|
||||
„NICHT in diesem Päckchen"-Block).
|
||||
|
||||
- **Scope dieses Päckchens**:
|
||||
- `resources/views/livewire/admin/press-releases/index.blade.php`
|
||||
- `resources/views/livewire/customer/press-releases/index.blade.php`
|
||||
|
||||
- **Was umgebaut wurde (beide Listen)**:
|
||||
- **Page-Header** im Hub-Stil: `<header>` mit `1fr auto`-Grid,
|
||||
Hub-Badge („Admin Backend" / „User Backend"), Eyebrow, großes H1,
|
||||
Subtitle, rechts der CTA-Primary-Button (FluxUI bleibt für den Button).
|
||||
- **Filter-Bar** als `.panel` + `.panel-head` mit `section-eyebrow`
|
||||
„Filter & Suche". FluxUI-Inputs (Search-Input, Selects, Combobox
|
||||
für User/Company/Contact-Lookup) bleiben unverändert — Hub hat
|
||||
kein eigenes Combobox-Pendant.
|
||||
- **Tabelle** als `.panel` mit `.panel-head` „Alle Pressemitteilungen"
|
||||
+ Eintrags-Counter rechts. FluxUI-`<flux:table>` bleibt — das
|
||||
Zinc-→Hub-Mapping aus Phase 1 zieht hier perfekt.
|
||||
- **Status-Badges**: `<flux:badge color="green|yellow|red|zinc|blue">`
|
||||
ersetzt durch `<span class="badge ok|warn|err|hub">` für visuelle
|
||||
Konsistenz mit dem Dashboard (`@class([...])`-Syntax).
|
||||
- **Empty-State** mit Icon-Box (`bg-[color:var(--color-hub-soft)]`,
|
||||
Hub-Border, `flux:icon.newspaper`) + Headline + Subtext.
|
||||
- **Flash-Boxen** auf Hub-Tokens (`--color-ok-soft`, `--color-err-soft`,
|
||||
`--color-gain-deep`, `--color-loss`) statt `bg-green-50` etc.
|
||||
|
||||
- **Admin-spezifisch**: Vier `<x-portal.stat-card>` (Gesamt/Veröffentlicht/
|
||||
In Prüfung/Entwürfe) als KPI-Reihe — identisches Layout wie Admin-Dashboard.
|
||||
|
||||
- **Was explizit NICHT angefasst wurde**:
|
||||
- **Confirm-Modals** (Publish/Reject/Archive) — Tests in
|
||||
`AdminPressReleaseActionsTest` assertieren die Wortlaute
|
||||
(„Pressemitteilung veröffentlichen?" etc.) → unverändert.
|
||||
- **Volt-Logik** (Sort, Filter, alle Methods) — Layout-only.
|
||||
|
||||
- **Bonus-Fix**: `customer/dashboard.blade.php` Subtitle bekommt
|
||||
einen „Übersicht für :company —"-Einschub, wenn `$selectedCompany`
|
||||
gesetzt ist. Korrigiert eine Phase-2-Regression bei
|
||||
`CustomerCompanyContextTest > customer dashboard is filtered by …`.
|
||||
|
||||
- **Build/Test**:
|
||||
- `npm run build:portal` → ok (`portal-DaL-tXm-.css` 418.75 kB).
|
||||
- Linter clean.
|
||||
- `php artisan test --compact --filter='PressReleaseWorkflow|AdminPressReleaseActions|Dashboard|CustomerCompanyContext'`
|
||||
→ 45 passed (163 assertions).
|
||||
- Volle Suite: 230 passed, 3 skipped, 1 failed.
|
||||
Der einzelne Fail (`ApiDocumentationTest`) ist **pre-existing** —
|
||||
via `git stash` verifiziert, war auch vor diesem Päckchen rot
|
||||
(`/docs/api/v1` liefert nicht das erwartete YAML).
|
||||
- Pint `--dirty --format agent` → passed.
|
||||
|
||||
- **Offene Fragen**: Keine.
|
||||
|
||||
- **Nächster Schritt**: Päckchen **4B** = Detail/Show-Pages
|
||||
(`admin/press-releases/show.blade.php` +
|
||||
`customer/press-releases/show.blade.php`). Dort ist mit der
|
||||
„Werbliche Sprache wurde markiert."- und „Erneut einreichen"-
|
||||
Assertion aus `PressReleaseWorkflowTest` zu rechnen — Wortlaute
|
||||
bleiben unverändert.
|
||||
|
||||
---
|
||||
|
||||
## 2026-05-19 · Phase 3 · Admin-Dashboard im Hub-Vokabular
|
||||
|
||||
- **Anlass**: User-Freigabe „weiter" nach Phase 5 (Dark Mode). Phase 3
|
||||
laut Roadmap: Admin-Dashboard (`/dashboard`) im selben Vokabular wie
|
||||
Customer-Dashboard.
|
||||
|
||||
- **Plan-Dokument**: `06-PHASE-3-ADMIN-DASHBOARD.md` (knapper als
|
||||
Phase 2 — niedrig-risiko, keine neuen Konzepte, reine
|
||||
Vokabular-Migration auf die DRY-Schicht aus Phase 2).
|
||||
|
||||
- **Ausgangslage**: `admin/dashboard.blade.php` war Controller-rendered
|
||||
(kein Volt), nutzte reines Tailwind mit `zinc-*`-Klassen, harten
|
||||
Farb-Pillen (`bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 …`)
|
||||
und keiner FluxUI-Komponente. Visuell aus der Zeit gefallen.
|
||||
|
||||
- **`admin/dashboard.blade.php` komplett umgeschrieben**:
|
||||
- **Page-Header**: Hub-Badge „Admin Backend" + Eyebrow + großes H1
|
||||
+ Subtitle mit `auth()->user()->name`. Rechts: ok-Pille
|
||||
„Alle Systeme operational".
|
||||
- **KPI-Reihe** (5 Stat-Cards via `<x-portal.stat-card>`):
|
||||
- Pressemitteilungen → `primary` mit Trend-Slot
|
||||
„X pub · Y prüf · Z entwurf" (Wortlaut für Test-Assertions
|
||||
bewusst beibehalten).
|
||||
- In Prüfung → `warn` als eigene KPI (war vorher nur in der PM-Card
|
||||
versteckt — jetzt klickbar direkt in den Filter).
|
||||
- Firmen / Kontakte / Benutzer → `muted` mit kurzen Sublines.
|
||||
- Alle Cards sind klickbar (link-wrapped) → CRM-/Content-Übersichten.
|
||||
- **2-Spalten-Grid** (`2fr 1fr`):
|
||||
- Links: Panel „Letzte Pressemitteilungen" mit Hub-Liste +
|
||||
`.badge.ok|warn|err|hub`-Pillen (statt Tailwind-Farben).
|
||||
- Rechts: Panel „Zur Prüfung" mit warn-Pille (Count) oder
|
||||
ok-Pille „leer". „+ N weitere"-Link im Footer.
|
||||
- **Newsletter + Quick-Actions** (`1fr 2fr`, NEU):
|
||||
- Links: `panel-warm` Newsletter-Block mit Mono-Zahl
|
||||
+ Subline + Sync-Link.
|
||||
- Rechts: Quick-Action-Grid mit 4 Icon-Buttons (Pressemitteilungen,
|
||||
Firmen, Rechnungen, Voreinstellungen) — Icon-Tile wechselt auf
|
||||
Hover ins gefüllte Hub-Blau.
|
||||
- **Footer**: subtle Link-Reihe (Benutzer / Rollen / Performance).
|
||||
|
||||
- **Was bewusst NICHT geändert**:
|
||||
- Controller-Logik, Datenform, Cache-Strategie (`AdminPerformanceCache`).
|
||||
- Newsletter-Count bleibt, wandert nur in eigenen Block.
|
||||
|
||||
- **Build/Verifikation**:
|
||||
- `npm run build:portal` → `portal: 417.81 kB` (Δ -0.7 kB,
|
||||
weil viele Zinc-Tailwind-Klassen weggefallen sind).
|
||||
- `php artisan test --filter='DashboardTest|AuthenticationTest|RegistrationTest|CustomerPortalTest'`
|
||||
→ **18/18 passed**, 70 Assertions. `DashboardTest` mit seinen
|
||||
Wortlaut-Assertions (`3`, `1 pub`, `1 prüf`, `1 entwurf`,
|
||||
`Review Dashboard PM`) bleibt grün ohne Anpassung.
|
||||
- `vendor/bin/pint --dirty` → `passed`.
|
||||
- Linter: 0 Errors.
|
||||
|
||||
- **Lessons learned**:
|
||||
- Vokabular-Migrations ohne Logik-Eingriff brauchen ~15 Minuten dank
|
||||
DRY-Schicht aus Phase 2 — der Wert der `shared/hub-components.css`
|
||||
+ `<x-portal.stat-card>`-Investition zahlt sich ab Phase 3 deutlich aus.
|
||||
- Der `<x-portal.stat-card>` ist auch ohne `:value`-Number-Format
|
||||
flexibel (`number_format()` direkt im Aufruf eingebettet).
|
||||
- Test-Assertions können bei Layout-Refactors überraschend stabil
|
||||
bleiben, wenn man die Original-Strings im neuen Layout an
|
||||
sinnvollen Stellen behält (hier: im Trend-Slot der KPI-Card).
|
||||
|
||||
---
|
||||
|
||||
## 2026-05-19 · Phase 5 · Dark Mode + Switcher im User-Menü
|
||||
|
||||
- **Anlass**: User-Feedback nach Phase 2: „Switch in den Dark Mode funktioniert
|
||||
nicht. Zusätzlich hätte ich gerne einen Switcher hell/dunkel direkt im
|
||||
User-Menü." → Phase 5 vorgezogen vor Phase 3/4, weil der Switcher der
|
||||
natürliche UX-Einstiegspunkt für Dark Mode ist und der Notfall-Hack
|
||||
aus Phase 1 (`portal.css: .dark { --color-accent: var(--color-hub) }`)
|
||||
endlich verschwinden soll.
|
||||
|
||||
- **Plan-Dokument**: `05-PHASE-5-DARK-MODE.md` mit Token-Mapping-Tabelle,
|
||||
drei wichtigen Token-Konstanten-Tricks (`--color-accent-warm`,
|
||||
`--color-panel-dark`, `--color-panel-dark-2`) und Switcher-Snippet.
|
||||
|
||||
- **`design-tokens.css` — Dark-Block aktiviert**:
|
||||
- Vollständiger `.dark { … }`-Block mit Werten aus
|
||||
`User Dashboard presseportale Dark.html`.
|
||||
- Surfaces: bg/elev/card/rule schalten auf `#0e1218`-Familie.
|
||||
- Hub-Blau wird **heller** im Dark Mode (`#5a78c2` statt `#1a2540`) —
|
||||
notwendig für Lesbarkeit auf dunklem Bg.
|
||||
- Bernstein-Akzent ebenfalls heller (`#d9a560`).
|
||||
- Status-Farben (`ok/warn/err`) auf dunkle, gesättigte Variante.
|
||||
- Schatten-Tokens neutral-schwarz statt hub-blau-warm.
|
||||
- `color-scheme: dark;` als Hint für native Form-Controls.
|
||||
|
||||
- **3 neue Token-Konstanten** (gleicher Wert in beiden Modi):
|
||||
- `--color-accent-warm` (`#b07a3a`) — für Stellen, die explizit Bernstein
|
||||
bleiben müssen (Hint-Card-Border-Left, Progress-Bar-Fill); löst die
|
||||
Kollision auf, dass `--color-accent` im Portal auf Hub-Blau gemapt
|
||||
ist und im Dark Mode noch heller würde.
|
||||
- `--color-panel-dark` (`#0f1729`) und `--color-panel-dark-2` (`#1a2540`)
|
||||
— für `.panel-dark` und Brand-Bridge-Inner-Boxes. Ohne diese würde
|
||||
der dunkle Bridge-Container im Dark Mode plötzlich hellblau, weil
|
||||
`var(--color-hub)` zum hellen Wert wird.
|
||||
|
||||
- **`portal.css` — Notfall-Hack aus Phase 1 entfernt**:
|
||||
- Der `.dark { --color-accent: var(--color-hub); … }`-Block ist
|
||||
überflüssig, weil das echte Dark-Token-Mapping in `design-tokens.css`
|
||||
`--color-hub` automatisch auf `#5a78c2` schaltet — und
|
||||
`--color-accent` darüber per `var(--color-hub)`-Verweis dynamisch
|
||||
mitkommt.
|
||||
- Primary-Button-Shadows zusätzlich für `.dark` überschrieben: statt
|
||||
`rgba(26, 37, 64, …)` (warmer Hub-Blau-Alpha) jetzt `rgba(0, 0, 0, …)`
|
||||
(neutral-schwarz), weil der hub-blaue Schatten auf dunklem Card-BG
|
||||
zu sichtbar wirkt.
|
||||
|
||||
- **`hub-components.css` — Dark-tauglich gemacht**:
|
||||
- `.panel-dark` nutzt jetzt `var(--color-panel-dark-2)` und
|
||||
`var(--color-panel-dark)` (vorher `var(--color-hub)` und
|
||||
`var(--color-topbar-deep)`) → bleibt im Dark Mode dunkel.
|
||||
- `.hint-card border-left` und `.hint-bar > span` nutzen
|
||||
`var(--color-accent-warm)` (konstant Bernstein) statt `var(--color-accent)`
|
||||
(im Portal Hub-Blau-Mapping).
|
||||
- `.hint-card background` schaltet auf `var(--color-bg-card-warm)` —
|
||||
ist im Light Mode `#efeadc` (warmes Buchpapier), im Dark Mode
|
||||
`#1f1a12` (warm-dunkles Bernstein-Substrat).
|
||||
- Restliche Klassen funktionieren **automatisch**, weil alle Werte
|
||||
über Tokens laufen — DRY-Architektur zahlt sich aus.
|
||||
|
||||
- **`customer/dashboard.blade.php`**:
|
||||
- Brand-Bridge-Inner-Boxes auf `bg-[color:var(--color-panel-dark-2)]`
|
||||
umgestellt (statt `--color-hub-2`, das im Dark Mode hell würde).
|
||||
|
||||
- **Switcher im User-Menü** (`sidebar.blade.php` — Desktop + Mobile):
|
||||
- Vor dem Logout-Button: kleiner Block mit Eyebrow „Erscheinung" und
|
||||
FluxUI-Segmented-Radio-Group mit Icons-only.
|
||||
```blade
|
||||
<flux:radio.group x-data variant="segmented" size="sm" x-model="$flux.appearance">
|
||||
<flux:radio value="light" icon="sun" :title="__('Hell')" />
|
||||
<flux:radio value="dark" icon="moon" :title="__('Dunkel')" />
|
||||
<flux:radio value="system" icon="computer-desktop" :title="__('System')" />
|
||||
</flux:radio.group>
|
||||
```
|
||||
- `$flux.appearance` ist FluxUIs Magic-Object — LocalStorage-persistent,
|
||||
`@fluxAppearance`-Script setzt `class="dark"` auf `<html>`.
|
||||
- In BEIDEN Dropdowns (Desktop in der Sidebar, Mobile im Header).
|
||||
|
||||
- **Hub-Frontend bleibt Light-Only** (Plan-Vorgabe):
|
||||
- `auth/pressekonto.blade.php` lädt KEIN `@fluxAppearance` und KEIN
|
||||
`partials/head`. Damit wird `class="dark"` dort nie gesetzt — auch
|
||||
nicht, wenn LocalStorage `dark` enthält. Kein Eingriff nötig.
|
||||
- Hub-Landing analog (eigene `<head>`-Pipeline).
|
||||
|
||||
- **Build/Verifikation**:
|
||||
- `npm run build:portal` → `portal: 418.55 kB` (Δ +1.5 kB für
|
||||
Dark-Tokens + Switcher).
|
||||
- `php artisan test --filter='DashboardTest|AuthenticationTest|RegistrationTest|CustomerPortalTest'`
|
||||
→ **18/18 passed**, 70 Assertions. Keine Regressions.
|
||||
- `vendor/bin/pint --dirty` → `passed`.
|
||||
- Linter: 0 Errors.
|
||||
|
||||
- **Lessons learned**:
|
||||
- Tailwind v4's `@theme`-Variables sind **dynamisch** zur Laufzeit —
|
||||
`--color-accent: var(--color-hub)` schaltet beim `.dark`-Switch
|
||||
automatisch mit, ohne dass man `.dark { --color-accent: … }` extra
|
||||
setzen muss.
|
||||
- Wenn ein Wert in beiden Modes IDENTISCH bleiben soll (`--color-panel-dark-2`,
|
||||
`--color-accent-warm`), gehört er in den Light-Block und wird im
|
||||
`.dark`-Block bewusst NICHT überschrieben. Vererbung tut den Rest.
|
||||
- FluxUI's `flux:radio.group variant="segmented"` mit Icons-only ist
|
||||
perfekt für Dropdown-Switcher; `:title="…"` liefert Tooltips ohne
|
||||
sichtbares Label.
|
||||
|
||||
- **Bonus**: Der ursprüngliche Symptom-Fix aus Phase 1
|
||||
(Multi-Alpine + Dark-Mode-Bug) ist jetzt strukturell aufgelöst:
|
||||
- Alpine kommt ausschließlich aus `@fluxScripts`.
|
||||
- Dark Mode ist echt umgesetzt, nicht maskiert.
|
||||
|
||||
---
|
||||
|
||||
## 2026-05-19 · Phase 2 · Customer-Dashboard auf Mockup-Stil
|
||||
|
||||
- **Anlass**: User-Freigabe „weiter“ nach Behebung des Dark-Mode/Alpine-Bugs.
|
||||
Phase 2 laut Plan: Customer-Dashboard (`/admin/me`) an
|
||||
`User Dashboard presseportale.html` angleichen.
|
||||
- **Vorab-Doku**: `04-PHASE-2-CUSTOMER-DASHBOARD.md` mit Mockup-Diff-Tabelle,
|
||||
CSS-Strategie, Component-Skizzen, Akzeptanzkriterien.
|
||||
|
||||
- **CSS-Architektur — DRY-Schritt**:
|
||||
- Neue Datei `resources/css/shared/hub-components.css` als **Single Source
|
||||
of Truth** für Hub-Layout-Bausteine: `.panel` (warm/dark/head),
|
||||
`.stat-card` (+ Varianten `is-primary|ok|warn|muted`, `.stat-strip`,
|
||||
`.stat-label`, `.stat-num`, `.stat-meta`, `.stat-trend`), `.hint-card`
|
||||
(+ `.hint-ico`, `.hint-bar`, `.hint-action`), `.badge` (+ `.warn|ok|hub|err|dot`),
|
||||
`.bridge-row`/`.dot-pe`/`.dot-bp`, portable `.eyebrow` und
|
||||
`.section-eyebrow` (für Portal — Web-Build überschreibt idempotent).
|
||||
- Importiert in **beiden** Builds:
|
||||
- `resources/css/portal.css` (nach `flux.css`)
|
||||
- `resources/css/web/shared-styles.css` (nach `design-tokens.css`)
|
||||
- Alle Werte nutzen `var(--color-*)`-Tokens — keine Hex-Literale.
|
||||
- Fehlende Tokens nachgezogen in `shared/design-tokens.css`:
|
||||
`--color-bg-rule-2` (hellere Progress-Track-Variante) und
|
||||
`--color-gain-deep` (dunkles Grün für `is-ok`-Stat-Num).
|
||||
|
||||
- **Neue Blade-Components** in `resources/views/components/portal/`:
|
||||
- `<x-portal.stat-card variant="…" label="…" :value="…">`
|
||||
mit Slots `meta` (oben rechts) und `trend` (unten).
|
||||
- `<x-portal.hint-card :icon :title :percent :href :action>`
|
||||
mit Progress-Bar bei gesetztem `$percent` und `wire:navigate`-Link.
|
||||
|
||||
- **`livewire/customer/dashboard.blade.php` komplett neu**:
|
||||
- **Page-Header**: Hub-Badge „User Backend“ + Eyebrow + großes H1
|
||||
+ Subtitle. Rechts entweder Aktive-Firma-Pille **oder** Warn-Pille
|
||||
„Keine Firma zugeordnet → zuordnen“.
|
||||
- **KPI-Reihe** (4 `stat-card`s): Gesamt (primary, mit Δ-zu-Vormonat),
|
||||
Veröffentlicht (ok), In Prüfung (warn), Entwürfe (muted).
|
||||
- **Zweispalten-Grid** (`lg:grid-cols-[2fr_1fr]`):
|
||||
- Links: Panel mit Pressemitteilungen-Liste oder Empty-State (Icon-Box
|
||||
mit Notification-Dot, Headline, Action-Button, Schritt-Karten 01/02/03,
|
||||
Footer-Tipp „4 Stunden“).
|
||||
- Rechts: Panel „Datenqualität“ mit `<x-portal.hint-card>`s oder
|
||||
Success-State („Alles im grünen Bereich“).
|
||||
- **Unteres Grid**: Firmen-Panel (Liste **oder** dashed Empty-Slot
|
||||
+ Hinweis-Box) + Brand-Bridge-Dark-Panel (presseecho + businessportal24
|
||||
mit Status, API-Status-Indikator, Tarif).
|
||||
- **Footer**: Subtle-Link-Reihe (Sicherheit, API & Tokens, Profil).
|
||||
|
||||
- **Volt-`with()` erweitert**:
|
||||
- `stats.deltaMonth` — Monatsvergleich via zweiter `whereBetween`-Query.
|
||||
- `profileCompleteness` (Heuristik auf 6 Profile-Kernfelder).
|
||||
- `billingCompleteness` (5 Address-Pflichtfelder).
|
||||
- `bridgeStatus` (vorerst hardcoded `connected` — Phase 3+).
|
||||
- `qualityHints[]` optional um `percent`-Feld erweitert — wenn gesetzt,
|
||||
rendert Progress-Bar in der Hint-Card.
|
||||
|
||||
- **Edge-Case beim Bauen**: Blade interpretierte `<flux:icon>` im PHPDoc-
|
||||
Kommentar von `hint-card.blade.php` als echten Component-Tag und produzierte
|
||||
`Undefined variable $component`. Fix: Doc-Block entkontaminiert
|
||||
(„flux:icon“ ohne Spitzklammern).
|
||||
|
||||
- **Tests neu** in `tests/Feature/Customer/DashboardTest.php` (5 Cases):
|
||||
1. Customer-Dashboard rendert Core-Sections ohne Fehler
|
||||
2. Empty-State mit 3-Schritt-Intro wird gezeigt
|
||||
3. PR-Liste + KPI-Zahlen rendern bei vorhandenen Daten
|
||||
4. Profile-Completeness-Hint mit Prozentwert erscheint bei Teildaten
|
||||
5. Vollständiges Profil + Billing → Hints werden ausgeblendet,
|
||||
„Alles im grünen Bereich“ wird gezeigt
|
||||
- **Ergebnis**: 5/5 passed, 21 Assertions.
|
||||
- Cross-Check: Verwandte Tests (`Dashboard|Authentication|Registration|CustomerPortal`)
|
||||
→ **18/18 grün**, 70 Assertions. Keine Regressions.
|
||||
|
||||
- **Build/Verifikation**:
|
||||
- `npm run build:portal` → `portal: 417.02 kB` (Δ +8 kB für neue
|
||||
Hub-Components-Klassen + Dashboard-Klassen). Web-Build unverändert.
|
||||
- `vendor/bin/pint --dirty` → `passed`.
|
||||
|
||||
- **Was bewusst weggelassen**:
|
||||
- Sparklines auf den Stat-Cards (kommen mit echten Trend-Daten in Phase 4).
|
||||
- Topbar-Anpassung (eigene Phase, später).
|
||||
- `<x-portal.bridge-card>`-Extraktion (Brand-Bridge bleibt inline, bis
|
||||
sie an mehr Stellen gebraucht wird).
|
||||
|
||||
- **Lessons learned**:
|
||||
- PHPDoc in Blade-Components darf KEINE `<flux:*>`-Tags enthalten —
|
||||
der Blade-Pre-Compiler scannt das gesamte File vor dem PHP-Parsing.
|
||||
- `shared/hub-components.css` ist der richtige Hebel für Phase 3
|
||||
(Admin-Dashboard) und Phase 4 (Listen/Detail) — Components-CSS muss
|
||||
nicht mehr pro Phase neu definiert werden.
|
||||
|
||||
---
|
||||
|
||||
## 2026-05-19 · Phase 1 Refinement · Dark-Mode-Bug + Multi-Alpine
|
||||
|
||||
- **Anlass**: User-Review nach Kontrast-Refinement: zwei konkrete Befunde
|
||||
aus der Browser-Konsole.
|
||||
1. `[Warning] Detected multiple instances of Alpine running (me, line 114)`
|
||||
2. Button-Default-Farbe ist `rgb(109, 138, 211)` (helles Blau), nicht
|
||||
das gewünschte Hub-Blau `rgb(26, 37, 64)`. Computed Style zeigt:
|
||||
`.bg-[var(--color-accent)] { background-color: var(--color-accent); }`
|
||||
→ `var(--color-accent)` löst zu `#6d8ad3` auf.
|
||||
|
||||
- **Diagnose Bug 1 (Alpine)**:
|
||||
- `partials/head.blade.php` lädt `resources/js/app.js` über `@vite`.
|
||||
`app.js` ruft `Alpine.start()` auf.
|
||||
- Am Ende des `<body>` injiziert `@fluxScripts` (sidebar.blade.php Zeile
|
||||
nahe `</body>`) **eine eigene Alpine-Instanz** (FluxUI bringt Alpine
|
||||
selbst mit).
|
||||
- Ergebnis: zwei `window.Alpine`-Objekte, Bindings teils tot, Warning.
|
||||
- Auf der Login-Seite hatten wir das **bereits** gefixt (app.js dort
|
||||
rausgenommen), aber im Portal-Layout war der Fix noch offen.
|
||||
|
||||
- **Diagnose Bug 2 (Button-Farbe)**:
|
||||
- Der Wert `rgb(109, 138, 211)` = `#6d8ad3` ist **exakt** der
|
||||
Dark-Mode-Fallback, den ich in `portal.css` unter `.dark { --color-accent: #6d8ad3 }`
|
||||
definiert hatte.
|
||||
- FluxUI's `@fluxAppearance`-Helper schreibt `class="dark"` auf
|
||||
`<html>`, sobald der User den Appearance-Switcher mal auf "dark"
|
||||
gestellt hatte (gespeichert in `localStorage`).
|
||||
- Damit überschreibt der Dark-Block den Light-Mode-Akzent
|
||||
`var(--color-hub)` (`#1A2540`) — Buttons sehen plötzlich blassblau aus.
|
||||
- Dark Mode ist laut Plan erst Phase 5, war aber durch den
|
||||
Fallback-Block bereits halb aktiv.
|
||||
|
||||
- **Fixes**:
|
||||
- `resources/views/partials/head.blade.php`: `resources/js/app.js`
|
||||
aus dem `@vite`-Aufruf **entfernt**. Alpine kommt im Portal
|
||||
ausschließlich über `@fluxScripts`. (Hub-Landing nutzt
|
||||
`partials/head` nicht — eigene `<head>`-Pipeline.)
|
||||
- `resources/css/portal.css`: Der `.dark { --color-accent: ... }`-
|
||||
Block setzt jetzt **bewusst** alle Akzent-Tokens auf
|
||||
`var(--color-hub)` (also den Light-Mode-Wert). Damit bleibt das
|
||||
Hub-Blau auch bei eingeschaltetem `class="dark"` konsistent.
|
||||
Kommentar dokumentiert, dass Phase 5 diesen Block durch das
|
||||
echte Dark-Token-Mapping aus `shared/design-tokens.css` ersetzt.
|
||||
|
||||
- **Build/Verifikation**:
|
||||
- `npm run build:portal` → `portal: 408.97 kB` (Δ +0.02 kB).
|
||||
- `php artisan test --compact --filter='AuthenticationTest|RegistrationTest'`
|
||||
→ **6 passed, 19 assertions**, 1.93s.
|
||||
- `vendor/bin/pint --dirty --format agent` → `passed`.
|
||||
|
||||
- **User-Action zur Verifikation**:
|
||||
- Im Portal Hard-Reload (Cmd/Strg+Shift+R) — die alte `app.js`
|
||||
hängt sonst im HTTP-Cache.
|
||||
- Konsole sollte **keine** Multi-Alpine-Warning mehr werfen.
|
||||
- Primary-Buttons sind im Default-State sattes Hub-Blau (`#1A2540`),
|
||||
Hover noch dunkler (`#243152`).
|
||||
|
||||
---
|
||||
|
||||
## 2026-05-19 · Phase 1 Refinement · Kontraste & Button-Hover
|
||||
|
||||
- **Anlass**: User-Review nach Phase 1: „Buttons als Primary auf
|
||||
`rgb(26, 37, 64)` einsetzen, die andere Farbe ist deutlich zu hell.
|
||||
Es fehlen noch deutliche Kontraste."
|
||||
- **Diagnose**:
|
||||
- FluxUI-Primary-Buttons sind eigentlich **schon** auf `var(--color-accent)`
|
||||
= `var(--color-hub)` = `#1A2540` = `rgb(26, 37, 64)` gesetzt
|
||||
(im Build verifiziert). Sollte stimmen.
|
||||
- **ABER**: Der FluxUI-Default-Hover ist
|
||||
`hover:bg-[color-mix(in_oklab,_var(--color-accent),_transparent_10%)]`
|
||||
— auf hellem Buchpapier wirkt das hell-blau statt der gewünschten
|
||||
Hub-Konvention `hover:bg-hub-2` (dunkler als Default).
|
||||
- Außerdem zu wenig Schatten/Border-Kontrast für klare Button-Kanten.
|
||||
- **Erkenntnis**: Frühere `[data-flux-button][data-variant="primary"]`-
|
||||
Overrides griffen **nie**, weil FluxUI kein `data-variant`-Attribut
|
||||
rendert. Variant-Styling kommt komplett über Tailwind-Klassen
|
||||
(z.B. `bg-[var(--color-accent)]`). Neue Selektor-Strategie nutzt
|
||||
jetzt diese Klassen direkt (mit escapeten Brackets).
|
||||
- **Fixes in `portal.css`**:
|
||||
- **Primary-Button-Hover** auf `var(--color-hub-2)` (#243152) statt
|
||||
FluxUI's color-mix-Hellung. Selektor:
|
||||
`[data-flux-button].hover\:bg-\[color-mix\(in_oklab\,_var\(--color-accent\)\,_transparent_10\%\)\]:hover`
|
||||
- **Primary-Button-Shadow**: kräftigeres Inset-Highlight + warmer
|
||||
Drop-Shadow in Hub-Blau-Alpha für klare Kanten auf Buchpapier.
|
||||
Border zusätzlich auf `var(--color-hub-2)` für definierten Rand.
|
||||
- **Hover-State**: noch stärkerer Shadow + Drop für Tiefenwirkung.
|
||||
- **Input-Focus** auf Hub-Blau-Ring (statt blassem Default-Akzent),
|
||||
mit Buchpapier-Offset für saubere Trennung.
|
||||
- Alter (defunkter) `[data-flux-button][data-variant="primary"]`-
|
||||
Block entfernt, weil Selektor nicht existiert.
|
||||
- **Build/Verifikation**:
|
||||
- `npm run build:portal` → `portal: 408.95 kB` (von 409.03 kB, -0.08 kB).
|
||||
- Im finalen CSS verifiziert:
|
||||
* Hub-2-Hover-Override:
|
||||
`[data-flux-button].hover\:bg-…:hover{background-color:var(--color-hub-2)!important}`
|
||||
* Shadow-Override:
|
||||
`[data-flux-button].bg-\[var\(--color-accent\)\]{border-color:var(--color-hub-2);box-shadow:inset 0 1px #ffffff2e,0 1px 2px #1a254040,…}`
|
||||
* Input-Focus-Ring auf Hub-Blau.
|
||||
- `vendor/bin/pint --dirty` → passed.
|
||||
- **Wirkung**:
|
||||
- Primary-Button **Default**: `#1A2540` (Hub-Blau), klarer warmer
|
||||
Schatten, definierter Rand → fühlt sich „solid" an wie auf der
|
||||
Hub-Landing.
|
||||
- Primary-Button **Hover**: `#243152` (Hub-2, dunkler statt heller)
|
||||
— Hub-Konvention, signalisiert Interaktion ohne den Eindruck einer
|
||||
schwächeren Farbe zu erzeugen.
|
||||
- Inputs zeigen jetzt einen **erkennbaren Hub-Blau-Ring** beim Fokus
|
||||
statt eines blassen Bernstein-Schimmers.
|
||||
- **Hinweis an User**: **Hard-Reload** (Cmd+Shift+R) ist nötig — das
|
||||
CSS-Bundle hat einen neuen Hash (`portal-kuU-opFv.css`).
|
||||
- **Verfeinerungen noch offen für Phase 2 / Iteration**:
|
||||
- Subtle/Filled/Ghost-Buttons (`<flux:button variant="filled">`) sind
|
||||
weiterhin transparent-zinc → bei Bedarf in Phase 2 angleichen.
|
||||
- Sidebar-Active-Item hat schon Hub-Soft + 2 px-Strip; ggf. den
|
||||
Strip noch sichtbarer machen wenn weiter zu unauffällig.
|
||||
|
||||
---
|
||||
|
||||
## 2026-05-19 · Phase 1 abgeschlossen · Portal-Shell auf Hub-Design
|
||||
|
||||
- **Was**: Portal-Shell (Sidebar, Topbar, Layout-Container, Customer-Banner)
|
||||
visuell ans Hub-Design angeglichen. FluxUI bleibt komplett erhalten —
|
||||
Anpassung erfolgt über CSS-Token-Bridging und `[data-flux-*]`-Overrides.
|
||||
Brand-Mark ersetzt das Starter-Kit-Logo. Light Mode ist Default; Dark
|
||||
Mode für Phase 5 vorbereitet (heller Hub-Blau).
|
||||
- **Dateien (geändert)**:
|
||||
- `resources/css/portal.css` — komplett refactored:
|
||||
* `--font-sans: "Inter Tight"` statt `Instrument Sans`
|
||||
* `--color-accent: var(--color-hub)` (#1A2540) statt `#3ea3dc`
|
||||
* `--color-zinc-50..950` auf Hub-Buchpapier-Familie gemappt
|
||||
(Zinc-100 = #F6F4EF, Zinc-700 = #1A1F1C, Zinc-900 = Hub-Blau)
|
||||
* Hub-Stil-Overrides: `[data-flux-sidebar]`, `[data-flux-navlist]`,
|
||||
`[data-flux-navlist-item]` mit Active-Strip links, `[data-flux-button]`
|
||||
Primary/Filled auf Hub-Blau, `[data-flux-card]` Buchpapier
|
||||
* Dark-Mode-Block bleibt vorerst minimal (nur Accent), Vollumstellung
|
||||
in Phase 5
|
||||
- `resources/views/partials/head.blade.php` — Bunny-Font auf
|
||||
`inter-tight + jetbrains-mono + source-serif-4` (für Brand-Mark)
|
||||
- `resources/views/components/layouts/app/sidebar.blade.php`:
|
||||
* `class="dark"` aus `<html>` entfernt
|
||||
* `<body>` jetzt `bg-bg text-ink antialiased` (Hub-Buchpapier)
|
||||
* `<x-app-logo>` ersetzt durch `<x-web.brand-mark brand="pressekonto"
|
||||
:serif="false" />` + Eyebrow "Publisher · Hub" — sowohl im Desktop-
|
||||
Brand-Block als auch im Mobile-Header
|
||||
* Testmodus-Block (Impersonation) komplett im Hub-Stil: dunkles
|
||||
Hub-Blau-Panel mit Bernstein-Eyebrow „Testmodus aktiv", weiße CTA
|
||||
„Zurück zum Admin" (statt Amber-Warnfarbe wie zuvor)
|
||||
* Resources-Block (Tailwind/HeroIcons/Flux/Repository) entfernt —
|
||||
gehört nicht ins Live-Portal
|
||||
- `resources/views/components/layouts/app.blade.php`:
|
||||
* Customer-Banner („User Backend") visuell auf Hub-Stil: Hub-Soft-
|
||||
Hintergrund + Hub-Soft-2-Border, Hub-Blau-Pille mit Dot, Eyebrow
|
||||
„Firmenkontext" in Sperrschrift, Heading in Hub-Ink
|
||||
- **Dateien (Test-Anpassungen, weil rollen-basierter Redirect aus Login-Fix
|
||||
weitere Tests berührt hat)**:
|
||||
- `tests/Feature/Auth/AuthenticationTest.php` — Test-User auf
|
||||
`superAdmin()` umgestellt (sonst `canAccessAdmin() === false` →
|
||||
Redirect auf `/` statt `/dashboard`)
|
||||
- `tests/Feature/Auth/RegistrationTest.php` — `terms_accepted` im
|
||||
Formular gesetzt + Redirect-Erwartung auf `/` angepasst (frisch
|
||||
registrierte User haben keine Rolle → Fallback `/`)
|
||||
- **Build/Test**:
|
||||
- `npm run build:portal` → `portal: 409.03 kB` (vorher 408.89 kB,
|
||||
+0.14 kB). Unter dem 10 %-Akzeptanzkriterium (≤ 450 kB).
|
||||
- CSS-Inspektion bestätigt Phase-1-Tokens:
|
||||
* `--color-accent: var(--color-hub)` und `.dark { --color-accent:
|
||||
#6d8ad3 }` im `:root`
|
||||
* `--color-zinc-700: #1a1f1c` (Hub-Ink statt Zinc-Grau)
|
||||
* `--font-sans: "Inter Tight"` ohne Instrument-Sans-Vorlauf
|
||||
* Hub-Overrides im Output: `[data-flux-sidebar]{background:var(...)}`,
|
||||
`[data-flux-navlist-item][aria-current=page]{background:var(
|
||||
--color-hub-soft);...}`
|
||||
- Auth-Test-Suite: **0 zusätzliche Regressionen** verifiziert (8 fail
|
||||
/ 15 passed vor & nach Phase 1; verbleibende Failures sind pre-existing
|
||||
Domain-Mismatch- und CSRF-Issues im Test-Setup).
|
||||
- Smoke-Test: `/dashboard`, `/admin/me`, `/settings/profile`,
|
||||
`/admin/companies`, `/admin/press-releases` antworten alle HTTP 302
|
||||
→ `/login` (erwartetes Verhalten ohne Auth-Session via curl).
|
||||
- `vendor/bin/pint --dirty` → passed.
|
||||
- **Bewusst NICHT in Phase 1**:
|
||||
- **Topbar** mit Breadcrumb + Bridge-Row + Search + „Neue Mitteilung"-CTA
|
||||
aus dem Mockup → ist für Phase 2 (Customer-Dashboard) sinnvoller,
|
||||
weil die Topbar dort Page-Kontext (Breadcrumb-Titel) braucht. Aktuell
|
||||
nutzen wir FluxUI's Default-Layout ohne dedizierte Topbar.
|
||||
- Konto-Switcher als Sidebar-Header (Avatar + Name + Firma als
|
||||
Dropdown-Trigger oben statt unten) → das User-Menü unten bleibt
|
||||
vorerst FluxUI-Standard. Iterativ in Phase 2.
|
||||
- Dashboard-Inhalte (Stat-Cards, Hint-Cards) → Phase 2 & 3.
|
||||
- Listen-Pages → Phase 4 (automatisch durch Token-Bridge schon „okay").
|
||||
- **Beobachtungen**:
|
||||
- FluxUI-Navlist-Item-Selektor: `[aria-current="page"]` greift. Falls
|
||||
künftige FluxUI-Versionen `[data-current="true"]` statt
|
||||
`[aria-current="page"]` setzen, deckt der Override beides ab.
|
||||
- Vendor-Pfad in `partials/head.blade.php` bewusst nicht geändert —
|
||||
Vite-Setup mit `build/portal` bleibt wie gehabt.
|
||||
- **Nächster Schritt**: **Review-Stopp**. Bei Freigabe → entweder
|
||||
Phase 2 (Customer-Dashboard-Stat-Cards & Hint-Cards) oder Topbar-
|
||||
Iteration. Entscheidung bei dir/Frank nach Anschauen.
|
||||
|
||||
---
|
||||
|
||||
## 2026-05-19 · Login-Funktionsfix · Doppelte Alpine-Instanz
|
||||
|
||||
- **Was**: Nach Phase 0 trat ein funktionaler Bug auf: Login-Form ging
|
||||
nicht durch, Browser-Logs zeigten „Detected multiple instances of
|
||||
Alpine running" und „Livewire: published assets out of date".
|
||||
- **Ursache**: Das Hub-Auth-Layout (`pressekonto.blade.php`) lud sowohl
|
||||
`resources/js/app.js` (das `Alpine.start()` aufruft) als auch
|
||||
`@livewireScripts` (das Alpine intern mitbringt). Zwei Alpine-Instanzen
|
||||
→ `wire:submit`, `x-data`, `wire:model` brachen.
|
||||
- **Fixes**:
|
||||
- `app.js` aus `@vite([…])` im Auth-Layout entfernt — Alpine kommt nun
|
||||
nur noch über Livewire.
|
||||
- `php artisan livewire:publish --assets` → `livewire.js` von 450 kB
|
||||
auf 552 kB aktualisiert (Versions-Mismatch behoben).
|
||||
- Login/Register-Redirect auf rollen-basierte Logik umgestellt
|
||||
(Admin → `/dashboard`, Customer → `/admin/me`, sonst `/`) und
|
||||
`navigate: true` entfernt — SPA-Navigation kann den Wechsel zwischen
|
||||
Web-Build (Hub-Auth) und Portal-Build (FluxUI-Dashboard) nicht
|
||||
handhaben.
|
||||
- **Dateien**:
|
||||
- `resources/views/components/layouts/auth/pressekonto.blade.php`
|
||||
- `resources/views/livewire/auth/login.blade.php`
|
||||
- `resources/views/livewire/auth/register.blade.php`
|
||||
- **Verifikation**: Login funktioniert (User bestätigt), Redirect zum
|
||||
Dashboard läuft, keine Browser-Warnings mehr.
|
||||
|
||||
---
|
||||
|
||||
## 2026-05-19 · Phase 0 abgeschlossen · Token-Unifizierung
|
||||
|
||||
- **Was**: Single Source of Truth für Design-Tokens etabliert. Web- und
|
||||
Portal-Build importieren beide `resources/css/shared/design-tokens.css`.
|
||||
Visuelle Unverändertheit verifiziert — FluxUI-Defaults gewinnen im
|
||||
Portal weiterhin (Instrument Sans, Zinc, `#3ea3dc`), wird in Phase 1
|
||||
abgelöst.
|
||||
- **Dateien**:
|
||||
- `resources/css/shared/design-tokens.css` **neu** — alle Hub-Tokens
|
||||
plus Status-Reihe (`--color-warn`, `--color-warn-soft`,
|
||||
`--color-err`, `--color-err-soft`, `--color-ok-soft`), Bridge-Dots
|
||||
(`--color-bridge-presseecho`, `--color-bridge-businessportal`),
|
||||
Radii (`--radius-xs/sm/md/lg`) und Schatten (`--shadow-soft`,
|
||||
`--shadow-auth`). Dark-Mode-Block als auskommentierter Vorgriff.
|
||||
- `resources/css/web/shared-styles.css` — Token-Import nach
|
||||
`tailwindcss` ergänzt. Wirkt damit für alle Web-Themes
|
||||
(pressekonto, presseecho, businessportal24).
|
||||
- `resources/css/web/theme-pressekonto.css` — kompletter `@theme {}`-
|
||||
Block entfernt (lebt jetzt in der Token-Datei). HSL-Legacy-Variablen
|
||||
und `@layer components { … }` blieben unverändert.
|
||||
- `resources/css/portal.css` — Token-Datei importiert, FluxUI-Setup
|
||||
mit Zinc + Instrument Sans bleibt vorerst dominant. Phase 1 löst
|
||||
es ab.
|
||||
- **Build/Test**:
|
||||
- `npm run build:web` → `theme-pressekonto: 193 kB` (vorher 189 kB,
|
||||
+4 kB für neu gebridgde Status-Tokens), `theme-presseecho: 189 kB`,
|
||||
`theme-businessportal24: 189 kB`.
|
||||
- `npm run build:portal` → `portal: 408 kB` (vorher 397 kB, +12 kB
|
||||
für die zusätzlich verfügbaren Hub-Tokens als CSS-Vars im `:root`).
|
||||
Wird in Phase 1 wieder egalisiert, wenn das Zinc-Setup wegfällt.
|
||||
- Smoke-Test: `pressekonto.test/`, `/login`, `/register`,
|
||||
`/dashboard` (302→login), `presseecho.test/`, `businessportal24.test/`
|
||||
— alle HTTP 200/302 wie erwartet.
|
||||
- CSS-Inspektion: `--color-hub: #1a2540` und `--color-warn: #a87a1f`
|
||||
sind in `theme-pressekonto-*.css` enthalten. Im Portal-Build
|
||||
bleibt `--font-sans: "Instrument Sans"` — bestätigt visuelle
|
||||
Unverändertheit.
|
||||
- `vendor/bin/pint --dirty` → passed.
|
||||
- **Offene Fragen / Beobachtungen**:
|
||||
- Weil Tailwind v4 alle in `@theme {}` definierten Tokens als CSS-
|
||||
Variablen im `:root` ausgibt (auch ohne Utility-Verwendung), wird
|
||||
der Portal-CSS-Wuchs in Phase 1 nicht komplett zurückgehen —
|
||||
die Hub-Tokens bleiben als Variablen verfügbar. Der Nettoeffekt
|
||||
nach Phase 1 sollte ähnlich bleiben (+/- 5–10 kB).
|
||||
- Dark-Mode-Block in `design-tokens.css` ist auskommentiert
|
||||
vorbereitet, aber bewusst noch nicht aktiv (Phase 5).
|
||||
- **Nächster Schritt**: **Review-Stopp**. Bei Freigabe →
|
||||
Phase 1 starten: Portal-Shell (Sidebar, Topbar, Layout-Container)
|
||||
auf Hub-Style mappen, Zinc-Palette ablösen, FluxUI-Overrides via
|
||||
`[data-flux-*]`-Selektoren in `portal.css`. Details:
|
||||
`02-PHASE-1-PORTAL-SHELL.md`.
|
||||
|
||||
---
|
||||
|
||||
## 2026-05-19 · Setup
|
||||
|
||||
- **Was**: Architektur-Entscheidung getroffen → **Plan B** (Tokens teilen,
|
||||
Komponenten getrennt lassen). Dokumentation in `dev/frontend/hub-flux/`
|
||||
angelegt:
|
||||
- `README.md` — Übersicht & Entscheidung
|
||||
- `01-PHASE-0-TOKENS.md` — Detail-Plan für Tokens-Vereinheitlichung
|
||||
- `02-PHASE-1-PORTAL-SHELL.md` — Detail-Plan für Portal-Shell-Refresh
|
||||
- `03-WEITERE-PHASEN.md` — Outline Phase 2–6
|
||||
- `PROGRESS.md` — dieses Log
|
||||
- **Bestätigt**:
|
||||
- Hub-Blau als **Primärer Akzent** im Portal (klarer Kontrast zum hellen
|
||||
Buchpapier-Hintergrund)
|
||||
- Bernstein als **Sekundärer Akzent** (Notifications, Datenqualität,
|
||||
Akzent-Ribbons)
|
||||
- Brand bleibt **pressekonto** (auch im Portal-Sidebar via
|
||||
`<x-web.brand-mark>`)
|
||||
- Reihenfolge: erst Phase 0 + 1, dann Review
|
||||
- **Nächster Schritt**: Phase 0 umsetzen
|
||||
→ `resources/css/shared/design-tokens.css` erstellen,
|
||||
`theme-pressekonto.css` refactoren, `portal.css` minimal vorbereiten.
|
||||
|
||||
---
|
||||
|
||||
## Vorlauf (zur Erinnerung, was schon steht)
|
||||
|
||||
- **Hub-Landing** (`web/pressekonto.blade.php`) — fertig, lebt im Web-Build
|
||||
mit `theme-pressekonto.css`
|
||||
- **Hub-Auth** (Login, Register, Forgot, Reset, Verify, Confirm) — fertig
|
||||
im Hub-Design, neues Layout `auth/pressekonto.blade.php` im Web-Build
|
||||
- **Register-AGB-Checkbox** mit Server-Side-Validierung ergänzt
|
||||
- **Portal-Backend** mit FluxUI funktional vorhanden (Admin-Dashboard,
|
||||
Customer-Dashboard, 77 Blade-Dateien mit FluxUI), aber **visuell noch
|
||||
Starter-Kit-Look** (Zinc + `#3ea3dc` + Instrument Sans)
|
||||
|
||||
---
|
||||
|
||||
## Template für neue Einträge
|
||||
|
||||
```markdown
|
||||
## YYYY-MM-DD · Phase N · Kurztitel
|
||||
|
||||
- **Was**: [Was wurde konkret gemacht?]
|
||||
- **Dateien**: [Pfade]
|
||||
- **Build/Test**: [Wie verifiziert?]
|
||||
- **Offene Fragen**: [Falls etwas unklar geblieben ist]
|
||||
- **Nächster Schritt**: [Was als Nächstes ansteht]
|
||||
```
|
||||
143
dev/frontend/hub-flux/README.md
Normal file
143
dev/frontend/hub-flux/README.md
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
# Hub × FluxUI — Visuelle Vereinheitlichung Portal ↔ Hub
|
||||
|
||||
> **Ziel**: Das Portal-Backend (User-Panel, Admin-Bereich) wird visuell an den
|
||||
> Hub-Stil (`pressekonto.test`-Landing + Auth-Seiten) angeglichen, **ohne
|
||||
> FluxUI aufzugeben**. Die FluxUI-Komponenten werden über Design-Tokens und
|
||||
> CSS-Overrides ans Hub-Design adaptiert.
|
||||
|
||||
## Status
|
||||
|
||||
| Phase | Beschreibung | Status |
|
||||
|-------|--------------|--------|
|
||||
| 0 | Design-Tokens vereinheitlichen | **✅ abgeschlossen** (2026-05-19) |
|
||||
| 1 | Portal-Shell (Sidebar, Layout, Brand-Mark) | **✅ abgeschlossen** (2026-05-19) |
|
||||
| 2 | Customer-Dashboard auf Mockup-Stil (inkl. Topbar) | 🟡 wartet auf Freigabe |
|
||||
| 3 | Admin-Dashboard konsistent | ⚪ später |
|
||||
| 4 | Listen-/Detail-Pages | ⚪ iterativ |
|
||||
| 5 | Dark Mode konsistent | ⚪ später |
|
||||
| 6 | Auth-Konsolidierung (optional) | ⚪ optional |
|
||||
|
||||
→ Tagesaktueller Fortschritt: [`PROGRESS.md`](./PROGRESS.md)
|
||||
|
||||
## Dokumente in diesem Verzeichnis
|
||||
|
||||
| Datei | Zweck |
|
||||
|-------|-------|
|
||||
| [`README.md`](./README.md) | Diese Übersicht: Entscheidung, Architektur, Status |
|
||||
| [`01-PHASE-0-TOKENS.md`](./01-PHASE-0-TOKENS.md) | Phase 0: Tokens vereinheitlichen (aktiv) |
|
||||
| [`02-PHASE-1-PORTAL-SHELL.md`](./02-PHASE-1-PORTAL-SHELL.md) | Phase 1: Portal-Shell ans Hub-Design angleichen |
|
||||
| [`03-WEITERE-PHASEN.md`](./03-WEITERE-PHASEN.md) | Outline für Phasen 2–6 |
|
||||
| [`PROGRESS.md`](./PROGRESS.md) | Fortschritts-Log + Notizen |
|
||||
|
||||
## Visuelle Vorlagen
|
||||
|
||||
Maßgebliche Mockups für diese Arbeit:
|
||||
|
||||
- `dev/frontend/tailwind_v3/User Dashboard presseportale.html` — Light-Variante
|
||||
- `dev/frontend/tailwind_v3/User Dashboard presseportale Dark.html` — Dark-Variante
|
||||
- `dev/frontend/tailwind_v3/Login pressekonto A3 Tailwind.html` — Hub-Auth-Vorlage (bereits umgesetzt)
|
||||
- `dev/frontend/tailwind_v3/Hub Landing pressekonto-2.html` — Hub-Landing-Vorlage (bereits umgesetzt)
|
||||
|
||||
## Architektur-Entscheidung
|
||||
|
||||
### Plan B (gewählt) — Tokens teilen, Komponenten getrennt lassen
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ shared/design-tokens.css │
|
||||
│ (Hub-Blau, Bernstein, Buchpapier, Inter Tight, JetBrains Mono) │
|
||||
└────────────────┬────────────────────────┬───────────────────────┘
|
||||
│ │
|
||||
┌────────▼─────────┐ ┌─────────▼──────────┐
|
||||
│ portal.css │ │ theme-pressekonto │
|
||||
│ + FluxUI │ │ + shared-styles │
|
||||
│ (Backend) │ │ (Hub-Landing/Auth)│
|
||||
└──────────────────┘ └────────────────────┘
|
||||
build/portal build/web
|
||||
```
|
||||
|
||||
**Warum nicht alles in FluxUI?**
|
||||
- Die Hub-Landing lebt von Atmosphäre (konzentrische Kreise, Hub-Grid, eigene
|
||||
Eyebrows, Bridge-Cards), die mit FluxUI-Komponenten nicht 1:1 abbildbar ist
|
||||
- FluxUI würde im Hub-Frontend zur unnötigen Bundle-Last
|
||||
- Der gerade gebaute Hub-Login wäre verloren
|
||||
|
||||
**Warum nicht alles Custom?**
|
||||
- 77 Blade-Dateien nutzen FluxUI – ein Rewrite wäre Aufwand ohne Mehrwert
|
||||
- FluxUI-Tabellen, -Forms, -Modals, -Date-Picker sind im Backend Gold wert
|
||||
- FluxUI ist sehr gut **customizable** über CSS-Custom-Properties
|
||||
und `[data-flux-*]`-Selectoren
|
||||
|
||||
### Verworfen — Plan A (alles FluxUI) & Plan C (alles im Web-Build)
|
||||
|
||||
Siehe Chat-Historie für die Begründung. Kurz: zu viel Aufwand, zu wenig
|
||||
Mehrwert, würde bereits gelieferte Hub-Atmosphäre verschlechtern.
|
||||
|
||||
## Branding & Tokens
|
||||
|
||||
### Brand
|
||||
- **Marke**: pressekonto (verbindlich, für Portal und Hub)
|
||||
- **Wortmarke**: `<x-web.brand-mark brand="pressekonto" />` — auch im Portal
|
||||
- **Logo-Komponente** `<x-app-logo>` wird im Portal **abgelöst**
|
||||
|
||||
### Farben (Light)
|
||||
|
||||
| Token | Wert | Rolle |
|
||||
|-------|------|-------|
|
||||
| `--color-hub` | `#1A2540` | **Primärer Akzent** (Sidebar-Active, Primary-Buttons, Eyebrows) |
|
||||
| `--color-hub-2` | `#243152` | Hover-Stufe von `--color-hub` |
|
||||
| `--color-hub-3` | `#2E3D66` | Tertiäre Stufe (Dekoration auf dunklem Grund) |
|
||||
| `--color-hub-soft` | `#E5E9F1` | Active-Pill-Hintergrund in der Sidebar |
|
||||
| `--color-accent` | `#B07A3A` | **Sekundärer Akzent** (Bernstein – Notifications, Datenqualität, Empfehlungs-Ribbon) |
|
||||
| `--color-accent-deep` | `#8A5E27` | Akzent-Hover/Text |
|
||||
| `--color-bg` | `#F6F4EF` | Warmes Buchpapier — Haupt-Hintergrund |
|
||||
| `--color-bg-elev` | `#FBFAF6` | Elevation 1 (Sidebar, Topbar, leichte Cards) |
|
||||
| `--color-bg-card` | `#FFFFFF` | Reine Cards |
|
||||
| `--color-bg-rule` | `#E2DDD0` | Standard-Trennlinien |
|
||||
| `--color-ink` | `#1A1F1C` | Primärtext |
|
||||
| `--color-ink-2` | `#3A413D` | Sekundärtext (Begleittexte) |
|
||||
| `--color-ink-3` | `#5A6360` | Meta, Labels |
|
||||
| `--color-ink-4` | `#8A918D` | Disabled, Hintergrund-Meta |
|
||||
|
||||
### Farben (Dark) — laut Mockup
|
||||
Wird in Phase 5 ausgearbeitet. Hub-Blau wird heller (`#5A78C2`), Akzent
|
||||
wärmer (`#D9A560`), Hintergrund tief Anthrazit (`#0E1218`). Wichtig: die
|
||||
Token-Namen bleiben gleich, nur die Werte tauschen — keine doppelte
|
||||
UI-Pflege.
|
||||
|
||||
### Typografie
|
||||
|
||||
| Token | Wert |
|
||||
|-------|------|
|
||||
| `--font-sans` | `"Inter Tight", Inter, system-ui, sans-serif` |
|
||||
| `--font-mono` | `"JetBrains Mono", "SF Mono", ui-monospace, monospace` |
|
||||
| `--font-serif` | `"Source Serif 4", Georgia, serif` (nur für Brand-Mark) |
|
||||
|
||||
Aktuell im Portal: **Instrument Sans** → wird in Phase 1 abgelöst.
|
||||
|
||||
## Konventionen
|
||||
|
||||
- **Light Mode** ist Default. `class="dark"` auf `<html>` wird entfernt.
|
||||
- Dark Mode wird via `prefers-color-scheme` + Flux Appearance-Switcher
|
||||
gesteuert. Token-Layer übernimmt die Umschaltung.
|
||||
- Token-Names sind **identisch** zwischen Hub-Theme und Portal-Theme.
|
||||
Sowohl `bg-bg-elev` als auch `bg-hub-soft` funktionieren in beiden Welten.
|
||||
- FluxUI-Komponenten werden **nicht überschrieben**, sondern über
|
||||
`[data-flux-*]`-Selectoren in `portal.css` ergänzt — minimaler Eingriff,
|
||||
maximale Kompatibilität mit FluxUI-Updates.
|
||||
|
||||
## Was wir bewusst NICHT machen
|
||||
|
||||
- **Kein FluxUI-Rewrite**. Nur Token-Anpassung + Selektor-Overrides.
|
||||
- **Keine zweite UI-Pflege für Dark Mode**. Tokens-only-Ansatz.
|
||||
- **Kein Verschmelzen der Builds** (Phase 6 optional).
|
||||
- **Keine Änderung an Volt-/Livewire-Logik** in dieser Arbeit.
|
||||
|
||||
## Wer ändert was
|
||||
|
||||
- **Diese Doku** wird mit jeder Phase aktualisiert. `PROGRESS.md` enthält
|
||||
die Tages-Notes.
|
||||
- Code-Änderungen sind kleinteilig und werden in eigenen Commits gebündelt
|
||||
(`hub-flux: phase 0 — tokens vereinheitlicht`, etc.).
|
||||
- Bei Unklarheiten/Entscheidungen: kurz in `PROGRESS.md` festhalten,
|
||||
damit nachvollziehbar bleibt warum etwas so und nicht anders.
|
||||
Loading…
Add table
Add a link
Reference in a new issue