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/show.blade.php

@@ -1,14 +1,55 @@
 <x-app-layout :title="$counter->name">
-    <div class="mb-6 flex justify-between">
-        <div>
-            <a href="{{ route('qms.counters.index') }}" class="text-sm text-indigo-600">← Counters</a>
-            <h1 class="mt-2 text-2xl font-semibold">{{ $counter->name }}</h1>
-        </div>
-        <div class="flex gap-2">
-            <a href="{{ route('qms.counters.edit', $counter) }}" class="btn-secondary">Edit</a>
-            <a href="{{ route('qms.console.show', $counter) }}" class="btn-primary">Open console</a>
-        </div>
+  <div class="flex flex-wrap items-start justify-between gap-4">
+    <div>
+      <a href="{{ route('qms.counters.index') }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">← Counters</a>
+      <div class="mt-2 flex flex-wrap items-center gap-3">
+        <h1 class="text-xl font-semibold text-slate-900">{{ $counter->name }}</h1>
+        <x-counter-status :status="$counter->status" />
+      </div>
+      <p class="mt-1 text-sm text-slate-500">{{ $counter->branch?->name }} · {{ $counter->code ?: 'No desk code' }}</p>
     </div>
-    <p class="text-sm text-slate-600">Status: {{ $counter->status }} · {{ $counter->branch?->name }}</p>
-    <p class="mt-2 text-sm">Queues: {{ $counter->serviceQueues->pluck('name')->join(', ') ?: '—' }}</p>
+    <div class="flex flex-wrap gap-2">
+      @if ($canManage)
+        <a href="{{ route('qms.counters.edit', $counter) }}" class="btn-secondary">Edit counter</a>
+      @endif
+      <a href="{{ route('qms.console.show', $counter) }}" class="btn-primary">Open console</a>
+    </div>
+  </div>
+
+  <div class="mt-6 grid gap-4 lg:grid-cols-3">
+  <section class="rounded-2xl border border-slate-200 bg-white p-5 lg:col-span-2">
+    <h2 class="text-sm font-semibold text-slate-900">Assigned queues</h2>
+    @if ($counter->serviceQueues->isEmpty())
+      <p class="mt-3 text-sm text-slate-500">No queues linked yet. Edit this counter to assign service queues.</p>
+    @else
+      <ul class="mt-4 space-y-3">
+        @foreach ($counter->serviceQueues as $queue)
+          <li class="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50 px-4 py-3">
+            <div>
+              <p class="font-medium text-slate-900">{{ $queue->name }}</p>
+              <p class="text-xs text-slate-500">Prefix {{ $queue->prefix }}</p>
+            </div>
+            <span class="rounded-full bg-white px-2.5 py-1 text-xs font-medium text-slate-600 ring-1 ring-slate-200">
+              {{ $waitingCounts[$queue->id] ?? 0 }} waiting
+            </span>
+          </li>
+        @endforeach
+      </ul>
+    @endif
+  </section>
+
+  <section class="rounded-2xl border border-slate-200 bg-white p-5">
+    <h2 class="text-sm font-semibold text-slate-900">Now at this counter</h2>
+    @if ($currentTicket)
+      <div class="mt-4 rounded-xl bg-indigo-50 p-4 ring-1 ring-indigo-100">
+        <p class="text-3xl font-bold tracking-tight text-indigo-900">{{ $currentTicket->ticket_number }}</p>
+        <p class="mt-1 text-sm text-indigo-800">{{ $currentTicket->serviceQueue?->name }}</p>
+        <p class="mt-1 text-sm text-slate-600">{{ $currentTicket->customer_name ?: 'Walk-in' }}</p>
+        <div class="mt-3"><x-ticket-status :status="$currentTicket->status" /></div>
+      </div>
+    @else
+      <p class="mt-4 text-sm text-slate-500">No customer is being served. Open the console to call the next ticket.</p>
+    @endif
+  </section>
+  </div>
 </x-app-layout>