Weekly Volunteer Summary Dashboard Components

[Sudershhh]

PR: Update TotalOrgSummary and Related Components

Description

This PR updates the TotalOrgSummary component and its related child components to work with the new API structure. It improves the dashboard's data visualization capabilities and ensures compatibility with the latest backend changes.

Related PRs

This frontend PR is related to the backend PR 1062 (OneCommunityGlobal/HGNRest#1062).

For Reference Frontend PRs,

1. PR 2395 (Sri/volunteer status and volunteer activity tabs #2395)
2. PR 2499 (Sri/volunteer status pie chart #2499)
3. PR 2467 (Sri/blue square stats #2467)
4. PR 2452 (sri/Team Stats bar Chart #2452)

Note: The above 4 PRs MUST NOT BE MERGED. I created them with just UI in mind.

Main Changes Explained

• Updated TotalOrgSummary component to fetch and distribute data to child components.
• Refactored VolunteerStatus component to use the new volunteerNumberStats structure.
• Updated VolunteerStatusPieChart to display active, deactivated, and new volunteer data.
• Created BlueSquareStats component to visualize blue square statistics.
• Updated TeamStats component to use the new usersInTeamStats structure and fetch additional data from a separate API endpoint.
• Removed static data from constants and updated components to use dynamic data from the API.
• Improved error handling and loading states across components.
• Ensured all components are responsive and accessible.

How to Test

1. Check out the current branch
2. Run npm install to install any new dependencies
3. Start the development server (e.g., npm run dev)
4. Clear site data/cache in your browser
5. Log in as an admin user
6. Navigate to Dashboard → Reports → Total Org Summary
7. Verify the following components are rendering correctly with the new data structure:

• VolunteerStatus
• VolunteerActivities
• VolunteerStatusChart
• BlueSquareStats
• TeamStats

11. Check that the TeamStats component displays the additional "teams with 4+ active members" information
12. Test responsiveness by resizing the browser window
13. Verify that appropriate loading and error states are displayed when applicable

Additional Notes

• This PR assumes that the related backend changes are in place. Ensure the backend is updated before merging this PR.
• Some components (e.g., BlueSquareStats) are prepared for future API fields that may not be available yet. They include fallback handling for missing data.

[strallia]

Hi Sri. I've reviewed your PR and here are my requested changes:

Volunteer Status Pie chart

• The background colors for the Active, New , and Deactivated portions need to be the same color as the corresponding tabs in the Volunteer Status component as shown in the Figma design:

  • 

• The numbers should be centered and the title color black to match the design.

  • 

Volunteer Status and Activities

• No changes needed.

Blue Square Stats

• Figma design had an update to inlcude a "vacation time" category, and the color for the "Other" category has changed. Please add these in.
  • 

Team Stats chart

• The "X teams with X+ active members" component needs a dropdown for users to select the number of active team members. This is the figma updated design:
  • 
  • 

[strallia]

Hey Sri. I looked into your changes and here's my feedback:

Volunteer Status Pie Chart

The pie chart was using the correct colors/hues before. I meant for you to keep the blue color with "New" and pink with "Deactivated" which I see is fixed now. Please update this to use the exact colors in the Figma (left of image). Apologies for the confusion.

The percentages are also missing parentheses.

Blue Square Stats

The "Other" category in the legend is missing its orange color. The corresponding portion in the chart should be orange instead of black as well with visible numbers on top.

The percentages in parentheses should be whole numbers, no decimals.

At smaller browser widths, the colored square for "Missing Both Hours & Summary" gets squashed.

I confirm the other changes I requested have been fixed. Thank you!

[strallia]

Volunteer Status pie chart looks good now. I made a commit to fix the colors in that chart and the Blue Square Stats chart to match the Figma.

The legend in the Blue Square Stats chart does not follow the design now. Please fix so that the color swatches are squares to left of the text. Here's the Figma for your reference.

[strallia]

For responsiveness, I added a commit to make the Blue Square Stats chart scrollable at small browser widths and another to center the content at wider widths.

I confirm the color swatches in the legend are fixed now. Thanks for your work!