Redesign employee kiosk sign-in to match visitor check-in polish.

Split staff identify into two steps with progress header, labeled fields, and icon mode cards; remove uppercase styling on employee code input. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-28 21:44:06 +00:00
parent 7a9871f43f
commit 49ec452c96
2 changed files with 269 additions and 53 deletions
@@ -13,6 +13,7 @@ export function registerKioskFlow(Alpine) {
            staffQrScanning: false,
            staffQrScanned: false,
            staffQrError: '',
+            staffFormStep: 1,
            staffEmployee: null,
            staffMessage: '',
            staffBranchWarning: '',
@@ -181,6 +182,18 @@ export function registerKioskFlow(Alpine) {

            async goBack() {
                if (this.step === 'staff_identify') {
+                    if (this.staffFormStep === 2) {
+                        this.staffFormStep = 1;
+                        this.staffForm.pin = '';
+                        this.errorMessage = '';
+                        if (this.staffIdentifyMode === 'badge' && ! this.staffQrScanned) {
+                            await this.$nextTick();
+                            await this.startStaffQrScanner();
+                        }
+                        this.resetTimer();
+
+                        return;
+                    }
                    await this.stopStaffQrScanner(true);
                }
                if (this.step === 'type') {
@@ -225,6 +238,7 @@ export function registerKioskFlow(Alpine) {
                this.staffForm = { employee_code: '', qr_token: '', pin: '' };
                this.staffQrScanned = false;
                this.staffQrError = '';
+                this.staffFormStep = 1;
                this.staffStepOut = { step_out_reason: 'lunch', destination: '', notes: '', expected_return_at: '' };
                this.form = {
                    full_name: '', company: '', phone: '', email: '', host_id: '',
@@ -253,18 +267,70 @@ export function registerKioskFlow(Alpine) {
                this.step = 'staff_identify';
                this.errorMessage = '';
                this.staffIdentifyMode = 'code';
+                this.staffFormStep = 1;
                this.staffForm = { employee_code: '', qr_token: '', pin: '' };
                this.staffQrScanned = false;
                this.staffQrError = '';
                this.resetTimer();
            },

+            staffIdentifyStepLabel() {
+                return this.staffFormStep === 1 ? 'Identify yourself' : 'Enter your PIN';
+            },
+
+            validateStaffIdentifyStep1() {
+                if (this.staffIdentifyMode === 'code') {
+                    if (! String(this.staffForm.employee_code || '').trim()) {
+                        this.showError('Please enter your employee code.');
+
+                        return false;
+                    }
+                } else if (! String(this.staffForm.qr_token || '').trim()) {
+                    this.showError('Scan your badge to continue.');
+                    return false;
+                }
+
+                this.errorMessage = '';
+
+                return true;
+            },
+
+            async nextStaffIdentifyStep() {
+                if (! this.validateStaffIdentifyStep1()) {
+                    return;
+                }
+
+                await this.stopStaffQrScanner(false);
+                this.staffFormStep = 2;
+                this.errorMessage = '';
+                this.resetTimer();
+            },
+
+            async prevStaffIdentifyStep() {
+                if (this.staffFormStep === 2) {
+                    this.staffFormStep = 1;
+                    this.staffForm.pin = '';
+                    this.errorMessage = '';
+                    if (this.staffIdentifyMode === 'badge' && ! this.staffQrScanned) {
+                        await this.$nextTick();
+                        await this.startStaffQrScanner();
+                    }
+                    this.resetTimer();
+
+                    return;
+                }
+
+                await this.goBack();
+            },
+
            async setStaffIdentifyMode(mode) {
                if (this.staffIdentifyMode === mode) {
                    return;
                }
                await this.stopStaffQrScanner(true);
                this.staffIdentifyMode = mode;
+                this.staffFormStep = 1;
+                this.staffForm.pin = '';
                this.staffQrError = '';
                if (mode === 'badge') {
                    await this.$nextTick();
@@ -289,7 +355,7 @@ export function registerKioskFlow(Alpine) {
            },

            async startStaffQrScanner() {
-                if (this.staffQrScanning || this.staffQrScanned || this.staffIdentifyMode !== 'badge') {
+                if (this.staffQrScanning || this.staffQrScanned || this.staffIdentifyMode !== 'badge' || this.staffFormStep !== 1) {
                    return;
                }

@@ -329,12 +395,15 @@ export function registerKioskFlow(Alpine) {
                this.staffQrScanned = true;
                this.errorMessage = '';
                await this.stopStaffQrScanner(false);
+                this.staffFormStep = 2;
                this.resetTimer();
            },

            async rescanStaffBadge() {
                this.staffQrScanned = false;
                this.staffForm.qr_token = '';
+                this.staffForm.pin = '';
+                this.staffFormStep = 1;
                this.staffQrError = '';
                await this.$nextTick();
                await this.startStaffQrScanner();
@@ -406,16 +475,24 @@ export function registerKioskFlow(Alpine) {
            },

            async staffIdentify() {
-                const hasCode = this.staffIdentifyMode === 'code' && this.staffForm.employee_code.trim();
-                const hasBadge = this.staffIdentifyMode === 'badge' && this.staffForm.qr_token.trim();
-                if ((!hasCode && !hasBadge) || !/^\d{4,6}$/.test(this.staffForm.pin)) {
-                    this.showError('Enter your employee code or scan your badge, plus your PIN.');
+                if (this.staffFormStep === 1) {
+                    await this.nextStaffIdentifyStep();
+
                    return;
                }
+
+                if (! /^\d{4,6}$/.test(this.staffForm.pin)) {
+                    this.showError('Enter a 4–6 digit PIN.');
+
+                    return;
+                }
+
                try {
                    await this.stopStaffQrScanner(false);
                    const data = await this.staffPost('identify');
-                    if (!data) return;
+                    if (! data) {
+                        return;
+                    }
                    this.staffEmployee = data.employee;
                    this.step = 'staff_actions';
                    this.resetTimer();
@@ -288,39 +288,144 @@
                    @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">
-                    <h2 class="text-2xl font-bold text-slate-900">Employee sign-in</h2>
-                    <p class="mt-1 text-sm text-slate-500">Enter your employee code and PIN, or scan your badge with the camera.</p>
-                    <p x-show="errorMessage" x-cloak class="mt-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700" x-text="errorMessage"></p>
-                    <div class="mt-4 flex gap-2 text-sm">
-                        <button type="button" @click="setStaffIdentifyMode('code')" :class="staffIdentifyMode === 'code' ? 'bg-indigo-100 text-indigo-800' : 'bg-slate-100 text-slate-600'" class="rounded-lg px-3 py-1.5 font-medium">Code</button>
-                        <button type="button" @click="setStaffIdentifyMode('badge')" :class="staffIdentifyMode === 'badge' ? 'bg-indigo-100 text-indigo-800' : 'bg-slate-100 text-slate-600'" class="rounded-lg px-3 py-1.5 font-medium">Scan badge</button>
+                    <div class="mb-6">
+                        <div class="flex items-center justify-between text-xs font-medium text-slate-500">
+                            <span>Staff sign-in</span>
+                            <span x-text="`Step ${staffFormStep} of 2`"></span>
                        </div>
-                    <div class="mt-6 space-y-4">
+                        <div class="mt-2 h-1.5 overflow-hidden rounded-full bg-slate-100">
+                            <div class="h-full rounded-full bg-gradient-to-r from-violet-600 to-indigo-600 transition-all duration-300"
+                                 :style="`width: ${(staffFormStep / 2) * 100}%`"></div>
+                        </div>
+                        <p class="mt-2 text-sm font-semibold text-slate-900" x-text="staffIdentifyStepLabel()"></p>
+                    </div>
+
+                    <p x-show="errorMessage" x-cloak class="mb-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700" x-text="errorMessage"></p>
+
+                    {{-- Step 1: Identity --}}
+                    <template x-if="staffFormStep === 1">
+                        <div>
+                            <div class="grid grid-cols-2 gap-3">
+                                <button type="button"
+                                        @click="setStaffIdentifyMode('code')"
+                                        class="group flex flex-col items-center rounded-2xl border-2 px-4 py-5 text-center transition active:scale-[0.98]"
+                                        :class="staffIdentifyMode === 'code' ? 'border-violet-300 bg-violet-50 shadow-sm' : 'border-slate-200 bg-white hover:border-violet-200'">
+                                    <span class="flex h-11 w-11 items-center justify-center rounded-xl transition"
+                                          :class="staffIdentifyMode === 'code' ? 'bg-violet-100 text-violet-600' : 'bg-slate-100 text-slate-500 group-hover:bg-violet-50 group-hover:text-violet-600'">
+                                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499a1.875 1.875 0 0 1 3.182 1.32l-1.92 1.92" />
+                                        </svg>
+                                    </span>
+                                    <span class="mt-3 text-sm font-semibold text-slate-900">Employee code</span>
+                                    <span class="mt-0.5 text-xs text-slate-500">Type your ID</span>
+                                </button>
+                                <button type="button"
+                                        @click="setStaffIdentifyMode('badge')"
+                                        class="group flex flex-col items-center rounded-2xl border-2 px-4 py-5 text-center transition active:scale-[0.98]"
+                                        :class="staffIdentifyMode === 'badge' ? 'border-violet-300 bg-violet-50 shadow-sm' : 'border-slate-200 bg-white hover:border-violet-200'">
+                                    <span class="flex h-11 w-11 items-center justify-center rounded-xl transition"
+                                          :class="staffIdentifyMode === 'badge' ? 'bg-violet-100 text-violet-600' : 'bg-slate-100 text-slate-500 group-hover:bg-violet-50 group-hover:text-violet-600'">
+                                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z" />
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z" />
+                                        </svg>
+                                    </span>
+                                    <span class="mt-3 text-sm font-semibold text-slate-900">Scan badge</span>
+                                    <span class="mt-0.5 text-xs text-slate-500">Use camera or scanner</span>
+                                </button>
+                            </div>
+
+                            <div class="mt-6">
                                <template x-if="staffIdentifyMode === 'code'">
-                            <input type="text" x-model="staffForm.employee_code" placeholder="Employee code" autocomplete="off" class="w-full rounded-xl border-slate-200 px-4 py-4 text-lg uppercase">
+                                    <div>
+                                        <label for="staff-employee-code" class="mb-1.5 block text-sm font-medium text-slate-600">Employee code</label>
+                                        <input id="staff-employee-code"
+                                               type="text"
+                                               x-model="staffForm.employee_code"
+                                               placeholder="e.g. EMP001"
+                                               autocomplete="off"
+                                               class="w-full rounded-xl border-slate-200 px-4 py-4 font-mono text-lg">
+                                    </div>
                                </template>
                                <template x-if="staffIdentifyMode === 'badge'">
                                    <div class="space-y-3">
-                                <div x-show="!staffQrScanned" id="staff-qr-reader" class="overflow-hidden rounded-xl border border-slate-200 bg-slate-900/5"></div>
-                                <div x-show="staffQrScanned" x-cloak class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-6 text-center">
-                                    <p class="text-sm font-semibold text-emerald-800">Badge scanned</p>
-                                    <p class="mt-1 text-sm text-emerald-700">Enter your PIN below to continue.</p>
-                                    <button type="button" @click="rescanStaffBadge()" class="mt-3 text-sm font-medium text-indigo-600 hover:text-indigo-800">Scan again</button>
+                                        <div x-show="!staffQrScanned">
+                                            <label class="mb-1.5 block text-sm font-medium text-slate-600">Badge QR code</label>
+                                            <div id="staff-qr-reader" class="overflow-hidden rounded-xl border border-slate-200 bg-slate-900/5"></div>
+                                            <p class="mt-2 text-center text-xs text-slate-500">Hold your badge in front of the camera</p>
+                                        </div>
+                                        <div x-show="staffQrScanned" x-cloak class="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-5 text-center">
+                                            <span class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-emerald-100 text-emerald-600">
+                                                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                                </svg>
+                                            </span>
+                                            <p class="mt-3 text-sm font-semibold text-emerald-800">Badge recognized</p>
+                                            <p class="mt-1 text-sm text-emerald-700">Continue to enter your PIN.</p>
+                                            <button type="button" @click="rescanStaffBadge()" class="mt-3 text-sm font-medium text-violet-600 hover:text-violet-800">Scan a different badge</button>
                                        </div>
                                        <p x-show="staffQrError" x-cloak class="rounded-xl bg-amber-50 px-4 py-3 text-sm text-amber-800" x-text="staffQrError"></p>
                                        <details class="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
                                            <summary class="cursor-pointer font-medium text-slate-700">Using an external scanner?</summary>
-                                    <input type="text" x-model="staffForm.qr_token" placeholder="Scan or paste badge code" autocomplete="off" class="mt-3 w-full rounded-lg border-slate-200 px-3 py-3 text-base">
+                                            <label class="mb-1.5 mt-3 block text-xs font-medium text-slate-500">Badge code</label>
+                                            <input type="text"
+                                                   x-model="staffForm.qr_token"
+                                                   placeholder="Scan or paste badge code"
+                                                   autocomplete="off"
+                                                   class="w-full rounded-lg border-slate-200 px-3 py-3 font-mono text-base">
                                        </details>
                                    </div>
                                </template>
-                        <input type="password" inputmode="numeric" x-model="staffForm.pin" placeholder="PIN (4–6 digits)" maxlength="6" autocomplete="off" class="w-full rounded-xl border-slate-200 px-4 py-4 text-lg tracking-widest">
                            </div>
-                    <button type="button" @click="staffIdentify()" :disabled="loading" class="btn-primary mt-6 w-full py-3 disabled:opacity-50">
-                        <span x-text="loading ? 'Checking…' : 'Continue'"></span>
+                        </div>
+                    </template>
+
+                    {{-- Step 2: PIN --}}
+                    <template x-if="staffFormStep === 2">
+                        <div class="space-y-4">
+                            <div x-show="staffIdentifyMode === 'badge' && staffQrScanned" x-cloak class="flex items-center gap-3 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3">
+                                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-600">
+                                    <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="m4.5 12.75 6 6 9-13.5" />
+                                    </svg>
+                                </span>
+                                <div class="min-w-0 text-left">
+                                    <p class="text-sm font-semibold text-emerald-800">Badge verified</p>
+                                    <p class="text-xs text-emerald-700">Enter your PIN to continue.</p>
+                                </div>
+                            </div>
+                            <div x-show="staffIdentifyMode === 'code'" x-cloak class="flex items-center gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3">
+                                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-violet-100 font-mono text-sm font-bold text-violet-700" x-text="(staffForm.employee_code || '').slice(0, 2).toUpperCase() || '••'"></span>
+                                <div class="min-w-0 text-left">
+                                    <p class="text-sm font-semibold text-slate-900">Employee code</p>
+                                    <p class="truncate font-mono text-xs text-slate-600" x-text="staffForm.employee_code"></p>
+                                </div>
+                            </div>
+                            <div>
+                                <label for="staff-pin" class="mb-1.5 block text-sm font-medium text-slate-600">PIN</label>
+                                <input id="staff-pin"
+                                       type="password"
+                                       inputmode="numeric"
+                                       x-model="staffForm.pin"
+                                       placeholder="4–6 digits"
+                                       maxlength="6"
+                                       autocomplete="off"
+                                       class="w-full rounded-xl border-slate-200 px-4 py-4 text-center text-2xl tracking-[0.35em]">
+                                <p class="mt-2 text-center text-xs text-slate-500">Your personal PIN — not shared with anyone</p>
+                            </div>
+                        </div>
+                    </template>
+
+                    <div class="mt-6">
+                        <button type="button"
+                                @click="staffIdentify()"
+                                :disabled="loading"
+                                class="btn-primary w-full py-3 disabled:opacity-50">
+                            <span x-text="loading ? 'Checking…' : (staffFormStep === 1 ? 'Continue' : 'Verify & continue')"></span>
                        </button>
                    </div>
                </div>
+            </div>
        </template>

        {{-- Employee: actions --}}
@@ -329,18 +434,29 @@
                <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 text-center shadow-sm">
-                    <p class="text-sm font-medium text-indigo-600" x-text="staffEmployee?.status_label"></p>
+                <div class="mx-auto w-full max-w-lg rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+                    <div class="text-center">
+                        <span class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-violet-100 text-xl font-bold text-violet-700"
+                              x-text="(staffEmployee?.full_name || '?').split(' ').map(n => n[0]).join('').slice(0, 2).toUpperCase()"></span>
+                        <p class="mt-4 text-sm font-medium text-violet-600" x-text="staffEmployee?.status_label"></p>
                        <h2 class="mt-1 text-2xl font-bold text-slate-900" x-text="staffEmployee?.full_name"></h2>
                        <p class="mt-1 text-sm text-slate-500" x-show="staffEmployee?.destination" x-text="'Currently: ' + staffEmployee?.destination"></p>
+                    </div>
+
                    <p x-show="errorMessage" x-cloak class="mt-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700" x-text="errorMessage"></p>
-                    <div class="mt-6 space-y-3">
+
+                    <p class="mt-6 mb-3 text-sm font-semibold text-slate-700">What would you like to do?</p>
+                    <div class="space-y-3">
                        <template x-for="action in staffEmployee?.available_actions || []" :key="action">
                            <button type="button"
                                    @click="action === 'step_out' ? openStaffStepOut() : staffPerform(action)"
                                    :disabled="loading"
-                                    class="w-full rounded-xl border border-slate-200 py-4 text-lg font-semibold text-slate-800 transition hover:border-indigo-300 hover:bg-indigo-50 disabled:opacity-50"
-                                    x-text="staffActionLabel(action)"></button>
+                                    class="group flex w-full items-center justify-between rounded-2xl border-2 border-slate-200 px-5 py-4 text-left transition hover:border-violet-300 hover:bg-violet-50 active:scale-[0.99] disabled:opacity-50">
+                                <span class="text-lg font-semibold text-slate-800" x-text="staffActionLabel(action)"></span>
+                                <svg class="h-5 w-5 text-slate-400 transition group-hover:text-violet-600" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+                                </svg>
+                            </button>
                        </template>
                    </div>
                </div>
@@ -354,18 +470,41 @@
                    @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">
-                    <h2 class="text-2xl font-bold text-slate-900">Where are you going?</h2>
-                    <p class="mt-1 text-sm text-slate-500">Let reception know you're stepping out.</p>
-                    <p x-show="errorMessage" x-cloak class="mt-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700" x-text="errorMessage"></p>
-                    <div class="mt-6 space-y-4">
-                        <select x-model="staffStepOut.step_out_reason" class="w-full rounded-xl border-slate-200 px-4 py-4 text-lg">
+                    <div class="mb-6">
+                        <div class="flex items-center justify-between text-xs font-medium text-slate-500">
+                            <span x-text="staffEmployee?.full_name"></span>
+                            <span>Step out</span>
+                        </div>
+                        <div class="mt-2 h-1.5 overflow-hidden rounded-full bg-slate-100">
+                            <div class="h-full w-full rounded-full bg-gradient-to-r from-violet-600 to-indigo-600"></div>
+                        </div>
+                        <p class="mt-2 text-sm font-semibold text-slate-900">Where are you going?</p>
+                        <p class="mt-0.5 text-xs text-slate-500">Reception will know you're away from your desk.</p>
+                    </div>
+
+                    <p x-show="errorMessage" x-cloak class="mb-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700" x-text="errorMessage"></p>
+
+                    <div class="space-y-4">
+                        <div>
+                            <label for="staff-step-out-reason" class="mb-1.5 block text-sm font-medium text-slate-600">Reason</label>
+                            <select id="staff-step-out-reason" x-model="staffStepOut.step_out_reason" class="w-full rounded-xl border-slate-200 px-4 py-4 text-lg">
                                <template x-for="reason in stepOutReasons" :key="reason.key">
                                    <option :value="reason.key" x-text="reason.label"></option>
                                </template>
                            </select>
-                        <input type="text" x-model="staffStepOut.destination" placeholder="Destination (required for Other)" class="w-full rounded-xl border-slate-200 px-4 py-4 text-lg">
-                        <input type="datetime-local" x-model="staffStepOut.expected_return_at" class="w-full rounded-xl border-slate-200 px-4 py-4 text-lg">
-                        <input type="text" x-model="staffStepOut.notes" placeholder="Notes (optional)" class="w-full rounded-xl border-slate-200 px-4 py-4 text-lg">
+                        </div>
+                        <div>
+                            <label for="staff-step-out-destination" class="mb-1.5 block text-sm font-medium text-slate-600">Destination</label>
+                            <input id="staff-step-out-destination" type="text" x-model="staffStepOut.destination" placeholder="Required for Other" class="w-full rounded-xl border-slate-200 px-4 py-4 text-lg">
+                        </div>
+                        <div>
+                            <label for="staff-step-out-return" class="mb-1.5 block text-sm font-medium text-slate-600">Expected return (optional)</label>
+                            <input id="staff-step-out-return" type="datetime-local" x-model="staffStepOut.expected_return_at" class="w-full rounded-xl border-slate-200 px-4 py-4 text-lg">
+                        </div>
+                        <div>
+                            <label for="staff-step-out-notes" class="mb-1.5 block text-sm font-medium text-slate-600">Notes (optional)</label>
+                            <input id="staff-step-out-notes" type="text" x-model="staffStepOut.notes" placeholder="Any extra details" class="w-full rounded-xl border-slate-200 px-4 py-4 text-lg">
+                        </div>
                    </div>
                    <button type="button" @click="submitStaffStepOut()" :disabled="loading" class="btn-primary mt-6 w-full py-3 disabled:opacity-50">
                        <span x-text="loading ? 'Saving…' : 'Confirm step out'"></span>