Add Visitors page hero and drop dark-mode classes from Reports.
Deploy Ladill Frontdesk / deploy (push) Successful in 50s

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-07-05 20:53:53 +00:00
co-authored by Cursor
parent f995606649
commit 0d74330e44
3 changed files with 87 additions and 54 deletions
@@ -33,7 +33,19 @@ class VisitorController extends Controller
->paginate(25) ->paginate(25)
->withQueryString(); ->withQueryString();
return view('frontdesk.visitors.index', compact('visitors', 'organization')); $statsQuery = Visitor::owned($this->ownerRef($request))
->where('organization_id', $organization->id);
$heroStats = [
'total' => (clone $statsQuery)->count(),
'frequent' => (clone $statsQuery)->where('is_frequent', true)->count(),
'flagged' => (clone $statsQuery)->whereIn('watchlist_status', [
Visitor::WATCHLIST_REQUIRES_APPROVAL,
Visitor::WATCHLIST_BLACKLISTED,
])->count(),
];
return view('frontdesk.visitors.index', compact('visitors', 'organization', 'heroStats'));
} }
public function show(Request $request, Visitor $visitor): View public function show(Request $request, Visitor $visitor): View
@@ -1,8 +1,8 @@
<x-app-layout title="Reports"> <x-app-layout title="Reports">
<div class="flex flex-wrap items-start justify-between gap-4"> <div class="flex flex-wrap items-start justify-between gap-4">
<div> <div>
<h1 class="text-xl font-semibold text-slate-900 dark:text-slate-100">Reports</h1> <h1 class="text-xl font-semibold text-slate-900">Reports</h1>
<p class="text-sm text-slate-500 dark:text-slate-400">{{ $organization->name }}</p> <p class="text-sm text-slate-500">{{ $organization->name }}</p>
</div> </div>
@if ($canExport) @if ($canExport)
<a href="{{ route('frontdesk.reports.export', request()->query()) }}" class="btn-primary">Export CSV</a> <a href="{{ route('frontdesk.reports.export', request()->query()) }}" class="btn-primary">Export CSV</a>
@@ -10,23 +10,23 @@
</div> </div>
<form method="GET" class="mt-4 flex flex-wrap gap-2"> <form method="GET" class="mt-4 flex flex-wrap gap-2">
<input type="date" name="from" value="{{ $from }}" class="rounded-lg border-slate-300 text-sm dark:border-slate-600 dark:bg-slate-800"> <input type="date" name="from" value="{{ $from }}" class="rounded-lg border-slate-300 text-sm">
<input type="date" name="to" value="{{ $to }}" class="rounded-lg border-slate-300 text-sm dark:border-slate-600 dark:bg-slate-800"> <input type="date" name="to" value="{{ $to }}" class="rounded-lg border-slate-300 text-sm">
<button type="submit" class="rounded-lg border border-slate-200 px-4 py-2 text-sm dark:border-slate-600">Apply</button> <button type="submit" class="rounded-lg border border-slate-200 px-4 py-2 text-sm">Apply</button>
</form> </form>
<div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4"> <div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
@foreach ($summary as $key => $value) @foreach ($summary as $key => $value)
<div class="rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900"> <div class="rounded-2xl border border-slate-200 bg-white p-4">
<p class="text-xs uppercase tracking-wide text-slate-500">{{ str_replace('_', ' ', $key) }}</p> <p class="text-xs uppercase tracking-wide text-slate-500">{{ str_replace('_', ' ', $key) }}</p>
<p class="mt-1 text-2xl font-semibold text-slate-900 dark:text-slate-100">{{ $value }}</p> <p class="mt-1 text-2xl font-semibold text-slate-900">{{ $value }}</p>
</div> </div>
@endforeach @endforeach
</div> </div>
<div class="mt-8 grid gap-6 lg:grid-cols-2"> <div class="mt-8 grid gap-6 lg:grid-cols-2">
<section class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-700 dark:bg-slate-900"> <section class="rounded-2xl border border-slate-200 bg-white p-5">
<h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Peak check-in hours</h2> <h2 class="text-sm font-semibold text-slate-900">Peak check-in hours</h2>
<div class="mt-4 flex items-end gap-1 h-40"> <div class="mt-4 flex items-end gap-1 h-40">
@php $maxPeak = max(1, collect($peakHours)->max('count')); @endphp @php $maxPeak = max(1, collect($peakHours)->max('count')); @endphp
@foreach ($peakHours as $row) @foreach ($peakHours as $row)
@@ -38,8 +38,8 @@
</div> </div>
</section> </section>
<section class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-700 dark:bg-slate-900"> <section class="rounded-2xl border border-slate-200 bg-white p-5">
<h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Security incidents</h2> <h2 class="text-sm font-semibold text-slate-900">Security incidents</h2>
<dl class="mt-4 space-y-2 text-sm"> <dl class="mt-4 space-y-2 text-sm">
@foreach ($security as $key => $count) @foreach ($security as $key => $count)
<div class="flex justify-between"><dt class="text-slate-500">{{ str_replace('_', ' ', $key) }}</dt><dd class="font-medium">{{ $count }}</dd></div> <div class="flex justify-between"><dt class="text-slate-500">{{ str_replace('_', ' ', $key) }}</dt><dd class="font-medium">{{ $count }}</dd></div>
@@ -49,19 +49,19 @@
</div> </div>
<div class="mt-8 grid gap-6 lg:grid-cols-2"> <div class="mt-8 grid gap-6 lg:grid-cols-2">
<section class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-700 dark:bg-slate-900"> <section class="rounded-2xl border border-slate-200 bg-white p-5">
<h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Visits by department</h2> <h2 class="text-sm font-semibold text-slate-900">Visits by department</h2>
<table class="mt-4 min-w-full text-sm"> <table class="mt-4 min-w-full text-sm">
@forelse ($departments as $row) @forelse ($departments as $row)
<tr class="border-t border-slate-100 dark:border-slate-800"><td class="py-2">{{ $row->department }}</td><td class="py-2 text-right font-medium">{{ $row->count }}</td></tr> <tr class="border-t border-slate-100"><td class="py-2">{{ $row->department }}</td><td class="py-2 text-right font-medium">{{ $row->count }}</td></tr>
@empty @empty
<tr><td class="py-4 text-slate-500">No data for this period.</td></tr> <tr><td class="py-4 text-slate-500">No data for this period.</td></tr>
@endforelse @endforelse
</table> </table>
</section> </section>
<section class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-700 dark:bg-slate-900"> <section class="rounded-2xl border border-slate-200 bg-white p-5">
<h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Frequent visitors</h2> <h2 class="text-sm font-semibold text-slate-900">Frequent visitors</h2>
<ul class="mt-4 space-y-2 text-sm"> <ul class="mt-4 space-y-2 text-sm">
@forelse ($frequentVisitors as $visitor) @forelse ($frequentVisitors as $visitor)
<li class="flex justify-between"><span>{{ $visitor->full_name }}</span><span class="text-slate-500">{{ $visitor->visit_count }} visits</span></li> <li class="flex justify-between"><span>{{ $visitor->full_name }}</span><span class="text-slate-500">{{ $visitor->visit_count }} visits</span></li>
@@ -74,25 +74,25 @@
<div class="mt-8"> <div class="mt-8">
<div class="flex flex-wrap items-center justify-between gap-3"> <div class="flex flex-wrap items-center justify-between gap-3">
<h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Staff attendance</h2> <h2 class="text-lg font-semibold text-slate-900">Staff attendance</h2>
@if ($canExport) @if ($canExport)
<a href="{{ route('frontdesk.employees.export.attendance', request()->query()) }}" class="text-sm font-medium text-indigo-600">Export HR CSV</a> <a href="{{ route('frontdesk.employees.export.attendance', request()->query()) }}" class="text-sm font-medium text-indigo-600">Export HR CSV</a>
@endif @endif
</div> </div>
<div class="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-4"> <div class="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
@foreach ($employeeSummary as $key => $value) @foreach ($employeeSummary as $key => $value)
<div class="rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900"> <div class="rounded-2xl border border-slate-200 bg-white p-4">
<p class="text-xs uppercase tracking-wide text-slate-500">{{ str_replace('_', ' ', $key) }}</p> <p class="text-xs uppercase tracking-wide text-slate-500">{{ str_replace('_', ' ', $key) }}</p>
<p class="mt-1 text-2xl font-semibold text-slate-900 dark:text-slate-100">{{ $value }}</p> <p class="mt-1 text-2xl font-semibold text-slate-900">{{ $value }}</p>
</div> </div>
@endforeach @endforeach
</div> </div>
<div class="mt-6 grid gap-6 lg:grid-cols-2"> <div class="mt-6 grid gap-6 lg:grid-cols-2">
<section class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-700 dark:bg-slate-900"> <section class="rounded-2xl border border-slate-200 bg-white p-5">
<h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Recent staff events</h3> <h3 class="text-sm font-semibold text-slate-900">Recent staff events</h3>
<table class="mt-4 min-w-full text-sm"> <table class="mt-4 min-w-full text-sm">
@forelse ($employeeAttendance->take(10) as $event) @forelse ($employeeAttendance->take(10) as $event)
<tr class="border-t border-slate-100 dark:border-slate-800"> <tr class="border-t border-slate-100">
<td class="py-2">{{ $event->employee->full_name }}</td> <td class="py-2">{{ $event->employee->full_name }}</td>
<td class="py-2 text-slate-500">{{ config('frontdesk.employee_presence_events.'.$event->event, $event->event) }}</td> <td class="py-2 text-slate-500">{{ config('frontdesk.employee_presence_events.'.$event->event, $event->event) }}</td>
<td class="py-2 text-right text-slate-400">{{ $event->created_at->format('M j, g:i A') }}</td> <td class="py-2 text-right text-slate-400">{{ $event->created_at->format('M j, g:i A') }}</td>
@@ -102,8 +102,8 @@
@endforelse @endforelse
</table> </table>
</section> </section>
<section class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-700 dark:bg-slate-900"> <section class="rounded-2xl border border-slate-200 bg-white p-5">
<h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Step-out log</h3> <h3 class="text-sm font-semibold text-slate-900">Step-out log</h3>
<ul class="mt-4 space-y-2 text-sm"> <ul class="mt-4 space-y-2 text-sm">
@forelse ($employeeStepOuts as $event) @forelse ($employeeStepOuts as $event)
<li> <li>
@@ -1,35 +1,56 @@
<x-app-layout title="Visitors"> <x-app-layout title="Visitors">
<div class="flex items-center justify-between"> <div class="space-y-6">
<h1 class="text-xl font-semibold text-slate-900">Visitor database</h1> <x-frontdesk.page-hero
</div> badge="Profiles · Return visits · Watchlist"
title="Visitors"
description="Search returning guests, review visit history, and manage watchlist status for people who check in at your sites."
:stats="[
['value' => number_format($heroStats['total']), 'label' => 'Visitors'],
['value' => number_format($heroStats['frequent']), 'label' => 'Frequent'],
['value' => number_format($heroStats['flagged']), 'label' => 'Flagged'],
]">
<x-slot name="actions">
<a href="{{ route('frontdesk.watchlist.index') }}" class="btn-secondary">Watchlist</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"> <form method="GET" class="flex flex-wrap gap-2">
<input type="search" name="q" value="{{ request('q') }}" placeholder="Search by name…" class="w-full max-w-md rounded-lg border-slate-300 text-sm"> <input type="search" name="q" value="{{ request('q') }}" placeholder="Search by name…" class="w-full max-w-md rounded-lg border-slate-300 text-sm">
</form> </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">
<table class="min-w-full divide-y divide-slate-100 text-sm"> <div class="border-b border-slate-100 px-6 py-4">
<thead class="bg-slate-50 text-left text-xs uppercase text-slate-500"> <h2 class="text-sm font-semibold text-slate-900">Visitor database</h2>
<tr> </div>
<th class="px-4 py-3">Name</th> <table class="min-w-full divide-y divide-slate-100 text-sm">
<th class="px-4 py-3">Company</th> <thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
<th class="px-4 py-3">Visits</th> <tr>
<th class="px-4 py-3">Status</th> <th class="px-4 py-3">Name</th>
</tr> <th class="px-4 py-3">Company</th>
</thead> <th class="px-4 py-3">Visits</th>
<tbody class="divide-y divide-slate-50"> <th class="px-4 py-3">Status</th>
@forelse ($visitors as $visitor)
<tr class="hover:bg-slate-50">
<td class="px-4 py-3"><a href="{{ route('frontdesk.visitors.show', $visitor) }}" class="font-medium text-indigo-700">{{ $visitor->full_name }}</a></td>
<td class="px-4 py-3 text-slate-600">{{ $visitor->company ?? '—' }}</td>
<td class="px-4 py-3 text-slate-600">{{ $visitor->visit_count }}</td>
<td class="px-4 py-3 capitalize text-slate-600">{{ str_replace('_', ' ', $visitor->watchlist_status) }}</td>
</tr> </tr>
@empty </thead>
<tr><td colspan="4" class="px-4 py-8 text-center text-slate-400">No visitors yet.</td></tr> <tbody class="divide-y divide-slate-50">
@endforelse @forelse ($visitors as $visitor)
</tbody> <tr class="hover:bg-slate-50">
</table> <td class="px-4 py-3"><a href="{{ route('frontdesk.visitors.show', $visitor) }}" class="font-medium text-indigo-700">{{ $visitor->full_name }}</a></td>
<td class="px-4 py-3 text-slate-600">{{ $visitor->company ?? '—' }}</td>
<td class="px-4 py-3 text-slate-600">{{ $visitor->visit_count }}</td>
<td class="px-4 py-3 capitalize text-slate-600">{{ str_replace('_', ' ', $visitor->watchlist_status) }}</td>
</tr>
@empty
<tr><td colspan="4" class="px-4 py-8 text-center text-slate-400">No visitors yet.</td></tr>
@endforelse
</tbody>
</table>
@if ($visitors->hasPages())
<div class="border-t border-slate-100 px-5 py-3">{{ $visitors->links() }}</div>
@endif
</div>
</div> </div>
<div class="mt-4">{{ $visitors->links() }}</div>
</x-app-layout> </x-app-layout>