From ad40d436b34d10c2e768edfd7883bab548f360a1 Mon Sep 17 00:00:00 2001
From: ShravyaKudlu <shravyakshanbhogue@gmail.com>
Date: Thu, 18 Sep 2025 03:38:36 -0400
Subject: [PATCH 1/4] Completed refactoring the module.css for
 RentalChartComponent

---
 .../BMDashboard/RentalChart/RentalChart.jsx   | 271 +++++++-----------
 .../RentalChart/RentalChart.module.css        | 173 +++++++++++
 2 files changed, 279 insertions(+), 165 deletions(-)
 create mode 100644 src/components/BMDashboard/RentalChart/RentalChart.module.css

diff --git a/src/components/BMDashboard/RentalChart/RentalChart.jsx b/src/components/BMDashboard/RentalChart/RentalChart.jsx
index e3e407ef22..ced314f376 100644
--- a/src/components/BMDashboard/RentalChart/RentalChart.jsx
+++ b/src/components/BMDashboard/RentalChart/RentalChart.jsx
@@ -5,6 +5,7 @@ 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,
@@ -248,61 +249,54 @@ export default function RentalChart() {
   }, [chartType, selectedProject, selectedTool, dateRange, groupBy, rawData]);
 
   const options = useMemo(() => {
+    const textColor = darkMode ? '#e0e0e0' : '#333333';
+    const bgColor = darkMode ? '#1b2a41' : '#ffffff';
+    const tooltipBg = darkMode ? '#1b2a41' : 'rgba(255,255,255,0.8)';
+    const tooltipBorder = darkMode ? 'rgba(255,255,255,0.2)' : '#1b2a41';
+    const titleColor = darkMode ? '#ffffff' : '#1b2a41';
+    const gridXColor = textColor;
+    const gridYColor = darkMode ? 'rgba(255,255,255,0.1)' : '#1b2a41';
+    const legendColor = darkMode ? '#e0e0e0' : '#333333';
+
     return {
       responsive: true,
       maintainAspectRatio: false,
-      backgroundColor: darkMode ? '#1b2a41' : '#ffffff',
+      backgroundColor: bgColor,
       plugins: {
         legend: {
           position: 'top',
           labels: {
-            color: darkMode ? '#1b2a41' : '#333333',
+            color: legendColor,
           },
         },
         title: {
           display: true,
           text: generateChartTitle(),
-          font: {
-            size: 18,
-          },
-          color: darkMode ? '#ffffff' : '#1b2a41',
+          font: { size: 18 },
+          color: titleColor,
         },
         tooltip: {
           callbacks: {
-            label(context) {
-              let label = context.dataset.label || '';
-              if (label) {
-                label += ': ';
-              }
-              if (context.parsed.y !== null) {
-                label +=
-                  chartType === 'percentage'
-                    ? `${context.parsed.y}%`
-                    : `$${context.parsed.y.toFixed(2)}`;
+            label({ dataset, parsed }) {
+              let label = dataset.label ? `${dataset.label}: ` : '';
+              if (parsed.y !== null) {
+                label += chartType === 'percentage' ? `${parsed.y}%` : `$${parsed.y.toFixed(2)}`;
               }
               return label;
             },
           },
-          backgroundColor: darkMode ? '#1b2a41' : 'rgba(255,255,255,0.8)',
-          titleColor: darkMode ? '#ffffff' : '#1b2a41',
-          bodyColor: darkMode ? '#ffffff' : '#333333',
-          borderColor: darkMode ? 'rgba(255,255,255, 0.2)' : '#1b2a41',
+          backgroundColor: tooltipBg,
+          titleColor,
+          bodyColor: textColor,
+          borderColor: tooltipBorder,
           borderWidth: 1,
         },
       },
       scales: {
         x: {
-          title: {
-            display: true,
-            text: 'Month/Year',
-            color: darkMode ? '#e0e0e0' : '#333333',
-          },
-          ticks: {
-            color: darkMode ? '#e0e0e0' : '#333333',
-          },
-          grid: {
-            color: darkMode ? '#e0e0e0' : '#333333',
-          },
+          title: { display: true, text: 'Month/Year', color: textColor },
+          ticks: { color: textColor },
+          grid: { color: gridXColor },
         },
         y: {
           beginAtZero: true,
@@ -312,17 +306,13 @@ export default function RentalChart() {
               chartType === 'percentage'
                 ? 'Percentage of Total Materials Cost (%)'
                 : 'Total Rental Cost ($)',
-            color: darkMode ? '#e0e0e0' : '#333333',
+            color: textColor,
           },
           ticks: {
-            callback(value) {
-              return chartType === 'percentage' ? `${value}%` : `$${value}`;
-            },
-            color: darkMode ? '#e0e0e0' : '#333333',
-          },
-          grid: {
-            color: darkMode ? 'rgba(255,255,255,0.1)' : '#1b2a41',
+            callback: value => (chartType === 'percentage' ? `${value}%` : `$${value}`),
+            color: textColor,
           },
+          grid: { color: gridYColor },
         },
       },
     };
@@ -356,149 +346,100 @@ export default function RentalChart() {
 
   const renderChartContent = () => {
     if (loading) {
-      return (
-        <div className={`loading ${darkMode ? 'text-light' : ''}`}>Loading Chart Data....</div>
-      );
+      return <div>Loading Chart Data....</div>;
     }
 
     if (error) {
-      return <div className={`error ${darkMode ? 'text-light' : ''}`}>{error}</div>;
+      return <div>{error}</div>;
     }
 
     if (chartData.datasets.length === 0) {
-      return (
-        <div className={`no-data ${darkMode ? 'text-light' : ''}`}>
-          No data available for the selected filters
-        </div>
-      );
+      return <div>No data available for the selected filters</div>;
     }
 
     return <Line ref={chartRef} data={chartData} options={options} />;
   };
 
   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' : ''}>
-              Display:{' '}
-            </label>
-            <select
-              id="chart-type"
-              value={chartType}
-              onChange={handleTypeChange}
-              className={darkMode ? 'rental-chart-select dark-select' : 'rental-chart-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' : ''}>
-              Project:{' '}
-            </label>
-            <select
-              id="project-filter"
-              value={selectedProject}
-              onChange={handleProjectChange}
-              className={darkMode ? 'rental-chart-select dark-select' : 'rental-chart-select'}
-            >
-              <option value="All">All Projects</option>
-              {availableProjects.map(projectId => (
-                <option key={projectId} value={projectId}>
-                  Project {projectId.substring(0, 8)}...
-                </option>
-              ))}
-            </select>
-          </div>
-
-          <div className="filter-group">
-            <label htmlFor="tool-filter" className={darkMode ? 'text-light' : ''}>
-              Tool:{' '}
-            </label>
-            <select
-              id="tool-filter"
-              value={selectedTool}
-              onChange={handleToolChange}
-              disabled={groupBy === 'project' && selectedProject !== 'All'}
-              className={darkMode ? 'rental-chart-select dark-select' : 'rental-chart-select'}
-            >
-              <option value="All">All Tools</option>
-              {availableTools.map(tool => (
-                <option key={tool} value={tool}>
-                  {tool}
-                </option>
-              ))}
-            </select>
+    <div className={`${darkMode ? styles.darkMode : ''}`}>
+      <div className={`${styles.rentalContainer}`}>
+        <h1>Rental Cost Over Time</h1>
+        <div className={`${styles.chartFilters}`}>
+          <div className={`${styles.filterRow} ${styles.topFilters}`}>
+            <div className={`${styles.filterGroup}`}>
+              <label htmlFor="chart-type">Display: </label>
+              <select id="chart-type" value={chartType} onChange={handleTypeChange}>
+                <option value="cost">Total Rental Cost</option>
+                <option value="percentage">% of Materials Cost</option>
+              </select>
+            </div>
+
+            <div className={`${styles.filterGroup}`}>
+              <label htmlFor="project-filter">Project: </label>
+              <select id="project-filter" value={selectedProject} onChange={handleProjectChange}>
+                <option value="All">All Projects</option>
+                {availableProjects.map(projectId => (
+                  <option key={projectId} value={projectId}>
+                    Project {projectId.substring(0, 8)}...
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className={`${styles.filterGroup}`}>
+              <label htmlFor="tool-filter">Tool: </label>
+              <select
+                id="tool-filter"
+                value={selectedTool}
+                onChange={handleToolChange}
+                disabled={groupBy === 'project' && selectedProject !== 'All'}
+              >
+                <option value="All">All Tools</option>
+                {availableTools.map(tool => (
+                  <option key={tool} value={tool}>
+                    {tool}
+                  </option>
+                ))}
+              </select>
+            </div>
           </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' : ''}>
-              From:{' '}
-            </label>
-            <DatePicker
-              selected={dateRange.startDate}
-              onChange={handleStartDateChange}
-              selectsStart
-              startDate={dateRange.startDate}
-              endDate={dateRange.endDate}
-              dateFormat="MM/dd/yyyy"
-              showYearDropdown
-              showMonthDropdown
-              dropdownMode="select"
-              className={`date-picker ${darkMode ? 'dark-date-picker' : ''}`}
-            />
-          </div>
-
-          <div className="filter-group" style={{ marginRight: '150px' }}>
-            <label label style={{ marginRight: '10px' }} className={darkMode ? 'text-light' : ''}>
-              To:{' '}
-            </label>
-            <DatePicker
-              selected={dateRange.endDate}
-              onChange={handleEndDateChange}
-              selectsEnd
-              startDate={dateRange.startDate}
-              endDate={dateRange.endDate}
-              minDate={dateRange.startDate}
-              dateFormat="MM/dd/yyyy"
-              showYearDropdown
-              showMonthDropdown
-              dropdownMode="select"
-              className={`date-picker ${darkMode ? 'dark-date-picker' : ''}`}
-            />
+          <div className={`${styles.filterRow} ${styles.dateFilter}`}>
+            <div className={`${styles.filterGroup}`}>
+              <label htmlFor="chart-type">From: </label>
+              <DatePicker
+                selected={dateRange.startDate}
+                onChange={handleStartDateChange}
+                selectsStart
+                startDate={dateRange.startDate}
+                endDate={dateRange.endDate}
+                dateFormat="MM/dd/yyyy"
+                showYearDropdown
+                showMonthDropdown
+                dropdownMode="select"
+              />
+            </div>
+
+            <div className={`${styles.filterGroup}`}>
+              <label htmlFor="chart-type">To: </label>
+              <DatePicker
+                selected={dateRange.endDate}
+                onChange={handleEndDateChange}
+                selectsEnd
+                startDate={dateRange.startDate}
+                endDate={dateRange.endDate}
+                minDate={dateRange.startDate}
+                dateFormat="MM/dd/yyyy"
+                showYearDropdown
+                showMonthDropdown
+                dropdownMode="select"
+                className={`${styles.DatePicker}`}
+              />
+            </div>
           </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',
-        }}
-      >
-        {renderChartContent()}
+        <div className={`${styles.chartWrapper}`}>{renderChartContent()}</div>
       </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..4f3975e55b
--- /dev/null
+++ b/src/components/BMDashboard/RentalChart/RentalChart.module.css
@@ -0,0 +1,173 @@
+/* Light mode base */
+.rentalContainer {
+  position: relative;
+  width: 100%;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+/* General text */
+.textLight {
+  color: #e0e0e0;
+}
+
+/* Chart wrapper (applies in dark + light mode) */
+.chartWrapper {
+  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);
+}
+
+/* Chart controls + filters */
+.chartControls {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  margin-bottom: 20px;
+  width: 100%;
+}
+
+.filterRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-top: 40px;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+
+.topFilters {
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.dateFilters {
+  width: 100%;
+}
+
+.filterGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  min-width: 150px;
+}
+
+.filterGroup label {
+  font-size: 18px;
+  font-weight: 500;
+  margin-bottom: 2px;
+  color: inherit;
+}
+
+.filterText {
+  margin-right: 0;
+  white-space: nowrap;
+}
+
+/* Date picker */
+.datePicker {
+  padding: 6px 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+  width: 120px;
+}
+
+/* Select */
+.rentalChartSelect {
+  padding: 6px 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+  min-width: 150px;
+}
+
+/* States */
+.loading,
+.error,
+.noData {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  font-size: 16px;
+  color: #666;
+}
+
+.error {
+  color: #d32f2f;
+}
+
+/* React DatePicker overrides */
+.reactDatepicker {
+  background-color: #333;
+  color: #e0e0e0;
+  border: 1px solid #555;
+}
+
+.reactDatepicker__header {
+  background-color: #444;
+  border-bottom: 1px solid #555;
+}
+
+.reactDatepicker__current-month,
+.reactDatepicker__day-name,
+.reactDatepicker__day,
+.reactDatepicker__month-text,
+.reactDatepicker__year-text {
+  color: #e0e0e0;
+}
+
+.reactDatepicker__day:hover,
+.reactDatepicker__month-text:hover,
+.reactDatepicker__year-text:hover {
+  background-color: #555;
+}
+
+.reactDatepicker__day--selected,
+.reactDatepicker__day--in-selecting-range,
+.reactDatepicker__day--in-range {
+  background-color: #0078d7;
+  color: white;
+}
+
+.reactDatepickerPopper {
+  z-index: 999 !important;
+  max-width: 100vw;
+}
+
+/* ======================
+   Dark Mode Overrides
+   ====================== */
+.darkMode {
+  background-color: #1b2a41;
+  color: #e0e0e0;
+}
+
+.darkMode .rentalContainer {
+  background-color: #1b2a41;
+  color: #e0e0e0;
+}
+
+.darkMode select {
+  background-color: #333;
+  color: #e0e0e0;
+  border: 1px solid #555;
+}
+
+.darkMode .datePicker {
+  background-color: #333;
+  color: #e0e0e0;
+  border: 1px solid #555;
+}
+
+.darkMode .chartWrapper {
+  background-color: #1b2a41;
+  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.05);
+}

From ddf329a4cf49925a10b9faa0832d8f0f2653a68c Mon Sep 17 00:00:00 2001
From: ShravyaKudlu <shravyakshanbhogue@gmail.com>
Date: Thu, 18 Sep 2025 04:19:24 -0400
Subject: [PATCH 2/4] Final changes to fix the styles

---
 .../BMDashboard/RentalChart/RentalChart.css   | 153 ------------------
 .../BMDashboard/RentalChart/RentalChart.jsx   |  25 ++-
 2 files changed, 12 insertions(+), 166 deletions(-)
 delete mode 100644 src/components/BMDashboard/RentalChart/RentalChart.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 ced314f376..dc18ada62d 100644
--- a/src/components/BMDashboard/RentalChart/RentalChart.jsx
+++ b/src/components/BMDashboard/RentalChart/RentalChart.jsx
@@ -4,7 +4,6 @@ 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 {
@@ -249,14 +248,13 @@ export default function RentalChart() {
   }, [chartType, selectedProject, selectedTool, dateRange, groupBy, rawData]);
 
   const options = useMemo(() => {
-    const textColor = darkMode ? '#e0e0e0' : '#333333';
+    const textColor = '#ffffff';
     const bgColor = darkMode ? '#1b2a41' : '#ffffff';
-    const tooltipBg = darkMode ? '#1b2a41' : 'rgba(255,255,255,0.8)';
-    const tooltipBorder = darkMode ? 'rgba(255,255,255,0.2)' : '#1b2a41';
-    const titleColor = darkMode ? '#ffffff' : '#1b2a41';
-    const gridXColor = textColor;
+    const tooltipBorder = '#ffffff';
+    const tooltipBg = darkMode ? '#343a40' : '#1b2a41';
+    const titleColor = '#ffffff';
+    const gridXColor = darkMode ? 'rgba(255,255,255,0.1)' : '#1b2a41';
     const gridYColor = darkMode ? 'rgba(255,255,255,0.1)' : '#1b2a41';
-    const legendColor = darkMode ? '#e0e0e0' : '#333333';
 
     return {
       responsive: true,
@@ -265,14 +263,12 @@ export default function RentalChart() {
       plugins: {
         legend: {
           position: 'top',
-          labels: {
-            color: legendColor,
-          },
+          labels: { color: textColor, font: { size: 16 } },
         },
         title: {
           display: true,
           text: generateChartTitle(),
-          font: { size: 18 },
+          font: { size: 25 },
           color: titleColor,
         },
         tooltip: {
@@ -289,12 +285,14 @@ export default function RentalChart() {
           titleColor,
           bodyColor: textColor,
           borderColor: tooltipBorder,
-          borderWidth: 1,
+          borderWidth: 2,
+          titleFont: { size: 18 },
+          bodyFont: { size: 16 },
         },
       },
       scales: {
         x: {
-          title: { display: true, text: 'Month/Year', color: textColor },
+          title: { display: true, text: 'Month/Year', color: textColor, font: { size: 18 } },
           ticks: { color: textColor },
           grid: { color: gridXColor },
         },
@@ -307,6 +305,7 @@ export default function RentalChart() {
                 ? 'Percentage of Total Materials Cost (%)'
                 : 'Total Rental Cost ($)',
             color: textColor,
+            font: { size: 18 },
           },
           ticks: {
             callback: value => (chartType === 'percentage' ? `${value}%` : `$${value}`),

From 4f97e64b1b91310d1715d316f1927fcdf537a1e1 Mon Sep 17 00:00:00 2001
From: ShravyaKudlu <shravyakshanbhogue@gmail.com>
Date: Fri, 19 Sep 2025 00:27:38 -0400
Subject: [PATCH 3/4] Fixed lightMode issues

---
 .../BMDashboard/RentalChart/RentalChart.jsx   |  17 +--
 .../RentalChart/RentalChart.module.css        | 102 ++++++++++++++----
 2 files changed, 94 insertions(+), 25 deletions(-)

diff --git a/src/components/BMDashboard/RentalChart/RentalChart.jsx b/src/components/BMDashboard/RentalChart/RentalChart.jsx
index dc18ada62d..a0f408a869 100644
--- a/src/components/BMDashboard/RentalChart/RentalChart.jsx
+++ b/src/components/BMDashboard/RentalChart/RentalChart.jsx
@@ -248,13 +248,13 @@ export default function RentalChart() {
   }, [chartType, selectedProject, selectedTool, dateRange, groupBy, rawData]);
 
   const options = useMemo(() => {
-    const textColor = '#ffffff';
+    const textColor = darkMode ? '#ffffff' : '#000000';
     const bgColor = darkMode ? '#1b2a41' : '#ffffff';
-    const tooltipBorder = '#ffffff';
-    const tooltipBg = darkMode ? '#343a40' : '#1b2a41';
-    const titleColor = '#ffffff';
-    const gridXColor = darkMode ? 'rgba(255,255,255,0.1)' : '#1b2a41';
-    const gridYColor = darkMode ? 'rgba(255,255,255,0.1)' : '#1b2a41';
+    const tooltipBorder = darkMode ? '#ffffff' : '#000000';
+    const tooltipBg = darkMode ? '#343a40' : '#f8f9fa';
+    const titleColor = darkMode ? '#ffffff' : '#000000';
+    const gridXColor = darkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)';
+    const gridYColor = darkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)';
 
     return {
       responsive: true,
@@ -416,6 +416,9 @@ export default function RentalChart() {
                 showYearDropdown
                 showMonthDropdown
                 dropdownMode="select"
+                className={`${styles.DatePickerInput}`}
+                popperClassName={`#{styles.DatePickerPopper}`}
+                calendarClassName={`${styles.DatePickerCalendar}`}
               />
             </div>
 
@@ -433,6 +436,8 @@ export default function RentalChart() {
                 showMonthDropdown
                 dropdownMode="select"
                 className={`${styles.DatePicker}`}
+                popperClassName={`#{styles.DatePickerPopper}`}
+                calendarClassName={`${styles.DatePickerCalendar}`}
               />
             </div>
           </div>
diff --git a/src/components/BMDashboard/RentalChart/RentalChart.module.css b/src/components/BMDashboard/RentalChart/RentalChart.module.css
index 4f3975e55b..bceaacc7d8 100644
--- a/src/components/BMDashboard/RentalChart/RentalChart.module.css
+++ b/src/components/BMDashboard/RentalChart/RentalChart.module.css
@@ -1,4 +1,6 @@
-/* Light mode base */
+/* ======================
+   Light Mode Base
+   ====================== */
 .rentalContainer {
   position: relative;
   width: 100%;
@@ -70,24 +72,23 @@
   white-space: nowrap;
 }
 
-/* Date picker */
+/* Date picker input */
 .datePicker {
   padding: 6px 10px;
   border: 1px solid #ccc;
-  border-radius: 4px;
+  border-radius: 6px; /* rounded */
   font-size: 14px;
   width: 120px;
 }
 
-/* Select */
+select,
 .rentalChartSelect {
-  padding: 6px 10px;
+  background-color: #fff;
+  color: #333;
   border: 1px solid #ccc;
-  border-radius: 4px;
-  font-size: 14px;
-  min-width: 150px;
+  border-radius: 6px;
+  cursor: pointer;
 }
-
 /* States */
 .loading,
 .error,
@@ -104,16 +105,18 @@
   color: #d32f2f;
 }
 
-/* React DatePicker overrides */
+/* React DatePicker overrides (light mode base) */
 .reactDatepicker {
-  background-color: #333;
-  color: #e0e0e0;
-  border: 1px solid #555;
+  background-color: #fff;
+  color: #333;
+  border: 1px solid #ccc;
+  border-radius: 6px;
 }
 
 .reactDatepicker__header {
-  background-color: #444;
-  border-bottom: 1px solid #555;
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #ccc;
+  border-radius: 6px 6px 0 0;
 }
 
 .reactDatepicker__current-month,
@@ -121,13 +124,13 @@
 .reactDatepicker__day,
 .reactDatepicker__month-text,
 .reactDatepicker__year-text {
-  color: #e0e0e0;
+  color: #333;
 }
 
 .reactDatepicker__day:hover,
 .reactDatepicker__month-text:hover,
 .reactDatepicker__year-text:hover {
-  background-color: #555;
+  background-color: #eee;
 }
 
 .reactDatepicker__day--selected,
@@ -135,11 +138,13 @@
 .reactDatepicker__day--in-range {
   background-color: #0078d7;
   color: white;
+  border-radius: 50%;
 }
 
 .reactDatepickerPopper {
   z-index: 999 !important;
   max-width: 100vw;
+  border-radius: 6px;
 }
 
 /* ======================
@@ -155,19 +160,78 @@
   color: #e0e0e0;
 }
 
-.darkMode select {
+.darkMode select,
+.darkMode .rentalChartSelect {
   background-color: #333;
   color: #e0e0e0;
   border: 1px solid #555;
 }
 
-.darkMode .datePicker {
+/* DatePicker input & popper */
+.darkMode .DatePickerInput,
+.darkMode .DatePicker,
+.darkMode .DatePickerPopper,
+.darkMode .DatePickerCalendar {
   background-color: #333;
   color: #e0e0e0;
   border: 1px solid #555;
+  border-radius: 6px;
+  z-index: 9999;
 }
 
+/* Calendar header */
+.darkMode .DatePickerCalendar .react-datepicker__header {
+  background-color: #333;
+  border-bottom: 1px solid #555;
+  color: #e0e0e0;
+  border-radius: 6px 6px 0 0;
+}
+
+/* Days, months, years */
+.darkMode .DatePickerCalendar .react-datepicker__day,
+.darkMode .DatePickerCalendar .react-datepicker__day-name,
+.darkMode .DatePickerCalendar .react-datepicker__month-text,
+.darkMode .DatePickerCalendar .react-datepicker__year-text {
+  color: #e0e0e0;
+  background-color: #333;
+  border-radius: 4px;
+}
+
+/* Dark mode DatePicker root */
+.darkMode .react-datepicker {
+  background-color: #000 !important; /* match your select */
+  color: #e0e0e0 !important;
+  border: 1px solid #444 !important;
+  border-radius: 6px;
+}
+
+/* Header inside */
+.darkMode .react-datepicker__header {
+  background-color: #111 !important;
+  border-bottom: 1px solid #444 !important;
+  color: #e0e0e0 !important;
+}
+
+/* Hover effect */
+.darkMode .DatePickerCalendar .react-datepicker__day:hover,
+.darkMode .DatePickerCalendar .react-datepicker__month-text:hover,
+.darkMode .DatePickerCalendar .react-datepicker__year-text:hover {
+  background-color: #444;
+  color: #fff;
+}
+
+/* Selected and in-range */
+.darkMode .DatePickerCalendar .react-datepicker__day--selected,
+.darkMode .DatePickerCalendar .react-datepicker__day--in-range,
+.darkMode .DatePickerCalendar .react-datepicker__day--in-selecting-range {
+  background-color: #555;
+  color: #fff;
+  border-radius: 50%;
+}
+
+/* Chart wrapper */
 .darkMode .chartWrapper {
   background-color: #1b2a41;
+  border-radius: 8px;
   box-shadow: 0 2px 10px rgba(255, 255, 255, 0.05);
 }

From 1dd722578994166f0f2bc97c47c07046b423aaec Mon Sep 17 00:00:00 2001
From: ShravyaKudlu <shravyakshanbhogue@gmail.com>
Date: Sun, 31 May 2026 02:02:04 -0400
Subject: [PATCH 4/4] fix: tests

---
 src/components/BMDashboard/RentalChart/RentalChart.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/BMDashboard/RentalChart/RentalChart.jsx b/src/components/BMDashboard/RentalChart/RentalChart.jsx
index a946f6bf74..c78ec3302a 100644
--- a/src/components/BMDashboard/RentalChart/RentalChart.jsx
+++ b/src/components/BMDashboard/RentalChart/RentalChart.jsx
@@ -338,9 +338,8 @@ export default function RentalChart() {
           grid: { color: gridYColor },
         },
       },
-    }),
-    [darkMode, chartType, dateRange, selectedProject, selectedTool],
-  );
+    };
+  }, [darkMode, chartType, dateRange, selectedProject, selectedTool]);
 
   const handleTypeChange = e => {
     setChartType(e.target.value);