[adit24dhaya]

Description

Original task request

Task 1558 · Original entry in HGN Phase II. Find Project Status: Duplicate “Active Projects” card and unclear Avg Project Duration unit.

Complete original entry captured directly from the source document before implementation:

The Project Status duration card does not explain what its hours measure. Rename it Avg Completed Project Duration (hours) and define it as start-to-completion time for projects completed in the selected period.

The duplicate Active Projects card was already removed in merged PR #5516. This PR preserves that change and adds regression coverage.

Related PRS (if any)

Frontend only. The existing backend endpoint already calculates average elapsed milliseconds between startDate and completionDate for completed projects, converts to hours and returns unit: 'hrs'. See the current calculation. No paired backend change is required.

Main changes explained

• Clarify the duration title and show its definition beneath it.
• Let cards grow from their existing minimum height so the longer text fits on mobile and desktop.
• Add accessible named card sections and six regression cases covering the single Active Projects card, zero/17/1,008 hours and unavailable data.
• Preserve API values, comparison behavior and N/A for missing data.

How to test

1. Check out fix/project-status-cards, use Node 20 and start the existing frontend setup.
2. As an Admin in an isolated test environment, open /bmdashboard/totalconstructionsummary, select a reporting period and expand Project Status.
3. Confirm there is one Active Projects card. The duration card should state Avg Completed Project Duration (hours) and explain which projects it covers.
4. Use mocked responses for 0, 17, 1,008 hours and unavailable data. Confirm values are preserved and missing data stays N/A, with its existing explanation control.
5. Check both themes and narrow screens; titles, definitions and values should fit inside their cards.

Validation at 413741f03e:

• 19 tests pass across the report, action and reducer suites, including six new cases.
• 32 Chromium cases, 360 assertions pass: 320/390/768/1280px, both themes, four duration-data cases; checked overflow, text contrast, card counts and displayed values.
• Production build, changed-file JavaScript/CSS lint and whitespace checks pass. The existing large-bundle build warning remains.

Focused command:

npx vitest run src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.projectStatus.test.jsx src/actions/__tests__/weeklyProjectSummaryActions.test.js src/reducers/__tests__/weeklyProjectSummaryReducer.test.js

Sonar cleanup follow-up (a39fc06fcf, November 3)

• Replace generic role="group" containers with named native sections and verify their accessible region names.
• Remove the duration-specific !important override and share the existing readable card-text styling in dark mode.
• 19 report/action/reducer tests pass; 32 Chromium cases with 360 assertions pass across four widths, both themes and zero/17/1,008/missing values. Contrast and card/page overflow were checked with the actual global dark-mode stylesheet.
• JavaScript lint, CSS lint, commit hooks and production build pass (36.56s). All three GitHub test jobs, CSS Modules, preview and Sonar pass on this commit; Sonar confirms zero open issues.
• Current code/UI pictures and a short walkthrough are saved locally in Week 6; they have not been uploaded to Dropbox.

Screenshots or videos of changes

Actual report and styles with synthetic API metrics; unrelated charts are stubbed:

Code/mobile screenshots and a short compressed walkthrough are also prepared locally in Week 5 for the weekly submission; the video has not been uploaded.

Note

Browser validation used the actual report, header, Redux action/reducer and theme handling with mocked API replies. No shared database writes were made. Authenticated dashboard E2E, live backend persistence, other browser engines and PDF export were not tested.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	a39fc06
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6aeac578d178372532a219b0
😎 Deploy Preview	https://deploy-preview-5729--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle 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.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[adit24dhaya]

Fixed both Sonar findings in a39fc06. Project Status cards now use native named sections, and the duration explanation shares the existing readable dark-mode card styling.

Validation: 19 tests and 32 browser cases (360 assertions) passed across mobile/desktop widths, both themes and zero/missing/large hour values. Build and JS/CSS lint pass. Sonar confirms zero open issues and a passing Quality Gate. All three GitHub test jobs, CSS Modules and the preview now pass. The PR is conflict-free and ready for review.