From 1dc526648a822092457f5263fcdfb13c533cabbb Mon Sep 17 00:00:00 2001
From: Ken Zou <kzou55@gmail.com>
Date: Wed, 19 Aug 2026 21:31:23 -0400
Subject: [PATCH 1/8] refactor: use CSS modules in project report's members and
 tasks tables

---
 .../ProjectMemberTable/ProjectMemberTable.jsx | 63 ++++++++++---------
 .../Reports/TasksDetail/TasksDetail.jsx       | 44 ++++++-------
 .../Reports/TasksTable/TasksTable.jsx         | 28 +++++----
 3 files changed, 69 insertions(+), 66 deletions(-)

diff --git a/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx b/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx
index 42e88d551c..655b2664d4 100644
--- a/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx
+++ b/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx
@@ -3,9 +3,10 @@ import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import CopyToClipboard from '~/components/common/Clipboard/CopyToClipboard';
 import { Stub } from '../../common/Stub';
-import './ProjectMemberTable.module.css';
+import styles from './ProjectMemberTable.module.css';
 
 export function ProjectMemberTable({ projectMembers, skip, take, handleMemberCount, darkMode, counts }) {
+  console.log('skip:', skip, 'take:', take);
   const [allMemberList, setAllMemberList] = useState([]);
   const [activeMemberList, setActiveMemberList] = useState([]);
   const [memberFilter, setMemberFilter] = useState('active');
@@ -51,11 +52,11 @@ export function ProjectMemberTable({ projectMembers, skip, take, handleMemberCou
 }, [fetched, members, foundUsers]);
 
   const activeMemberTable = activeMemberList.slice(skip, skip + take).map((member, index) => (
-    <div className="project-member-table-row" id={`tr_${  member._id}`} key={`ac_${  member._id}`}>
+    <div className={styles['project-member-table-row']} id={`tr_${  member._id}`} key={`ac_${  member._id}`}>
       <div>
         <div>{skip + index + 1}</div>
       </div>
-      <Link to={`/userprofile/${member._id}`} title="View Profile"  className={`project-member-table-name-column ${darkMode ? "text-light" : ""}`}>
+      <Link to={`/userprofile/${member._id}`} title="View Profile"  className={`${styles['project-member-table-name-column']} ${darkMode ? "text-light" : ""}`}>
         <div>
         {window.innerWidth >= 1100 ? `${member.firstName} ${member.lastName}` : `${member.firstName.substring(0, 10)} ${member.lastName.substring(0, 1)}`}          
         </div>
@@ -71,7 +72,7 @@ export function ProjectMemberTable({ projectMembers, skip, take, handleMemberCou
           </div>
         )}
       </div>
-      <div className='project-member-table-id-column'>
+      <div className={styles['project-member-table-id-column']}>
         <CopyToClipboard writeText={member._id} message={`Copied "${member._id}".`} />
         {member._id}
       </div> 
@@ -79,11 +80,11 @@ export function ProjectMemberTable({ projectMembers, skip, take, handleMemberCou
   ));
 
   const allMemberTable = allMemberList.slice(skip, skip + take).map((member, index) => (
-    <div className="project-member-table-row" id={`tr_${  member._id}`} key={`al_${  member._id}`}>
+    <div className={styles['project-member-table-row']} id={`tr_${  member._id}`} key={`al_${  member._id}`}>
       <div>
         <div>{skip + index + 1}</div>
       </div>
-      <Link to={`/userprofile/${member._id}`} title="View Profile" className={`project-member-table-name-column ${darkMode ? 'text-light' : ''}`}>
+      <Link to={`/userprofile/${member._id}`} title="View Profile" className={`${styles['project-member-table-name-column']} ${darkMode ? 'text-light' : ''}`}>
         <div>
         {window.innerWidth >= 1100 ? `${member.firstName} ${member.lastName}` : `${member.firstName.substring(0, 10)} ${member.lastName.substring(0, 1)}`} 
         </div>
@@ -99,7 +100,7 @@ export function ProjectMemberTable({ projectMembers, skip, take, handleMemberCou
           </div>
         )}
       </div>
-      <div className='project-member-table-id-column'>
+      <div className={styles['project-member-table-id-column']}>
         <CopyToClipboard writeText={member._id} message={`Copied "${member._id}".`} />
         {member._id}
       </div>     
@@ -107,31 +108,31 @@ export function ProjectMemberTable({ projectMembers, skip, take, handleMemberCou
   ));
 
   return (
-    <div className={`project-member-table ${darkMode ? 'text-light' : ''}`}>
-      <h5 className="project-member-table-title">Members</h5>
-      <div className="project-member-count-head">
-      <div className="filter-members-mobile"
-        onChange={e => {
-          const val = e.target.value;
-          setMemberFilter(val);
-          handleMemberCount(val === 'all-time' ? allMemberList.length : activeMemberList.length);
-        }}
-      >
-        <input type="radio" name="memberFilter" value="active" id="active" defaultChecked />
-        <label htmlFor="active" id="project-active-member-count" className={`project-member-count ${darkMode ? 'text-light' : ''}`}>
-          ACTIVE: {counts.activeMemberCount}
-        </label>
-        <input type="radio" name="memberFilter" value="all-time" id="all-time" />
-        <label htmlFor="all-time" id="project-all-member-count" className={`project-member-count ${darkMode ? 'text-light' : ''}`}>
-          ALL-TIME: {counts.memberCount}
-        </label>
-      </div>
+    <div className={`${styles['project-member-table']} ${darkMode ? 'text-light' : ''}`}>
+      <h5 className={styles['project-member-table-title']}>Members</h5>
+      <div className={styles['project-member-count-head']}>
+        <div className={styles['filter-members-mobile']}
+          onChange={e => {
+            const val = e.target.value;
+            setMemberFilter(val);
+            handleMemberCount(val === 'all-time' ? allMemberList.length : activeMemberList.length);
+          }
+        }>
+          <input type="radio" name="memberFilter" value="active" id="active" defaultChecked />
+          <label htmlFor="active" id="project-active-member-count" className={`${styles['project-member-count']} ${darkMode ? 'text-light' : ''}`}>
+            ACTIVE: {counts.activeMemberCount}
+          </label>
+          <input type="radio" name="memberFilter" value="all-time" id="all-time" />
+          <label htmlFor="all-time" id="project-all-member-count" className={`${styles['project-member-count']} ${darkMode ? 'text-light' : ''}`}>
+            ALL-TIME: {counts.memberCount}
+          </label>
+        </div>
       </div>
-      <div className={`reports-table-head-members ${darkMode ? 'bg-space-cadet' : ''}`}>
-        <div className="reports-table-head-cell">#</div>
-        <div className="reports-table-head-cell">Name</div>
-        <div className="reports-table-head-cell project-member-table-active-column">Active</div>
-        <div className="reports-table-head-cell">ID</div>
+      <div className={`${styles['reports-table-head-members']} ${darkMode ? 'bg-space-cadet' : ''}`}>
+        <div className={styles['reports-table-head-cell']}>#</div>
+        <div className={styles['reports-table-head-cell']}>Name</div>
+        <div className={`${styles['reports-table-head-cell']} ${styles['project-member-table-active-column']}`}>Active</div>
+        <div className={styles['reports-table-head-cell']}>ID</div>
       </div>
       <div>
         {memberFilter === 'all-time' && allMemberTable.length > 0 && allMemberTable}
diff --git a/src/components/Reports/TasksDetail/TasksDetail.jsx b/src/components/Reports/TasksDetail/TasksDetail.jsx
index 8f889a245d..30711a72c2 100644
--- a/src/components/Reports/TasksDetail/TasksDetail.jsx
+++ b/src/components/Reports/TasksDetail/TasksDetail.jsx
@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 import { Button } from 'react-bootstrap';
 import Collapse from 'react-bootstrap/Collapse';
 import EditTaskModal from '../../Projects/WBS/WBSDetail/EditTask/EditTaskModal';
-import './TasksDetail.module.css';
+import styles from './TasksDetail.module.css';
 
 
 
@@ -77,19 +77,19 @@ export function TasksDetail(props) {
 
 
   const tasksList = filteredTasks.map((task, index) => (
-    <tr key={task._id} className={darkMode ? 'dark-mode-row' : ''}>
+    <tr key={task._id} className={darkMode ? styles['dark-mode-row']  : ''}>
       <td>{index + 1}</td>
-      <td className="tasks-detail-task-name">{truncate(task.taskName, 20)}</td>
-      <td className="collapse-column">{task.priority}</td>
+      <td className={styles['tasks-detail-task-name']}>{truncate(task.taskName, 20)}</td>
+      <td className={styles['collapse-column']}>{task.priority}</td>
       <td>{task.status}</td>
-      <td className="tasks-detail-center-cells">
+      <td className={styles['tasks-detail-center-cells']}>
         {task.resources.length <= 2 ? (
           task.resources.map((resource) => <div key={resource._id}>{resource.name}</div>)
         ) : (
           <ShowCollapse resources={task.resources} />
         )}
       </td>
-      <td className="tasks-detail-center-cells">
+      <td className={styles['tasks-detail-center-cells']}>
   {task.resources.length <= 2 ? (
     task.resources.map((resource, innerIndex) => (
       <span key={resource._id}>
@@ -102,13 +102,13 @@ export function TasksDetail(props) {
   )}
 </td>
 
-      <td className="tasks-detail-center-cells collapse-column">
+      <td className={`${styles['tasks-detail-center-cells']} ${styles['collapse-column']}`}>
         {task.isAssigned ? <div>Assign</div> : <div>Not Assign</div>}
       </td>
-      <td className="tasks-detail-center-cells collapse-column">{task.classification}</td>
-      <td className="tasks-detail-center-cells">{task.estimatedHours.toFixed(2)}</td>
-      <td className="collapse-column">{formatDate(task.startedDatetime)}</td>
-      <td className="collapse-column">{formatDate(task.dueDatetime)}</td>
+      <td className={`${styles['tasks-detail-center-cells']} ${styles['collapse-column']}`}>{task.classification}</td>
+      <td className={styles['tasks-detail-center-cells']}>{task.estimatedHours.toFixed(2)}</td>
+      <td className={styles['collapse-column']}>{formatDate(task.startedDatetime)}</td>
+      <td className={styles['collapse-column']}>{formatDate(task.dueDatetime)}</td>
       <td>
         {props.toggleEditTasks && (
           <EditTaskModal
@@ -130,21 +130,21 @@ export function TasksDetail(props) {
 
   return (
     <div>
-      <div className={`tasks-detail-total ${darkMode ? 'text-light' : ''}`}>Total: {tasksList.length}</div>
-      <table className={`tasks-detail-table ${darkMode ? 'dark-mode-table' : ''}`}>
-        <thead className='tasks-detail-table-head'>
+      <div className={`${styles['tasks-detail-total']} ${darkMode ? 'text-light' : ''}`}>Total: {tasksList.length}</div>
+      <table className={`${styles['tasks-detail-table']} ${darkMode ? 'dark-mode-table' : ''}`}>
+        <thead className={styles['tasks-detail-table-head']}>
           <tr className={darkMode ? 'bg-space-cadet text-light' : ''}>
             <th>#</th>
             <th>Task</th>
-            <th className="collapse-column">Priority</th>
+            <th className={styles['collapse-column']}>Priority</th>
             <th>Status</th>
-            <th className="tasks-detail-center-cells">Resources</th>
-            <th className="tasks-detail-center-cells">Active</th>
-            <th className="tasks-detail-center-cells collapse-column">Assign</th>
-            <th className="tasks-detail-center-cells collapse-column">Class</th>
-            <th className="tasks-detail-center-cells">Estimated Hours</th>
-            <th className="collapse-column">Start Date</th>
-            <th className="collapse-column">End Date</th>
+            <th className={styles['tasks-detail-center-cells']}>Resources</th>
+            <th className={styles['tasks-detail-center-cells']}>Active</th>
+            <th className={`${styles['tasks-detail-center-cells']} ${styles[`collapse-column`]}`}>Assign</th>
+            <th className={`${styles['tasks-detail-center-cells']} ${styles[`collapse-column`]}`}>Class</th>
+            <th className={styles['tasks-detail-center-cells']}>Estimated Hours</th>
+            <th className={styles['collapse-column']}>Start Date</th>
+            <th className={styles['collapse-column']}>End Date</th>
             <th>Actions</th>
           </tr>
         </thead>
diff --git a/src/components/Reports/TasksTable/TasksTable.jsx b/src/components/Reports/TasksTable/TasksTable.jsx
index 6add0df240..89f83a4a01 100644
--- a/src/components/Reports/TasksTable/TasksTable.jsx
+++ b/src/components/Reports/TasksTable/TasksTable.jsx
@@ -5,14 +5,16 @@
 import { useState, useEffect, useRef } from 'react';
 import  '../../Teams/Team.module.css';
 import 'react-datepicker/dist/react-datepicker.css';
-import './TasksTable.module.css';
+import styles from './TasksTable.module.css';
 import Select from 'react-select';
 import { Checkbox } from '~/components/common/Checkbox';
 import TextSearchBox from '~/components/UserManagement/TextSearchBox';
 import { boxStyle, boxStyleDark } from '~/styles';
 import { TasksDetail } from '../TasksDetail';
+import { stubArray } from 'lodash';
 
 export function TasksTable({ darkMode, tasks, projectId }) {
+  console.log(darkMode)
   const [isActive, setActive] = useState(true);
   const [isAssigned, setAssigned] = useState(true);
   const [toggleEditTasks, setToggleEditTasks] = useState(false);
@@ -71,63 +73,63 @@ export function TasksTable({ darkMode, tasks, projectId }) {
   return (
     <div className={darkMode ? 'text-light' : ''}>
       <div>
-        <h4 className="tasks-table-header">Tasks</h4>
+        <h4 className={styles['tasks-table-header']}>Tasks</h4>
       </div>
-      <div className="tasks-table-filters-wrapper">
-        <div className={`tasks-table-filters ${darkMode ? 'text-dark' : ''}`}>
+      <div className={styles['tasks-table-filters-wrapper']}>
+        <div className={`${styles['tasks-table-filters']} ${darkMode ? 'text-dark' : ''}`}>
           <Select
             ref={userRef}
             options={getUserOptions()}
             placeholder="Any user"
             onChange={(selectedOption) => handleSelectChange(selectedOption, 'users')}
-            className="tasks-table-filter-item tasks-table-filter-input"
+            className={`${styles['tasks-table-filter-item']} ${styles['tasks-table-filter-input']}`}
             value={filters.users ? { value: filters.users, label: filters.users } : null}
           />
           <Select
             options={getOptions('classification')}
             placeholder="Any classification"
             onChange={(selectedOption) => handleSelectChange(selectedOption, 'classification')}
-            className="tasks-table-filter-item tasks-table-filter-input"
+            className={`${styles['tasks-table-filter-item']} ${styles['tasks-table-filter-input']}`}
             value={filters.classification ? { value: filters.classification, label: filters.classification } : null}
           />
           <Select
             options={getOptions('priority')}
             placeholder="Any priority"
             onChange={(selectedOption) => handleSelectChange(selectedOption, 'priority')}
-            className="tasks-table-filter-item tasks-table-filter-input"
+            className={`${styles['tasks-table-filter-item']} ${styles['tasks-table-filter-input']}`}
             value={filters.priority ? { value: filters.priority, label: filters.priority } : null}
           />
           <Select
             options={getOptions('status')}
             placeholder="Any status"
             onChange={(selectedOption) => handleSelectChange(selectedOption, 'status')}
-            className="tasks-table-filter-item tasks-table-filter-input"
+            className={`${styles['tasks-table-filter-item']} ${styles['tasks-table-filter-input']}`}
             value={filters.status ? { value: filters.status, label: filters.status } : null}
           />
           <TextSearchBox
             placeholder="Estimated hours"
-            className="tasks-table-text-search-box"
+            className={styles['tasks-table-text-search-box']}
             searchCallback={() => { }}
           />
           <Checkbox
             value={isActive}
             onChange={() => setActive(!isActive)}
             id="active_checkbox"
-            wrapperClassname="tasks-table-filter-item"
+            wrapperClassname={styles['tasks-table-filter-item']}
             label="Active"
           />
           <Checkbox
             value={isAssigned}
             onChange={() => setAssigned(!isAssigned)}
             id="assign_checkbox"
-            wrapperClassname="tasks-table-filter-item"
+            wrapperClassname={styles['tasks-table-filter-item']}
             label="Assign"
           />
         </div>
 
         <div className='d-flex'>
           <button
-            className="tasks-table-edit-tasks-button"
+            className={styles['tasks-table-edit-tasks-button']}
             onClick={() => setToggleEditTasks(!toggleEditTasks)}
             style={darkMode ? boxStyleDark : boxStyle}
           >
@@ -135,7 +137,7 @@ export function TasksTable({ darkMode, tasks, projectId }) {
           </button>
 
           <button
-            className="tasks-table-clear-filter-button"
+            className={styles['tasks-table-clear-filter-button']}
             onClick={() => resetAllFilters()}
             style={darkMode ? boxStyleDark : boxStyle}
           >

From 317bb821b3fc14d23cde1da7742e0f468e987685 Mon Sep 17 00:00:00 2001
From: Ken Zou <kzou55@gmail.com>
Date: Thu, 20 Aug 2026 16:52:01 -0400
Subject: [PATCH 2/8] refactor: correctly use CSS Modules in WBS component

---
 .../Reports/ProjectReport/ProjectReport.jsx   | 12 +++++------
 .../ProjectReport/ProjectReport.module.css    | 11 ++++++++++
 src/components/Reports/WbsTable/WbsTable.jsx  | 20 +++++++++----------
 .../ReportPage/ReportPage.module.css          | 10 ----------
 4 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/components/Reports/ProjectReport/ProjectReport.jsx b/src/components/Reports/ProjectReport/ProjectReport.jsx
index 9426acfb72..069e154be9 100644
--- a/src/components/Reports/ProjectReport/ProjectReport.jsx
+++ b/src/components/Reports/ProjectReport/ProjectReport.jsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import 'react-datepicker/dist/react-datepicker.css';
 import { useDispatch, useSelector } from 'react-redux';
 import { FiBox } from 'react-icons/fi';
 import {WbsPieChart}  from './WbsPiechart/WbsPieChart';
@@ -16,10 +15,11 @@ import { WbsTable } from '../WbsTable';
 import hasPermission from '../../../utils/permissions';
 import viewWBSpermissionsRequired from '../../../utils/viewWBSpermissionsRequired';
 import { projectReportViewData } from './selectors';
+import { PieChartByProject } from './PiechartByProject/PieChartByProject';
+import 'react-datepicker/dist/react-datepicker.css';
 import '../../Teams/Team.module.css';
-import './ProjectReport.module.css';
+import styles from './ProjectReport.module.css';
 import { boxStyle, boxStyleDark } from '../../../styles';
-import { PieChartByProject } from './PiechartByProject/PieChartByProject';
 
 
 // eslint-disable-next-line import/prefer-default-export
@@ -128,7 +128,7 @@ export function ProjectReport({ match }) {
   };
 
   return (
-    <div className={`container-project-wrapper ${darkMode ? 'bg-oxford-blue' : ''}`}>
+    <div className={`${styles['container-project-wrapper']} ${darkMode ? 'bg-oxford-blue' : ''}`}>
     <ReportPage
       renderProfile={() => (
         <ReportPage.ReportHeader
@@ -142,8 +142,8 @@ export function ProjectReport({ match }) {
       )}
       darkMode={darkMode}
     >
-      <div className={`project-header ${darkMode ? 'bg-yinmn-blue text-light' : ''}`} style={darkMode ? boxStyleDark : boxStyle}>{projectName}</div>
-      <div className="wbs-and-members-blocks-wrapper">
+      <div className={`${styles['project-header']} ${darkMode ? 'bg-yinmn-blue text-light' : ''}`} style={darkMode ? boxStyleDark : boxStyle}>{projectName}</div>
+      <div className={styles['wbs-and-members-blocks-wrapper']}>
         <ReportPage.ReportBlock className="wbs-and-members-blocks" darkMode={darkMode}>
           <Paging totalElementsCount={wbs.WBSItems.length} darkMode={darkMode}>
             <WbsTable wbs={wbs} match={match} canViewWBS={canViewWBS} darkMode={darkMode}/>
diff --git a/src/components/Reports/ProjectReport/ProjectReport.module.css b/src/components/Reports/ProjectReport/ProjectReport.module.css
index fd063ac772..0c358a83cd 100644
--- a/src/components/Reports/ProjectReport/ProjectReport.module.css
+++ b/src/components/Reports/ProjectReport/ProjectReport.module.css
@@ -20,4 +20,15 @@
 
 .pie-chart-checkbox {
   margin-right: 8px; /* Space between checkbox and label */
+}
+
+
+.project-header {
+  font-size: 32px;
+  padding: 5px;
+  text-align: center;
+  background-color: white;
+  border-radius: 20px;
+  box-shadow: 0 0 12px #eae1f6;
+  width: 100%;
 }
\ No newline at end of file
diff --git a/src/components/Reports/WbsTable/WbsTable.jsx b/src/components/Reports/WbsTable/WbsTable.jsx
index dd62153385..768b196443 100644
--- a/src/components/Reports/WbsTable/WbsTable.jsx
+++ b/src/components/Reports/WbsTable/WbsTable.jsx
@@ -1,4 +1,4 @@
-import './WbsTable.module.css';
+import styles from './WbsTable.module.css';
 import Stub from '../../common/Stub/Stub';
 import CopyToClipboard from '../../common/Clipboard/CopyToClipboard';
 
@@ -9,7 +9,7 @@ export function WbsTable({ wbs, skip, take, match, canViewWBS, darkMode }) {
   if (wbs.fetched && wbs.WBSItems.length > 0) {
     WbsList = wbs.WBSItems.slice(skip, skip + take).map((item, index) => (
       <div
-        className="wbs-table-row"
+        className={styles['wbs-table-row']}
         data-testid="wbs-table-row"
         id={`tr_${item._id}`}
         key={item._id}
@@ -19,7 +19,7 @@ export function WbsTable({ wbs, skip, take, match, canViewWBS, darkMode }) {
           {canViewWBS ? (
             <a
               href={`/wbs/tasks/${item._id}/${projectId}/${item.wbsName}`}
-              className={`wbs-table-name-column ${darkMode ? 'text-light' : ''}`}
+              className={`${styles['wbs-table-name-column']} ${darkMode ? 'text-light' : ''}`}
             >
               {item.wbsName}
             </a>
@@ -38,7 +38,7 @@ export function WbsTable({ wbs, skip, take, match, canViewWBS, darkMode }) {
             </div>
           )}
         </div>
-        <div className="wbs-table-id-column">
+        <div className={styles['wbs-table-id-column']}>
           <CopyToClipboard writeText={item._id} message={`Copied "${item._id}".`} />
           {item._id}
         </div>
@@ -47,15 +47,15 @@ export function WbsTable({ wbs, skip, take, match, canViewWBS, darkMode }) {
   }
 
   return (
-    <div className={`wbs-table ${darkMode ? 'text-light' : ''}`}>
+    <div className={`${styles['wbs-table']} ${darkMode ? 'text-light' : ''}`}>
       <h5 style={{ marginBottom: '2.125rem' }} className="wbs-table-title">
         WBS
       </h5>
-      <div className={`reports-table-head-wbs ${darkMode ? 'bg-space-cadet' : ''}`}>
-        <div className="wbs-table-cell">#</div>
-        <div className="wbs-table-cell">Name</div>
-        <div className="wbs-table-cell wbs-table-active-column">Active</div>
-        <div className="wbs-table-cell">ID</div>
+      <div className={`${styles['reports-table-head-wbs']} ${darkMode ? 'bg-space-cadet' : ''}`}>
+        <div className={styles['wbs-table-cell']}>#</div>
+        <div className={styles['wbs-table-cell']}>Name</div>
+        <div className={`${styles['wbs-table-cell']} ${styles['wbs-table-active-column']}`}>Active</div>
+        <div className={styles['wbs-table-cell']}>ID</div>
       </div>
       <div>{WbsList.length > 0 ? WbsList : <Stub color={darkMode ? 'white' : ''} />}</div>
     </div>
diff --git a/src/components/Reports/sharedComponents/ReportPage/ReportPage.module.css b/src/components/Reports/sharedComponents/ReportPage/ReportPage.module.css
index d4c39891ae..39bca61cef 100644
--- a/src/components/Reports/sharedComponents/ReportPage/ReportPage.module.css
+++ b/src/components/Reports/sharedComponents/ReportPage/ReportPage.module.css
@@ -41,13 +41,3 @@
     padding: 20px;
   }
 }
-
-.project-header {
-  font-size: 32px;
-  padding: 5px;
-  text-align: center;
-  background-color: white;
-  border-radius: 20px;
-  box-shadow: 0 0 12px #eae1f6;
-  width: 100%;
-}
\ No newline at end of file

From a007de5e1204acf2f72ee497ec0ea361471b1470 Mon Sep 17 00:00:00 2001
From: Ken Zou <kzou55@gmail.com>
Date: Thu, 27 Aug 2026 20:15:18 -0400
Subject: [PATCH 3/8] fix: align tasks table styling with WBS/member tables and
 fix filter dark mode

---
 .../Reports/ProjectReport/ProjectReport.jsx   |  2 +-
 .../Reports/TasksDetail/TasksDetail.jsx       |  6 +-
 .../TasksDetail/TasksDetail.module.css        | 60 ++++++++++++++++---
 .../Reports/TasksTable/TasksTable.jsx         | 23 ++++---
 .../Reports/TasksTable/TasksTable.module.css  | 44 +++++++++++++-
 5 files changed, 114 insertions(+), 21 deletions(-)

diff --git a/src/components/Reports/ProjectReport/ProjectReport.jsx b/src/components/Reports/ProjectReport/ProjectReport.jsx
index 069e154be9..1c2db40b2d 100644
--- a/src/components/Reports/ProjectReport/ProjectReport.jsx
+++ b/src/components/Reports/ProjectReport/ProjectReport.jsx
@@ -19,6 +19,7 @@ import { PieChartByProject } from './PiechartByProject/PieChartByProject';
 import 'react-datepicker/dist/react-datepicker.css';
 import '../../Teams/Team.module.css';
 import styles from './ProjectReport.module.css';
+
 import { boxStyle, boxStyleDark } from '../../../styles';
 
 
@@ -142,7 +143,6 @@ export function ProjectReport({ match }) {
       )}
       darkMode={darkMode}
     >
-      <div className={`${styles['project-header']} ${darkMode ? 'bg-yinmn-blue text-light' : ''}`} style={darkMode ? boxStyleDark : boxStyle}>{projectName}</div>
       <div className={styles['wbs-and-members-blocks-wrapper']}>
         <ReportPage.ReportBlock className="wbs-and-members-blocks" darkMode={darkMode}>
           <Paging totalElementsCount={wbs.WBSItems.length} darkMode={darkMode}>
diff --git a/src/components/Reports/TasksDetail/TasksDetail.jsx b/src/components/Reports/TasksDetail/TasksDetail.jsx
index 30711a72c2..6c6550bbf8 100644
--- a/src/components/Reports/TasksDetail/TasksDetail.jsx
+++ b/src/components/Reports/TasksDetail/TasksDetail.jsx
@@ -77,7 +77,7 @@ export function TasksDetail(props) {
 
 
   const tasksList = filteredTasks.map((task, index) => (
-    <tr key={task._id} className={darkMode ? styles['dark-mode-row']  : ''}>
+    <tr key={task._id} className={`${styles['tasks-detail-table-row']} ${darkMode ? styles['dark-mode-row'] : ''}`}>
       <td>{index + 1}</td>
       <td className={styles['tasks-detail-task-name']}>{truncate(task.taskName, 20)}</td>
       <td className={styles['collapse-column']}>{task.priority}</td>
@@ -140,8 +140,8 @@ export function TasksDetail(props) {
             <th>Status</th>
             <th className={styles['tasks-detail-center-cells']}>Resources</th>
             <th className={styles['tasks-detail-center-cells']}>Active</th>
-            <th className={`${styles['tasks-detail-center-cells']} ${styles[`collapse-column`]}`}>Assign</th>
-            <th className={`${styles['tasks-detail-center-cells']} ${styles[`collapse-column`]}`}>Class</th>
+            <th className={`${styles['tasks-detail-center-cells']} ${styles['collapse-column']}`}>Assign</th>
+            <th className={`${styles['tasks-detail-center-cells']} ${styles['collapse-column']}`}>Class</th>
             <th className={styles['tasks-detail-center-cells']}>Estimated Hours</th>
             <th className={styles['collapse-column']}>Start Date</th>
             <th className={styles['collapse-column']}>End Date</th>
diff --git a/src/components/Reports/TasksDetail/TasksDetail.module.css b/src/components/Reports/TasksDetail/TasksDetail.module.css
index 679dd3959a..6092a7d809 100644
--- a/src/components/Reports/TasksDetail/TasksDetail.module.css
+++ b/src/components/Reports/TasksDetail/TasksDetail.module.css
@@ -14,17 +14,52 @@
   min-width: 800px; /* Minimum width to maintain table layout on smaller screens */
 }
 
-.tasks-detail-table th, .tasks-detail-table td {
-  padding: 5px;
-  border: 1px solid #ddd;
+
+.tasks-detail-table th,
+.tasks-detail-table td {
+  padding: 0 16px;
+  border: none;
   text-align: left;
+  vertical-align: middle;
 }
 
 .tasks-detail-table-head {
-  background-color: #f8f9fa;
+  background-color: #eee7f8;
   font-weight: bold;
 }
 
+
+.tasks-detail-table-head tr {
+  border-bottom: 3px solid #f8f7f8;
+}
+
+.tasks-detail-table-head th {
+  height: 42px;
+  padding: 0 16px;
+  border: none;
+  text-align: left;
+  vertical-align: middle;
+}
+
+
+
+.tasks-detail-table-head th:first-child {
+  border-radius: 4px 0 0 4px;
+}
+
+.tasks-detail-table-head th:last-child {
+  border-radius: 0 4px 4px 0;
+}
+
+
+
+
+.tasks-detail-table-row {
+  border-bottom: 3px solid #f8f7f8;
+  text-align: left;
+}
+
+
 .tasks-detail-center-cells {
   text-align: center;
 }
@@ -46,19 +81,25 @@
   color: #fff;
 }
 
+
+.dark-mode-row:hover {
+  background-color: #111831;
+  color: #fff;
+}
+
 /* Responsive design */
+
 @media screen and (width <= 1100px) {
   .collapse-column {
     display: none;
   }
-}
 
-@media screen and (width <= 1100px) {
   .tasks-detail-table {
     min-width: 600px;
   }
 
-  .tasks-detail-table th, .tasks-detail-table td {
+  .tasks-detail-table th,
+  .tasks-detail-table td {
     padding: 5px;
     font-size: 12px;
   }
@@ -73,7 +114,8 @@
     min-width: 400px;
   }
 
-  .tasks-detail-table th, .tasks-detail-table td {
+  .tasks-detail-table th,
+  .tasks-detail-table td {
     padding: 2px;
     font-size: 10px;
   }
@@ -85,4 +127,4 @@
   .tasks-detail-center-cells {
     font-size: 10px;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Reports/TasksTable/TasksTable.jsx b/src/components/Reports/TasksTable/TasksTable.jsx
index 89f83a4a01..9cd9854005 100644
--- a/src/components/Reports/TasksTable/TasksTable.jsx
+++ b/src/components/Reports/TasksTable/TasksTable.jsx
@@ -14,7 +14,6 @@ import { TasksDetail } from '../TasksDetail';
 import { stubArray } from 'lodash';
 
 export function TasksTable({ darkMode, tasks, projectId }) {
-  console.log(darkMode)
   const [isActive, setActive] = useState(true);
   const [isAssigned, setAssigned] = useState(true);
   const [toggleEditTasks, setToggleEditTasks] = useState(false);
@@ -82,28 +81,36 @@ export function TasksTable({ darkMode, tasks, projectId }) {
             options={getUserOptions()}
             placeholder="Any user"
             onChange={(selectedOption) => handleSelectChange(selectedOption, 'users')}
-            className={`${styles['tasks-table-filter-item']} ${styles['tasks-table-filter-input']}`}
+            className={`${styles['tasks-table-filter-item']} ${styles['tasks-table-filter-input']} ${darkMode ? styles['dark-mode-select'] : ''}`}
+            classNamePrefix="select"
+            menuPortalTarget={document.body}
             value={filters.users ? { value: filters.users, label: filters.users } : null}
           />
           <Select
             options={getOptions('classification')}
             placeholder="Any classification"
             onChange={(selectedOption) => handleSelectChange(selectedOption, 'classification')}
-            className={`${styles['tasks-table-filter-item']} ${styles['tasks-table-filter-input']}`}
+            className={`${styles['tasks-table-filter-item']} ${styles['tasks-table-filter-input']} ${darkMode ? styles['dark-mode-select'] : ''}`}
+            classNamePrefix="select"
+            menuPortalTarget={document.body}
             value={filters.classification ? { value: filters.classification, label: filters.classification } : null}
           />
           <Select
             options={getOptions('priority')}
             placeholder="Any priority"
             onChange={(selectedOption) => handleSelectChange(selectedOption, 'priority')}
-            className={`${styles['tasks-table-filter-item']} ${styles['tasks-table-filter-input']}`}
+            className={`${styles['tasks-table-filter-item']} ${styles['tasks-table-filter-input']} ${darkMode ? styles['dark-mode-select'] : ''}`}
+            classNamePrefix="select"
+            menuPortalTarget={document.body}
             value={filters.priority ? { value: filters.priority, label: filters.priority } : null}
           />
           <Select
             options={getOptions('status')}
             placeholder="Any status"
             onChange={(selectedOption) => handleSelectChange(selectedOption, 'status')}
-            className={`${styles['tasks-table-filter-item']} ${styles['tasks-table-filter-input']}`}
+            className={`${styles['tasks-table-filter-item']} ${styles['tasks-table-filter-input']} ${darkMode ? styles['dark-mode-select'] : ''}`}
+            classNamePrefix="select"
+            menuPortalTarget={document.body}
             value={filters.status ? { value: filters.status, label: filters.status } : null}
           />
           <TextSearchBox
@@ -116,6 +123,7 @@ export function TasksTable({ darkMode, tasks, projectId }) {
             onChange={() => setActive(!isActive)}
             id="active_checkbox"
             wrapperClassname={styles['tasks-table-filter-item']}
+            backgroundColorCN={darkMode ? styles['dark-mode-checkbox'] : ''}
             label="Active"
           />
           <Checkbox
@@ -123,13 +131,14 @@ export function TasksTable({ darkMode, tasks, projectId }) {
             onChange={() => setAssigned(!isAssigned)}
             id="assign_checkbox"
             wrapperClassname={styles['tasks-table-filter-item']}
+            backgroundColorCN={darkMode ? styles['dark-mode-checkbox'] : ''}
             label="Assign"
           />
         </div>
 
         <div className='d-flex'>
           <button
-            className={styles['tasks-table-edit-tasks-button']}
+            className={`${styles['tasks-table-edit-tasks-button']} ${darkMode ? styles['dark-mode-button'] : ''} `}
             onClick={() => setToggleEditTasks(!toggleEditTasks)}
             style={darkMode ? boxStyleDark : boxStyle}
           >
@@ -137,7 +146,7 @@ export function TasksTable({ darkMode, tasks, projectId }) {
           </button>
 
           <button
-            className={styles['tasks-table-clear-filter-button']}
+            className={`${styles['tasks-table-clear-filter-button']} ${darkMode ? styles['dark-mode-button'] : ''}`}
             onClick={() => resetAllFilters()}
             style={darkMode ? boxStyleDark : boxStyle}
           >
diff --git a/src/components/Reports/TasksTable/TasksTable.module.css b/src/components/Reports/TasksTable/TasksTable.module.css
index 402a245353..d945cf1ff1 100644
--- a/src/components/Reports/TasksTable/TasksTable.module.css
+++ b/src/components/Reports/TasksTable/TasksTable.module.css
@@ -74,6 +74,7 @@
   outline-color: #0075ff;
 }
 
+
 /* Clear filter button styling */
 .tasks-table-clear-filter-button {
   display: block;
@@ -103,6 +104,10 @@
   cursor: pointer;
 }
 
+.dark-mode-button {
+  background-color: #3a506b;
+}
+
 .tasks-table-clear-filter-button:hover,
 .tasks-table-clear-filter-button:focus,
 .tasks-table-clear-filter-button:active {
@@ -115,4 +120,41 @@
 .tasks-table-edit-tasks-button:active {
   border-color: #5750db;
   outline-color: #5750db;
-}
\ No newline at end of file
+}
+
+/* Styling React Select Element */
+
+.tasks-table-filter-input.dark-mode-select :global(.select__control) {
+  background-color: #3a506b !important;
+  border-color: #d1cfd4;
+}
+
+.dark-mode-select :global(.select__option) {
+  background-color: #3a506b;
+  color: #fff;
+}
+
+:global(body.dark-mode .select__option:hover),
+:global(body.dark-mode .select__option--is-focused),
+:global(body.bm-dashboard-dark .select__option:hover),
+:global(body.bm-dashboard-dark .select__option--is-focused) {
+  background-color: #111831 !important;
+}
+
+.dark-mode-select :global(.select__placeholder) {
+  color: #fff;
+}
+
+.dark-mode-select :global(.select__single-value) {
+  color: #fff;
+}
+
+:global(body.dark-mode .select__menu),
+:global(body.bm-dashboard-dark .select__menu) {
+  background-color: #3a506b !important;
+}
+
+/* Styling Checkbox elements */
+.tasks-table-filter-item.dark-mode-checkbox {
+  background-color: #3a506b;
+}

From 16dcb95a7be16490f6554caeb65a779c9fec0ce0 Mon Sep 17 00:00:00 2001
From: Ken Zou <kzou55@gmail.com>
Date: Fri, 28 Aug 2026 18:12:01 -0400
Subject: [PATCH 4/8] fixes and improves dark mode styling for edit/suggest
 task form component

---
 .../WBS/WBSDetail/EditTask/EditTaskModal.jsx  | 19 +++-----
 .../WBS/WBSDetail/components/TagsSearch.jsx   | 11 +++--
 .../components/TagsSearch.module.css          | 15 +++++++
 .../Projects/WBS/WBSDetail/wbs.module.css     | 43 +++++++++++++++++++
 4 files changed, 69 insertions(+), 19 deletions(-)

diff --git a/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx b/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx
index e574004327..a028ed0b8a 100644
--- a/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx
+++ b/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx
@@ -66,15 +66,15 @@ function DateInput({ id, ariaLabel, placeholder, value, onChange, disabled, dark
         onFocus={() => !disabled && setIsOpen(true)}
         readOnly
         disabled={disabled}
-        className={disabled && darkMode ? 'bg-darkmode-liblack text-light border-0' : ''}
+        className={darkMode ? styles.darkDateInput : ''}
         style={{ 
           cursor: disabled ? 'default' : 'pointer',
-          backgroundColor: disabled ? (darkMode ? '' : '#e9ecef') : 'white',
+          backgroundColor: disabled ? (darkMode ? '#1c1c1c' : '#e9ecef') : undefined,
           opacity: 1
         }}
       />
       {isOpen && !disabled && (
-        <div style={{ position: 'absolute', right: 0, overflow: 'auto', zIndex: 10, backgroundColor: 'white', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', borderRadius: '4px' }}>
+        <div style={{ position: 'absolute', right: 0, overflow: 'auto', zIndex: 10, backgroundColor: darkMode ? '#1e293b' : 'white', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', borderRadius: '4px' }}>
           <DayPicker 
             mode="single"
             selected={selectedDate}
@@ -84,14 +84,7 @@ function DateInput({ id, ariaLabel, placeholder, value, onChange, disabled, dark
           <button
             type="button"
             onClick={() => setIsOpen(false)}
-            style={{ 
-              width: '100%', 
-              padding: '8px', 
-              border: 'none', 
-              borderTop: '1px solid #ddd',
-              background: '#f5f5f5',
-              cursor: 'pointer'
-            }}
+            className={`${styles.datePickerClose} ${darkMode ? styles.datePickerCloseDark : ''}`}
           >
             Close
           </button>
@@ -491,7 +484,7 @@ function EditTaskModal(props) {
         </ModalHeader>
         <ModalBody className={darkMode ? 'bg-yinmn-blue dark-mode no-hover' : ''}>
           <table
-            className={`table table-bordered responsive
+            className={`table table-bordered responsive ${darkMode ? styles.editTaskTableDark : ''}
             ${canUpdateTask || canSuggestTask ? null : 'disable-div'} 
             ${darkMode ? 'text-light' : ''}`}
           >
@@ -517,7 +510,7 @@ function EditTaskModal(props) {
                       rows="2"
                       type="text"
                       className={`task-name border border-dark rounded ${
-                        darkMode ? 'bg-darkmode-liblack text-light border-0' : ''
+                        darkMode ? `${styles.editTaskTextareaDark} text-light` : ''
                       }`}
                       onChange={e => setTaskName(e.target.value)}
                       onKeyPress={e => setTaskName(e.target.value)}
diff --git a/src/components/Projects/WBS/WBSDetail/components/TagsSearch.jsx b/src/components/Projects/WBS/WBSDetail/components/TagsSearch.jsx
index 3d14ef2448..2005438468 100644
--- a/src/components/Projects/WBS/WBSDetail/components/TagsSearch.jsx
+++ b/src/components/Projects/WBS/WBSDetail/components/TagsSearch.jsx
@@ -123,15 +123,15 @@ function TagsSearch(props) {
           )}
 
           {shouldShowDropdown && (
-            <ul className={`my-element dropdown-menu d-flex flex-column align-items-start justify-content-start w-100 ${styles.scrollbar} shadow-lg rounded-3 position-absolute top-100 start-0 z-3 bg-light ${styles['scrollable-menu']}`}>
+            <ul className={`my-element dropdown-menu d-flex flex-column align-items-start justify-content-start w-100 ${styles.scrollbar} shadow-lg rounded-3 position-absolute top-100 start-0 z-3 ${darkMode ? styles.darkDropdown : 'bg-light'} ${styles['scrollable-menu']}`}>
               {filteredMembers.map((member, index) => (
                 <li
-                key={member._id || member.userID || index}
-                className="dropdown-item border-bottom fs-6 w-100 p-1"
-              >
+                key={member._id || member.userID || index} 
+                className={`dropdown-item border-bottom fs-6 w-100 p-1 ${darkMode ? styles.darkDropdownItem : ''}`}
+                >
                 <button
                   type="button"
-                  className="btn w-100 text-left p-1 text-dark"
+                  className={`btn w-100 text-left p-1 ${darkMode ? 'text-light' : 'text-dark'}`}
                   onMouseDown={event => handleClick(event, member)}
                 >
                   {`${member.firstName || member.first} ${member.lastName || member.last}`}
@@ -142,7 +142,6 @@ function TagsSearch(props) {
           )}
         </div>
       </div>
-
       <div className="d-flex flex-wrap align-items-start justify-content-start">
         {resourceItems?.map((elm, index) => (
           <ul
diff --git a/src/components/Projects/WBS/WBSDetail/components/TagsSearch.module.css b/src/components/Projects/WBS/WBSDetail/components/TagsSearch.module.css
index 9c9ca98b66..0931553468 100644
--- a/src/components/Projects/WBS/WBSDetail/components/TagsSearch.module.css
+++ b/src/components/Projects/WBS/WBSDetail/components/TagsSearch.module.css
@@ -13,3 +13,18 @@
   margin-bottom: 0 !important;
   padding-bottom: 0 !important;
 }
+
+
+:global(body.dark-mode:not(.no-global-theme)) .darkDropdown {
+  background-color: #1e293b;
+}
+
+.darkDropdownItem {
+  background-color: #1e293b;
+  color: #ffffff;
+}
+
+.darkDropdownItem:hover {
+  background-color: #111831;
+  color: #ffffff;
+}
\ No newline at end of file
diff --git a/src/components/Projects/WBS/WBSDetail/wbs.module.css b/src/components/Projects/WBS/WBSDetail/wbs.module.css
index a32d7c0af7..caac3b3bdb 100644
--- a/src/components/Projects/WBS/WBSDetail/wbs.module.css
+++ b/src/components/Projects/WBS/WBSDetail/wbs.module.css
@@ -342,6 +342,17 @@
   margin: 5px;
 }
 
+
+.datePicker :global(.rdp-day:hover) {
+  background-color: #111831;
+  color: #fff;
+}
+
+.datePicker :global(.rdp-button:hover:not([disabled])) {
+  background-color: #2d3748;
+  color: #fff;
+}
+
 @media (width <= 968px) {
   .wbs-button-group {
     align-items: flex-start;
@@ -393,4 +404,36 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+}
+
+.editTaskTableDark tr:hover {
+  background: #111831;
+}
+
+.editTaskTextareaDark {
+  background-color: #1e293b;
+  border: 1px solid #334155;
+}
+
+.darkDateInput {
+  background-color: #1e293b;
+  color: #fff;
+}
+
+
+.datePickerClose {
+  width: 100%;
+  padding: 8px;
+  border: none;
+  background-color: #f5f5f5;
+  cursor: pointer;
+}
+
+.datePickerCloseDark {
+  background-color: #1e293b;
+  color: #fff;
+}
+
+.datePickerCloseDark:hover {
+  background-color: #111831;
 }
\ No newline at end of file

From 176a4bdd92ea778f29fcd5e339d0c6ff08ad3330 Mon Sep 17 00:00:00 2001
From: Ken Zou <kzou55@gmail.com>
Date: Fri, 28 Aug 2026 18:47:59 -0400
Subject: [PATCH 5/8] fixes and improves dark mode styling for edit/suggest
 task form component

---
 .../Reports/ProjectReport/__tests__/ProjectReport.test.jsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Reports/ProjectReport/__tests__/ProjectReport.test.jsx b/src/components/Reports/ProjectReport/__tests__/ProjectReport.test.jsx
index ff8e6f182f..a0d1e17847 100644
--- a/src/components/Reports/ProjectReport/__tests__/ProjectReport.test.jsx
+++ b/src/components/Reports/ProjectReport/__tests__/ProjectReport.test.jsx
@@ -50,7 +50,7 @@ describe('ProjectReport component', () => {
     );
   });
 
-  it('should render the project name three times', async () => {
+  it('should render the project name two times', async () => {
     axios.get.mockResolvedValue({
       status: 200,
     });
@@ -62,7 +62,7 @@ describe('ProjectReport component', () => {
     );
 
     const projectNameElements = screen.getAllByText('project 1');
-    expect(projectNameElements).toHaveLength(3);
+    expect(projectNameElements).toHaveLength(2);
   });
 
   it('check if getProjectDetail works as expected', async () => {

From b0e7bc3a6a0e73bd62964c171014859222e7efb5 Mon Sep 17 00:00:00 2001
From: Ken Zou <kzou55@gmail.com>
Date: Fri, 4 Sep 2026 17:16:22 -0400
Subject: [PATCH 6/8] style: align report tables and improve header spacing

---
 .../ProjectReport/ProjectReport.module.css    |  1 +
 .../TasksDetail/TasksDetail.module.css        | 32 ++++++++-----------
 2 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/components/Reports/ProjectReport/ProjectReport.module.css b/src/components/Reports/ProjectReport/ProjectReport.module.css
index 0c358a83cd..1f077c2e2f 100644
--- a/src/components/Reports/ProjectReport/ProjectReport.module.css
+++ b/src/components/Reports/ProjectReport/ProjectReport.module.css
@@ -2,6 +2,7 @@
   display: grid;
   grid-auto-flow: row;
   row-gap: 40px;
+  margin-top: 32px;
 }
 
 @media (width >= 1180px) {
diff --git a/src/components/Reports/TasksDetail/TasksDetail.module.css b/src/components/Reports/TasksDetail/TasksDetail.module.css
index 6092a7d809..1ac5e1a27a 100644
--- a/src/components/Reports/TasksDetail/TasksDetail.module.css
+++ b/src/components/Reports/TasksDetail/TasksDetail.module.css
@@ -1,10 +1,11 @@
 /* TasksTable.css */
+
 .tasks-block {
   width: 100%;
   overflow-x: auto;
 }
 
-.tasks-detail-total{
+.tasks-detail-total {
   float: left;
 }
 
@@ -14,10 +15,9 @@
   min-width: 800px; /* Minimum width to maintain table layout on smaller screens */
 }
 
-
 .tasks-detail-table th,
 .tasks-detail-table td {
-  padding: 0 16px;
+  padding: 10px 16px;
   border: none;
   text-align: left;
   vertical-align: middle;
@@ -28,11 +28,19 @@
   font-weight: bold;
 }
 
+.tasks-detail-table-row {
+  border-bottom: 3px solid #f8f7f8;
+  text-align: left;
+}
 
 .tasks-detail-table-head tr {
   border-bottom: 3px solid #f8f7f8;
 }
 
+.tasks-detail-table-head tr:hover {
+  background-color: #eee7f8;
+}
+
 .tasks-detail-table-head th {
   height: 42px;
   padding: 0 16px;
@@ -41,8 +49,6 @@
   vertical-align: middle;
 }
 
-
-
 .tasks-detail-table-head th:first-child {
   border-radius: 4px 0 0 4px;
 }
@@ -51,15 +57,6 @@
   border-radius: 0 4px 4px 0;
 }
 
-
-
-
-.tasks-detail-table-row {
-  border-bottom: 3px solid #f8f7f8;
-  text-align: left;
-}
-
-
 .tasks-detail-center-cells {
   text-align: center;
 }
@@ -77,13 +74,12 @@
 }
 
 .dark-mode-row {
-  background-color: #3A506B ;
+  background-color: #1a2639;
   color: #fff;
 }
 
-
 .dark-mode-row:hover {
-  background-color: #111831;
+  background-color: #3a506b;
   color: #fff;
 }
 
@@ -127,4 +123,4 @@
   .tasks-detail-center-cells {
     font-size: 10px;
   }
-}
+}
\ No newline at end of file

From 3e2735388cf79c47bff947489e54474ee0113539 Mon Sep 17 00:00:00 2001
From: Ken Zou <kzou55@gmail.com>
Date: Fri, 4 Sep 2026 18:00:30 -0400
Subject: [PATCH 7/8] remove debug console log

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

diff --git a/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx b/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx
index 655b2664d4..a9ba9bcfa3 100644
--- a/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx
+++ b/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx
@@ -6,7 +6,6 @@ import { Stub } from '../../common/Stub';
 import styles from './ProjectMemberTable.module.css';
 
 export function ProjectMemberTable({ projectMembers, skip, take, handleMemberCount, darkMode, counts }) {
-  console.log('skip:', skip, 'take:', take);
   const [allMemberList, setAllMemberList] = useState([]);
   const [activeMemberList, setActiveMemberList] = useState([]);
   const [memberFilter, setMemberFilter] = useState('active');

From 13c865344af7d79400db0937114b24358d07d8d3 Mon Sep 17 00:00:00 2001
From: Ken Zou <kzou55@gmail.com>
Date: Fri, 4 Sep 2026 20:48:02 -0400
Subject: [PATCH 8/8] reduce SonarCloud cognitive complexity and remove unused
 imports

---
 .../Reports/ProjectReport/ProjectReport.jsx   |  3 ---
 .../Reports/TasksTable/TasksTable.jsx         | 27 +++++++++++--------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/components/Reports/ProjectReport/ProjectReport.jsx b/src/components/Reports/ProjectReport/ProjectReport.jsx
index 1c2db40b2d..3ed706512b 100644
--- a/src/components/Reports/ProjectReport/ProjectReport.jsx
+++ b/src/components/Reports/ProjectReport/ProjectReport.jsx
@@ -20,9 +20,6 @@ import 'react-datepicker/dist/react-datepicker.css';
 import '../../Teams/Team.module.css';
 import styles from './ProjectReport.module.css';
 
-import { boxStyle, boxStyleDark } from '../../../styles';
-
-
 // eslint-disable-next-line import/prefer-default-export
 export function ProjectReport({ match }) {
   const [memberCount, setMemberCount] = useState(0);
diff --git a/src/components/Reports/TasksTable/TasksTable.jsx b/src/components/Reports/TasksTable/TasksTable.jsx
index 9cd9854005..5b7a94c873 100644
--- a/src/components/Reports/TasksTable/TasksTable.jsx
+++ b/src/components/Reports/TasksTable/TasksTable.jsx
@@ -11,7 +11,6 @@ import { Checkbox } from '~/components/common/Checkbox';
 import TextSearchBox from '~/components/UserManagement/TextSearchBox';
 import { boxStyle, boxStyleDark } from '~/styles';
 import { TasksDetail } from '../TasksDetail';
-import { stubArray } from 'lodash';
 
 export function TasksTable({ darkMode, tasks, projectId }) {
   const [isActive, setActive] = useState(true);
@@ -24,6 +23,12 @@ export function TasksTable({ darkMode, tasks, projectId }) {
     users: '',
   });
 
+  // Derived values / constants
+  const darkModeSelectClass = darkMode ? styles['dark-mode-select'] : '';
+  const darkModeCheckboxClass = darkMode ? styles['dark-mode-checkbox'] : '';
+  const darkModeButtonClass = darkMode ? styles['dark-mode-button'] : '';
+  const currentBoxStyle = darkMode ? boxStyleDark : boxStyle;
+
   const userRef = useRef(null);
 
   useEffect(() => {
@@ -81,7 +86,7 @@ export function TasksTable({ darkMode, tasks, projectId }) {
             options={getUserOptions()}
             placeholder="Any user"
             onChange={(selectedOption) => handleSelectChange(selectedOption, 'users')}
-            className={`${styles['tasks-table-filter-item']} ${styles['tasks-table-filter-input']} ${darkMode ? styles['dark-mode-select'] : ''}`}
+            className={`${styles['tasks-table-filter-item']} ${styles['tasks-table-filter-input']} ${darkModeSelectClass}`}
             classNamePrefix="select"
             menuPortalTarget={document.body}
             value={filters.users ? { value: filters.users, label: filters.users } : null}
@@ -90,7 +95,7 @@ export function TasksTable({ darkMode, tasks, projectId }) {
             options={getOptions('classification')}
             placeholder="Any classification"
             onChange={(selectedOption) => handleSelectChange(selectedOption, 'classification')}
-            className={`${styles['tasks-table-filter-item']} ${styles['tasks-table-filter-input']} ${darkMode ? styles['dark-mode-select'] : ''}`}
+            className={`${styles['tasks-table-filter-item']} ${styles['tasks-table-filter-input']} ${darkModeSelectClass}`}
             classNamePrefix="select"
             menuPortalTarget={document.body}
             value={filters.classification ? { value: filters.classification, label: filters.classification } : null}
@@ -99,7 +104,7 @@ export function TasksTable({ darkMode, tasks, projectId }) {
             options={getOptions('priority')}
             placeholder="Any priority"
             onChange={(selectedOption) => handleSelectChange(selectedOption, 'priority')}
-            className={`${styles['tasks-table-filter-item']} ${styles['tasks-table-filter-input']} ${darkMode ? styles['dark-mode-select'] : ''}`}
+            className={`${styles['tasks-table-filter-item']} ${styles['tasks-table-filter-input']} ${darkModeSelectClass}`}
             classNamePrefix="select"
             menuPortalTarget={document.body}
             value={filters.priority ? { value: filters.priority, label: filters.priority } : null}
@@ -108,7 +113,7 @@ export function TasksTable({ darkMode, tasks, projectId }) {
             options={getOptions('status')}
             placeholder="Any status"
             onChange={(selectedOption) => handleSelectChange(selectedOption, 'status')}
-            className={`${styles['tasks-table-filter-item']} ${styles['tasks-table-filter-input']} ${darkMode ? styles['dark-mode-select'] : ''}`}
+            className={`${styles['tasks-table-filter-item']} ${styles['tasks-table-filter-input']} ${darkModeSelectClass}`}
             classNamePrefix="select"
             menuPortalTarget={document.body}
             value={filters.status ? { value: filters.status, label: filters.status } : null}
@@ -123,7 +128,7 @@ export function TasksTable({ darkMode, tasks, projectId }) {
             onChange={() => setActive(!isActive)}
             id="active_checkbox"
             wrapperClassname={styles['tasks-table-filter-item']}
-            backgroundColorCN={darkMode ? styles['dark-mode-checkbox'] : ''}
+            backgroundColorCN={darkModeCheckboxClass}
             label="Active"
           />
           <Checkbox
@@ -131,24 +136,24 @@ export function TasksTable({ darkMode, tasks, projectId }) {
             onChange={() => setAssigned(!isAssigned)}
             id="assign_checkbox"
             wrapperClassname={styles['tasks-table-filter-item']}
-            backgroundColorCN={darkMode ? styles['dark-mode-checkbox'] : ''}
+            backgroundColorCN={darkModeCheckboxClass}
             label="Assign"
           />
         </div>
 
         <div className='d-flex'>
           <button
-            className={`${styles['tasks-table-edit-tasks-button']} ${darkMode ? styles['dark-mode-button'] : ''} `}
+            className={`${styles['tasks-table-edit-tasks-button']} ${darkModeButtonClass}`}
             onClick={() => setToggleEditTasks(!toggleEditTasks)}
-            style={darkMode ? boxStyleDark : boxStyle}
+            style={currentBoxStyle}
           >
             Edit Tasks
           </button>
 
           <button
-            className={`${styles['tasks-table-clear-filter-button']} ${darkMode ? styles['dark-mode-button'] : ''}`}
+            className={`${styles['tasks-table-clear-filter-button']} ${darkModeButtonClass}`}
             onClick={() => resetAllFilters()}
-            style={darkMode ? boxStyleDark : boxStyle}
+            style={currentBoxStyle}
           >
             Clear filters
           </button>