81 lines
4.9 KiB
PHP
81 lines
4.9 KiB
PHP
<div class="space-y-5">
|
||
<div class="flex flex-wrap items-center gap-x-4 gap-y-1 animate-rise">
|
||
<h1 class="text-2xl font-semibold tracking-tight text-ink">{{ __('admin.overview_title') }}</h1>
|
||
<span class="ml-auto inline-flex items-center gap-2 rounded-pill bg-success-bg px-3.5 py-1.5 text-xs font-semibold text-success">
|
||
<span class="size-2 rounded-pill bg-success-bright" aria-hidden="true"></span>{{ __('admin.systems_ok') }}
|
||
</span>
|
||
<p class="w-full text-sm text-muted">{{ __('admin.overview_sub') }}</p>
|
||
</div>
|
||
|
||
{{-- KPI row --}}
|
||
@php $kd = ['[animation-delay:40ms]', '[animation-delay:80ms]', '[animation-delay:120ms]', '[animation-delay:160ms]']; @endphp
|
||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
|
||
@foreach ($kpis as $i => $kpi)
|
||
<div class="rounded-xl border border-line bg-surface p-5 shadow-xs animate-rise {{ $kd[$i] ?? '' }}">
|
||
<p class="text-xs font-semibold uppercase tracking-wide text-faint">{{ $kpi['label'] }}</p>
|
||
<p class="mt-2 flex items-baseline gap-2">
|
||
<span class="font-mono text-2xl font-semibold text-ink">{{ $kpi['value'] }}</span>
|
||
@isset($kpi['delta'])<span class="font-mono text-xs font-semibold text-success">{{ $kpi['delta'] }}</span>@endisset
|
||
</p>
|
||
@isset($kpi['sub'])<p class="mt-1 text-xs text-muted">{{ $kpi['sub'] }}</p>@endisset
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
|
||
{{-- Charts --}}
|
||
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||
<div class="rounded-xl border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:60ms] lg:col-span-2">
|
||
<h2 class="font-semibold text-ink">{{ __('admin.fleet_growth') }}</h2>
|
||
<p class="text-sm text-muted">{{ __('admin.fleet_growth_sub') }}</p>
|
||
<div class="mt-4 h-56" wire:ignore><x-ui.chart :config="$fleetChart" class="h-56" :label="__('admin.fleet_growth')" /></div>
|
||
</div>
|
||
<div class="rounded-xl border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:120ms]">
|
||
<h2 class="font-semibold text-ink">{{ __('admin.host_load') }}</h2>
|
||
<p class="text-sm text-muted">{{ __('admin.host_load_sub') }}</p>
|
||
<div class="mt-4 h-56" wire:ignore><x-ui.chart :config="$hostChart" class="h-56" :label="__('admin.host_load')" /></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||
<div class="rounded-xl border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:60ms] lg:col-span-2">
|
||
<h2 class="font-semibold text-ink">{{ __('admin.mrr_trend') }}</h2>
|
||
<div class="mt-3 h-52" wire:ignore><x-ui.chart :config="$revenueChart" class="h-52" :label="__('admin.mrr_trend')" /></div>
|
||
</div>
|
||
|
||
<div class="flex flex-col gap-4">
|
||
{{-- Active runs --}}
|
||
<div class="rounded-xl border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:120ms]">
|
||
<div class="flex items-center">
|
||
<h2 class="font-semibold text-ink">{{ __('admin.active_runs') }}</h2>
|
||
<a href="{{ route('admin.provisioning') }}" class="ml-auto text-xs font-semibold text-accent-text hover:underline">{{ __('admin.view_all') }} ›</a>
|
||
</div>
|
||
<ul class="mt-2 divide-y divide-line">
|
||
@foreach ($runs as $r)
|
||
<li class="flex items-center gap-3 py-2.5 text-sm">
|
||
<span class="size-2 shrink-0 rounded-pill bg-info animate-pulse" aria-hidden="true"></span>
|
||
<div class="min-w-0 flex-1">
|
||
<p class="truncate font-medium text-ink">{{ $r['customer'] }}</p>
|
||
<p class="font-mono text-xs text-muted">{{ $r['step'] }}</p>
|
||
</div>
|
||
<x-ui.badge status="provisioning">{{ __('admin.state_running') }}</x-ui.badge>
|
||
</li>
|
||
@endforeach
|
||
</ul>
|
||
</div>
|
||
|
||
{{-- Alerts --}}
|
||
<div class="rounded-xl border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:180ms]">
|
||
<h2 class="font-semibold text-ink">{{ __('admin.alerts') }}</h2>
|
||
<ul class="mt-2 space-y-2">
|
||
@foreach ($alerts as $a)
|
||
<li class="flex items-start gap-2.5 text-sm">
|
||
<x-ui.icon name="{{ $a['level'] === 'warning' ? 'alert-triangle' : 'bell' }}" class="mt-0.5 size-4 shrink-0 {{ $a['level'] === 'warning' ? 'text-warning' : 'text-info' }}" />
|
||
<span class="text-body">{{ $a['text'] }}</span>
|
||
</li>
|
||
@endforeach
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|