From e692758a7c92f95d06b0eac055980b514acc1060 Mon Sep 17 00:00:00 2001
From: andrei <andrei@noru1.ro>
Date: Mon, 29 Sep 2025 13:41:56 +0000
Subject: [PATCH] Improve form UI and functionality
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Update retailer name field label from "Enter your retail store/s name" to "Retailer Name"
- Change section title from "Store Details" to "Setup Details"
- Replace date picker with month/year dropdowns for Business Case Start Date
- Add Currency Symbol field with Dollar and Euro options
- Remove "Stores open days/month" field from In-Store Information
- Auto-populate year dropdown with current year + 5 years
- Auto-set date to first day of selected month

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 index.html | 76 ++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 63 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 2c215ea..6cb3393 100644
--- a/index.html
+++ b/index.html
@@ -121,7 +121,7 @@
             <!-- Step labels -->
             <div class="flex justify-between">
                 <span class="step-label active" data-step="1" style="width: 16.66%; text-align: center;">Contact</span>
-                <span class="step-label" data-step="2" style="width: 16.66%; text-align: center;">Store Details</span>
+                <span class="step-label" data-step="2" style="width: 16.66%; text-align: center;">Setup Details</span>
                 <span class="step-label" data-step="3" style="width: 16.66%; text-align: center;">In-Store</span>
                 <span class="step-label" data-step="4" style="width: 16.66%; text-align: center;">On-Site</span>
                 <span class="step-label" data-step="5" style="width: 16.66%; text-align: center;">Off-Site</span>
@@ -181,20 +181,41 @@
 
                 <!-- Step 2: Store Details -->
                 <div id="step2" class="step-content hidden">
-                    <h2 class="text-xl font-bold text-gray-700 mb-5">Store Details</h2>
+                    <h2 class="text-xl font-bold text-gray-700 mb-5">Setup Details</h2>
                     <div class="space-y-5">
                         <!-- Store Name -->
                         <div>
-                            <label for="storeName" class="block text-base font-medium text-gray-700 mb-1">Enter your retail store/s name</label>
+                            <label for="storeName" class="block text-base font-medium text-gray-700 mb-1">Retailer Name</label>
                             <input type="text" id="storeName" name="storeName" required
                                 class="w-full p-3 border border-gray-300 bg-white rounded-md focus:outline-none focus:ring-1 focus:ring-[#eb742e] focus:border-[#eb742e]">
                         </div>
                         
                         <!-- Starting Date -->
                         <div>
-                            <label for="startingDate" class="block text-base font-medium text-gray-700 mb-1">Starting Date</label>
-                            <input type="date" id="startingDate" name="startingDate" required
-                                class="w-full p-3 border border-gray-300 bg-white rounded-md focus:outline-none focus:ring-1 focus:ring-[#eb742e] focus:border-[#eb742e]">
+                            <label class="block text-base font-medium text-gray-700 mb-1">Business Case Start Date</label>
+                            <div class="flex space-x-2">
+                                <select id="startingMonth" name="startingMonthSelect" required
+                                    class="flex-1 p-3 border border-gray-300 bg-white rounded-md focus:outline-none focus:ring-1 focus:ring-[#eb742e] focus:border-[#eb742e]">
+                                    <option value="">Select Month</option>
+                                    <option value="01">January</option>
+                                    <option value="02">February</option>
+                                    <option value="03">March</option>
+                                    <option value="04">April</option>
+                                    <option value="05">May</option>
+                                    <option value="06">June</option>
+                                    <option value="07">July</option>
+                                    <option value="08">August</option>
+                                    <option value="09">September</option>
+                                    <option value="10">October</option>
+                                    <option value="11">November</option>
+                                    <option value="12">December</option>
+                                </select>
+                                <select id="startingYear" name="startingYearSelect" required
+                                    class="flex-1 p-3 border border-gray-300 bg-white rounded-md focus:outline-none focus:ring-1 focus:ring-[#eb742e] focus:border-[#eb742e]">
+                                    <option value="">Select Year</option>
+                                </select>
+                            </div>
+                            <input type="hidden" id="startingDate" name="startingDate">
                         </div>
                         
                         <!-- Duration -->
@@ -203,6 +224,17 @@
                             <input type="number" id="duration" name="duration" value="36" min="1" required
                                 class="w-full p-3 border border-gray-300 bg-white rounded-md focus:outline-none focus:ring-1 focus:ring-[#eb742e] focus:border-[#eb742e]">
                         </div>
+
+                        <!-- Currency Symbol -->
+                        <div>
+                            <label for="currency" class="block text-base font-medium text-gray-700 mb-1">Currency Symbol</label>
+                            <select id="currency" name="currency" required
+                                class="w-full p-3 border border-gray-300 bg-white rounded-md focus:outline-none focus:ring-1 focus:ring-[#eb742e] focus:border-[#eb742e]">
+                                <option value="">Select Currency</option>
+                                <option value="$">$ (Dollar)</option>
+                                <option value="€">€ (Euro)</option>
+                            </select>
+                        </div>
                     </div>
                 </div>
 
@@ -210,13 +242,6 @@
                 <div id="step3" class="step-content hidden">
                     <h2 class="text-xl font-bold text-gray-700 mb-5">In-Store Information</h2>
                     <div class="space-y-5">
-                        <!-- Store open days -->
-                        <div>
-                            <label for="openDays" class="block text-base font-medium text-gray-700 mb-1">Stores open days/month</label>
-                            <input type="number" id="openDays" name="openDays" required
-                                class="w-full p-3 border border-gray-300 bg-white rounded-md focus:outline-none focus:ring-1 focus:ring-[#eb742e] focus:border-[#eb742e]">
-                        </div>
-
                         <!-- Store Types Dropdown -->
                         <div>
                             <label class="block text-base font-medium text-gray-700 mb-1">Store Types <span class="text-orange-500">*</span></label>
@@ -504,6 +529,31 @@
         
         // Initialize
         updateProgressBar();
+
+        // Populate year dropdown with current year and next 5 years
+        const yearSelect = document.getElementById('startingYear');
+        const currentYear = new Date().getFullYear();
+        for (let year = currentYear; year <= currentYear + 5; year++) {
+            const option = document.createElement('option');
+            option.value = year;
+            option.textContent = year;
+            yearSelect.appendChild(option);
+        }
+
+        // Handle month and year selection to set full date with day = 1
+        function updateStartingDate() {
+            const month = document.getElementById('startingMonth').value;
+            const year = document.getElementById('startingYear').value;
+
+            if (month && year) {
+                // Format: YYYY-MM-01
+                document.getElementById('startingDate').value = `${year}-${month}-01`;
+                console.log('Starting date set to:', document.getElementById('startingDate').value);
+            }
+        }
+
+        document.getElementById('startingMonth').addEventListener('change', updateStartingDate);
+        document.getElementById('startingYear').addEventListener('change', updateStartingDate);
         
         // Event listeners for navigation buttons
         prevBtn.addEventListener('click', goToPreviousStep);