fix: show field-level validation errors on New Leave Request form

[Pasidu-Mihiranga]

Required fields (start/end date, reason) now show inline red-border error styling with helper text on empty submit, instead of relying on the browser's native required-field tooltip.

[Copilot]

Pull request overview

This PR updates the “New Leave Request” dialog in the web app to show inline, field-level validation errors (red borders + helper text) for required inputs instead of relying on browser-native required-field tooltips.

Changes:

• Added fieldErrors state plus a validateForm() helper to gate submission and populate inline errors.
• Wired MUI TextField error/helperText props for start/end date and reason, and attempted to clear per-field errors on change.
• Reset fieldErrors on successful submit and on dialog onClose.

Suppressed comments (3)

auditra web app/src/pages/shared/MyLeaveRequests.jsx:311

• This handler clears fieldErrors.start_date using a spread of fieldErrors from the render closure (setFieldErrors({ ...fieldErrors, ... })). In React this risks lost updates when multiple fieldErrors updates are batched, because each call may start from a stale snapshot. Use functional setState to merge against the latest state; this pattern is repeated elsewhere in the file.

                    onChange={(e) => {
                      handleStartDateChange(e.target.value);
                      if (fieldErrors.start_date) setFieldErrors({ ...fieldErrors, start_date: undefined });
                    }}

auditra web app/src/pages/shared/MyLeaveRequests.jsx:321

• Clearing fieldErrors.end_date via setFieldErrors({ ...fieldErrors, end_date: undefined }) can overwrite other error-state updates due to spreading a stale fieldErrors value. Prefer setFieldErrors(prev => ({ ...prev, end_date: undefined })) (or delete the key) to avoid lost updates; same issue exists in other onChange handlers.

                    onChange={(e) => {
                      setForm({ ...form, end_date: e.target.value });
                      if (fieldErrors.end_date) setFieldErrors({ ...fieldErrors, end_date: undefined });
                    }}

auditra web app/src/pages/shared/MyLeaveRequests.jsx:333

• The reason field clears its error using setFieldErrors({ ...fieldErrors, reason: undefined }), which can drop other simultaneous/batched updates because it spreads a stale closure value. Use a functional update to merge with the latest state; same pattern is present in other fields in this dialog.

                onChange={(e) => {
                  setForm({ ...form, reason: e.target.value });
                  if (fieldErrors.reason) setFieldErrors({ ...fieldErrors, reason: undefined });
                }}

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.