Faster voice announcements, Care/Frontdesk API, and console UI polish.

Poll displays every 1.2s with client-side TTS ack; expose service API for sibling apps; redesign tickets, counters, and staff console.

Co-authored-by: Cursor <cursoragent@cursor.com>

resources/views/qms/counters/index.blade.php

@@ -1,20 +1,42 @@
 <x-app-layout title="Counters">
-    <div class="mb-6 flex justify-between">
-        <h1 class="text-2xl font-semibold">Counters</h1>
-        <a href="{{ route('qms.counters.create') }}" class="btn-primary">New counter</a>
-    </div>
-    <div class="grid gap-4 md:grid-cols-2">
-        @foreach ($counters as $counter)
-            <div class="rounded-2xl border bg-white p-5 dark:border-slate-700 dark:bg-slate-900">
-                <div class="flex justify-between">
-                    <h2 class="font-semibold">{{ $counter->name }}</h2>
-                    <span class="text-sm capitalize">{{ $counter->status }}</span>
-                </div>
-                <p class="mt-1 text-sm text-slate-500">{{ $counter->branch?->name }}</p>
-                <p class="mt-2 text-sm">Queues: {{ $counter->serviceQueues->pluck('name')->join(', ') ?: '—' }}</p>
-                <a href="{{ route('qms.console.show', $counter) }}" class="btn-primary mt-4 inline-block text-sm">Open console</a>
-            </div>
-        @endforeach
+  <div class="flex flex-wrap items-start justify-between gap-4">
+    <div>
+      <h1 class="text-xl font-semibold text-slate-900">Counters</h1>
+      <p class="mt-1 text-sm text-slate-500">Service desks and windows where staff call and serve tickets</p>
     </div>
+    <a href="{{ route('qms.counters.create') }}" class="btn-primary">New counter</a>
+  </div>
+
+  <div class="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+    @forelse ($counters as $counter)
+      <article class="flex flex-col rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+        <div class="flex items-start justify-between gap-3">
+          <div>
+            <a href="{{ route('qms.counters.show', $counter) }}" class="text-lg font-semibold text-slate-900 hover:text-indigo-700">{{ $counter->name }}</a>
+            <p class="mt-1 text-sm text-slate-500">{{ $counter->branch?->name }}</p>
+          </div>
+          <x-counter-status :status="$counter->status" />
+        </div>
+        <p class="mt-4 text-sm text-slate-600">
+          <span class="font-medium text-slate-700">Queues:</span>
+          {{ $counter->serviceQueues->pluck('name')->join(', ') ?: 'None assigned' }}
+        </p>
+        <div class="mt-5 flex gap-2">
+          <a href="{{ route('qms.console.show', $counter) }}" class="btn-primary flex-1 text-center text-sm">Open console</a>
+          <a href="{{ route('qms.counters.show', $counter) }}" class="btn-secondary text-sm">Details</a>
+        </div>
+      </article>
+    @empty
+      <div class="col-span-full">
+        <x-empty-state title="No counters yet" description="Create a counter for each service desk or teller window.">
+          <x-slot:action>
+            <a href="{{ route('qms.counters.create') }}" class="btn-primary">Create your first counter</a>
+          </x-slot:action>
+        </x-empty-state>
+      </div>
+    @endforelse
+  </div>
+  @if ($counters->hasPages())
     <div class="mt-4">{{ $counters->links() }}</div>
+  @endif
 </x-app-layout>