820: Added date range indicator

[az2924]

820

Description of changes

Checklist before review

• I have done a thorough self-review of the PR
• Copilot has reviewed my latest changes, and all comments have been fixed and/or closed.
• If I have made database changes, I have made sure I followed all the db repo rules listed in the wiki here. (check if no db changes)
• All tests have passed
• I have successfully deployed this PR to staging
• I have done manual QA in both dev (and staging if possible) and attached screenshots below.

Screenshots

Dev

Staging

[az2924]

/deploy

[github-actions]

Available PR Commands

• /ai - Triggers all AI review commands at once
• /review - AI review of the PR changes
• /describe - AI-powered description of the PR
• /improve - AI-powered suggestions
• /deploy - Deploy to staging

See: https://github.com/tahminator/codebloom/wiki/CI-Commands

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Styling Consistency The clockIconStyle object is quite verbose for an inline style. Consider moving this to a .module.css file or using Mantine's sx prop for more complex styling, as per the "Styling" guidelines. const clockIconStyle = { position: "absolute" as const, top: -8, right: -8, width: 22, height: 22, borderRadius: "50%", backgroundColor: "var(--mantine-color-teal-7)", border: "2px solid var(--mantine-color-dark-7)", display: "flex", alignItems: "center", justifyContent: "center", }; Mobile UX The clock icon indicating an active date range does not include a Tooltip for mobile users. This means mobile users will not see the detailed date range information, which is inconsistent with the desktop experience and could reduce usability. Consider adding a similar tooltip or an alternative way to display the date range on mobile. {dateRangeLabel && ( <Box style={{ ...clockIconStyle, pointerEvents: "none" }}> <IconClock size={13} color="white" stroke={2.5} /> </Box> )}