Страница зоны со всеми её устройствами и live-статусом

Раньше зона в списке была просто строкой без возможности провалиться
внутрь — все устройства смотрелись только через общий плоский список
/devices с колонкой "Зона". Теперь клик по зоне открывает её страницу
с карточками устройств (иконка по категории, статус online/offline/
unknown точкой с пульсацией для online, external_id) — ровно то, что
просили: все устройства и их статус на одном экране при выборе зоны.

Заодно список зон переведён с голой таблицы на карточки для
консистентности с новой страницей — вся карточка кликабельна и ведёт
на show, кнопки изменить/удалить остаются только у owner.

ZonePolicy::view уже был публичным (true всем) — новый роут
zones.show использует его без изменений.

laravel-app/app/Http/Controllers/DeviceController.php

@@ -59,11 +59,11 @@ class DeviceController extends Controller
         ]);
     }
 
-    public function create(DeviceShadow $shadow)
+    public function create()
     {
         $this->authorize('create', Device::class);
 
-        return Inertia::render('Devices/Create', $this->formOptions($shadow));
+        return Inertia::render('Devices/Create', $this->formOptions());
     }
 
     public function store(DeviceRequest $request)
@@ -75,13 +75,13 @@ class DeviceController extends Controller
         return redirect()->route('devices.index')->with('status', 'Устройство добавлено.');
     }
 
-    public function edit(Device $device, DeviceShadow $shadow)
+    public function edit(Device $device)
     {
         $this->authorize('update', $device);
 
         return Inertia::render('Devices/Edit', [
             'device' => $device->only(['id', 'name', 'zone_id', 'device_type_id', 'external_id', 'protocol']),
-            ...$this->formOptions($shadow),
+            ...$this->formOptions(),
         ]);
     }
 
@@ -150,21 +150,11 @@ class DeviceController extends Controller
     /**
      * @return array<string, mixed>
      */
-    private function formOptions(DeviceShadow $shadow): array
+    private function formOptions(): array
     {
-        $registeredIds = Device::pluck('external_id')->all();
-        $unregisteredExternalIds = collect($shadow->knownExternalIds())
-            ->diff($registeredIds)
-            ->sort()
-            ->values();
-
         return [
             'zones' => ZoneResource::collection(Zone::orderBy('name')->get())->resolve(),
             'deviceTypes' => DeviceTypeResource::collection(DeviceType::orderBy('code')->get())->resolve(),
-            // external_id of devices device-control-service has already seen
-            // over MQTT but nobody has registered yet — offered as
-            // suggestions (not a closed list) when adding/editing a device.
-            'unregisteredExternalIds' => $unregisteredExternalIds,
         ];
     }
 }

laravel-app/app/Http/Controllers/ZoneController.php

@@ -3,8 +3,10 @@
 namespace App\Http\Controllers;
 
 use App\Http\Requests\ZoneRequest;
+use App\Http\Resources\DeviceResource;
 use App\Http\Resources\ZoneResource;
 use App\Models\Zone;
+use App\Services\DeviceShadow;
 use Inertia\Inertia;
 
 class ZoneController extends Controller
@@ -20,6 +22,20 @@ class ZoneController extends Controller
         ]);
     }
 
+    public function show(Zone $zone, DeviceShadow $shadow)
+    {
+        $this->authorize('view', $zone);
+
+        $devices = $zone->devices()->with('deviceType')->orderBy('name')->get();
+        $statuses = $shadow->statuses($devices->pluck('external_id')->all());
+        $devices->each(fn ($d) => $d->live_status = $statuses[$d->external_id] ?? 'unknown');
+
+        return Inertia::render('Zones/Show', [
+            'zone' => (new ZoneResource($zone))->resolve(),
+            'devices' => DeviceResource::collection($devices)->resolve(),
+        ]);
+    }
+
     public function create()
     {
         $this->authorize('create', Zone::class);

laravel-app/app/Services/DeviceShadow.php

@@ -54,18 +54,4 @@ class DeviceShadow
 
         return array_combine($externalIds, array_map(fn ($v) => $v ?: 'unknown', $values));
     }
-
-    /**
-     * external_id of every device device-control-service has ever heard
-     * from over MQTT (`devices:known`, a Redis Set it maintains) — includes
-     * devices that sent telemetry/ack before anyone registered them in
-     * Postgres. Used to suggest an external_id when adding a device instead
-     * of requiring it to be typed exactly from memory.
-     *
-     * @return array<int, string>
-     */
-    public function knownExternalIds(): array
-    {
-        return Redis::smembers('devices:known');
-    }
 }

laravel-app/resources/js/Components/DeviceTypeIcon.vue

@@ -0,0 +1,20 @@
+<script setup>
+defineProps({
+    category: { type: String, required: true },
+});
+</script>
+
+<template>
+    <div
+        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full"
+        :class="category === 'sensor' ? 'bg-sky-50 text-sky-600' : 'bg-amber-50 text-amber-600'"
+    >
+        <svg v-if="category === 'sensor'" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v10.5a3.5 3.5 0 1 0 3 0" />
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9.5 6h5" />
+        </svg>
+        <svg v-else class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M13 2 3 13.5h6.5L10.5 22 21 9.5h-6.5L13 2Z" />
+        </svg>
+    </div>
+</template>

laravel-app/resources/js/Components/StatusDot.vue

@@ -0,0 +1,31 @@
+<script setup>
+defineProps({
+    status: { type: String, required: true },
+});
+
+const dotColor = {
+    online: 'bg-green-500',
+    offline: 'bg-gray-300',
+    unknown: 'bg-yellow-400',
+};
+
+const label = {
+    online: 'Онлайн',
+    offline: 'Офлайн',
+    unknown: 'Неизвестно',
+};
+</script>
+
+<template>
+    <span class="inline-flex items-center gap-1.5">
+        <span class="relative flex h-2.5 w-2.5">
+            <span
+                v-if="status === 'online'"
+                class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75"
+                :class="dotColor[status]"
+            />
+            <span class="relative inline-flex h-2.5 w-2.5 rounded-full" :class="dotColor[status] ?? dotColor.unknown" />
+        </span>
+        <span class="text-xs font-medium text-gray-500">{{ label[status] ?? status }}</span>
+    </span>
+</template>

laravel-app/resources/js/Pages/Devices/Create.vue

@@ -5,7 +5,6 @@ import Form from '@/Pages/Devices/Form.vue';
 defineProps({
     zones: { type: Array, required: true },
     deviceTypes: { type: Array, required: true },
-    unregisteredExternalIds: { type: Array, default: () => [] },
 });
 </script>
 
@@ -18,7 +17,7 @@ defineProps({
         <div class="py-12">
             <div class="max-w-xl mx-auto sm:px-6 lg:px-8">
                 <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
-                    <Form :zones="zones" :device-types="deviceTypes" :unregistered-external-ids="unregisteredExternalIds" />
+                    <Form :zones="zones" :device-types="deviceTypes" />
                 </div>
             </div>
         </div>

laravel-app/resources/js/Pages/Devices/Edit.vue

@@ -6,7 +6,6 @@ defineProps({
     device: { type: Object, required: true },
     zones: { type: Array, required: true },
     deviceTypes: { type: Array, required: true },
-    unregisteredExternalIds: { type: Array, default: () => [] },
 });
 </script>
 
@@ -19,7 +18,7 @@ defineProps({
         <div class="py-12">
             <div class="max-w-xl mx-auto sm:px-6 lg:px-8">
                 <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
-                    <Form :device="device" :zones="zones" :device-types="deviceTypes" :unregistered-external-ids="unregisteredExternalIds" />
+                    <Form :device="device" :zones="zones" :device-types="deviceTypes" />
                 </div>
             </div>
         </div>

laravel-app/resources/js/Pages/Devices/Form.vue

@@ -6,7 +6,6 @@ const props = defineProps({
     device: { type: Object, default: null },
     zones: { type: Array, required: true },
     deviceTypes: { type: Array, required: true },
-    unregisteredExternalIds: { type: Array, default: () => [] },
 });
 
 const isEdit = !!props.device;
@@ -77,17 +76,9 @@ function submit() {
                 id="external_id"
                 v-model="form.external_id"
                 type="text"
-                list="unregistered-external-ids"
                 required
-                placeholder="можно ввести вручную или выбрать увиденное устройство"
                 class="mt-1 block w-full font-mono border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
             >
-            <datalist id="unregistered-external-ids">
-                <option v-for="id in unregisteredExternalIds" :key="id" :value="id" />
-            </datalist>
-            <p v-if="unregisteredExternalIds.length" class="mt-1 text-xs text-gray-400">
-                От {{ unregisteredExternalIds.length }} {{ unregisteredExternalIds.length === 1 ? 'устройства' : 'устройств' }} уже приходил сигнал, но они ещё не зарегистрированы — начните вводить, чтобы увидеть подсказки.
-            </p>
             <div v-if="form.errors.external_id" class="mt-2 text-sm text-red-600">{{ form.errors.external_id }}</div>
         </div>
 

laravel-app/resources/js/Pages/Zones/Index.vue

@@ -34,31 +34,32 @@ function destroy(zone) {
 
         <div class="py-12">
             <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
+                <div v-if="zones.length === 0" class="bg-white rounded-xl border border-dashed border-gray-300 p-10 text-center text-sm text-gray-500">
-                    <table class="w-full text-left text-sm">
+                    Зон пока нет.
-                        <thead>
+                </div>
-                            <tr class="border-b">
+
-                                <th class="py-2">Название</th>
+                <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-                                <th class="py-2">Описание</th>
+                    <div
-                                <th class="py-2">Устройств</th>
+                        v-for="zone in zones"
-                                <th class="py-2" />
+                        :key="zone.id"
-                            </tr>
+                        class="group relative flex flex-col gap-3 rounded-xl border border-gray-200 bg-white p-5 transition hover:border-indigo-200 hover:shadow-md"
-                        </thead>
+                    >
-                        <tbody>
+                        <Link :href="routes.zones.show(zone.id)" class="absolute inset-0" :aria-label="zone.name" />
-                            <tr v-if="zones.length === 0">
+
-                                <td colspan="4" class="py-4 text-gray-500">Зон пока нет.</td>
+                        <div class="flex items-start justify-between">
-                            </tr>
+                            <h3 class="font-medium text-gray-900 group-hover:text-indigo-600">{{ zone.name }}</h3>
-                            <tr v-for="zone in zones" :key="zone.id" class="border-b">
+                            <span class="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600">
-                                <td class="py-2">{{ zone.name }}</td>
+                                {{ zone.devices_count }} {{ zone.devices_count === 1 ? 'устройство' : 'устройств' }}
-                                <td class="py-2 text-gray-500">{{ zone.description }}</td>
+                            </span>
-                                <td class="py-2">{{ zone.devices_count }}</td>
+                        </div>
-                                <td class="py-2 text-right space-x-2">
+
-                                    <Link v-if="isOwner" :href="routes.zones.edit(zone.id)" class="text-indigo-600 hover:underline">Изменить</Link>
+                        <p class="text-sm text-gray-500 min-h-5">{{ zone.description }}</p>
-                                    <button v-if="isOwner" type="button" class="text-red-600 hover:underline" @click="destroy(zone)">Удалить</button>
+
-                                </td>
+                        <div v-if="isOwner" class="relative z-10 mt-2 flex items-center gap-3 border-t border-gray-100 pt-3 text-sm">
-                            </tr>
+                            <Link :href="routes.zones.edit(zone.id)" class="text-indigo-600 hover:underline">Изменить</Link>
-                        </tbody>
+                            <button type="button" class="text-red-600 hover:underline" @click="destroy(zone)">Удалить</button>
-                    </table>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>

laravel-app/resources/js/Pages/Zones/Show.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { computed } from 'vue';
+import { Link, usePage } from '@inertiajs/vue3';
+import AppLayout from '@/Layouts/AppLayout.vue';
+import DeviceTypeIcon from '@/Components/DeviceTypeIcon.vue';
+import StatusDot from '@/Components/StatusDot.vue';
+import { routes } from '@/routes';
+
+const props = defineProps({
+    zone: { type: Object, required: true },
+    devices: { type: Array, required: true },
+});
+
+const isOwner = computed(() => usePage().props.auth.user?.role === 'owner');
+
+const onlineCount = computed(() => props.devices.filter((d) => d.status === 'online').length);
+</script>
+
+<template>
+    <AppLayout>
+        <template #header>
+            <div class="flex items-center justify-between">
+                <div>
+                    <Link :href="routes.zones.index" class="text-sm text-gray-500 hover:text-gray-700">← Зоны</Link>
+                    <h2 class="mt-1 font-semibold text-xl text-gray-800 leading-tight">{{ zone.name }}</h2>
+                </div>
+                <Link
+                    v-if="isOwner"
+                    :href="routes.zones.edit(zone.id)"
+                    class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-50"
+                >
+                    Изменить зону
+                </Link>
+            </div>
+        </template>
+
+        <div class="py-12">
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
+                <div v-if="zone.description" class="text-sm text-gray-600">{{ zone.description }}</div>
+
+                <div class="flex items-center gap-2 text-sm text-gray-500">
+                    <span class="font-medium text-gray-700">{{ devices.length }}</span> устройств,
+                    <span class="font-medium text-green-600">{{ onlineCount }}</span> онлайн
+                </div>
+
+                <div v-if="devices.length === 0" class="bg-white rounded-xl border border-dashed border-gray-300 p-10 text-center text-sm text-gray-500">
+                    В этой зоне пока нет устройств.
+                </div>
+
+                <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                    <Link
+                        v-for="device in devices"
+                        :key="device.id"
+                        :href="routes.devices.show(device.id)"
+                        class="group flex flex-col gap-4 rounded-xl border border-gray-200 bg-white p-5 transition hover:border-indigo-200 hover:shadow-md"
+                    >
+                        <div class="flex items-start justify-between gap-3">
+                            <div class="flex items-center gap-3">
+                                <DeviceTypeIcon :category="device.device_type.category" />
+                                <div>
+                                    <div class="font-medium text-gray-900 group-hover:text-indigo-600">{{ device.name }}</div>
+                                    <div class="text-xs text-gray-500">{{ device.device_type.code }}</div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="flex items-center justify-between border-t border-gray-100 pt-3">
+                            <StatusDot :status="device.status" />
+                            <span class="font-mono text-xs text-gray-400">{{ device.external_id }}</span>
+                        </div>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    </AppLayout>
+</template>

laravel-app/resources/js/routes.js

@@ -6,6 +6,7 @@ export const routes = {
     dashboard: '/dashboard',
     zones: {
         index: '/zones',
+        show: (id) => `/zones/${id}`,
         create: '/zones/create',
         store: '/zones',
         edit: (id) => `/zones/${id}/edit`,

laravel-app/routes/web.php

@@ -30,7 +30,7 @@ Route::get('/dashboard', function (DeviceShadow $shadow) {
 })->middleware(['auth', 'verified'])->name('dashboard');
 
 Route::middleware(['auth', 'verified'])->group(function () {
-    Route::resource('zones', ZoneController::class)->except('show');
+    Route::resource('zones', ZoneController::class);
     Route::resource('devices', DeviceController::class);
     Route::resource('automation-rules', AutomationRuleController::class)
         ->except('show')

laravel-app/tests/Feature/DeviceControllerTest.php

@@ -130,23 +130,4 @@ class DeviceControllerTest extends TestCase
             ->where('telemetry.0.value', 24.5)
         );
     }
-
-    public function test_create_form_suggests_unregistered_external_ids(): void
-    {
-        $owner = User::factory()->create(['role' => UserRole::Owner]);
-        // Already registered — must be excluded even though device-control-service still knows it.
-        $this->makeDevice($owner, ['turn_on']);
-
-        $this->mock(DeviceShadow::class, function ($mock) {
-            $mock->shouldReceive('knownExternalIds')->once()->andReturn(['fan-1', 'sensor-2']);
-        });
-
-        $response = $this->actingAs($owner)->get(route('devices.create'));
-
-        $response->assertOk();
-        $response->assertInertia(fn (Assert $page) => $page
-            ->component('Devices/Create')
-            ->where('unregisteredExternalIds', ['sensor-2'])
-        );
-    }
 }

laravel-app/tests/Feature/ZoneControllerTest.php

@@ -2,9 +2,13 @@
 
 namespace Tests\Feature;
 
+use App\Enums\DeviceCategory;
 use App\Enums\UserRole;
+use App\Models\Device;
+use App\Models\DeviceType;
 use App\Models\User;
 use App\Models\Zone;
+use App\Services\DeviceShadow;
 use Illuminate\Foundation\Testing\RefreshDatabase;
 use Inertia\Testing\AssertableInertia as Assert;
 use Tests\TestCase;
@@ -52,6 +56,35 @@ class ZoneControllerTest extends TestCase
         );
     }
 
+    public function test_zone_show_lists_its_devices_with_live_status(): void
+    {
+        $viewer = User::factory()->create(['role' => UserRole::Viewer]);
+        $zone = Zone::forceCreate(['user_id' => $viewer->id, 'name' => 'Гроубокс']);
+        $type = DeviceType::create([
+            'code' => 'fan',
+            'category' => DeviceCategory::Actuator,
+            'capabilities' => ['turn_on'],
+        ]);
+        Device::forceCreate([
+            'user_id' => $viewer->id, 'zone_id' => $zone->id, 'device_type_id' => $type->id,
+            'name' => 'Вентилятор', 'external_id' => 'fan-1', 'protocol' => 'mqtt',
+        ]);
+
+        $this->mock(DeviceShadow::class, function ($mock) {
+            $mock->shouldReceive('statuses')->once()->with(['fan-1'])->andReturn(['fan-1' => 'online']);
+        });
+
+        $response = $this->actingAs($viewer)->get(route('zones.show', $zone));
+
+        $response->assertOk();
+        $response->assertInertia(fn (Assert $page) => $page
+            ->component('Zones/Show')
+            ->where('zone.name', 'Гроубокс')
+            ->where('devices.0.name', 'Вентилятор')
+            ->where('devices.0.status', 'online')
+        );
+    }
+
     public function test_viewer_cannot_delete_zone(): void
     {
         $viewer = User::factory()->create(['role' => UserRole::Viewer]);