presseportale/dev/frontend/hub-flux/14-PHASE-4H-PRESS-RELEASES-MOCKUP.md

Phase 4H — Customer „Meine Pressemitteilungen" auf Mockup-Stil

Nachgelagertes Päckchen aus Phase 4. Hebelt das wichtigste Customer-Arbeitstool auf das volle Mockup-Vokabular.

Status: ✅ abgeschlossen · Aufwand: ~1 Tag · Risiko: niedrig

---

Anlass

customer/press-releases/index.blade.php ist heute auf ~50 % Mockup-Match: Page-Header, Filter-Panel, Tabelle und Empty-State sind Hub-styled, aber alle hochwirksamen Patterns aus dem Mockup fehlen. Diese Seite ist die meistbesuchte des Customer-Bereichs (primäres Arbeitstool).

Vorlage

dev/frontend/tailwind_v3/User Pressemitteilungen presseportale.html

Match-Ziel

≥ 90 % zum Mockup, ohne Backend-API-Erweiterungen.

---

Scope — was umgesetzt wird

1. Counter-Strip im Header

Statt langer Subzeile: Inline-Counter pro Status direkt unter H1.

24 Mitteilungen · 18 veröffentlicht · 1 in Prüfung · 4 Entwürfe · 1 abgelehnt

Zahlen kommen aus aggregiertem withCount() über die Status-Enum.

2. Saved-Views-Tabs

Tab-Leiste statt Status-Dropdown:

Alle (24) · Veröffentlicht (18) · Entwürfe (4) · In Prüfung (1) · Abgelehnt (1) · Archiv (0)

Aktive Tab unterstrichen mit Hub-Blau. Klick → statusFilter-Volt-Property.

3. Filter-Chips mit Caret

Status/Portal/Firma/Zeitraum als Chips mit Dropdown-Caret. Aktive Chip in Hub-Blau, inaktive auf weißem Background.

Hinweis: Status-Chip ist im UI redundant mit Saved-Views-Tabs; wir lassen ihn weg. Bleiben: Portal, Firma, Zeitraum (erstellt ab Datum X).

4. Active-Chips (entfernbare Filter)

Unter den Filter-Chips: Sichtbarmachung aktiver Filter mit ×-Button zum Entfernen.

5. Bulk-Selection (nur UI-Vorbereitung)

Checkbox in Header und pro Zeile. Header-Checkbox kann indeterminate-State haben. Keine Bulk-Aktionen im Scope — das wird erst später ein eigenes Päckchen (Bulk-Approve etc.).

6. Portal-Pills mit farbigem Dot

Pro Zeile in Spalte „Portal": je nach portal-Enum:

• presseecho → grüner Dot
• businessportal24 → orangener Dot
• both → beide Pills nebeneinander

7. Inline-Actions neben Status

Statusspalte bekommt zusätzlich zur Badge eine kleine Inline-Action je nach Status:

Status	Inline-Action
Draft	Zur Prüfung →
Review	Zurückziehen → (nur wenn withdrawFromReview existiert, sonst weglassen)
Published	— (keine Inline-Action, nur Hauptaktion „Vorschau")
Rejected	Grund ansehen → (Modal/Tooltip mit rejection_reason)
Archived	—

8. Row-Tinting

Zeilen mit Status review bekommen is-row-warn (sehr dezent gelb beim Hover), rejected bekommen is-row-err (rot beim Hover).

9. Reichere Zeilen-Sub

Sub-Zeile unter Titel: PM-Nummer · Datum · Hinweis Wir nutzen vorhandene Felder: id (als „PM-{id}"), published_at, rejection_reason-Existenz.

10. Datum mit Sub

Datumsspalte zweizeilig: Datum (Mono-Font, tabular-nums) + Sub (Status-Kontext z.B. „veröffentlicht · 09:12").

11. 3-fach Empty-State

Drei Varianten je nach Kontext:

• empty-filter — wenn Filter aktiv: „Keine Mitteilungen mit diesen Filtern" + Reset-Button
• empty-search — wenn search gesetzt: „Keine Treffer für …" + Suche-Reset
• empty-none — wenn gar keine PMs überhaupt: „Noch keine Pressemitteilungen" + 3-Schritt-Onboarding

12. Status-Aktionen-Legende

panel-warm unter der Tabelle: 5-Spalten-Grid mit allen Aktionen pro Status. Reduziert Support-Anfragen.

13. Spalten-/Export-Buttons (rechts im Header)

„Spalten" (jetzt non-functional als bald-Badge) und „Export" (bald-Badge) als sekundäre Buttons. Optional — können auch weggelassen werden, da wir keine Spalten-Konfiguration haben.

→ Entscheidung: weglassen. Kein UX-Mehrwert ohne Backend.

---

Was NICHT angefasst wird

• Volt-Logik (submitForReview, sort, with) — nur erweitert um Aggregate-Counts.
• Backend-Endpoints / API.
• Detail-/Show-Seite und Create/Edit-Forms.
• Routen.

Neue / erweiterte CSS-Klassen in hub-components.css

• .counter-strip, .counter-strip .seg, .counter-strip .sep
• .view-tab (mit .is-active, .cnt)
• .filter-chip (mit .is-active, .caret)
• .active-chip (mit .x)
• .portal-pill (mit .pe, .bp, .pdot)
• .inline-action (mit .warn, .err)
• .is-row-warn, .is-row-err (Row-Tinting)
• .empty-stage, .empty-ico, .empty-title, .empty-sub
• .badge.muted (für Draft / Archiv)
• Optional: .checkbox.indeterminate (für Bulk-Header)

Volt-Erweiterungen

• statusCounts (assoc-Array Status-Value → int) — aggregiert über withoutGlobalScopes()->where('user_id', …)->groupBy('status')
• totalCount (int) — Gesamt-Counter unabhängig vom Filter
• Saved-View-Klick mappt auf statusFilter (kein eigener Property nötig)

Tests

Keine bestehenden Tests für customer/press-releases/index gefunden. Akzeptanz:

• php artisan test --compact läuft sauber (modulo pre-existing ApiDocumentationTest)
• Build (npm run build:portal) clean
• Pint clean

Akzeptanzkriterien

• Plan
• CSS-Klassen ergänzt
• Volt-Counts ergänzt
• Markup auf Mockup-Stil
• Build + Pint + Tests grün
• PROGRESS.md + 03-WEITERE-PHASEN.md aktualisiert