Add hero section to Watchlist index with entry stats and CTAs.

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

app/Http/Controllers/Frontdesk/WatchlistController.php

@@ -35,10 +35,20 @@ class WatchlistController extends Controller
             ->paginate(25)
             ->withQueryString();
 
+        $statsQuery = WatchlistEntry::owned($this->ownerRef($request))
+            ->where('organization_id', $organization->id);
+
+        $heroStats = [
+            'total' => (clone $statsQuery)->count(),
+            'requires_approval' => (clone $statsQuery)->where('status', Visitor::WATCHLIST_REQUIRES_APPROVAL)->count(),
+            'blacklisted' => (clone $statsQuery)->where('status', Visitor::WATCHLIST_BLACKLISTED)->count(),
+        ];
+
         return view('frontdesk.watchlist.index', [
             'entries' => $entries,
             'organization' => $organization,
             'statuses' => config('frontdesk.watchlist_statuses'),
+            'heroStats' => $heroStats,
             'canManage' => app(\App\Services\Frontdesk\FrontdeskPermissions::class)
                 ->can($this->member($request), 'watchlist.manage'),
         ]);

resources/views/frontdesk/watchlist/index.blade.php

@@ -1,15 +1,26 @@
 <x-app-layout title="Watchlist">
-    <div class="flex items-center justify-between">
-        <div>
-            <h1 class="text-xl font-semibold text-slate-900">Watchlist</h1>
-            <p class="text-sm text-slate-500">Flagged and blocked visitors</p>
-        </div>
+    <div class="space-y-6">
+        <x-frontdesk.page-hero
+            badge="Security · Approvals · Blocked visitors"
+            title="Watchlist"
+            description="Flag visitors who need approval before entry or block them from checking in at your reception desks and kiosks."
+            :stats="[
+                ['value' => number_format($heroStats['total']), 'label' => 'Entries'],
+                ['value' => number_format($heroStats['requires_approval']), 'label' => 'Needs approval'],
+                ['value' => number_format($heroStats['blacklisted']), 'label' => 'Blacklisted'],
+            ]">
+            <x-slot name="actions">
+                <a href="{{ route('frontdesk.visitors.index') }}" class="btn-secondary">Visitor database</a>
                 @if ($canManage)
-            <a href="{{ route('frontdesk.watchlist.create') }}" class="btn-primary">Add entry</a>
+                    <a href="{{ route('frontdesk.watchlist.create') }}" class="btn-primary">
+                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
+                        Add entry
+                    </a>
                 @endif
-    </div>
+            </x-slot>
+        </x-frontdesk.page-hero>
 
-    <form method="GET" class="mt-4 flex flex-wrap gap-2">
+        <form method="GET" class="flex flex-wrap gap-2">
             <input type="search" name="q" value="{{ request('q') }}" placeholder="Search name or company…" class="rounded-lg border-slate-300 text-sm">
             <select name="status" class="rounded-lg border-slate-300 text-sm">
                 <option value="">All statuses</option>
@@ -22,7 +33,10 @@
             <button type="submit" class="rounded-lg border border-slate-200 px-4 py-2 text-sm">Filter</button>
         </form>
 
-    <div class="mt-4 overflow-hidden rounded-2xl border border-slate-200 bg-white">
+        <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
+            <div class="border-b border-slate-100 px-6 py-4">
+                <h2 class="text-sm font-semibold text-slate-900">Watchlist entries</h2>
+            </div>
             <table class="min-w-full divide-y divide-slate-100 text-sm">
                 <thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
                     <tr>
@@ -60,7 +74,9 @@
                     @endforelse
                 </tbody>
             </table>
+            @if ($entries->hasPages())
+                <div class="border-t border-slate-100 px-5 py-3">{{ $entries->links() }}</div>
+            @endif
+        </div>
     </div>
-
-    <div class="mt-4">{{ $entries->links() }}</div>
 </x-app-layout>