From 5d860bde83f250c0f79d701a272fc89bd9fd1d91 Mon Sep 17 00:00:00 2001
From: Sean Morley <git@seanmorley.com>
Date: Tue, 28 Jul 2026 17:22:42 -0400
Subject: [PATCH] Enhance date handling in location and transportation
 components by introducing utility functions for managing all-day events.
 Updated all-day toggle logic to utilize new functions for converting local
 dates to date-only format and setting default times for timed inputs.

---
 .../locations/LocationVisits.svelte           | 47 ++++++++++++-------
 .../components/lodging/LodgingDetails.svelte  | 27 +++++++----
 .../TransportationDetails.svelte              | 27 +++++++----
 frontend/src/lib/dateUtils.ts                 | 13 +++++
 4 files changed, 77 insertions(+), 37 deletions(-)

diff --git a/frontend/src/lib/components/locations/LocationVisits.svelte b/frontend/src/lib/components/locations/LocationVisits.svelte
index 88f28057..160431f8 100644
--- a/frontend/src/lib/components/locations/LocationVisits.svelte
+++ b/frontend/src/lib/components/locations/LocationVisits.svelte
@@ -9,7 +9,14 @@
 	} from '$lib/types';
 	import TimezoneSelector from '../TimezoneSelector.svelte';
 	import { t } from 'svelte-i18n';
-	import { updateLocalDate, updateUTCDate, validateDateRange, formatUTCDate } from '$lib/dateUtils';
+	import {
+		updateLocalDate,
+		updateUTCDate,
+		validateDateRange,
+		formatUTCDate,
+		toDateOnlyLocal,
+		toTimedLocalDefault
+	} from '$lib/dateUtils';
 	import { onMount } from 'svelte';
 	import { isAllDay, isVisitAllDay, allDayDatePart, SPORT_TYPE_CHOICES } from '$lib';
 	import { createEventDispatcher } from 'svelte';
@@ -52,7 +59,7 @@
 	// Types
 
 	// Component state
-	let allDay: boolean = false;
+	let allDay: boolean = true;
 	let localStartDate: string = '';
 	let localEndDate: string = '';
 	let fullStartDate: string = '';
@@ -205,15 +212,19 @@
 		}).utcDate;
 	}
 
-	function handleAllDayToggle() {
-		if (allDay) {
-			localStartDate = localStartDate ? localStartDate.split('T')[0] : '';
-			localEndDate = localEndDate ? localEndDate.split('T')[0] : '';
+	function handleAllDayToggle(event: Event) {
+		const nextAllDay = (event.currentTarget as HTMLInputElement).checked;
+
+		if (nextAllDay) {
+			localStartDate = toDateOnlyLocal(localStartDate);
+			localEndDate = toDateOnlyLocal(localEndDate);
 		} else {
-			localStartDate = localStartDate + 'T00:00';
-			localEndDate = localEndDate + 'T23:59';
+			localStartDate = toTimedLocalDefault(localStartDate);
+			localEndDate = toTimedLocalDefault(localEndDate, true);
 		}
 
+		allDay = nextAllDay;
+
 		utcStartDate = updateUTCDate({
 			localDate: localStartDate,
 			timezone: selectedStartTimezone,
@@ -226,15 +237,17 @@
 			allDay
 		}).utcDate;
 
-		localStartDate = updateLocalDate({
-			utcDate: utcStartDate,
-			timezone: selectedStartTimezone
-		}).localDate;
+		if (!allDay) {
+			localStartDate = updateLocalDate({
+				utcDate: utcStartDate,
+				timezone: selectedStartTimezone
+			}).localDate;
 
-		localEndDate = updateLocalDate({
-			utcDate: utcEndDate,
-			timezone: selectedStartTimezone
-		}).localDate;
+			localEndDate = updateLocalDate({
+				utcDate: utcEndDate,
+				timezone: selectedStartTimezone
+			}).localDate;
+		}
 	}
 
 	async function addVisit(isAuto: boolean = false) {
@@ -917,7 +930,7 @@
 									id="all-day-toggle"
 									type="checkbox"
 									class="toggle toggle-{typeConfig.color} toggle-sm"
-									bind:checked={allDay}
+									checked={allDay}
 									on:change={handleAllDayToggle}
 								/>
 							</div>
diff --git a/frontend/src/lib/components/lodging/LodgingDetails.svelte b/frontend/src/lib/components/lodging/LodgingDetails.svelte
index a30161ae..b3b8cb60 100644
--- a/frontend/src/lib/components/lodging/LodgingDetails.svelte
+++ b/frontend/src/lib/components/lodging/LodgingDetails.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { t, locale } from 'svelte-i18n';
-	import { updateLocalDate, updateUTCDate, validateDateRange } from '$lib/dateUtils';
+	import {
+		updateLocalDate,
+		updateUTCDate,
+		validateDateRange,
+		toDateOnlyLocal,
+		toTimedLocalDefault
+	} from '$lib/dateUtils';
 	import type { Collection, Lodging, MoneyValue } from '$lib/types';
 	import LocationSearchMap from '../shared/LocationSearchMap.svelte';
 
@@ -159,19 +165,20 @@
 		lodging.location = '';
 	}
 
-	function handleAllDayToggle() {
-		if (allDay) {
-			localStartDate = localStartDate ? localStartDate.split('T')[0] : '';
-			localEndDate = localEndDate ? localEndDate.split('T')[0] : '';
-			// Clear timezone for all-day stays
+	function handleAllDayToggle(event: Event) {
+		const nextAllDay = (event.currentTarget as HTMLInputElement).checked;
+
+		if (nextAllDay) {
+			localStartDate = toDateOnlyLocal(localStartDate);
+			localEndDate = toDateOnlyLocal(localEndDate);
 			lodging.timezone = null;
 		} else {
-			localStartDate = localStartDate ? `${localStartDate}T00:00` : '';
-			localEndDate = localEndDate ? `${localEndDate}T23:59` : '';
-			// Restore selected timezone when switching back to timed
+			localStartDate = toTimedLocalDefault(localStartDate);
+			localEndDate = toTimedLocalDefault(localEndDate, true);
 			lodging.timezone = selectedTimezone;
 		}
 
+		allDay = nextAllDay;
 		syncAndValidateDates(false);
 	}
 
@@ -706,7 +713,7 @@
 							<input
 								type="checkbox"
 								class="toggle toggle-primary"
-								bind:checked={allDay}
+								checked={allDay}
 								on:change={handleAllDayToggle}
 							/>
 							<span class="label-text">{$t('adventures.all_day')}</span>
diff --git a/frontend/src/lib/components/transportation/TransportationDetails.svelte b/frontend/src/lib/components/transportation/TransportationDetails.svelte
index 18c6a5d6..732723de 100644
--- a/frontend/src/lib/components/transportation/TransportationDetails.svelte
+++ b/frontend/src/lib/components/transportation/TransportationDetails.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { t, locale } from 'svelte-i18n';
-	import { updateLocalDate, updateUTCDate, validateDateRange } from '$lib/dateUtils';
+	import {
+		updateLocalDate,
+		updateUTCDate,
+		validateDateRange,
+		toDateOnlyLocal,
+		toTimedLocalDefault
+	} from '$lib/dateUtils';
 	import type { Collection, Lodging, Transportation, MoneyValue } from '$lib/types';
 	import LocationSearchMap from '../shared/LocationSearchMap.svelte';
 
@@ -224,22 +230,23 @@
 		transportation.end_code = null;
 	}
 
-	function handleAllDayToggle() {
-		if (allDay) {
-			localStartDate = localStartDate ? localStartDate.split('T')[0] : '';
-			localEndDate = localEndDate ? localEndDate.split('T')[0] : '';
-			// Clear timezones for all-day transportation
+	function handleAllDayToggle(event: Event) {
+		const nextAllDay = (event.currentTarget as HTMLInputElement).checked;
+
+		if (nextAllDay) {
+			localStartDate = toDateOnlyLocal(localStartDate);
+			localEndDate = toDateOnlyLocal(localEndDate);
 			transportation.start_timezone = null;
 			transportation.end_timezone = null;
 		} else {
-			localStartDate = localStartDate ? `${localStartDate}T00:00` : '';
-			localEndDate = localEndDate ? `${localEndDate}T23:59` : '';
-			// Restore selected timezones when switching back to timed
+			localStartDate = toTimedLocalDefault(localStartDate);
+			localEndDate = toTimedLocalDefault(localEndDate, true);
 			selectedEndTimezone = selectedEndTimezone || selectedStartTimezone;
 			transportation.start_timezone = selectedStartTimezone;
 			transportation.end_timezone = selectedEndTimezone;
 		}
 
+		allDay = nextAllDay;
 		syncAndValidateDates(false);
 	}
 
@@ -838,7 +845,7 @@
 							<input
 								type="checkbox"
 								class="toggle toggle-primary"
-								bind:checked={allDay}
+								checked={allDay}
 								on:change={handleAllDayToggle}
 							/>
 							<span class="label-text">{$t('adventures.all_day')}</span>
diff --git a/frontend/src/lib/dateUtils.ts b/frontend/src/lib/dateUtils.ts
index 1d165a52..313ee115 100644
--- a/frontend/src/lib/dateUtils.ts
+++ b/frontend/src/lib/dateUtils.ts
@@ -68,6 +68,19 @@ export function updateUTCDate({
 	return { utcDate: toUTCDatetime(localDate, timezone, allDay) };
 }
 
+/** Strip the time portion from a local date/datetime string for all-day inputs. */
+export function toDateOnlyLocal(localDate: string): string {
+	if (!localDate) return '';
+	return localDate.split('T')[0];
+}
+
+/** Add default start/end times when switching from all-day to timed inputs. */
+export function toTimedLocalDefault(localDate: string, end = false): string {
+	if (!localDate) return '';
+	const datePart = toDateOnlyLocal(localDate);
+	return end ? `${datePart}T23:59` : `${datePart}T00:00`;
+}
+
 /**
  * Validate date ranges using UTC comparison
  */