Replace ghost destructive actions with shared btn components in Care.

Members, appointments, bills, prescriptions, and patients now use consistent warning/danger pill buttons.

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

resources/css/app.css

@@ -167,6 +167,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/care/admin/members/index.blade.php

@@ -34,7 +34,7 @@
                                 @if ($member->user_ref !== auth()->user()->public_id)
                                     <form method="POST" action="{{ route('care.members.destroy', $member) }}" class="inline" onsubmit="return confirm('Remove this member?')">
                                         @csrf @method('DELETE')
-                                        <button type="submit" class="text-red-600">Remove</button>
+                                        <x-btn type="submit" variant="danger" size="sm">Remove</x-btn>
                                     </form>
                                 @endif
                             </td>

resources/views/care/appointments/show.blade.php

@@ -16,7 +16,7 @@
                 </form>
                 <form method="POST" action="{{ route('care.appointments.no-show', $appointment) }}">
                     @csrf
-                    <button type="submit" class="rounded-lg border border-amber-200 px-4 py-2 text-sm text-amber-700 hover:bg-amber-50">No show</button>
+                    <x-btn type="submit" variant="warning">No show</x-btn>
                 </form>
             @endif
             @if ($canConsult && in_array($appointment->status, [\App\Models\Appointment::STATUS_WAITING, \App\Models\Appointment::STATUS_CHECKED_IN], true))
@@ -49,7 +49,7 @@
             @if ($canManage && ! in_array($appointment->status, [\App\Models\Appointment::STATUS_COMPLETED, \App\Models\Appointment::STATUS_CANCELLED], true))
                 <form method="POST" action="{{ route('care.appointments.cancel', $appointment) }}" onsubmit="return confirm('Cancel this appointment?')">
                     @csrf
-                    <button type="submit" class="rounded-lg border border-red-200 px-4 py-2 text-sm text-red-600 hover:bg-red-50">Cancel</button>
+                    <x-btn type="submit" variant="danger">Cancel</x-btn>
                 </form>
             @endif
         </div>

resources/views/care/bills/show.blade.php

@@ -9,7 +9,7 @@
         <div class="flex gap-2">
             <a href="{{ route('care.bills.print', $bill) }}" target="_blank" class="rounded-lg border border-slate-200 px-4 py-2 text-sm">Print</a>
             @if ($canManage && ! in_array($bill->status, [\App\Models\Bill::STATUS_PAID, \App\Models\Bill::STATUS_VOID]))
-                <form method="POST" action="{{ route('care.bills.void', $bill) }}" onsubmit="return confirm('Void this bill?')">@csrf<button class="rounded-lg border border-red-200 px-4 py-2 text-sm text-red-600">Void</button></form>
+                <form method="POST" action="{{ route('care.bills.void', $bill) }}" onsubmit="return confirm('Void this bill?')">@csrf<x-btn type="submit" variant="danger">Void</x-btn></form>
             @endif
         </div>
     </div>

resources/views/care/patients/show.blade.php

@@ -17,7 +17,7 @@
                 <a href="{{ route('care.patients.edit', $patient) }}" class="btn-primary">Edit</a>
                 <form method="POST" action="{{ route('care.patients.destroy', $patient) }}" onsubmit="return confirm('Archive this patient record?')">
                     @csrf @method('DELETE')
-                    <button type="submit" class="rounded-lg border border-red-200 px-4 py-2 text-sm text-red-600 hover:bg-red-50">Archive</button>
+                    <x-btn type="submit" variant="danger">Archive</x-btn>
                 </form>
             </div>
         @endif

resources/views/care/prescriptions/show.blade.php

@@ -13,7 +13,7 @@
                 <form method="POST" action="{{ route('care.prescriptions.dispense', $prescription) }}">@csrf<button class="btn-primary">Dispense</button></form>
             @endif
             @if ($canManage && ! in_array($prescription->status, [\App\Models\Prescription::STATUS_DISPENSED, \App\Models\Prescription::STATUS_CANCELLED]))
-                <form method="POST" action="{{ route('care.prescriptions.cancel', $prescription) }}" onsubmit="return confirm('Cancel prescription?')">@csrf<button class="rounded-lg border border-red-200 px-4 py-2 text-sm text-red-600">Cancel</button></form>
+                <form method="POST" action="{{ route('care.prescriptions.cancel', $prescription) }}" onsubmit="return confirm('Cancel prescription?')">@csrf<x-btn type="submit" variant="danger">Cancel</x-btn></form>
             @endif
         </div>
     </div>

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>