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

@@ -1,72 +1,107 @@
 <x-app-layout title="Staff console · {{ $counter->name }}">
-    <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
-        <div>
-            <h1 class="text-2xl font-semibold text-slate-900 dark:text-white">{{ $counter->name }}</h1>
-            <p class="text-sm text-slate-600 dark:text-slate-400">{{ $counter->branch?->name }} · Status: {{ config('qms.counter_statuses.'.$counter->status, $counter->status) }}</p>
-        </div>
-        <div class="flex gap-2">
-            <form method="POST" action="{{ route('qms.console.action', $counter) }}">@csrf<input type="hidden" name="action" value="available"><button class="btn-secondary">Available</button></form>
-            <form method="POST" action="{{ route('qms.console.action', $counter) }}">@csrf<input type="hidden" name="action" value="offline"><button class="btn-secondary">Go offline</button></form>
-        </div>
+  <div class="flex flex-wrap items-start justify-between gap-4">
+    <div>
+      <a href="{{ route('qms.counters.show', $counter) }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">← {{ $counter->name }}</a>
+      <h1 class="mt-2 text-xl font-semibold text-slate-900">Staff console</h1>
+      <p class="mt-1 text-sm text-slate-500">{{ $counter->branch?->name }}</p>
     </div>
+    <div class="flex flex-wrap items-center gap-2">
+      <x-counter-status :status="$counter->status" />
+      <form method="POST" action="{{ route('qms.console.action', $counter) }}">@csrf<input type="hidden" name="action" value="available"><button class="btn-secondary text-sm">Mark available</button></form>
+      <form method="POST" action="{{ route('qms.console.action', $counter) }}">@csrf<input type="hidden" name="action" value="offline"><button class="btn-secondary text-sm">Go offline</button></form>
+    </div>
+  </div>
 
-    @if ($currentTicket)
-        <div class="mb-8 rounded-2xl border-2 border-indigo-200 bg-indigo-50 p-6 dark:border-indigo-800 dark:bg-indigo-950">
-            <p class="text-sm font-medium text-indigo-700 dark:text-indigo-300">Current customer</p>
-            <p class="mt-1 text-4xl font-bold text-indigo-900 dark:text-white">{{ $currentTicket->ticket_number }}</p>
-            <p class="mt-1 text-slate-600 dark:text-slate-400">{{ $currentTicket->serviceQueue?->name }} · {{ $currentTicket->customer_name }}</p>
-            <div class="mt-4 flex flex-wrap gap-2">
-                @foreach (['recall' => 'Recall', 'start' => 'Start serving', 'hold' => 'Hold', 'skip' => 'Skip', 'complete' => 'Complete', 'no_show' => 'No show'] as $action => $label)
-                    <form method="POST" action="{{ route('qms.console.action', $counter) }}">
-                        @csrf
-                        <input type="hidden" name="action" value="{{ $action }}">
-                        <input type="hidden" name="ticket_id" value="{{ $currentTicket->id }}">
-                        <button type="submit" class="btn-secondary text-sm">{{ $label }}</button>
-                    </form>
+  @if ($currentTicket)
+    <section class="mt-6 overflow-hidden rounded-2xl border border-indigo-200 bg-gradient-to-br from-indigo-50 via-white to-white shadow-sm">
+      <div class="border-b border-indigo-100 px-6 py-4">
+        <p class="text-xs font-semibold uppercase tracking-wider text-indigo-600">Current customer</p>
+      </div>
+      <div class="px-6 py-5">
+        <div class="flex flex-wrap items-start justify-between gap-4">
+          <div>
+            <p class="text-5xl font-bold tracking-tight text-slate-900">{{ $currentTicket->ticket_number }}</p>
+            <p class="mt-2 text-sm text-slate-600">{{ $currentTicket->serviceQueue?->name }}</p>
+            <p class="mt-1 text-base font-medium text-slate-800">{{ $currentTicket->customer_name ?: 'Walk-in customer' }}</p>
+          </div>
+          <x-ticket-status :status="$currentTicket->status" class="text-sm" />
+        </div>
+
+        <div class="mt-6 grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+          @foreach ([
+            'recall' => ['Recall', 'btn-secondary'],
+            'start' => ['Start serving', 'btn-primary'],
+            'hold' => ['Hold', 'btn-secondary'],
+            'skip' => ['Skip', 'btn-secondary'],
+            'complete' => ['Complete', 'btn-primary'],
+            'no_show' => ['No show', 'btn-secondary'],
+          ] as $action => [$label, $btnClass])
+            <form method="POST" action="{{ route('qms.console.action', $counter) }}">
+              @csrf
+              <input type="hidden" name="action" value="{{ $action }}">
+              <input type="hidden" name="ticket_id" value="{{ $currentTicket->id }}">
+              <button type="submit" class="{{ $btnClass }} w-full text-sm">{{ $label }}</button>
+            </form>
+          @endforeach
+        </div>
+
+        @if ($allQueues->count() > 1)
+          <form method="POST" action="{{ route('qms.console.action', $counter) }}" class="mt-4 flex flex-wrap items-end gap-2 border-t border-indigo-100 pt-4">
+            @csrf
+            <input type="hidden" name="action" value="transfer">
+            <input type="hidden" name="ticket_id" value="{{ $currentTicket->id }}">
+            <div class="min-w-[12rem] flex-1">
+              <label class="block text-xs font-medium text-slate-500">Transfer to queue</label>
+              <select name="to_queue_id" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
+                @foreach ($allQueues as $q)
+                  @if ($q->id !== $currentTicket->service_queue_id)
+                    <option value="{{ $q->id }}">{{ $q->name }}</option>
+                  @endif
                 @endforeach
+              </select>
             </div>
-            @if ($allQueues->count() > 1)
-                <form method="POST" action="{{ route('qms.console.action', $counter) }}" class="mt-4 flex flex-wrap items-end gap-2">
-                    @csrf
-                    <input type="hidden" name="action" value="transfer">
-                    <input type="hidden" name="ticket_id" value="{{ $currentTicket->id }}">
-                    <select name="to_queue_id" class="rounded-lg border-slate-300 text-sm">
-                        @foreach ($allQueues as $q)
-                            @if ($q->id !== $currentTicket->service_queue_id)
-                                <option value="{{ $q->id }}">{{ $q->name }}</option>
-                            @endif
-                        @endforeach
-                    </select>
-                    <input type="text" name="reason" placeholder="Reason" class="rounded-lg border-slate-300 text-sm">
-                    <button type="submit" class="btn-secondary text-sm">Transfer</button>
-                </form>
-            @endif
-        </div>
-    @endif
+            <div class="min-w-[12rem] flex-1">
+              <label class="block text-xs font-medium text-slate-500">Reason (optional)</label>
+              <input type="text" name="reason" placeholder="e.g. Specialist required" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
+            </div>
+            <button type="submit" class="btn-secondary text-sm">Transfer ticket</button>
+          </form>
+        @endif
+      </div>
+    </section>
+  @else
+    <section class="mt-6 rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-6 py-10 text-center">
+      <p class="text-sm font-medium text-slate-700">No active customer</p>
+      <p class="mt-1 text-sm text-slate-500">Call the next waiting ticket from a queue below.</p>
+    </section>
+  @endif
 
-    <div class="grid gap-6 lg:grid-cols-2">
-        @foreach ($queues as $queue)
-            <div class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-700 dark:bg-slate-900">
-                <div class="mb-4 flex items-center justify-between">
-                    <h2 class="font-semibold text-slate-900 dark:text-white">{{ $queue->name }}</h2>
-                    <form method="POST" action="{{ route('qms.console.action', $counter) }}">
-                        @csrf
-                        <input type="hidden" name="action" value="call_next">
-                        <input type="hidden" name="queue_id" value="{{ $queue->id }}">
-                        <button type="submit" class="btn-primary text-sm">Call next</button>
-                    </form>
-                </div>
-                <ul class="space-y-2">
-                    @forelse ($waitingByQueue[$queue->id] ?? [] as $ticket)
-                        <li class="flex justify-between rounded-lg bg-slate-50 px-3 py-2 text-sm dark:bg-slate-800">
-                            <span class="font-mono font-semibold">{{ $ticket->ticket_number }}</span>
-                            <span class="text-slate-500">{{ $ticket->customer_name ?? 'Walk-in' }}</span>
-                        </li>
-                    @empty
-                        <li class="text-sm text-slate-500">No one waiting</li>
-                    @endforelse
-                </ul>
-            </div>
-        @endforeach
-    </div>
+  <div class="mt-6 grid gap-4 lg:grid-cols-2">
+    @foreach ($queues as $queue)
+      <section class="rounded-2xl border border-slate-200 bg-white shadow-sm">
+        <div class="flex items-center justify-between border-b border-slate-100 px-5 py-4">
+          <div>
+            <h2 class="font-semibold text-slate-900">{{ $queue->name }}</h2>
+            <p class="text-xs text-slate-500">{{ count($waitingByQueue[$queue->id] ?? []) }} waiting</p>
+          </div>
+          <form method="POST" action="{{ route('qms.console.action', $counter) }}">
+            @csrf
+            <input type="hidden" name="action" value="call_next">
+            <input type="hidden" name="queue_id" value="{{ $queue->id }}">
+            <button type="submit" class="btn-primary text-sm">Call next</button>
+          </form>
+        </div>
+        <ul class="divide-y divide-slate-50 px-2 py-2">
+          @forelse ($waitingByQueue[$queue->id] ?? [] as $ticket)
+            <li class="flex items-center justify-between rounded-lg px-3 py-2.5 text-sm hover:bg-slate-50">
+              <span class="font-mono text-base font-semibold text-slate-900">{{ $ticket->ticket_number }}</span>
+              <span class="text-slate-500">{{ $ticket->customer_name ?? 'Walk-in' }}</span>
+            </li>
+          @empty
+            <li class="px-3 py-6 text-center text-sm text-slate-500">Queue is empty</li>
+          @endforelse
+        </ul>
+      </section>
+    @endforeach
+  </div>
 </x-app-layout>