Neeraj Add Export And Download Functionality To Resource Usage Monitoring

[Neeraj-Kondaveeti]

Description

Related PRS (if any):

This frontend PR is related to the development Backend branch.
…

Main changes explained:

• Updated the Resource Usage Monitoring page to add client-side export functionality for resource usage data.
• Added support for exporting table data in CSV and Excel formats.
• Ensured exported data reflects the currently rendered table view and includes only visible columns, excluding action buttons.
• Added a lightweight loading and disabled state to export buttons to prevent repeated actions during export.
• Declared the required dependency for Excel export and updated lockfiles accordingly.
• Preserved the existing page structure, layout, and logic without refactoring or redesign.

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as admin user
5. Navigate to : http://localhost:5173/communityportal/activity/:activityId/resourcesusage
6. Verify that the page renders as before with no visual or functional regressions.
7. Click Export CSV and Export Excel and confirm files are downloaded successfully.
8. Open the downloaded files and verify that column headers, order, and values match the table.
9. Toggle dark mode and confirm the export buttons remain usable and the page styling remains consistent.

Screenshots or videos of changes:

Note:

• Export is implemented client-side and operates on the currently rendered dataset, as this page is currently frontend-only with static data.
• Backend-driven export, permission validation, and background processing can be added in the future once this page is backed by API data.
• No backend code was modified as part of this change.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	7dee8fb
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69debcf3e0ee8d0008ef3903
😎 Deploy Preview	https://deploy-preview-4721--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[sayali-2308]

..

[sayali-2308]

• Checked out branch: Neeraj_Resource_Usage_Export
• Backend: Running on development branch
• Tested on: Windows, Chrome browser
• Both servers running locally (Backend: 4500, Frontend: 5173)

Functionality Tested:
Test 1: Page Loading and UI

• Navigated to Resource Usage Monitoring page
• Page loaded correctly with no visual regressions
• "Export CSV" and "Export Excel" buttons visible in top right corner
• Table displays with correct columns: S.No, Name, Materials, Facilities, Status, Due Date, Actions
• Sample data showing 4 rows with different statuses (Debited, Partially Debited, Not Debited)
• Existing features (View Details, Tick off All Selected Items) still functional
• Page layout and structure preserved

Test 2: Export CSV Functionality

• Clicked "Export CSV" button
• File downloaded successfully as CSV format
• Opened CSV file and verified contents
• Column headers correct: S.No, Name, Materials, Facilities, Status, Due Date
• All 4 data rows exported with correct values:
• Row 1: 1, Harsh Kadyan, ????, Software Engineer Team, Debited, 23 April 2025
• Row 2: 2, John Doe, ????, HR Facilities, Partially Debited, 12 May 2025
• Row 3: 3, Jane Smith, ????, IT Equipment, Not Debited, 15 March 2025
• Row 4: 4, Alex Brown, ????, Admin Facilities, Debited, 20 April 2025
• Actions column correctly excluded from export
• CSV properly formatted with comma separators and quoted values
• No button remained in disabled/loading state after export

Test 3: Export Excel Functionality

• Clicked "Export Excel" button
• File downloaded successfully in Excel format (.xlsx)
• Opened Excel file and verified contents
• Same column headers and data as CSV export
• Data properly formatted in Excel spreadsheet
• All columns aligned correctly
• Excel file opens without errors
• Actions column correctly excluded from export

Test 4: Export Data Accuracy

• Compared exported files with table display
• All visible column data matches exactly
• Row order preserved (S.No 1-4)
• Status values exported correctly (Debited/Partially Debited/Not Debited)
• Date formats preserved (23 April 2025, etc.)
• Special characters (????) handled correctly
• Only currently visible columns included in export
• Action buttons column correctly excluded

Test 5: Dark Mode Compatibility

• Toggled to dark mode
• "Export CSV" button clearly visible with light gray background
• "Export Excel" button clearly visible with white/light border
• Both buttons maintain good contrast against dark background
• Table styling consistent in dark mode (dark background, light text)
• Header row styled appropriately (light blue background)
• All text remains readable with proper contrast
• Status colors still visible (green, orange, red)
• No visual regressions in dark mode

Test 6: Dark Mode Export Functionality

• Clicked export buttons while in dark mode
• CSV export works correctly in dark mode
• Excel export works correctly in dark mode
• Downloaded files contain same correct data
• No errors or issues during export in dark mode

Test 7: Button States and User Feedback

• Export buttons clickable and responsive
• No duplicate downloads when clicked once
• Buttons don't remain in disabled state after export
• Browser download prompt appears correctly
• Multiple exports can be performed successfully

Code Quality:

• No console errors observed during testing
• No warnings in browser console
• Page remains responsive after exports
• No memory leaks or performance issues
• Export happens quickly without freezing page
• Clean implementation with proper loading states

[rohanrastogi311]

Hi Neeraj,

Well done with this implementation.

[HemanthNidamanuru]

Hi Neeraj,

I tested this PR locally and everything is working fine. The page loads correctly, CSV and Excel exports download successfully with the right headers and values, and the dark mode styling looks consistent.

[Anusha-Gali]

Hi Neeraj,

Please update the link to the http://localhost:5173/communityportal/activity/:activityid/resources being used in PR #4765 instead of resourcesusage as how can same functionality be accessed via two different API calls. Also would appreciate if you can enhance the text color of the Export Buttons in dark mode.

Issues

Exports

[Neeraj-Kondaveeti]

Hi Neeraj,

Please update the link to the http://localhost:5173/communityportal/activity/:activityid/resources being used in PR #4765 instead of resourcesusage as how can same functionality be accessed via two different API calls. Also would appreciate if you can enhance the text color of the Export Buttons in dark mode.

Issues

Exports

Hi Anusha,

Thank you for pointing it out, I have resolved the issues mentioned. This particular PR/page uses this link: http://localhost:5173/communityportal/activity/:activityId/resourcesusage. And I have enhanced the text color of the export buttons in dark mode. Please test it out again and let me know if the issues still persist.

Thank You

[Vishnu10-hub]

Hi Neeraj,

This is approved. Please go ahead with updating the link to /resources and enhancing the Export button text color in dark mode. Verified that CSV/Excel download works correctly.

Thanks.

[Anusha-Gali]

Hi Neeraj,

Thank you for making the requested changes, the PR functions as per requirement.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
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