denisa/bussines_case_automation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve form UI and functionality

Browse Source 
- 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>
This commit is contained in:
andrei
2025-09-29 13:41:56 +00:00
parent 22136f77b7
commit e692758a7c
1 changed files with 63 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
index.html
View File

@@ -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);