Kristin - Add Dark Mode Support for Log Attendance Page

[KH07]

Description

Make the page fully compatible with dark mode, restore the page header, and update tooltip styling so tooltip colors match the corresponding legend colors.

Related PRS (if any):

This frontend PR is related to the #3081 front end PR.

Main changes explained:

• Refactor AttendanceNoShowCharts.jsx for readability and ease of maintenance
• Create AttendanceNoShowCharts.module.css to add dark mode styling support
  …

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 any user
5. go to http://localhost:3000/logattendance
6. verify page header and dark mode renders correctly

Screenshots or videos of changes:

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	1c108cf
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/696c8695c4e19e0008f8d5ad
😎 Deploy Preview	https://deploy-preview-4484--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

[rohanrastogi311]

HI Kristin,

Well done with the implementation. Dark mode is functional. I believe this is out of scope but wanted to make you aware that boxes hovering the pie charts aren't visible in dark mode (check image below).

[Anusha-Gali]

Hi Kristin,

I have reviewed your PR locally and though the page is adapted to dark mode, and the header is visible as well. the only issue is the tooltip, it isn't visible in darkmode.

[KH07]

HI Kristin,

Well done with the implementation. Dark mode is functional. I believe this is out of scope but wanted to make you aware that boxes hovering the pie charts aren't visible in dark mode (check image below).

I have added dark mode styling for the charts' tooltip.

[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