Add queue kiosk and display devices for Care Queue management.
Deploy Ladill Care / deploy (push) Successful in 39s
Deploy Ladill Care / deploy (push) Successful in 39s
Register walk-up kiosks and waiting-room display devices under Devices, with public kiosk ticket issue and linked TV boards surfaced in sidebar and Queue shortcuts. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
@@ -0,0 +1,142 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<meta name="theme-color" content="#f1f5f9">
|
||||
<title>{{ $device->name }} · Care Kiosk</title>
|
||||
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700&display=swap" rel="stylesheet">
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
<style>
|
||||
@keyframes kiosk-tap-pulse {
|
||||
0%, 100% { transform: scale(1); box-shadow: 0 20px 40px -12px rgb(13 148 136 / 0.45); }
|
||||
50% { transform: scale(1.02); box-shadow: 0 24px 48px -10px rgb(13 148 136 / 0.55); }
|
||||
}
|
||||
.kiosk-tap-btn { animation: kiosk-tap-pulse 2.4s ease-in-out infinite; }
|
||||
[x-cloak] { display: none !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body
|
||||
class="min-h-screen bg-slate-100 font-sans text-slate-900 antialiased"
|
||||
x-data="careKioskFlow(@js([
|
||||
'issueUrl' => route('care.kiosk.device.issue', $kioskToken),
|
||||
'csrf' => csrf_token(),
|
||||
'queues' => $queues->map(fn ($q) => [
|
||||
'id' => $q->id,
|
||||
'name' => $q->name,
|
||||
])->values()->all(),
|
||||
'collectName' => $settings['collect_name'],
|
||||
'collectPhone' => $settings['collect_phone'],
|
||||
'resetSeconds' => $settings['reset_seconds'],
|
||||
'welcomeMessage' => $settings['welcome_message'] ?? null,
|
||||
]))"
|
||||
x-init="startTimer()"
|
||||
>
|
||||
<div class="pointer-events-none fixed inset-0 overflow-hidden" aria-hidden="true">
|
||||
<div class="absolute -left-24 top-0 h-72 w-72 rounded-full bg-teal-200/40 blur-3xl"></div>
|
||||
<div class="absolute -right-16 bottom-0 h-80 w-80 rounded-full bg-sky-200/40 blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div class="fixed inset-x-0 top-0 z-10 h-1.5 bg-gradient-to-r from-teal-600 to-sky-600"></div>
|
||||
|
||||
<div class="fixed left-0 top-0 z-20 p-6">
|
||||
<img src="{{ $logoUrl }}" alt="{{ $logoAlt }}" class="h-8 w-auto max-w-[220px] object-contain object-left">
|
||||
</div>
|
||||
|
||||
<div class="relative mx-auto flex min-h-screen max-w-3xl flex-col pt-20">
|
||||
<template x-if="step === 'welcome'">
|
||||
<div class="flex min-h-[calc(100vh-5rem)] flex-col items-center justify-center px-6 py-12 text-center">
|
||||
<div class="max-w-xl">
|
||||
<p class="text-sm font-semibold uppercase tracking-wider text-teal-700">Ladill Care</p>
|
||||
<h1 class="mt-3 text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl">
|
||||
Welcome to {{ $organization?->name ?? 'Care' }}
|
||||
</h1>
|
||||
<p class="mt-4 text-lg text-slate-500" x-text="welcomeMessage || 'Tap below to get your ticket'"></p>
|
||||
</div>
|
||||
<button type="button" @click="beginKiosk()" class="kiosk-tap-btn btn-primary mt-16 w-full max-w-lg py-8 text-xl font-bold" :disabled="loading">
|
||||
<span x-show="!loading">Tap to begin</span>
|
||||
<span x-show="loading">Please wait…</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template x-if="step === 'select'">
|
||||
<div class="relative flex min-h-[calc(100vh-5rem)] flex-col items-center justify-center px-6 py-12">
|
||||
<button type="button" @click="goBack()" class="absolute left-6 top-8 z-10 text-sm font-medium text-slate-500 hover:text-slate-800">← Back</button>
|
||||
<div class="max-w-xl text-center">
|
||||
<h2 class="text-2xl font-bold text-slate-900 sm:text-3xl">Choose a service</h2>
|
||||
<p class="mt-2 text-slate-500">Select an option to get your ticket</p>
|
||||
</div>
|
||||
|
||||
<template x-if="queues.length >= 1">
|
||||
<div class="mt-12 grid w-full max-w-2xl gap-4" :class="queues.length > 1 ? 'sm:grid-cols-2' : ''">
|
||||
<template x-for="queue in queues" :key="queue.id">
|
||||
<button
|
||||
type="button"
|
||||
class="group flex flex-col items-center rounded-3xl border-2 border-slate-200 bg-white px-6 py-10 text-center shadow-sm transition hover:border-teal-300 hover:shadow-md active:scale-[0.98]"
|
||||
:disabled="loading"
|
||||
@click="selectQueue(queue.id)"
|
||||
>
|
||||
<span class="text-xl font-bold text-slate-900" x-text="queue.name"></span>
|
||||
<span class="mt-1 text-sm text-slate-500">Tap to get ticket</span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template x-if="queues.length === 0">
|
||||
<div class="mt-12 w-full max-w-lg rounded-3xl border border-slate-200 bg-white p-8 text-center shadow-sm">
|
||||
<p class="text-lg font-semibold text-slate-900">No services available</p>
|
||||
<p class="mt-2 text-sm text-slate-500">Ask a staff member for assistance.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<p x-show="error" x-cloak class="mt-6 max-w-lg rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700" x-text="error"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template x-if="step === 'details'">
|
||||
<div class="relative flex min-h-[calc(100vh-5rem)] flex-col justify-center px-6 py-8">
|
||||
<button type="button" @click="goBack()" class="absolute left-6 top-8 z-10 text-sm font-medium text-slate-500 hover:text-slate-800">← Back</button>
|
||||
<div class="mx-auto w-full max-w-lg rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<p class="text-sm font-semibold text-slate-900">Your details</p>
|
||||
<p x-show="error" x-cloak class="mt-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700" x-text="error"></p>
|
||||
<div class="mt-4 space-y-4">
|
||||
<div x-show="collectName">
|
||||
<label class="block text-sm font-medium text-slate-600">Name</label>
|
||||
<input type="text" x-model="customerName" placeholder="Your name" autocomplete="name" class="mt-1 w-full rounded-xl border-slate-200 px-4 py-4 text-lg">
|
||||
</div>
|
||||
<div x-show="collectPhone">
|
||||
<label class="block text-sm font-medium text-slate-600">Phone</label>
|
||||
<input type="tel" x-model="customerPhone" placeholder="Phone number" autocomplete="tel" class="mt-1 w-full rounded-xl border-slate-200 px-4 py-4 text-lg">
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn-primary mt-6 w-full py-3" @click="issue()" :disabled="loading">
|
||||
<span x-show="!loading">Get ticket</span>
|
||||
<span x-show="loading">Please wait…</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template x-if="step === 'ticket' && ticket">
|
||||
<div class="flex min-h-[calc(100vh-5rem)] flex-col items-center justify-center px-6 py-8">
|
||||
<div class="w-full max-w-lg rounded-3xl border border-slate-200 bg-white p-8 text-center shadow-sm">
|
||||
<div class="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-full bg-teal-100 text-4xl text-teal-700">✓</div>
|
||||
<h2 class="text-2xl font-bold text-slate-900">You're in the queue!</h2>
|
||||
<p class="mt-4 text-sm font-semibold uppercase tracking-wider text-slate-500">Your ticket number</p>
|
||||
<p class="mt-2 text-5xl font-bold tracking-tight text-slate-900" x-text="ticket?.ticket_number"></p>
|
||||
<p class="mt-2 text-sm text-slate-500" x-show="ticket?.queue?.name" x-text="ticket?.queue?.name"></p>
|
||||
<p class="mt-6 text-sm text-slate-500">Please take a seat. Your number will be called on the display.</p>
|
||||
<button type="button" class="btn-primary mt-8 w-full py-3 text-lg" @click="reset()">
|
||||
Done
|
||||
<span x-show="resetCountdown" x-text="'(' + resetCountdown + 's)'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user