Use consistent + icon buttons on mobile reception views.
Deploy Ladill Frontdesk / deploy (push) Successful in 50s

Extract shared quick-action and section-link partials so dashboard and visits headers share the same white and purple mobile FABs while section links keep indigo icon buttons.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-06-28 16:02:23 +00:00
co-authored by Cursor
parent 308920d892
commit 6e46b23b2c
4 changed files with 80 additions and 46 deletions
+15 -40
View File
@@ -12,45 +12,12 @@
];
@endphp
<div class="mb-6">
{{-- Mobile: org name with inline action icons --}}
<div class="flex items-center justify-between gap-3 lg:hidden">
<h1 class="min-w-0 flex-1 truncate text-lg font-semibold tracking-tight text-slate-900">{{ $organization->name }}</h1>
<div class="flex shrink-0 items-center gap-2">
<a href="{{ route('frontdesk.visits.schedule') }}"
aria-label="Pre-register visitor"
title="Pre-register visitor"
class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:border-slate-300 hover:bg-slate-50">
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
</svg>
</a>
<a href="{{ route('frontdesk.visits.create') }}"
aria-label="Check in visitor"
title="Check in visitor"
class="btn-fab h-10 w-10">
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
</svg>
</a>
</div>
</div>
{{-- Desktop --}}
<div class="hidden items-center justify-between lg:flex">
<div>
<h1 class="text-xl font-semibold text-slate-900">{{ $organization->name }}</h1>
<p class="text-sm text-slate-500">Reception dashboard</p>
</div>
<div class="flex shrink-0 gap-2">
<a href="{{ route('frontdesk.visits.schedule') }}" class="inline-flex items-center rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
Pre-register
</a>
<a href="{{ route('frontdesk.visits.create') }}" class="btn-primary whitespace-nowrap">
Check in visitor
</a>
</div>
<div class="mb-6 flex items-center justify-between gap-3">
<div class="min-w-0 flex-1">
<h1 class="truncate text-lg font-semibold tracking-tight text-slate-900 lg:text-xl">{{ $organization->name }}</h1>
<p class="hidden text-sm text-slate-500 lg:block">Reception dashboard</p>
</div>
@include('frontdesk.partials.reception-quick-actions')
</div>
<div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
@@ -66,7 +33,11 @@
<section class="rounded-2xl border border-slate-200 bg-white">
<div class="flex items-center justify-between border-b border-slate-100 px-5 py-4">
<h2 class="text-sm font-semibold text-slate-900">Currently inside</h2>
<a href="{{ route('frontdesk.security.index') }}" class="text-xs font-medium text-indigo-600 hover:text-indigo-700">Security view</a>
@include('frontdesk.partials.mobile-icon-link', [
'href' => route('frontdesk.security.index'),
'label' => 'Security view',
'icon' => 'shield',
])
</div>
@forelse ($currentVisitors as $visit)
<a href="{{ route('frontdesk.visits.show', $visit) }}" class="flex items-center gap-3 border-b border-slate-50 px-5 py-3 last:border-0 hover:bg-slate-50">
@@ -84,7 +55,11 @@
<section class="rounded-2xl border border-slate-200 bg-white">
<div class="flex items-center justify-between border-b border-slate-100 px-5 py-4">
<h2 class="text-sm font-semibold text-slate-900">Expected today</h2>
<a href="{{ route('frontdesk.visits.calendar') }}" class="text-xs font-medium text-indigo-600 hover:text-indigo-700">Calendar</a>
@include('frontdesk.partials.mobile-icon-link', [
'href' => route('frontdesk.visits.calendar'),
'label' => 'Calendar',
'icon' => 'calendar',
])
</div>
@forelse ($expectedVisitors as $visit)
<a href="{{ route('frontdesk.visits.show', $visit) }}" class="flex items-center gap-3 border-b border-slate-50 px-5 py-3 last:border-0 hover:bg-slate-50 @if($visit->status === 'overdue') bg-amber-50/50 @endif">