CluPilotCloud/docs/specs/2026-07-25-panel-improvemen...

39 lines
2.9 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

# Design-Spec — Panel-Verbesserungen (Phase C)
**Datum:** 2026-07-25 · **Art:** Feature-Batch (Admin + Kundenportal)
Nach A (Host-Onboarding) + B (Kunden-Provisionierung): UX-/Feature-Lücken aus Nutzer-Review.
## Entscheidungen (fix)
- **Kauf-Flow:** volle Kaufoberfläche + Kauf-Intent (Order), Stripe-Redirect + Fulfillment (Resize) **gemockt** — läuft ohne Keys, später scharf.
- **Impersonation:** **volle** Session-Impersonation als Kunden-User + Rückkehr-Banner. Dafür **Customer↔User** verknüpfen.
## 1. Rechenzentren (anlegen + Select)
- `datacenters` (uuid, `code` unique z. B. `fsn`, `name`, `location?`, `active`). Model. Seed `fsn`=Falkenstein, `hel`=Helsinki.
- Admin `/admin/datacenters` (Livewire: Liste + Anlegen), Nav-Eintrag.
- `HostCreate` + kundenseitige DC-Wahl: Select aus `Datacenter::where('active')`. `hosts.datacenter` bleibt der **Code-String** (Placement/`placeableIn` unverändert) — `datacenters` liefert die gültigen Codes + Namen.
## 2. Sidebars fixieren + Speicher-Banner-Shimmer
- Admin- + Portal-Layout: Sidebar auf `lg` **fix** (nur `main` scrollt). Shell: Flex-Container `lg:h-dvh lg:overflow-hidden`, `aside` volle Höhe, `main` `lg:overflow-y-auto`.
- Dashboard-Speicher-Banner: **Shimmer** (Gradient-Flash links→rechts) als Overlay-Keyframe (`@verbatim`/Token-Farben), respektiert `prefers-reduced-motion`.
## 3. `/admin/provisioning` rechte Spalte
- Aktuell: alle 15 Steps mit repetitivem „Fertig" → unübersichtlich. Neu (frontend-design): kompakt — Fortschrittsbalken + `X/15`, aktueller Schritt hervorgehoben, letzte/nächste Schritte knapp; keine Wiederholung.
## 4. Kunden-Commerce
- Aktuelles Paket (aus aktiver `instance`/`order`), Upgrade-Optionen (andere `plans`), **Zusatzspeicher** (+100 GB / 10 €), Addons (Kachel-Katalog).
- Kauf → `orders`-Row (`type` = upgrade|storage|addon, `status=pending`) als **Intent**; Stripe-Redirect + Fulfillment gemockt (Toast „Kauf vorgemerkt"). frontend-design UI (neue Portal-Route `/billing` + Verknüpfung vom Dashboard-Upsell).
- `orders` bekommt `type` (default `new`) + `addon_key?`.
## 5. Admin-Impersonation
- `customers.user_id` (nullable FK). Beim Order-Eingang/Seed: User je Customer finden/anlegen (E-Mail-Match) + verknüpfen.
- Admin `/admin/impersonate/{customer}` (admin-gated) → Original-Admin-ID in Session, `Auth::login($customer->user)`, Redirect `/dashboard`. `/impersonate/leave` → zurück als Admin.
- Portal-Layout: Banner „Als :name verbunden — zurück zum Admin" wenn `session('impersonator_id')`.
- `Admin\Customers` an echte Kunden binden + „Verbinden"-Button.
## 6. Verifikation
- Pest grün · DE+EN identische Keys · R12 (0 Konsolenfehler, neue Seiten) · R15 Codex clean · Dev migrate/seed · Push.
## Regeln
R1R17 gelten (klassenbasierte Livewire, nur Token-Utilities, keine Emoji, UUID-URLs, DE+EN, R12/R15). frontend-design für die UI-Teile.