hackforla / hackforla/tdm-calculator
Design: Update Submitted filter to match ID filter UI pattern
- Dominant language
- JavaScript
- Stars
- 68
- Forks
- 47
- Avg merge
- 3d 9h
- Merged PRs (30d)
- 25
Description
[Quick link to bottom of page](https://github.com/hackforla/tdm-calculator/issues/2933#react-issue-comment-composer)
### Overview
We need to update the Submitted overlay filter on the My Projects page to match the ID overlay filter UI pattern, so that its a consistent experience for users.
### Details
- Update the Submitted filter to use the same UI pattern as the ID filter.
- Add three radio buttons:
- Submitted
- Not submitted
- Submitted and Not submitted (default)
- Date range should only be enabled when "Submitted" is selected.
- Sorting behavior should follow selection logic.
- UI should visually match ID filter.
#### Conditional Behavior
- If **Submitted** is selected:
- Date range fields remain enabled.
- Sorting by submission date works normally.
- If **Unsubmitted** is selected:
- Date range fields are hidden or disabled.
- Sorting by submission date is disabled.
- (Unsubmitted records do not have submission dates.)
- If **Submitted and Unsubmitted** is selected:
- Default behavior applies (current system logic).
Current Submitted filter screenshot
ID filter used as UI reference screenshot
#### Acceptance Criteria
- [x] Three radio buttons are added.
- [x] Date range is conditionally enabled/disabled.
- [x] Sorting behaves correctly depending on selection.
- [x] Default selection is "Submitted and Unsubmitted".
- [x] UI matches ID filter style.
### Action Items
- [x] Assign yourself to this issue.
- [x] Move the issue from Prioritized Backlog to In Progress.
- [x] In Figma, move a blank page to the Design section.
- [x] Change the Figma page's title to have the format "#Issue Number | Title | Assignee Name".
- [x] Copy contents from the Figma Template page to this issue's Figma page.
- [x] Include a link to this issue's Figma page in the Figma section below.
- [x] Use the Figma page to design solutions for this issue.
- Once this issue is ready to be reviewed:
- [x] Add a comment tagging the team design lead that [explains the design](https://github.com/hackforla/tdm-calculator/wiki/Design:-Presentations).
- [x] Move it to the Visual Review column.
- [x] Add the `ready for Design lead` label
- [x] Once you have received feedback from the team lead, implement feedback as necessary.
- [x] Use [presentation structure](https://github.com/hackforla/tdm-calculator/wiki/Design:-Presentations) to review proposed designs with the design director. Implement feedback as necessary.
- [x] Use [presentation structure](https://github.com/hackforla/tdm-calculator/wiki/Design:-Presentations) to review proposed designs with the product, development, and research teams. Implement feedback as necessary.
- [x] Create a new slide (or edit one if it already exists) in staging and add images and appropriate text
- [ ] Receive design approval from stakeholders. Implement feedback as necessary.
- [x] Add any annotations to the Figma design that would help the developer with implementation.
- [x] Create a Ready for Dev section around the final designs on the Figma page.
- [x] Update the [Figma Design System](https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=4041-12655&t=54f7L4Eubz7ppygs-1) with changes resulting from the issue's final design, if applicable.
- [ ] Update the [Style Guide Presentation](https://docs.google.com/presentation/d/1I4q35NL2WW2RpksIyawhHCd8qJnrjme1ZDNIBxu24hQ/), if applicable.
- [x] Add a comment to the issue that references the final design and adds any annotations that would help the developer with implementation.
- [ ] Create a [development handoff issue](https://github.com/hackforla/tdm-calculator/issues/new?template=development-handoff-issue.md) that references the comment.
- [ ] Move the Figma page to the Development section of the Figma file.
- [ ] Add the development issue's number in parentheses at the beginning of the title of the Figma page.
- [ ] Include the development handoff issue number in the GitHub section below.
- [ ] Reassign any previous assignees to this issue.
- [ ] Close this issue.
### Resources
#### GitHub
-
#### [Figma](https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=35291-9125&t=WpPNuUyCLmFPr9A5-0)
#### Dev Site
-
#### Staging and Release decks
- [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/)
- ~[Staging slide, slide 2933](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/edit?slide=id.g3cd134d079d_34_25#slide=id.g3cd134d079d_34_25)~
- Release Deck
- [2025-MM-DD Release deck, slide ISSUE NUMBER]
Contributor guide
Assessment
This issue has not been assessed yet.