Add hero sections to Visits, Hosts, Employees, Devices, Branches, and Team index pages.

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

resources/views/frontdesk/admin/branches/index.blade.php

@@ -1,25 +1,49 @@
-<x-app-layout title="Branches">
-    <div class="flex items-center justify-between">
-        <h1 class="text-xl font-semibold text-slate-900">Branches</h1>
-        @if (app(\App\Services\Frontdesk\FrontdeskPermissions::class)->can(auth()->user() ? app(\App\Services\Frontdesk\OrganizationResolver::class)->memberFor(auth()->user(), $organization) : null, 'admin.branches.manage'))
-            <a href="{{ route('frontdesk.branches.create') }}" class="btn-primary">Add branch</a>
-        @endif
-    </div>
+@php
+    $canManageBranches = app(\App\Services\Frontdesk\FrontdeskPermissions::class)->can(
+        auth()->user() ? app(\App\Services\Frontdesk\OrganizationResolver::class)->memberFor(auth()->user(), $organization) : null,
+        'admin.branches.manage'
+    );
+@endphp
 
-    <div class="mt-4 space-y-3">
-        @forelse ($branches as $branch)
-            <div class="flex items-center justify-between rounded-2xl border border-slate-200 bg-white p-4">
-                <div>
-                    <p class="font-medium text-slate-900">{{ $branch->name }}</p>
-                    <p class="text-sm text-slate-500">{{ $branch->address ?? 'No address' }} · {{ $branch->buildings_count }} building(s)</p>
-                </div>
-                <div class="flex gap-2">
-                    <a href="{{ route('frontdesk.buildings.index', $branch) }}" class="text-sm text-indigo-600 hover:text-indigo-700">Buildings</a>
-                    <a href="{{ route('frontdesk.branches.edit', $branch) }}" class="text-sm text-slate-600 hover:text-slate-800">Edit</a>
-                </div>
+<x-app-layout title="Branches">
+    <div class="space-y-6">
+        <x-frontdesk.page-hero
+            badge="Locations · Buildings · Reception desks"
+            title="Branches"
+            description="Organize your sites, buildings, and reception desks so visits and devices stay scoped to the right location."
+            :stats="[
+                ['value' => number_format($heroStats['total']), 'label' => 'Branches'],
+                ['value' => number_format($heroStats['active']), 'label' => 'Active'],
+                ['value' => number_format($heroStats['buildings']), 'label' => 'Buildings'],
+            ]">
+            @if ($canManageBranches)
+                <x-slot name="actions">
+                    <a href="{{ route('frontdesk.branches.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 branch
+                    </a>
+                </x-slot>
+            @endif
+        </x-frontdesk.page-hero>
+
+        <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">All branches</h2>
             </div>
-        @empty
-            <p class="text-sm text-slate-500">No branches yet.</p>
-        @endforelse
+            @forelse ($branches as $branch)
+                <div class="flex items-center justify-between border-b border-slate-50 px-6 py-4 last:border-b-0">
+                    <div>
+                        <p class="font-medium text-slate-900">{{ $branch->name }}</p>
+                        <p class="text-sm text-slate-500">{{ $branch->address ?? 'No address' }} · {{ $branch->buildings_count }} building(s)</p>
+                    </div>
+                    <div class="flex gap-2">
+                        <a href="{{ route('frontdesk.buildings.index', $branch) }}" class="text-sm text-indigo-600 hover:text-indigo-700">Buildings</a>
+                        <a href="{{ route('frontdesk.branches.edit', $branch) }}" class="text-sm text-slate-600 hover:text-slate-800">Edit</a>
+                    </div>
+                </div>
+            @empty
+                <p class="px-6 py-10 text-center text-sm text-slate-500">No branches yet.</p>
+            @endforelse
+        </div>
     </div>
 </x-app-layout>

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

@@ -1,36 +1,53 @@
-<x-app-layout title="Team members">
-    <div class="flex items-center justify-between">
-        <h1 class="text-xl font-semibold text-slate-900">Team members</h1>
-        <a href="{{ route('frontdesk.members.create') }}" class="btn-primary">Add member</a>
-    </div>
+<x-app-layout title="Team">
+    <div class="space-y-6">
+        <x-frontdesk.page-hero
+            badge="Roles · Access · Branch scope"
+            title="Team"
+            description="Invite colleagues, assign Frontdesk roles, and limit branch access for reception and security staff."
+            :stats="[
+                ['value' => number_format($heroStats['total']), 'label' => 'Members'],
+                ['value' => number_format($heroStats['admins']), 'label' => 'Administrators'],
+                ['value' => number_format($heroStats['branch_scoped']), 'label' => 'Branch-scoped'],
+            ]">
+            <x-slot name="actions">
+                <a href="{{ route('frontdesk.members.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 member
+                </a>
+            </x-slot>
+        </x-frontdesk.page-hero>
 
-    <div class="mt-4 overflow-hidden rounded-2xl border border-slate-200 bg-white">
-        <table class="min-w-full text-sm">
-            <thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
-                <tr><th class="px-4 py-3">Member</th><th class="px-4 py-3">Role</th><th class="px-4 py-3">Branch</th><th class="px-4 py-3"></th></tr>
-            </thead>
-            <tbody class="divide-y divide-slate-50">
-                @foreach ($members as $member)
-                    @php
-                        $display = str_contains($member->user_ref, '@')
-                            ? $member->user_ref
-                            : (\App\Models\User::where('public_id', $member->user_ref)->value('email') ?? $member->user_ref);
-                    @endphp
-                    <tr>
-                        <td class="px-4 py-3 text-sm">{{ $display }}</td>
-                        <td class="px-4 py-3">{{ $roles[$member->role] ?? $member->role }}</td>
-                        <td class="px-4 py-3">{{ $member->branch?->name ?? 'All branches' }}</td>
-                        <td class="px-4 py-3 text-right">
-                            @if ($member->user_ref !== auth()->user()->public_id)
-                                <form method="POST" action="{{ route('frontdesk.members.destroy', $member) }}" class="inline" onsubmit="return confirm('Remove this member?')">
-                                    @csrf @method('DELETE')
-                                    <button type="submit" class="text-red-600">Remove</button>
-                                </form>
-                            @endif
-                        </td>
-                    </tr>
-                @endforeach
-            </tbody>
-        </table>
+        <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">Team members</h2>
+            </div>
+            <table class="min-w-full text-sm">
+                <thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
+                    <tr><th class="px-4 py-3">Member</th><th class="px-4 py-3">Role</th><th class="px-4 py-3">Branch</th><th class="px-4 py-3"></th></tr>
+                </thead>
+                <tbody class="divide-y divide-slate-50">
+                    @foreach ($members as $member)
+                        @php
+                            $display = str_contains($member->user_ref, '@')
+                                ? $member->user_ref
+                                : (\App\Models\User::where('public_id', $member->user_ref)->value('email') ?? $member->user_ref);
+                        @endphp
+                        <tr>
+                            <td class="px-4 py-3 text-sm">{{ $display }}</td>
+                            <td class="px-4 py-3">{{ $roles[$member->role] ?? $member->role }}</td>
+                            <td class="px-4 py-3">{{ $member->branch?->name ?? 'All branches' }}</td>
+                            <td class="px-4 py-3 text-right">
+                                @if ($member->user_ref !== auth()->user()->public_id)
+                                    <form method="POST" action="{{ route('frontdesk.members.destroy', $member) }}" class="inline" onsubmit="return confirm('Remove this member?')">
+                                        @csrf @method('DELETE')
+                                        <button type="submit" class="text-red-600">Remove</button>
+                                    </form>
+                                @endif
+                            </td>
+                        </tr>
+                    @endforeach
+                </tbody>
+            </table>
+        </div>
     </div>
 </x-app-layout>