@lavalogic/scoria 0.37.44 → 0.37.46

package/dist/Components/AppointmentCalendar/AppointmentCalendar.svelte

@@ -1,704 +1,704 @@
-<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}
-
+<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;
@@ -1123,4 +1123,4 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}</style>
+}</style>