Kevin Adametz
700f5e6131
Neue aufklappbare "Erste Schritte"-Card als erste Card im Kunden-Dashboard, die neue Nutzer durch Profil, Rechnungsadresse, Firma und erste PM führt und sich ausblendet, sobald alle Schritte erledigt sind. Zusätzlich die gemeinsame Fehlerseiten-Vorlage (404/403/419/500/503) an das Hub-Design angepasst (Palette, Gold-Akzent, Hub-Blau-Button), weiterhin self-contained ohne Vite-Assets. Co-authored-by: Cursor <cursoragent@cursor.com>
112 lines
5.6 KiB
PHP
112 lines
5.6 KiB
PHP
@props([
|
|
/**
|
|
* Liste der Onboarding-Schritte.
|
|
*
|
|
* @var list<array{num: string, title: string, description: string, href: string, action: string, done: bool}>
|
|
*/
|
|
'steps' => [],
|
|
|
|
/** Anzahl bereits erledigter Schritte */
|
|
'completed' => 0,
|
|
|
|
/** Gesamtzahl der Schritte */
|
|
'total' => 0,
|
|
])
|
|
|
|
@php
|
|
$percent = $total > 0 ? (int) round(($completed / $total) * 100) : 0;
|
|
$allDone = $total > 0 && $completed >= $total;
|
|
@endphp
|
|
|
|
<article class="panel overflow-hidden" x-data="{ open: $persist(true).as('me-onboarding-open') }">
|
|
<button type="button" @click="open = !open"
|
|
class="panel-head w-full cursor-pointer select-none text-left transition-colors hover:bg-[color:var(--color-bg-elev)]"
|
|
:aria-expanded="open ? 'true' : 'false'">
|
|
<span class="flex min-w-0 items-center gap-3">
|
|
<span
|
|
class="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-[5px]
|
|
border border-[color:var(--color-hub-soft-2)] bg-[color:var(--color-hub-soft)] text-[color:var(--color-hub)]">
|
|
<flux:icon.rocket-launch class="size-[17px]" />
|
|
</span>
|
|
<span class="min-w-0">
|
|
<span class="section-eyebrow">{{ __('Erste Schritte') }}</span>
|
|
<span class="mt-1 block text-[11.5px] leading-tight text-[color:var(--color-ink-3)]">
|
|
{{ __('In vier Schritten startklar — Schritt für Schritt, in Ihrem Tempo.') }}
|
|
</span>
|
|
</span>
|
|
</span>
|
|
|
|
<span class="flex flex-shrink-0 items-center gap-3">
|
|
<span class="badge {{ $allDone ? 'ok' : 'hub' }} dot">
|
|
{{ $completed }}/{{ $total }} {{ __('erledigt') }}
|
|
</span>
|
|
<flux:icon.chevron-down
|
|
class="size-[16px] text-[color:var(--color-ink-3)] transition-transform duration-200"
|
|
x-bind:class="open ? 'rotate-180' : ''" />
|
|
</span>
|
|
</button>
|
|
|
|
<div x-show="open" x-collapse x-cloak>
|
|
<div class="px-5 py-5">
|
|
{{-- Gesamtfortschritt --}}
|
|
<div class="mb-5 flex items-center gap-3">
|
|
<div class="h-[6px] flex-1 overflow-hidden rounded-full bg-[color:var(--color-bg-rule-2)]">
|
|
<span class="block h-full rounded-full bg-[color:var(--color-hub)] transition-[width] duration-500"
|
|
style="width: {{ max(3, $percent) }}%;"></span>
|
|
</div>
|
|
<span
|
|
class="font-mono text-[11px] font-semibold tabular-nums text-[color:var(--color-ink-2)]">{{ $percent }} %</span>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
@foreach ($steps as $step)
|
|
<a href="{{ $step['href'] }}" wire:navigate
|
|
@class([
|
|
'group relative flex items-start gap-3 rounded-[5px] border px-4 py-3.5 transition-colors',
|
|
'border-[color:var(--color-ok)]/30 bg-[color:var(--color-ok-soft)]' => $step['done'],
|
|
'border-[color:var(--color-bg-rule)] bg-[color:var(--color-bg-elev)] hover:border-[color:var(--color-hub)]/50' => ! $step['done'],
|
|
])>
|
|
<span
|
|
@class([
|
|
'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full font-mono text-[12px] font-bold',
|
|
'bg-[color:var(--color-ok)] text-white' => $step['done'],
|
|
'border border-[color:var(--color-hub-soft-2)] bg-[color:var(--color-hub-soft)] text-[color:var(--color-hub)]' => ! $step['done'],
|
|
])>
|
|
@if ($step['done'])
|
|
<flux:icon.check class="size-[16px]" />
|
|
@else
|
|
{{ $step['num'] }}
|
|
@endif
|
|
</span>
|
|
|
|
<span class="min-w-0 flex-1">
|
|
<span
|
|
@class([
|
|
'block text-[13px] font-semibold leading-tight',
|
|
'text-[color:var(--color-ink-2)]' => $step['done'],
|
|
'text-[color:var(--color-ink)]' => ! $step['done'],
|
|
])>
|
|
{{ $step['title'] }}
|
|
</span>
|
|
<span class="mt-1 block text-[11.5px] leading-[1.5] text-[color:var(--color-ink-3)]">
|
|
{{ $step['description'] }}
|
|
</span>
|
|
|
|
@if ($step['done'])
|
|
<span
|
|
class="mt-2 inline-flex items-center gap-1 text-[11px] font-semibold text-[color:var(--color-ok)]">
|
|
<flux:icon.check-circle class="size-[13px]" /> {{ __('Erledigt') }}
|
|
</span>
|
|
@else
|
|
<span
|
|
class="mt-2 inline-flex items-center gap-1 text-[11.5px] font-semibold text-[color:var(--color-hub)] underline-offset-[3px] group-hover:underline">
|
|
{{ $step['action'] }} →
|
|
</span>
|
|
@endif
|
|
</span>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|