From cf81916278883746b2fff93101fc11be11f71640 Mon Sep 17 00:00:00 2001
From: Stephen Adamson <popertots@gmail.com>
Date: Fri, 29 May 2026 18:28:13 +0100
Subject: [PATCH] fix: safely enforce validation onblur for HolidayHours modal
 without dropping code

---
 .../lib/components/admin/HolidayHours.svelte  | 41 +++++++++++++++----
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/admin/HolidayHours.svelte b/frontend/src/lib/components/admin/HolidayHours.svelte
index 706d3bb..7132a7d 100644
--- a/frontend/src/lib/components/admin/HolidayHours.svelte
+++ b/frontend/src/lib/components/admin/HolidayHours.svelte
@@ -36,6 +36,29 @@
 	let exceptionGroupsLoading = $state(true);
 	let savingHours = $state(false);
 
+	let isFormValid = $derived(
+		exceptionDraft.name.trim() !== '' &&
+		exceptionDraft.weekStarts.length > 0
+	);
+
+	let formErrors = $state({
+		name: '',
+		weeks: ''
+	});
+
+	function validateNameField() {
+		formErrors.name = exceptionDraft.name.trim() === '' ? 'Name is required' : '';
+	}
+
+	function validateWeeksField() {
+		formErrors.weeks = exceptionDraft.weekStarts.length === 0 ? 'At least one week must be selected' : '';
+	}
+
+	function validateAllFields() {
+		validateNameField();
+		validateWeeksField();
+	}
+
 	// Exception modal state
 	let showExceptionModal = $state(false);
 	let exceptionDraft = $state<ExceptionGroup>({
@@ -151,14 +174,9 @@
 	}
 
 	async function saveExceptionGroup() {
-		// Validate
-		if (!exceptionDraft.name.trim()) {
-			toast.error('Please enter a group name');
-			return;
-		}
-
-		if (exceptionDraft.weekStarts.length === 0) {
-			toast.error('Please add at least one week');
+		validateAllFields();
+		if (!isFormValid) {
+			toast.error('Please fix validation errors before submitting');
 			return;
 		}
 
@@ -444,7 +462,12 @@
 						type="text"
 						placeholder="e.g., Christmas Week, Summer Holiday"
 						bind:value={exceptionDraft.name}
+						onblur={validateNameField}
+						class="w-full {formErrors.name ? 'border-red-500' : ''}"
 					/>
+					{#if formErrors.name}
+						<p class="text-xs text-red-600">{formErrors.name}</p>
+					{/if}
 				</div>
 
 				<div class="space-y-2">
@@ -573,7 +596,7 @@
 			>
 				Cancel
 			</Button>
-			<Button onclick={saveExceptionGroup} disabled={savingHours}>
+			<Button onclick={saveExceptionGroup} disabled={savingHours || !isFormValid}>
 				{savingHours ? 'Creating…' : 'Create Schedule'}
 			</Button>
 		</Modal.Footer>