popertots
9259de9393
- Add category filters with dynamic counts that reduce as filters applied - Add ?filter[category]=value URL params for filterable links - Add ?img= timestamp param that bypasses filters to show specific image - Update URL when opening/navigating/closing modal for shareable links - Backend: add /api/portfolio/filters endpoint with filter logic - Backend: add timestamp lookup fallback for GetImage endpoint Frontend: - Portfolio page: filter dropdowns, keyboard nav, mobile improvements - ImageUpload: live tag suggestions from API, arrow/Tab navigation, confirmation modal before upload, mobile-optimized touch targets - Add scrollbar-hide utility and fix filter dropdown overflow - Move Clear all button, add vertical separator on desktop
287 lines
9.0 KiB
Svelte
287 lines
9.0 KiB
Svelte
<script lang="ts">
|
|
import { authStore } from '$lib/stores/auth.svelte';
|
|
import { SvelteDate } from 'svelte/reactivity';
|
|
import { toast } from 'svelte-sonner';
|
|
import * as Modal from '$lib/components/ui/dialog';
|
|
import { Button } from '$lib/components/ui/button';
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
bookingId: string;
|
|
}
|
|
|
|
let { open = $bindable(), bookingId }: Props = $props();
|
|
|
|
type Booking = {
|
|
id: string;
|
|
start_time: string;
|
|
status: string;
|
|
notes?: string;
|
|
created_at: string;
|
|
updated_at: string;
|
|
services: Array<{
|
|
service_name?: string;
|
|
service_description?: string;
|
|
price?: number;
|
|
duration_minutes?: number;
|
|
}>;
|
|
payments: Array<{
|
|
id: string;
|
|
payment_type: string;
|
|
payment_method: string;
|
|
status: string;
|
|
amount: number;
|
|
created_at: string;
|
|
invoice_number?: number;
|
|
is_vat_applicable: boolean;
|
|
vat_amount?: number;
|
|
net_amount?: number;
|
|
vat_rate?: number;
|
|
}>;
|
|
total_amount: number;
|
|
amount_paid: number;
|
|
amount_due: number;
|
|
duration_minutes: number;
|
|
};
|
|
|
|
let selectedBooking = $state<Booking | null>(null);
|
|
let loading = $state(false);
|
|
|
|
let totalDuration = $derived(
|
|
selectedBooking?.services?.reduce((sum, service) => sum + (service.duration_minutes || 0), 0) ||
|
|
0
|
|
);
|
|
|
|
async function fetchBookingDetails() {
|
|
if (!bookingId) return;
|
|
loading = true;
|
|
try {
|
|
const response = await fetch(`/api/bookings/${bookingId}`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: `Bearer ${authStore.currentToken}`
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
selectedBooking = data;
|
|
} else {
|
|
const text = await response.text();
|
|
toast.error('Failed to load booking: ' + text);
|
|
open = false;
|
|
}
|
|
} catch (err) {
|
|
console.error('Error fetching booking:', err);
|
|
toast.error('Network error');
|
|
open = false;
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
}
|
|
|
|
$effect(() => {
|
|
if (!open) {
|
|
setTimeout(() => (selectedBooking = null), 200);
|
|
} else if (bookingId && !selectedBooking) {
|
|
fetchBookingDetails();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<Modal.Root bind:open>
|
|
<Modal.Content class="max-h-[90vh] max-w-sm overflow-y-auto md:max-w-3xl">
|
|
<Modal.Header>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<Modal.Title class="text-lg font-semibold">Booking Details</Modal.Title>
|
|
{#if selectedBooking}
|
|
<div class="mt-1 text-sm text-gray-500">ID: {selectedBooking.id}</div>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if selectedBooking}
|
|
<!-- Logic: Only show chip if Booking is Future OR (Past AND Unpaid) -->
|
|
{@const isPastBooking = new Date(selectedBooking.start_time) < new Date()}
|
|
{@const isUnpaid = selectedBooking.amount_due > 0}
|
|
{@const showChip = !isPastBooking || isUnpaid}
|
|
|
|
{#if showChip}
|
|
<span
|
|
class="inline-flex items-center rounded-full px-3 py-1 text-sm font-medium
|
|
{isPastBooking
|
|
? 'bg-red-100 text-red-800' // Red if past & unpaid
|
|
: selectedBooking.status === 'confirmed' || selectedBooking.status === 'completed'
|
|
? 'bg-emerald-100 text-emerald-800'
|
|
: selectedBooking.status === 'pending'
|
|
? 'bg-amber-100 text-amber-800'
|
|
: 'bg-gray-100 text-gray-800'}"
|
|
>
|
|
{isPastBooking ? 'Unpaid' : selectedBooking.status.replace('_', ' ')}
|
|
</span>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
</Modal.Header>
|
|
|
|
{#if loading}
|
|
<div class="flex items-center justify-center p-8 text-gray-500">Loading...</div>
|
|
{:else if selectedBooking}
|
|
<div class="space-y-6 px-4 pb-4">
|
|
<!-- Appointment Details -->
|
|
<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">
|
|
Appointment Details
|
|
</h3>
|
|
<div class="grid gap-3 md:grid-cols-2">
|
|
<div>
|
|
<div class="text-xs text-gray-500">Scheduled Date & Time</div>
|
|
<div class="font-medium">
|
|
{(() => {
|
|
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 class="text-xs text-gray-500">Duration</div>
|
|
<div class="font-medium">{totalDuration} minutes</div>
|
|
</div>
|
|
{#if selectedBooking.notes}
|
|
<div class="md:col-span-2">
|
|
<div class="text-xs text-gray-500">Notes</div>
|
|
<div class="mt-1 rounded-md border border-gray-300 bg-white p-2 text-sm">
|
|
{selectedBooking.notes}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Services -->
|
|
{#if selectedBooking.services && selectedBooking.services.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">
|
|
Services
|
|
</h3>
|
|
<div class="space-y-3">
|
|
{#each selectedBooking.services as service, index (index)}
|
|
<div class="rounded-md border border-gray-300 bg-white p-3">
|
|
<div class="font-medium">{service.service_name || '—'}</div>
|
|
{#if service.service_description}
|
|
<div class="mt-1 text-sm text-gray-600">{service.service_description}</div>
|
|
{/if}
|
|
<div class="mt-2 flex items-center justify-between text-sm">
|
|
<span class="text-gray-600">{service.duration_minutes} min</span>
|
|
<span class="font-semibold">£{service.price?.toFixed(2) || '0.00'}</span>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Financial Summary -->
|
|
<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">
|
|
Financial Summary
|
|
</h3>
|
|
<div class="space-y-2">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-600">Total Amount</span>
|
|
<span class="font-semibold">£{selectedBooking.total_amount.toFixed(2)}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-600">Amount Paid</span>
|
|
<span class="font-semibold text-green-700"
|
|
>£{selectedBooking.amount_paid.toFixed(2)}</span
|
|
>
|
|
</div>
|
|
<div class="flex items-center justify-between border-t border-gray-300 pt-2">
|
|
<span class="font-medium text-gray-900">Amount Due</span>
|
|
<span
|
|
class="text-lg font-bold {selectedBooking.amount_due > 0
|
|
? 'text-red-600'
|
|
: 'text-green-600'}"
|
|
>
|
|
£{selectedBooking.amount_due.toFixed(2)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payments -->
|
|
{#if selectedBooking.payments && selectedBooking.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">
|
|
Payment History
|
|
</h3>
|
|
<div class="space-y-3">
|
|
{#each selectedBooking.payments as payment (payment.id)}
|
|
<div class="rounded-md border border-gray-300 bg-white p-3">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-medium capitalize"
|
|
>{payment.payment_method.replace('_', ' ')}</span
|
|
>
|
|
<span
|
|
class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium
|
|
{payment.status === 'completed'
|
|
? 'bg-green-100 text-green-800'
|
|
: payment.status === 'pending'
|
|
? 'bg-yellow-100 text-yellow-800'
|
|
: 'bg-gray-100 text-gray-800'}"
|
|
>
|
|
{payment.status}
|
|
</span>
|
|
</div>
|
|
<div class="mt-1 text-xs text-gray-500">
|
|
{payment.payment_type.charAt(0).toUpperCase() +
|
|
payment.payment_type.slice(1)}
|
|
</div>
|
|
{#if payment.is_vat_applicable}
|
|
<div class="mt-2 text-xs text-gray-600">
|
|
<div>Net: £{payment.net_amount?.toFixed(2) || '0.00'}</div>
|
|
{#if payment.vat_amount}
|
|
<div>
|
|
VAT ({(payment.vat_rate || 0) * 100}%): £{payment.vat_amount.toFixed(
|
|
2
|
|
)}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
<div class="mt-1 text-xs text-gray-400">
|
|
{new SvelteDate(payment.created_at).toLocaleString()}
|
|
</div>
|
|
</div>
|
|
<div class="text-right font-semibold">
|
|
£{payment.amount.toFixed(2)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
<Modal.Footer class="flex items-center justify-end gap-2">
|
|
<Button onclick={() => (open = false)}>Close</Button>
|
|
</Modal.Footer>
|
|
</Modal.Content>
|
|
</Modal.Root>
|