popertotsandSisyphus
a44972fbc6
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
841 lines
26 KiB
Svelte
841 lines
26 KiB
Svelte
<script lang="ts">
|
|
import { authStore } from '$lib/stores/auth.svelte';
|
|
import { SvelteDate } from 'svelte/reactivity';
|
|
import { toast } from 'svelte-sonner';
|
|
import { formatDuration } from '$lib/utils/format';
|
|
import * as Modal from '$lib/components/ui/dialog';
|
|
import * as AlertDialog from '$lib/components/ui/alert-dialog';
|
|
import { Button } from '$lib/components/ui/button';
|
|
import { Input } from '$lib/components/ui/input';
|
|
import { Textarea } from '$lib/components/ui/textarea';
|
|
import type { Booking, BookingService, Service } from '$lib/types/booking';
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
bookingId: string;
|
|
nextAppointmentStart?: string | null;
|
|
onSaved?: () => void;
|
|
}
|
|
|
|
let { open = $bindable(), bookingId, nextAppointmentStart = null, onSaved }: Props = $props();
|
|
|
|
let booking = $state<Booking | null>(null);
|
|
let services = $state<BookingService[]>([]);
|
|
let loading = $state(false);
|
|
let saving = $state(false);
|
|
let notes = $state('');
|
|
|
|
let showRemoveConfirm = $state(false);
|
|
let serviceToRemoveIndex = $state(-1);
|
|
let serviceToRemoveName = $state('');
|
|
|
|
let showOverrideModal = $state(false);
|
|
let overrideServiceIndex = $state(-1);
|
|
let overridePrice = $state('');
|
|
let overrideDuration = $state('');
|
|
let overrideOriginalPrice = $state(0);
|
|
let overrideOriginalDuration = $state(0);
|
|
|
|
let showAddServiceModal = $state(false);
|
|
let availableServices = $state<Service[]>([]);
|
|
let loadingServices = $state(false);
|
|
|
|
// Refund dialog state
|
|
let showRefundModal = $state(false);
|
|
let refundPaymentId = $state('');
|
|
let refundAmount = $state('');
|
|
let refundReason = $state('');
|
|
let refundLoading = $state(false);
|
|
|
|
$effect(() => {
|
|
if (open && bookingId) {
|
|
fetchBooking();
|
|
}
|
|
});
|
|
|
|
async function fetchBooking() {
|
|
loading = true;
|
|
try {
|
|
const response = await fetch(`/api/admin/bookings/${bookingId}`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: `Bearer ${authStore.currentToken}`
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
|
|
booking = {
|
|
id: data.id,
|
|
start_time: data.start_time,
|
|
status: data.status,
|
|
notes: data.notes,
|
|
created_at: data.created_at,
|
|
updated_at: data.updated_at,
|
|
created_by: data.created_by,
|
|
deposit_required: data.deposit_required ?? false,
|
|
deposit_amount: data.deposit_amount,
|
|
deposit_paid: data.deposit_paid ?? false,
|
|
deposit_deadline: data.deposit_deadline,
|
|
user: data.user
|
|
? {
|
|
id: data.user.id,
|
|
first_name: data.user.first_name,
|
|
last_name: data.user.last_name,
|
|
full_name: data.user.full_name,
|
|
email: data.user.email,
|
|
phone: data.user.phone,
|
|
profile_pic_url: data.user.profile_pic_url,
|
|
date_of_birth: data.user.date_of_birth,
|
|
account_role: data.user.account_role,
|
|
loyalty_stamps: data.user.loyalty_stamps,
|
|
referral_code: data.user.referral_code,
|
|
referral_code_uses: data.user.referral_code_uses,
|
|
created_at: data.user.created_at,
|
|
notes: data.user.notes
|
|
}
|
|
: undefined,
|
|
services: (data.services || []).map((s: BookingService) => ({
|
|
booking_id: s.booking_id,
|
|
service_id: s.service_id,
|
|
service_name: s.service_name,
|
|
service_description: s.service_description,
|
|
price: s.price,
|
|
duration_minutes: s.duration_minutes,
|
|
override_price: s.override_price,
|
|
override_duration_minutes: s.override_duration_minutes
|
|
})),
|
|
payments: (data.payments || []).map((p) => ({
|
|
id: p.id,
|
|
booking_id: p.booking_id,
|
|
payment_type: p.payment_type,
|
|
payment_method: p.payment_method,
|
|
vendor_code: p.vendor_code,
|
|
invoice_number: p.invoice_number,
|
|
status: p.status,
|
|
amount: p.amount,
|
|
is_vat_applicable: p.is_vat_applicable,
|
|
vat_rate: p.vat_rate,
|
|
vat_amount: p.vat_amount,
|
|
net_amount: p.net_amount,
|
|
created_at: p.created_at,
|
|
updated_at: p.updated_at,
|
|
created_by: p.created_by
|
|
})),
|
|
total_amount: data.total_amount || 0,
|
|
amount_paid: data.amount_paid || 0,
|
|
amount_due: data.amount_due || 0,
|
|
duration_minutes: data.duration_minutes || 0
|
|
};
|
|
|
|
services = booking.services || [];
|
|
notes = booking.notes || '';
|
|
} else {
|
|
const text = await response.text();
|
|
toast.error('Failed to load booking: ' + text);
|
|
}
|
|
} catch (err) {
|
|
console.error('Error fetching booking:', err);
|
|
toast.error('Network error loading booking');
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
}
|
|
|
|
let totalDuration = $derived(
|
|
services.reduce((sum, s) => sum + (s.override_duration_minutes ?? s.duration_minutes ?? 0), 0)
|
|
);
|
|
|
|
let totalPrice = $derived(
|
|
services.reduce((sum, s) => sum + (s.override_price ?? s.price ?? 0), 0)
|
|
);
|
|
|
|
function confirmRemove(index: number) {
|
|
serviceToRemoveIndex = index;
|
|
serviceToRemoveName = services[index]?.service_name || 'this service';
|
|
showRemoveConfirm = true;
|
|
}
|
|
|
|
function removeService() {
|
|
if (serviceToRemoveIndex >= 0 && serviceToRemoveIndex < services.length) {
|
|
services = services.filter((_, i) => i !== serviceToRemoveIndex);
|
|
}
|
|
showRemoveConfirm = false;
|
|
serviceToRemoveIndex = -1;
|
|
}
|
|
|
|
function openOverrideModal(index: number) {
|
|
overrideServiceIndex = index;
|
|
const service = services[index];
|
|
overrideOriginalPrice = service.price ?? 0;
|
|
overrideOriginalDuration = service.duration_minutes ?? 0;
|
|
overridePrice = service.override_price !== undefined ? service.override_price.toFixed(2) : '';
|
|
overrideDuration = service.override_duration_minutes !== undefined ? service.override_duration_minutes.toString() : '';
|
|
showOverrideModal = true;
|
|
}
|
|
|
|
function handlePriceInput(value: string) {
|
|
let cleaned = value.replace(/[^\d.]/g, '');
|
|
const parts = cleaned.split('.');
|
|
if (parts.length > 2) {
|
|
cleaned = parts[0] + '.' + parts.slice(1).join('');
|
|
}
|
|
if (cleaned.includes('.')) {
|
|
const [integer, decimal] = cleaned.split('.');
|
|
if (decimal.length > 2) {
|
|
cleaned = integer + '.' + decimal.substring(0, 2);
|
|
}
|
|
}
|
|
overridePrice = cleaned;
|
|
}
|
|
|
|
function handleDurationInput(value: string) {
|
|
overrideDuration = value.replace(/\D/g, '');
|
|
}
|
|
|
|
function saveOverride() {
|
|
if (overrideServiceIndex < 0 || overrideServiceIndex >= services.length) return;
|
|
|
|
const service = services[overrideServiceIndex];
|
|
const newServices = [...services];
|
|
const updated = { ...service };
|
|
|
|
if (overridePrice !== '') {
|
|
const price = parseFloat(overridePrice);
|
|
if (!isNaN(price)) {
|
|
updated.override_price = price;
|
|
} else {
|
|
delete updated.override_price;
|
|
}
|
|
} else {
|
|
delete updated.override_price;
|
|
}
|
|
|
|
if (overrideDuration !== '') {
|
|
const duration = parseInt(overrideDuration);
|
|
if (!isNaN(duration) && duration > 0) {
|
|
updated.override_duration_minutes = duration;
|
|
} else {
|
|
delete updated.override_duration_minutes;
|
|
}
|
|
} else {
|
|
delete updated.override_duration_minutes;
|
|
}
|
|
|
|
newServices[overrideServiceIndex] = updated;
|
|
services = newServices;
|
|
showOverrideModal = false;
|
|
overrideServiceIndex = -1;
|
|
}
|
|
|
|
async function fetchAvailableServices() {
|
|
loadingServices = true;
|
|
try {
|
|
const response = await fetch('/api/services', {
|
|
headers: {
|
|
Authorization: `Bearer ${authStore.currentToken}`
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
availableServices = data.services || data;
|
|
}
|
|
} catch (err) {
|
|
console.error('Error fetching services:', err);
|
|
toast.error('Failed to load services');
|
|
} finally {
|
|
loadingServices = false;
|
|
}
|
|
}
|
|
|
|
function openAddServiceModal() {
|
|
fetchAvailableServices();
|
|
showAddServiceModal = true;
|
|
}
|
|
|
|
function addService(service: Service) {
|
|
const newService: BookingService = {
|
|
booking_id: bookingId,
|
|
service_id: service.id,
|
|
service_name: service.name,
|
|
service_description: service.description,
|
|
price: service.price,
|
|
duration_minutes: service.duration_minutes
|
|
};
|
|
services = [...services, newService];
|
|
}
|
|
|
|
function isServiceAdded(serviceId: string): boolean {
|
|
return services.some((s) => s.service_id === serviceId);
|
|
}
|
|
|
|
let maxAvailableDuration = $derived.by(() => {
|
|
if (!booking?.start_time || !nextAppointmentStart) return null;
|
|
|
|
const bookingStart = new SvelteDate(booking.start_time).getTime();
|
|
const currentDurationMs = totalDuration * 60 * 1000;
|
|
const bookingEnd = bookingStart + currentDurationMs;
|
|
const nextStart = new SvelteDate(nextAppointmentStart).getTime();
|
|
|
|
const availableMs = nextStart - bookingEnd;
|
|
return Math.max(0, Math.floor(availableMs / (60 * 1000)));
|
|
});
|
|
|
|
let filteredServices = $derived.by(() => {
|
|
return availableServices.filter((s) => {
|
|
if (isServiceAdded(s.id)) return false;
|
|
if (maxAvailableDuration !== null && s.duration_minutes > maxAvailableDuration) return false;
|
|
return true;
|
|
});
|
|
});
|
|
|
|
async function handleSave() {
|
|
saving = true;
|
|
try {
|
|
const payload: Record<string, unknown> = {
|
|
service_ids: services.map((s) => s.service_id),
|
|
service_overrides: services
|
|
.filter(
|
|
(s) =>
|
|
s.override_price !== undefined || s.override_duration_minutes !== undefined
|
|
)
|
|
.map((s) => ({
|
|
service_id: s.service_id,
|
|
...(s.override_price !== undefined ? { override_price: s.override_price } : {}),
|
|
...(s.override_duration_minutes !== undefined
|
|
? { override_duration_minutes: s.override_duration_minutes }
|
|
: {})
|
|
}))
|
|
};
|
|
|
|
if (notes !== booking?.notes) {
|
|
payload.notes = notes || undefined;
|
|
}
|
|
|
|
const response = await fetch(`/api/admin/bookings/${bookingId}`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: `Bearer ${authStore.currentToken}`
|
|
},
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
if (response.ok) {
|
|
toast.success('Booking updated successfully');
|
|
open = false;
|
|
onSaved?.();
|
|
} else {
|
|
const text = await response.text();
|
|
toast.error('Failed to update booking: ' + text);
|
|
}
|
|
} catch (err) {
|
|
console.error('Error saving booking:', err);
|
|
toast.error('Network error saving booking');
|
|
} finally {
|
|
saving = false;
|
|
}
|
|
}
|
|
|
|
function openRefundModal(paymentId: string, amountPence: number) {
|
|
refundPaymentId = paymentId;
|
|
refundAmount = (amountPence / 100).toFixed(2);
|
|
refundReason = '';
|
|
showRefundModal = true;
|
|
}
|
|
|
|
async function processRefund() {
|
|
if (!refundAmount || !refundReason.trim()) {
|
|
toast.error('Please enter a refund amount and reason');
|
|
return;
|
|
}
|
|
|
|
refundLoading = true;
|
|
try {
|
|
const amountPence = Math.round(parseFloat(refundAmount) * 100);
|
|
if (isNaN(amountPence) || amountPence <= 0) {
|
|
toast.error('Invalid refund amount');
|
|
return;
|
|
}
|
|
|
|
const response = await fetch(`/api/admin/payments/${refundPaymentId}/refund`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: `Bearer ${authStore.currentToken}`
|
|
},
|
|
body: JSON.stringify({
|
|
amount: amountPence,
|
|
reason: refundReason.trim()
|
|
})
|
|
});
|
|
|
|
if (response.ok) {
|
|
toast.success('Refund processed');
|
|
showRefundModal = false;
|
|
fetchBooking();
|
|
} else {
|
|
const text = await response.text();
|
|
toast.error('Failed to process refund: ' + text);
|
|
}
|
|
} catch (err) {
|
|
console.error('Error processing refund:', err);
|
|
toast.error('Network error processing refund');
|
|
} finally {
|
|
refundLoading = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<Modal.Root bind:open>
|
|
<Modal.Content class="max-h-[90vh] max-w-[calc(100%-2rem)] overflow-y-auto sm:max-w-md md:max-w-3xl">
|
|
<Modal.Header>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<Modal.Title class="text-lg font-semibold">Edit Booking</Modal.Title>
|
|
{#if booking}
|
|
<div class="mt-1 text-sm text-gray-500">ID: {booking.id}</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</Modal.Header>
|
|
|
|
{#if loading}
|
|
<div class="px-4 pb-4 text-center text-sm text-gray-500">Loading booking...</div>
|
|
{:else if booking}
|
|
<div class="space-y-6 px-4 pb-4">
|
|
<!-- Customer Info -->
|
|
<div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
|
|
<h3 class="mb-3 text-sm font-semibold tracking-wide text-gray-600 uppercase">
|
|
Customer
|
|
</h3>
|
|
<div class="grid gap-3 md:grid-cols-2">
|
|
<div>
|
|
<div class="text-xs text-gray-500">Name</div>
|
|
<div class="font-medium">{booking.user?.full_name || '—'}</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs text-gray-500">Email</div>
|
|
<div class="font-medium break-words" title={booking.user?.email}>{booking.user?.email || '—'}</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs text-gray-500">Phone</div>
|
|
<div class="font-medium">{booking.user?.phone || '—'}</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs text-gray-500">Time</div>
|
|
<div class="font-medium">
|
|
{(() => {
|
|
const date = new SvelteDate(booking.start_time);
|
|
return date.toLocaleTimeString('en-US', {
|
|
hour: 'numeric',
|
|
minute: '2-digit',
|
|
hour12: true
|
|
});
|
|
})()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Services -->
|
|
<div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
|
|
<div class="mb-3 flex items-center justify-between">
|
|
<h3 class="text-sm font-semibold tracking-wide text-gray-600 uppercase">
|
|
Services ({services.length})
|
|
</h3>
|
|
<Button size="sm" onclick={openAddServiceModal}>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="mr-1 h-4 w-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
Add Service
|
|
</Button>
|
|
</div>
|
|
|
|
{#if services.length === 0}
|
|
<div class="rounded-md border border-dashed border-gray-300 p-4 text-center text-sm text-gray-500">
|
|
No services added yet. Click "Add Service" to begin.
|
|
</div>
|
|
{:else}
|
|
<div class="space-y-2">
|
|
{#each services as service, index (index)}
|
|
<div class="flex items-center justify-between rounded-md border border-gray-300 bg-white p-3">
|
|
<div class="flex-1">
|
|
<div class="font-medium">{service.service_name}</div>
|
|
<div class="mt-1 text-sm text-gray-600">
|
|
{formatDuration(service.override_duration_minutes ?? service.duration_minutes ?? 0)} • £{(service.override_price ?? service.price ?? 0).toFixed(2)}
|
|
</div>
|
|
{#if service.override_price !== undefined || service.override_duration_minutes !== undefined}
|
|
<div class="text-xs text-amber-600">Modified</div>
|
|
{/if}
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
class="h-8 w-8"
|
|
onclick={() => openOverrideModal(index)}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-4 w-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
|
|
/>
|
|
</svg>
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
class="h-8 w-8 text-red-600 hover:bg-red-50 hover:text-red-700"
|
|
onclick={() => confirmRemove(index)}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-4 w-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<div class="mt-3 flex items-center justify-between border-t border-gray-200 pt-3 text-sm">
|
|
<span class="text-gray-600">Total: {formatDuration(totalDuration)}</span>
|
|
<span class="font-semibold">£{totalPrice.toFixed(2)}</span>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Payments -->
|
|
{#if booking?.payments && booking.payments.length > 0}
|
|
<div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
|
|
<h3 class="mb-3 text-sm font-semibold tracking-wide text-gray-600 uppercase">
|
|
Payments ({booking.payments.length})
|
|
</h3>
|
|
<div class="space-y-2">
|
|
{#each booking.payments as payment, index (index)}
|
|
<div class="flex items-center justify-between rounded-md border border-gray-300 bg-white p-3">
|
|
<div class="flex-1">
|
|
<div class="font-medium">
|
|
{payment.payment_type === 'deposit' ? 'Deposit' : payment.payment_type === 'full' ? 'Full Payment' : payment.payment_type}
|
|
{#if payment.payment_method}
|
|
<span class="text-gray-500"> via {payment.payment_method}</span>
|
|
{/if}
|
|
</div>
|
|
<div class="mt-1 text-sm text-gray-600">
|
|
<span
|
|
class:text-green-600={payment.status === 'completed'}
|
|
class:text-amber-600={payment.status === 'pending'}
|
|
class:text-red-600={payment.status === 'failed' || payment.status === 'refunded'}
|
|
>
|
|
{payment.status}
|
|
</span>
|
|
<span class="mx-1">|</span>
|
|
£{(payment.amount / 100).toFixed(2)}
|
|
{#if payment.invoice_number}
|
|
<span class="mx-1">|</span>
|
|
<span class="text-gray-500">Inv: {payment.invoice_number}</span>
|
|
{/if}
|
|
</div>
|
|
<div class="mt-1 text-xs text-gray-400">
|
|
{new SvelteDate(payment.created_at).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })}
|
|
</div>
|
|
</div>
|
|
{#if payment.status === 'completed'}
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
class="text-red-600 hover:bg-red-50 hover:text-red-700"
|
|
onclick={() => openRefundModal(payment.id, payment.amount)}
|
|
>
|
|
Refund
|
|
</Button>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Notes -->
|
|
<div>
|
|
<label for="edit-notes" class="mb-2 block text-sm font-medium">Notes</label>
|
|
<Textarea
|
|
id="edit-notes"
|
|
bind:value={notes}
|
|
placeholder="Add any notes about this booking..."
|
|
rows={3}
|
|
class="w-full"
|
|
/>
|
|
{#if notes.trim() !== (booking.notes || '')}
|
|
<div class="mt-1 text-xs text-emerald-600">
|
|
Notes will be saved
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<Modal.Footer class="flex items-center justify-end gap-2">
|
|
<Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
|
|
<Button onclick={handleSave} disabled={saving || loading}>
|
|
{saving ? 'Saving...' : 'Save Changes'}
|
|
</Button>
|
|
</Modal.Footer>
|
|
</Modal.Content>
|
|
</Modal.Root>
|
|
|
|
<!-- Remove Service Confirmation -->
|
|
<AlertDialog.Root bind:open={showRemoveConfirm}>
|
|
<AlertDialog.Content class="z-[60]">
|
|
<AlertDialog.Header>
|
|
<AlertDialog.Title>Remove Service?</AlertDialog.Title>
|
|
<AlertDialog.Description>
|
|
This will remove {serviceToRemoveName} from the booking.
|
|
</AlertDialog.Description>
|
|
</AlertDialog.Header>
|
|
<AlertDialog.Footer>
|
|
<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
|
|
<AlertDialog.Action onclick={removeService} class="bg-red-600 hover:bg-red-700">
|
|
Remove
|
|
</AlertDialog.Action>
|
|
</AlertDialog.Footer>
|
|
</AlertDialog.Content>
|
|
</AlertDialog.Root>
|
|
|
|
<!-- Service Override Submodal -->
|
|
<Modal.Root open={showOverrideModal} onOpenChange={(v) => (showOverrideModal = v)}>
|
|
<Modal.Content class="max-h-[90vh] max-w-sm overflow-y-auto">
|
|
<Modal.Header>
|
|
<Modal.Title class="text-lg font-semibold">Edit Service</Modal.Title>
|
|
<Modal.Description>
|
|
{overrideServiceIndex >= 0 ? services[overrideServiceIndex]?.service_name : ''}
|
|
</Modal.Description>
|
|
</Modal.Header>
|
|
|
|
<div class="space-y-4 px-4 pb-4">
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<div>
|
|
<label for="override-price" class="mb-1 block text-xs text-gray-600">
|
|
Price Override
|
|
</label>
|
|
<div class="relative">
|
|
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
|
<span class="text-gray-500">£</span>
|
|
</div>
|
|
<Input
|
|
id="override-price"
|
|
type="text"
|
|
inputmode="decimal"
|
|
value={overridePrice}
|
|
oninput={(e) => handlePriceInput(e.target.value)}
|
|
onblur={() => {
|
|
if (overridePrice) {
|
|
if (!overridePrice.includes('.')) {
|
|
const num = parseFloat(overridePrice);
|
|
if (!isNaN(num)) {
|
|
overridePrice = num.toFixed(2);
|
|
}
|
|
} else {
|
|
const parts = overridePrice.split('.');
|
|
if (parts[1].length === 0) {
|
|
overridePrice = parts[0] + '.00';
|
|
} else if (parts[1].length === 1) {
|
|
overridePrice = parts[0] + '.' + parts[1] + '0';
|
|
}
|
|
}
|
|
}
|
|
}}
|
|
class="no-spin w-full pl-7"
|
|
placeholder={overrideOriginalPrice.toFixed(2)}
|
|
/>
|
|
</div>
|
|
<div class="mt-1 flex items-center justify-between">
|
|
<div class="text-xs text-gray-500">
|
|
Original: £{overrideOriginalPrice.toFixed(2)}
|
|
</div>
|
|
{#if overridePrice !== '' && parseFloat(overridePrice) !== overrideOriginalPrice}
|
|
<div class="text-xs font-medium text-emerald-600">Changed</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="override-duration" class="mb-1 block text-xs text-gray-600">
|
|
Duration Override (min)
|
|
</label>
|
|
<div class="relative">
|
|
<Input
|
|
id="override-duration"
|
|
type="number"
|
|
min="1"
|
|
step="1"
|
|
value={overrideDuration}
|
|
oninput={(e) => handleDurationInput(e.target.value)}
|
|
class="no-spin w-full"
|
|
placeholder={overrideOriginalDuration.toString()}
|
|
/>
|
|
</div>
|
|
<div class="mt-1 flex items-center justify-between">
|
|
<div class="text-xs text-gray-500">
|
|
Original: {overrideOriginalDuration} min
|
|
</div>
|
|
{#if overrideDuration !== '' && parseInt(overrideDuration) !== overrideOriginalDuration}
|
|
<div class="text-xs font-medium text-emerald-600">Changed</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Modal.Footer class="flex items-center justify-end gap-2">
|
|
<Button variant="outline" onclick={() => (showOverrideModal = false)}>Cancel</Button>
|
|
<Button onclick={saveOverride}>Save</Button>
|
|
</Modal.Footer>
|
|
</Modal.Content>
|
|
</Modal.Root>
|
|
|
|
<!-- Add Service Submodal -->
|
|
<Modal.Root open={showAddServiceModal} onOpenChange={(v) => (showAddServiceModal = v)}>
|
|
<Modal.Content class="max-h-[90vh] max-w-sm overflow-y-auto">
|
|
<Modal.Header>
|
|
<Modal.Title class="text-lg font-semibold">Add Service</Modal.Title>
|
|
<Modal.Description>
|
|
Select a service to add to this booking.
|
|
</Modal.Description>
|
|
</Modal.Header>
|
|
|
|
<div class="space-y-4 px-4 pb-4">
|
|
{#if maxAvailableDuration !== null}
|
|
<div class="rounded-md border border-blue-200 bg-blue-50 p-3 text-sm">
|
|
<div class="font-medium text-blue-800">Available time: {maxAvailableDuration} min</div>
|
|
<div class="text-xs text-blue-600">
|
|
Current total: {totalDuration} min
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if loadingServices}
|
|
<div class="text-center text-sm text-gray-500">Loading services...</div>
|
|
{:else if filteredServices.length === 0}
|
|
<div class="rounded-md border border-dashed border-gray-300 p-4 text-center text-sm text-gray-500">
|
|
{#if availableServices.length === 0}
|
|
No services available.
|
|
{:else}
|
|
All services have been added or exceed available time.
|
|
{/if}
|
|
</div>
|
|
{:else}
|
|
<div class="space-y-2">
|
|
{#each filteredServices as service (service.id)}
|
|
<button
|
|
type="button"
|
|
class="w-full rounded-md border border-gray-300 bg-white p-3 text-left transition-colors hover:bg-gray-50"
|
|
onclick={() => addService(service)}
|
|
>
|
|
<div class="font-medium">{service.name}</div>
|
|
<div class="mt-1 text-sm text-gray-600">
|
|
{service.duration_minutes} min • £{service.price.toFixed(2)}
|
|
</div>
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<Modal.Footer class="flex items-center justify-end">
|
|
<Button onclick={() => (showAddServiceModal = false)}>Close</Button>
|
|
</Modal.Footer>
|
|
</Modal.Content>
|
|
</Modal.Root>
|
|
|
|
<!-- Refund Dialog -->
|
|
<Modal.Root open={showRefundModal} onOpenChange={(v) => (showRefundModal = v)}>
|
|
<Modal.Content class="max-h-[90vh] max-w-sm overflow-y-auto">
|
|
<Modal.Header>
|
|
<Modal.Title class="text-lg font-semibold">Process Refund</Modal.Title>
|
|
<Modal.Description>
|
|
Enter the refund amount and reason.
|
|
</Modal.Description>
|
|
</Modal.Header>
|
|
|
|
<div class="space-y-4 px-4 pb-4">
|
|
<div>
|
|
<label for="refund-amount" class="mb-1 block text-xs text-gray-600">
|
|
Refund Amount
|
|
</label>
|
|
<div class="relative">
|
|
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
|
<span class="text-gray-500">£</span>
|
|
</div>
|
|
<Input
|
|
id="refund-amount"
|
|
type="text"
|
|
inputmode="decimal"
|
|
bind:value={refundAmount}
|
|
class="no-spin w-full pl-7"
|
|
placeholder="0.00"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="refund-reason" class="mb-1 block text-xs text-gray-600">
|
|
Reason (required)
|
|
</label>
|
|
<Textarea
|
|
id="refund-reason"
|
|
bind:value={refundReason}
|
|
placeholder="Enter reason for refund..."
|
|
rows={3}
|
|
class="w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<Modal.Footer class="flex items-center justify-end gap-2">
|
|
<Button variant="outline" onclick={() => (showRefundModal = false)}>Cancel</Button>
|
|
<Button onclick={processRefund} disabled={refundLoading || !refundAmount || !refundReason.trim()}>
|
|
{refundLoading ? 'Processing...' : 'Confirm Refund'}
|
|
</Button>
|
|
</Modal.Footer>
|
|
</Modal.Content>
|
|
</Modal.Root>
|
|
|
|
<style>
|
|
:global(input[type='number']) {
|
|
-moz-appearance: textfield;
|
|
appearance: textfield;
|
|
}
|
|
|
|
:global(input[type='number']::-webkit-outer-spin-button),
|
|
:global(input[type='number']::-webkit-inner-spin-button) {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
</style>
|