From 905d7268e49556ae8ddcf802d9b9dc1dbcb81427 Mon Sep 17 00:00:00 2001 From: isaacclad Date: Sun, 28 Jun 2026 16:21:58 +0000 Subject: [PATCH] Use + icon buttons on mobile dashboards. Sync mobile-header-btn partials, mobile x-btn.create, and update dashboard header actions for consistent mobile FABs. Co-authored-by: Cursor --- .../views/components/btn/create.blade.php | 33 ++++++++++++ resources/views/frontdesk/dashboard.blade.php | 4 +- .../reception-quick-actions.blade.php | 37 +++++-------- .../partials/mobile-header-btn.blade.php | 53 +++++++++++++++++++ .../partials/mobile-icon-link.blade.php | 17 +++--- 5 files changed, 111 insertions(+), 33 deletions(-) create mode 100644 resources/views/components/btn/create.blade.php create mode 100644 resources/views/partials/mobile-header-btn.blade.php rename resources/views/{frontdesk => }/partials/mobile-icon-link.blade.php (62%) diff --git a/resources/views/components/btn/create.blade.php b/resources/views/components/btn/create.blade.php new file mode 100644 index 0000000..f51caf4 --- /dev/null +++ b/resources/views/components/btn/create.blade.php @@ -0,0 +1,33 @@ +@props([ + 'href' => null, + 'type' => 'button', + 'label' => null, +]) + +@php + $tag = $href ? 'a' : 'button'; + $ariaLabel = $label ?? trim(preg_replace('/\s+/', ' ', strip_tags((string) $slot))); +@endphp + +<{{ $tag }} + @if ($href) href="{{ $href }}" @endif + @if ($tag === 'button') type="{{ $type }}" @endif + aria-label="{{ $ariaLabel }}" + title="{{ $ariaLabel }}" + {{ $attributes->class(['btn-fab h-10 w-10 lg:hidden']) }} +> + + + +<{{ $tag }} + @if ($href) href="{{ $href }}" @endif + @if ($tag === 'button') type="{{ $type }}" @endif + {{ $attributes->class(['btn-primary hidden lg:inline-flex']) }} +> + + {{ $slot }} + diff --git a/resources/views/frontdesk/dashboard.blade.php b/resources/views/frontdesk/dashboard.blade.php index 936f293..3252e90 100644 --- a/resources/views/frontdesk/dashboard.blade.php +++ b/resources/views/frontdesk/dashboard.blade.php @@ -33,7 +33,7 @@

Currently inside

- @include('frontdesk.partials.mobile-icon-link', [ + @include('partials.mobile-icon-link', [ 'href' => route('frontdesk.security.index'), 'label' => 'Security view', 'icon' => 'shield', @@ -55,7 +55,7 @@

Expected today

- @include('frontdesk.partials.mobile-icon-link', [ + @include('partials.mobile-icon-link', [ 'href' => route('frontdesk.visits.calendar'), 'label' => 'Calendar', 'icon' => 'calendar', diff --git a/resources/views/frontdesk/partials/reception-quick-actions.blade.php b/resources/views/frontdesk/partials/reception-quick-actions.blade.php index 125a910..96b7909 100644 --- a/resources/views/frontdesk/partials/reception-quick-actions.blade.php +++ b/resources/views/frontdesk/partials/reception-quick-actions.blade.php @@ -6,28 +6,17 @@ ])
merge(['class' => 'flex shrink-0 items-center gap-2']) }}> - - - - - - - - + @include('partials.mobile-header-btn', [ + 'href' => route('frontdesk.visits.schedule'), + 'label' => $scheduleLabel, + 'desktopLabel' => $desktopSchedule, + 'variant' => 'outline', + 'showDesktopIcon' => false, + ]) + @include('partials.mobile-header-btn', [ + 'href' => route('frontdesk.visits.create'), + 'label' => $checkInLabel, + 'desktopLabel' => $desktopCheckIn, + 'variant' => 'primary', + ])
diff --git a/resources/views/partials/mobile-header-btn.blade.php b/resources/views/partials/mobile-header-btn.blade.php new file mode 100644 index 0000000..97d79c4 --- /dev/null +++ b/resources/views/partials/mobile-header-btn.blade.php @@ -0,0 +1,53 @@ +@php + $variant = $variant ?? 'primary'; + $type = $type ?? 'submit'; + $tag = ! empty($href) ? 'a' : 'button'; + $ariaLabel = $ariaLabel ?? $label ?? ''; + $desktopLabel = $desktopLabel ?? $label ?? ''; + $showDesktopIcon = $showDesktopIcon ?? ($variant === 'primary'); + + $mobileClass = match ($variant) { + 'primary' => 'btn-fab h-10 w-10 lg:hidden', + 'outline' => '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', + 'dark' => 'inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-900 text-white shadow-sm transition hover:bg-gray-800 lg:hidden', + 'indigo' => 'inline-flex h-10 w-10 items-center justify-center rounded-full bg-indigo-600 text-white shadow-sm transition hover:bg-indigo-700 lg:hidden', + default => 'btn-fab h-10 w-10 lg:hidden', + }; + + $desktopClass = match ($variant) { + 'primary' => 'btn-primary hidden items-center lg:inline-flex', + 'outline' => 'hidden items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition hover:bg-gray-50 lg:inline-flex', + 'dark' => 'hidden items-center gap-1.5 rounded-lg bg-gray-900 px-3.5 py-2 text-sm font-medium text-white transition hover:bg-gray-800 lg:inline-flex', + 'indigo' => 'hidden items-center justify-center rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-700 lg:inline-flex', + default => 'btn-primary hidden items-center lg:inline-flex', + }; + + $extraClass = $class ?? ''; +@endphp + +<{{ $tag }} + @if ($tag === 'a') href="{{ $href }}" @endif + @if ($tag === 'button') type="{{ $type }}" @endif + aria-label="{{ $ariaLabel }}" + title="{{ $ariaLabel }}" + @if (! empty($attributes)) {!! $attributes !!} @endif + class="{{ trim($mobileClass.' '.$extraClass) }}" +> + + + +<{{ $tag }} + @if ($tag === 'a') href="{{ $href }}" @endif + @if ($tag === 'button') type="{{ $type }}" @endif + @if (! empty($attributes)) {!! $attributes !!} @endif + class="{{ trim($desktopClass.' '.$extraClass) }}" +> + @if ($showDesktopIcon) + + @endif + {{ $desktopLabel }} + diff --git a/resources/views/frontdesk/partials/mobile-icon-link.blade.php b/resources/views/partials/mobile-icon-link.blade.php similarity index 62% rename from resources/views/frontdesk/partials/mobile-icon-link.blade.php rename to resources/views/partials/mobile-icon-link.blade.php index 205fc67..b1a96c4 100644 --- a/resources/views/frontdesk/partials/mobile-icon-link.blade.php +++ b/resources/views/partials/mobile-icon-link.blade.php @@ -1,14 +1,13 @@ -@props([ - 'href', - 'label', - 'icon', - 'desktopClass' => 'text-xs font-medium text-indigo-600 hover:text-indigo-700', -]) +@php + $icon = $icon ?? 'arrow'; + $desktopClass = $desktopClass ?? 'text-xs font-medium text-indigo-600 hover:text-indigo-700'; + $label = $label ?? ''; +@endphp 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']) }}> + 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"> @if ($icon === 'shield')