WIP call in booking

2026-01-24 22:08:36 +00:00
parent 3a8ea4c98f
commit 2ace6d4d87
6 changed files with 330 additions and 41 deletions
@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { authStore } from '$lib/stores/auth.svelte';
+	import { toast } from 'svelte-sonner';
+	import * as Modal from '$lib/components/ui/dialog';
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { Textarea } from '$lib/components/ui/textarea';
+	import { SvelteDate } from 'svelte/reactivity';
+
+	export let open = false;
+	export let initialUserId: string | null = null;
+
+	let userId = initialUserId ?? '';
+	let startTime = new SvelteDate().toISOString().slice(0, 16); // datetime-local
+	let serviceIds: string[] = [];
+	let notes = '';
+
+	// You likely already have this elsewhere
+	let services: Array<{ id: string; name: string }> = [];
+
+	async function loadServices() {
+		const res = await fetch('/api/services');
+		if (res.ok) services = await res.json();
+	}
+
+	async function submit() {
+		if (!userId || serviceIds.length === 0) {
+			toast.error('User and at least one service are required');
+			return;
+		}
+
+		const res = await fetch('/api/admin/bookings', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${authStore.currentToken}`
+			},
+			body: JSON.stringify({
+				user_id: userId,
+				start_time: new Date(startTime).toISOString(),
+				service_ids: serviceIds,
+				notes
+			})
+		});
+
+		if (!res.ok) {
+			const text = await res.text();
+			toast.error(text || 'Failed to create booking');
+			return;
+		}
+
+		toast.success('Booking created and confirmed');
+		open = false;
+	}
+
+	$: if (open) loadServices();
+</script>
+
+<Modal.Root bind:open>
+	<Modal.Content class="max-w-lg">
+		<Modal.Header>
+			<Modal.Title>Create Booking</Modal.Title>
+		</Modal.Header>
+
+		<div class="space-y-4 p-4">
+			<div>
+				<label class="text-xs text-gray-500">User ID</label>
+				<Input bind:value={userId} placeholder="Paste or search user ID" />
+			</div>
+
+			<div>
+				<label class="text-xs text-gray-500">Start Time</label>
+				<Input type="datetime-local" bind:value={startTime} />
+			</div>
+
+			<div>
+				<label class="text-xs text-gray-500">Services</label>
+				<div class="space-y-2">
+					{#each services as service}
+						<label class="flex items-center gap-2 text-sm">
+							<input
+								type="checkbox"
+								value={service.id}
+								onchange={(e) => {
+									const checked = e.currentTarget.checked;
+									serviceIds = checked
+										? [...serviceIds, service.id]
+										: serviceIds.filter((id) => id !== service.id);
+								}}
+							/>
+							{service.name}
+						</label>
+					{/each}
+				</div>
+			</div>
+
+			<div>
+				<label class="text-xs text-gray-500">Staff Notes</label>
+				<Textarea rows={3} bind:value={notes} />
+			</div>
+		</div>
+
+		<Modal.Footer class="flex justify-end gap-2">
+			<Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
+			<Button onclick={submit}>Create & Confirm</Button>
+		</Modal.Footer>
+	</Modal.Content>
+</Modal.Root>