Ramsundar - Frontend Fix "Usage Record" modal not displaying Data

[Ram-blip]

Description

Related PRS (if any):

This frontend PR is related to the #1921 backend PR.

Main changes explained:

• Modal now displays data when clicking "View" under Usage Record column
• If no data, Now it has a proper empty state message

How to test:

1. check into current branch
2. do npm install and npm run start:local to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go to /bmdashboard/consumables
6. Click the View button under usage Record Column and check all the records

Screenshots or videos of changes:

https://www.loom.com/share/398669df8e984df28cbd3dd5f919b856

Note:

Include the information the reviewers need to know.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	6b34082
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6925557a0a08f80008ef0780
😎 Deploy Preview	https://deploy-preview-4455--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

[VijayAnirudh]

Review Summary ✅

Tested the Frontend_Fix_Usage_Record_Modal_Not_Displaying_Data branch locally:

• Modal Behavior

  • Clicking View under the Usage Record column now correctly opens the modal with data populated.
  • When no records exist, a proper empty state message is displayed instead of a blank modal.

• Integration

  • Verified frontend fix works in conjunction with backend PR #1921.
  • Email field is included and displays correctly in usage records.

• Testing Steps

  • Cleared site data/cache, logged in as admin.
  • Navigated to /bmdashboard/consumables.
  • Confirmed modal renders data and empty state as expected.

• Quality Checks

  • No console errors or warnings observed.
  • Netlify deploy preview matches local behavior.
  • SonarQube Quality Gate passed (0 issues).

Conclusion

All acceptance criteria have been met:

• Modal displays usage record data correctly.
• Empty state message works as intended.
• Integration with backend fix confirmed.

Approving this PR ✅

[VijayAnirudh]

[Edit]

I've tested the PR again.

1. I can see the emails
2. Every "view" option (user record, update record, purchase record) works fine!
3. But in dark mode I cannot see the column headings.
4. Please correct the naming "UsageRecord Record" --> "Usage Record."

Great work! Please fix the dark mode.

[Ram-blip]

I checked the latest dev website and it looks like someone has worked on it. Last time the page was connected to a different endpoint. I think someone created a new endpoint and changed the UI, so everything is different now. So, I am closing this PR.