From c9a1f7683bf05a2046a26e3abc87a359c3f3efa2 Mon Sep 17 00:00:00 2001
From: isaacclad <sense.corporate@gmail.com>
Date: Sat, 27 Jun 2026 22:02:14 +0000
Subject: [PATCH] Add back icon to kiosk type picker and check-in steps.

Place a circular back control at the top-left of the content area; return to welcome or previous form step.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../views/frontdesk/kiosk/index.blade.php     | 31 +++++++++++++------
 .../frontdesk/partials/kiosk-back.blade.php   |  8 +++++
 2 files changed, 30 insertions(+), 9 deletions(-)
 create mode 100644 resources/views/frontdesk/partials/kiosk-back.blade.php

diff --git a/resources/views/frontdesk/kiosk/index.blade.php b/resources/views/frontdesk/kiosk/index.blade.php
index 61b193f..0e2e2f6 100644
--- a/resources/views/frontdesk/kiosk/index.blade.php
+++ b/resources/views/frontdesk/kiosk/index.blade.php
@@ -50,9 +50,13 @@
 
         {{-- Visitor type carousel --}}
         <template x-if="step === 'type'">
-            <div class="flex min-h-[calc(100vh-5rem)] flex-col items-center justify-center px-6 py-8"
+            <div class="relative flex min-h-[calc(100vh-5rem)] flex-col items-center justify-center px-6 py-8"
                  @touchstart="onTypeTouchStart($event)"
                  @touchend="onTypeTouchEnd($event)">
+                <div class="absolute left-6 top-8 z-10">
+                    @include('frontdesk.partials.kiosk-back')
+                </div>
+
                 <h2 class="mb-10 text-center text-2xl font-semibold text-slate-900 sm:text-3xl">What brings you here?</h2>
 
                 <div class="flex w-full max-w-lg items-center gap-3">
@@ -103,7 +107,11 @@
 
         {{-- Multi-step check-in form --}}
         <template x-if="step === 'details'">
-            <div class="flex min-h-[calc(100vh-5rem)] flex-col justify-center px-6 py-8">
+            <div class="relative flex min-h-[calc(100vh-5rem)] flex-col justify-center px-6 py-8">
+                <div class="absolute left-6 top-8 z-10">
+                    @include('frontdesk.partials.kiosk-back')
+                </div>
+
                 <div class="mx-auto w-full max-w-lg rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
                     <div class="mb-6">
                         <div class="flex items-center justify-between text-xs font-medium text-slate-500">
@@ -187,15 +195,10 @@
                             </label>
                         </div>
 
-                        <div class="mt-6 flex gap-3">
-                            <button type="button"
-                                    @click="prevFormStep()"
-                                    class="flex-1 rounded-full border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700 hover:bg-slate-50">
-                                Back
-                            </button>
+                        <div class="mt-6">
                             <button type="submit"
                                     :disabled="loading"
-                                    class="btn-primary flex-1 py-3 disabled:opacity-50">
+                                    class="btn-primary w-full py-3 disabled:opacity-50">
                                 <span x-text="loading ? 'Submitting…' : (isLastFormStep ? 'Complete check-in' : 'Continue')"></span>
                             </button>
                         </div>
@@ -358,6 +361,16 @@
                     }
                 },
 
+                goBack() {
+                    if (this.step === 'type') {
+                        this.step = 'welcome';
+                        this.typeIndex = 0;
+                    } else if (this.step === 'details') {
+                        this.prevFormStep();
+                    }
+                    this.resetTimer();
+                },
+
                 resetTimer() {
                     clearTimeout(this.timer);
                     this.timer = setTimeout(() => this.reset(), {{ $resetSeconds }} * 1000);
diff --git a/resources/views/frontdesk/partials/kiosk-back.blade.php b/resources/views/frontdesk/partials/kiosk-back.blade.php
new file mode 100644
index 0000000..e6c13f8
--- /dev/null
+++ b/resources/views/frontdesk/partials/kiosk-back.blade.php
@@ -0,0 +1,8 @@
+<button type="button"
+        @click="goBack()"
+        class="flex h-11 w-11 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:border-indigo-200 hover:bg-indigo-50 active:scale-95"
+        aria-label="Go back">
+    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+    </svg>
+</button>