Add section and validity date

src/lib/components/Wizard.svelte

@@ -4,6 +4,7 @@
   import StepSheetSearch from './wizard/StepSheetSearch.svelte';
   import StepColumnMap from './wizard/StepColumnMap.svelte';
   import StepRowFilter from './wizard/StepRowFilter.svelte';
+  import StepCardDetails from './wizard/StepCardDetails.svelte';
   import StepGallery from './wizard/StepGallery.svelte';
   import StepGenerate from './wizard/StepGenerate.svelte';
 
@@ -12,6 +13,7 @@
     StepSheetSearch,
     StepColumnMap,
     StepRowFilter,
+    StepCardDetails,
     StepGallery,
     StepGenerate
   ];
@@ -21,6 +23,7 @@
     'Select Sheet',
     'Map Columns',
     'Filter Rows',
+    'Card Details',
     'Review Photos',
     'Generate PDFs'
   ];

src/lib/components/wizard/StepCardDetails.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { currentStep, cardDetails } from '$lib/stores';
+	import Navigator from './subcomponents/Navigator.svelte';
+
+	// Initialize from localStorage if available, otherwise from the store
+	let homeSection = $state(
+		(typeof window !== 'undefined' && window.localStorage.getItem('homeSection')) ||
+			$cardDetails.homeSection
+	);
+	let validityStart = $state($cardDetails.validityStart || new Date().toISOString().split('T')[0]);
+
+	// Persist homeSection to localStorage whenever it changes
+	$effect(() => {
+		if (typeof window !== 'undefined') {
+			localStorage.setItem('homeSection', homeSection);
+		}
+	});
+
+	let canProceed = $derived(homeSection.trim() !== '' && validityStart.trim() !== '');
+
+	function handleContinue() {
+		cardDetails.set({ homeSection, validityStart });
+	}
+</script>
+
+<div class="p-6">
+	<div class="mb-6">
+		<h2 class="mb-2 text-xl font-semibold text-gray-900">Enter Card Details</h2>
+		<p class="mb-4 text-sm text-gray-700">
+			Please provide the following details to be printed on the cards.
+		</p>
+	</div>
+
+	<div class="space-y-6">
+		<div>
+			<label for="homeSection" class="block text-sm font-medium text-gray-700 mb-2">
+				Home Section
+			</label>
+			<input
+				id="homeSection"
+				type="text"
+				bind:value={homeSection}
+				placeholder="e.g., ESN VUT Brno"
+				class="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+			/>
+		</div>
+
+		<div>
+			<label for="validityStart" class="block text-sm font-medium text-gray-700 mb-2">
+				Card Validity Start Date
+			</label>
+			<input
+				id="validityStart"
+				type="date"
+				bind:value={validityStart}
+				class="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+			/>
+			<p class="mt-2 text-xs text-gray-500">Default date is today, but future date can be selected.</p>
+		</div>
+	</div>
+    
+<div class="mt-10">
+    <Navigator
+	canProceed={canProceed}
+	currentStep={currentStep}
+	onForward={handleContinue}
+	textBack="Back to Row Filtering"
+	textForwardEnabled="Continue to Photo Review"
+	textForwardDisabled="Please fill out all fields"
+/>
+</div>
+</div>

src/lib/stores.ts

@@ -144,3 +144,12 @@ export const pdfGenerationStatus = writable<{
   stage: 'preparing',
   progress: 0
 });
+
+// Card details for generation
+export const cardDetails = writable<{
+  homeSection: string;
+  validityStart: string;
+}>({
+  homeSection: '',
+  validityStart: ''
+});