Replace ghost action links with shared btn components in Queue.

Aligns kiosk, appointment, queue, and admin destructive actions with the Frontdesk pill-button pattern.

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

resources/css/app.css

@@ -174,6 +174,119 @@ html.qr-mobile-page body {
         pointer-events: none;
     }
 
+    .btn-warning {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        border-radius: 9999px;
+        border: 1px solid rgb(252 211 77);
+        background-color: #fff;
+        padding: 0.5rem 1rem;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 600;
+        color: rgb(180 83 9);
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        transition: background-color 0.15s ease, border-color 0.15s ease;
+    }
+
+    .btn-warning:hover {
+        background-color: rgb(255 251 235);
+        border-color: rgb(245 158 11);
+    }
+
+    .btn-warning:disabled {
+        opacity: 0.6;
+        pointer-events: none;
+    }
+
+    .btn-danger {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        border-radius: 9999px;
+        border: 1px solid rgb(254 202 202);
+        background-color: #fff;
+        padding: 0.5rem 1rem;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 600;
+        color: rgb(185 28 28);
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        transition: background-color 0.15s ease, border-color 0.15s ease;
+    }
+
+    .btn-danger:hover {
+        background-color: rgb(254 242 242);
+        border-color: rgb(252 165 165);
+    }
+
+    .btn-danger:disabled {
+        opacity: 0.6;
+        pointer-events: none;
+    }
+
+    .btn-danger-plain {
+        padding: 0;
+        border: none;
+        background: transparent;
+        border-radius: 0;
+        box-shadow: none;
+        font-weight: 500;
+    }
+
+    .btn-danger-plain:hover {
+        background: transparent;
+        text-decoration: underline;
+    }
+
+    .btn-link {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.375rem;
+        border-radius: 9999px;
+        border: 1px solid transparent;
+        background-color: transparent;
+        padding: 0.5rem 0.75rem;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 600;
+        color: rgb(67 56 202);
+        transition: background-color 0.15s ease, color 0.15s ease;
+    }
+
+    .btn-link:hover {
+        background-color: rgb(238 242 255);
+        color: rgb(55 48 163);
+    }
+
+    .btn-link:disabled {
+        opacity: 0.6;
+        pointer-events: none;
+    }
+
+    .btn-link-plain {
+        padding: 0;
+        border: none;
+        background: transparent;
+        border-radius: 0;
+        font-weight: 500;
+    }
+
+    .btn-link-plain:hover {
+        background: transparent;
+        text-decoration: underline;
+    }
+
+    .btn-sm {
+        padding: 0.25rem 0.625rem;
+        font-size: 0.75rem;
+        line-height: 1rem;
+    }
+
     .btn-group {
         display: flex;
         flex-wrap: wrap;

resources/views/components/btn.blade.php

@@ -0,0 +1,34 @@
+@props([
+    'variant' => 'primary',
+    'href' => null,
+    'type' => 'button',
+    'size' => null,
+    'plain' => false,
+])
+
+@php
+    $tag = $href ? 'a' : 'button';
+
+    $variantClass = match ($variant) {
+        'secondary' => 'btn-secondary',
+        'warning' => 'btn-warning',
+        'danger' => 'btn-danger',
+        'link' => 'btn-link',
+        default => 'btn-primary',
+    };
+
+    $classes = collect([
+        $variantClass,
+        $size === 'sm' ? 'btn-sm' : null,
+        ($plain && $variant === 'link') ? 'btn-link-plain' : null,
+        ($plain && $variant === 'danger') ? 'btn-danger-plain' : null,
+    ])->filter()->implode(' ');
+@endphp
+
+<{{ $tag }}
+    @if ($href) href="{{ $href }}" @endif
+    @if ($tag === 'button') type="{{ $type }}" @endif
+    {{ $attributes->class([$classes]) }}
+>
+    {{ $slot }}
+</{{ $tag }}>

resources/views/components/danger-zone.blade.php

@@ -0,0 +1,12 @@
+@props([
+    'title' => null,
+])
+
+<div {{ $attributes->class(['mt-6 space-y-3 rounded-2xl border border-slate-200 bg-slate-50/80 p-4']) }}>
+    @if ($title)
+        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ $title }}</p>
+    @endif
+    <div class="flex flex-col items-start gap-2 sm:flex-row sm:flex-wrap sm:gap-3">
+        {{ $slot }}
+    </div>
+</div>

resources/views/qms/admin/members/index.blade.php

@@ -46,7 +46,7 @@
                             <td class="px-4 py-3 text-sm">{{ $member->branch?->name ?? 'All' }}</td>
                             <td class="px-4 py-3 text-right">
                                 @if ($member->user_ref !== auth()->user()->public_id)
-                                    <form method="POST" action="{{ route('qms.members.destroy', $member) }}">@csrf @method('DELETE')<button class="text-xs text-red-600">Remove</button></form>
+                                    <form method="POST" action="{{ route('qms.members.destroy', $member) }}">@csrf @method('DELETE')<x-btn type="submit" variant="danger" size="sm">Remove</x-btn></form>
                                 @endif
                             </td>
                         </tr>

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

@@ -45,11 +45,13 @@
                             <td class="px-4 py-3 text-sm capitalize">{{ str_replace('_', ' ', $appointment->status) }}</td>
                             <td class="px-4 py-3 text-right text-sm">
                                 @if ($appointment->status === 'scheduled')
-                                    <a href="{{ route('qms.appointments.edit', $appointment) }}" class="text-indigo-600">Edit</a>
-                                    <form method="POST" action="{{ route('qms.appointments.check-in', $appointment) }}" class="inline ml-2">@csrf<button class="text-indigo-600">Check in</button></form>
-                                    <form method="POST" action="{{ route('qms.appointments.cancel', $appointment) }}" class="inline ml-2">@csrf<button class="text-amber-600">Cancel</button></form>
+                                    <div class="btn-group justify-end">
+                                        <x-btn :href="route('qms.appointments.edit', $appointment)" variant="link" size="sm" plain>Edit</x-btn>
+                                        <form method="POST" action="{{ route('qms.appointments.check-in', $appointment) }}" class="inline">@csrf<x-btn type="submit" variant="link" size="sm">Check in</x-btn></form>
+                                        <form method="POST" action="{{ route('qms.appointments.cancel', $appointment) }}" class="inline">@csrf<x-btn type="submit" variant="warning" size="sm">Cancel</x-btn></form>
+                                    </div>
                                 @elseif ($appointment->ticket)
-                                    <a href="{{ route('qms.tickets.show', $appointment->ticket) }}" class="text-indigo-600">View ticket</a>
+                                    <x-btn :href="route('qms.tickets.show', $appointment->ticket)" variant="link" size="sm" plain>View ticket</x-btn>
                                 @endif
                             </td>
                         </tr>

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

@@ -60,15 +60,17 @@
                                 </td>
                                 <td class="px-4 py-3 text-slate-600">{{ $device->branch?->name ?? '—' }}</td>
                                 <td class="px-4 py-3 text-right">
-                                    @if ($device->type === 'kiosk' && $device->device_token)
-                                        <a href="{{ route('qms.kiosk.device', $device->device_token) }}" target="_blank" class="text-indigo-700 hover:underline">Open kiosk</a>
-                                    @endif
-                                    @if ($canManage)
-                                        <form method="POST" action="{{ route('qms.devices.regenerate-token', $device) }}" class="ml-3 inline">
-                                            @csrf
-                                            <button type="submit" class="text-indigo-700 hover:underline">Regenerate token</button>
-                                        </form>
-                                    @endif
+                                    <div class="btn-group justify-end">
+                                        @if ($device->type === 'kiosk' && $device->device_token)
+                                            <x-btn :href="route('qms.kiosk.device', $device->device_token)" target="_blank" variant="link" size="sm" plain>Open kiosk</x-btn>
+                                        @endif
+                                        @if ($canManage)
+                                            <form method="POST" action="{{ route('qms.devices.regenerate-token', $device) }}" class="inline">
+                                                @csrf
+                                                <x-btn type="submit" variant="warning" size="sm">Regenerate token</x-btn>
+                                            </form>
+                                        @endif
+                                    </div>
                                 </td>
                             </tr>
                         @endforeach

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

@@ -52,7 +52,7 @@
                                 <td class="px-4 py-3 text-slate-600">{{ config('qms.display_layouts.'.$screen->layout, $screen->layout) }}</td>
                                 <td class="px-4 py-3 text-slate-600">{{ $screen->branch?->name ?? '—' }}</td>
                                 <td class="px-4 py-3 text-right">
-                                    <a href="{{ route('qms.display.public', $screen->access_token) }}" target="_blank" class="text-indigo-700 hover:underline">Open display</a>
+                                    <x-btn :href="route('qms.display.public', $screen->access_token)" target="_blank" variant="link" size="sm" plain>Open display</x-btn>
                                 </td>
                             </tr>
                         @endforeach

resources/views/qms/mobile/show.blade.php

@@ -30,7 +30,7 @@
             </form>
             <form method="POST" action="{{ route('qms.mobile.cancel', $ticket->qr_token) }}" class="mt-2" onsubmit="return confirm('Cancel this ticket?')">
                 @csrf
-                <button type="submit" class="w-full text-sm text-red-600">Cancel ticket</button>
+                <x-btn type="submit" variant="danger" class="w-full">Cancel ticket</x-btn>
             </form>
         @endif
     </div>

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

@@ -59,13 +59,13 @@
                                 <td class="px-4 py-3 text-sm font-mono text-slate-600">{{ $queue->prefix }}</td>
                                 <td class="px-4 py-3 text-sm text-slate-600">{{ config('qms.queue_strategies.'.$queue->strategy, $queue->strategy) }}</td>
                                 <td class="px-4 py-3">
-                                    <div class="flex items-center gap-2">
+                                    <div class="btn-group">
                                         @if ($queue->is_paused)
                                             <span class="inline-flex rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700">Paused</span>
-                                            <form method="POST" action="{{ route('qms.queues.resume', $queue) }}" class="inline">@csrf<button class="text-xs text-indigo-600">Resume</button></form>
+                                            <form method="POST" action="{{ route('qms.queues.resume', $queue) }}" class="inline">@csrf<x-btn type="submit" variant="link" size="sm">Resume</x-btn></form>
                                         @elseif ($queue->is_active)
                                             <span class="inline-flex rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700">Active</span>
-                                            <form method="POST" action="{{ route('qms.queues.pause', $queue) }}" class="inline">@csrf<button class="text-xs text-amber-600">Pause</button></form>
+                                            <form method="POST" action="{{ route('qms.queues.pause', $queue) }}" class="inline">@csrf<x-btn type="submit" variant="warning" size="sm">Pause</x-btn></form>
                                         @else
                                             <span class="inline-flex rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-600">Inactive</span>
                                         @endif
@@ -73,7 +73,7 @@
                                 </td>
                                 <td class="px-4 py-3 text-right">
                                     @if(app(\App\Services\Qms\QmsPermissions::class)->can(app(\App\Services\Qms\OrganizationResolver::class)->memberFor(auth()->user()), 'rules.view'))
-                                        <a href="{{ route('qms.rules.index', $queue) }}" class="text-xs text-indigo-600">Rules</a>
+                                        <x-btn :href="route('qms.rules.index', $queue)" variant="link" size="sm" plain>Rules</x-btn>
                                     @endif
                                 </td>
                             </tr>

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

@@ -56,7 +56,7 @@
                         <td class="px-4 py-3 text-xs text-slate-600">{{ json_encode($rule->conditions) }}</td>
                         <td class="px-4 py-3 text-xs text-slate-600">{{ json_encode($rule->actions) }}</td>
                         <td class="px-4 py-3 text-right">
-                            <form method="POST" action="{{ route('qms.rules.destroy', [$queue, $rule]) }}">@csrf @method('DELETE')<button class="text-xs text-red-600">Remove</button></form>
+                            <form method="POST" action="{{ route('qms.rules.destroy', [$queue, $rule]) }}">@csrf @method('DELETE')<x-btn type="submit" variant="danger" size="sm">Remove</x-btn></form>
                         </td>
                     </tr>
                 @empty

resources/views/qms/workflows/create.blade.php

@@ -30,7 +30,7 @@
             <div class="border-t pt-4">
                 <div class="mb-2 flex items-center justify-between">
                     <h2 class="text-sm font-semibold">Steps</h2>
-                    <button type="button" @click="steps.push({ name: '', service_queue_id: '' })" class="text-xs text-indigo-600">Add step</button>
+                    <x-btn type="button" @click="steps.push({ name: '', service_queue_id: '' })" variant="link" size="sm">Add step</x-btn>
                 </div>
                 <template x-for="(step, index) in steps" :key="index">
                     <div class="mb-3 grid grid-cols-2 gap-3 rounded-lg border p-3">

resources/views/qms/workflows/edit.blade.php

@@ -15,7 +15,7 @@
                     </select>
                 </div>
             </template>
-            <button type="button" @click="steps.push({name:'',service_queue_id:''})" class="text-sm text-indigo-600">Add step</button>
+            <x-btn type="button" @click="steps.push({name:'',service_queue_id:''})" variant="link" size="sm">Add step</x-btn>
             <button type="submit" class="btn-primary w-full">Save workflow</button>
         </form>
     </div>