From cb5225a73e2788366da3abebb928cf7cfc68da31 Mon Sep 17 00:00:00 2001
From: juhitha-reddy <pjuhireddy4445@gmail.com>
Date: Tue, 23 Dec 2025 11:05:32 -0500
Subject: [PATCH 01/16] fix: People Report table column widths and dark mode
 styling for mobile (375px+)

---
 src/components/Reports/PeopleTableDetails.jsx | 122 +++++++++---------
 ...ails.css => PeopleTableDetails.module.css} |  42 +++++-
 2 files changed, 97 insertions(+), 67 deletions(-)
 rename src/components/Reports/{PeopleTableDetails.css => PeopleTableDetails.module.css} (85%)

diff --git a/src/components/Reports/PeopleTableDetails.jsx b/src/components/Reports/PeopleTableDetails.jsx
index e89f7ef822..80649127a3 100644
--- a/src/components/Reports/PeopleTableDetails.jsx
+++ b/src/components/Reports/PeopleTableDetails.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import 'reactjs-popup/dist/index.css';
 import { Container } from 'reactstrap';
-import './PeopleTableDetails.css';
+import styles from './PeopleTableDetails.module.css';
 import NewModal from '../common/NewModal';
 import TableFilter from './TableFilter/TableFilter';
 
@@ -145,61 +145,61 @@ function PeopleTableDetails(props) {
 
   const renderMobileFilteredTask = (value) => {
     return (
-      <div className={`task-card ${darkMode ? 'text-dark' : ''}`}>
+      <div className={`${styles['task-card']} ${darkMode ? styles['text-dark'] : ''}`}>
         <div key={value._id} >
-          <div className='task-header'>
+          <div className={styles['task-header']}>
             <div>
-              <div className='task-title people-report-task-name task-name-word-break'>
+              <div className={`${styles['task-title']} ${styles['people-report-task-name']} ${styles['task-name-word-break']}`}>
                 {value.taskName}
               </div>  
             </div>
             
-            <div className='task-status'>
+            <div className={styles['task-status']}>
               {value.status}
             </div>
           </div>
-          <div className='task-details'>
-            <div className='task-info'>
-              <div className='sub-head'>Priority</div>
-              <div className='sub-details'>{value.priority}</div>
+          <div className={styles['task-details']}>
+            <div className={styles['task-info']}>
+              <div className={styles['sub-head']}>Priority</div>
+              <div className={styles['sub-details']}>{value.priority}</div>
             </div>
-            <div className='task-info'>
-              <div className='sub-head'>Resources</div>
+            <div className={styles['task-info']}>
+              <div className={styles['sub-head']}>Resources</div>
               <div>{value.resources?.map(res =>
                 res.map((resource, index) => {
                   if (index < 2) {
                     return (
-                      <img
-                        key={`${value._id}-${resource.name}`}
-                        alt={resource.name}
-                        src={resource.profilePic || '/pfp-default.png'}
-                        className="img-circle"
-                        title={resource.name}
-                      />
-                    );
-                  }
-                  return null;
-                }),
-              )}</div>
+                    <img
+                      key={`${value._id}-${resource.name}`}
+                      alt={resource.name}
+                      src={resource.profilePic || '/pfp-default.png'}
+                      className={styles['img-circle']}
+                      title={resource.name}
+                    />
+                  );
+                }
+                return null;
+              }),
+            )}</div>
             </div>
-            <div className='task-info'>
-              <div className='sub-head'>Active</div>
+            <div className={styles['task-info']}>
+              <div className={styles['sub-head']}>Active</div>
               <div>{value.active === 'Yes' ? <span>&#10003;</span> : <span>&#10060;</span>}</div>
             </div>
-            <div className='task-info'>
-              <div className='sub-head'>Assign</div>
+            <div className={styles['task-info']}>
+              <div className={styles['sub-head']}>Assign</div>
               <div>{value.assign === 'Yes' ? <span>&#10003;</span> : <span>&#10060;</span>}</div>
             </div>
-            <div className='task-info'>
-              <div className='sub-head'>Estimated Hours</div>
+            <div className={styles['task-info']}>
+              <div className={styles['sub-head']}>Estimated Hours</div>
               <div>{value.estimatedHours}</div>
             </div>
-            <div className='task-info'>
-              <div className='sub-head'>Start Date</div>
+            <div className={styles['task-info']}>
+              <div className={styles['sub-head']}>Start Date</div>
               <div>{value.startDate}</div>
             </div>
-            <div className='task-info'>
-              <div className='sub-head'>End Date</div>
+            <div className={styles['task-info']}>
+              <div className={styles['sub-head']}>End Date</div>
               <div>{value.endDate}</div>
             </div>
           </div>
@@ -210,8 +210,8 @@ function PeopleTableDetails(props) {
 
   const renderFilteredTask = value => (
     <div>
-      <div key={value._id} className={`people-table-row people-table-body-row ${darkMode ? 'people-table-row-dark' : ''}`}>
-        <div className='people-report-task-name'>{value.taskName}</div>
+      <div key={value._id} className={`${styles['people-table-row']} ${styles['people-table-body-row']} ${darkMode ? styles['people-table-row-dark'] : ''}`}>
+        <div className={styles['people-report-task-name']}>{value.taskName}</div>
         <div>{value.priority}</div>
         <div>{value.status}</div>
         <div>
@@ -223,7 +223,7 @@ function PeopleTableDetails(props) {
                     key={`${value._id}-${resource.name}`}
                     alt={resource.name}
                     src={resource.profilePic || '/pfp-default.png'}
-                    className="img-circle"
+                    className={styles['img-circle']}
                     title={resource.name}
                   />
                 );
@@ -236,15 +236,15 @@ function PeopleTableDetails(props) {
               <button
                 key={res[0]?.name || res[0]?.id}
                 type="button"
-                className="name resourceMoreToggle"
+                className={`${styles.name} ${styles.resourceMoreToggle}`}
                 onClick={() => toggleMoreResources(value._id)}
               >
-                <span className="dot">{res.length - 2}+</span>
+                <span className={styles.dot}>{res.length - 2}+</span>
               </button>
             ) : null,
           )}
-          <div id={value._id} className="extra">
-            <div className="extra1">
+          <div id={value._id} className={styles.extra}>
+            <div className={styles.extra1}>
               {value.resources?.map(res =>
                 // eslint-disable-next-line array-callback-return,consistent-return
                 res.map((resource, index) => {
@@ -254,7 +254,7 @@ function PeopleTableDetails(props) {
                         key={resource.index}
                         alt={resource.name}
                         src={resource.profilePic || '/pfp-default.png'}
-                        className="img-circle"
+                        className={styles['img-circle']}
                         title={resource.name}
                       />
                     );
@@ -265,15 +265,15 @@ function PeopleTableDetails(props) {
           </div>
         </div>
 
-        <div className="people-table-center-cell">
+        <div className={styles['people-table-center-cell']}>
           {value.active === 'Yes' ? <span>&#10003;</span> : <span>&#10060;</span>}
         </div>
-        <div className="people-table-center-cell">
+        <div className={styles['people-table-center-cell']}>
           {value.assign === 'Yes' ? <span>&#10003;</span> : <span>&#10060;</span>}
         </div>
-        <div className="people-table-end-cell">{value.estimatedHours}</div>
-        <div className="people-table-end-cell">{value.startDate}</div>
-        <div className="people-table-end-cell">{value.endDate}</div>
+        <div className={styles['people-table-end-cell']}>{value.estimatedHours}</div>
+        <div className={styles['people-table-end-cell']}>{value.startDate}</div>
+        <div className={styles['people-table-end-cell']}>{value.endDate}</div>
       </div>
     </div>
   );
@@ -285,17 +285,17 @@ function PeopleTableDetails(props) {
   const renderModalContent = (value) => (
     <div>
       <div>Why This Task is important</div>
-      <textarea className="rectangle" type="text" value={value.whyInfo} />
+      <textarea className={styles.rectangle} type="text" value={value.whyInfo} />
       <div>Design Intent</div>
-      <textarea className="rectangle" type="text" value={value.intentInfo} />
+      <textarea className={styles.rectangle} type="text" value={value.intentInfo} />
       <div>End State</div>
-      <textarea className="rectangle" type="text" value={value.endstateInfo} />
+      <textarea className={styles.rectangle} type="text" value={value.endstateInfo} />
     </div>
   )
 
   return (
-    <Container fluid className={`wrapper ${darkMode ? 'text-light' : ''}`}>
-      <div className="table-filter-container">
+    <Container fluid className={`${styles.wrapper} ${darkMode ? styles['text-light'] : ''}`}>
+      <div className={styles['table-filter-container']}>
         <TableFilter
           onTaskNameSearch={onTaskNameSearch}
           searchPriority={searchPriority}
@@ -319,24 +319,24 @@ function PeopleTableDetails(props) {
           EndDate={endDate}
           UpdateEndDate={updateEndDate}
         />
-        <button type="button" onClick={resetFilters} className="tasks-table-clear-filter-button">
+        <button type="button" onClick={resetFilters} className={styles['tasks-table-clear-filter-button']}>
           Clear Filters
         </button>
       </div>
       {windowWidth > 1020 ? (
         <>
-          <div className={`people-table-row reports-table-head ${darkMode ? 'bg-space-cadet' : ''}`}>
+          <div className={`${styles['people-table-row']} ${styles['reports-table-head']} ${darkMode ? styles['bg-space-cadet'] : ''}`}>
             <div data-testid="task">Task</div>
             <div data-testid="priority">Priority</div>
             <div data-testid="status">Status</div>
-            <div data-testid="resources" className="people-table-center-cell">Resources</div>
-            <div data-testid="active" className="people-table-center-cell">Active</div>
-            <div data-testid="assign" className="people-table-center-cell">Assign</div>
-            <div data-testid="eh" className="people-table-end-cell">Estimated Hours</div>
-            <div data-testid="sd" className="people-table-end-cell">Start Date</div>
-            <div data-testid="ed" className="people-table-end-cell">End Date</div>
+            <div data-testid="resources" className={styles['people-table-center-cell']}>Resources</div>
+            <div data-testid="active" className={styles['people-table-center-cell']}>Active</div>
+            <div data-testid="assign" className={styles['people-table-center-cell']}>Assign</div>
+            <div data-testid="eh" className={styles['people-table-end-cell']}>Estimated Hours</div>
+            <div data-testid="sd" className={styles['people-table-end-cell']}>Start Date</div>
+            <div data-testid="ed" className={styles['people-table-end-cell']}>End Date</div>
           </div>
-          <div className="people-table people-table-scrollable">
+          <div className={`${styles['people-table']} ${styles['people-table-scrollable']}`}>
             {filteredTasks.map(value => (
               <NewModal key={value._id} header="Task info" trigger={() => renderFilteredTask(value)} darkMode={darkMode}>
                 {renderModalContent(value)}
@@ -345,7 +345,7 @@ function PeopleTableDetails(props) {
           </div>
         </>
       ) : (
-        <div className="people-table">
+        <div className={styles['people-table']}>
           {filteredTasks.map(value => (
             <NewModal key={value._id} header="Task info" trigger={() => renderMobileFilteredTask(value)} darkMode={darkMode}>
               {renderModalContent(value)}
diff --git a/src/components/Reports/PeopleTableDetails.css b/src/components/Reports/PeopleTableDetails.module.css
similarity index 85%
rename from src/components/Reports/PeopleTableDetails.css
rename to src/components/Reports/PeopleTableDetails.module.css
index 20587686d1..60a2711d7d 100644
--- a/src/components/Reports/PeopleTableDetails.css
+++ b/src/components/Reports/PeopleTableDetails.module.css
@@ -8,8 +8,8 @@
 
 .reports-table-head {
   display: grid;
-  grid-template-columns: 2.2fr 1fr 1fr 1.2fr 0.6fr 0.6fr 1.2fr 1fr 1fr;
-  justify-content: space-between;
+  grid-template-columns: 3.5fr 0.8fr 0.8fr 1fr 0.6fr 0.6fr 1fr 0.8fr 0.8fr;
+  gap: 0;
   align-items: center;
   vertical-align: middle;
   overflow: hidden;
@@ -24,12 +24,12 @@
 
 .people-table-row {
   display: grid;
-  grid-template-columns: 2.2fr 1fr 1fr 1.2fr 0.6fr 0.6fr 1.2fr 1fr 1fr;
-  justify-content: space-between;
+  grid-template-columns: 3.5fr 0.8fr 0.8fr 1fr 0.6fr 0.6fr 1fr 0.8fr 0.8fr;
+  gap: 0;
   align-items: center;
   vertical-align: middle;
   min-height: 42px;
-  padding: 0 16px;
+  padding: 8px 16px;
   cursor: pointer;
   border-bottom: 3px solid #f8f7f8;
   width: 100%;
@@ -37,7 +37,7 @@
 /* flex-wrap: wrap;
 flex-direction: row; */
 
-.reports-table-head,
+.reports-table-head > div,
 .people-table-row > div {
   padding: 8px;
   text-align: left;
@@ -46,6 +46,18 @@ flex-direction: row; */
   font-size: 16px;
   word-wrap: break-word;
   white-space: normal;
+  overflow: hidden;
+}
+
+/* Profile picture styling */
+.people-table-row .img-circle {
+  border-radius: 50%;
+  height: 30px;
+  width: 30px;
+  object-fit: cover;
+  display: inline-block;
+  margin-right: 4px;
+  vertical-align: middle;
 }
 
 .people-table-row:hover {
@@ -261,6 +273,24 @@ flex-direction: row; */
   height: 30px;
   cursor: pointer;
   margin-left: auto;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
+}
+
+.tasks-table-clear-filter-button:hover {
+  background-color: #fef5ff;
+  border-color: #ca50db;
+}
+
+/* Dark mode styling for Clear Filters button */
+.text-light .tasks-table-clear-filter-button {
+  background-color: #232946 !important;
+  border: 2px solid #5A67D8 !important;
+  color: #fff !important;
+}
+
+.text-light .tasks-table-clear-filter-button:hover {
+  background-color: #1C2541 !important;
+  border-color: #ca50db !important;
 }
 
 .people-report-task-name {

From 78ed23a8b56b4ce75a73c10456c7dd6a6e6452f5 Mon Sep 17 00:00:00 2001
From: juhitha-reddy <pjuhireddy4445@gmail.com>
Date: Sat, 27 Dec 2025 08:58:25 -0500
Subject: [PATCH 02/16] fix: update PeopleTableDetails test for CSS modules

---
 src/components/Reports/__tests__/PeopleTableDetails.test.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Reports/__tests__/PeopleTableDetails.test.jsx b/src/components/Reports/__tests__/PeopleTableDetails.test.jsx
index 27e7655861..2d98003cbe 100644
--- a/src/components/Reports/__tests__/PeopleTableDetails.test.jsx
+++ b/src/components/Reports/__tests__/PeopleTableDetails.test.jsx
@@ -193,13 +193,14 @@ describe('PeopleTableDetails component', () => {
     render(<PeopleTableDetails taskData={tasks} />);
 
     const allButtons = screen.getAllByRole('button');
+    // Find the button by its content (the "1+" text indicating more resources)
     const toggleButton = allButtons.find(button =>
-      button.classList.contains('resourceMoreToggle')
+      button.textContent.includes('+')
     );
     expect(toggleButton).toBeInTheDocument();
 
     // eslint-disable-next-line testing-library/no-node-access
-    const extraDiv = toggleButton.parentElement.querySelector('.extra');
+    const extraDiv = document.getElementById(tasks[0]._id);
     expect(extraDiv).toBeInTheDocument();
 
     fireEvent.click(toggleButton);

From 0e31f5fabba14bcc4e51c4fba967bb699c88e151 Mon Sep 17 00:00:00 2001
From: juhitha-reddy <pjuhireddy4445@gmail.com>
Date: Mon, 2 Mar 2026 00:51:41 -0500
Subject: [PATCH 03/16] Updated dark mode UI for reports

---
 src/components/Reports/Reports.jsx     |  2 +-
 src/components/Reports/reportsPage.css | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/Reports/Reports.jsx b/src/components/Reports/Reports.jsx
index 956e8472dd..24bcb1f2cc 100644
--- a/src/components/Reports/Reports.jsx
+++ b/src/components/Reports/Reports.jsx
@@ -553,7 +553,7 @@ class ReportsPage extends Component {
               </div>
             </h2>
             <div>
-              <p >Select a Category</p>
+              <p>Select a Category</p>
             </div>
             <div className='report-container-data'>
               <div className='data-container' style={this.state.showCharts ? {width: '50%'} : {width: '100%'}}>
diff --git a/src/components/Reports/reportsPage.css b/src/components/Reports/reportsPage.css
index 1ba1b54ae1..007977a083 100644
--- a/src/components/Reports/reportsPage.css
+++ b/src/components/Reports/reportsPage.css
@@ -19,6 +19,11 @@
   overflow-x: hidden;
 }
 
+/* Dark mode: Reports page background */
+.container-component-wrapper.bg-oxford-blue {
+  background-color: #1b2a41;
+}
+
 .data-container {
   width: 50%;
 }
@@ -33,6 +38,11 @@
   padding: 0 16px;
 }
 
+/* Dark mode: category section background */
+.category-data-container.bg-oxford-blue {
+  background-color: #1b2a41;
+}
+
 @media screen and (max-width: 1200px) {
   .category-data-container {
     grid-template-columns: 1fr;

From 09c7db12ff6f362e6496f5bfa4a58375982b7581 Mon Sep 17 00:00:00 2001
From: juhitha-reddy <pjuhireddy4445@gmail.com>
Date: Mon, 2 Mar 2026 00:58:50 -0500
Subject: [PATCH 04/16] Updated dark mode UI for reports and updated css file

---
 src/components/Reports/LostTime/AddLostTime.jsx       | 2 +-
 src/components/Reports/ReportTableSearchPanel.jsx     | 2 +-
 src/components/Reports/Reports.jsx                    | 2 +-
 src/components/Reports/{reportsPage.css => index.css} | 0
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename src/components/Reports/{reportsPage.css => index.css} (100%)

diff --git a/src/components/Reports/LostTime/AddLostTime.jsx b/src/components/Reports/LostTime/AddLostTime.jsx
index aac0879ace..95be9eba94 100644
--- a/src/components/Reports/LostTime/AddLostTime.jsx
+++ b/src/components/Reports/LostTime/AddLostTime.jsx
@@ -3,7 +3,7 @@ import { useDispatch, connect, useSelector } from 'react-redux';
 import MemberAutoComplete from '~/components/Teams/MembersAutoComplete';
 import AddProjectsAutoComplete from '~/components/UserProfile/TeamsAndProjects/AddProjectsAutoComplete';
 import AddTeamsAutoComplete from '~/components/UserProfile/TeamsAndProjects/AddTeamsAutoComplete';
-import "../reportsPage.css";
+import '../index.css';
 import { Editor } from '@tinymce/tinymce-react';
 import moment from 'moment-timezone';
 import { Button, Col, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row } from 'reactstrap';
diff --git a/src/components/Reports/ReportTableSearchPanel.jsx b/src/components/Reports/ReportTableSearchPanel.jsx
index 760e31c1c2..9b145abbee 100644
--- a/src/components/Reports/ReportTableSearchPanel.jsx
+++ b/src/components/Reports/ReportTableSearchPanel.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { SEARCH } from '../../languages/en/ui';
-import './reportsPage.css';
+import './index.css';
 
 /**
  * The search panel stateless component for Report grid
diff --git a/src/components/Reports/Reports.jsx b/src/components/Reports/Reports.jsx
index 24bcb1f2cc..071ac9f602 100644
--- a/src/components/Reports/Reports.jsx
+++ b/src/components/Reports/Reports.jsx
@@ -17,7 +17,7 @@ import ProjectTable from './ProjectTable';
 import { getUserProfileBasicInfo } from '../../actions/userManagement';
 import { fetchAllTasks } from '../../actions/task';
 import 'react-datepicker/dist/react-datepicker.css';
-import './reportsPage.css';
+import './index.css';
 import projectsImage from './images/Projects.svg';
 import peopleImage from './images/People.svg';
 import teamsImage from './images/Teams.svg';
diff --git a/src/components/Reports/reportsPage.css b/src/components/Reports/index.css
similarity index 100%
rename from src/components/Reports/reportsPage.css
rename to src/components/Reports/index.css

From 2fc4830019cd282ffac699d0e5e6e02cfa04fa76 Mon Sep 17 00:00:00 2001
From: juhitha-reddy <pjuhireddy4445@gmail.com>
Date: Mon, 23 Mar 2026 20:13:45 -0400
Subject: [PATCH 05/16] Fixed checkbox and updated profile picture shape to
 circle

---
 src/components/Reports/PeopleTableDetails.jsx     |  1 +
 .../Reports/TableFilter/TableFilter.jsx           |  3 +++
 .../components/ReportHeader/ReportHeader.css      | 15 ++++++++-------
 src/components/common/Checkbox/Checkbox.jsx       |  5 +++--
 .../common/Checkbox/Checkbox.module.css           |  8 ++++++++
 5 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/components/Reports/PeopleTableDetails.jsx b/src/components/Reports/PeopleTableDetails.jsx
index c27ec66916..a1f04cf4c6 100644
--- a/src/components/Reports/PeopleTableDetails.jsx
+++ b/src/components/Reports/PeopleTableDetails.jsx
@@ -319,6 +319,7 @@ function PeopleTableDetails(props) {
           UpdateStartDate={updateStartDate}
           EndDate={endDate}
           UpdateEndDate={updateEndDate}
+          darkMode={darkMode}
         />
         <button type="button" onClick={resetFilters} className={styles['tasks-table-clear-filter-button']}>
           Clear Filters
diff --git a/src/components/Reports/TableFilter/TableFilter.jsx b/src/components/Reports/TableFilter/TableFilter.jsx
index c9abf62e88..5517e88be9 100644
--- a/src/components/Reports/TableFilter/TableFilter.jsx
+++ b/src/components/Reports/TableFilter/TableFilter.jsx
@@ -41,6 +41,7 @@ function TableFilter({
   EndDate,
   UpdateStartDate,
   UpdateEndDate,
+  darkMode,
 }) {
   const taskPriority = ['Primary', 'Secondary', 'Tertiary'];
   const taskStatus = ['Paused', 'Complete', 'Active'];
@@ -118,6 +119,7 @@ function TableFilter({
         id="active"
         wrapperClassname="table-filter-item"
         label="Active"
+        darkMode={darkMode}
       />
       <Checkbox
         value={taskAssign}
@@ -128,6 +130,7 @@ function TableFilter({
         id="assign"
         wrapperClassname="table-filter-item"
         label="Assign"
+        darkMode={darkMode}
       />
     </div>
   );
diff --git a/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.css b/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.css
index fef69d623e..b0a1cbee74 100644
--- a/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.css
+++ b/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.css
@@ -13,7 +13,8 @@
 .report-header-profile-pic {
   width: 6rem;
   height: 6rem;
-  border-radius: 10px;
+  border-radius: 50%;
+  object-fit: cover;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -40,8 +41,8 @@
 
 .report-header-activity {
   position: absolute;
-  right: -6px;
-  bottom: -1px;
+  right: 2px;
+  bottom: 2px;
   width: 20px;
   height: 20px;
   background-color: #c6c6c6;
@@ -57,11 +58,11 @@
 .report-header-profile-pic-dark {
   width: 6rem;
   height: 6rem;
-  border-radius: 10px;
+  border-radius: 50%;
+  object-fit: cover;
   display: flex;
   align-items: center;
   justify-content: center;
-
   background: #5b0ac6;
   border: 3px solid #a45bed;
 }
@@ -74,8 +75,8 @@
 
 .report-header-activity-dark {
   position: absolute;
-  right: -6px;
-  bottom: -1px;
+  right: 2px;
+  bottom: 2px;
   width: 20px;
   height: 20px;
   background-color: #3A506B;
diff --git a/src/components/common/Checkbox/Checkbox.jsx b/src/components/common/Checkbox/Checkbox.jsx
index 0b4ec544a2..05c965d5be 100644
--- a/src/components/common/Checkbox/Checkbox.jsx
+++ b/src/components/common/Checkbox/Checkbox.jsx
@@ -9,11 +9,12 @@ export const Checkbox = ({
   wrapperClassname,
   backgroundColorCN,
   textColorCN,
+  darkMode,
 }) => {
   return (
     <div
       data-testid="checkbox-wrapper"
-      className={`${styles.checkboxWrapper} ${wrapperClassname} ${backgroundColorCN}`}
+      className={`${darkMode ? styles.checkboxWrapperDark : styles.checkboxWrapper} ${wrapperClassname || ''} ${backgroundColorCN || ''}`}
     >
       <input
         className={`${styles.checkboxInput}`}
@@ -23,7 +24,7 @@ export const Checkbox = ({
         checked={value}
         onChange={onChange}
       />
-      <label className={`${styles.checkboxLabel} ${textColorCN}`} htmlFor={id}>
+      <label className={`${styles.checkboxLabel} ${darkMode ? styles.checkboxLabelDark : ''} ${textColorCN || ''}`} htmlFor={id}>
         {label}
       </label>
     </div>
diff --git a/src/components/common/Checkbox/Checkbox.module.css b/src/components/common/Checkbox/Checkbox.module.css
index ec7f333d74..81a09f6f36 100644
--- a/src/components/common/Checkbox/Checkbox.module.css
+++ b/src/components/common/Checkbox/Checkbox.module.css
@@ -2,6 +2,10 @@
   background-color: #f8f7f8;
 }
 
+.checkboxWrapperDark {
+  background-color: #2c2c2c;
+}
+
 .checkboxInput {
   width: 16px;
   height: 16px;
@@ -12,3 +16,7 @@
   margin: 0 4px;
   cursor: pointer;
 }
+
+.checkboxLabelDark {
+  color: #fff;
+}

From b6620a46329ec72001d3679b6c274b40a6c3c44a Mon Sep 17 00:00:00 2001
From: juhitha-reddy <pjuhireddy4445@gmail.com>
Date: Mon, 23 Mar 2026 20:26:02 -0400
Subject: [PATCH 06/16] Fixed lint errors

---
 src/components/Reports/PeopleTableDetails.jsx |  1 -
 src/components/common/Checkbox/Checkbox.jsx   | 11 +++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Reports/PeopleTableDetails.jsx b/src/components/Reports/PeopleTableDetails.jsx
index a1f04cf4c6..2d7af8b3c0 100644
--- a/src/components/Reports/PeopleTableDetails.jsx
+++ b/src/components/Reports/PeopleTableDetails.jsx
@@ -2,7 +2,6 @@ import { useState, useEffect } from 'react';
 import 'reactjs-popup/dist/index.css';
 import { Container } from 'reactstrap';
 import styles from './PeopleTableDetails.module.css';
-import './PeopleTableDetails.module.css';
 import NewModal from '../common/NewModal';
 import TableFilter from './TableFilter/TableFilter';
 
diff --git a/src/components/common/Checkbox/Checkbox.jsx b/src/components/common/Checkbox/Checkbox.jsx
index 05c965d5be..34f9811780 100644
--- a/src/components/common/Checkbox/Checkbox.jsx
+++ b/src/components/common/Checkbox/Checkbox.jsx
@@ -14,7 +14,9 @@ export const Checkbox = ({
   return (
     <div
       data-testid="checkbox-wrapper"
-      className={`${darkMode ? styles.checkboxWrapperDark : styles.checkboxWrapper} ${wrapperClassname || ''} ${backgroundColorCN || ''}`}
+      className={`${
+        darkMode ? styles.checkboxWrapperDark : styles.checkboxWrapper
+      } ${wrapperClassname || ''} ${backgroundColorCN || ''}`}
     >
       <input
         className={`${styles.checkboxInput}`}
@@ -24,7 +26,12 @@ export const Checkbox = ({
         checked={value}
         onChange={onChange}
       />
-      <label className={`${styles.checkboxLabel} ${darkMode ? styles.checkboxLabelDark : ''} ${textColorCN || ''}`} htmlFor={id}>
+      <label
+        className={`${styles.checkboxLabel} ${
+          darkMode ? styles.checkboxLabelDark : ''
+        } ${textColorCN || ''}`}
+        htmlFor={id}
+      >
         {label}
       </label>
     </div>

From c8212a9cb1ea28b29b2ccec0f80e1a575b434e7a Mon Sep 17 00:00:00 2001
From: juhitha-reddy <pjuhireddy4445@gmail.com>
Date: Mon, 23 Mar 2026 20:38:35 -0400
Subject: [PATCH 07/16] Fixed lint

---
 src/components/Reports/Reports.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Reports/Reports.jsx b/src/components/Reports/Reports.jsx
index dbae33f033..3537527551 100644
--- a/src/components/Reports/Reports.jsx
+++ b/src/components/Reports/Reports.jsx
@@ -6,7 +6,6 @@ import moment from 'moment-timezone';
 import { Component } from 'react';
 import 'react-datepicker/dist/react-datepicker.css';
 import './index.css';
-import projectsImage from './images/Projects.svg';
 import { connect } from 'react-redux';
 import { Button, Container } from 'reactstrap';
 import EditableInfoModal from '~/components/UserProfile/EditableModal/EditableInfoModal';

From fed9f41f0a7c7d9f3c6a8aeb5262933445f49a18 Mon Sep 17 00:00:00 2001
From: juhitha-reddy <pjuhireddy4445@gmail.com>
Date: Mon, 23 Mar 2026 20:45:50 -0400
Subject: [PATCH 08/16] Fixed lint

---
 src/components/Reports/Reports.jsx            |   2 +-
 src/components/Reports/reportsPage.module.css | 379 ++++++++++++++++++
 2 files changed, 380 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Reports/reportsPage.module.css

diff --git a/src/components/Reports/Reports.jsx b/src/components/Reports/Reports.jsx
index 3537527551..06cbc18efc 100644
--- a/src/components/Reports/Reports.jsx
+++ b/src/components/Reports/Reports.jsx
@@ -26,7 +26,7 @@ import LostTimeHistory from './LostTime/LostTimeHistory';
 import PeopleTable from './PeopleTable';
 import ProjectTable from './ProjectTable';
 import ReportFilter from './ReportFilter/ReportFilter';
-import './reportsPage.css';
+import './reportsPage.module.css';
 import TeamTable from './TeamTable';
 import TotalContributorsReport from './TotalReport/TotalContributorsReport';
 import TotalPeopleReport from './TotalReport/TotalPeopleReport';
diff --git a/src/components/Reports/reportsPage.module.css b/src/components/Reports/reportsPage.module.css
new file mode 100644
index 0000000000..eb60882a59
--- /dev/null
+++ b/src/components/Reports/reportsPage.module.css
@@ -0,0 +1,379 @@
+:global {
+  * {
+    box-sizing: border-box;
+    margin: 0;
+  }
+
+  .red-asterisk {
+    color: #e00000;
+  }
+
+  .container-component-wrapper {
+    min-height: 100%;
+    width: 100%;
+    display: grid;
+    justify-content: center;
+    align-content: start;
+    background-color: #faf7fc;
+    margin: 0px;
+    justify-items: center;
+    overflow-x: hidden;
+  }
+
+  .data-container {
+    width: 50%;
+  }
+
+  .category-data-container {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-content: flex-start;
+    background-color: #faf7fc;
+    margin: 0 auto;
+    padding: 0 16px;
+  }
+
+  .no-active-selection {
+    grid-template-columns: 1fr !important;
+  }
+
+  .container-component-category {
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+    border-radius: 0 0 16px 16px;
+    padding: 32px;
+  }
+
+  .category-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    gap: 10px;
+  }
+
+  .card-category-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    width: 30%;
+    padding: 24px;
+    border: 0;
+    background-color: #f1ebf7;
+    border-radius: 8px;
+    cursor: pointer;
+    margin: 8px;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+    transform-origin: center center;
+  }
+
+  .report-container-data {
+    display: flex;
+    gap: 10px;
+  }
+
+  .category-container > .card-category-item.selected {
+    background-color: #d7cdda;
+    box-shadow: 0px 8px 16px rgba(78, 32, 125, 0.2);
+    transform: scale(1.03);
+    position: relative;
+    z-index: 1;
+  }
+
+  .category-container > .card-category-item.bg-yinmn-blue.selected {
+    background-color: #4a6a8a;
+    box-shadow: 0px 8px 16px rgba(58, 80, 107, 0.4);
+  }
+
+  .category-container > .card-category-item.bg-yinmn-blue.selected .card-category-item-title,
+  .category-container > .card-category-item.bg-yinmn-blue.selected .card-category-item-number {
+    color: #fff;
+  }
+
+  .card-category-item:focus-visible {
+    outline: none;
+  }
+
+  .card-category-item img {
+    width: 100px;
+    height: 100px;
+    object-fit: contain;
+  }
+
+  .card-category-item-title {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 24px;
+    font-weight: 400;
+    text-align: center;
+  }
+
+  .card-category-item-number {
+    font-size: 32px;
+    font-weight: 700;
+    margin: 12px 0;
+  }
+
+  .text-light {
+    color: white;
+  }
+
+  .table-data-container {
+    width: 50%;
+    max-width: 600px;
+    height: 1250px;
+    position: sticky;
+    top: 0;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .search-field-container {
+    max-width: 100%;
+  }
+
+  .date-picker-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    padding: 8px 0px 8px 0px;
+    gap: 4%;
+  }
+
+  .date-picker-item {
+    display: flex;
+    width: 30%;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+  }
+
+  .date-picker-label {
+    text-align: left;
+    margin: 8px 0;
+  }
+
+  :root {
+    --spacing-unit: 0.5rem;
+  }
+
+  .total-report-container,
+  .lost-time-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 100%;
+    gap: var(--spacing-unit);
+    margin: var(--spacing-unit) 0;
+    padding: 0;
+  }
+
+  .total-report-item,
+  .lost-time-item {
+    flex: 0 0 calc(50% - var(--spacing-unit));
+    min-width: 200px;
+    max-width: 240px;
+    display: flex;
+    align-items: center;
+    margin-bottom: var(--spacing-unit);
+  }
+
+  .total-report-item button,
+  .lost-time-item button {
+    width: 100%;
+    font-size: 0.9rem;
+    white-space: nowrap;
+    padding: 0.5rem;
+  }
+
+  .info-icon-wrapper {
+    margin-left: 6px;
+    flex-shrink: 0;
+  }
+
+  .total-report-container:last-child,
+  .lost-time-container:last-child {
+    margin-bottom: 0;
+  }
+
+  .type-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+
+  .type-item {
+    padding-left: 30px;
+  }
+
+  .loading-spinner-top {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1rem;
+  }
+
+  .bg-yinmn-blue .info-modal-content {
+    color: #fff !important;
+  }
+
+  .force-white-text,
+  .bg-yinmn-blue .force-white-text,
+  .bg-yinmn-blue .info-modal-content.force-white-text {
+    color: #fff !important;
+  }
+
+  .bg-yinmn-blue .info-modal-content.force-white-text,
+  .bg-yinmn-blue .info-modal-content.force-white-text * {
+    color: #fff !important;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  :global {
+    .category-data-container {
+      grid-template-columns: 1fr;
+    }
+
+    .table-data-container {
+      max-width: 720px;
+      margin: 0 auto;
+    }
+  }
+}
+
+@media screen and (max-width: 1350px) {
+  :global {
+    .container-component-wrapper {
+      padding: 16px;
+    }
+
+    .category-data-container {
+      width: 100%;
+      padding: 0;
+    }
+
+    .container-component-category {
+      padding: 16px;
+    }
+
+    .category-container {
+      margin-top: 20px;
+      justify-content: center;
+    }
+
+    .card-category-item {
+      width: 30%;
+      min-width: 120px;
+      max-width: 200px;
+      padding: 16px;
+      margin: 8px;
+    }
+
+    .card-category-item img {
+      width: 72px;
+      height: 72px;
+    }
+
+    .card-category-item-number {
+      font-size: 24px;
+      font-weight: 700;
+      margin: 8px 0;
+    }
+
+    .table-data-container {
+      padding: 16px;
+      width: 50%;
+    }
+  }
+}
+
+@media screen and (max-width: 1100px) {
+  :global {
+    .container-component-wrapper {
+      padding: 16px;
+    }
+
+    .table-data-container {
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .table-data-container::-webkit-scrollbar {
+      display: none;
+    }
+
+    .category-container {
+      flex-wrap: wrap;
+    }
+
+    .card-category-item {
+      width: 30%;
+      min-width: 120px;
+      margin: 0;
+    }
+
+    .total-report-container,
+    .lost-time-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      gap: 1rem;
+    }
+  }
+}
+
+@media screen and (max-width: 700px) {
+  :global {
+    .container-component-wrapper {
+      padding: 16px;
+    }
+
+    .category-data-container {
+      grid-template-columns: 1fr;
+    }
+
+    .container-component-category {
+      width: 100%;
+      max-width: 100%;
+      display: flex;
+      flex-direction: column;
+      border-radius: 0 0 16px 16px;
+      padding: 16px;
+    }
+
+    .table-data-container {
+      width: 100%;
+    }
+
+    .data-container {
+      width: 100% !important;
+    }
+
+    .report-container-data {
+      flex-direction: column;
+    }
+
+    .card-category-item {
+      width: 30%;
+      max-width: none;
+    }
+
+    .card-category-item img {
+      width: 72px;
+      height: 72px;
+    }
+
+    .category-container {
+      flex-wrap: wrap;
+    }
+
+    .card-category-item-number {
+      font-size: 24px;
+      font-weight: 700;
+      margin: 8px 0;
+    }
+  }
+}

From 199c1af0f3a067260dfa43315d3a1264c81efa36 Mon Sep 17 00:00:00 2001
From: juhitha-reddy <pjuhireddy4445@gmail.com>
Date: Mon, 23 Mar 2026 20:50:01 -0400
Subject: [PATCH 09/16] Fixed unit test cases

---
 .../components/ReportHeader/ReportHeader.css  | 92 ------------------
 .../components/ReportHeader/ReportHeader.jsx  |  2 +-
 .../ReportHeader/ReportHeader.module.css      | 95 +++++++++++++++++++
 3 files changed, 96 insertions(+), 93 deletions(-)
 delete mode 100644 src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.css
 create mode 100644 src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.module.css

diff --git a/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.css b/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.css
deleted file mode 100644
index b0a1cbee74..0000000000
--- a/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.css
+++ /dev/null
@@ -1,92 +0,0 @@
-.report-header {
-  min-height: 25vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.report-header-details {
-  width: 100%;
-  text-align: center;
-}
-
-.report-header-profile-pic {
-  width: 6rem;
-  height: 6rem;
-  border-radius: 50%;
-  object-fit: cover;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #a780d9;
-  border: 3px solid #e5daf0;
-}
-
-.report-header-profile-pic svg {
-  width: 50px;
-  height: 50px;
-  color: #faf7fd;
-}
-
-.report-header-profile-pic-wrapper {
-  position: relative;
-  display: inline-block;
-}
-
-.report-header-entity-name {
-  font-weight: 400;
-  font-size: 1.3rem;
-  margin: 1rem 0;
-}
-
-.report-header-activity {
-  position: absolute;
-  right: 2px;
-  bottom: 2px;
-  width: 20px;
-  height: 20px;
-  background-color: #c6c6c6;
-  border-radius: 50%;
-  border: 2px solid white;
-}
-
-.report-header-activity.active {
-  background-color: #2affa1;
-}
-
-/* DARK MODE */
-.report-header-profile-pic-dark {
-  width: 6rem;
-  height: 6rem;
-  border-radius: 50%;
-  object-fit: cover;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #5b0ac6;
-  border: 3px solid #a45bed;
-}
-
-.report-header-profile-pic-dark svg {
-  width: 50px;
-  height: 50px;
-  color: #c489ff;
-}
-
-.report-header-activity-dark {
-  position: absolute;
-  right: 2px;
-  bottom: 2px;
-  width: 20px;
-  height: 20px;
-  background-color: #3A506B;
-  border-radius: 50%;
-  border: 2px solid rgb(40, 39, 39);
-}
-
-.report-header-activity-dark.active {
-  background-color: #2affa1;
-}
-.report-header-entity-other-info{
-  font-size: 15px;
-}
diff --git a/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.jsx b/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.jsx
index 37b6ddab2a..03d45cb8a4 100644
--- a/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.jsx
+++ b/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.jsx
@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import { ReportBlock } from '../ReportBlock';
-import './ReportHeader.css';
+import './ReportHeader.module.css';
 
 export function ReportHeader({
   children,
diff --git a/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.module.css b/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.module.css
new file mode 100644
index 0000000000..d80114fe6b
--- /dev/null
+++ b/src/components/Reports/sharedComponents/ReportPage/components/ReportHeader/ReportHeader.module.css
@@ -0,0 +1,95 @@
+:global {
+  .report-header {
+    min-height: 25vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .report-header-details {
+    width: 100%;
+    text-align: center;
+  }
+
+  .report-header-profile-pic {
+    width: 6rem;
+    height: 6rem;
+    border-radius: 50%;
+    object-fit: cover;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #a780d9;
+    border: 3px solid #e5daf0;
+  }
+
+  .report-header-profile-pic svg {
+    width: 50px;
+    height: 50px;
+    color: #faf7fd;
+  }
+
+  .report-header-profile-pic-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  .report-header-entity-name {
+    font-weight: 400;
+    font-size: 1.3rem;
+    margin: 1rem 0;
+  }
+
+  .report-header-activity {
+    position: absolute;
+    right: 2px;
+    bottom: 2px;
+    width: 20px;
+    height: 20px;
+    background-color: #c6c6c6;
+    border-radius: 50%;
+    border: 2px solid white;
+  }
+
+  .report-header-activity.active {
+    background-color: #2affa1;
+  }
+
+  /* DARK MODE */
+  .report-header-profile-pic-dark {
+    width: 6rem;
+    height: 6rem;
+    border-radius: 50%;
+    object-fit: cover;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #5b0ac6;
+    border: 3px solid #a45bed;
+  }
+
+  .report-header-profile-pic-dark svg {
+    width: 50px;
+    height: 50px;
+    color: #c489ff;
+  }
+
+  .report-header-activity-dark {
+    position: absolute;
+    right: 2px;
+    bottom: 2px;
+    width: 20px;
+    height: 20px;
+    background-color: #3A506B;
+    border-radius: 50%;
+    border: 2px solid rgb(40, 39, 39);
+  }
+
+  .report-header-activity-dark.active {
+    background-color: #2affa1;
+  }
+
+  .report-header-entity-other-info {
+    font-size: 15px;
+  }
+}

From f601e68d50da746ab2e71476879d0b188914462e Mon Sep 17 00:00:00 2001
From: juhitha-reddy <pjuhireddy4445@gmail.com>
Date: Sun, 10 May 2026 14:22:49 -0400
Subject: [PATCH 10/16] Fixed lint errors

---
 src/components/ApplicationTimeChart/data.js | 53 +++++++++++++++++++++
 src/components/Reports/reportsPage.css      |  0
 2 files changed, 53 insertions(+)
 create mode 100644 src/components/ApplicationTimeChart/data.js
 delete mode 100644 src/components/Reports/reportsPage.css

diff --git a/src/components/ApplicationTimeChart/data.js b/src/components/ApplicationTimeChart/data.js
new file mode 100644
index 0000000000..6bdd3e8399
--- /dev/null
+++ b/src/components/ApplicationTimeChart/data.js
@@ -0,0 +1,53 @@
+// Helper function to generate dates relative to now
+const generateTimestamp = (daysAgo, hoursAgo = 0) => {
+  const date = new Date();
+  date.setDate(date.getDate() - daysAgo);
+  date.setHours(date.getHours() - hoursAgo);
+  return date.toISOString();
+};
+
+const sampleData = [
+  // Recent applications (last 7 days) - Always fresh dates
+  { role: 'Software Developer', timeToApply: 8, timestamp: generateTimestamp(0, 2) }, // 2 hours ago
+  { role: 'Software Developer', timeToApply: 12, timestamp: generateTimestamp(1, 1) }, // 1 day, 1 hour ago
+  { role: 'Software Developer', timeToApply: 9, timestamp: generateTimestamp(2, 3) }, // 2 days, 3 hours ago
+  { role: 'Architect', timeToApply: 15, timestamp: generateTimestamp(1, 5) }, // 1 day, 5 hours ago
+  { role: 'Architect', timeToApply: 18, timestamp: generateTimestamp(3, 2) }, // 3 days, 2 hours ago
+  { role: 'Master Electrician', timeToApply: 25, timestamp: generateTimestamp(2, 8) }, // 2 days, 8 hours ago
+  { role: 'Master Electrician', timeToApply: 22, timestamp: generateTimestamp(4, 1) }, // 4 days, 1 hour ago
+  { role: 'Product Manager', timeToApply: 6, timestamp: generateTimestamp(3, 4) }, // 3 days, 4 hours ago
+  { role: 'Product Manager', timeToApply: 9, timestamp: generateTimestamp(5, 2) }, // 5 days, 2 hours ago
+  { role: 'Data Scientist', timeToApply: 13, timestamp: generateTimestamp(4, 6) }, // 4 days, 6 hours ago
+  { role: 'Data Scientist', timeToApply: 11, timestamp: generateTimestamp(6, 3) }, // 6 days, 3 hours ago
+  { role: 'UX Designer', timeToApply: 14, timestamp: generateTimestamp(5, 7) }, // 5 days, 7 hours ago
+  { role: 'UX Designer', timeToApply: 16, timestamp: generateTimestamp(6, 4) }, // 6 days, 4 hours ago
+
+  // Monthly data (8-30 days ago)
+  { role: 'Project Manager', timeToApply: 7, timestamp: generateTimestamp(8) }, // 8 days ago
+  { role: 'Project Manager', timeToApply: 11, timestamp: generateTimestamp(11) }, // 11 days ago
+  { role: 'Plumber', timeToApply: 20, timestamp: generateTimestamp(12) }, // 12 days ago
+  { role: 'Plumber', timeToApply: 24, timestamp: generateTimestamp(16) }, // 16 days ago
+  { role: 'Software Developer', timeToApply: 10, timestamp: generateTimestamp(18) }, // 18 days ago
+  { role: 'Architect', timeToApply: 16, timestamp: generateTimestamp(21) }, // 21 days ago
+  { role: 'Master Electrician', timeToApply: 28, timestamp: generateTimestamp(24) }, // 24 days ago
+  { role: 'Data Scientist', timeToApply: 15, timestamp: generateTimestamp(26) }, // 26 days ago
+  { role: 'UX Designer', timeToApply: 12, timestamp: generateTimestamp(28) }, // 28 days ago
+  { role: 'Product Manager', timeToApply: 8, timestamp: generateTimestamp(30) }, // 30 days ago
+
+  // Older data (31-365 days ago)
+  { role: 'UX Designer', timeToApply: 12, timestamp: generateTimestamp(50) }, // ~50 days ago
+  { role: 'Product Manager', timeToApply: 8, timestamp: generateTimestamp(75) }, // ~75 days ago
+  { role: 'Plumber', timeToApply: 26, timestamp: generateTimestamp(115) }, // ~115 days ago
+  { role: 'Software Developer', timeToApply: 7, timestamp: generateTimestamp(180) }, // ~180 days ago
+  { role: 'Architect', timeToApply: 14, timestamp: generateTimestamp(205) }, // ~205 days ago
+  { role: 'Master Electrician', timeToApply: 24, timestamp: generateTimestamp(230) }, // ~230 days ago
+  { role: 'Data Scientist', timeToApply: 16, timestamp: generateTimestamp(255) }, // ~255 days ago
+  { role: 'Project Manager', timeToApply: 9, timestamp: generateTimestamp(295) }, // ~295 days ago
+
+  // Outliers (these will be filtered out as they're > 30 minutes)
+  { role: 'Software Developer', timeToApply: 45, timestamp: generateTimestamp(3) }, // Tab left open
+  { role: 'Product Manager', timeToApply: 120, timestamp: generateTimestamp(8) }, // 2 hours - outlier
+  { role: 'UX Designer', timeToApply: 90, timestamp: generateTimestamp(11) }, // 1.5 hours - outlier
+];
+
+export default sampleData;
diff --git a/src/components/Reports/reportsPage.css b/src/components/Reports/reportsPage.css
deleted file mode 100644
index e69de29bb2..0000000000

From 7f09c55474dfce64b0c7ffe6a6d17597c590fda8 Mon Sep 17 00:00:00 2001
From: juhitha-reddy <pjuhireddy4445@gmail.com>
Date: Sun, 10 May 2026 14:29:47 -0400
Subject: [PATCH 11/16] Fixed sonrqube errors

---
 src/components/Reports/PeopleTableDetails.jsx |  74 ++++++-----
 .../Reports/TableFilter/TableFilter.css       | 125 ------------------
 .../Reports/TableFilter/TableFilter.jsx       |  50 +++++--
 .../TableFilter/TableFilter.module.css        | 124 +++++++++++++++++
 src/components/common/Checkbox/Checkbox.jsx   |  19 +++
 5 files changed, 222 insertions(+), 170 deletions(-)
 delete mode 100644 src/components/Reports/TableFilter/TableFilter.css
 create mode 100644 src/components/Reports/TableFilter/TableFilter.module.css

diff --git a/src/components/Reports/PeopleTableDetails.jsx b/src/components/Reports/PeopleTableDetails.jsx
index 46bd1d47e5..852de32eba 100644
--- a/src/components/Reports/PeopleTableDetails.jsx
+++ b/src/components/Reports/PeopleTableDetails.jsx
@@ -272,11 +272,12 @@ function PeopleTableDetails(props) {
     </div>
   );
 
+  const containerClassName = darkMode
+    ? [styles.wrapper, styles['text-light'], 'text-light', styles.wrapperDark].join(' ')
+    : styles.wrapper;
+
   return (
-    <Container
-      fluid
-      className={`${styles.wrapper} ${darkMode ? `${styles['text-light']} text-light ${styles.wrapperDark}` : ''}`}
-    >
+    <Container fluid className={containerClassName}>
       <div className={styles['table-filter-container']}>
         <TableFilter
           onTaskNameSearch={onTaskNameSearch}
@@ -306,36 +307,41 @@ function PeopleTableDetails(props) {
           Clear Filters
         </button>
       </div>
-      {windowWidth > 1020 ? (
-        <>
-          <div className={`people-table-row reports-table-head ${darkMode ? 'bg-space-cadet' : ''}`}>
-            <div data-testid="task">Task</div>
-            <div data-testid="priority">Priority</div>
-            <div data-testid="status">Status</div>
-            <div data-testid="resources" className="people-table-center-cell">Resources</div>
-            <div data-testid="active" className="people-table-center-cell">Active</div>
-            <div data-testid="assign" className="people-table-center-cell">Assign</div>
-            <div data-testid="eh" className="people-table-end-cell">Estimated Hours</div>
-            <div data-testid="sd" className="people-table-end-cell">Start Date</div>
-            <div data-testid="ed" className="people-table-end-cell">End Date</div>
-          </div>
-          <div className="people-table people-table-scrollable">
-            {filteredTasks.map((value) => (
-              <NewModal key={value._id} header="Task info" trigger={() => renderFilteredTask(value)} darkMode={darkMode}>
-                {renderModalContent(value)}
-              </NewModal>
-            ))}
-          </div>
-        </>
-      ) : (
-        <div className="people-table">
-          {filteredTasks.map((value) => (
-            <NewModal key={value._id} header="Task info" trigger={() => renderMobileFilteredTask(value)} darkMode={darkMode}>
-              {renderModalContent(value)}
-            </NewModal>
-          ))}
-        </div>
-      )}
+      <div className={`people-table-row reports-table-head ${darkMode ? 'bg-space-cadet' : ''}`}>
+        <div data-testid="task">Task</div>
+        <div data-testid="priority">Priority</div>
+        <div data-testid="status">Status</div>
+        <div data-testid="resources" className="people-table-center-cell">Resources</div>
+        <div data-testid="active" className="people-table-center-cell">Active</div>
+        <div data-testid="assign" className="people-table-center-cell">Assign</div>
+        <div data-testid="eh" className="people-table-end-cell">Estimated Hours</div>
+        <div data-testid="sd" className="people-table-end-cell">Start Date</div>
+        <div data-testid="ed" className="people-table-end-cell">End Date</div>
+      </div>
+      <div className="people-table">
+        {filteredTasks.map(value => (
+
+          // eslint-disable-next-line react/no-unstable-nested-components
+          <NewModal
+            key={value._id}
+            header="Task info"
+            trigger={
+              <TaskModalTrigger
+                value={value}
+                windowWidth={windowWidth}
+                renderMobileFilteredTask={renderMobileFilteredTask}
+                renderFilteredTask={renderFilteredTask}
+              />
+            }
+          >
+            <TaskModalContent
+              whyInfo={value.whyInfo}
+              intentInfo={value.intentInfo}
+              endstateInfo={value.endstateInfo}
+            />
+          </NewModal>
+        ))}
+      </div>
     </Container>
   );
 }
diff --git a/src/components/Reports/TableFilter/TableFilter.css b/src/components/Reports/TableFilter/TableFilter.css
deleted file mode 100644
index 8c7dc4796b..0000000000
--- a/src/components/Reports/TableFilter/TableFilter.css
+++ /dev/null
@@ -1,125 +0,0 @@
-td > input,
-select {
-  width: 100%;
-}
-
-.table-filter-wrapper {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  margin-bottom: 24px;
-}
-
-.table-filter-datePicker {
-  width: 100%;
-  position: relative;
-}
-
-.table-filter-item {
-  display: flex;
-  align-items: center;
-  border-radius: 4px;
-  padding: 4px 10px;
-  /* background-color: #2c2c2c; */
-  height: 30px;
-  margin-right: 8px;
-  margin-bottom: 12px;
-}
-
-.table-filter-input {
-  width: 140px;
-  border: 2px solid #d1cfd4;
-  background-color: white;
-  color: #333;
-}
-
-.table-filter-input:focus,
-.table-filter-input:active {
-  outline: none;
-  box-shadow: 0px 0px 3px 1px #ca50db;
-}
-
-.date-picker-icon {
-  position: absolute;
-  top: 7px;
-  right: 14px;
-  color: #c6c6c6;
-}
-
-/* Dark mode styles */
-.text-light .table-filter-input {
-  background-color: #2c2c2c;
-  border-color: #4a4a4a;
-  color: #fff;
-}
-
-.text-light select.table-filter-input {
-  background-color: #2c2c2c;
-  border-color: #4a4a4a;
-  color: #fff;
-  color-scheme: dark;
-}
-
-.text-light select.table-filter-input option {
-  background-color: #2c2c2c;
-  color: #fff;
-}
-
-.text-light .table-filter-input::placeholder {
-  color: #a0a0a0;
-}
-
-.text-light .date-picker-icon {
-  color: #a0a0a0;
-}
-
-.text-light .react-datepicker {
-  background-color: #2c2c2c;
-  border-color: #4a4a4a;
-  color: #fff;
-}
-
-.text-light .react-datepicker__header {
-  background-color: #2c2c2c;
-  border-bottom-color: #4a4a4a;
-}
-
-.text-light .react-datepicker__current-month,
-.text-light .react-datepicker__day-name,
-.text-light .react-datepicker__day {
-  color: #fff;
-}
-
-.text-light .react-datepicker__day:hover {
-  background-color: #4a4a4a;
-}
-
-.text-light .react-datepicker__day--selected {
-  background-color: #ca50db;
-}
-
-.text-light .react-datepicker__day--keyboard-selected {
-  background-color: #ca50db;
-}
-
-.text-light .table-filter-item label {
-  color: #fff;
-}
-
-.text-light .table-filter-item input[type="checkbox"] {
-  background-color: #2c2c2c;
-  border-color: #4a4a4a;
-}
-
-.text-light .table-filter-item input[type="checkbox"]:checked {
-  background-color: #ca50db;
-  border-color: #ca50db;
-}
-
-.text-light .table-filter-item input[type="checkbox"]:hover {
-  border-color: #ca50db;
-}
-
-.text-light .table-filter-item {
-  background-color: #2c2c2c;
-}
diff --git a/src/components/Reports/TableFilter/TableFilter.jsx b/src/components/Reports/TableFilter/TableFilter.jsx
index 5517e88be9..776d982e05 100644
--- a/src/components/Reports/TableFilter/TableFilter.jsx
+++ b/src/components/Reports/TableFilter/TableFilter.jsx
@@ -1,8 +1,9 @@
+import PropTypes from 'prop-types';
 import { useState, forwardRef } from 'react';
 import DatePicker from 'react-datepicker';
 import { FiCalendar } from 'react-icons/fi';
 import 'react-datepicker/dist/react-datepicker.css';
-import './TableFilter.css';
+import styles from './TableFilter.module.css';
 import { Checkbox } from '~/components/common/Checkbox';
 import TextSuggestion from '../../UserManagement/TextSuggestion';
 import DropDownSearchBox from '../../UserManagement/DropDownSearchBox';
@@ -12,13 +13,13 @@ const InputWithCalendarIcon = forwardRef(({ value, onClick }, ref) => {
     <>
       <input
         type="text"
-        className="table-filter-datePicker table-filter-item table-filter-input"
+        className={`${styles.tableFilterDatePicker} ${styles.tableFilterItem} ${styles.tableFilterInput}`}
         value={value}
         onClick={onClick}
         ref={ref}
         readOnly
       />
-      <FiCalendar className="date-picker-icon" onClick={onClick} />
+      <FiCalendar className={styles.datePickerIcon} onClick={onClick} />
     </>
   );
 });
@@ -58,12 +59,12 @@ function TableFilter({
   const uniquetaskResource = [...new Set(taskResource)];
 
   return (
-    <div className="table-filter-wrapper">
+    <div className={styles.tableFilterWrapper}>
       <TextSuggestion
         id="name_search"
         list={taskName}
         searchCallback={onTaskNameSearch}
-        className="table-filter-input table-filter-item"
+        className={`${styles.tableFilterInput} ${styles.tableFilterItem}`}
         value={name}
         placeholder="Task name"
       />
@@ -73,28 +74,28 @@ function TableFilter({
         searchCallback={searchEstimatedHours}
         value={estimatedHours}
         placeholder="Estimated Hours"
-        className="table-filter-item table-filter-input"
+        className={`${styles.tableFilterItem} ${styles.tableFilterInput}`}
       />
       <TextSuggestion
         list={uniquetaskResource}
         searchCallback={searchResources}
         value={resources}
         placeholder="Resources"
-        className="table-filter-item table-filter-input"
+        className={`${styles.tableFilterItem} ${styles.tableFilterInput}`}
       />
       <DropDownSearchBox
         items={taskStatus}
         searchCallback={searchStatus}
         value={status}
         placeholder="Any status"
-        className="table-filter-item table-filter-input"
+        className={`${styles.tableFilterItem} ${styles.tableFilterInput}`}
       />
       <DropDownSearchBox
         items={taskPriority}
         searchCallback={searchPriority}
         value={priority}
         placeholder="Any priority"
-        className="table-filter-item table-filter-input"
+        className={`${styles.tableFilterItem} ${styles.tableFilterInput}`}
       />
       <DatePicker
         customInput={<InputWithCalendarIcon />}
@@ -117,7 +118,7 @@ function TableFilter({
           searchActive(checked ? 'Yes' : 'No');
         }}
         id="active"
-        wrapperClassname="table-filter-item"
+        wrapperClassname={styles.tableFilterItem}
         label="Active"
         darkMode={darkMode}
       />
@@ -128,7 +129,7 @@ function TableFilter({
           searchAssign(checked ? 'Yes' : 'No');
         }}
         id="assign"
-        wrapperClassname="table-filter-item"
+        wrapperClassname={styles.tableFilterItem}
         label="Assign"
         darkMode={darkMode}
       />
@@ -136,4 +137,31 @@ function TableFilter({
   );
 }
 InputWithCalendarIcon.displayName = 'InputWithCalendarIcon';
+
+TableFilter.propTypes = {
+  onTaskNameSearch: PropTypes.func,
+  searchPriority: PropTypes.func,
+  searchStatus: PropTypes.func,
+  searchResources: PropTypes.func,
+  searchActive: PropTypes.func,
+  searchAssign: PropTypes.func,
+  searchEstimatedHours: PropTypes.func,
+  name: PropTypes.string,
+  taskNameList: PropTypes.arrayOf(PropTypes.object),
+  estimatedHours: PropTypes.string,
+  resources: PropTypes.string,
+  status: PropTypes.string,
+  priority: PropTypes.string,
+  StartDate: PropTypes.instanceOf(Date),
+  EndDate: PropTypes.instanceOf(Date),
+  UpdateStartDate: PropTypes.func,
+  UpdateEndDate: PropTypes.func,
+  darkMode: PropTypes.bool,
+};
+
+TableFilter.defaultProps = {
+  taskNameList: [],
+  darkMode: false,
+};
+
 export default TableFilter;
diff --git a/src/components/Reports/TableFilter/TableFilter.module.css b/src/components/Reports/TableFilter/TableFilter.module.css
new file mode 100644
index 0000000000..ba1f43de95
--- /dev/null
+++ b/src/components/Reports/TableFilter/TableFilter.module.css
@@ -0,0 +1,124 @@
+:global(td > input),
+:global(select) {
+  width: 100%;
+}
+
+.tableFilterWrapper {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 24px;
+}
+
+.tableFilterDatePicker {
+  width: 100%;
+  position: relative;
+}
+
+.tableFilterItem {
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  padding: 4px 10px;
+  height: 30px;
+  margin-right: 8px;
+  margin-bottom: 12px;
+}
+
+.tableFilterInput {
+  width: 140px;
+  border: 2px solid #d1cfd4;
+  background-color: white;
+  color: #333;
+}
+
+.tableFilterInput:focus,
+.tableFilterInput:active {
+  outline: none;
+  box-shadow: 0 0 3px 1px #ca50db;
+}
+
+.datePickerIcon {
+  position: absolute;
+  top: 7px;
+  right: 14px;
+  color: #c6c6c6;
+}
+
+/* Dark mode: parent adds global .text-light */
+:global(.text-light) .tableFilterInput {
+  background-color: #2c2c2c;
+  border-color: #4a4a4a;
+  color: #fff;
+}
+
+:global(.text-light) select.tableFilterInput {
+  background-color: #2c2c2c;
+  border-color: #4a4a4a;
+  color: #fff;
+  color-scheme: dark;
+}
+
+:global(.text-light) select.tableFilterInput option {
+  background-color: #2c2c2c;
+  color: #fff;
+}
+
+:global(.text-light) .tableFilterInput::placeholder {
+  color: #a0a0a0;
+}
+
+:global(.text-light) .datePickerIcon {
+  color: #a0a0a0;
+}
+
+:global(.text-light .react-datepicker) {
+  background-color: #2c2c2c;
+  border-color: #4a4a4a;
+  color: #fff;
+}
+
+:global(.text-light .react-datepicker__header) {
+  background-color: #2c2c2c;
+  border-bottom-color: #4a4a4a;
+}
+
+:global(.text-light .react-datepicker__current-month),
+:global(.text-light .react-datepicker__day-name),
+:global(.text-light .react-datepicker__day) {
+  color: #fff;
+}
+
+:global(.text-light .react-datepicker__day:hover) {
+  background-color: #4a4a4a;
+}
+
+:global(.text-light .react-datepicker__day--selected) {
+  background-color: #ca50db;
+}
+
+:global(.text-light .react-datepicker__day--keyboard-selected) {
+  background-color: #ca50db;
+}
+
+:global(.text-light) .tableFilterItem label {
+  color: #fff;
+}
+
+:global(.text-light) .tableFilterItem input[type='checkbox'] {
+  background-color: #2c2c2c;
+  border-color: #4a4a4a;
+}
+
+:global(.text-light) .tableFilterItem input[type='checkbox']:checked {
+  background-color: #ca50db;
+  border-color: #ca50db;
+}
+
+:global(.text-light) .tableFilterItem input[type='checkbox']:hover {
+  border-color: #ca50db;
+}
+
+:global(.text-light) .tableFilterItem {
+  background-color: #2c2c2c;
+}
diff --git a/src/components/common/Checkbox/Checkbox.jsx b/src/components/common/Checkbox/Checkbox.jsx
index 34f9811780..4c6d92f5d7 100644
--- a/src/components/common/Checkbox/Checkbox.jsx
+++ b/src/components/common/Checkbox/Checkbox.jsx
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import styles from './Checkbox.module.css';
 
 // eslint-disable-next-line import/prefer-default-export, react/function-component-definition
@@ -37,3 +38,21 @@ export const Checkbox = ({
     </div>
   );
 };
+
+Checkbox.propTypes = {
+  onChange: PropTypes.func,
+  value: PropTypes.bool,
+  label: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  wrapperClassname: PropTypes.string,
+  backgroundColorCN: PropTypes.string,
+  textColorCN: PropTypes.string,
+  darkMode: PropTypes.bool,
+};
+
+Checkbox.defaultProps = {
+  wrapperClassname: '',
+  backgroundColorCN: '',
+  textColorCN: '',
+  darkMode: false,
+};

From 957f0b7907dbd8b59c8b772340c378fc7e498203 Mon Sep 17 00:00:00 2001
From: juhitha-reddy <pjuhireddy4445@gmail.com>
Date: Sun, 10 May 2026 14:32:59 -0400
Subject: [PATCH 12/16] Removed diplicate code from peopletabdetails

---
 .../__tests__/PeopleTableDetails.test.jsx     | 83 +++++++------------
 1 file changed, 30 insertions(+), 53 deletions(-)

diff --git a/src/components/Reports/__tests__/PeopleTableDetails.test.jsx b/src/components/Reports/__tests__/PeopleTableDetails.test.jsx
index 0e8e4c06e2..57601d2764 100644
--- a/src/components/Reports/__tests__/PeopleTableDetails.test.jsx
+++ b/src/components/Reports/__tests__/PeopleTableDetails.test.jsx
@@ -1,4 +1,4 @@
-import { render, screen, fireEvent, within } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import PeopleTableDetails from '../PeopleTableDetails';
 
@@ -16,12 +16,34 @@ const getMockTask = (id, taskName, resourceCount) => ({
   endDate: '2022-01-10',
 });
 
+/** Single task with three named resources in the shape PeopleTableDetails expects */
+const createTaskWithThreeNamedResources = () => ({
+  _id: '1',
+  taskName: 'Project 2',
+  priority: 'High',
+  status: 'Completed',
+  resources: [
+    [
+      { name: 'Resource 2', index: 2, profilePic: '' },
+      { name: 'Resource 3', index: 3, profilePic: '' },
+      { name: 'Resource 1', index: 1, profilePic: '' },
+    ],
+  ],
+  active: 'Yes',
+  assign: 'No',
+  estimatedHours: '5h',
+  startDate: '2022-01-01',
+  endDate: '2022-01-10',
+});
+
 const taskData = [
   getMockTask('1', 'Task 1', 1),
   getMockTask('2', 'Task 2', 2),
   getMockTask('3', 'Task 3', 1),
 ];
 
+const taskFixtureThreeNamedResources = [createTaskWithThreeNamedResources()];
+
 describe('Unit Test case for PeopleTableDetails component', () => {
   it('Test 1 : Basic render', () => {
     render(<PeopleTableDetails taskData={taskData} />);
@@ -53,27 +75,7 @@ describe('Unit Test case for PeopleTableDetails component', () => {
   });
 
   it('shows resource toggle button when there are more than 2 resources', () => {
-    const tasks = [
-      {
-        _id: '1',
-        taskName: 'Project 2',
-        priority: 'High',
-        status: 'Completed',
-        resources: [
-          [
-            { name: 'Resource 2', index: 2, profilePic: '' },
-            { name: 'Resource 3', index: 3, profilePic: '' },
-            { name: 'Resource 1', index: 1, profilePic: '' },
-          ],
-        ],
-        active: 'Yes',
-        assign: 'No',
-        estimatedHours: '5h',
-        startDate: '2022-01-01',
-        endDate: '2022-01-10',
-      },
-    ];
-    render(<PeopleTableDetails taskData={tasks} />);
+    render(<PeopleTableDetails taskData={taskFixtureThreeNamedResources} />);
 
     expect(screen.getByText('Project 2')).toBeInTheDocument();
     const toggleButton = screen.getByText('1+');
@@ -81,47 +83,22 @@ describe('Unit Test case for PeopleTableDetails component', () => {
   });
 
   it('toggles resource visibility when button is clicked', () => {
-    const tasks = [
-      {
-        _id: '1',
-        taskName: 'Project 2',
-        priority: 'High',
-        status: 'Completed',
-        resources: [
-          [
-            { name: 'Resource 2', index: 2, profilePic: '' },
-            { name: 'Resource 3', index: 3, profilePic: '' },
-            { name: 'Resource 1', index: 1, profilePic: '' },
-          ],
-        ],
-        active: 'Yes',
-        assign: 'No',
-        estimatedHours: '5h',
-        startDate: '2022-01-01',
-        endDate: '2022-01-10',
-      },
-    ];
-
-    render(<PeopleTableDetails taskData={tasks} />);
+    render(<PeopleTableDetails taskData={taskFixtureThreeNamedResources} />);
 
     const allButtons = screen.getAllByRole('button');
-    // Find the button by its content (the "1+" text indicating more resources)
-    const toggleButton = allButtons.find(button =>
-      button.textContent.includes('+')
-    );
+    const toggleButton = allButtons.find(button => button.textContent.includes('+'));
     expect(toggleButton).toBeInTheDocument();
 
     // eslint-disable-next-line testing-library/no-node-access
-    const extraDiv = document.getElementById(tasks[0]._id);
+    const extraDiv = document.getElementById(taskFixtureThreeNamedResources[0]._id);
     expect(extraDiv).toBeInTheDocument();
 
     fireEvent.click(toggleButton);
     expect(extraDiv.style.display).toBe('table-cell');
 
-  fireEvent.click(toggleButton);
-  // If the toggle function sets it back to 'none' inline:
-  expect(extraDiv).not.toBeVisible();
-});
+    fireEvent.click(toggleButton);
+    expect(extraDiv).not.toBeVisible();
+  });
 
   it('Test 8 : Verify remaining resource count displayed', () => {
     render(<PeopleTableDetails taskData={[getMockTask('1', 'P2', 4)]} />);

From ce835ed58e9290ab4b3060a0f7dfdff8fdab8bfb Mon Sep 17 00:00:00 2001
From: Amaan Syed <Amaansyed284@gmail.com>
Date: Tue, 21 Jul 2026 14:24:18 -0400
Subject: [PATCH 13/16] Improve People Report page UI responsiveness

---
 src/components/Reports/InfringementsViz.jsx   |  6 +-
 .../Reports/PeopleReport/PeopleReport.jsx     |  2 +-
 .../PeopleReport/PeopleReport.module.css      | 16 +++-
 .../components/PeopleTasksPieChart.module.css |  5 +-
 .../Reports/ReportFilter/ReportFilter.jsx     | 93 ++++++++++---------
 .../Reports/ReportTableSearchPanel.jsx        |  4 +-
 src/components/Reports/Reports.jsx            |  4 +-
 .../ViewReportsByDate/ViewReportsByDate.jsx   | 15 +--
 src/components/Reports/reportsPage.module.css | 82 ++++++++++++++--
 .../common/PieChart/ProjectPieChart.jsx       | 57 +++---------
 .../PieChart/UserProjectPieChart.module.css   | 43 ++++++++-
 11 files changed, 215 insertions(+), 112 deletions(-)

diff --git a/src/components/Reports/InfringementsViz.jsx b/src/components/Reports/InfringementsViz.jsx
index 1f37f4f8f6..007296e5d6 100644
--- a/src/components/Reports/InfringementsViz.jsx
+++ b/src/components/Reports/InfringementsViz.jsx
@@ -178,7 +178,11 @@ function InfringementsViz({ infringements, fromDate, toDate, darkMode }) {
 
       <Modal size="lg" show={modalVisible} onHide={handleModalClose}>
         <Modal.Header closeButton style={darkMode ? { backgroundColor: '#1b2a41', color: '#f9fafb', borderColor: '#374151' } : {}}>
-          <Modal.Title>{focusedInf.date ? focusedInf.date.toString() : 'Infringement'}</Modal.Title>
+          <Modal.Title
+            style={darkMode ? { color: '#f9fafb', WebkitTextFillColor: '#f9fafb' } : {}}
+          >
+            {focusedInf.date ? focusedInf.date.toString() : 'Infringement'}
+          </Modal.Title>
         </Modal.Header>
         <Modal.Body style={darkMode ? { backgroundColor: '#1b2a41', color: '#f9fafb' } : {}}>
           <div id="inf">
diff --git a/src/components/Reports/PeopleReport/PeopleReport.jsx b/src/components/Reports/PeopleReport/PeopleReport.jsx
index f2ef349daa..bc5f9a41ba 100644
--- a/src/components/Reports/PeopleReport/PeopleReport.jsx
+++ b/src/components/Reports/PeopleReport/PeopleReport.jsx
@@ -555,7 +555,7 @@ class PeopleReport extends Component {
                       <PeopleDataTable />
                     </>
                   ) : (
-                    <Alert color="danger" style={{ margin: '0 35% ' }}>You have no tasks.</Alert>
+                    <Alert color="danger" className={styles.noTasksAlert}>You have no tasks.</Alert>
                   )}
                   <div className={`${styles.infringementContainer}`}>
                     <div className={`${styles.infringementContainerInner}`}>
diff --git a/src/components/Reports/PeopleReport/PeopleReport.module.css b/src/components/Reports/PeopleReport/PeopleReport.module.css
index 3c5cd52019..bf68230530 100644
--- a/src/components/Reports/PeopleReport/PeopleReport.module.css
+++ b/src/components/Reports/PeopleReport/PeopleReport.module.css
@@ -169,6 +169,17 @@ body {
   margin-top: 20px;
 }
 
+.mobilePeopleTable {
+  width: 100%;
+}
+
+.noTasksAlert {
+  width: min(100%, 320px);
+  margin: 0 auto;
+  text-align: center;
+  white-space: normal;
+}
+
 .badgeSummaryPreviewDiv {
   padding-left: 1%;
 }
@@ -397,6 +408,7 @@ body {
   display: flex;
   flex-direction: column;
   min-height: 100%;
+  min-width: 0;
 }
 
 .peopleReportRight {
@@ -405,8 +417,8 @@ body {
   flex-direction: column;
   min-height: 100%;
   margin-top: 2rem;
-  height: 140vh; 
-  overflow: hidden;
+  height: auto;
+  overflow: visible;
 }
 
 .peopleReportProfileWrapper {
diff --git a/src/components/Reports/PeopleReport/components/PeopleTasksPieChart.module.css b/src/components/Reports/PeopleReport/components/PeopleTasksPieChart.module.css
index 4d361a8c0e..c1670f7fb4 100644
--- a/src/components/Reports/PeopleReport/components/PeopleTasksPieChart.module.css
+++ b/src/components/Reports/PeopleReport/components/PeopleTasksPieChart.module.css
@@ -29,6 +29,8 @@
 
 .people-report-pie-wrapper {
   height: 100% !important;
+  max-width: 100%;
+  min-width: 0;
 }
 
 @media (width >= 2000px) {
@@ -63,6 +65,7 @@
   align-items: center;
   gap: 2rem;
   width: 100%;
+  min-width: 0;
 }
 
 .pie-chart-wrapper {
@@ -70,4 +73,4 @@
   align-items: center;
   gap: 2rem;
   width: 100%;
-}
\ No newline at end of file
+}
diff --git a/src/components/Reports/ReportFilter/ReportFilter.jsx b/src/components/Reports/ReportFilter/ReportFilter.jsx
index a1bd797e4c..9bfc0cd10e 100644
--- a/src/components/Reports/ReportFilter/ReportFilter.jsx
+++ b/src/components/Reports/ReportFilter/ReportFilter.jsx
@@ -3,6 +3,7 @@ import { Component } from 'react';
 import { Button } from 'reactstrap';
 import { boxStyle, boxStyleDark } from '~/styles';
 import ReportTableSearchPanel from '../ReportTableSearchPanel';
+import styles from '../reportsPage.module.css';
 
 class ReportFilter extends Component {
   constructor(props) {
@@ -37,60 +38,62 @@ class ReportFilter extends Component {
   render() {
     const { darkMode } = this.props;
     return (
-       <div style={{ color: darkMode ? '#fff' : 'inherit' }}>
-        <div>
+       <div className={styles['report-filter-panel']} style={{ color: darkMode ? '#fff' : 'inherit' }}>
+        <div className={styles['report-filter-header-row']}>
           <button type="button" style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', color: '#007bff', textDecoration: 'none' }}>
             Select a Filter
           </button>
-        </div>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <div style={{ color: darkMode ? '#fff' : 'inherit' }}>
-          <input
-            name="radio"
-            type="radio"
-            style={{ margin: '8px 12px', marginLeft: 0 }}
-            value="active"
-            checked={this.props.filterStatus === 'active'}
-            onChange={this.setActive}
-          />
-          Active
-          <input
-            name="radio"
-            type="radio"
-            style={{ margin: '8px 12px' }}
-            value="inactive"
-            checked={this.props.filterStatus === 'inactive'}
-            onChange={this.setInActive}
-          />
-          Inactive
-          <input
-            name="radio"
-            type="radio"
-            style={{ margin: '8px 12px' }}
-            value="all"
-            checked={this.props.filterStatus === 'all'}
-            onChange={this.setAll}
-          />
-          All
-          <input
-            name="radio"
-            type="radio"
-            style={{ margin: '8px 12px' }}
-            value="tenHour"
-            checked={this.props.filterStatus === 'tenHour'}
-            onChange={this.setTenHourFilter}
-          />
-          10+ hours
-        </div>
-        <Button
+          <Button
             onClick={() => window.location.reload()}
             color="danger"
             style={darkMode ? boxStyleDark : boxStyle}
           >
             Clear All
-        </Button>
+          </Button>
         </div>
-        <div className="mt-4">
+        <div className={styles['report-filter-options-row']} style={{ color: darkMode ? '#fff' : 'inherit' }}>
+          <label>
+            <input
+              name="radio"
+              type="radio"
+              value="active"
+              checked={this.props.filterStatus === 'active'}
+              onChange={this.setActive}
+            />
+            Active
+          </label>
+          <label>
+            <input
+              name="radio"
+              type="radio"
+              value="inactive"
+              checked={this.props.filterStatus === 'inactive'}
+              onChange={this.setInActive}
+            />
+            Inactive
+          </label>
+          <label>
+            <input
+              name="radio"
+              type="radio"
+              value="all"
+              checked={this.props.filterStatus === 'all'}
+              onChange={this.setAll}
+            />
+            All
+          </label>
+          <label>
+            <input
+              name="radio"
+              type="radio"
+              value="tenHour"
+              checked={this.props.filterStatus === 'tenHour'}
+              onChange={this.setTenHourFilter}
+            />
+            10+ hours
+          </label>
+        </div>
+        <div>
           <ReportTableSearchPanel
             onSearch={this.onWildCardSearch}
             wildCardSearchText={this.props.wildCardSearchText}
diff --git a/src/components/Reports/ReportTableSearchPanel.jsx b/src/components/Reports/ReportTableSearchPanel.jsx
index 6a674ca828..221c77a0f3 100644
--- a/src/components/Reports/ReportTableSearchPanel.jsx
+++ b/src/components/Reports/ReportTableSearchPanel.jsx
@@ -62,11 +62,11 @@ function ReportTableSearchPanel({ onSearch, wildCardSearchText, onSearchClick })
 
   return (
     <div>
-      <div className="input-group" id="new_team">
+      <div className={`input-group ${styles['report-filter-form-row']}`} id="new_team">
         <div className="input-group-prepend">
           <button
             type="button"
-            className={`btn ${darkMode ? 'bg-yinmn-blue text-light' : 'btn-secondary'}`}
+            className={`btn ${styles['report-filter-label-action']} ${darkMode ? 'bg-yinmn-blue text-light' : 'btn-secondary'}`}
             onClick={handleSearchClick}
           >
             {SEARCH}
diff --git a/src/components/Reports/Reports.jsx b/src/components/Reports/Reports.jsx
index b454e13749..4f43d150e0 100644
--- a/src/components/Reports/Reports.jsx
+++ b/src/components/Reports/Reports.jsx
@@ -564,7 +564,7 @@ endDate: moment()
               </div>
             </h2>
             <div>
-              <p>Select a Category</p>
+              <p className={darkMode ? styles['text-light'] : undefined}>Select a Category</p>
             </div>
             <div className={styles['report-container-data']}>
               <div className={styles['data-container']} style={this.state.showCharts ? {width: '50%'} : {width: '100%'}}>
@@ -849,7 +849,7 @@ endDate: moment()
                 )}
               </div>
               {this.state.showCharts && (
-                <div className="table-data-container" style={(this.state.showPeople || this.state.showProjects || this.state.showTeams) ? { overflowY: 'auto' } : {overflowY: 'none'}}>
+                <div className={styles['table-data-container']} style={(this.state.showPeople || this.state.showProjects || this.state.showTeams) ? { overflowY: 'auto' } : {overflowY: 'none'}}>
                   {this.state.showPeople && (
                     <PeopleTable userProfiles={this.state.peopleSearchData} darkMode={darkMode} />
                   )}
diff --git a/src/components/Reports/ViewReportsByDate/ViewReportsByDate.jsx b/src/components/Reports/ViewReportsByDate/ViewReportsByDate.jsx
index 5dce9abcdb..ad280f3d49 100644
--- a/src/components/Reports/ViewReportsByDate/ViewReportsByDate.jsx
+++ b/src/components/Reports/ViewReportsByDate/ViewReportsByDate.jsx
@@ -5,6 +5,7 @@ import { Button } from 'reactstrap';
 import { boxStyle, boxStyleDark } from '~/styles';
 import 'react-datepicker/dist/react-datepicker.css';
 import '../../Header/index.module.css';
+import styles from '../reportsPage.module.css';
 
 class ViewReportByDate extends Component {
   constructor(props) {
@@ -53,11 +54,11 @@ class ViewReportByDate extends Component {
     const { minDate, maxDate, textColor, darkMode } = this.props;
 
     return (
-      <div className={`date-picker-container ${darkMode ? 'dark-mode' : ''}`}>
-        <div id="task_startDate" className="date-picker-item">
+      <div className={`${styles['date-picker-container']} ${darkMode ? 'dark-mode' : ''}`}>
+        <div id="task_startDate" className={styles['date-picker-item']}>
           <label 
             htmlFor="task_startDate" 
-            className={`date-picker-label ${textColor}`}
+            className={`${styles['date-picker-label']} ${textColor}`}
             style={{ color: darkMode ? '#ffffff' : '#000000', fontWeight: '500' }}
           >
             Start Date
@@ -71,10 +72,10 @@ class ViewReportByDate extends Component {
             popperPlacement="top-start"
           />
         </div>
-        <div id="task_EndDate" className="date-picker-item">
+        <div id="task_EndDate" className={styles['date-picker-item']}>
           <label 
             htmlFor="task_EndDate" 
-            className={`date-picker-label ${textColor}`}
+            className={`${styles['date-picker-label']} ${textColor}`}
             style={{ color: darkMode ? '#ffffff' : '#000000', fontWeight: '500' }}
           >
             End Date
@@ -88,8 +89,8 @@ class ViewReportByDate extends Component {
             popperPlacement="top"
           />
         </div>
-        <div id="task_EndDate" className="date-picker-item">
-          <label htmlFor="task_EndDate" className={`date-picker-label ${textColor}`} />
+        <div id="task_EndDate" className={styles['date-picker-item']}>
+          <span className={styles['date-picker-label']} aria-hidden="true" />
           <Button
             onClick={this.clearDates}
             color="danger"
diff --git a/src/components/Reports/reportsPage.module.css b/src/components/Reports/reportsPage.module.css
index e773bc0678..dcd6f639b8 100644
--- a/src/components/Reports/reportsPage.module.css
+++ b/src/components/Reports/reportsPage.module.css
@@ -134,24 +134,90 @@
   max-width: 100%;
 }
 
+.report-filter-panel {
+  --report-filter-label-width: 88px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.report-filter-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.report-filter-options-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+  align-items: center;
+}
+
+.report-filter-options-row label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0;
+}
+
+.report-filter-form-row {
+  align-items: stretch;
+}
+
+.report-filter-label-action {
+  width: var(--report-filter-label-width);
+}
+
 .date-picker-container {
   display: flex;
-  flex-flow: row;
-  justify-content: flex-start;
-  padding: 8px 0;
-  gap: 4%;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 .date-picker-item {
   display: flex;
-  width: 30%;
-  flex-flow: column nowrap;
-  justify-content: space-between;
+  align-items: center;
 }
 
 .date-picker-label {
+  width: var(--report-filter-label-width, 88px);
+  flex: 0 0 var(--report-filter-label-width, 88px);
   text-align: left;
-  margin: 8px 0;
+  margin: 0;
+}
+
+.date-picker-item :global(.react-datepicker-wrapper) {
+  width: 220px;
+}
+
+.date-picker-item :global(.react-datepicker__input-container),
+.date-picker-item input {
+  width: 100%;
+}
+
+@media screen and (width <= 575px) {
+  .report-filter-header-row {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .date-picker-item,
+  .report-filter-form-row {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .date-picker-label,
+  .report-filter-label-action {
+    width: 100%;
+    flex-basis: auto;
+  }
+
+  .date-picker-item :global(.react-datepicker-wrapper) {
+    width: 100%;
+  }
 }
 
 /* Unified spacing system */
diff --git a/src/components/common/PieChart/ProjectPieChart.jsx b/src/components/common/PieChart/ProjectPieChart.jsx
index 3cf081085c..0376b9aee0 100644
--- a/src/components/common/PieChart/ProjectPieChart.jsx
+++ b/src/components/common/PieChart/ProjectPieChart.jsx
@@ -43,7 +43,7 @@ function toChartData(projectsData) {
 }
 
 /** Single-line label + center toggle (matches bottom donut behavior) */
-function CenterLabel({ viewBox, total, darkMode, showPct, onToggle }) {
+function CenterLabel({ viewBox, total, darkMode, showPct }) {
   if (!viewBox || total <= 0) return null;
   const { cx, cy } = viewBox;
   const text = showPct ? '100% All Projects' : `${total.toFixed(2)} Hrs`;
@@ -53,35 +53,6 @@ function CenterLabel({ viewBox, total, darkMode, showPct, onToggle }) {
       <text x={cx} y={cy + 4} textAnchor="middle" fill={darkMode ? '#fff' : '#111'} fontSize="18">
         {text}
       </text>
-
-      {/* same switch you use in the D3 chart */}
-      <foreignObject x={cx - 18} y={cy + 12} width="36" height="28">
-        <div
-          xmlns="http://www.w3.org/1999/xhtml"
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '100%',
-            height: '100%',
-          }}
-        >
-          <label className={styles['switch']}>
-            {/* Accessible text for the label */}
-            {/* <span className={styles['sr-only']}>Show percentage</span> */}
-
-            {/* The control associated with the label */}
-            <input
-              type="checkbox"
-              checked={showPct}
-              onChange={e => onToggle(e.target.checked)}
-              aria-label="Show percentage"
-            />
-
-            <span className={styles['slider']} aria-hidden="true" />
-          </label>
-        </div>
-      </foreignObject>
     </g>
   );
 }
@@ -103,7 +74,7 @@ export default function UserProjectD3PieChart({ projectsData, darkMode }) {
       }`}
     >
       {/* Square box so the donut isn't clipped; same size as D3 chart */}
-      <div style={{ width: CHART_SIZE, height: CHART_SIZE }}>
+      <div className={styles['pie-chart-donut']} style={{ '--pie-chart-size': `${CHART_SIZE}px` }}>
         <ResponsiveContainer width="100%" height="100%">
           <RechartsPieChart margin={{ top: 8, right: 8, bottom: 8, left: 8 }}>
             <Pie
@@ -122,13 +93,7 @@ export default function UserProjectD3PieChart({ projectsData, darkMode }) {
               <Label
                 position="center"
                 content={props => (
-                  <CenterLabel
-                    {...props}
-                    total={total}
-                    darkMode={darkMode}
-                    showPct={showPct}
-                    onToggle={setShowPct}
-                  />
+                  <CenterLabel {...props} total={total} darkMode={darkMode} showPct={showPct} />
                 )}
               />
               {data.map((_, i) => (
@@ -151,12 +116,20 @@ export default function UserProjectD3PieChart({ projectsData, darkMode }) {
             />
           </RechartsPieChart>
         </ResponsiveContainer>
+        <div className={styles['pie-chart-toggle']}>
+          <label className={styles['switch']}>
+            <input
+              type="checkbox"
+              checked={showPct}
+              onChange={e => setShowPct(e.target.checked)}
+              aria-label="Show percentage"
+            />
+            <span className={styles['slider']} aria-hidden="true" />
+          </label>
+        </div>
       </div>
 
-      <div
-        className={styles['pie-chart-legend-container']}
-        style={{ marginTop: 8, marginLeft: 40 }}
-      >
+      <div className={styles['pie-chart-legend-container']}>
         <table
           className={
             darkMode ? styles['pie-chart-legend-table-dark'] : styles['pie-chart-legend-table']
diff --git a/src/components/common/PieChart/UserProjectPieChart.module.css b/src/components/common/PieChart/UserProjectPieChart.module.css
index 2c4c0362ca..45425f87d7 100644
--- a/src/components/common/PieChart/UserProjectPieChart.module.css
+++ b/src/components/common/PieChart/UserProjectPieChart.module.css
@@ -3,10 +3,25 @@
     display: flex;
     align-items: center;
     justify-content: flex-start;
+    max-width: 100%;
+    min-width: 0;
 
     /* overflow: hidden; */
   }
 
+  .pie-chart-donut {
+    width: var(--pie-chart-size);
+    height: var(--pie-chart-size);
+    max-width: 100%;
+    flex: 0 0 var(--pie-chart-size);
+  }
+
+  .pie-chart-toggle {
+    display: flex;
+    justify-content: center;
+    margin-top: 6px;
+  }
+
   .donut-box {
   width: 240px;   /* match the bottom donut look */
   height: 240px;  /* square so the ring isn’t cropped */
@@ -141,9 +156,11 @@
   }
 
   .pie-chart-legend-container {
-    margin-top: 20px;
+    margin-top: 8px;
+    margin-left: 40px;
     height: 100%;
     width: 60%;
+    min-width: 0;
 
   }
 
@@ -265,10 +282,34 @@
 .pie-chart-legend-container td:nth-child(2) {
   text-align: center;
   width: 60%; /* Name column */
+  overflow-wrap: anywhere;
 }
 
 .pie-chart-legend-container th:nth-child(3),
 .pie-chart-legend-container td:nth-child(3) {
   width: 80px; /* Hours column */
   text-align: right;
+  white-space: nowrap;
+}
+
+@media (width <= 1200px) {
+  .pie-chart-wrapper {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .pie-chart-donut {
+    align-self: center;
+  }
+
+  .pie-chart-legend-container {
+    width: 100%;
+    margin-left: 0;
+  }
+}
+
+@media (width <= 670px) {
+  .pie-chart-legend-container {
+    overflow-x: auto;
+  }
 }

From aaabf53cb870fd6e64dd3745f855247d08f073c0 Mon Sep 17 00:00:00 2001
From: Amaan Syed <Amaansyed284@gmail.com>
Date: Tue, 21 Jul 2026 16:16:26 -0400
Subject: [PATCH 14/16] Fix Reports page dark mode hover and modal title

---
 src/components/Reports/InfringementsViz.jsx   | 11 ++++++++---
 src/components/Reports/reportsPage.module.css |  4 ++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/Reports/InfringementsViz.jsx b/src/components/Reports/InfringementsViz.jsx
index 007296e5d6..9db542f05d 100644
--- a/src/components/Reports/InfringementsViz.jsx
+++ b/src/components/Reports/InfringementsViz.jsx
@@ -178,11 +178,16 @@ function InfringementsViz({ infringements, fromDate, toDate, darkMode }) {
 
       <Modal size="lg" show={modalVisible} onHide={handleModalClose}>
         <Modal.Header closeButton style={darkMode ? { backgroundColor: '#1b2a41', color: '#f9fafb', borderColor: '#374151' } : {}}>
-          <Modal.Title
-            style={darkMode ? { color: '#f9fafb', WebkitTextFillColor: '#f9fafb' } : {}}
+          <span
+            style={{
+              ...(darkMode ? { color: '#f9fafb' } : {}),
+              fontSize: '1.5rem',
+              fontWeight: 500,
+              lineHeight: 1.5,
+            }}
           >
             {focusedInf.date ? focusedInf.date.toString() : 'Infringement'}
-          </Modal.Title>
+          </span>
         </Modal.Header>
         <Modal.Body style={darkMode ? { backgroundColor: '#1b2a41', color: '#f9fafb' } : {}}>
           <div id="inf">
diff --git a/src/components/Reports/reportsPage.module.css b/src/components/Reports/reportsPage.module.css
index dcd6f639b8..157583b07f 100644
--- a/src/components/Reports/reportsPage.module.css
+++ b/src/components/Reports/reportsPage.module.css
@@ -130,6 +130,10 @@
   -webkit-overflow-scrolling: touch;
 }
 
+.table-data-container :global(.bg-yinmn-blue tbody tr:hover) {
+  background: #2f4157 !important;
+}
+
 .search-field-container {
   max-width: 100%;
 }

From 3e49ce0104973665b2028845b8c4d0864be99b76 Mon Sep 17 00:00:00 2001
From: Amaan Syed <Amaansyed284@gmail.com>
Date: Fri, 24 Jul 2026 16:06:51 -0400
Subject: [PATCH 15/16] Fix Infringement popup responsiveness and profile
 column layout

---
 src/components/Reports/InfringementsViz.jsx   | 11 +++---
 .../PeopleReport/PeopleReport.module.css      | 36 +++++++++++++++++++
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/components/Reports/InfringementsViz.jsx b/src/components/Reports/InfringementsViz.jsx
index 9db542f05d..dce7d7c505 100644
--- a/src/components/Reports/InfringementsViz.jsx
+++ b/src/components/Reports/InfringementsViz.jsx
@@ -176,7 +176,7 @@ function InfringementsViz({ infringements, fromDate, toDate, darkMode }) {
       </Button>
       <div className={`${styles.kaitest} ${darkMode ? 'mt-2' : ''}`} id="infplot" data-testid="infplot" />
 
-      <Modal size="lg" show={modalVisible} onHide={handleModalClose}>
+      <Modal size="lg" show={modalVisible} onHide={handleModalClose} dialogClassName={styles.infringementModalDialog}>
         <Modal.Header closeButton style={darkMode ? { backgroundColor: '#1b2a41', color: '#f9fafb', borderColor: '#374151' } : {}}>
           <span
             style={{
@@ -189,8 +189,11 @@ function InfringementsViz({ infringements, fromDate, toDate, darkMode }) {
             {focusedInf.date ? focusedInf.date.toString() : 'Infringement'}
           </span>
         </Modal.Header>
-        <Modal.Body style={darkMode ? { backgroundColor: '#1b2a41', color: '#f9fafb' } : {}}>
-          <div id="inf">
+        <Modal.Body
+          className={styles.infringementModalBody}
+          style={darkMode ? { backgroundColor: '#1b2a41', color: '#f9fafb' } : {}}
+        >
+          <div id="inf" className={styles.infringementDescriptions}>
             <table style={darkMode ? { backgroundColor: '#1b2a41', color: '#f9fafb', width: '100%' } : { width: '100%' }}>
               <thead>
                 <tr style={darkMode ? { backgroundColor: '#1b2a41' } : {}}>
@@ -217,4 +220,4 @@ function InfringementsViz({ infringements, fromDate, toDate, darkMode }) {
   );
 }
 
-export default InfringementsViz;
\ No newline at end of file
+export default InfringementsViz;
diff --git a/src/components/Reports/PeopleReport/PeopleReport.module.css b/src/components/Reports/PeopleReport/PeopleReport.module.css
index bf68230530..dee9cc79cc 100644
--- a/src/components/Reports/PeopleReport/PeopleReport.module.css
+++ b/src/components/Reports/PeopleReport/PeopleReport.module.css
@@ -198,6 +198,32 @@ body {
   background-color: #f2f2f2;
 }
 
+.infringementModalDialog {
+  max-width: min(800px, calc(100vw - 2rem));
+}
+
+.infringementModalDialog :global(.modal-content) {
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.infringementModalBody,
+.infringementDescriptions {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.infringementDescriptions table {
+  width: 100%;
+  min-width: 0;
+  table-layout: fixed;
+}
+
+.infringementDescriptions th,
+.infringementDescriptions td {
+  overflow-wrap: anywhere;
+}
+
 /* Table css starts */
 
 .introDate {
@@ -416,6 +442,7 @@ body {
   display: flex;
   flex-direction: column;
   min-height: 100%;
+  min-width: 0;
   margin-top: 2rem;
   height: auto;
   overflow: visible;
@@ -438,6 +465,15 @@ body {
   box-shadow: 0 0 12px rgb(0 0 0 / 8%);
   height: 698px;
   margin-top: 2rem;
+  min-width: 0;
+}
+
+.reportStats p,
+.reportStats h4,
+.reportStats a {
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  word-break: normal;
 }
 
 @media (width >= 1489px) and (width <= 1784px) {

From b7a39fec50210daab20016e892ffb6170a38eceb Mon Sep 17 00:00:00 2001
From: Amaan Syed <Amaansyed284@gmail.com>
Date: Tue, 28 Jul 2026 19:55:16 -0400
Subject: [PATCH 16/16] Fix People Report pie chart theme updates and mobile
 toggle layout

---
 src/components/Reports/TimeEntriesViz.jsx     |  4 +-
 .../common/PieChart/ProjectPieChart.jsx       | 82 ++++++++++---------
 .../PieChart/UserProjectPieChart.module.css   | 13 ++-
 3 files changed, 54 insertions(+), 45 deletions(-)

diff --git a/src/components/Reports/TimeEntriesViz.jsx b/src/components/Reports/TimeEntriesViz.jsx
index 4d36dd506d..bd42815466 100644
--- a/src/components/Reports/TimeEntriesViz.jsx
+++ b/src/components/Reports/TimeEntriesViz.jsx
@@ -19,7 +19,7 @@ function TimeEntriesViz({ timeEntries, fromDate, toDate, darkMode }) {
 
   React.useEffect(() => {
     generateGraph();
-  }, [show, fromDate, toDate]);
+  }, [show, fromDate, toDate, darkMode]);
 
   function displayGraph(logs, maxHoursCount, totalHours) {
     if (!d3 || !d3.selectAll) return;
@@ -195,4 +195,4 @@ TimeEntriesViz.defaultProps = {
   darkMode: false,
 };
 
-export default TimeEntriesViz;
\ No newline at end of file
+export default TimeEntriesViz;
diff --git a/src/components/common/PieChart/ProjectPieChart.jsx b/src/components/common/PieChart/ProjectPieChart.jsx
index 0376b9aee0..fd9a88e6d9 100644
--- a/src/components/common/PieChart/ProjectPieChart.jsx
+++ b/src/components/common/PieChart/ProjectPieChart.jsx
@@ -75,47 +75,49 @@ export default function UserProjectD3PieChart({ projectsData, darkMode }) {
     >
       {/* Square box so the donut isn't clipped; same size as D3 chart */}
       <div className={styles['pie-chart-donut']} style={{ '--pie-chart-size': `${CHART_SIZE}px` }}>
-        <ResponsiveContainer width="100%" height="100%">
-          <RechartsPieChart margin={{ top: 8, right: 8, bottom: 8, left: 8 }}>
-            <Pie
-              data={data}
-              dataKey="value"
-              nameKey="name"
-              cx="50%"
-              cy="50%"
-              innerRadius={70} // <- same as D3
-              outerRadius={CHART_RADIUS} // <- same as D3
-              label={false} // no labels
-              labelLine={false} // no pointers
-              isAnimationActive={false}
-              stroke="none"
-            >
-              <Label
-                position="center"
-                content={props => (
-                  <CenterLabel {...props} total={total} darkMode={darkMode} showPct={showPct} />
-                )}
-              />
-              {data.map((_, i) => (
-                <Cell key={i} fill={colors[i]} />
-              ))}
-            </Pie>
+        <div className={styles['pie-chart-donut-canvas']}>
+          <ResponsiveContainer width="100%" height="100%">
+            <RechartsPieChart margin={{ top: 8, right: 8, bottom: 8, left: 8 }}>
+              <Pie
+                data={data}
+                dataKey="value"
+                nameKey="name"
+                cx="50%"
+                cy="50%"
+                innerRadius={70} // <- same as D3
+                outerRadius={CHART_RADIUS} // <- same as D3
+                label={false} // no labels
+                labelLine={false} // no pointers
+                isAnimationActive={false}
+                stroke="none"
+              >
+                <Label
+                  position="center"
+                  content={props => (
+                    <CenterLabel {...props} total={total} darkMode={darkMode} showPct={showPct} />
+                  )}
+                />
+                {data.map((_, i) => (
+                  <Cell key={i} fill={colors[i]} />
+                ))}
+              </Pie>
 
-            <Tooltip
-              contentStyle={
-                darkMode
-                  ? { backgroundColor: '#1b2a41', color: '#f9fafb', border: '1px solid #374151' }
-                  : {}
-              }
-              itemStyle={darkMode ? { color: '#f9fafb' } : {}}
-              formatter={(value, _name, entry) =>
-                showPct
-                  ? [`${((Number(value) * 100) / total).toFixed(2)}%`, entry?.payload?.name]
-                  : [`${Number(value).toFixed(2)} hrs`, entry?.payload?.name]
-              }
-            />
-          </RechartsPieChart>
-        </ResponsiveContainer>
+              <Tooltip
+                contentStyle={
+                  darkMode
+                    ? { backgroundColor: '#1b2a41', color: '#f9fafb', border: '1px solid #374151' }
+                    : {}
+                }
+                itemStyle={darkMode ? { color: '#f9fafb' } : {}}
+                formatter={(value, _name, entry) =>
+                  showPct
+                    ? [`${((Number(value) * 100) / total).toFixed(2)}%`, entry?.payload?.name]
+                    : [`${Number(value).toFixed(2)} hrs`, entry?.payload?.name]
+                }
+              />
+            </RechartsPieChart>
+          </ResponsiveContainer>
+        </div>
         <div className={styles['pie-chart-toggle']}>
           <label className={styles['switch']}>
             <input
diff --git a/src/components/common/PieChart/UserProjectPieChart.module.css b/src/components/common/PieChart/UserProjectPieChart.module.css
index 45425f87d7..7fda4105f6 100644
--- a/src/components/common/PieChart/UserProjectPieChart.module.css
+++ b/src/components/common/PieChart/UserProjectPieChart.module.css
@@ -11,15 +11,22 @@
 
   .pie-chart-donut {
     width: var(--pie-chart-size);
-    height: var(--pie-chart-size);
     max-width: 100%;
-    flex: 0 0 var(--pie-chart-size);
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .pie-chart-donut-canvas {
+    width: 100%;
+    height: var(--pie-chart-size);
   }
 
   .pie-chart-toggle {
     display: flex;
     justify-content: center;
-    margin-top: 6px;
+    margin: 10px 0 16px;
   }
 
   .donut-box {