feat: require updateScope selection and improve form UX
Location Edit Form: - Add validation requiring user to select update scope when editing locations - Add "no-scope-selected" as placeholder option that must be replaced with valid choice - Display validation error if user attempts to submit without selecting scope - Clarify update scope options with improved wording (e.g., "ALL months (past and future)") Bill Form UX: - Add emoji icons (👤 tenant, 🔑 landlord) to "who bears cost" options for visual clarity Translation updates: - Add "update-scope-required" validation message (EN/HR) - Improve clarity of update scope option labels - Standardize Croatian terminology ("zadani" instead of "trenutni" for current month) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -445,11 +445,20 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
||||
<InfoBox>{t("update-scope-info")}</InfoBox>
|
||||
<fieldset className="fieldset mt-2 p-2">
|
||||
<legend className="fieldset-legend">{t("update-scope-legend")}</legend>
|
||||
<select defaultValue="current" className="select input-bordered w-full" name="updateScope">
|
||||
<select className="select input-bordered w-full" name="updateScope">
|
||||
<option value="no-scope-selected">{t("update-option-placeholder")}</option>
|
||||
<option value="current">{t("update-current-month")}</option>
|
||||
<option value="subsequent">{t("update-subsequent-months")}</option>
|
||||
<option value="all">{t("update-all-months")}</option>
|
||||
</select>
|
||||
<div id="updateScope-error" aria-live="polite" aria-atomic="true">
|
||||
{state.errors?.updateScope &&
|
||||
state.errors.updateScope.map((error: string) => (
|
||||
<p className="mt-2 text-sm text-red-500" key={error}>
|
||||
{error}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</fieldset>
|
||||
</>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user