From 622a2e44342c3f8ccd7db1b31a1a57db174e3f93 Mon Sep 17 00:00:00 2001
From: Aswin Tony <aswintony@Aswins-MacBook-Pro.local>
Date: Tue, 16 Dec 2025 18:47:47 -0500
Subject: [PATCH 1/3] Add Rental Tracking dropdown section to Total
 Construction Dashboard

---
 .../WeeklyProjectSummary.jsx                     | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
index c91ed659d1..87f36d484a 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
@@ -365,6 +365,22 @@ function WeeklyProjectSummary() {
           );
         }),
       },
+      {
+        title: 'Rental Tracking',
+        key: 'Rental Tracking',
+        className: 'half', // adjust if Figma shows full width
+        content: [1, 2].map((_, index) => {
+          const uniqueId = uuidv4();
+          return (
+            <div
+              key={uniqueId}
+              className={`${styles.weeklyProjectSummaryCard} ${styles.normalCard}`}
+            >
+              📊 Card
+            </div>
+          );
+        }),
+      },
       {
         title: 'Financials Tracking',
         key: 'Financials Tracking',

From 6a15e6d1675e37077646b5afc6da31bdbede2637 Mon Sep 17 00:00:00 2001
From: Aswin Tony <aswintony@Aswins-MacBook-Pro.local>
Date: Tue, 16 Dec 2025 19:38:34 -0500
Subject: [PATCH 2/3] Fix dark mode dropdown and input text visibility in
 Returned Late chart

---
 .../RentalChart/ReturnedLateChart.jsx         |  6 +--
 .../RentalChart/ReturnedLateChart.module.css  | 53 ++++++++++++++++---
 .../WeeklyProjectSummary.jsx                  | 30 +++++++----
 3 files changed, 69 insertions(+), 20 deletions(-)

diff --git a/src/components/BMDashboard/RentalChart/ReturnedLateChart.jsx b/src/components/BMDashboard/RentalChart/ReturnedLateChart.jsx
index 2e686f5a73..f58932e326 100644
--- a/src/components/BMDashboard/RentalChart/ReturnedLateChart.jsx
+++ b/src/components/BMDashboard/RentalChart/ReturnedLateChart.jsx
@@ -249,10 +249,10 @@ export default function ReturnedLateChart() {
             className={styles['returned-late-date-picker']}
           />
         </div>
-        <div className={styles['returned-late-filter-group']}>
+        <div className={`${styles['returned-late-filter-group']}`}>
           <label
             htmlFor="end-date-picker"
-            className={`${styles['returned-late-filter-label']} ${darkMode ? 'text-white' : ''}`}
+            className={`${styles['returned-late-filter-label']}${darkMode ? 'text-white' : ''}`}
           >
             To:
           </label>
@@ -260,7 +260,7 @@ export default function ReturnedLateChart() {
             id="end-date-picker"
             selected={dateRange.endDate}
             onChange={handleEndDateChange}
-            className={styles['returned-late-date-picker']}
+            className={`${styles['returned-late-date-picker']}${darkMode ? 'text-white' : ''}`}
           />
         </div>
       </div>
diff --git a/src/components/BMDashboard/RentalChart/ReturnedLateChart.module.css b/src/components/BMDashboard/RentalChart/ReturnedLateChart.module.css
index 6fce41c6d0..2a4f8b9dc5 100644
--- a/src/components/BMDashboard/RentalChart/ReturnedLateChart.module.css
+++ b/src/components/BMDashboard/RentalChart/ReturnedLateChart.module.css
@@ -9,6 +9,11 @@
   font-weight: bold;
 }
 
+/* Dark mode title */
+.bg-oxford-blue .returned-late-chart h1 {
+  color: #ffffff;
+}
+
 .returned-late-filters {
   display: flex;
   gap: 20px;
@@ -28,6 +33,11 @@
   color: #333;
 }
 
+/* Dark mode labels */
+.bg-oxford-blue .returned-late-filter-label {
+  color: #ffffff;
+}
+
 .returned-late-project-select {
   padding: 8px;
   min-width: 180px;
@@ -52,6 +62,7 @@
   position: relative;
 }
 
+/* Loading state */
 .returned-late-loading {
   display: flex;
   justify-content: center;
@@ -61,15 +72,22 @@
   color: #666;
 }
 
+.bg-oxford-blue .returned-late-loading {
+  color: #ffffff;
+}
+
+/* ✅ FINAL ERROR STYLE — SAME FOR LIGHT & DARK */
 .returned-late-error {
-  color: #d32f2f;
-  padding: 16px;
-  background-color: #ffebee;
-  border: 1px solid #ffcdd2;
-  border-radius: 4px;
+  color: #ffffff !important;
+  background-color: #b3261e; /* consistent error red */
+  padding: 14px 16px;
+  border-radius: 6px;
   margin: 20px 0;
+  font-weight: 500;
+  text-align: center;
 }
 
+/* No data state */
 .returned-late-no-data {
   display: flex;
   justify-content: center;
@@ -78,4 +96,27 @@
   font-size: 16px;
   color: #666;
   font-style: italic;
-}
\ No newline at end of file
+}
+
+.bg-oxford-blue .returned-late-no-data {
+  color: #ffffff;
+}
+
+/* Fix select dropdown readability in dark mode */
+.bg-oxford-blue select {
+  background-color: #ffffff;
+  color: #333333;
+  border: 1px solid #cccccc;
+}
+
+/* Ensure option text is readable */
+.bg-oxford-blue select option {
+  color: #333333;
+  background-color: #ffffff;
+}
+
+/* Disabled / default-looking state fix */
+.bg-oxford-blue select:disabled {
+  color: #333333;
+  background-color: #f5f5f5;
+}
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
index 87f36d484a..55609d170a 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
@@ -24,6 +24,8 @@ import IssueCharts from '../Issues/openIssueCharts';
 import SupplierPerformanceGraph from './SupplierPerformanceGraph.jsx';
 import MostFrequentKeywords from './MostFrequentKeywords/MostFrequentKeywords';
 import DistributionLaborHours from './DistributionLaborHours/DistributionLaborHours';
+import RentalChart from '../RentalChart/RentalChart';
+import ReturnedLateChart from '../RentalChart/ReturnedLateChart';
 
 const projectStatusButtons = [
   {
@@ -368,18 +370,24 @@ function WeeklyProjectSummary() {
       {
         title: 'Rental Tracking',
         key: 'Rental Tracking',
-        className: 'half', // adjust if Figma shows full width
-        content: [1, 2].map((_, index) => {
-          const uniqueId = uuidv4();
-          return (
-            <div
-              key={uniqueId}
-              className={`${styles.weeklyProjectSummaryCard} ${styles.normalCard}`}
-            >
-              📊 Card
+        className: 'full',
+        content: (
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: '1fr',
+              gap: '12px',
+            }}
+          >
+            <div className={`${styles.weeklyProjectSummaryCard} ${styles.normalCard}`}>
+              <RentalChart />
             </div>
-          );
-        }),
+
+            <div className={`${styles.weeklyProjectSummaryCard} ${styles.normalCard}`}>
+              <ReturnedLateChart />
+            </div>
+          </div>
+        ),
       },
       {
         title: 'Financials Tracking',

From 0012fb2a2e7cd2f23d26273206ea42917feb390a Mon Sep 17 00:00:00 2001
From: Radia731 <radiajjr17@gmail.com>
Date: Sun, 21 Jun 2026 02:09:16 -0400
Subject: [PATCH 3/3] fixed some UI issues

---
 .../BMDashboard/RentalChart/RentalChart.css   | 153 --------------
 .../BMDashboard/RentalChart/RentalChart.jsx   |  84 ++++----
 .../RentalChart/RentalChart.module.css        | 199 ++++++++++++++++++
 .../RentalChart/ReturnedLateChart.jsx         |  52 ++---
 .../RentalChart/ReturnedLateChart.module.css  |  57 +++--
 .../WeeklyProjectSummary.module.css           |  19 +-
 6 files changed, 312 insertions(+), 252 deletions(-)
 delete mode 100644 src/components/BMDashboard/RentalChart/RentalChart.css
 create mode 100644 src/components/BMDashboard/RentalChart/RentalChart.module.css

diff --git a/src/components/BMDashboard/RentalChart/RentalChart.css b/src/components/BMDashboard/RentalChart/RentalChart.css
deleted file mode 100644
index 6c015ef644..0000000000
--- a/src/components/BMDashboard/RentalChart/RentalChart.css
+++ /dev/null
@@ -1,153 +0,0 @@
-.body.dark-mode {
-  background-color: #1b2a41;
-  color: #e0e0e0;
-}
-
-.rental-container {
-    position: relative;
-    width: 100%;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-.rental-container.dark-mode {
-  background-color: #1b2a41;
-  color: #e0e0e0;
-}
-
-.text-light {
-  color: #e0e0e0;
-}
-
-.dark-select {
-  background-color: #333;
-  color: #e0e0e0;
-  border: 1px solid #555;
-}
-
-.dark-date-picker {
-  background-color: #333;
-  color: #e0e0e0;
-  border: 1px solid #555;
-}
-
-.dark-chart {
-  background-color: #ab2a41;
-  border-radius: 8px;
-  padding: 16px;
-}
- 
-.react-datepicker {
-  background-color: #333;
-  color: #e0e0e0;
-  border: 1px solid #555;
-}
-
-.react-datepicker__header {
-  background-color: #444;
-  border-bottom: 1px solid #555;
-}
-
-.react-datepicker__current-month,
-.react-datepicker__day-name,
-.react-datepicker__day,
-.react-datepicker__month-text,
-.react-datepicker__year-text {
-  color: #e0e0e0;
-}
-
-.react-datepicker__day:hover,
-.react-datepicker__month-text:hover,
-.react-datepicker__year-text:hover {
-  background-color: #555;
-}
-
-.react-datepicker__day--selected,
-.react-datepicker__day--in-selecting-range,
-.react-datepicker__day--in-range {
-  background-color: #0078d7;
-  color: white;
-}
-  .chart-controls {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-    margin-bottom: 20px;
-    width: 100%;
-  }
-  
-  .filter-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-    margin-top: 40px;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  .top-filters {
-    width: 100%;
-    margin-bottom: 10px;
-    float: right;
-  }
-  
-  .date-filters {
-    width: 100%;
-    float:right;
-  }
-
-  .filter-group {
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-  }
-
-  .filter-text {
-    margin-right: 8px;
-    white-space: nowrap;
-  }
-
-  .chart-wrapper {
-    height: 600px;
-    width: 100%;
-    margin: 0 auto;
-    padding: 40px;
-    box-sizing: border-box;
-    border-radius: 8px;
-    background-color: #fff;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-  }
-  
-  .date-picker {
-    padding: 6px 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    font-size: 14px;
-    width: 120px;
-  }
-  
-  .rental-char-select {
-    padding: 6px 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    font-size: 14px;
-    min-width: 150px;
-  }
-  
-  .loading, .error, .no-data {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    font-size: 16px;
-    color: #666;
-  }
-  
-  .error {
-    color: #d32f2f;
-  }
-
-  .react-datepicker-popper {
-    z-index: 999 !important;
-    max-width: 100vw;
-  }
\ No newline at end of file
diff --git a/src/components/BMDashboard/RentalChart/RentalChart.jsx b/src/components/BMDashboard/RentalChart/RentalChart.jsx
index e3e407ef22..053ad2ab03 100644
--- a/src/components/BMDashboard/RentalChart/RentalChart.jsx
+++ b/src/components/BMDashboard/RentalChart/RentalChart.jsx
@@ -4,7 +4,7 @@ import axios from 'axios';
 import { ENDPOINTS } from '~/utils/URL';
 import { Line } from 'react-chartjs-2';
 import DatePicker from 'react-datepicker';
-import './RentalChart.css';
+import styles from './RentalChart.module.css';
 import { toast } from 'react-toastify';
 import {
   Chart as ChartJS,
@@ -256,7 +256,7 @@ export default function RentalChart() {
         legend: {
           position: 'top',
           labels: {
-            color: darkMode ? '#1b2a41' : '#333333',
+            color: darkMode ? '#e0e0e0' : '#333333',
           },
         },
         title: {
@@ -357,17 +357,21 @@ export default function RentalChart() {
   const renderChartContent = () => {
     if (loading) {
       return (
-        <div className={`loading ${darkMode ? 'text-light' : ''}`}>Loading Chart Data....</div>
+        <div className={`${styles.loading} ${darkMode ? styles['text-light'] : ''}`}>
+          Loading Chart Data....
+        </div>
       );
     }
 
     if (error) {
-      return <div className={`error ${darkMode ? 'text-light' : ''}`}>{error}</div>;
+      return (
+        <div className={`${styles.error} ${darkMode ? styles['text-light'] : ''}`}>{error}</div>
+      );
     }
 
     if (chartData.datasets.length === 0) {
       return (
-        <div className={`no-data ${darkMode ? 'text-light' : ''}`}>
+        <div className={`${styles['no-data']} ${darkMode ? styles['text-light'] : ''}`}>
           No data available for the selected filters
         </div>
       );
@@ -377,46 +381,39 @@ export default function RentalChart() {
   };
 
   return (
-    <div
-      className={`rental-container ${darkMode ? 'dark-mode' : ''}`}
-      style={{
-        backgroundColor: darkMode ? '#1b2a41' : '#ffffff',
-        padding: '20px',
-        borderRadius: '8px',
-        minHeight: '100vh',
-        marginTop: '-20px',
-      }}
-    >
-      <h1 className={darkMode ? 'text-light' : ''}>Rental Cost Over Time</h1>
-      <div className="chart-filters" style={{ marginBottom: '20px' }}>
-        <div
-          className="filter-row top-filters"
-          style={{ display: 'flex', marginBottom: '10px', gap: '20px' }}
-        >
-          <div className="filter-group">
-            <label htmlFor="chart-type" className={darkMode ? 'text-light' : ''}>
+    <div className={`${styles['rental-container']} ${darkMode ? styles['dark-mode'] : ''}`}>
+      <h1 className={darkMode ? styles['text-light'] : ''}>Rental Cost Over Time</h1>
+
+      <div className={styles['chart-filters']}>
+        <div className={`${styles['filter-row']} ${styles['top-filters']}`}>
+          <div className={styles['filter-group']}>
+            <label htmlFor="chart-type" className={darkMode ? styles['text-light'] : ''}>
               Display:{' '}
             </label>
             <select
               id="chart-type"
               value={chartType}
               onChange={handleTypeChange}
-              className={darkMode ? 'rental-chart-select dark-select' : 'rental-chart-select'}
+              className={`${styles['rental-chart-select']} ${
+                darkMode ? styles['dark-select'] : ''
+              }`}
             >
               <option value="cost">Total Rental Cost</option>
               <option value="percentage">% of Materials Cost</option>
             </select>
           </div>
 
-          <div className="filter-group">
-            <label htmlFor="project-filter" className={darkMode ? 'text-light' : ''}>
+          <div className={styles['filter-group']}>
+            <label htmlFor="project-filter" className={darkMode ? styles['text-light'] : ''}>
               Project:{' '}
             </label>
             <select
               id="project-filter"
               value={selectedProject}
               onChange={handleProjectChange}
-              className={darkMode ? 'rental-chart-select dark-select' : 'rental-chart-select'}
+              className={`${styles['rental-chart-select']} ${
+                darkMode ? styles['dark-select'] : ''
+              }`}
             >
               <option value="All">All Projects</option>
               {availableProjects.map(projectId => (
@@ -427,8 +424,8 @@ export default function RentalChart() {
             </select>
           </div>
 
-          <div className="filter-group">
-            <label htmlFor="tool-filter" className={darkMode ? 'text-light' : ''}>
+          <div className={styles['filter-group']}>
+            <label htmlFor="tool-filter" className={darkMode ? styles['text-light'] : ''}>
               Tool:{' '}
             </label>
             <select
@@ -436,7 +433,9 @@ export default function RentalChart() {
               value={selectedTool}
               onChange={handleToolChange}
               disabled={groupBy === 'project' && selectedProject !== 'All'}
-              className={darkMode ? 'rental-chart-select dark-select' : 'rental-chart-select'}
+              className={`${styles['rental-chart-select']} ${
+                darkMode ? styles['dark-select'] : ''
+              }`}
             >
               <option value="All">All Tools</option>
               {availableTools.map(tool => (
@@ -448,9 +447,9 @@ export default function RentalChart() {
           </div>
         </div>
 
-        <div className="filter-row date-filters" style={{ display: 'flex', gap: '20px' }}>
-          <div className="filter-group">
-            <label style={{ marginRight: '8px' }} className={darkMode ? 'text-light' : ''}>
+        <div className={`${styles['filter-row']} ${styles['date-filters']}`}>
+          <div className={styles['filter-group']}>
+            <label className={`${darkMode ? styles['text-light'] : ''} ${styles['date-label']}`}>
               From:{' '}
             </label>
             <DatePicker
@@ -463,12 +462,12 @@ export default function RentalChart() {
               showYearDropdown
               showMonthDropdown
               dropdownMode="select"
-              className={`date-picker ${darkMode ? 'dark-date-picker' : ''}`}
+              className={`${styles['date-picker']} ${darkMode ? styles['dark-date-picker'] : ''}`}
             />
           </div>
 
-          <div className="filter-group" style={{ marginRight: '150px' }}>
-            <label label style={{ marginRight: '10px' }} className={darkMode ? 'text-light' : ''}>
+          <div className={`${styles['filter-group']} ${styles['date-to-group']}`}>
+            <label className={`${darkMode ? styles['text-light'] : ''} ${styles['date-label']}`}>
               To:{' '}
             </label>
             <DatePicker
@@ -482,22 +481,13 @@ export default function RentalChart() {
               showYearDropdown
               showMonthDropdown
               dropdownMode="select"
-              className={`date-picker ${darkMode ? 'dark-date-picker' : ''}`}
+              className={`${styles['date-picker']} ${darkMode ? styles['dark-date-picker'] : ''}`}
             />
           </div>
         </div>
       </div>
 
-      <div
-        className={`chart-wrapper ${darkMode ? 'dark-chart' : ''}`}
-        style={{
-          backgroundColor: darkMode ? '#1b2a41' : '#ffffff',
-          padding: '20px',
-          borderRadius: '8px',
-          border: darkMode ? '1px solid #333' : '1px solid #ddd',
-          minHeight: '600px',
-        }}
-      >
+      <div className={`${styles['chart-wrapper']} ${darkMode ? styles['dark-chart'] : ''}`}>
         {renderChartContent()}
       </div>
     </div>
diff --git a/src/components/BMDashboard/RentalChart/RentalChart.module.css b/src/components/BMDashboard/RentalChart/RentalChart.module.css
new file mode 100644
index 0000000000..5cfc5ff064
--- /dev/null
+++ b/src/components/BMDashboard/RentalChart/RentalChart.module.css
@@ -0,0 +1,199 @@
+/* =========================================
+   Base Container & Layout
+   ========================================= */
+.rental-container {
+  position: relative;
+  width: 100%;
+  margin: 0 auto;
+  padding: 20px;
+  margin-top: -20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: #ffffff;
+  border-radius: 8px;
+  min-height: 15vh;
+}
+
+.rental-container.dark-mode {
+  background-color: #1b2a41;
+  color: #e0e0e0;
+}
+
+.text-light {
+  color: #e0e0e0;
+}
+
+/* =========================================
+     Filter Controls
+     ========================================= */
+.chart-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  margin-bottom: 20px;
+  width: 100%;
+}
+
+.chart-filters {
+  margin-bottom: 20px;
+}
+
+.filter-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-top: 15px;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.top-filters {
+  width: 100%;
+  display: flex;
+  margin-bottom: 20px;
+  gap: 20px;
+}
+
+.date-filters {
+  width: 100%;
+  display: flex;
+  gap: 20px;
+}
+
+.filter-group {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.filter-text,
+.date-label {
+  margin-right: 8px;
+  white-space: nowrap;
+}
+
+.date-to-group {
+  margin-right: 150px;
+}
+
+/* =========================================
+     Inputs & Dropdowns
+     ========================================= */
+.rental-chart-select,
+.date-picker {
+  padding: 6px 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.rental-chart-select {
+  min-width: 150px;
+}
+
+.date-picker {
+  width: 120px;
+}
+
+.dark-select {
+  background-color: #1b2a41;
+  color: #e0e0e0;
+  border: 1px solid #555;
+}
+
+.dark-date-picker {
+  background-color: #1b2a41 !important;
+  color: #e0e0e0 !important;
+  border: 1px solid #555;
+}
+
+/* =========================================
+     Chart Area & Loading States
+     ========================================= */
+.chart-wrapper {
+  height: 500px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 15px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background-color: #fff;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  border: 1px solid #ddd;
+}
+
+.dark-chart {
+  background-color: #1b2a41;
+  border-color: #333;
+}
+
+.loading,
+.error,
+.no-data {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  font-size: 16px;
+  color: #666;
+}
+
+.error {
+  color: #d32f2f;
+}
+
+
+
+:global(.react-datepicker-popper) {
+  z-index: 999 !important;
+  max-width: 100vw;
+}
+
+:global(.react-datepicker) {
+  background-color: #333;
+  color: #e0e0e0;
+  border: 1px solid #555;
+}
+
+:global(.react-datepicker__header) {
+  background-color: #444;
+  border-bottom: 1px solid #555;
+}
+
+:global(.react-datepicker__current-month),
+:global(.react-datepicker__day-name),
+:global(.react-datepicker__day),
+:global(.react-datepicker__month-text),
+:global(.react-datepicker__year-text) {
+  color: #e0e0e0;
+}
+
+:global(.react-datepicker__day:hover),
+:global(.react-datepicker__month-text:hover),
+:global(.react-datepicker__year-text:hover) {
+  background-color: #555;
+}
+
+:global(.react-datepicker__day--selected),
+:global(.react-datepicker__day--in-selecting-range),
+:global(.react-datepicker__day--in-range) {
+  background-color: #0078d7;
+  color: white;
+}
+
+:global(body.dark-mode .react-datepicker__month-select),
+:global(body.dark-mode .react-datepicker__year-select) {
+  background-color: #2c3e50 !important;
+  color: #ffffff !important;
+  border: 1px solid #7f8c8d !important;
+  border-radius: 4px;
+  padding: 2px;
+  outline: none;
+}
+
+:global(body.dark-mode .react-datepicker__month-select option),
+:global(body.dark-mode .react-datepicker__year-select option) {
+  background-color: #2c3e50;
+  color: #ffffff;
+}
\ No newline at end of file
diff --git a/src/components/BMDashboard/RentalChart/ReturnedLateChart.jsx b/src/components/BMDashboard/RentalChart/ReturnedLateChart.jsx
index f58932e326..15ddb5e9de 100644
--- a/src/components/BMDashboard/RentalChart/ReturnedLateChart.jsx
+++ b/src/components/BMDashboard/RentalChart/ReturnedLateChart.jsx
@@ -192,17 +192,16 @@ export default function ReturnedLateChart() {
       startDate: prev.startDate > date ? date : prev.startDate,
       endDate: date,
     }));
-  const isOxfordBlue = darkMode ? 'bg-oxford-blue' : '';
+  // 🚨 Hooked up to the 'styles' object!
+  const isOxfordBlue = darkMode ? styles['bg-oxford-blue'] : '';
 
   return (
     <div className={`${styles['returned-late-chart']} ${isOxfordBlue}`}>
-      <h1 className={darkMode ? 'text-white' : ''}>Percent of Tools Returned Late</h1>
+      <h1>Percent of Tools Returned Late</h1>
+
       <div className={styles['returned-late-filters']}>
         <div className={styles['returned-late-filter-group']}>
-          <label
-            htmlFor="project-select"
-            className={`${styles['returned-late-filter-label']} ${darkMode ? 'text-white' : ''}`}
-          >
+          <label htmlFor="project-select" className={styles['returned-late-filter-label']}>
             Project:
           </label>
           <select
@@ -219,11 +218,9 @@ export default function ReturnedLateChart() {
             ))}
           </select>
         </div>
+
         <div className={styles['returned-late-filter-group']}>
-          <label
-            htmlFor="tools-select"
-            className={`${styles['returned-late-filter-label']} ${darkMode ? 'text-white' : ''}`}
-          >
+          <label htmlFor="tools-select" className={styles['returned-late-filter-label']}>
             Tools:
           </label>
           <div id="tools-select" className={styles['returned-late-tools-select']}>
@@ -235,11 +232,9 @@ export default function ReturnedLateChart() {
             />
           </div>
         </div>
+
         <div className={styles['returned-late-filter-group']}>
-          <label
-            htmlFor="start-date-picker"
-            className={`${styles['returned-late-filter-label']} ${darkMode ? 'text-white' : ''}`}
-          >
+          <label htmlFor="start-date-picker" className={styles['returned-late-filter-label']}>
             From:
           </label>
           <DatePicker
@@ -249,36 +244,25 @@ export default function ReturnedLateChart() {
             className={styles['returned-late-date-picker']}
           />
         </div>
-        <div className={`${styles['returned-late-filter-group']}`}>
-          <label
-            htmlFor="end-date-picker"
-            className={`${styles['returned-late-filter-label']}${darkMode ? 'text-white' : ''}`}
-          >
+
+        <div className={styles['returned-late-filter-group']}>
+          <label htmlFor="end-date-picker" className={styles['returned-late-filter-label']}>
             To:
           </label>
           <DatePicker
             id="end-date-picker"
             selected={dateRange.endDate}
             onChange={handleEndDateChange}
-            className={`${styles['returned-late-date-picker']}${darkMode ? 'text-white' : ''}`}
+            className={styles['returned-late-date-picker']}
           />
         </div>
       </div>
-      <div className={`${styles['returned-late-chart-container']} text-white`}>
-        {loading && (
-          <div className={`${styles['returned-late-loading']} ${darkMode ? 'text-white' : ''}`}>
-            Loading...
-          </div>
-        )}
-        {error && (
-          <div className={`${styles['returned-late-error']} ${darkMode ? 'text-white' : ''}`}>
-            {error}
-          </div>
-        )}
+
+      <div className={styles['returned-late-chart-container']}>
+        {loading && <div className={styles['returned-late-loading']}>Loading...</div>}
+        {error && <div className={styles['returned-late-error']}>{error}</div>}
         {!loading && !error && chartData.labels.length === 0 && (
-          <div className={`${styles['returned-late-no-data']} ${darkMode ? 'text-white' : ''}`}>
-            No data for selected filters
-          </div>
+          <div className={styles['returned-late-no-data']}>No data for selected filters</div>
         )}
         {!loading && !error && chartData.labels.length > 0 && (
           <Bar ref={chartRef} data={chartData} options={options} />
diff --git a/src/components/BMDashboard/RentalChart/ReturnedLateChart.module.css b/src/components/BMDashboard/RentalChart/ReturnedLateChart.module.css
index 2a4f8b9dc5..6a68e6f05c 100644
--- a/src/components/BMDashboard/RentalChart/ReturnedLateChart.module.css
+++ b/src/components/BMDashboard/RentalChart/ReturnedLateChart.module.css
@@ -76,10 +76,10 @@
   color: #ffffff;
 }
 
-/* ✅ FINAL ERROR STYLE — SAME FOR LIGHT & DARK */
+
 .returned-late-error {
   color: #ffffff !important;
-  background-color: #b3261e; /* consistent error red */
+  background-color: #b3261e;
   padding: 14px 16px;
   border-radius: 6px;
   margin: 20px 0;
@@ -103,20 +103,49 @@
 }
 
 /* Fix select dropdown readability in dark mode */
-.bg-oxford-blue select {
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #cccccc;
+.bg-oxford-blue .returned-late-project-select,
+.bg-oxford-blue .returned-late-date-picker {
+  background-color: #1b2a41;
+  color: #e0e0e0;
+  border: 1px solid #555;
+}
+
+.bg-oxford-blue .returned-late-project-select option {
+  color: #e0e0e0;
+  background-color: #1b2a41;
+}
+
+.bg-oxford-blue .returned-late-project-select:disabled {
+  color: #a0a0a0;
+  background-color: #0f1a2a;
+}
+
+
+.bg-oxford-blue :global(.rmsc .dropdown-heading) {
+  background-color: #1b2a41;
+  color: #e0e0e0;
+  border: 1px solid #555;
 }
 
-/* Ensure option text is readable */
-.bg-oxford-blue select option {
-  color: #333333;
-  background-color: #ffffff;
+.bg-oxford-blue :global(.rmsc .dropdown-content) {
+  background-color: #1b2a41;
+  border: 1px solid #555;
 }
 
-/* Disabled / default-looking state fix */
-.bg-oxford-blue select:disabled {
-  color: #333333;
-  background-color: #f5f5f5;
+.bg-oxford-blue :global(.rmsc .dropdown-content .select-item) {
+  background-color: #1b2a41 !important;
+  color: #ffffff !important;
+}
+
+.bg-oxford-blue :global(.rmsc .dropdown-content label) {
+  color: #ffffff !important;
 }
+
+.bg-oxford-blue :global(.rmsc .dropdown-content .select-item:hover) {
+  background-color: #2c3e50 !important;
+  color: #ffffff !important;
+}
+
+.bg-oxford-blue :global(.rmsc .dropdown-container) {
+  background-color: transparent;
+}
\ No newline at end of file
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
index 72b99d0f14..0b000bb247 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
@@ -128,6 +128,12 @@
   border-radius: 6px;
   text-align: center;
   box-shadow: 0 2px 5px var(--card-shadow);
+  flex: 1 1 250px;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .darkMode .weeklyProjectSummaryCard {
@@ -182,7 +188,7 @@
 
 .normalCard {
   width: 100%;
-  min-height: 250px;
+  min-height: 200px;
 }
 
 .mapCard {
@@ -284,9 +290,12 @@
 
 /* First, set a max-height and make it scrollable */
 .quantityOfMaterialsUsedChartTooltip {
-  max-height: 80vh !important; /* Limit to 80% of viewport height */
-  overflow-y: auto !important; /* Enable vertical scrolling */
-  padding-right: 15px !important; /* Add some padding for the scrollbar */
+  max-height: 80vh !important;
+  /* Limit to 80% of viewport height */
+  overflow-y: auto !important;
+  /* Enable vertical scrolling */
+  padding-right: 15px !important;
+  /* Add some padding for the scrollbar */
   /* Support for Firefox */
   scrollbar-width: thin;
   scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
@@ -319,6 +328,7 @@
 .darkMode .quantityOfMaterialsUsedChartTooltip {
   scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
 }
+
 /* ---------------- RESPONSIVE DESIGN ---------------- */
 
 /* Medium Screens - Wrap Items */
@@ -406,6 +416,7 @@
   max-width: 1600px;
   margin: auto;
 }
+
 /* .projectStatusGrid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);