87 lines
5.0 KiB
PHP
87 lines
5.0 KiB
PHP
<div wire:poll.15s>
|
|
<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">
|
|
{{-- warnings — only what needs attention --}}
|
|
@if (count($warnings) > 0)
|
|
<x-panel :title="__('dashboard.warnings_title')" class="reveal">
|
|
<x-slot:actions>
|
|
<x-badge variant="warning">{{ count($warnings) }}</x-badge>
|
|
</x-slot:actions>
|
|
<div class="flex flex-col gap-2">
|
|
@foreach ($warnings as $w)
|
|
<div class="flex items-center gap-3 rounded-lg border border-line-soft bg-raised px-3 py-2.5">
|
|
<span @class([
|
|
'grid place-items-center w-8 h-8 rounded-lg shrink-0',
|
|
'text-offline bg-offline/10' => $w['level'] === 'offline',
|
|
'text-warning bg-warning/10' => $w['level'] !== 'offline',
|
|
])>
|
|
<x-icon :name="$w['icon']" :size="16" />
|
|
</span>
|
|
<div class="min-w-0">
|
|
<div class="text-[13px] font-semibold text-ink truncate">{{ $w['title'] }}</div>
|
|
@if ($w['meta'])
|
|
<div class="text-[11.5px] text-ink-3">{{ $w['meta'] }}</div>
|
|
@endif
|
|
</div>
|
|
@if ($w['link'])
|
|
<a href="{{ $w['link'] }}" wire:navigate class="ml-auto shrink-0 text-ink-3 hover:text-ink transition-colors">
|
|
<x-icon name="chevron" :size="16" />
|
|
</a>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</x-panel>
|
|
@else
|
|
<section class="relative overflow-hidden rounded-card border border-line-soft bg-online/10 reveal">
|
|
<span class="absolute inset-y-0 left-0 w-[3px] bg-online"></span>
|
|
<div class="flex items-center gap-3.5 p-4 pl-5">
|
|
<span class="grid place-items-center w-10 h-10 rounded-lg bg-base/40 text-online shrink-0">
|
|
<x-icon name="check" :size="20" />
|
|
</span>
|
|
<div>
|
|
<h2 class="text-[15px] font-bold text-ink">{{ __('dashboard.all_clear_title') }}</h2>
|
|
<p class="text-[12.5px] text-ink-2">{{ __('dashboard.all_clear_body') }}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
{{-- 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 ($rooms as $room)
|
|
<x-panel :title="$room->name" class="reveal">
|
|
<div class="flex flex-col divide-y divide-line-soft -my-1">
|
|
@foreach ($room->devices as $device)
|
|
<div class="flex flex-col gap-2 py-3 first:pt-1 last:pb-1">
|
|
<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>
|
|
</div>
|
|
<div class="flex flex-wrap gap-1.5">
|
|
@foreach ($device->entities as $entity)
|
|
<x-entity-state :entity="$entity" />
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</x-panel>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|