Add custom date-range picker with single-day toggle to DateRangeSelector

[IanTheMitten]

Motivation

• Provide a richer custom date selection experience for the budget page by allowing custom ranges and single-day selection with a calendar popover and summary display.
• Surface start/end dates and a compact picker UI so users can inspect and adjust custom selections easily.

Description

• Renamed the icon import to CalendarIcon, added Card, Label, Popover, Switch, and Calendar UI components, and introduced a formatDate helper and isSameDay utility.
• Added a custom option to the ranges list and extended the component props to accept customStart, customEnd, onCustomStartChange, and onCustomEndChange.
• Implemented single-day vs range handling with handleSingleDateSelect, handleRangeSelect, handleSingleDayToggle, and computed selectedRange and pickerSummary for the popover trigger.
• Rendered a Card with a Switch to toggle single-day mode and a Popover that shows the Calendar in single or range mode and displays formatted start/end dates.

Testing

• Ran TypeScript type-check via yarn tsc and the check completed without errors.
• Performed an application build via yarn build which succeeded, and no new automated tests were added for this UI change.

---

Codex Task