CluPilotCloud/resources/views/livewire/dashboard.blade.php

62 lines
2.7 KiB
PHP

<div class="space-y-6">
<div>
<h1 class="text-2xl font-semibold tracking-tight text-ink">{{ __('dashboard.title') }}</h1>
<p class="mt-1 text-sm text-muted">{{ __('dashboard.subtitle') }}</p>
</div>
{{-- KPI row: 1 2 4 (R7) --}}
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
<x-ui.stat-tile
:label="__('dashboard.kpi.storage')"
:value="$storageUsed"
:unit="'/ '.$storageQuota.' GB'"
:percent="$storagePercent"
:tone="$storageTone"
/>
<x-ui.stat-tile :label="__('dashboard.kpi.users')" :value="$activeUsers" />
<x-ui.stat-tile :label="__('dashboard.kpi.backup')" :value="$lastBackup" />
<x-ui.stat-tile :label="__('dashboard.kpi.uptime')" :value="$uptime" unit="%" />
</div>
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
{{-- Instance card --}}
<x-ui.card class="lg:col-span-2">
<div class="flex flex-wrap items-start justify-between gap-4">
<div>
<p class="text-xs font-semibold uppercase tracking-wide text-faint">{{ __('dashboard.instance') }}</p>
<p class="mt-1 font-mono text-sm text-ink">{{ $instanceUrl }}</p>
<div class="mt-2">
<x-ui.badge :status="$instanceStatus">{{ __('dashboard.status.'.$instanceStatus) }}</x-ui.badge>
</div>
</div>
<a
href="{{ $instanceUrl }}"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center justify-center gap-2 rounded bg-accent-active px-4 py-2.5 text-sm font-semibold text-on-accent transition hover:bg-accent-press"
>
<x-ui.icon name="external-link" class="size-4" />
{{ __('dashboard.open_cloud') }}
</a>
</div>
</x-ui.card>
{{-- Provisioning progress (live via Reverb once the engine lands) --}}
<x-ui.card :title="__('dashboard.provisioning')">
<x-ui.progress-stepper :steps="$steps" />
</x-ui.card>
</div>
{{-- Activity --}}
<x-ui.card :title="__('dashboard.activity')">
<ul class="divide-y divide-line">
@foreach ($activity as $item)
<li class="flex items-center justify-between py-2.5 text-sm">
<span class="text-body">{{ $item['label'] }}</span>
<span class="font-mono text-xs text-faint">{{ $item['time'] }}</span>
</li>
@endforeach
</ul>
</x-ui.card>
</div>