# 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
R1–R17 gelten (klassenbasierte Livewire, nur Token-Utilities, keine Emoji, UUID-URLs, DE+EN, R12/R15). frontend-design für die UI-Teile.
