Skip to content

Casstiel improve weekly project summary filters and section usability#5415

Draft
CasstielP wants to merge 11 commits into
developmentfrom
Casstiel_improve_weekly_project_summary_filters_and_section_usability
Draft

Casstiel improve weekly project summary filters and section usability#5415
CasstielP wants to merge 11 commits into
developmentfrom
Casstiel_improve_weekly_project_summary_filters_and_section_usability

Conversation

@CasstielP

Copy link
Copy Markdown
Contributor

Description

Implements the frontend portion of the Weekly Project Summary usability improvements. This PR improves the Weekly Project Summary page by adding clearer filter context, section controls, comparison UI structure, section-level badges, empty-state support, and loading feedback when filters change.

The task could not be fully completed with frontend changes alone because real comparison values, dynamic badge counts, and accurate no-data detection require backend support across related routes, controllers, models, and chart-specific data sources. This PR adds the frontend structure needed for those features, while backend logic will be handled separately.

Fixes/Implements: Weekly Project Summary filter and section usability improvements

Related PRS (if any):

This frontend PR is related to the potential backend work for Weekly Project Summary data support. The backend PR is expected to provide real project/date filtering, previous-week comparison data, dynamic section counts, and no-data detection for dashboard sections.

Main changes explained:

  • Updated WeeklyProjectSummary.jsx to add an active summary banner showing the selected project and week.
  • Added Expand All and Collapse All controls for dashboard sections.
  • Added a Compare with Previous Week checkbox to show comparison banner structure inside opened sections.
  • Added section header badges to make sections easier to identify and scan.
  • Added empty-state message support for sections with no data.
  • Added loading feedback when project/date/comparison filters change.
  • Passed project, date range, and comparison period values into child chart components as shared filter props.
  • Replaced unstable generated render keys with stable section and card keys.
  • Updated WeeklyProjectSummary.module.css for the new controls, badges, comparison banners, empty states, responsive behavior, dark mode styling, and print behavior.
  • Fixed layout behavior so charts and cards do not become compressed when the comparison banner is displayed.

How to test:

Check out this frontend branch.
Run the app locally with the normal frontend setup command.
Log in as an admin user.
Go to Reports -> Total Construction Summary
Verify the page shows the active project and selected week near the top.
Click Expand All and confirm all sections open.
Click Collapse All and confirm all sections close.
Enable Compare with Previous Week and confirm comparison banners appear inside opened sections.
Confirm the Project Status cards and charts are not squeezed or compressed when comparison mode is enabled.
Verify the section badges appear in the section headers.
Change the available project/date filters and confirm the loading feedback appears.
Test in dark mode and confirm the controls, badges, comparison banners, and section headers remain readable.
Use Share PDF and confirm the export still works without including the frontend-only controls.

Screenshots or videos of changes:

Screen.Recording.2026-07-24.at.9.22.43.PM.mov

Note:

This PR adds the frontend structure for the task requirements, but some values are still frontend-driven placeholders. Real comparison messages, dynamic badge counts, and accurate no-data states require backend support. Backend implementation has started separately, beginning with the /issues/breakdown route so the Issues Breakdown chart can retrieve authorized JSON data and render from the backend endpoint.

@netlify

netlify Bot commented Jul 25, 2026

Copy link
Copy Markdown

Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit 1a8c7c2
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a65078d3628de000844cf84
😎 Deploy Preview https://deploy-preview-5415--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@CasstielP
CasstielP marked this pull request as ready for review July 25, 2026 16:11
@CasstielP
CasstielP marked this pull request as draft July 25, 2026 18:29
@sonarqubecloud

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant