From f8478f5019438b89a5fb7b73c276478729477292 Mon Sep 17 00:00:00 2001
From: grabowski <berwn@buildfor.life>
Date: Thu, 23 Apr 2026 15:45:15 +0700
Subject: [PATCH] fix(ui): cap date inputs to 4-digit years via min/max

Without min/max, native <input type="date"> lets you type arbitrarily-many
year digits (YYYYYY-MM-DD). Add min="2000-01-01" max="2099-12-31" to every
date input (and bounded range on the single datetime-local) across expenses,
projects, tasks, assets, decisions, and maintenance.
---
 src/routes/(app)/assets/[id]/+page.svelte            |  2 +-
 .../(app)/assets/[id]/maintenance/+page.svelte       |  4 ++--
 src/routes/(app)/assets/new/+page.svelte             |  2 +-
 src/routes/(app)/projects/[id]/+page.svelte          |  4 ++--
 .../(app)/projects/[id]/decisions/+page.svelte       |  2 +-
 .../(app)/projects/[id]/work/[wpId]/+page.svelte     |  2 +-
 .../projects/[id]/work/[wpId]/[taskId]/+page.svelte  |  2 +-
 src/routes/(app)/projects/new/+page.svelte           |  4 ++--
 .../(app)/properties/[id]/expenses/+page.svelte      | 12 ++++++------
 9 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/routes/(app)/assets/[id]/+page.svelte b/src/routes/(app)/assets/[id]/+page.svelte
index 9ca77e7..705334f 100644
--- a/src/routes/(app)/assets/[id]/+page.svelte
+++ b/src/routes/(app)/assets/[id]/+page.svelte
@@ -61,7 +61,7 @@
 		</div>
 		<div>
 			<label for="purchased_at" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Purchased on</label>
-			<input id="purchased_at" name="purchased_at" type="date" value={dateInput(a.purchasedAt)}
+			<input id="purchased_at" name="purchased_at" type="date" min="2000-01-01" max="2099-12-31" value={dateInput(a.purchasedAt)}
 				class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100" />
 		</div>
 		{#if a.currentContainerKind === 'property'}
diff --git a/src/routes/(app)/assets/[id]/maintenance/+page.svelte b/src/routes/(app)/assets/[id]/maintenance/+page.svelte
index 363c5f8..17c3ff7 100644
--- a/src/routes/(app)/assets/[id]/maintenance/+page.svelte
+++ b/src/routes/(app)/assets/[id]/maintenance/+page.svelte
@@ -75,7 +75,7 @@
 					{#if kind === 'time'}
 						<div>
 							<label for="start_from" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Anchor (optional)</label>
-							<input id="start_from" name="start_from" type="date"
+							<input id="start_from" name="start_from" type="date" min="2000-01-01" max="2099-12-31"
 								class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100" />
 							<p class="mt-1 text-xs text-gray-400">First service due = anchor + interval. Defaults to today.</p>
 						</div>
@@ -161,7 +161,7 @@
 								<div class="grid gap-3 sm:grid-cols-2">
 									<label class="block">
 										<span class="block text-xs font-medium text-gray-700 dark:text-gray-300">Performed at</span>
-										<input name="performed_at" type="datetime-local"
+										<input name="performed_at" type="datetime-local" min="2000-01-01T00:00" max="2099-12-31T23:59"
 											value={new Date().toISOString().slice(0, 16)}
 											class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100" />
 									</label>
diff --git a/src/routes/(app)/assets/new/+page.svelte b/src/routes/(app)/assets/new/+page.svelte
index 7fbea0e..e87c82b 100644
--- a/src/routes/(app)/assets/new/+page.svelte
+++ b/src/routes/(app)/assets/new/+page.svelte
@@ -114,7 +114,7 @@
 				</div>
 				<div>
 					<label for="purchased_at" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Purchased on</label>
-					<input id="purchased_at" name="purchased_at" type="date"
+					<input id="purchased_at" name="purchased_at" type="date" min="2000-01-01" max="2099-12-31"
 						class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100" />
 				</div>
 			</div>
diff --git a/src/routes/(app)/projects/[id]/+page.svelte b/src/routes/(app)/projects/[id]/+page.svelte
index bf99b95..2a4a508 100644
--- a/src/routes/(app)/projects/[id]/+page.svelte
+++ b/src/routes/(app)/projects/[id]/+page.svelte
@@ -51,12 +51,12 @@
 		</div>
 		<div>
 			<label for="start_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Start date</label>
-			<input id="start_date" name="start_date" type="date" value={dateInput(p.startDate)}
+			<input id="start_date" name="start_date" type="date" min="2000-01-01" max="2099-12-31" value={dateInput(p.startDate)}
 				class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100" />
 		</div>
 		<div>
 			<label for="end_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">End date</label>
-			<input id="end_date" name="end_date" type="date" value={dateInput(p.endDate)}
+			<input id="end_date" name="end_date" type="date" min="2000-01-01" max="2099-12-31" value={dateInput(p.endDate)}
 				class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100" />
 		</div>
 		<div class="sm:col-span-2">
diff --git a/src/routes/(app)/projects/[id]/decisions/+page.svelte b/src/routes/(app)/projects/[id]/decisions/+page.svelte
index ee09d46..0aa5c46 100644
--- a/src/routes/(app)/projects/[id]/decisions/+page.svelte
+++ b/src/routes/(app)/projects/[id]/decisions/+page.svelte
@@ -68,7 +68,7 @@
 				</div>
 				<div>
 					<label for="decided_at" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Decided on <span class="text-red-500">*</span></label>
-					<input id="decided_at" name="decided_at" type="date" required value={v.decided_at ?? new Date().toISOString().slice(0, 10)}
+					<input id="decided_at" name="decided_at" type="date" min="2000-01-01" max="2099-12-31" required value={v.decided_at ?? new Date().toISOString().slice(0, 10)}
 						class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100" />
 				</div>
 			</div>
diff --git a/src/routes/(app)/projects/[id]/work/[wpId]/+page.svelte b/src/routes/(app)/projects/[id]/work/[wpId]/+page.svelte
index 6769585..88b00bd 100644
--- a/src/routes/(app)/projects/[id]/work/[wpId]/+page.svelte
+++ b/src/routes/(app)/projects/[id]/work/[wpId]/+page.svelte
@@ -88,7 +88,7 @@
 				</div>
 				<div>
 					<label for="due_at" class="block text-xs font-medium text-gray-700 dark:text-gray-300">Due</label>
-					<input id="due_at" name="due_at" type="date"
+					<input id="due_at" name="due_at" type="date" min="2000-01-01" max="2099-12-31"
 						class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100" />
 				</div>
 				<div class="sm:col-span-3 flex justify-end">
diff --git a/src/routes/(app)/projects/[id]/work/[wpId]/[taskId]/+page.svelte b/src/routes/(app)/projects/[id]/work/[wpId]/[taskId]/+page.svelte
index 82c88c6..b2f2b69 100644
--- a/src/routes/(app)/projects/[id]/work/[wpId]/[taskId]/+page.svelte
+++ b/src/routes/(app)/projects/[id]/work/[wpId]/[taskId]/+page.svelte
@@ -46,7 +46,7 @@
 			</div>
 			<div>
 				<label for="due_at" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Due</label>
-				<input id="due_at" name="due_at" type="date" value={dateInput(t.dueAt)}
+				<input id="due_at" name="due_at" type="date" min="2000-01-01" max="2099-12-31" value={dateInput(t.dueAt)}
 					class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100" />
 			</div>
 		</div>
diff --git a/src/routes/(app)/projects/new/+page.svelte b/src/routes/(app)/projects/new/+page.svelte
index 545f5e5..b544d15 100644
--- a/src/routes/(app)/projects/new/+page.svelte
+++ b/src/routes/(app)/projects/new/+page.svelte
@@ -46,12 +46,12 @@
 			</div>
 			<div>
 				<label for="start_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Start date</label>
-				<input id="start_date" name="start_date" type="date" value={v.start_date ?? ''}
+				<input id="start_date" name="start_date" type="date" min="2000-01-01" max="2099-12-31" value={v.start_date ?? ''}
 					class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100" />
 			</div>
 			<div>
 				<label for="end_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">End date</label>
-				<input id="end_date" name="end_date" type="date" value={v.end_date ?? ''}
+				<input id="end_date" name="end_date" type="date" min="2000-01-01" max="2099-12-31" value={v.end_date ?? ''}
 					class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100" />
 			</div>
 		</div>
diff --git a/src/routes/(app)/properties/[id]/expenses/+page.svelte b/src/routes/(app)/properties/[id]/expenses/+page.svelte
index 64ee4d5..f1cdaac 100644
--- a/src/routes/(app)/properties/[id]/expenses/+page.svelte
+++ b/src/routes/(app)/properties/[id]/expenses/+page.svelte
@@ -106,17 +106,17 @@
 			</label>
 			<label class="block">
 				<span class="block text-xs font-medium text-gray-700 dark:text-gray-300">Incurred on <span class="text-red-500">*</span></span>
-				<input name="incurred_at" type="date" required value={new Date().toISOString().slice(0, 10)}
+				<input name="incurred_at" type="date" min="2000-01-01" max="2099-12-31" required value={new Date().toISOString().slice(0, 10)}
 					class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100" />
 			</label>
 			<label class="block">
 				<span class="block text-xs font-medium text-gray-700 dark:text-gray-300">Period start</span>
-				<input name="period_start" type="date"
+				<input name="period_start" type="date" min="2000-01-01" max="2099-12-31"
 					class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100" />
 			</label>
 			<label class="block">
 				<span class="block text-xs font-medium text-gray-700 dark:text-gray-300">Period end</span>
-				<input name="period_end" type="date"
+				<input name="period_end" type="date" min="2000-01-01" max="2099-12-31"
 					class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100" />
 			</label>
 			<label class="block">
@@ -199,17 +199,17 @@
 										</label>
 										<label class="block">
 											<span class="block text-xs font-medium text-gray-700 dark:text-gray-300">Incurred</span>
-											<input name="incurred_at" type="date" required value={dateInput(e.incurredAt)}
+											<input name="incurred_at" type="date" min="2000-01-01" max="2099-12-31" required value={dateInput(e.incurredAt)}
 												class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100" />
 										</label>
 										<label class="block">
 											<span class="block text-xs font-medium text-gray-700 dark:text-gray-300">Period start</span>
-											<input name="period_start" type="date" value={dateInput(e.periodStart)}
+											<input name="period_start" type="date" min="2000-01-01" max="2099-12-31" value={dateInput(e.periodStart)}
 												class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100" />
 										</label>
 										<label class="block">
 											<span class="block text-xs font-medium text-gray-700 dark:text-gray-300">Period end</span>
-											<input name="period_end" type="date" value={dateInput(e.periodEnd)}
+											<input name="period_end" type="date" min="2000-01-01" max="2099-12-31" value={dateInput(e.periodEnd)}
 												class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100" />
 										</label>
 										<label class="block">