Amaan - Fix scrollbar/clip artifact on Project Status cards – Total Construction Summary Report

src/actions/bmdashboard/weeklyProjectSummaryActions.js

@@ -1,7 +1,12 @@
+import axios from 'axios';
+import { ENDPOINTS } from '~/utils/URL';
 import {
   SET_PROJECT_FILTER,
   SET_DATE_RANGE_FILTER,
   SET_COMPARISON_PERIOD_FILTER,
+  FETCH_WEEKLY_PROJECT_SUMMARY_PROJECT_STATUS_BEGIN,
+  FETCH_WEEKLY_PROJECT_SUMMARY_PROJECT_STATUS_SUCCESS,
+  FETCH_WEEKLY_PROJECT_SUMMARY_PROJECT_STATUS_ERROR,
 } from '../../constants/bmdashboard/weeklyProjectSummaryConstants';
 
 export const setProjectFilter = project => ({
@@ -18,3 +23,38 @@ export const setComparisonPeriodFilter = comparisonPeriod => ({
   type: SET_COMPARISON_PERIOD_FILTER,
   payload: comparisonPeriod,
 });
+
+export const fetchWeeklyProjectSummaryProjectStatusBegin = () => ({
+  type: FETCH_WEEKLY_PROJECT_SUMMARY_PROJECT_STATUS_BEGIN,
+});
+
+export const fetchWeeklyProjectSummaryProjectStatusSuccess = payload => ({
+  type: FETCH_WEEKLY_PROJECT_SUMMARY_PROJECT_STATUS_SUCCESS,
+  payload,
+});
+
+export const fetchWeeklyProjectSummaryProjectStatusError = error => ({
+  type: FETCH_WEEKLY_PROJECT_SUMMARY_PROJECT_STATUS_ERROR,
+  payload: error,
+});
+
+export const fetchWeeklyProjectSummaryProjectStatus = params => async dispatch => {
+  dispatch(fetchWeeklyProjectSummaryProjectStatusBegin());
+
+  try {
+    const queryParams = new URLSearchParams();
+    Object.entries(params || {}).forEach(([key, value]) => {
+      if (value !== undefined && value !== null && value !== '') {
+        queryParams.append(key, value);
+      }
+    });
+
+    const url = `${ENDPOINTS.BM_WEEKLY_PROJECT_SUMMARY_PROJECT_STATUS}?${queryParams.toString()}`;
+    const response = await axios.get(url);
+    dispatch(fetchWeeklyProjectSummaryProjectStatusSuccess(response.data));
+    return response.data;
+  } catch (error) {
+    dispatch(fetchWeeklyProjectSummaryProjectStatusError(error));
+    return null;
+  }
+};

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

@@ -68,7 +68,12 @@ function getRandomColor() {
   return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 }
 
-function QuantityOfMaterialsUsed({ data }) {
+function QuantityOfMaterialsUsed({
+  data,
+  comparisonMode = 'No Comparison',
+  currentDateRange = {},
+  comparisonDateRange = {},
+}) {
   const dispatch = useDispatch();
   const [chartData, setChartData] = useState(null);
   const [selectedMaterials, setSelectedMaterials] = useState([]);
@@ -85,6 +90,7 @@ function QuantityOfMaterialsUsed({ data }) {
   const [showModal, setShowModal] = useState(false);
 
   const [isSmallScreen, setIsSmallScreen] = useState(false);
+  const comparisonEnabled = comparisonMode !== 'No Comparison';
 
   useEffect(() => {
     dispatch(fetchBMProjects());
@@ -216,6 +222,28 @@ function QuantityOfMaterialsUsed({ data }) {
     [],
   );
 
+  useEffect(() => {
+    if (comparisonMode !== 'No Comparison') {
+      const parseDate = date => (date ? new Date(date) : null);
+      setSelectedDate('Custom');
+      setDateRangeOne([parseDate(currentDateRange.startDate), parseDate(currentDateRange.endDate)]);
+      setDateRangeTwo([
+        parseDate(comparisonDateRange.comparisonStartDate),
+        parseDate(comparisonDateRange.comparisonEndDate),
+      ]);
+    } else {
+      setSelectedDate('Last Week');
+      setDateRangeOne([null, null]);
+      setDateRangeTwo([null, null]);
+    }
+  }, [
+    comparisonMode,
+    currentDateRange.startDate,
+    currentDateRange.endDate,
+    comparisonDateRange.comparisonStartDate,
+    comparisonDateRange.comparisonEndDate,
+  ]);
+
   const getPeriodLabel = date => {
     if (date === 'ALL') return 'Total Materials Used';
 
@@ -379,7 +407,7 @@ function QuantityOfMaterialsUsed({ data }) {
         if (isPeriodOne) {
           periodOneUsage += record?.quantityUsed || 0;
         }
-        if (isPeriodTwo) {
+        if (comparisonEnabled && isPeriodTwo) {
           periodTwoUsage += record?.quantityUsed || 0;
         }
       });
@@ -420,7 +448,7 @@ function QuantityOfMaterialsUsed({ data }) {
       return 'gray';
     });
 
-    if (periodOneUsageMap.size === 0 && periodTwoUsageMap.size > 0) {
+    if (comparisonEnabled && periodOneUsageMap.size === 0 && periodTwoUsageMap.size > 0) {
       let sortedPreviousData = Array.from(periodTwoUsageMap);
 
       if (selectedMaterials.length > 0) {
@@ -481,7 +509,7 @@ function QuantityOfMaterialsUsed({ data }) {
           type: 'bar',
           order: 2,
         },
-        ...(selectedDate !== 'ALL'
+        ...(comparisonEnabled && selectedDate !== 'ALL'
           ? [
               {
                 label: `${getPeriodLabel(selectedDate).split(' vs ')[1]} Usage`,
@@ -503,7 +531,15 @@ function QuantityOfMaterialsUsed({ data }) {
           : []),
       ],
     });
-  }, [data, selectedMaterials, selectedProjects, selectedDate, dateRangeOne, dateRangeTwo]);
+  }, [
+    data,
+    selectedMaterials,
+    selectedProjects,
+    selectedDate,
+    dateRangeOne,
+    dateRangeTwo,
+    comparisonEnabled,
+  ]);
 
   const barWidth = 12;
   // Subtract the 40-px y-axis offset