Juhitha fix people report page UI

[Juhitha-Reddy]

Description

Fixed People Report page UI issues for mobile and narrow screens (375px and up). Improved table layout, column widths, and added comprehensive dark mode support for mobile card view and filter controls.

Fixes WBS: Fix PEOPLE REPORT PAGE UI issues for 375px and up (Juhitha Reddy Penumalli)

Related PRS (if any):

Reference to Previous PR #2005, PR #2650

Main changes explained:

• Renamed PeopleTableDetails.css → PeopleTableDetails.module.css to comply with project CSS modules convention
• Updated PeopleTableDetails.jsx to use CSS modules syntax for all className references
• Widened Task column from 2.2fr to 3.5fr to display longer task names properly
• Reduced other column widths (Priority, Status, Start Date, End Date from 1fr to 0.8fr) for better space utilization
• Fixed column alignment by:
  • Removing justify-content: space-between
  • Adding gap: 0 to grid layout
  • Standardizing padding to 8px 16px
• Added dark mode styling for mobile card view (< 1024px screens):
  • Dark card backgrounds (#232946)
  • Dark headers (#1C2541)
  • Purple-blue status badges (#5A67D8)
  • White text throughout
• Added dark mode styling for "Clear Filters" button
• Fixed profile picture sizing to 30px × 30px circles with proper spacing
• Updated mock data to use colorful placeholder images with initials instead of default avatar
• Updated test file to work with CSS modules (finding elements by content instead of class names)

How to test:

1. Check out current branch: Juhitha_fix_people_report_page_UI

2. Run npm install to ensure all dependencies are installed

3. Clear site data/cache in browser (DevTools → Application → Clear storage)

4. Run the app locally: npm start

5. Log in as Admin or Owner user

6. Navigate to: Reports → Reports → People tab

7. Click on any user name to view their report

8. Verify Desktop View (> 1024px):

   • Task column is significantly wider than before
   • Other columns (Priority, Status, Start Date, End Date) are narrower
   • All columns align properly with their headers
   • Profile pictures are small circles (30px)
   • No white space/gaps between columns

9. Verify Mobile View (< 1024px):

   • Resize browser window to less than 1024px width
   • Tasks display as cards instead of table rows
   • Each card shows all task information

10. Verify Dark Mode:

    • Enable dark mode in application settings
    • Desktop view: Check that table maintains proper dark mode colors
    • Mobile view: Verify:
      • Cards have dark background (#232946)
      • Headers have darker background (#1C2541)
      • Status badges are purple-blue
      • All text is white and readable
      • "Clear Filters" button has dark background with white text
    • Toggle filters and verify "Clear Filters" button has proper dark mode styling

11. Verify Filters:

    • Test various filter combinations
    • Click "Clear Filters" button - should reset all filters
    • In dark mode, button should have dark background with white text

Screenshots or videos of changes:

Uploading Screen Recording 2025-12-19 at 1.48.58 PM.mov…

Desktop View - Light Mode:

• Task column is wider
• Columns properly aligned
• Profile pictures sized correctly

Mobile View - Dark Mode:

• Dark card backgrounds
• White text
• Proper contrast and readability

Clear Filters Button:

• Light mode: White background, purple text
• Dark mode: Dark background, white text

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	4847fa0
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/694fe796e72270000926abe1
😎 Deploy Preview	https://deploy-preview-4635--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
7 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