Enhancement/1868 Update Datepicker

[DrAcula27]

Fixes #1868

• Up to date with main branch
• Branch name follows guidelines
• All PR Status checks are successful
• Peer reviewed and approved

Summary

• Replaced the single selector with two accessible fields (Start / End), moved calendar into a SelectorBox collapse, fixed a race that caused stale highlighted ranges when only the end date changed, standardized a few style constants, and implemented automatic focus transfer from Start to End field after selecting a start date.

Details

In src/components/common/DatePicker.jsx:

• Replaced the previous non-semantic clickable divs with semantic <button> elements for the Start and End fields, added ARIA attributes (aria-haspopup, aria-expanded, aria-label), and applied a small button helper class so SVG/icon and hover styles are preserved.
• Adjusted the selector rule to target any direct child (& > *) instead of specific selectors, so styles apply to buttons, and introduced a few small local style constants inside the component’s makeStyles to reduce repeated magic numbers (gap, padding, border radius, icon size).
• Added support for endDateBtnRef prop to enable programmatic focus on the End Date button from parent components.
• Behavior and layout were kept the same (two equally-flexing fields that open the calendar), but keyboard and screen-reader interaction are now improved.
• Reviewers should verify button focus/activation, aria-expanded toggling, and that the visual styling matches the goal.

In src/components/common/ReactDayPicker.jsx:

• Added a local UI buffer (pendingSelection) so when the user clicks a date the calendar highlights the new selection immediately while Redux updates are in flight, and implemented logic to compute effectiveStart/effectiveEnd (prefers pendingSelection → redux props → hovered enteredTo) to avoid the stale-range bug.
• Cleared pendingSelection automatically once connected props match.
• Standardized some repeated style literals with a small STYLE object (minWidth, padding, day max width, nav spacing, pseudo-element extra size).
• The selection flow now calls onSelectionComplete(selection) (deferred microtask) so parent can synchronously reconcile store state.
• Fixed critical control flow bug in handleDayClick: added missing return statements in the activeField === 'end' branch (after completing end date selection and after treating a click as a new start) to prevent code from falling through to subsequent logic blocks. This bug was causing the selection flow to execute multiple conflicting paths.
• Enhanced all selection paths to consistently call onSelectionComplete with the appropriate selection object, including when starting a new range (startDate && endDate case) and when swapping dates (clicked < startDate case), enabling proper parent component coordination.
• Reviewers should test end-only selection, swap behavior (end < start), hover-to-select flows, and confirm immediate UI feedback with no stale highlights.

In src/components/DateSelector.jsx:

• Made DateSelector accept the selection object returned by the calendar and immediately dispatch updateStartDate/updateEndDate and update its captured initialStart/initialEnd when a selection is completed, then defer closing the collapse to the next microtask (Promise.resolve().then(...)) so Redux/props have a chance to flush before the UI collapses.
• Implemented automatic focus transfer: when a start date is selected without an end date, the component now automatically sets activeField='end' and programmatically focuses the End Date button using requestAnimationFrame (double-buffered for reliable DOM updates). This provides clear visual feedback that the user should proceed to select an end date.
• Added endDateBtnRef to enable reliable programmatic focus on the End Date button after start date selection.
• The outside-click handler still reverts to the captured initial values when the user cancels.
• Reviewers should confirm cancel/revert behavior (click outside), that selection handoff updates the store immediately, and that collapsing/reopening no longer shows stale highlights.

Notes

• App built successfully.
• Manual checks to run in the browser:
  • open Start vs End,
  • edit End-only (verify immediate highlight and no stale range on reopen),
  • edit Start-only,
  • verify automatic focus transfer from Start to End field after selecting a start date,
  • verify End Date field receives visual styling (active border),
  • pick end < start (swap),
  • keyboard-open via Enter/Space, and
  • outside-click to cancel/revert.

[DorianDeptuch]

Availability: Weekday Evenings
ETA: 11/26 EOD