diff --git a/src/components/BMDashboard/WeeklyProjectSummary/ProjectRiskProfileOverview.jsx b/src/components/BMDashboard/WeeklyProjectSummary/ProjectRiskProfileOverview.jsx index 638d41f34d..1effa1946b 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,113 @@ export default function ProjectRiskProfileOverview() { return `${selectedDates.length} selected`; }; + const getOptionBackgroundColor = isFocused => { + if (isFocused) { + return darkMode ? '#3a506b' : '#f0f0f0'; + } + return darkMode ? '#1c2541' : '#ffffff'; + }; + + const customSelectStyles = { + control: base => ({ + ...base, + fontSize: 14, + minHeight: 22, + width: 120, + background: 'none', + border: 'none', + boxShadow: 'none', + textAlign: 'center', + alignItems: 'center', + padding: 0, + }), + valueContainer: base => ({ + ...base, + padding: '0 2px', + justifyContent: 'center', + }), + multiValue: base => ({ + ...base, + background: darkMode ? '#3a506b' : '#e6f7ff', + fontSize: 12, + margin: '0 2px', + }), + multiValueLabel: base => ({ + ...base, + color: darkMode ? '#ffffff' : '#000000', + }), + multiValueRemove: base => ({ + ...base, + color: darkMode ? '#ffffff' : '#000000', + ':hover': { + backgroundColor: darkMode ? '#2f4157' : '#bae7ff', + color: darkMode ? '#ffffff' : '#000000', + }, + }), + input: base => ({ + ...base, + margin: 0, + padding: 0, + textAlign: 'center', + color: darkMode ? '#ffffff' : '#000000', + }), + placeholder: base => ({ + ...base, + color: '#aaa', + textAlign: 'center', + }), + dropdownIndicator: base => ({ + ...base, + padding: 0, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }), + menu: base => ({ + ...base, + zIndex: 9999, + fontSize: 14, + background: darkMode ? '#1c2541' : '#ffffff', + }), + option: (base, state) => ({ + ...base, + backgroundColor: getOptionBackgroundColor(state.isFocused), + color: darkMode ? '#ffffff' : '#000000', + fontWeight: state.isFocused ? 'bold' : 'normal', + '&:active': { + backgroundColor: darkMode ? '#2f4157' : '#e6f7ff', + }, + }), + }; + + // 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