From ebdba382497e9c9a95e04c8220278d8f3a741ca4 Mon Sep 17 00:00:00 2001
From: brianbrix <mokandubrian@gmail.com>
Date: Thu, 18 Jun 2026 07:57:12 +0300
Subject: [PATCH] AMP-31147 : Fix missing selections on shared dashboard

---
 .../ndddashboard/actions/generateShareLink.js |  4 +-
 .../components/NDDDashboardHome.jsx           |  7 ++-
 .../modules/ndddashboard/components/Share.jsx |  7 +--
 .../components/sections/IndicatorBySector.tsx | 26 +++++++---
 .../sections/SectorClassification.tsx         | 47 ++++++++++++++-----
 .../fetchSectorClassificationReducer.ts       | 26 +++++++++-
 6 files changed, 90 insertions(+), 27 deletions(-)

diff --git a/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/actions/generateShareLink.js b/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/actions/generateShareLink.js
index fe209685efc..5d0f4f8aee3 100755
--- a/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/actions/generateShareLink.js
+++ b/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/actions/generateShareLink.js
@@ -4,7 +4,7 @@ import {
 import { fetchApiData } from '../../../utils/apiOperations';
 import { SHARING_EP } from '../utils/constants';
 
-export const getShareLink = (filters, settings, fundingType, selectedPrograms) => dispatch => {
+export const getShareLink = (filters, settings, fundingType, selectedPrograms, meState) => dispatch => {
   dispatch(fetchShareLinkPending());
   return fetchApiData({
     url: SHARING_EP,
@@ -12,7 +12,7 @@ export const getShareLink = (filters, settings, fundingType, selectedPrograms) =
       title: '',
       description: '',
       stateBlob: JSON.stringify({
-        filters, settings, fundingType, selectedPrograms
+        filters, settings, fundingType, selectedPrograms, meState
       })
     }
   })
diff --git a/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/components/NDDDashboardHome.jsx b/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/components/NDDDashboardHome.jsx
index 13a13c2b74e..6392a0350a5 100755
--- a/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/components/NDDDashboardHome.jsx
+++ b/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/components/NDDDashboardHome.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useContext, useCallback } from 'react';
 import { Container } from 'react-bootstrap';
 import { bindActionCreators } from 'redux';
-import { connect, useSelector } from 'react-redux';
+import { connect, useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { NDDTranslationContext } from './StartUp';
 import HeaderContainer from './HeaderContainer';
@@ -17,6 +17,7 @@ import './print.css';
 import { removeFilter } from '../utils/Utils';
 import { SRC_DIRECT } from './charts/FundingByYearChart';
 import { useLocation, useParams } from 'react-router-dom';
+import { setMeState } from '../medashboard/reducers/fetchSectorClassificationReducer';
 
 const NDDDashboardHome = (props) => {
     const {
@@ -39,6 +40,7 @@ const NDDDashboardHome = (props) => {
 
     const location = useLocation();
     const urlParams = useParams();
+    const dispatch = useDispatch();
     const params = new URLSearchParams(window.location.search);
     const [state, setState] = useState({
         filters: undefined,
@@ -103,6 +105,9 @@ const NDDDashboardHome = (props) => {
                     if (savedData && savedData.selectedPrograms) {
                         ids = savedData.selectedPrograms;
                     }
+                    if (savedData && savedData.meState) {
+                        dispatch(setMeState(savedData.meState));
+                    }
                 }
 
                 setState(prevState => ({
diff --git a/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/components/Share.jsx b/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/components/Share.jsx
index 26f01629ad9..dc8ea09e7bb 100755
--- a/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/components/Share.jsx
+++ b/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/components/Share.jsx
@@ -35,9 +35,9 @@ class Share extends Component {
      // TODO: prepare data chart settings.
      // eslint-disable-next-line no-shadow
      const {
-       _getShareLink, filters, settings, fundingType, selectedPrograms
+       _getShareLink, filters, settings, fundingType, selectedPrograms, meState
      } = this.props;
-     return _getShareLink(filters ? filters.filters : null, settings, fundingType, selectedPrograms);
+     return _getShareLink(filters ? filters.filters : null, settings, fundingType, selectedPrograms, meState);
    }
 
    generateModal() {
@@ -91,7 +91,8 @@ class Share extends Component {
 
 const mapStateToProps = state => ({
   shareLink: state.shareLinkReducer.shareLink,
-  translations: state.translationsReducer.translations
+  translations: state.translationsReducer.translations,
+  meState: state.fetchSectorClassificationReducer.meState
 });
 
 const mapDispatchToProps = dispatch => bindActionCreators({
diff --git a/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/medashboard/components/sections/IndicatorBySector.tsx b/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/medashboard/components/sections/IndicatorBySector.tsx
index 6962447905b..f46b285c4af 100644
--- a/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/medashboard/components/sections/IndicatorBySector.tsx
+++ b/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/medashboard/components/sections/IndicatorBySector.tsx
@@ -1,11 +1,12 @@
-import React, {useEffect} from "react";
+import React, {useEffect, useRef} from "react";
 import styles from './css/Styles.module.css';
 import {Col, Row} from "react-bootstrap";
 import ChartUtils from "../../utils/chart";
 import {IndicatorObjectType, SectorObjectType} from "../../../../admin/indicator_manager/types";
 import {DefaultTranslations} from "../../types";
 import IndicatorProgressChart from "../IndicatorProgressChart";
-import {useSelector} from "react-redux";
+import {useSelector, useDispatch} from "react-redux";
+import {setMeState} from "../../reducers/fetchSectorClassificationReducer";
 
 interface IndicatorBySectorProps {
     translations: DefaultTranslations;
@@ -21,6 +22,9 @@ const IndicatorBySector: React.FC<IndicatorBySectorProps> = (props) => {
     // @ts-ignore
     const globalSettings = useSelector(state => state.fetchSettingsReducer.settings);
     const selectedSector: SectorObjectType = useSelector((state: any) => state.fetchSectorClassificationReducer.selectedSector);
+    const meState = useSelector((state: any) => state.fetchSectorClassificationReducer.meState);
+    const dispatch = useDispatch();
+    const hasRestoredRef = useRef(false);
 
     const [selectedIndicatorId, setSelectedIndicatorId] = React.useState<number | null>(null);
     const [selectedIndicator, setSelectedIndicator] = React.useState<IndicatorObjectType | null>(null);
@@ -33,8 +37,16 @@ const IndicatorBySector: React.FC<IndicatorBySectorProps> = (props) => {
 
     useEffect(() => {
         if (indicators.length > 0) {
-            setSelectedIndicatorId(indicators[0].id);
-            setSelectedIndicator(indicators[0])
+            let targetId = indicators[0].id;
+            if (!hasRestoredRef.current) {
+                hasRestoredRef.current = true;
+                const savedId = meState.indicators && meState.indicators[index];
+                if (savedId && indicators.find((i: IndicatorObjectType) => i.id === savedId)) {
+                    targetId = savedId;
+                }
+            }
+            setSelectedIndicatorId(targetId);
+            setSelectedIndicator(indicators.find((i: IndicatorObjectType) => i.id === targetId) ?? indicators[0]);
         }
     }, [indicators]);
 
@@ -73,10 +85,12 @@ const IndicatorBySector: React.FC<IndicatorBySectorProps> = (props) => {
                                 </select>
                             ) : (
                                 <select
-                                    defaultValue={indicators[0].id}
+                                    value={selectedIndicatorId ?? (indicators.length > 0 ? indicators[0].id : undefined)}
                                     onChange={(e) => {
+                                        const newId = parseInt(e.target.value);
                                         setSelectedIndicator(null);
-                                        setSelectedIndicatorId(parseInt(e.target.value))
+                                        setSelectedIndicatorId(newId);
+                                        dispatch(setMeState({ indicators: { ...meState.indicators, [index]: newId } }));
                                     }}
                                     style={{
                                         backgroundColor: '#f3f5f8',
diff --git a/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/medashboard/components/sections/SectorClassification.tsx b/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/medashboard/components/sections/SectorClassification.tsx
index 130e92eaf7f..4a8f2c713e9 100644
--- a/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/medashboard/components/sections/SectorClassification.tsx
+++ b/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/medashboard/components/sections/SectorClassification.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {Col, Row} from "react-bootstrap";
 import ChartUtils from "../../utils/chart";
 import {useSelector, useDispatch } from "react-redux";
@@ -11,7 +11,7 @@ import {FUNDING_TYPE} from "../../../utils/constants";
 import EllipsisText from "react-ellipsis-text";
 import { Tooltip }  from "react-tooltip";
 import NoData from "../NoData";
-import {setSelectedSectorState} from "../../reducers/fetchSectorClassificationReducer";
+import {setSelectedSectorState, setMeState} from "../../reducers/fetchSectorClassificationReducer";
 
 const CustomLegend = ({ data }) => (
     <div style={{ display: 'flex', justifyContent: 'center', marginTop: '20px' }}>
@@ -50,10 +50,13 @@ const SectorClassification: React.FC<SectorProgressProps> = (props) => {
 
     const [selectedSectorClassification, setSelectedSectorClassification] = React.useState<number | null>(null);
     const [selectedSectorScheme, setSelectedSectorScheme] = React.useState<any>(null);
+    const [selectedSectorLocal, setSelectedSectorLocal] = React.useState<number | null>(null);
 
     const [sectorScheme, setSectorScheme] = React.useState<SectorScheme>();
 
     const sectorClassification: SectorClassifcation [] = useSelector((state: any) => state.fetchSectorClassificationReducer.data);
+    const meState = useSelector((state: any) => state.fetchSectorClassificationReducer.meState);
+    const pendingRestoreSectorIdRef = useRef<number | null>(null);
     const [sectors, setSectors] = React.useState<SectorObjectType[]>([]);
     const [sectorReport, setSectorReport] = React.useState<DataType[]>();
 
@@ -68,8 +71,17 @@ const SectorClassification: React.FC<SectorProgressProps> = (props) => {
             setSectorScheme(classification.sectorScheme);
             const sectorData = classification.sectorScheme.children;
             setSectors(sectorData);
-            setSelectedSector(sectorData[0].id)
-            dispatch(setSelectedSectorState(sectorData[0]));
+
+            const restoreSectorId = pendingRestoreSectorIdRef.current;
+            pendingRestoreSectorIdRef.current = null;
+            const targetSector = (restoreSectorId && sectorData.find((s: SectorObjectType) => s.id === restoreSectorId))
+                ? sectorData.find((s: SectorObjectType) => s.id === restoreSectorId)!
+                : sectorData[0];
+
+            setSelectedSectorLocal(targetSector.id);
+            setSelectedSector(targetSector.id);
+            dispatch(setSelectedSectorState(targetSector));
+            dispatch(setMeState({ sectorClassificationId: selectedSectorClassification, sectorId: targetSector.id }));
         }
     }
 
@@ -111,14 +123,14 @@ const SectorClassification: React.FC<SectorProgressProps> = (props) => {
 
     useEffect(() => {
         if (sectorClassification.length > 0) {
-            setSelectedSectorClassification(sectorClassification[0].id);
+            const initClassificationId = meState.sectorClassificationId ?? sectorClassification[0].id;
+            if (meState.sectorId) {
+                pendingRestoreSectorIdRef.current = meState.sectorId;
+            }
+            setSelectedSectorClassification(initClassificationId);
         }
     }, []);
 
-    useEffect(() => {
-        handleSectorClassificationChange();
-    }, [selectedSectorClassification]);
-
     useEffect(() => {
         setSectorReport(undefined);
         if (sectorReportReducer.data) {
@@ -162,9 +174,11 @@ const SectorClassification: React.FC<SectorProgressProps> = (props) => {
                                 </select>
                             ) : (
                                 <select
-                                    defaultValue={sectorClassification[0].id}
+                                    value={selectedSectorClassification ?? sectorClassification[0].id}
                                     onChange={(e) => {
-                                        setSelectedSectorClassification(parseInt(e.target.value));
+                                        const newId = parseInt(e.target.value);
+                                        dispatch(setMeState({ sectorClassificationId: newId, sectorId: null, indicators: {} }));
+                                        setSelectedSectorClassification(newId);
                                     }}
                                     style={{
                                         backgroundColor: '#f3f5f8',
@@ -208,8 +222,15 @@ const SectorClassification: React.FC<SectorProgressProps> = (props) => {
                                 </select>
                             ) : (
                                 <select
-                                    defaultValue={sectors[0].id}
-                                    onChange={(e) => setSelectedSector(parseInt(e.target.value))}
+                                    value={selectedSectorLocal ?? (sectors.length > 0 ? sectors[0].id : undefined)}
+                                    onChange={(e) => {
+                                        const newId = parseInt(e.target.value);
+                                        setSelectedSectorLocal(newId);
+                                        setSelectedSector(newId);
+                                        dispatch(setMeState({ sectorId: newId, indicators: {} }));
+                                        const found = sectors.find((s: SectorObjectType) => s.id === newId);
+                                        if (found) dispatch(setSelectedSectorState(found));
+                                    }}
                                     style={{
                                         backgroundColor: '#f3f5f8',
                                         boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px'
diff --git a/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/medashboard/reducers/fetchSectorClassificationReducer.ts b/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/medashboard/reducers/fetchSectorClassificationReducer.ts
index f83ecf463e0..2e1fc3ed1bc 100644
--- a/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/medashboard/reducers/fetchSectorClassificationReducer.ts
+++ b/amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/ndddashboard/medashboard/reducers/fetchSectorClassificationReducer.ts
@@ -7,20 +7,34 @@ import {extractSectors} from "../utils/data";
 
 const REDUCER_NAME = 'sectorClassification';
 
+type MeStateType = {
+    sectorClassificationId: number | null;
+    sectorId: number | null;
+    indicators: Record<number, number>;
+};
+
 type SectorClassificationInitialStateType = {
     data: SectorClassifcation[];
     loading: boolean;
     error: any;
     sectors: SectorObjectType[];
     selectedSector: SectorObjectType | null;
+    meState: MeStateType;
 }
 
+const initialMeState: MeStateType = {
+    sectorClassificationId: null,
+    sectorId: null,
+    indicators: {}
+};
+
 const initialState: SectorClassificationInitialStateType = {
     data: [],
     loading: false,
     error: null,
     sectors: [],
-    selectedSector: null
+    selectedSector: null,
+    meState: initialMeState
 }
 
 export const fetchSectorClassification = createAsyncThunk(
@@ -47,6 +61,12 @@ const fetchSectorClassificationSlice = createSlice({
         },
         clearSelectedSectorState: (state) => {
             state.selectedSector = null;
+        },
+        setMeState: (state, action) => {
+            state.meState = { ...state.meState, ...action.payload };
+        },
+        clearMeState: (state) => {
+            state.meState = { ...initialMeState };
         }
     },
     extraReducers: (builder) => {
@@ -72,7 +92,9 @@ const fetchSectorClassificationSlice = createSlice({
 export const {
     resetState,
     setSelectedSectorState,
-    clearSelectedSectorState
+    clearSelectedSectorState,
+    setMeState,
+    clearMeState
 } = fetchSectorClassificationSlice.actions;
 
 export default fetchSectorClassificationSlice.reducer;