From 9a77a15c8a781120f684ae223eabcf7e2cbf02a0 Mon Sep 17 00:00:00 2001 From: Sudheesh T D Date: Tue, 24 Feb 2026 12:46:43 -0600 Subject: [PATCH 1/3] Fix: Made new PR as the old one was not accurate as the code was changes after pushing --- .../ProjectRiskProfileOverview.jsx | 233 ++- .../ProjectRiskProfileOverview.module.css | 174 +- yarn.lock | 1818 ++++++++--------- 3 files changed, 984 insertions(+), 1241 deletions(-) diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ProjectRiskProfileOverview.jsx b/src/components/BMDashboard/WeeklyProjectSummary/ProjectRiskProfileOverview.jsx index 638d41f34d..82cf412a04 100644 --- a/src/components/BMDashboard/WeeklyProjectSummary/ProjectRiskProfileOverview.jsx +++ b/src/components/BMDashboard/WeeklyProjectSummary/ProjectRiskProfileOverview.jsx @@ -1,4 +1,5 @@ import { useState, useEffect, useRef } from 'react'; +import { useSelector } from 'react-redux'; import { BarChart, Bar, @@ -11,10 +12,12 @@ import { } from 'recharts'; import Select from 'react-select'; import httpService from '../../../services/httpService'; +import styles from './ProjectRiskProfileOverview.module.css'; // Fetch project risk profile data from backend export default function ProjectRiskProfileOverview() { + const darkMode = useSelector(state => state.theme?.darkMode || false); const [data, setData] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -26,8 +29,24 @@ export default function ProjectRiskProfileOverview() { const [showDateDropdown, setShowDateDropdown] = useState(false); // Refs for focusing dropdowns - const allSpanRef = useRef(null); - const dateSpanRef = useRef(null); + const projectWrapperRef = useRef(null); + const dateWrapperRef = useRef(null); + + useEffect(() => { + function handleClickOutside(event) { + if (projectWrapperRef.current && !projectWrapperRef.current.contains(event.target)) { + setShowProjectDropdown(false); + } + if (dateWrapperRef.current && !dateWrapperRef.current.contains(event.target)) { + setShowDateDropdown(false); + } + } + + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, []); useEffect(() => { async function fetchData() { @@ -76,76 +95,34 @@ export default function ProjectRiskProfileOverview() { return `${selectedDates.length} selected`; }; + // Colors aligned with your global theme + const chartColors = { + grid: darkMode ? 'rgba(255,255,255,0.1)' : '#e5e5e5', + text: darkMode ? '#e5e5e5' : '#333', + tooltipBg: darkMode ? '#1c2541' : '#ffffff', + tooltipBorder: darkMode ? '#3a506b' : '#ccc', + tooltipText: darkMode ? '#ffffff' : '#000000', + }; + if (loading) return
Loading project risk profiles...
; if (error) return
{error}
; return ( -
-

Project Risk Profile Overview

-
+
+

Project Risk Profile Overview

+
{/* Project Dropdown */} -
- Project +
+ Project