Merge pull request #5066 from OneCommunityGlobal/chirag-linked-projects-filter-fix-merge-errors

Chirag - Fixed the dark mode issues on the Total Construction Summary screen

Author: one-community

src/components/BMDashboard/Issues/CustomDateComponent.jsx

@@ -0,0 +1,33 @@
+export const CustomDateComponent = ({
+  date,
+  decreaseMonth,
+  increaseMonth,
+  darkMode,
+  isStartDate,
+}) => {
+  const buttonStyle = {
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    color: darkMode ? 'white' : 'black',
+    fontSize: '16px',
+  };
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
+      <button onClick={decreaseMonth} style={{ ...buttonStyle, marginLeft: '10px' }}>
+        ◀
+      </button>
+
+      <span style={{ flex: 1, textAlign: 'center', fontWeight: 'bold', fontSize: '16px' }}>
+        {date.toLocaleString('default', {
+          month: 'long',
+          year: 'numeric',
+        })}
+      </span>
+      <button onClick={increaseMonth} style={{ ...buttonStyle, marginRight: '10px' }}>
+        ▶
+      </button>
+    </div>
+  );
+};

src/components/BMDashboard/Issues/issueCharts.module.css

@@ -1,16 +1,17 @@
 /* ===========================
-   Issue Charts Module CSS
-   =========================== */
+Issue Charts Module CSS
+=========================== */
 
 /* ----- Containers ----- */
 .issueChartContainer,
 .issueChartEventContainer {
   width: 100%;
+  max-width: 100%;
   margin: 0;
-  padding: 20px 40px;
+  padding: 30px 40px;
   background: #f9f9f9;
   border-radius: 8px;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
   display: flex;               /* match dark mode layout */
   flex-direction: column;      /* match dark mode */
   align-items: center;         /* center filters like dark mode */
@@ -22,8 +23,7 @@
   max-width: 100%;
   margin: 0;
   padding: 30px 40px;
-  
-    background:#1B2A41;
+  background:#1B2A41;
   border-radius: 0;
   box-shadow: none;
   color: #ccd1dc;
@@ -82,20 +82,20 @@
   padding: 20px;
   background: #fff;
   border-radius: 8px;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
 }
 
 .chartWrapperDark {
   background: #1a1c20;
-   width:100%;
+  width:100%;
   padding: 25px;
   border-radius: 12px;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
+  box-shadow: 0 2px 6px rgb(0 0 0 / 60%);
 }
 
 /* ----- Labels & Select Controls ----- */
 .issueChartLabel {
-   width:100%;
+  width:100%;
   font-size: 16px;
   color: #555;
   margin-right: 10px;
@@ -106,7 +106,7 @@
 }
 
 .selectContainer {
-   width:100%;
+  width:100%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -132,6 +132,27 @@
   color: #cfd7e3;
 }
 
+.filterSelect,
+.issueChartSelect {
+  height: 60px;
+  padding: 8px 12px;
+  font-size: 15px;
+  border-radius: 6px;
+  border: 1px solid #cbd5e0;
+  background-color: #fff;
+  color: #2d3748;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.filterSelectDark,
+.issueChartSelectDark {
+  background-color: #2d3748;
+  border: 1px solid #4a5568;
+  color: #edf2f7;
+}
+
+
 .issueChartSelect:focus,
 .issueChartSelectDark:focus {
   border-color: #4caf50;
@@ -140,7 +161,7 @@
 /* ----- Filters ----- */
 .filtersContainer {
   display: flex;
-  gap: 16px;
+  gap: 45px;
   margin-top: 10px;
   margin-bottom: 25px;
   flex-wrap: wrap;
@@ -158,6 +179,10 @@
   gap: 8px;
 }
 
+.projectFilter{
+  width: 220px;
+}
+
 .filterSelect {
   padding: 6px 8px;
   border: 1px solid #ccc;
@@ -195,26 +220,6 @@
 
 /* ---------- Select / input base styles ---------- */
 
-.filterSelect,
-.issueChartSelect {
-  height: 60px;
-  padding: 8px 12px;
-  font-size: 15px;
-  border-radius: 6px;
-  border: 1px solid #cbd5e0;
-  background-color: #ffffff;
-  color: #2d3748;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.filterSelectDark,
-.issueChartSelectDark {
-  background-color: #2d3748;
-  border: 1px solid #4a5568;
-  color: #edf2f7;
-}
-
 .filterSelect:focus,
 .issueChartSelect:focus {
   border-color: #4caf50;
@@ -225,24 +230,15 @@
 
 /* ----- Chart Container ----- */
 .chartContainer {
-  margin: 0 auto;
+  margin: 20px;
   width: 100%;
   height: 400px;
-  background: white;
   padding: 20px;
   border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   color: #000;
 }
 
 .chartContainerDark {
-  width: 100%;
-  max-width: 900px; /* centers the chart while panel stays 100% */
-  background: #1a1c20;
-  padding: 25px;
-  border-radius: 12px;
-  margin: 0 auto;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
   color: #cfd7e3;
 }
 
@@ -294,7 +290,7 @@
 }
 
 /* ----- Responsive ----- */
-@media (max-width: 768px) {
+@media (width <= 768px) {
   .chartContainer {
     height: 250px;
     padding: 10px;

src/components/BMDashboard/Issues/openIssueCharts.jsx

@@ -19,6 +19,7 @@ import {
   fetchLongestOpenIssues,
   setProjectFilter,
 } from '../../../actions/bmdashboard/issueChartActions';
+import { CustomDateComponent } from './CustomDateComponent';
 import styles from './issueCharts.module.css';
 
 /* ---------- helpers ---------- */
@@ -275,6 +276,9 @@ function IssueCharts() {
           <div className={styles.dateRangePicker}>
             <div className={styles.dateRangePickerStart}>
               <DatePicker
+                renderCustomHeader={props => (
+                  <CustomDateComponent {...props} darkMode={darkMode} isStartDate={true} />
+                )}
                 id="start-date"
                 selected={startDate}
                 onChange={date => setStartDate(date)}
@@ -291,6 +295,9 @@ function IssueCharts() {
             <span className={styles.dateRangeSeparator}>to</span>
             <div className={styles.dateRangePickerEnd}>
               <DatePicker
+                renderCustomHeader={props => (
+                  <CustomDateComponent {...props} darkMode={darkMode} isStartDate={false} />
+                )}
                 selected={endDate}
                 onChange={date => setEndDate(date)}
                 selectsEnd
@@ -317,13 +324,12 @@ function IssueCharts() {
             options={projectOptions}
             onChange={handleProjectChange}
             value={projectOptions.filter(option => (selectedProjects ?? []).includes(option.value))}
-            // className={filterSelectClass}
             classNamePrefix="select"
             styles={{
               control: base => ({
                 ...base,
-                backgroundColor: darkMode ? '#22272e' : '#ffffff',
-                borderColor: darkMode ? '#3d444d' : '#ccc',
+                backgroundColor: darkMode ? '#2D3748' : '#ffffff',
+                borderColor: darkMode ? '#4a5568' : '#ccc',
                 color: darkMode ? '#cfd7e3' : '#333',
                 boxShadow: 'none',
                 '&:hover': {
@@ -332,21 +338,21 @@ function IssueCharts() {
               }),
               menu: base => ({
                 ...base,
-                backgroundColor: darkMode ? '#22272e' : '#ffffff',
-                color: darkMode ? '#cfd7e3' : '#333',
+                backgroundColor: darkMode ? '#2D3748' : '#ffffff',
+                color: darkMode ? '#4a5568' : '#333',
               }),
               option: (base, state) => ({
                 ...base,
                 backgroundColor: state.isFocused
                   ? darkMode
-                    ? '#2f3540'
+                    ? '#334155'
                     : '#e5e5e5'
                   : 'transparent',
                 color: darkMode ? '#fff' : '#333',
               }),
               multiValue: base => ({
                 ...base,
-                backgroundColor: darkMode ? '#3d444d' : '#e2e8f0',
+                backgroundColor: darkMode ? '#334155' : '#e2e8f0',
                 color: darkMode ? '#fff' : '#333',
               }),
               multiValueLabel: base => ({
@@ -368,7 +374,16 @@ function IssueCharts() {
 
       <div className={chartContainerClass} ref={chartContainerRef}>
         {/* Step 6: Project Legend above the chart */}
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', marginBottom: '12px' }}>
+        <div
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            gap: '12px',
+            marginBottom: '12px',
+            justifyContent: 'center',
+          }}
+        >
           {projectLegend.map(p => (
             <div key={p.projectId} style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
               <span
@@ -398,7 +413,7 @@ function IssueCharts() {
               <CartesianGrid strokeDasharray="3 3" />
               <XAxis
                 type="number"
-                label={{ value: 'Duration in Months', position: 'insideBottom', offset: -5 }}
+                label={{ value: 'Duration in Months', position: 'insideBottom', offset: -12 }}
               />
               <YAxis
                 dataKey="issueName"
@@ -423,7 +438,6 @@ function IssueCharts() {
                 formatter={value => `${value} months`}
                 labelFormatter={label => `Issue: ${label}`}
               />
-              {/* Step 5: Bar uses per-project colors */}
               <Bar dataKey="durationOpen" barSize={22} isAnimationActive={false}>
                 {chartData.map((entry, index) => (
                   <Cell key={index} fill={projectColorMap[entry.projectId] || '#94a3b8'} />

src/components/BMDashboard/WeeklyProjectSummary/QuantityOfMaterialsUsed/QuantityOfMaterialsUsed.jsx

@@ -16,10 +16,11 @@ import {
   PointElement,
   LineController,
 } from 'chart.js';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import ReactTooltip from 'react-tooltip';
 import { Info, Repeat } from 'lucide-react';
 import { v4 as uuidv4 } from 'uuid';
+import { fetchBMProjects } from '../../../../actions/bmdashboard/projectActions';
 import styles from './QuantityOfMaterialsUsed.module.css';
 
 ChartJS.register(
@@ -68,13 +69,15 @@ function getRandomColor() {
 }
 
 function QuantityOfMaterialsUsed({ data }) {
+  const dispatch = useDispatch();
   const [chartData, setChartData] = useState(null);
   const [selectedMaterials, setSelectedMaterials] = useState([]);
   const [selectedDate, setSelectedDate] = useState('Last Week');
   const [dateRangeOne, setDateRangeOne] = useState([null, null]);
   const [dateRangeTwo, setDateRangeTwo] = useState([null, null]);
   const darkMode = useSelector(state => state.theme.darkMode);
-  const selectedOrg = useSelector(state => state.weeklyProjectSummary.projectFilter);
+  const projects = useSelector(state => state.bmProjects);
+  const [selectedProjects, setSelectedProjects] = useState([]);
   const [legendColors, setLegendColors] = useState([]);
   const chartContainerRef = useRef(null);
   const [visibleRange, setVisibleRange] = useState([0, 30]);
@@ -83,6 +86,10 @@ function QuantityOfMaterialsUsed({ data }) {
 
   const [isSmallScreen, setIsSmallScreen] = useState(false);
 
+  useEffect(() => {
+    dispatch(fetchBMProjects());
+  }, [dispatch]);
+
   const selectStyles = useMemo(
     () => ({
       control: base => ({
@@ -190,7 +197,10 @@ function QuantityOfMaterialsUsed({ data }) {
     return Array.from(uniqueMaterials.values());
   }, [data]);
 
-  const orgOptions = useMemo(() => [{ value: selectedOrg, label: selectedOrg }], [selectedOrg]);
+  const projectOptions = projects.map(project => ({
+    value: project._id,
+    label: project.name,
+  }));
 
   const dateOptions = useMemo(
     () => [
@@ -493,7 +503,7 @@ function QuantityOfMaterialsUsed({ data }) {
           : []),
       ],
     });
-  }, [data, selectedMaterials, selectedOrg, selectedDate, dateRangeOne, dateRangeTwo]);
+  }, [data, selectedMaterials, selectedProjects, selectedDate, dateRangeOne, dateRangeTwo]);
 
   const barWidth = 12;
   // Subtract the 40-px y-axis offset
@@ -735,13 +745,16 @@ function QuantityOfMaterialsUsed({ data }) {
         />
 
         <Select
-          options={orgOptions}
-          value={orgOptions.find(option => option.value === selectedOrg)}
-          placeholder="Organization"
+          options={projectOptions}
+          isMulti
+          isSearchable
+          value={projectOptions.find(option => option.value === selectedProjects)}
+          placeholder="Projects"
           menuPlacement={isSmallScreen ? 'top' : 'auto'}
           classNamePrefix="custom-select"
           className={`quantity-of-materials-used-dropdown-item ${styles.dropdownItem}`}
-          // isDisabled
+          closeMenuOnSelect={false}
+          hideSelectedOptions={true}
           styles={selectStyles}
         />
         <Select