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

@@ -1,29 +1,70 @@
 <x-app-layout title="Tickets">
-    <div class="mb-6 flex items-center justify-between">
-        <h1 class="text-2xl font-semibold text-slate-900 dark:text-white">Tickets</h1>
-        @if(app(\App\Services\Qms\QmsPermissions::class)->can(app(\App\Services\Qms\OrganizationResolver::class)->memberFor(auth()->user()), 'tickets.issue'))
-            <a href="{{ route('qms.tickets.create') }}" class="btn-primary">Issue ticket</a>
-        @endif
+  <div class="flex flex-wrap items-start justify-between gap-4">
+    <div>
+      <h1 class="text-xl font-semibold text-slate-900">Tickets</h1>
+      <p class="mt-1 text-sm text-slate-500">Live and historical queue tickets across all service lines</p>
     </div>
-    <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">
-        <table class="min-w-full divide-y divide-slate-200 dark:divide-slate-700">
-            <thead class="bg-slate-50 dark:bg-slate-800"><tr>
-                <th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Ticket</th>
-                <th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Queue</th>
-                <th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Status</th>
-                <th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Issued</th>
-            </tr></thead>
-            <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
-                @foreach ($tickets as $ticket)
-                    <tr>
-                        <td class="px-4 py-3"><a href="{{ route('qms.tickets.show', $ticket) }}" class="font-mono font-semibold text-indigo-600">{{ $ticket->ticket_number }}</a></td>
-                        <td class="px-4 py-3 text-sm">{{ $ticket->serviceQueue?->name }}</td>
-                        <td class="px-4 py-3 text-sm capitalize">{{ str_replace('_', ' ', $ticket->status) }}</td>
-                        <td class="px-4 py-3 text-sm text-slate-500">{{ $ticket->issued_at?->format('M j, H:i') }}</td>
-                    </tr>
-                @endforeach
-            </tbody>
-        </table>
-        <div class="border-t px-4 py-3">{{ $tickets->links() }}</div>
+    @if(app(\App\Services\Qms\QmsPermissions::class)->can(app(\App\Services\Qms\OrganizationResolver::class)->memberFor(auth()->user()), 'tickets.issue'))
+      <a href="{{ route('qms.tickets.create') }}" class="btn-primary">Issue ticket</a>
+    @endif
+  </div>
+
+  <form method="GET" class="mt-5 flex flex-wrap items-end gap-3">
+    <div>
+      <label class="block text-xs font-medium uppercase tracking-wide text-slate-500">Queue</label>
+      <select name="queue" class="mt-1 rounded-lg border-slate-300 text-sm">
+        <option value="">All queues</option>
+        @foreach ($queues as $queue)
+          <option value="{{ $queue->uuid }}" @selected(request('queue') === $queue->uuid)>{{ $queue->name }}</option>
+        @endforeach
+      </select>
     </div>
+    <div>
+      <label class="block text-xs font-medium uppercase tracking-wide text-slate-500">Status</label>
+      <select name="status" class="mt-1 rounded-lg border-slate-300 text-sm">
+        <option value="">All statuses</option>
+        @foreach (config('qms.ticket_statuses') as $value => $label)
+          <option value="{{ $value }}" @selected(request('status') === $value)>{{ $label }}</option>
+        @endforeach
+      </select>
+    </div>
+    <button type="submit" class="btn-secondary text-sm">Filter</button>
+    @if (request()->hasAny(['queue', 'status']))
+      <a href="{{ route('qms.tickets.index') }}" class="text-sm text-slate-500 hover:text-slate-700">Clear</a>
+    @endif
+  </form>
+
+  <div class="mt-4 overflow-hidden rounded-2xl border border-slate-200 bg-white">
+    @if ($tickets->isEmpty())
+      <x-empty-state title="No tickets match your filters" description="Issue a walk-in ticket or adjust filters to see results." />
+    @else
+      <table class="min-w-full divide-y divide-slate-100 text-sm">
+        <thead class="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500">
+          <tr>
+            <th class="px-4 py-3">Ticket</th>
+            <th class="px-4 py-3">Customer</th>
+            <th class="px-4 py-3">Queue</th>
+            <th class="px-4 py-3">Counter</th>
+            <th class="px-4 py-3">Status</th>
+            <th class="px-4 py-3">Issued</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-slate-50">
+          @foreach ($tickets as $ticket)
+            <tr class="hover:bg-slate-50/80">
+              <td class="px-4 py-3">
+                <a href="{{ route('qms.tickets.show', $ticket) }}" class="font-mono text-base font-semibold text-indigo-700 hover:underline">{{ $ticket->ticket_number }}</a>
+              </td>
+              <td class="px-4 py-3 text-slate-700">{{ $ticket->customer_name ?: 'Walk-in' }}</td>
+              <td class="px-4 py-3 text-slate-600">{{ $ticket->serviceQueue?->name }}</td>
+              <td class="px-4 py-3 text-slate-600">{{ $ticket->counter?->name ?? '—' }}</td>
+              <td class="px-4 py-3"><x-ticket-status :status="$ticket->status" /></td>
+              <td class="px-4 py-3 text-slate-500">{{ $ticket->issued_at?->format('M j, H:i') }}</td>
+            </tr>
+          @endforeach
+        </tbody>
+      </table>
+      <div class="border-t border-slate-200 px-4 py-3">{{ $tickets->links() }}</div>
+    @endif
+  </div>
 </x-app-layout>