popertots/Crussell
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: admin booking modals with shared formatting and auto-select

Browse Source 
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
popertots
2026-05-29 16:07:26 +01:00
co-authored by Sisyphus
parent 0b3d26914b
commit 96ab71a579
4 changed files with 116 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/admin/BookingCreateModal.svelte
+1 -1
View File
@@ -74,7 +74,7 @@
// Step 4: Date & Time // Step 4: Date & Time
let placeholder = $state<CalendarDate>( let placeholder = $state<CalendarDate>(
new CalendarDate(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()) new CalendarDate(new SvelteDate().getFullYear(), new SvelteDate().getMonth() + 1, new SvelteDate().getDate())
); );
let selectedDate = $state<CalendarDate | undefined>(undefined); let selectedDate = $state<CalendarDate | undefined>(undefined);
let selectedTime = $state<string | null>(null); let selectedTime = $state<string | null>(null);
frontend/src/lib/components/admin/BookingModal.svelte
+70 -58
View File
@@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import { authStore } from '$lib/stores/auth.svelte'; import { authStore } from '$lib/stores/auth.svelte';
import { SvelteDate } from 'svelte/reactivity';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import * as Modal from '$lib/components/ui/dialog'; import * as Modal from '$lib/components/ui/dialog';
import { Button } from '$lib/components/ui/button'; import { Button } from '$lib/components/ui/button';
import ApprovalModal from '$lib/components/admin/ApprovalModal.svelte'; import ApprovalModal from '$lib/components/admin/ApprovalModal.svelte';
import RescheduleModal from '$lib/components/admin/RescheduleModal.svelte'; import RescheduleModal from '$lib/components/admin/RescheduleModal.svelte';
import { formatDuration, formatDateTime, calculateAge } from '$lib/utils/format';
import type { Booking } from '$lib/types/booking'; import type { Booking } from '$lib/types/booking';
interface Props { interface Props {
@@ -52,6 +52,7 @@
created_at: data.created_at, created_at: data.created_at,
updated_at: data.updated_at, updated_at: data.updated_at,
created_by: data.created_by, created_by: data.created_by,
created_by_name: data.created_by_name,
// Deposit fields // Deposit fields
deposit_required: data.deposit_required ?? false, deposit_required: data.deposit_required ?? false,
@@ -221,42 +222,27 @@
<div> <div>
<div class="text-xs text-gray-500">Scheduled Date & Time</div> <div class="text-xs text-gray-500">Scheduled Date & Time</div>
<div class="font-medium"> <div class="font-medium">
{(() => { {formatDateTime(selectedBooking.start_time)}
const date = new SvelteDate(selectedBooking.start_time);
const dateStr = date.toLocaleDateString('en-US', {
weekday: 'long',
day: 'numeric',
month: 'short'
});
const timeStr = date.toLocaleTimeString('en-US', {
hour: 'numeric',
minute: '2-digit',
hour12: true
});
return `${dateStr} at ${timeStr}`;
})()}
</div> </div>
</div> </div>
<div> <div>
<div class="text-xs text-gray-500">Duration</div> <div class="text-xs text-gray-500">Duration</div>
<div class="font-medium">{totalDuration} minutes</div> <div class="font-medium">{formatDuration(totalDuration)}</div>
</div> </div>
<div> <div>
<div class="text-xs text-gray-500">Created</div> <div class="text-xs text-gray-500">Created</div>
<div class="text-sm"> <div class="text-sm">
{new SvelteDate(selectedBooking.created_at).toLocaleString()} {formatDateTime(selectedBooking.created_at)}
</div> </div>
</div> </div>
<div> {#if selectedBooking.created_by_name}
<div class="text-xs text-gray-500">Last Updated</div> <div>
<div class="text-sm"> <div class="text-xs text-gray-500">Booked In By</div>
{new SvelteDate(selectedBooking.updated_at).toLocaleString()} <div class="text-sm">
</div> {selectedBooking.created_by === authStore.currentUser?.id
</div> ? 'yourself'
{#if selectedBooking.created_by} : selectedBooking.created_by_name}
<div class="md:col-span-2"> </div>
<div class="text-xs text-gray-500">Created By</div>
<div class="text-sm">{selectedBooking.created_by}</div>
</div> </div>
{/if} {/if}
</div> </div>
@@ -284,8 +270,8 @@
<div class="mt-1 text-sm text-gray-600">{service.service_description}</div> <div class="mt-1 text-sm text-gray-600">{service.service_description}</div>
{/if} {/if}
<div class="mt-2 flex items-center justify-between text-sm"> <div class="mt-2 flex items-center justify-between text-sm">
<span class="text-gray-600">{service.override_duration_minutes ?? service.duration_minutes} min</span> <span class="text-gray-600">{formatDuration(service.override_duration_minutes ?? service.duration_minutes ?? 0)}</span>
<span class="font-semibold">£{(service.override_price ?? service.price ?? 0).toFixed(2)}</span> <span class="font-semibold">£{(service.override_price ?? service.price ?? 0).toFixed(2)}</span>
</div> </div>
</div> </div>
{/each} {/each}
@@ -298,33 +284,68 @@
<h3 class="mb-3 text-sm font-semibold tracking-wide text-gray-600 uppercase"> <h3 class="mb-3 text-sm font-semibold tracking-wide text-gray-600 uppercase">
Customer Information Customer Information
</h3> </h3>
<div class="mb-4 flex items-center gap-4">
{#if selectedBooking.user?.profile_pic_url}
<img
src={selectedBooking.user.profile_pic_url}
alt={selectedBooking.user.full_name}
class="h-16 w-16 rounded-full object-cover ring-4 ring-blue-200"
/>
{/if}
<div>
<div class="text-lg font-semibold">{selectedBooking.user?.full_name || '—'}</div>
{#if selectedBooking.user?.date_of_birth}
<div class="text-sm text-gray-500">{calculateAge(selectedBooking.user.date_of_birth)} years old</div>
{/if}
</div>
</div>
<div class="grid gap-3 md:grid-cols-2"> <div class="grid gap-3 md:grid-cols-2">
<div>
<div class="text-xs text-gray-500">Name</div>
<div class="font-medium">{selectedBooking.user?.full_name || '—'}</div>
</div>
<div> <div>
<div class="text-xs text-gray-500">Email</div> <div class="text-xs text-gray-500">Email</div>
<div class="font-medium break-words" title={selectedBooking.user?.email}>{selectedBooking.user?.email || '—'}</div> {#if selectedBooking.user?.email}
<a
href="mailto:{selectedBooking.user.email}"
class="font-medium break-words text-blue-600 hover:underline"
>{selectedBooking.user.email}</a>
{:else}
<div class="font-medium">—</div>
{/if}
</div> </div>
<div> <div>
<div class="text-xs text-gray-500">Phone</div> <div class="text-xs text-gray-500">Phone</div>
<div class="font-medium">{selectedBooking.user?.phone || '—'}</div> {#if selectedBooking.user?.phone}
<a
href="tel:{selectedBooking.user.phone}"
class="font-medium text-blue-600 hover:underline"
>{selectedBooking.user.phone}</a>
{:else}
<div class="font-medium">—</div>
{/if}
</div> </div>
<div>
<div class="text-xs text-gray-500">Customer ID</div>
<div class="font-medium">{selectedBooking.user?.id || '—'}</div>
</div>
{#if selectedBooking.user?.loyalty_stamps !== undefined && selectedBooking.user?.loyalty_stamps !== null}
<div>
<div class="text-xs text-gray-500">Loyalty Stamps</div>
<div class="font-medium">{selectedBooking.user.loyalty_stamps}</div>
</div>
{/if}
{#if selectedBooking.user?.referral_code} {#if selectedBooking.user?.referral_code}
<div> <div>
<div class="text-xs text-gray-500">Referral Code</div> <div class="text-xs text-gray-500">Referral Code</div>
<div class="font-medium">{selectedBooking.user.referral_code}</div> <div class="flex items-center gap-1.5">
<code class="rounded bg-gray-200 px-1.5 py-0.5 text-sm font-mono font-medium">
{selectedBooking.user.referral_code}
</code>
<button
type="button"
title="Copy referral code"
class="inline-flex items-center justify-center rounded p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700 transition-colors"
onclick={() => {
navigator.clipboard.writeText(selectedBooking.user!.referral_code!);
toast.success('Referral code copied');
}}
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
</svg>
</button>
</div>
</div> </div>
{/if} {/if}
{#if selectedBooking.user?.referral_code_uses !== undefined && selectedBooking.user?.referral_code_uses !== null} {#if selectedBooking.user?.referral_code_uses !== undefined && selectedBooking.user?.referral_code_uses !== null}
@@ -364,16 +385,7 @@
</span> </span>
{#if !selectedBooking.deposit_paid && selectedBooking.deposit_deadline} {#if !selectedBooking.deposit_paid && selectedBooking.deposit_deadline}
<span class="text-gray-500"> <span class="text-gray-500">
• Due: {new SvelteDate(selectedBooking.deposit_deadline).toLocaleDateString('en-GB', { • Due: {formatDateTime(selectedBooking.deposit_deadline)}
weekday: 'short',
day: 'numeric',
month: 'short',
year: 'numeric'
})} at {new SvelteDate(selectedBooking.deposit_deadline).toLocaleTimeString('en-GB', {
hour: 'numeric',
minute: '2-digit',
hour12: true
})}
</span> </span>
{/if} {/if}
</div> </div>
@@ -411,7 +423,7 @@
Payment History Payment History
</h3> </h3>
<div class="space-y-3"> <div class="space-y-3">
{#each selectedBooking.payments as payment (payment.id)} {#each selectedBooking.payments as payment, index (index)}
<div class="rounded-md border border-gray-300 bg-white p-3"> <div class="rounded-md border border-gray-300 bg-white p-3">
<div class="flex items-start justify-between"> <div class="flex items-start justify-between">
<div class="flex-1"> <div class="flex-1">
@@ -465,7 +477,7 @@
</div> </div>
{/if} {/if}
<div class="mt-1 text-xs text-gray-400"> <div class="mt-1 text-xs text-gray-400">
{new SvelteDate(payment.created_at).toLocaleString()} {formatDateTime(payment.created_at)}
</div> </div>
</div> </div>
<div class="text-right font-semibold"> <div class="text-right font-semibold">
frontend/src/lib/components/admin/WalkInBooking.svelte
+44 -5
View File
@@ -7,7 +7,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import type { AvailableHoursDay } from '$lib/types/booking'; import type { AvailableHoursDay, Service } from '$lib/types/booking';
const RESERVATION_TTL = 15; const RESERVATION_TTL = 15;
@@ -21,7 +21,7 @@
} | null>(null); } | null>(null);
let loading = $state(true); let loading = $state(true);
let noSlotsToday = $state(false); let noSlotsToday = $state(false);
let currentTime = $state(new Date()); let currentTime = $state(new SvelteDate());
let reservationId = $state<string | null>(null); let reservationId = $state<string | null>(null);
let reservationExpiresAt = $state<Date | null>(null); let reservationExpiresAt = $state<Date | null>(null);
@@ -29,11 +29,33 @@
let isReserving = $state(false); let isReserving = $state(false);
let reservedDuration = $state(0); let reservedDuration = $state(0);
let shortestServiceMinutes = $state<number | null>(null);
async function fetchShortestService() {
try {
const response = await fetch('/api/services', {
headers: { Authorization: `Bearer ${authStore.currentToken}` }
});
if (response.ok) {
const services: Service[] = await response.json();
const durations = services
.map((s) => s.duration_minutes)
.filter((d) => d > 0);
if (durations.length > 0) {
shortestServiceMinutes = Math.min(...durations);
}
}
} catch (err) {
console.error('Failed to fetch services', err);
}
}
onMount(() => { onMount(() => {
calculateSlotAvailability(); calculateSlotAvailability();
fetchShortestService();
const interval = setInterval(() => { const interval = setInterval(() => {
currentTime = new Date(); currentTime = new SvelteDate();
}, 60000); }, 60000);
return () => clearInterval(interval); return () => clearInterval(interval);
@@ -235,6 +257,17 @@
(window as any).__walkInCountdownInterval = setInterval(updateCountdown, 1000); (window as any).__walkInCountdownInterval = setInterval(updateCountdown, 1000);
} }
let availableMinutes = $derived.by(() => {
if (!slotInfo) return null;
if (slotInfo.isAvailableNow) return getLiveRemainingMinutes();
return slotInfo.durationMinutes;
});
let tooShortForService = $derived.by(() => {
if (shortestServiceMinutes === null || availableMinutes === null) return false;
return availableMinutes < shortestServiceMinutes;
});
async function handleStartWalkIn() { async function handleStartWalkIn() {
if (!slotInfo) return; if (!slotInfo) return;
@@ -320,10 +353,16 @@
{/if} {/if}
{/if} {/if}
<div class="flex items-center gap-3"> {#if tooShortForService}
<p class="mb-4 text-sm text-amber-600">
Not enough time for any service{shortestServiceMinutes !== null ? ` (shortest service is ${formatDuration(shortestServiceMinutes)})` : ''}
</p>
{/if}
<div class="flex flex-wrap items-center gap-3">
<Button <Button
onclick={handleStartWalkIn} onclick={handleStartWalkIn}
disabled={noSlotsToday || isReserving || (slotInfo?.isAvailableNow && (getLiveRemainingMinutes() ?? 0) <= 0)} disabled={noSlotsToday || isReserving || (slotInfo?.isAvailableNow && (getLiveRemainingMinutes() ?? 0) <= 0) || tooShortForService}
> >
{isReserving ? 'Reserving...' : 'Start Walk-In Session'} {isReserving ? 'Reserving...' : 'Start Walk-In Session'}
</Button> </Button>
frontend/src/lib/components/admin/WalkInCreateModal.svelte
+1 -1
View File
@@ -720,7 +720,7 @@
sessions, etc.) sessions, etc.)
</p> </p>
<div class="space-y-3"> <div class="space-y-3">
{#each selectedServices as service} {#each selectedServices as service (service.id)}
<!-- Safety check to ensure override exists --> <!-- Safety check to ensure override exists -->
{#if serviceOverrides[service.id]} {#if serviceOverrides[service.id]}
<div class="rounded-lg border bg-white p-4"> <div class="rounded-lg border bg-white p-4">