Use consistent + icon buttons on mobile reception views.
Deploy Ladill Frontdesk / deploy (push) Successful in 50s
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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user