Use consistent + icon buttons on mobile reception views.

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>

resources/views/frontdesk/dashboard.blade.php

@@ -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">

resources/views/frontdesk/partials/mobile-icon-link.blade.php

@@ -0,0 +1,24 @@
+@props([
+    'href',
+    'label',
+    'icon',
+    'desktopClass' => 'text-xs font-medium text-indigo-600 hover:text-indigo-700',
+])
+
+<a href="{{ $href }}"
+   aria-label="{{ $label }}"
+   title="{{ $label }}"
+   {{ $attributes->merge(['class' => 'inline-flex h-9 w-9 items-center justify-center rounded-full bg-indigo-50 text-indigo-600 ring-1 ring-indigo-100 transition hover:bg-indigo-100 lg:h-auto lg:w-auto lg:rounded-none lg:bg-transparent lg:ring-0 lg:hover:bg-transparent']) }}>
+    <span class="lg:hidden">
+        @if ($icon === 'shield')
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"/>
+            </svg>
+        @elseif ($icon === 'calendar')
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"/>
+            </svg>
+        @endif
+    </span>
+    <span class="hidden lg:inline {{ $desktopClass }}">{{ $label }}</span>
+</a>

resources/views/frontdesk/partials/reception-quick-actions.blade.php

@@ -0,0 +1,33 @@
+@props([
+    'desktopSchedule' => 'Pre-register',
+    'desktopCheckIn' => 'Check in visitor',
+    'scheduleLabel' => 'Pre-register visitor',
+    'checkInLabel' => 'Check in visitor',
+])
+
+<div {{ $attributes->merge(['class' => 'flex shrink-0 items-center gap-2']) }}>
+  <a href="{{ route('frontdesk.visits.schedule') }}"
+     aria-label="{{ $scheduleLabel }}"
+     title="{{ $scheduleLabel }}"
+     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 lg:hidden">
+    <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="{{ $checkInLabel }}"
+     title="{{ $checkInLabel }}"
+     class="btn-fab h-10 w-10 lg:hidden">
+    <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>
+  <a href="{{ route('frontdesk.visits.schedule') }}"
+     class="hidden items-center rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 lg:inline-flex">
+    {{ $desktopSchedule }}
+  </a>
+  <a href="{{ route('frontdesk.visits.create') }}"
+     class="btn-primary hidden whitespace-nowrap lg:inline-flex">
+    {{ $desktopCheckIn }}
+  </a>
+</div>

resources/views/frontdesk/visits/index.blade.php

@@ -1,10 +1,12 @@
 <x-app-layout title="Visit history">
-    <div class="flex items-center justify-between">
-        <h1 class="text-xl font-semibold text-slate-900">Visits</h1>
-        <div class="flex gap-2">
-            <a href="{{ route('frontdesk.visits.schedule') }}" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Schedule</a>
-            <a href="{{ route('frontdesk.visits.create') }}" class="btn-primary">Check in</a>
-        </div>
+    <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>
 
     <form method="GET" class="mt-4 flex gap-2">