47 lines
2.7 KiB
PHP
47 lines
2.7 KiB
PHP
<div wire:poll.15s>
|
|
<x-topbar :title="__('dashboard.title')" :subtitle="__('dashboard.subtitle')">
|
|
<x-slot:actions>
|
|
<button type="button" wire:click="$dispatch('openModal', { component: 'modals.warnings' })"
|
|
@class([
|
|
'inline-flex items-center gap-2 rounded-lg border px-2.5 py-1.5 text-[12px] font-semibold transition-colors',
|
|
'border-warning/30 bg-warning/10 text-warning hover:bg-warning/20' => $warningCount > 0,
|
|
'border-line-soft bg-raised text-ink-2 hover:text-ink' => $warningCount === 0,
|
|
])
|
|
aria-label="{{ __('dashboard.warnings_title') }}">
|
|
<x-icon name="alert" :size="15" />
|
|
<span class="hidden sm:inline">{{ __('dashboard.warnings_title') }}</span>
|
|
@if ($warningCount > 0)
|
|
<span class="font-mono tabular-nums rounded-full bg-warning/20 px-1.5 py-px text-[11px] leading-none">{{ $warningCount }}</span>
|
|
@endif
|
|
</button>
|
|
</x-slot:actions>
|
|
</x-topbar>
|
|
|
|
<div class="px-5 lg:px-[26px] py-6 flex flex-col gap-5 max-w-[1560px] mx-auto w-full">
|
|
{{-- home summary --}}
|
|
<div class="grid grid-cols-2 xl:grid-cols-4 gap-3 reveal">
|
|
<x-kpi :label="__('dashboard.kpi_devices_online')" :value="$summary['devices_online'].'/'.$summary['devices_total']" icon="devices" />
|
|
<x-kpi :label="__('dashboard.kpi_lights_on')" :value="$summary['lights_on']" icon="bolt" />
|
|
<x-kpi :label="__('dashboard.kpi_contacts_open')" :value="$summary['contacts_open']" icon="window" :warnEdge="$summary['contacts_open'] > 0" />
|
|
<x-kpi :label="__('dashboard.kpi_low_battery')" :value="$summary['low_battery']" icon="alert" :warnEdge="$summary['low_battery'] > 0" />
|
|
</div>
|
|
|
|
{{-- rooms + devices — a card per device, grouped by room --}}
|
|
<div class="flex flex-col gap-6">
|
|
@foreach ($groups as $group)
|
|
<div class="reveal">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<h2 class="text-[13px] font-bold text-ink-2 uppercase tracking-[0.08em]">{{ $group['name'] }}</h2>
|
|
<span class="font-mono tabular-nums text-[11px] text-ink-3">{{ count($group['devices']) }}</span>
|
|
</div>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
|
|
@foreach ($group['devices'] as $device)
|
|
<x-device-card :device="$device" />
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|