69 lines
4.3 KiB
PHP
69 lines
4.3 KiB
PHP
<div>
|
|
<x-topbar :title="__('dashboard.title')" :subtitle="__('dashboard.subtitle')" />
|
|
|
|
<div class="px-5 lg:px-[26px] py-6 flex flex-col gap-5 max-w-[1560px] mx-auto w-full">
|
|
{{-- stack facts --}}
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3 reveal">
|
|
<x-kpi :label="__('dashboard.stack_framework')" value="Laravel 13" icon="bolt" />
|
|
<x-kpi :label="__('dashboard.stack_database')" value="PG 17" :meta="'TimescaleDB'" icon="network" />
|
|
<x-kpi :label="__('dashboard.stack_realtime')" value="Reverb" :meta="'WebSocket'" icon="activity" />
|
|
<x-kpi :label="__('dashboard.stack_queue')" value="Redis" :meta="'Horizon'" icon="devices" />
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-[1fr_340px] gap-5 items-start">
|
|
{{-- welcome --}}
|
|
<x-panel class="reveal">
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex items-start gap-3">
|
|
<span class="logo-mark grid place-items-center w-11 h-11 rounded-[12px] text-accent shrink-0">
|
|
<x-icon name="dashboard" :size="22" />
|
|
</span>
|
|
<div class="flex flex-col gap-1">
|
|
<h2 class="text-base font-bold text-ink">{{ __('dashboard.welcome_title') }}</h2>
|
|
<p class="text-[13px] text-ink-2 leading-relaxed">{{ __('dashboard.welcome_body') }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-2 pt-1">
|
|
<x-status-pill state="online">
|
|
<x-status-dot state="online" class="!w-1.5 !h-1.5" /> {{ __('common.system_ok') }}
|
|
</x-status-pill>
|
|
<x-status-pill state="neutral">{{ __('dashboard.phase_label') }} · {{ __('dashboard.phase_value') }}</x-status-pill>
|
|
</div>
|
|
</div>
|
|
</x-panel>
|
|
|
|
{{-- design-system legend --}}
|
|
<x-panel :title="__('dashboard.legend_title')" class="reveal">
|
|
<div class="flex flex-col gap-4">
|
|
{{-- status colors --}}
|
|
<div class="flex flex-col gap-2">
|
|
<span class="text-[11px] font-semibold uppercase tracking-[0.08em] text-ink-3">{{ __('dashboard.legend_status') }}</span>
|
|
<div class="flex flex-col gap-1.5 text-[13px] text-ink-2">
|
|
<span class="flex items-center gap-2"><x-status-dot state="online" :pulse="true" /> {{ __('common.status_online') }}</span>
|
|
<span class="flex items-center gap-2"><x-status-dot state="warning" /> {{ __('common.status_warning') }}</span>
|
|
<span class="flex items-center gap-2"><x-status-dot state="offline" /> {{ __('common.status_offline') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- interactive toggle (verifies Livewire) --}}
|
|
<div class="flex items-center gap-3 border-t border-line-soft pt-3">
|
|
<span class="text-[13px] text-ink-2">{{ __('dashboard.demo_toggle') }}</span>
|
|
<x-toggle :on="$demoOn" wire:click="toggleDemo" :label="__('dashboard.demo_toggle')" class="ml-auto" />
|
|
<x-status-pill :state="$demoOn ? 'online' : 'neutral'">{{ $demoOn ? __('common.status_online') : __('common.status_offline') }}</x-status-pill>
|
|
</div>
|
|
|
|
{{-- device chips --}}
|
|
<div class="flex flex-col gap-2 border-t border-line-soft pt-3">
|
|
<span class="text-[11px] font-semibold uppercase tracking-[0.08em] text-ink-3">{{ __('dashboard.demo_chips') }}</span>
|
|
<div class="flex flex-wrap gap-1.5">
|
|
<x-device-chip state="online">Shelly Plus 1</x-device-chip>
|
|
<x-device-chip state="warning">BLU Door</x-device-chip>
|
|
<x-device-chip state="offline" :off="true">Plug S</x-device-chip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</x-panel>
|
|
</div>
|
|
</div>
|
|
</div>
|