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>

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>