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

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-05 20:45:30 +00:00
parent 66299ae166
commit f995606649
13 changed files with 439 additions and 235 deletions
@@ -24,7 +24,13 @@ class BranchController extends Controller
            ->orderBy('name')
            ->get();

-        return view('frontdesk.admin.branches.index', compact('branches', 'organization'));
+        $heroStats = [
+            'total' => $branches->count(),
+            'active' => $branches->where('is_active', true)->count(),
+            'buildings' => $branches->sum('buildings_count'),
+        ];
+
+        return view('frontdesk.admin.branches.index', compact('branches', 'organization', 'heroStats'));
    }

    public function create(Request $request): View
@@ -27,10 +27,23 @@ class DeviceController extends Controller
            ->orderBy('name')
            ->paginate(25);

+        $statsQuery = Device::owned($this->ownerRef($request))
+            ->where('organization_id', $organization->id);
+
+        $heroStats = [
+            'total' => (clone $statsQuery)->count(),
+            'online' => (clone $statsQuery)
+                ->where('status', 'online')
+                ->where('last_online_at', '>=', now()->subMinutes(10))
+                ->count(),
+            'kiosks' => (clone $statsQuery)->where('type', 'kiosk')->count(),
+        ];
+
        return view('frontdesk.devices.index', [
            'organization' => $organization,
            'devices' => $devices,
            'deviceTypes' => config('frontdesk.device_types'),
+            'heroStats' => $heroStats,
            'canManage' => app(\App\Services\Frontdesk\FrontdeskPermissions::class)
                ->can($this->member($request), 'devices.manage'),
        ]);
@@ -6,6 +6,7 @@ use App\Http\Controllers\Controller;
 use App\Http\Controllers\Frontdesk\Concerns\ScopesToAccount;
 use App\Models\Branch;
 use App\Models\Employee;
+use App\Models\EmployeePresence;
 use App\Models\EmployeePresenceEvent;
 use App\Models\Host;
 use App\Models\Member;
@@ -35,7 +36,17 @@ class EmployeeController extends Controller
        $this->scopeToBranch($request, $employees);
        $employees = $employees->paginate(25);

-        return view('frontdesk.employees.index', compact('employees', 'organization'));
+        $statsQuery = Employee::owned($this->ownerRef($request))
+            ->where('organization_id', $organization->id);
+        $this->scopeToBranch($request, $statsQuery);
+
+        $heroStats = [
+            'total' => (clone $statsQuery)->count(),
+            'on_site' => (clone $statsQuery)->whereHas('presence', fn ($q) => $q->where('status', EmployeePresence::STATUS_ON_SITE))->count(),
+            'active' => (clone $statsQuery)->where('active', true)->count(),
+        ];
+
+        return view('frontdesk.employees.index', compact('employees', 'organization', 'heroStats'));
    }

    public function create(Request $request): View
@@ -25,7 +25,17 @@ class HostController extends Controller
        $this->scopeToBranch($request, $hosts);
        $hosts = $hosts->orderBy('name')->paginate(25);

-        return view('frontdesk.hosts.index', compact('hosts', 'organization'));
+        $statsQuery = Host::owned($this->ownerRef($request))
+            ->where('organization_id', $organization->id);
+        $this->scopeToBranch($request, $statsQuery);
+
+        $heroStats = [
+            'total' => (clone $statsQuery)->count(),
+            'available' => (clone $statsQuery)->where('is_available', true)->count(),
+            'departments' => (clone $statsQuery)->whereNotNull('department')->where('department', '!=', '')->distinct()->count('department'),
+        ];
+
+        return view('frontdesk.hosts.index', compact('hosts', 'organization', 'heroStats'));
    }

    public function create(Request $request): View
@@ -26,10 +26,19 @@ class MemberController extends Controller
            ->orderBy('created_at')
            ->get();

+        $adminRoles = ['super_admin', 'org_admin', 'branch_admin'];
+
+        $heroStats = [
+            'total' => $members->count(),
+            'admins' => $members->whereIn('role', $adminRoles)->count(),
+            'branch_scoped' => $members->whereNotNull('branch_id')->count(),
+        ];
+
        return view('frontdesk.admin.members.index', [
            'members' => $members,
            'organization' => $organization,
            'roles' => config('frontdesk.roles'),
+            'heroStats' => $heroStats,
        ]);
    }

@@ -42,7 +42,17 @@ class VisitController extends Controller
            ->paginate(25)
            ->withQueryString();

-        return view('frontdesk.visits.index', compact('visits', 'organization'));
+        $statsQuery = Visit::owned($this->ownerRef($request))
+            ->where('organization_id', $organization->id);
+        $this->scopeToBranch($request, $statsQuery);
+
+        $heroStats = [
+            'on_site' => (clone $statsQuery)->whereIn('status', Visit::ACTIVE_STATUSES)->count(),
+            'today' => (clone $statsQuery)->whereDate('checked_in_at', today())->count(),
+            'total' => (clone $statsQuery)->count(),
+        ];
+
+        return view('frontdesk.visits.index', compact('visits', 'organization', 'heroStats'));
    }

    public function calendar(Request $request): View
@@ -0,0 +1,39 @@
+@props([
+    'badge',
+    'title',
+    'description' => null,
+    'stats' => [],
+])
+
+<div {{ $attributes->merge(['class' => 'relative overflow-hidden rounded-2xl border border-slate-200 bg-white']) }}>
+    <div class="absolute inset-0 bg-gradient-to-br from-indigo-50/80 via-white to-violet-50/60"></div>
+    <div class="relative px-6 py-8 sm:px-10">
+        <div class="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
+            <div class="max-w-xl">
+                <div class="inline-flex items-center gap-1.5 rounded-full bg-indigo-100 px-3 py-1 text-xs font-semibold text-indigo-700">
+                    {{ $badge }}
+                </div>
+                <h1 class="mt-3 text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">{{ $title }}</h1>
+                @if ($description)
+                    <p class="mt-2 text-sm leading-6 text-slate-600">{{ $description }}</p>
+                @endif
+                @isset($actions)
+                    <div class="mt-6 flex flex-wrap items-center gap-2">
+                        {{ $actions }}
+                    </div>
+                @endisset
+            </div>
+
+            @if (count($stats) > 0)
+                <div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:grid sm:grid-cols-3 sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
+                    @foreach ($stats as $stat)
+                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                            <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ $stat['value'] }}</p>
+                            <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">{{ $stat['label'] }}</p>
+                        </div>
+                    @endforeach
+                </div>
+            @endif
+        </div>
+    </div>
+</div>
@@ -1,14 +1,37 @@
-<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">
+<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>
            @forelse ($branches as $branch)
-            <div class="flex items-center justify-between rounded-2xl border border-slate-200 bg-white p-4">
+                <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>
@@ -19,7 +42,8 @@
                    </div>
                </div>
            @empty
-            <p class="text-sm text-slate-500">No branches yet.</p>
+                <p class="px-6 py-10 text-center text-sm text-slate-500">No branches yet.</p>
            @endforelse
        </div>
+    </div>
 </x-app-layout>
@@ -1,10 +1,26 @@
-<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">
+        <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>
@@ -33,4 +49,5 @@
                </tbody>
            </table>
        </div>
+    </div>
 </x-app-layout>
@@ -1,15 +1,28 @@
 <x-app-layout title="Devices">
-    <div class="flex items-center justify-between">
-        <div>
-            <h1 class="text-xl font-semibold text-slate-900">Devices</h1>
-            <p class="text-sm text-slate-500">Kiosks, printers, and reception hardware</p>
-        </div>
+    <div class="space-y-6">
+        <x-frontdesk.page-hero
+            badge="Kiosks · Printers · Reception hardware"
+            title="Devices"
+            description="Register and monitor kiosks, badge printers, and reception hardware across your branches."
+            :stats="[
+                ['value' => number_format($heroStats['total']), 'label' => 'Devices'],
+                ['value' => number_format($heroStats['online']), 'label' => 'Online'],
+                ['value' => number_format($heroStats['kiosks']), 'label' => 'Kiosks'],
+            ]">
            @if ($canManage)
-            <a href="{{ route('frontdesk.devices.create') }}" class="btn-primary">Add device</a>
+                <x-slot name="actions">
+                    <a href="{{ route('frontdesk.devices.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 device
+                    </a>
+                </x-slot>
            @endif
-    </div>
+        </x-frontdesk.page-hero>

-    <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">All devices</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>
@@ -52,7 +65,9 @@
                    @endforelse
                </tbody>
            </table>
+            @if ($devices->hasPages())
+                <div class="border-t border-slate-100 px-5 py-3">{{ $devices->links() }}</div>
+            @endif
+        </div>
    </div>
-
-    {{ $devices->links() }}
 </x-app-layout>
@@ -1,14 +1,28 @@
 <x-app-layout title="Employees">
-    <div class="flex flex-wrap items-center justify-between gap-3">
-        <h1 class="text-xl font-semibold text-slate-900">Employees</h1>
-        <div class="flex gap-2">
-            <a href="{{ route('frontdesk.employees.export.attendance') }}" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Export attendance</a>
-            <a href="{{ route('frontdesk.employees.import') }}" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Import CSV</a>
-            <a href="{{ route('frontdesk.employees.create') }}" class="btn-primary">Add employee</a>
-        </div>
-    </div>
+    <div class="space-y-6">
+        <x-frontdesk.page-hero
+            badge="Staff sign-in · Presence · Attendance"
+            title="Employees"
+            description="Register staff who sign in at the kiosk, track on-site presence, and export attendance records."
+            :stats="[
+                ['value' => number_format($heroStats['total']), 'label' => 'Employees'],
+                ['value' => number_format($heroStats['on_site']), 'label' => 'On site'],
+                ['value' => number_format($heroStats['active']), 'label' => 'Active'],
+            ]">
+            <x-slot name="actions">
+                <a href="{{ route('frontdesk.employees.export.attendance') }}" class="btn-secondary">Export attendance</a>
+                <a href="{{ route('frontdesk.employees.import') }}" class="btn-secondary">Import CSV</a>
+                <a href="{{ route('frontdesk.employees.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 employee
+                </a>
+            </x-slot>
+        </x-frontdesk.page-hero>

-    <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">All employees</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>
@@ -49,6 +63,9 @@
                    @endforelse
                </tbody>
            </table>
+            @if ($employees->hasPages())
+                <div class="border-t border-slate-100 px-5 py-3">{{ $employees->links() }}</div>
+            @endif
+        </div>
    </div>
-    <div class="mt-4">{{ $employees->links() }}</div>
 </x-app-layout>
@@ -1,10 +1,26 @@
 <x-app-layout title="Host directory">
-    <div class="flex items-center justify-between">
-        <h1 class="text-xl font-semibold text-slate-900">Host directory</h1>
-        <a href="{{ route('frontdesk.hosts.create') }}" class="btn-primary">Add host</a>
-    </div>
+    <div class="space-y-6">
+        <x-frontdesk.page-hero
+            badge="Host directory · Notifications · Departments"
+            title="Hosts"
+            description="Manage the people visitors come to see — hosts receive arrival alerts and approve visits."
+            :stats="[
+                ['value' => number_format($heroStats['total']), 'label' => 'Hosts'],
+                ['value' => number_format($heroStats['available']), 'label' => 'Available'],
+                ['value' => number_format($heroStats['departments']), 'label' => 'Departments'],
+            ]">
+            <x-slot name="actions">
+                <a href="{{ route('frontdesk.hosts.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 host
+                </a>
+            </x-slot>
+        </x-frontdesk.page-hero>

-    <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">All hosts</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>
@@ -27,10 +43,13 @@
                            </td>
                        </tr>
                    @empty
-                    <tr><td colspan="4" class="px-4 py-8 text-center text-slate-400">No hosts yet. Add your first host to enable visitor notifications.</td></tr>
+                        <tr><td colspan="5" class="px-4 py-8 text-center text-slate-400">No hosts yet. Add your first host to enable visitor notifications.</td></tr>
                    @endforelse
                </tbody>
            </table>
+            @if ($hosts->hasPages())
+                <div class="border-t border-slate-100 px-5 py-3">{{ $hosts->links() }}</div>
+            @endif
+        </div>
    </div>
-    <div class="mt-4">{{ $hosts->links() }}</div>
 </x-app-layout>
@@ -1,15 +1,24 @@
 <x-app-layout title="Visit history">
-    <div class="flex items-center justify-between gap-3">
-        <h1 class="min-w-0 flex-1 truncate text-lg font-semibold text-slate-900 lg:text-xl">Visits</h1>
-        @include('frontdesk.partials.reception-quick-actions', [
-            'desktopSchedule' => 'Schedule',
-            'desktopCheckIn' => 'Check in',
-            'scheduleLabel' => 'Schedule visit',
-            'checkInLabel' => 'Check in visitor',
-        ])
-    </div>
+    <div class="space-y-6">
+        <x-frontdesk.page-hero
+            badge="Check-in · Badges · Visit history"
+            title="Visits"
+            description="Track visitor arrivals, scheduled appointments, and on-site activity across your locations."
+            :stats="[
+                ['value' => number_format($heroStats['on_site']), 'label' => 'On site now'],
+                ['value' => number_format($heroStats['today']), 'label' => 'Checked in today'],
+                ['value' => number_format($heroStats['total']), 'label' => 'All visits'],
+            ]">
+            <x-slot name="actions">
+                <a href="{{ route('frontdesk.visits.schedule') }}" class="btn-secondary">Schedule visit</a>
+                <a href="{{ route('frontdesk.visits.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>
+                    Check in visitor
+                </a>
+            </x-slot>
+        </x-frontdesk.page-hero>

-    <form method="GET" class="mt-4 flex gap-2">
+        <form method="GET" class="flex flex-wrap gap-2">
            <input type="search" name="q" value="{{ request('q') }}" placeholder="Search visitors…" class="rounded-lg border-slate-300 text-sm">
            <select name="status" class="rounded-lg border-slate-300 text-sm">
                <option value="">All statuses</option>
@@ -20,7 +29,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">Visit history</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>
@@ -45,7 +57,9 @@
                    @endforelse
                </tbody>
            </table>
+            @if ($visits->hasPages())
+                <div class="border-t border-slate-100 px-5 py-3">{{ $visits->links() }}</div>
+            @endif
+        </div>
    </div>
-
-    <div class="mt-4">{{ $visits->links() }}</div>
 </x-app-layout>