Add hero sections to Queue index pages and soften analytics cards.
Deploy Ladill Queue / deploy (push) Successful in 36s

Introduce shared x-qms.page-hero with summary stats across queues,
tickets, counters, admin pages, and insights; remove bordered cards on
Analytics, Reports, Feedback, and Branches list views.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-07-06 07:32:10 +00:00
co-authored by Cursor
parent 29bf896f21
commit bf879d6abe
26 changed files with 850 additions and 526 deletions
@@ -1,47 +1,64 @@
@php
$canManageAppointments = app(\App\Services\Qms\QmsPermissions::class)->can(
app(\App\Services\Qms\OrganizationResolver::class)->memberFor(auth()->user()),
'appointments.manage'
);
@endphp
<x-app-layout title="Appointments">
<div class="mb-6 flex items-center justify-between">
<div>
<h1 class="text-2xl font-semibold text-slate-900 dark:text-white">Appointments</h1>
<p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Schedule and check in pre-booked customers.</p>
</div>
@if(app(\App\Services\Qms\QmsPermissions::class)->can(app(\App\Services\Qms\OrganizationResolver::class)->memberFor(auth()->user()), 'appointments.manage'))
<a href="{{ route('qms.appointments.create') }}" class="btn-primary">New appointment</a>
@endif
</div>
@include('partials.flash')
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">
<table class="min-w-full divide-y divide-slate-200 dark:divide-slate-700">
<thead class="bg-slate-50 dark:bg-slate-800">
<tr>
<th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Customer</th>
<th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Scheduled</th>
<th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Queue</th>
<th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Status</th>
<th class="px-4 py-3"></th>
</tr>
</thead>
<tbody class="divide-y divide-slate-200 dark:divide-slate-700">
@forelse ($appointments as $appointment)
<div class="space-y-6">
<x-qms.page-hero
badge="Pre-booked · Check-in · Tickets"
title="Appointments"
description="Schedule and check in pre-booked customers — checked-in appointments can issue queue tickets automatically."
:stats="[
['value' => number_format($heroStats['today']), 'label' => 'Today'],
['value' => number_format($heroStats['scheduled']), 'label' => 'Scheduled'],
['value' => number_format($heroStats['checked_in']), 'label' => 'Checked in'],
]">
@if ($canManageAppointments)
<x-slot name="actions">
<a href="{{ route('qms.appointments.create') }}" class="btn-primary">New appointment</a>
</x-slot>
@endif
</x-qms.page-hero>
@include('partials.flash')
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
<table class="min-w-full divide-y divide-slate-200">
<thead class="bg-slate-50">
<tr>
<td class="px-4 py-3 text-sm">{{ $appointment->customer_name }}</td>
<td class="px-4 py-3 text-sm">{{ $appointment->scheduled_at->format('M j, H:i') }}</td>
<td class="px-4 py-3 text-sm">{{ $appointment->serviceQueue?->name ?? '—' }}</td>
<td class="px-4 py-3 text-sm capitalize">{{ str_replace('_', ' ', $appointment->status) }}</td>
<td class="px-4 py-3 text-right text-sm">
@if ($appointment->status === 'scheduled')
<a href="{{ route('qms.appointments.edit', $appointment) }}" class="text-indigo-600">Edit</a>
<form method="POST" action="{{ route('qms.appointments.check-in', $appointment) }}" class="inline ml-2">@csrf<button class="text-indigo-600">Check in</button></form>
<form method="POST" action="{{ route('qms.appointments.cancel', $appointment) }}" class="inline ml-2">@csrf<button class="text-amber-600">Cancel</button></form>
@elseif ($appointment->ticket)
<a href="{{ route('qms.tickets.show', $appointment->ticket) }}" class="text-indigo-600">View ticket</a>
@endif
</td>
<th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Customer</th>
<th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Scheduled</th>
<th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Queue</th>
<th class="px-4 py-3 text-left text-xs font-semibold uppercase text-slate-500">Status</th>
<th class="px-4 py-3"></th>
</tr>
@empty
<tr><td colspan="5" class="px-6 py-12 text-center text-sm text-slate-500">No appointments yet.</td></tr>
@endforelse
</tbody>
</table>
</thead>
<tbody class="divide-y divide-slate-200">
@forelse ($appointments as $appointment)
<tr>
<td class="px-4 py-3 text-sm">{{ $appointment->customer_name }}</td>
<td class="px-4 py-3 text-sm">{{ $appointment->scheduled_at->format('M j, H:i') }}</td>
<td class="px-4 py-3 text-sm">{{ $appointment->serviceQueue?->name ?? '—' }}</td>
<td class="px-4 py-3 text-sm capitalize">{{ str_replace('_', ' ', $appointment->status) }}</td>
<td class="px-4 py-3 text-right text-sm">
@if ($appointment->status === 'scheduled')
<a href="{{ route('qms.appointments.edit', $appointment) }}" class="text-indigo-600">Edit</a>
<form method="POST" action="{{ route('qms.appointments.check-in', $appointment) }}" class="inline ml-2">@csrf<button class="text-indigo-600">Check in</button></form>
<form method="POST" action="{{ route('qms.appointments.cancel', $appointment) }}" class="inline ml-2">@csrf<button class="text-amber-600">Cancel</button></form>
@elseif ($appointment->ticket)
<a href="{{ route('qms.tickets.show', $appointment->ticket) }}" class="text-indigo-600">View ticket</a>
@endif
</td>
</tr>
@empty
<tr><td colspan="5" class="px-6 py-12 text-center text-sm text-slate-500">No appointments yet.</td></tr>
@endforelse
</tbody>
</table>
</div>
<div>{{ $appointments->links() }}</div>
</div>
<div class="mt-4">{{ $appointments->links() }}</div>
</x-app-layout>