@lavalogic/scoria 0.36.0 → 0.37.0

package/dist/Components/AppointmentCalendar/AppointmentCalendar.svelte

@@ -0,0 +1,1126 @@
+<svelte:options runes />
+
+<script lang="ts">
+	import { Colour } from '../../scss/colours.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import Button from '../Button.svelte';
+	import Icon from '../Icon.svelte';
+	import LoadingOverlay from '../LoadingOverlay.svelte';
+	import { CalendarViewMode } from './AppointmentCalendarProps.js';
+	import type {
+		AppointmentCalendarProps,
+		CalendarAppointment,
+		DragSelection,
+	} from './AppointmentCalendarProps.js';
+
+	let {
+		doors,
+		appointments,
+		selectedDate,
+		viewMode,
+		ondatechange,
+		onviewmodechange,
+		ondragcreate,
+		onappointmentclick,
+		onappointmentmove,
+		startHour = 0,
+		endHour = 24,
+		slotIntervalMinutes = 15,
+		isLoading = false,
+		headerExtra,
+	}: AppointmentCalendarProps = $props();
+
+	/**
+	 * `selectedDate` is always read by the component, never written. The
+	 * runtime type may be either a plain `Date` or a `SvelteDate`; both
+	 * expose the same `Date` interface that we use here. Cast to `Date`
+	 * for narrowing inside the script.
+	 */
+	const selected = $derived(selectedDate as Date);
+
+	/**
+	 * Today's reference Date hoisted out of the per-cell loops so that
+	 * rendering the month grid does not allocate 42 fresh `Date`
+	 * instances on every state change. `$derived` does not invalidate
+	 * over time on its own; if you need real day-rollover semantics
+	 * track it with a `SvelteDate` and a `setInterval`.
+	 */
+	const today = $derived(new Date());
+
+	// ---- Date helpers ----
+
+	const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+	const monthNames = [
+		'January',
+		'February',
+		'March',
+		'April',
+		'May',
+		'June',
+		'July',
+		'August',
+		'September',
+		'October',
+		'November',
+		'December',
+	];
+
+	function formatDate(d: Date): string {
+		if (viewMode === CalendarViewMode.Month) {
+			return `${monthNames[d.getMonth()]} ${d.getFullYear()}`;
+		}
+		return `${dayNames[d.getDay()]} ${d.getDate()} ${monthNames[d.getMonth()]} ${d.getFullYear()}`;
+	}
+
+	function sameDay(a: Date, b: Date): boolean {
+		return (
+			a.getFullYear() === b.getFullYear() &&
+			a.getMonth() === b.getMonth() &&
+			a.getDate() === b.getDate()
+		);
+	}
+
+	function addDays(d: Date, n: number): Date {
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		const result = new Date(d);
+		result.setDate(result.getDate() + n);
+		return result;
+	}
+
+	function navigateDate(direction: number): void {
+		if (viewMode === CalendarViewMode.Day) {
+			ondatechange(addDays(selected, direction));
+		} else if (viewMode === CalendarViewMode.Week) {
+			ondatechange(addDays(selected, direction * 7));
+		} else {
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity
+			const d = new Date(selected);
+			d.setMonth(d.getMonth() + direction);
+			ondatechange(d);
+		}
+	}
+
+	function goToToday(): void {
+		ondatechange(new Date());
+	}
+
+	// ---- Time slot generation ----
+
+	const timeSlots: Array<{ hour: number; minute: number; label: string }> = $derived.by(() => {
+		const slots: Array<{ hour: number; minute: number; label: string }> = [];
+		for (let h = startHour; h < endHour; h++) {
+			for (let m = 0; m < 60; m += slotIntervalMinutes) {
+				const hh = String(h).padStart(2, '0');
+				const mm = String(m).padStart(2, '0');
+				slots.push({ hour: h, minute: m, label: `${hh}:${mm}` });
+			}
+		}
+		return slots;
+	});
+
+	// ---- Appointment positioning (day view) ----
+
+	type PositionedAppointment = CalendarAppointment & {
+		readonly topPercent: number;
+		readonly heightPercent: number;
+	};
+
+	/**
+	 * Build a `YYYY-MM-DD` key for date bucketing. Avoids `toISOString`
+	 * timezone conversions that would smear appointments across days.
+	 */
+	function dayKey(d: Date): string {
+		const y = d.getFullYear();
+		const m = String(d.getMonth() + 1).padStart(2, '0');
+		const day = String(d.getDate()).padStart(2, '0');
+		return `${y}-${m}-${day}`;
+	}
+
+	/**
+	 * Precomputed `Map<doorId, Map<dayKey, PositionedAppointment[]>>` for
+	 * day and week views. Replaces the previous per-cell
+	 * `appointments.filter(...)` calls which were `O(doors * appointments)`
+	 * per render and allocated a fresh `Date` per appointment per pass.
+	 */
+	const positionedByDoorAndDay = $derived.by(() => {
+		const totalMinutes = (endHour - startHour) * 60;
+		// Local indexes built inside a $derived; outer reactivity already covers reads.
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		const byDoor = new Map<number, Map<string, Array<PositionedAppointment>>>();
+		for (const apt of appointments) {
+			const from = new Date(apt.dateFrom);
+			const to = new Date(apt.dateTo);
+			const startMin = (from.getHours() - startHour) * 60 + from.getMinutes();
+			const endMin = (to.getHours() - startHour) * 60 + to.getMinutes();
+			const durationMin = Math.max(endMin - startMin, slotIntervalMinutes);
+			const positioned: PositionedAppointment = {
+				...apt,
+				topPercent: (Math.max(0, startMin) / totalMinutes) * 100,
+				heightPercent: (Math.min(durationMin, totalMinutes - startMin) / totalMinutes) * 100,
+			};
+			const key = dayKey(from);
+			let perDay = byDoor.get(apt.segmentId);
+			if (!perDay) {
+				// eslint-disable-next-line svelte/prefer-svelte-reactivity
+				perDay = new Map();
+				byDoor.set(apt.segmentId, perDay);
+			}
+			const list = perDay.get(key);
+			if (list) {
+				list.push(positioned);
+			} else {
+				perDay.set(key, [positioned]);
+			}
+		}
+		return byDoor;
+	});
+
+	function appointmentsAt(doorId: number, day: Date): ReadonlyArray<PositionedAppointment> {
+		return positionedByDoorAndDay.get(doorId)?.get(dayKey(day)) ?? [];
+	}
+
+	/**
+	 * Precomputed appointment-count badges per day for the month view.
+	 * Replaces the previous `O(cells * doors * appointments)` recomputation
+	 * which scaled to ~42 000 ops on a single render with 10 doors and
+	 * 100 appointments.
+	 */
+	const countsByDay = $derived.by(() => {
+		// Local indexes built inside a $derived; outer reactivity already covers reads.
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		const map = new Map<string, Array<{ doorId: number; doorName: string; count: number }>>();
+		// One scan over appointments builds a nested Map<dayKey, Map<doorId, count>>.
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		const intermediate = new Map<string, Map<number, number>>();
+		for (const apt of appointments) {
+			const key = dayKey(new Date(apt.dateFrom));
+			let perDay = intermediate.get(key);
+			if (!perDay) {
+				// eslint-disable-next-line svelte/prefer-svelte-reactivity
+				perDay = new Map();
+				intermediate.set(key, perDay);
+			}
+			perDay.set(apt.segmentId, (perDay.get(apt.segmentId) ?? 0) + 1);
+		}
+		// Flatten to the door-ordered list the markup expects.
+		for (const [key, perDay] of intermediate) {
+			const list: Array<{ doorId: number; doorName: string; count: number }> = [];
+			for (const door of doors) {
+				const count = perDay.get(door.id);
+				if (count) {
+					list.push({ doorId: door.id, doorName: door.name, count });
+				}
+			}
+			if (list.length > 0) {
+				map.set(key, list);
+			}
+		}
+		return map;
+	});
+
+	function countsAt(day: Date): ReadonlyArray<{ doorId: number; doorName: string; count: number }> {
+		return countsByDay.get(dayKey(day)) ?? [];
+	}
+
+	// ---- Click and drag logic ----
+
+	let isDragging = $state(false);
+	let dragDoorId: number | null = $state(null);
+	let dragStartSlotIndex: number | null = $state(null);
+	let dragEndSlotIndex: number | null = $state(null);
+
+	function onSlotMouseDown(doorId: number, slotIndex: number): void {
+		if (!ondragcreate || appointmentDragStarted) {
+			return;
+		}
+		isDragging = true;
+		dragDoorId = doorId;
+		dragStartSlotIndex = slotIndex;
+		dragEndSlotIndex = slotIndex;
+	}
+
+	function onSlotMouseEnter(doorId: number, slotIndex: number): void {
+		// Appointment move drag
+		if (appointmentDragStarted) {
+			isDraggingAppointment = true;
+			moveTargetDoorId = doorId;
+			moveTargetSlotIndex = slotIndex;
+			return;
+		}
+		// Slot drag-create
+		if (!isDragging || doorId !== dragDoorId) {
+			return;
+		}
+		dragEndSlotIndex = slotIndex;
+	}
+
+	function onSlotMouseUp(): void {
+		// ---- Handle appointment drag-move ----
+		if (
+			isDraggingAppointment &&
+			draggedAppointment &&
+			moveTargetDoorId != null &&
+			moveTargetSlotIndex != null
+		) {
+			const slot = timeSlots[moveTargetSlotIndex];
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity
+			const newDateFrom = new Date(selected);
+			newDateFrom.setHours(slot.hour, slot.minute, 0, 0);
+			const newDateTo = new Date(
+				newDateFrom.getTime() + draggedAptSlotCount * slotIntervalMinutes * 60000
+			);
+
+			// Check whether the position actually changed
+			const origFrom = new Date(draggedAppointment.dateFrom);
+			const samePosition =
+				moveTargetDoorId === draggedAppointment.segmentId &&
+				newDateFrom.getTime() === origFrom.getTime();
+
+			if (samePosition) {
+				// Dropped in the same spot - treat as a click
+				onappointmentclick?.(draggedAppointment);
+			} else if (!hasOverlap(moveTargetDoorId, newDateFrom, newDateTo, draggedAppointment.id)) {
+				const door = doors.find((d) => d.id === moveTargetDoorId);
+				onappointmentmove?.({
+					appointment: draggedAppointment,
+					newDoorId: moveTargetDoorId,
+					newDoorName: door?.name ?? '',
+					newDateFrom,
+					newDateTo,
+				});
+			}
+
+			resetAppointmentDrag();
+			return;
+		}
+
+		// ---- Handle appointment click (mousedown + mouseup without leaving the block) ----
+		if (appointmentDragStarted && !isDraggingAppointment && draggedAppointment) {
+			onappointmentclick?.(draggedAppointment);
+			resetAppointmentDrag();
+			return;
+		}
+
+		resetAppointmentDrag();
+
+		// ---- Handle drag-create ----
+		if (
+			!isDragging ||
+			dragDoorId == null ||
+			dragStartSlotIndex == null ||
+			dragEndSlotIndex == null
+		) {
+			return;
+		}
+
+		const startIdx = Math.min(dragStartSlotIndex, dragEndSlotIndex);
+		const endIdx = Math.max(dragStartSlotIndex, dragEndSlotIndex);
+
+		const startSlot = timeSlots[startIdx];
+		const endSlot = timeSlots[endIdx];
+
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		const dateFrom = new Date(selected);
+		dateFrom.setHours(startSlot.hour, startSlot.minute, 0, 0);
+
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		const dateTo = new Date(selected);
+		// End slot is the start of the last selected slot; add one interval for the end time
+		dateTo.setHours(endSlot.hour, endSlot.minute + slotIntervalMinutes, 0, 0);
+
+		const door = doors.find((d) => d.id === dragDoorId);
+
+		const selection: DragSelection = {
+			doorId: dragDoorId,
+			doorName: door?.name ?? '',
+			dateFrom,
+			dateTo,
+		};
+
+		isDragging = false;
+		dragDoorId = null;
+		dragStartSlotIndex = null;
+		dragEndSlotIndex = null;
+
+		ondragcreate?.(selection);
+	}
+
+	function isSlotInDragRange(doorId: number, slotIndex: number): boolean {
+		if (!isDragging || doorId !== dragDoorId) {
+			return false;
+		}
+		if (dragStartSlotIndex == null || dragEndSlotIndex == null) {
+			return false;
+		}
+		const min = Math.min(dragStartSlotIndex, dragEndSlotIndex);
+		const max = Math.max(dragStartSlotIndex, dragEndSlotIndex);
+		return slotIndex >= min && slotIndex <= max;
+	}
+
+	// ---- Row hover tracking ----
+
+	let hoveredSlotIndex: number | null = $state(null);
+
+	// ---- Appointment drag-move logic ----
+
+	let appointmentDragStarted = $state(false);
+	let isDraggingAppointment = $state(false);
+	let draggedAppointment: CalendarAppointment | null = $state(null);
+	let draggedAptSlotCount = $state(0);
+	let moveTargetDoorId: number | null = $state(null);
+	let moveTargetSlotIndex: number | null = $state(null);
+
+	function onAppointmentMouseDown(apt: CalendarAppointment, e: MouseEvent): void {
+		if (!onappointmentmove) {
+			return;
+		}
+		e.preventDefault();
+		appointmentDragStarted = true;
+		draggedAppointment = apt;
+
+		const from = new Date(apt.dateFrom);
+		const to = new Date(apt.dateTo);
+		const durationMin = (to.getTime() - from.getTime()) / 60000;
+		draggedAptSlotCount = Math.max(1, Math.ceil(durationMin / slotIntervalMinutes));
+	}
+
+	function resetAppointmentDrag(): void {
+		appointmentDragStarted = false;
+		isDraggingAppointment = false;
+		draggedAppointment = null;
+		draggedAptSlotCount = 0;
+		moveTargetDoorId = null;
+		moveTargetSlotIndex = null;
+	}
+
+	function isSlotInMoveTarget(doorId: number, slotIndex: number): boolean {
+		if (!isDraggingAppointment || moveTargetDoorId !== doorId) {
+			return false;
+		}
+		if (moveTargetSlotIndex == null) {
+			return false;
+		}
+		return (
+			slotIndex >= moveTargetSlotIndex && slotIndex < moveTargetSlotIndex + draggedAptSlotCount
+		);
+	}
+
+	function hasOverlap(doorId: number, dateFrom: Date, dateTo: Date, excludeAptId: number): boolean {
+		return appointments.some((apt) => {
+			if (apt.id === excludeAptId) {
+				return false;
+			}
+			if (apt.segmentId !== doorId) {
+				return false;
+			}
+			const aptFrom = new Date(apt.dateFrom);
+			const aptTo = new Date(apt.dateTo);
+			return dateFrom < aptTo && dateTo > aptFrom;
+		});
+	}
+
+	// ---- Month view helpers ----
+
+	function getMonthDays(date: Date): Array<{ date: Date; isCurrentMonth: boolean }> {
+		const year = date.getFullYear();
+		const month = date.getMonth();
+
+		const firstDayOfMonth = new Date(year, month, 1);
+
+		// Start from Monday of the week containing the first day
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		const startDate = new Date(firstDayOfMonth);
+		const dayOfWeek = startDate.getDay();
+		const daysFromMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+		startDate.setDate(startDate.getDate() - daysFromMonday);
+
+		const days: Array<{ date: Date; isCurrentMonth: boolean }> = [];
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		const current = new Date(startDate);
+
+		// Generate 6 weeks (42 days) to fill the grid
+		for (let i = 0; i < 42; i++) {
+			days.push({
+				date: new Date(current),
+				isCurrentMonth: current.getMonth() === month,
+			});
+			current.setDate(current.getDate() + 1);
+		}
+
+		return days;
+	}
+
+	/** Cached month grid; rebuilt only when `selected` changes. */
+	const monthDays = $derived(getMonthDays(selected));
+
+	// ---- Week view helpers ----
+
+	function getWeekDays(date: Date): Array<Date> {
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		const d = new Date(date);
+		const day = d.getDay();
+		const mondayOffset = day === 0 ? -6 : 1 - day;
+		d.setDate(d.getDate() + mondayOffset);
+
+		const week: Array<Date> = [];
+		for (let i = 0; i < 7; i++) {
+			week.push(new Date(d));
+			d.setDate(d.getDate() + 1);
+		}
+		return week;
+	}
+
+	const weekDays = $derived(getWeekDays(selected));
+
+	// ---- View mode buttons ----
+
+	const viewModes: ReadonlyArray<{ mode: CalendarViewMode; label: string }> = [
+		{ mode: CalendarViewMode.Day, label: 'Day' },
+		{ mode: CalendarViewMode.Week, label: 'Week' },
+		{ mode: CalendarViewMode.Month, label: 'Month' },
+	];
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+	class="appointment-calendar"
+	class:is-moving-appointment={isDraggingAppointment}
+	onmouseup={onSlotMouseUp}
+	role="application"
+>
+	<!-- Header: navigation + view toggle -->
+	<div class="calendar-header">
+		<div class="header-left">
+			<Button
+				label="Today"
+				size={Size.Small}
+				onclick={goToToday}
+			/>
+			<div class="nav-arrows">
+				<button
+					class="nav-btn"
+					onclick={() => {
+						navigateDate(-1);
+					}}
+					aria-label="Previous"
+				>
+					<Icon
+						name="chevron-left"
+						size={Size.Small}
+						colour={Colour['$ui-blue-14']}
+					/>
+				</button>
+				<button
+					class="nav-btn"
+					onclick={() => {
+						navigateDate(1);
+					}}
+					aria-label="Next"
+				>
+					<Icon
+						name="chevron-right"
+						size={Size.Small}
+						colour={Colour['$ui-blue-14']}
+					/>
+				</button>
+			</div>
+			<h2 class="current-date-label">{formatDate(selected)}</h2>
+		</div>
+		<div class="header-right">
+			{#if headerExtra}
+				{@render headerExtra()}
+			{/if}
+			<div class="view-toggle">
+				{#each viewModes as { mode, label } (mode)}
+					<button
+						class="view-btn"
+						class:active={viewMode === mode}
+						onclick={() => {
+							onviewmodechange(mode);
+						}}
+					>
+						{label}
+					</button>
+				{/each}
+			</div>
+		</div>
+	</div>
+
+	<!-- Week day tabs rendered OUTSIDE the scrollable body so they stay frozen -->
+	{#if viewMode === CalendarViewMode.Week}
+		<div class="week-day-tabs">
+			{#each weekDays as day (day.getTime())}
+				<button
+					class="week-day-tab"
+					class:active={sameDay(day, selected)}
+					class:today={sameDay(day, today)}
+					onclick={() => {
+						ondatechange(day);
+					}}
+				>
+					<span class="day-name">{dayNames[day.getDay()].slice(0, 3)}</span>
+					<span class="day-num">{day.getDate()}</span>
+				</button>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Calendar body -->
+	<div class="calendar-body">
+		{#if isLoading}
+			<LoadingOverlay />
+		{/if}
+
+		{#if viewMode === CalendarViewMode.Day}
+			<!-- DAY VIEW -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="day-view"
+				onmouseleave={() => {
+					hoveredSlotIndex = null;
+				}}
+			>
+				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+				{@render doorGrid(selected)}
+			</div>
+		{:else if viewMode === CalendarViewMode.Week}
+			<!-- WEEK VIEW: day grid only, tabs are above calendar-body -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="day-view"
+				onmouseleave={() => {
+					hoveredSlotIndex = null;
+				}}
+			>
+				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+				{@render doorGrid(selected)}
+			</div>
+		{:else}
+			<!-- MONTH VIEW -->
+			<div class="month-view">
+				<div class="month-header-row">
+					{#each ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] as dayLabel (dayLabel)}
+						<div class="month-day-header">{dayLabel}</div>
+					{/each}
+				</div>
+				<div class="month-grid">
+					{#each monthDays as { date: dayDate, isCurrentMonth } (dayDate.getTime())}
+						<button
+							class="month-day-cell"
+							class:other-month={!isCurrentMonth}
+							class:today={sameDay(dayDate, today)}
+							class:selected={sameDay(dayDate, selected)}
+							onclick={() => {
+								ondatechange(dayDate);
+								onviewmodechange(CalendarViewMode.Day);
+							}}
+						>
+							<span class="day-number">{dayDate.getDate()}</span>
+							<div class="day-badges">
+								{#each countsAt(dayDate) as { doorId, doorName, count } (doorId)}
+									<span class="door-badge">
+										{doorName}: {count}
+									</span>
+								{/each}
+							</div>
+						</button>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>
+
+{#snippet doorGrid(day: Date)}
+	<div class="grid-header">
+		<div class="time-header">Time</div>
+		{#each doors as door (door.id)}
+			<div class="door-header">{door.name}</div>
+		{/each}
+	</div>
+	<div class="grid-body">
+		<div class="time-column">
+			{#each timeSlots as slot, slotIdx (slot.hour * 60 + slot.minute)}
+				<div
+					class="time-label"
+					class:hour-start={slot.minute === 0}
+					class:row-hover={hoveredSlotIndex === slotIdx}
+				>
+					{#if slot.minute === 0}
+						<span>{slot.label}</span>
+					{/if}
+				</div>
+			{/each}
+		</div>
+		{#each doors as door (door.id)}
+			<div class="door-column">
+				<!-- Slot cells for drag interaction (rendered first, sit below appointments) -->
+				{#each timeSlots as slot, slotIdx (slot.hour * 60 + slot.minute)}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						class="slot-cell"
+						class:hour-start={slot.minute === 0}
+						class:drag-selected={isSlotInDragRange(door.id, slotIdx)}
+						class:move-target={isSlotInMoveTarget(door.id, slotIdx)}
+						class:row-hover={hoveredSlotIndex === slotIdx}
+						onmousedown={() => {
+							onSlotMouseDown(door.id, slotIdx);
+						}}
+						onmouseenter={() => {
+							hoveredSlotIndex = slotIdx;
+							onSlotMouseEnter(door.id, slotIdx);
+						}}
+					></div>
+				{/each}
+				<!-- Appointment blocks positioned absolutely (rendered after, sit above slots) -->
+				{#each appointmentsAt(door.id, day) as apt (apt.id)}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						class="appointment-block"
+						class:inbound={apt.typeCode === 'INBOUND'}
+						class:outbound={apt.typeCode === 'OUTBOUND'}
+						class:dragging={isDraggingAppointment && draggedAppointment?.id === apt.id}
+						class:movable={!!onappointmentmove}
+						style="top: {apt.topPercent}%; height: {apt.heightPercent}%;"
+						onmousedown={(e) => {
+							onAppointmentMouseDown(apt, e);
+						}}
+					>
+						<span class="apt-type">{apt.typeCode}</span>
+						<span class="apt-label">{apt.label}</span>
+						{#if apt.sublabel}
+							<span class="apt-sublabel">{apt.sublabel}</span>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/each}
+	</div>
+{/snippet}
+
+<style>.appointment-calendar {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+  background-color: #ffffff;
+  overflow: hidden;
+}
+.appointment-calendar.is-moving-appointment {
+  cursor: grabbing;
+}
+
+.calendar-header {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1.5rem;
+  background-color: #ffffff;
+  border-bottom: solid 1px #cbd4da;
+  flex-shrink: 0;
+  gap: 1.5rem;
+}
+
+.header-left {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.header-right {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.current-date-label {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 500;
+  color: #3a4952;
+  white-space: nowrap;
+}
+
+.nav-arrows {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 2px;
+}
+
+.nav-btn {
+  border: solid 1px #cbd4da;
+  background: #ffffff;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 0.35rem 0.5rem;
+  display: flex;
+  align-items: center;
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+}
+.nav-btn:hover {
+  background-color: #f4f7f9;
+}
+
+.view-toggle {
+  display: flex;
+  flex-flow: row nowrap;
+  border: solid 1px #cbd4da;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.view-btn {
+  border: none;
+  background: #ffffff;
+  cursor: pointer;
+  padding: 0.4rem 0.75rem;
+  font-size: 0.875rem;
+  color: #3a4952;
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+}
+.view-btn:not(:last-child) {
+  border-right: solid 1px #cbd4da;
+}
+.view-btn.active {
+  background-color: #259fc7;
+  color: #ffffff;
+}
+.view-btn:hover:not(.active) {
+  background-color: #f4f7f9;
+}
+
+.calendar-body {
+  flex: 1;
+  overflow: auto;
+  position: relative;
+  background-color: #ffffff;
+}
+
+.day-view {
+  display: inline-flex;
+  flex-flow: column nowrap;
+  min-height: 100%;
+  min-width: 100%;
+}
+
+.grid-header {
+  display: flex;
+  flex-flow: row nowrap;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: #e9ecf1;
+  border-bottom: solid 1px #cbd4da;
+}
+
+.time-header,
+.door-header {
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-align: center;
+  color: #3a4952;
+  border-right: solid 1px #cbd4da;
+  box-sizing: border-box;
+}
+
+.time-header {
+  width: 4.5rem;
+  min-width: 4.5rem;
+  flex-shrink: 0;
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  background-color: #e9ecf1;
+}
+
+.door-header {
+  flex: 1;
+  min-width: 8rem;
+}
+
+.grid-body {
+  display: flex;
+  flex-flow: row nowrap;
+  flex: 1;
+  padding-top: 0.625rem;
+}
+
+.time-column {
+  width: 4.5rem;
+  min-width: 4.5rem;
+  flex-shrink: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  position: sticky;
+  left: 0;
+  z-index: 6;
+  background-color: #ffffff;
+  border-right: solid 1px #cbd4da;
+}
+
+.time-label {
+  height: 1.25rem;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  padding-right: 0.5rem;
+  box-sizing: border-box;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #3a4952;
+  transition: background-color 0.05s ease;
+}
+.time-label.row-hover {
+  background-color: #f4fbfd;
+}
+.time-label span {
+  transform: translateY(-50%);
+  white-space: nowrap;
+}
+
+.door-column {
+  flex: 1;
+  min-width: 8rem;
+  position: relative;
+  display: flex;
+  flex-flow: column nowrap;
+  border-right: solid 1px #cbd4da;
+}
+
+.slot-cell {
+  height: 1.25rem;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: background-color 0.05s ease;
+  border-bottom: solid 1px #e9ecf1;
+  z-index: 1;
+}
+.slot-cell.hour-start {
+  border-top: solid 1px #dae0e5;
+}
+.slot-cell.row-hover {
+  background-color: #f4fbfd;
+}
+.slot-cell.drag-selected {
+  background-color: #caeaf5;
+  z-index: 2;
+}
+.slot-cell.move-target {
+  background-color: #e6f8fd;
+  border-bottom-color: #b4e2f0;
+  z-index: 2;
+}
+
+.appointment-block {
+  position: absolute;
+  left: 2px;
+  right: 2px;
+  z-index: 5;
+  border-radius: 4px;
+  border: solid 1px #9fdaec;
+  background-color: #f4fbfd;
+  padding: 0.25rem 0.4rem;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.15rem;
+  overflow: hidden;
+  cursor: pointer;
+  font-size: 0.75rem;
+  text-align: left;
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+  user-select: none;
+}
+.appointment-block.movable {
+  cursor: grab;
+}
+.appointment-block.dragging {
+  opacity: 0.4;
+  cursor: grabbing;
+}
+.appointment-block:hover {
+  background-color: #e6f8fd;
+  border-color: #74c9e4;
+}
+.appointment-block.inbound {
+  border-color: #9fdaec;
+}
+.appointment-block.inbound .apt-type {
+  color: #259fc7;
+}
+.appointment-block.outbound {
+  border-color: #e7b100;
+  background-color: #f0faf0;
+}
+.appointment-block.outbound .apt-type {
+  color: #e7b100;
+}
+
+.apt-type {
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+}
+
+.apt-label {
+  color: #3a4952;
+  font-weight: 500;
+}
+
+.apt-sublabel {
+  color: #647d8e;
+  font-size: 0.75rem;
+}
+
+.week-day-tabs {
+  display: flex;
+  flex-flow: row nowrap;
+  border-bottom: solid 1px #cbd4da;
+  background-color: #ffffff;
+  flex-shrink: 0;
+}
+
+.week-day-tab {
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  gap: 0.15rem;
+  padding: 0.5rem 0.25rem;
+  border: none;
+  border-right: solid 1px #cbd4da;
+  background: #ffffff;
+  cursor: pointer;
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+}
+.week-day-tab:last-child {
+  border-right: none;
+}
+.week-day-tab:hover {
+  background-color: #f4f7f9;
+}
+.week-day-tab.active {
+  background-color: #e6f8fd;
+  border-bottom: solid 2px #259fc7;
+}
+.week-day-tab.today .day-num {
+  background-color: #259fc7;
+  color: #ffffff;
+  border-radius: 50%;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.day-name {
+  font-size: 0.75rem;
+  color: #647d8e;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+.day-num {
+  font-size: 1rem;
+  color: #3a4952;
+  font-weight: 500;
+}
+
+.month-view {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+}
+
+.month-header-row {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  background-color: #e9ecf1;
+  border-bottom: solid 1px #cbd4da;
+}
+
+.month-day-header {
+  padding: 0.5rem;
+  text-align: center;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #3a4952;
+  border-right: solid 1px #cbd4da;
+}
+.month-day-header:last-child {
+  border-right: none;
+}
+
+.month-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: repeat(6, 1fr);
+  flex: 1;
+}
+
+.month-day-cell {
+  border: none;
+  border-right: solid 1px #cbd4da;
+  border-bottom: solid 1px #cbd4da;
+  background: #ffffff;
+  padding: 0.35rem;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.2rem;
+  cursor: pointer;
+  text-align: left;
+  min-height: 4.5rem;
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+}
+.month-day-cell:hover {
+  background-color: #f4f7f9;
+}
+.month-day-cell.other-month {
+  background-color: #f4f7f9;
+}
+.month-day-cell.other-month .day-number {
+  color: #8096a5;
+}
+.month-day-cell.today .day-number {
+  background-color: #259fc7;
+  color: #ffffff;
+  border-radius: 50%;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+}
+.month-day-cell.selected {
+  outline: solid 2px #259fc7;
+  outline-offset: -2px;
+}
+
+.day-number {
+  font-size: 0.875rem;
+  color: #3a4952;
+  font-weight: 500;
+}
+
+.day-badges {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1px;
+  overflow: hidden;
+}
+
+.door-badge {
+  font-size: 0.75rem;
+  color: #259fc7;
+  background-color: #e6f8fd;
+  border-radius: 2px;
+  padding: 0 0.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}</style>