59 lines
3.7 KiB
PHP
59 lines
3.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 --}}
|
|
<div>
|
|
<h2 class="text-[13px] font-bold text-ink-2 uppercase tracking-[0.08em] mb-3">{{ __('dashboard.rooms_title') }}</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
|
|
@foreach ($groups as $group)
|
|
<x-panel :title="$group['name']" class="reveal">
|
|
<div class="flex flex-col divide-y divide-line-soft -my-1">
|
|
@foreach ($group['devices'] as $device)
|
|
<a href="{{ route('devices.show', $device) }}" wire:navigate
|
|
class="flex flex-col gap-2 py-3 first:pt-1 last:pb-1 -mx-4 px-4 hover:bg-raised/50 transition-colors">
|
|
<div class="flex items-center gap-2.5">
|
|
<x-status-dot :state="$device->isOnline() ? 'online' : 'offline'" :pulse="$device->isOnline()" />
|
|
<span class="text-[13px] font-semibold text-ink truncate">{{ $device->name }}</span>
|
|
<span class="ml-auto text-[11px] font-mono text-ink-3 truncate">{{ $device->model }}</span>
|
|
<x-icon name="chevron" :size="14" class="text-ink-3 shrink-0" />
|
|
</div>
|
|
<div class="flex flex-wrap gap-1.5">
|
|
@foreach ($device->entities as $entity)
|
|
<x-entity-state :entity="$entity" />
|
|
@endforeach
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</x-panel>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|