From bbdedf8873dce10b360e8990d0a7671d2a980b7c Mon Sep 17 00:00:00 2001 From: Stefanos Hadjipetrou Date: Tue, 17 Sep 2024 17:54:29 +0300 Subject: [PATCH] feat: datasets latest update date --- .../components/button-toolbar/index.tsx | 2 - src/app/components/chart-block/data.ts | 1 + src/app/components/chart-block/index.tsx | 19 +- src/app/hooks/useGetDatasetLatestUpdate.tsx | 35 ++++ src/app/hooks/useInitialLoad.tsx | 4 + .../blocks/block-1/index.tsx | 9 + .../blocks/block-2/index.tsx | 5 + .../blocks/block-3/index.tsx | 5 + .../blocks/block-4/index.tsx | 8 + .../blocks/block-5/index.tsx | 5 + .../pages/datasets/annual-results/index.tsx | 11 +- .../pages/datasets/common/chart-block/data.ts | 1 + .../datasets/common/chart-block/index.tsx | 13 +- .../blocks/block-1/index.tsx | 173 ++++++++++-------- .../blocks/block-2/index.tsx | 6 +- .../blocks/block-3/index.tsx | 5 + .../blocks/block-4/index.tsx | 10 + .../blocks/block-5/index.tsx | 5 + .../blocks/block-6/index.tsx | 9 +- .../datasets/resource-mobilization/index.tsx | 13 +- src/app/pages/geography/index.tsx | 9 + .../views/grant-implementation/index.tsx | 13 ++ src/app/pages/grants/data.tsx | 1 + src/app/pages/grants/index.tsx | 5 + src/app/pages/grants/layout.tsx | 5 + src/app/pages/home/blocks/block-1/index.tsx | 8 +- src/app/pages/home/blocks/block-2/index.tsx | 8 +- src/app/pages/home/blocks/block-3/index.tsx | 5 + src/app/pages/home/blocks/block-4/index.tsx | 6 + src/app/pages/home/blocks/block-5/index.tsx | 5 + .../views/access-to-funding/index.tsx | 14 ++ .../blocks/block-1/index.tsx | 6 + .../blocks/block-2/index.tsx | 5 + .../blocks/block-3/index.tsx | 5 + .../blocks/block-4/index.tsx | 8 +- .../views/resource-mobilization/index.tsx | 7 +- .../pages/location/views/results/index.tsx | 8 +- .../action-reducers/latest-update/index.ts | 6 + src/app/state/api/interfaces/index.ts | 2 + src/app/state/store/index.ts | 3 + 40 files changed, 367 insertions(+), 101 deletions(-) create mode 100644 src/app/hooks/useGetDatasetLatestUpdate.tsx create mode 100644 src/app/state/api/action-reducers/latest-update/index.ts diff --git a/src/app/components/chart-block/components/button-toolbar/index.tsx b/src/app/components/chart-block/components/button-toolbar/index.tsx index ca218d073..c08ccf0d1 100644 --- a/src/app/components/chart-block/components/button-toolbar/index.tsx +++ b/src/app/components/chart-block/components/button-toolbar/index.tsx @@ -69,9 +69,7 @@ export const ChartBlockButtonToolbar: React.FC = ( = ( > {content} - {!props.noBottomToolbar && ( - + + {props.latestUpdate && ( + + Latest Update: {props.latestUpdate} + + )} + {!props.noBottomToolbar && ( - - )} + )} + ); }; diff --git a/src/app/hooks/useGetDatasetLatestUpdate.tsx b/src/app/hooks/useGetDatasetLatestUpdate.tsx new file mode 100644 index 000000000..32c952b25 --- /dev/null +++ b/src/app/hooks/useGetDatasetLatestUpdate.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import get from "lodash/get"; +import find from "lodash/find"; +import { useStoreState } from "app/state/store/hooks"; + +export const useGetDatasetLatestUpdate = (props: { + dataset: + | "allocations" + | "budgets" + | "disbursements" + | "eligibility" + | "expenditures" + | "funding_requests" + | "geographies" + | "grants" + | "pledges-contributions" + | "results"; +}) => { + const datasetsLatestUpdate = useStoreState( + (state) => + get(state.datasetsLatestUpdate, "data.data", []) as { + name: string; + date: string; + }[] + ); + + const value = React.useMemo(() => { + if (datasetsLatestUpdate) { + return find(datasetsLatestUpdate, { name: props.dataset })?.date; + } + return ""; + }, [datasetsLatestUpdate, props.dataset]); + + return value; +}; diff --git a/src/app/hooks/useInitialLoad.tsx b/src/app/hooks/useInitialLoad.tsx index 616677a5a..7c1d3be00 100644 --- a/src/app/hooks/useInitialLoad.tsx +++ b/src/app/hooks/useInitialLoad.tsx @@ -47,6 +47,9 @@ export const useInitialLoad = () => { const fetchStatusFilterOptions = useStoreActions( (actions) => actions.StatusFilterOptions.fetch ); + const datasetsLatestUpdate = useStoreActions( + (actions) => actions.datasetsLatestUpdate.fetch + ); React.useEffect(() => { fetchAllocationsCycles({}); @@ -72,6 +75,7 @@ export const useInitialLoad = () => { }); fetchPartnerTypeFilterOptions({}); fetchStatusFilterOptions({}); + datasetsLatestUpdate({}); }, []); return null; diff --git a/src/app/pages/datasets/access-to-funding/blocks/block-1/index.tsx b/src/app/pages/datasets/access-to-funding/blocks/block-1/index.tsx index c77e489a0..db022c8b7 100644 --- a/src/app/pages/datasets/access-to-funding/blocks/block-1/index.tsx +++ b/src/app/pages/datasets/access-to-funding/blocks/block-1/index.tsx @@ -8,6 +8,7 @@ import { Dropdown } from "app/components/dropdown"; import { getCMSDataField } from "app/utils/getCMSDataField"; import CircularProgress from "@mui/material/CircularProgress"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; interface AccessToFundingBlock1Props { filterString: string; @@ -17,6 +18,9 @@ export const AccessToFundingBlock1: React.FC = ( props: AccessToFundingBlock1Props ) => { const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "eligibility", + }); const eligibilityYears = useStoreState( (state) => @@ -155,6 +159,11 @@ export const AccessToFundingBlock1: React.FC = ( ))} + + + Latest Update: {latestUpdateDate} + + ); diff --git a/src/app/pages/datasets/access-to-funding/blocks/block-2/index.tsx b/src/app/pages/datasets/access-to-funding/blocks/block-2/index.tsx index 423ad7b70..349d6d0c2 100644 --- a/src/app/pages/datasets/access-to-funding/blocks/block-2/index.tsx +++ b/src/app/pages/datasets/access-to-funding/blocks/block-2/index.tsx @@ -13,6 +13,7 @@ import { TableContainer } from "app/components/table-container"; import { FilterGroupModel } from "app/components/filters/list/data"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; import { DatasetChartBlock } from "app/pages/datasets/common/chart-block"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; import { defaultAppliedFilters } from "app/state/api/action-reducers/sync/filters"; import { cellBGColorFormatter, @@ -29,6 +30,9 @@ export const AccessToFundingBlock2: React.FC = ( ) => { const location = useLocation(); const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "eligibility", + }); const [chart1AppliedFilters, setChart1AppliedFilters] = React.useState< string[] @@ -223,6 +227,7 @@ export const AccessToFundingBlock2: React.FC = ( )} dropdownItems={[]} disableCollapse + latestUpdate={latestUpdateDate} loading={loadingEligibilityTable} filterGroups={props.filterGroups} appliedFilters={chart1AppliedFilters} diff --git a/src/app/pages/datasets/access-to-funding/blocks/block-3/index.tsx b/src/app/pages/datasets/access-to-funding/blocks/block-3/index.tsx index b23efa360..e264f6533 100644 --- a/src/app/pages/datasets/access-to-funding/blocks/block-3/index.tsx +++ b/src/app/pages/datasets/access-to-funding/blocks/block-3/index.tsx @@ -13,6 +13,7 @@ import { FilterGroupModel } from "app/components/filters/list/data"; import { TreemapDataItem } from "app/components/charts/treemap/data"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; import { DatasetChartBlock } from "app/pages/datasets/common/chart-block"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; import { defaultAppliedFilters } from "app/state/api/action-reducers/sync/filters"; import { dropdownItemsAllocations } from "app/pages/datasets/access-to-funding/data"; import { @@ -30,6 +31,9 @@ export const AccessToFundingBlock3: React.FC = ( ) => { const location = useLocation(); const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "allocations", + }); const [dropdownSelected, setDropdownSelected] = React.useState( dropdownItemsAllocations[0].value @@ -344,6 +348,7 @@ export const AccessToFundingBlock3: React.FC = ( "Allocations amounts for countries." )} dropdownItems={dropdownItemsAllocations} + latestUpdate={latestUpdateDate} dropdownSelected={dropdownSelected} handleDropdownChange={handleSelectionChange} loading={loadingAllocations} diff --git a/src/app/pages/datasets/access-to-funding/blocks/block-4/index.tsx b/src/app/pages/datasets/access-to-funding/blocks/block-4/index.tsx index 67e9c241c..3492ad77c 100644 --- a/src/app/pages/datasets/access-to-funding/blocks/block-4/index.tsx +++ b/src/app/pages/datasets/access-to-funding/blocks/block-4/index.tsx @@ -10,6 +10,7 @@ import { BarSeriesChart } from "app/components/charts/bar-series"; import { getRange } from "app/utils/getFinancialValueWithMetricPrefix"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; import { BarSeriesChartDataItem } from "app/components/charts/bar-series/data"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; interface AccessToFundingBlock4Props { filterString: string; @@ -19,6 +20,10 @@ export const AccessToFundingBlock4: React.FC = ( props: AccessToFundingBlock4Props ) => { const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "allocations", + }); + const keysAllocationsBarSeries = useStoreState( (state) => get(state.AccessToFundingAllocationBarSeries, "data.keys", []) as string[] @@ -123,6 +128,9 @@ export const AccessToFundingBlock4: React.FC = ( )} + + Latest Update: {latestUpdateDate} + ); }; diff --git a/src/app/pages/datasets/access-to-funding/blocks/block-5/index.tsx b/src/app/pages/datasets/access-to-funding/blocks/block-5/index.tsx index e5dd26d8d..6159967fb 100644 --- a/src/app/pages/datasets/access-to-funding/blocks/block-5/index.tsx +++ b/src/app/pages/datasets/access-to-funding/blocks/block-5/index.tsx @@ -9,6 +9,7 @@ import { TableContainer } from "app/components/table-container"; import { FilterGroupModel } from "app/components/filters/list/data"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; import { DatasetChartBlock } from "app/pages/datasets/common/chart-block"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; import { defaultAppliedFilters } from "app/state/api/action-reducers/sync/filters"; import { TABLE_VARIATION_12_COLUMNS as FUNDING_REQUESTS_TABLE_COLUMNS } from "app/components/table/data"; @@ -22,6 +23,9 @@ export const AccessToFundingBlock5: React.FC = ( ) => { const location = useLocation(); const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "funding_requests", + }); const [chart3AppliedFilters, setChart3AppliedFilters] = React.useState< string[] @@ -200,6 +204,7 @@ export const AccessToFundingBlock5: React.FC = ( )} disableCollapse dropdownItems={[]} + latestUpdate={latestUpdateDate} loading={loadingFundingRequestsTable} filterGroups={props.filterGroups} appliedFilters={chart3AppliedFilters} diff --git a/src/app/pages/datasets/annual-results/index.tsx b/src/app/pages/datasets/annual-results/index.tsx index a52376db6..d6f87fe9e 100644 --- a/src/app/pages/datasets/annual-results/index.tsx +++ b/src/app/pages/datasets/annual-results/index.tsx @@ -4,10 +4,10 @@ import uniq from "lodash/uniq"; import Box from "@mui/material/Box"; import { useTitle } from "react-use"; import Divider from "@mui/material/Divider"; -import { Table } from "app/components/table"; import { useLocation } from "react-router-dom"; import { RowComponent } from "tabulator-tables"; import Typography from "@mui/material/Typography"; +import { useCMSData } from "app/hooks/useCMSData"; import { Dropdown } from "app/components/dropdown"; import { getCMSDataField } from "app/utils/getCMSDataField"; import { DatasetPage } from "app/pages/datasets/common/page"; @@ -18,11 +18,11 @@ import { FilterGroupModel } from "app/components/filters/list/data"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; import { DatasetChartBlock } from "app/pages/datasets/common/chart-block"; import { HomeResultsStats } from "app/pages/home/components/results-stats"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; import { PolylineTreeDataItem } from "app/components/charts/polyline-tree/data"; import { ReactComponent as TableIcon } from "app/assets/vectors/Select_Table.svg"; import { defaultAppliedFilters } from "app/state/api/action-reducers/sync/filters"; import { ReactComponent as BarChartIcon } from "app/assets/vectors/Select_BarChart.svg"; -import { useCMSData } from "app/hooks/useCMSData"; import { TABLE_VARIATION_9_COLUMNS, TABLE_VARIATION_6_COLUMNS as DOCUMENTS_TABLE_COLUMNS, @@ -34,9 +34,13 @@ const dropdownItems = [ ]; export const AnnualResultsPage: React.FC = () => { - const cmsData = useCMSData({ returnData: true }); useTitle("The Data Explorer - Annual Results"); + const location = useLocation(); + const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "results", + }); const [dropdownSelected, setDropdownSelected] = React.useState( dropdownItems[0].value @@ -455,6 +459,7 @@ export const AnnualResultsPage: React.FC = () => { subtitle="" loading={loadingResults} dropdownItems={dropdownItems} + latestUpdate={latestUpdateDate} dropdownSelected={dropdownSelected} handleDropdownChange={handleSelectionChange} disableCollapse={dropdownSelected === dropdownItems[1].value} diff --git a/src/app/pages/datasets/common/chart-block/data.ts b/src/app/pages/datasets/common/chart-block/data.ts index 71a241dfe..78b2fffda 100644 --- a/src/app/pages/datasets/common/chart-block/data.ts +++ b/src/app/pages/datasets/common/chart-block/data.ts @@ -8,6 +8,7 @@ export interface DatasetChartBlockProps { empty?: boolean; subtitle: string; loading?: boolean; + latestUpdate?: string; infoType: InfoPanelType; appliedFilters: string[]; children: React.ReactNode; diff --git a/src/app/pages/datasets/common/chart-block/index.tsx b/src/app/pages/datasets/common/chart-block/index.tsx index 30c5ea1f7..468923277 100644 --- a/src/app/pages/datasets/common/chart-block/index.tsx +++ b/src/app/pages/datasets/common/chart-block/index.tsx @@ -223,7 +223,18 @@ export const DatasetChartBlock: React.FC = ( > {content} - + + {props.latestUpdate && ( + + Latest Update: {props.latestUpdate} + + )} = (props: GrantImplementationPageBlock1Props) => { const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "disbursements", + }); const dataFinancialInsightsStats = useStoreState((state) => get(state.FinancialInsightsStats, "data.data[0]", { @@ -48,94 +52,101 @@ export const GrantImplementationPageBlock1: React.FC< }, [props.filterString, props.componentsGrouping, props.geographyGrouping]); return ( - div": { - width: "calc(100% / 3)", - padding: "0 20px", - "&:not(:last-child)": { - borderRight: "1px solid #DFE3E5", - }, - "&:first-of-type": { - paddingLeft: 0, - }, - "@media (max-width: 920px)": { - padding: "0 15px", - h5: { - fontSize: "20px", + + div": { + width: "calc(100% / 3)", + padding: "0 20px", + "&:not(:last-child)": { + borderRight: "1px solid #DFE3E5", + }, + "&:first-of-type": { + paddingLeft: 0, + }, + "@media (max-width: 920px)": { + padding: "0 15px", + h5: { + fontSize: "20px", + }, + }, + "@media (max-width: 767px)": { + width: "100%", + padding: "16px 0", + "&:not(:last-child)": { + borderRightStyle: "none", + borderBottom: "1px solid #DFE3E5", + }, }, }, "@media (max-width: 767px)": { - width: "100%", - padding: "16px 0", - "&:not(:last-child)": { - borderRightStyle: "none", - borderBottom: "1px solid #DFE3E5", - }, + marginBottom: 0, + flexDirection: "column", }, - }, - "@media (max-width: 767px)": { - marginBottom: 0, - flexDirection: "column", - }, - }} - > - {loadingStats && ( - - + }} + > + {loadingStats && ( + + + + )} + + + {formatFinancialValue(dataFinancialInsightsStats.signed)} + + + {getCMSDataField( + cmsData, + "pagesDatasetsGrantImplementation.statsText1", + "Total Signed Amount" + )} + + + + + {formatFinancialValue(dataFinancialInsightsStats.committed)} + + + {getCMSDataField( + cmsData, + "pagesDatasetsGrantImplementation.statsText2", + "Total Committed Amount" + )} + + + + + {formatFinancialValue(dataFinancialInsightsStats.disbursed)} + + + {getCMSDataField( + cmsData, + "pagesDatasetsGrantImplementation.statsText3", + "Total Disbursed Amount" + )} + - )} - - - {formatFinancialValue(dataFinancialInsightsStats.signed)} - - - {getCMSDataField( - cmsData, - "pagesDatasetsGrantImplementation.statsText1", - "Total Signed Amount" - )} - - - - - {formatFinancialValue(dataFinancialInsightsStats.committed)} - - - {getCMSDataField( - cmsData, - "pagesDatasetsGrantImplementation.statsText2", - "Total Committed Amount" - )} - - - - {formatFinancialValue(dataFinancialInsightsStats.disbursed)} - - - {getCMSDataField( - cmsData, - "pagesDatasetsGrantImplementation.statsText3", - "Total Disbursed Amount" - )} + + + Latest Update: {latestUpdateDate} - + ); }; diff --git a/src/app/pages/datasets/grant-implementation/blocks/block-2/index.tsx b/src/app/pages/datasets/grant-implementation/blocks/block-2/index.tsx index c06d0e7b4..1dc8d6a2d 100644 --- a/src/app/pages/datasets/grant-implementation/blocks/block-2/index.tsx +++ b/src/app/pages/datasets/grant-implementation/blocks/block-2/index.tsx @@ -16,13 +16,13 @@ import { FilterGroupModel } from "app/components/filters/list/data"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; import { getRange } from "app/utils/getFinancialValueWithMetricPrefix"; import { DatasetChartBlock } from "app/pages/datasets/common/chart-block"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; import { defaultAppliedFilters } from "app/state/api/action-reducers/sync/filters"; import { TableDataItem, TABLE_VARIATION_13_COLUMNS as DISBURSEMENTS_TABLE_COLUMNS, } from "app/components/table/data"; import { - dropdownItemsBudgets, componentsGroupingOptions, dropdownItemsDisbursements, } from "app/pages/datasets/grant-implementation/data"; @@ -39,6 +39,9 @@ export const GrantImplementationPageBlock2: React.FC< > = (props: GrantImplementationPageBlock2Props) => { const location = useLocation(); const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "disbursements", + }); const [disbursementsDropdownSelected, setDisbursementsDropdownSelected] = React.useState(dropdownItemsDisbursements[0].value); @@ -582,6 +585,7 @@ export const GrantImplementationPageBlock2: React.FC< dropdownSelected={disbursementsDropdownSelected} handleDropdownChange={handleDisbursementsSelectionChange} loading={loadingFinancialInsightsDisbursements} + latestUpdate={latestUpdateDate} disableCollapse={ disbursementsDropdownSelected === dropdownItemsDisbursements[2].value } diff --git a/src/app/pages/datasets/grant-implementation/blocks/block-3/index.tsx b/src/app/pages/datasets/grant-implementation/blocks/block-3/index.tsx index b00c900b2..63691d7e9 100644 --- a/src/app/pages/datasets/grant-implementation/blocks/block-3/index.tsx +++ b/src/app/pages/datasets/grant-implementation/blocks/block-3/index.tsx @@ -16,6 +16,7 @@ import { TreemapDataItem } from "app/components/charts/treemap/data"; import { formatFinancialValue } from "app/utils/formatFinancialValue"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; import { DatasetChartBlock } from "app/pages/datasets/common/chart-block"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; import { defaultAppliedFilters } from "app/state/api/action-reducers/sync/filters"; import { TableDataItem, @@ -39,6 +40,9 @@ export const GrantImplementationPageBlock3: React.FC< > = (props: GrantImplementationPageBlock3Props) => { const location = useLocation(); const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "budgets", + }); const [budgetsDropdownSelected, setBudgetsDropdownSelected] = React.useState( dropdownItemsBudgets[0].value @@ -610,6 +614,7 @@ export const GrantImplementationPageBlock3: React.FC< setBudgetsDropdownSelected(value); }} loading={loadingBudget} + latestUpdate={latestUpdateDate} disableCollapse={ budgetsDropdownSelected === dropdownItemsBudgets[2].value } diff --git a/src/app/pages/datasets/grant-implementation/blocks/block-4/index.tsx b/src/app/pages/datasets/grant-implementation/blocks/block-4/index.tsx index ce3644cbe..38190b48b 100644 --- a/src/app/pages/datasets/grant-implementation/blocks/block-4/index.tsx +++ b/src/app/pages/datasets/grant-implementation/blocks/block-4/index.tsx @@ -8,6 +8,7 @@ import { Dropdown } from "app/components/dropdown"; import { getCMSDataField } from "app/utils/getCMSDataField"; import CircularProgress from "@mui/material/CircularProgress"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; import { componentsGroupingOptions } from "app/pages/datasets/grant-implementation/data"; interface GrantImplementationPageBlock4Props { @@ -20,6 +21,10 @@ export const GrantImplementationPageBlock4: React.FC< GrantImplementationPageBlock4Props > = (props: GrantImplementationPageBlock4Props) => { const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "budgets", + }); + const dataBudgetBreakdown = useStoreState( (state) => get(state.FinancialInsightsBudgetBreakdown, "data.data", []) as { @@ -162,6 +167,11 @@ export const GrantImplementationPageBlock4: React.FC< ))} + + + Latest Update: {latestUpdateDate} + + {loadingBudgetBreakdown && ( = (props: GrantImplementationPageBlock5Props) => { const location = useLocation(); const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "budgets", + }); const [chart3AppliedFilters, setChart3AppliedFilters] = React.useState< string[] @@ -473,6 +477,7 @@ export const GrantImplementationPageBlock5: React.FC< subtitle="" dropdownItems={[]} empty={financialMetricsEmpty} + latestUpdate={latestUpdateDate} loading={loadingFinancialMetrics} filterGroups={props.filterGroups} appliedFilters={chart3AppliedFilters} diff --git a/src/app/pages/datasets/grant-implementation/blocks/block-6/index.tsx b/src/app/pages/datasets/grant-implementation/blocks/block-6/index.tsx index 3730ed65b..26e477890 100644 --- a/src/app/pages/datasets/grant-implementation/blocks/block-6/index.tsx +++ b/src/app/pages/datasets/grant-implementation/blocks/block-6/index.tsx @@ -1,21 +1,21 @@ import React from "react"; import get from "lodash/get"; import uniq from "lodash/uniq"; -import maxBy from "lodash/maxBy"; import sumBy from "lodash/sumBy"; import filter from "lodash/filter"; import Box from "@mui/material/Box"; import { appColors } from "app/theme"; -import { Table } from "app/components/table"; import { useLocation } from "react-router-dom"; import { useCMSData } from "app/hooks/useCMSData"; import { Dropdown } from "app/components/dropdown"; import { Heatmap } from "app/components/charts/heatmap"; import { getCMSDataField } from "app/utils/getCMSDataField"; +import { TableContainer } from "app/components/table-container"; import { FilterGroupModel } from "app/components/filters/list/data"; import { formatFinancialValue } from "app/utils/formatFinancialValue"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; import { DatasetChartBlock } from "app/pages/datasets/common/chart-block"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; import { defaultAppliedFilters } from "app/state/api/action-reducers/sync/filters"; import { ExpandableHorizontalBar } from "app/components/charts/expandable-horizontal-bar"; import { ExpandableHorizontalBarChartDataItem } from "app/components/charts/expandable-horizontal-bar/data"; @@ -31,7 +31,6 @@ import { componentsGroupingOptions, dropdownItemsExpenditures, } from "app/pages/datasets/grant-implementation/data"; -import { TableContainer } from "app/components/table-container"; interface GrantImplementationPageBlock6Props { filterString: string; @@ -45,6 +44,9 @@ export const GrantImplementationPageBlock6: React.FC< > = (props: GrantImplementationPageBlock6Props) => { const location = useLocation(); const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "expenditures", + }); const [expendituresDropdownSelected, setExpendituresDropdownSelected] = React.useState(dropdownItemsExpenditures[0].value); @@ -557,6 +559,7 @@ export const GrantImplementationPageBlock6: React.FC< dropdownItems={dropdownItemsExpenditures} dropdownSelected={expendituresDropdownSelected} loading={loadingExpenditures} + latestUpdate={latestUpdateDate} handleDropdownChange={(value) => setExpendituresDropdownSelected(value)} disableCollapse={ expendituresDropdownSelected === dropdownItemsExpenditures[2].value diff --git a/src/app/pages/datasets/resource-mobilization/index.tsx b/src/app/pages/datasets/resource-mobilization/index.tsx index 5dee2063c..8584ccb54 100644 --- a/src/app/pages/datasets/resource-mobilization/index.tsx +++ b/src/app/pages/datasets/resource-mobilization/index.tsx @@ -19,6 +19,7 @@ import { TABLE_VARIATION_8_COLUMNS } from "app/components/table/data"; import { formatFinancialValue } from "app/utils/formatFinancialValue"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; import { DatasetChartBlock } from "app/pages/datasets/common/chart-block"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; import { ReactComponent as TableIcon } from "app/assets/vectors/Select_Table.svg"; import { defaultAppliedFilters } from "app/state/api/action-reducers/sync/filters"; import { ReactComponent as BarChartIcon } from "app/assets/vectors/Select_BarChart.svg"; @@ -31,9 +32,13 @@ const dropdownItems = [ ]; export const ResourceMobilizationPage: React.FC = () => { - const cmsData = useCMSData({ returnData: true }); useTitle("The Data Explorer - Resource Mobilization"); + const location = useLocation(); + const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "pledges-contributions", + }); const tabletScreen = useMediaQuery( "(min-width: 768px) and (max-width:920px)" ); @@ -582,6 +587,11 @@ export const ResourceMobilizationPage: React.FC = () => { + + + Latest Update: {latestUpdateDate} + + { loading={dataChartLoading} empty={chartEmpty} filterGroups={filterGroups} + latestUpdate={latestUpdateDate} appliedFilters={chartAppliedFilters} toggleFilter={handleToggleChartFilter} removeFilter={handleRemoveChartFilter} diff --git a/src/app/pages/geography/index.tsx b/src/app/pages/geography/index.tsx index 71418c4aa..47e8c3a2e 100644 --- a/src/app/pages/geography/index.tsx +++ b/src/app/pages/geography/index.tsx @@ -13,6 +13,7 @@ import SearchIcon from "@mui/icons-material/Search"; import { getCMSDataField } from "app/utils/getCMSDataField"; import CircularProgress from "@mui/material/CircularProgress"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; import { GeoCategoryProps, GeoSubCategoryProps, @@ -105,6 +106,9 @@ const GeoSubCategory: React.FC = ( export const Geography: React.FC = () => { const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "geographies", + }); useTitle("The Data Explorer - Geography"); const [search, setSearch] = React.useState(""); @@ -268,6 +272,11 @@ export const Geography: React.FC = () => { ))} + + + Latest Update: {latestUpdateDate} + + ); }; diff --git a/src/app/pages/grant/views/grant-implementation/index.tsx b/src/app/pages/grant/views/grant-implementation/index.tsx index 753b77c8e..ceab48fbf 100644 --- a/src/app/pages/grant/views/grant-implementation/index.tsx +++ b/src/app/pages/grant/views/grant-implementation/index.tsx @@ -21,6 +21,7 @@ import { getCMSDataField } from "app/utils/getCMSDataField"; import { RaceBarChart } from "app/components/charts/race-bar"; import { SankeyChartData } from "app/components/charts/sankey/data"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; import { CHART_2_DROPDOWN_ITEMS } from "app/pages/grant/views/grant-implementation/data"; import { componentsGroupingOptions } from "app/pages/datasets/grant-implementation/data"; import { @@ -34,6 +35,15 @@ import { export const GrantImplementation: React.FC = () => { const cmsData = useCMSData({ returnData: true }); + const latestUpdateDateChart1 = useGetDatasetLatestUpdate({ + dataset: "disbursements", + }); + const latestUpdateDateChart2 = useGetDatasetLatestUpdate({ + dataset: "budgets", + }); + const latestUpdateDateChart3 = useGetDatasetLatestUpdate({ + dataset: "expenditures", + }); const params = useParams<{ id: string; ip: string; tab: string }>(); useTitle(`The Data Explorer - ${params.id} Financial Insights`); @@ -421,6 +431,7 @@ export const GrantImplementation: React.FC = () => { "Disbursements" )} empty={!showRadialChart} + latestUpdate={latestUpdateDateChart1} infoType="financials" > { "Grant Budgets" )} empty={!showBudgetSankeyChart} + latestUpdate={latestUpdateDateChart2} infoType="budgets" > { dropdownItems={CHART_2_DROPDOWN_ITEMS} handleDropdownChange={setChart2Dropdown} unitButtons={chart2UnitButtons} + latestUpdate={latestUpdateDateChart3} infoType="expenditures" extraDropdown={expendituresComponentGroupingDropdown} > diff --git a/src/app/pages/grants/data.tsx b/src/app/pages/grants/data.tsx index 8acb7f482..46adadb38 100644 --- a/src/app/pages/grants/data.tsx +++ b/src/app/pages/grants/data.tsx @@ -10,6 +10,7 @@ export interface GrantsLayoutProps { showSearch: boolean; searchInputRef: any; pageAppliedFilters: any; + latestUpdateDate?: string; viewResult: React.ReactNode; pagination: React.ReactNode; handleResetFilters: () => void; diff --git a/src/app/pages/grants/index.tsx b/src/app/pages/grants/index.tsx index 741b71449..b717b94a4 100644 --- a/src/app/pages/grants/index.tsx +++ b/src/app/pages/grants/index.tsx @@ -19,9 +19,13 @@ import { getMonthFromNumber } from "app/utils/getMonthFromNumber"; import { FilterGroupModel } from "app/components/filters/list/data"; import { TABLE_VARIATION_5_COLUMNS } from "app/components/table/data"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; export const Grants: React.FC = () => { useTitle("The Data Explorer - Grants"); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "grants", + }); const [page, setPage] = React.useState(1); const [search, setSearch] = React.useState(""); @@ -359,6 +363,7 @@ export const Grants: React.FC = () => { anchorEl={anchorEl} loading={loading} searchInputRef={searchInputRef} + latestUpdateDate={latestUpdateDate} /> ); }; diff --git a/src/app/pages/grants/layout.tsx b/src/app/pages/grants/layout.tsx index 9840b2fb7..74d69c5bc 100644 --- a/src/app/pages/grants/layout.tsx +++ b/src/app/pages/grants/layout.tsx @@ -241,6 +241,11 @@ export const GrantsLayout: React.FC = ( {viewResult} {pagination} + + + Latest Update: {props.latestUpdateDate} + + ); }; diff --git a/src/app/pages/home/blocks/block-1/index.tsx b/src/app/pages/home/blocks/block-1/index.tsx index 8e462e59d..197d5a145 100644 --- a/src/app/pages/home/blocks/block-1/index.tsx +++ b/src/app/pages/home/blocks/block-1/index.tsx @@ -11,10 +11,15 @@ import { getCMSDataField } from "app/utils/getCMSDataField"; import { BarChartDataItem } from "app/components/charts/bar/data"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; import { applyResultValueFormula } from "app/utils/applyResultValueFormula"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; export const HomeBlock1: React.FC = () => { - const [chart1Cycles, setChart1Cycles] = React.useState([]); const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "pledges-contributions", + }); + + const [chart1Cycles, setChart1Cycles] = React.useState([]); const dataPledgesContributionsBarChart = useStoreState( (state) => @@ -97,6 +102,7 @@ export const HomeBlock1: React.FC = () => { id="pledges-contributions" selectedCycles={chart1Cycles} title={`${totalPledge}`} + latestUpdate={latestUpdateDate} subtitle={getCMSDataField( cmsData, "pagesHome.pledgesContributionsSubtitle", diff --git a/src/app/pages/home/blocks/block-2/index.tsx b/src/app/pages/home/blocks/block-2/index.tsx index 57e99b181..972cedf37 100644 --- a/src/app/pages/home/blocks/block-2/index.tsx +++ b/src/app/pages/home/blocks/block-2/index.tsx @@ -9,14 +9,19 @@ import { RadialChart } from "app/components/charts/radial"; import { getCMSDataField } from "app/utils/getCMSDataField"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; import { RadialChartDataItem } from "app/components/charts/radial/data"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; import { getRange, getFinancialValueWithMetricPrefix, } from "app/utils/getFinancialValueWithMetricPrefix"; export const HomeBlock2: React.FC = () => { - const [chart2Cycles, setChart2Cycles] = React.useState([]); const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "allocations", + }); + + const [chart2Cycles, setChart2Cycles] = React.useState([]); const dataAllocationsRadialChart = useStoreState( (state) => @@ -103,6 +108,7 @@ export const HomeBlock2: React.FC = () => { )} title={allocationsTotal} selectedCycles={chart2Cycles} + latestUpdate={latestUpdateDate} loading={loadingAllocationsRadialChart} empty={dataAllocationsRadialChart.length === 0} handleCycleChange={(value) => handleChartCycleChange(value)} diff --git a/src/app/pages/home/blocks/block-3/index.tsx b/src/app/pages/home/blocks/block-3/index.tsx index a19fe86d0..694300a52 100644 --- a/src/app/pages/home/blocks/block-3/index.tsx +++ b/src/app/pages/home/blocks/block-3/index.tsx @@ -7,6 +7,7 @@ import { Treemap } from "app/components/charts/treemap"; import { getCMSDataField } from "app/utils/getCMSDataField"; import { TreemapDataItem } from "app/components/charts/treemap/data"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; import { CYCLES, CycleProps, @@ -19,6 +20,9 @@ import { export const HomeBlock3: React.FC = () => { const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "budgets", + }); const [chart3Cycles, setChart3Cycles] = React.useState([]); @@ -129,6 +133,7 @@ export const HomeBlock3: React.FC = () => { "Grant Budgets" )} selectedCycles={chart3Cycles} + latestUpdate={latestUpdateDate} loading={loadingBudgetsTreemap} // dropdownSelected={chart3Dropdown} dropdownItems={CHART_3_DROPDOWN_ITEMS} diff --git a/src/app/pages/home/blocks/block-4/index.tsx b/src/app/pages/home/blocks/block-4/index.tsx index bee106223..64cf46b59 100644 --- a/src/app/pages/home/blocks/block-4/index.tsx +++ b/src/app/pages/home/blocks/block-4/index.tsx @@ -9,6 +9,7 @@ import { ChartBlock } from "app/components/chart-block"; import { getCMSDataField } from "app/utils/getCMSDataField"; import { LineChartProps } from "app/components/charts/line/data"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; import { CYCLES, CycleProps, @@ -21,6 +22,10 @@ import { export const HomeBlock4: React.FC = () => { const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "disbursements", + }); + const [chart4Cycles, setChart4Cycles] = React.useState([]); const [chart4Dropdown, setChart4Dropdown] = React.useState( @@ -143,6 +148,7 @@ export const HomeBlock4: React.FC = () => { )} title={disbursementsTotal} selectedCycles={chart4Cycles} + latestUpdate={latestUpdateDate} dropdownSelected={chart4Dropdown} dropdownItems={CHART_4_DROPDOWN_ITEMS} loading={loadingDisbursementsLineChart} diff --git a/src/app/pages/home/blocks/block-5/index.tsx b/src/app/pages/home/blocks/block-5/index.tsx index 1ea0596bb..b92944d39 100644 --- a/src/app/pages/home/blocks/block-5/index.tsx +++ b/src/app/pages/home/blocks/block-5/index.tsx @@ -10,6 +10,7 @@ import { ChartBlock } from "app/components/chart-block"; import { Heatmap } from "app/components/charts/heatmap"; import { getCMSDataField } from "app/utils/getCMSDataField"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; import { CYCLES, CycleProps, @@ -26,6 +27,9 @@ import { export const HomeBlock5: React.FC = () => { const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "expenditures", + }); const [chart5Cycles, setChart5Cycles] = React.useState([]); @@ -220,6 +224,7 @@ export const HomeBlock5: React.FC = () => { title={expendituresTotal} selectedCycles={chart5Cycles} unitButtons={chart5UnitButtons} + latestUpdate={latestUpdateDate} // dropdownSelected={chart5Dropdown} loading={loadingExpendituresHeatmap} dropdownItems={CHART_5_DROPDOWN_ITEMS} diff --git a/src/app/pages/location/views/access-to-funding/index.tsx b/src/app/pages/location/views/access-to-funding/index.tsx index 5b521ed8a..73cee745f 100644 --- a/src/app/pages/location/views/access-to-funding/index.tsx +++ b/src/app/pages/location/views/access-to-funding/index.tsx @@ -20,6 +20,7 @@ import { RaceBarChart } from "app/components/charts/race-bar"; import { TableContainer } from "app/components/table-container"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; import { RadialChartDataItem } from "app/components/charts/radial/data"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; import { getRange, getFinancialValueWithMetricPrefix, @@ -35,6 +36,16 @@ export const AccessToFunding: React.FC = () => { const params = useParams<{ id: string; tab: string }>(); const paramsId = params.id?.replace("|", "%2F"); + const latestUpdateDateChart1 = useGetDatasetLatestUpdate({ + dataset: "allocations", + }); + const latestUpdateDateChart2 = useGetDatasetLatestUpdate({ + dataset: "funding_requests", + }); + const latestUpdateDateChart3 = useGetDatasetLatestUpdate({ + dataset: "eligibility", + }); + const locationName = useStoreState((state) => get(state.GeographyOverview, "data.data[0].name", params.id) ); @@ -303,6 +314,7 @@ export const AccessToFunding: React.FC = () => { "pagesLocationAccessToFunding.allocationText", "The Global Fund is distinct from other organizations in that it gives countries (or groups of countries) an allocation and asks countries to describe how they will use those funds rather than asking for applications and then determining an amount per-country based on the merits of the various proposals received.

This provides greater predictability for countries and helps ensure that the programs being funded are not just the ones with the most capacity to write good applications." )} + latestUpdate={latestUpdateDateChart1} infoType="global" > @@ -365,6 +377,7 @@ export const AccessToFunding: React.FC = () => { "pagesLocationAccessToFunding.fundingRequestsText", "The Funding Request explains how the applicant would use Global Fund allocated funds, if approved. Funding Requests are reviewed by the Global Fund’s Technical Review Panel (TRP). Once approved by the TRP, the Funding Request is turned into one or more grants through the grant-making negotiation. The Grant Approvals Committee (GAC) reviews the final version of each grant and recommends implementation-ready grants to the Global Fund Board for approval. Funding Requests are submitted for internal Global Fund review, but the final grant is the legally-binding agreement.

Documents for a specific funding request can be downloaded by clicking the cloud icon. Documents from the 2017-2019 Allocation Period and earlier can be found by clicking on the “Documents’ tab above. If a Funding Request is not visible for the 2023-2025 Allocation Period and the country received an Allocation, it likely means that the applicant has not yet registered for a TRP Window." )} + latestUpdate={latestUpdateDateChart2} infoType="global" > { "pagesLocationAccessToFunding.eligibilityText", "Eligibility for funding from the Global Fund is determined by country income classification and disease burden for HIV, tuberculosis and malaria. Below are the components which are eligible for an allocation for the selected allocation period, according to the Global Fund Eligibility Policy.

Eligibility for the 2023-2025 Allocation Period was determined in 2022 and documented in the 2023 Eligibility List. Eligibility does not guarantee a funding allocation. Learn more about Eligibility here or see the full history of eligibility for this country." )} + latestUpdate={latestUpdateDateChart3} infoType="global" > { + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "disbursements", + }); + const params = useParams<{ id: string; tab: string }>(); const paramsId = params.id?.replace("|", "%2F"); @@ -148,6 +153,7 @@ export const LocationGrantImplementationBlock1 = () => { value: c.value, disabled: findIndex(disbursementsCycles, { value: c.value }) === -1, }))} + latestUpdate={latestUpdateDate} infoType="financials" > diff --git a/src/app/pages/location/views/grant-implementation/blocks/block-2/index.tsx b/src/app/pages/location/views/grant-implementation/blocks/block-2/index.tsx index 0dcf1a296..8881b67d4 100644 --- a/src/app/pages/location/views/grant-implementation/blocks/block-2/index.tsx +++ b/src/app/pages/location/views/grant-implementation/blocks/block-2/index.tsx @@ -12,6 +12,7 @@ import { getCMSDataField } from "app/utils/getCMSDataField"; import useUpdateEffect from "react-use/lib/useUpdateEffect"; import { SankeyChartData } from "app/components/charts/sankey/data"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; import { getRange, getFinancialValueWithMetricPrefix, @@ -19,6 +20,9 @@ import { export const LocationGrantImplementationBlock2 = () => { const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "budgets", + }); const params = useParams<{ id: string; tab: string }>(); const paramsId = params.id?.replace("|", "%2F"); @@ -146,6 +150,7 @@ export const LocationGrantImplementationBlock2 = () => { value: c.value, disabled: findIndex(budgetsCycles, { value: c.value }) === -1, }))} + latestUpdate={latestUpdateDate} infoType="budgets" > { const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "expenditures", + }); const params = useParams<{ id: string; tab: string }>(); const paramsId = params.id?.replace("|", "%2F"); @@ -207,6 +211,7 @@ export const LocationGrantImplementationBlock3 = () => { disabled: findIndex(expendituresCycles, { value: c.value }) === -1, }))} unitButtons={chart2UnitButtons} + latestUpdate={latestUpdateDate} infoType="expenditures" > { + const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "pledges-contributions", + }); + const params = useParams<{ id: string; tab: string }>(); const paramsId = params.id?.replace("|", "%2F"); - const cmsData = useCMSData({ returnData: true }); const [tableSearch, setTableSearch] = React.useState(""); @@ -109,6 +114,7 @@ export const LocationGrantImplementationBlock4 = () => { )}`} subtitle="" empty={!showGrantsTable} + latestUpdate={latestUpdateDate} infoType="global" > diff --git a/src/app/pages/location/views/resource-mobilization/index.tsx b/src/app/pages/location/views/resource-mobilization/index.tsx index ea7a3d8c5..b0a488b65 100644 --- a/src/app/pages/location/views/resource-mobilization/index.tsx +++ b/src/app/pages/location/views/resource-mobilization/index.tsx @@ -13,13 +13,17 @@ import { getCMSDataField } from "app/utils/getCMSDataField"; import useUpdateEffect from "react-use/lib/useUpdateEffect"; import { BarChartDataItem } from "app/components/charts/bar/data"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; import { - getFinancialValueWithMetricPrefix, getRange, + getFinancialValueWithMetricPrefix, } from "app/utils/getFinancialValueWithMetricPrefix"; export const ResourceMobilization: React.FC = () => { const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "pledges-contributions", + }); const params = useParams<{ id: string; tab: string }>(); const paramsId = params.id?.replace("|", "%2F"); @@ -99,6 +103,7 @@ export const ResourceMobilization: React.FC = () => { loading={loadingRMBarChart} title={`US$${totalPledge}`} selectedCycles={chart1Cycles} + latestUpdate={latestUpdateDate} subtitle={getCMSDataField( cmsData, "pagesLocationResourceMobilization.title", diff --git a/src/app/pages/location/views/results/index.tsx b/src/app/pages/location/views/results/index.tsx index 43038a124..f0b5c6cf6 100644 --- a/src/app/pages/location/views/results/index.tsx +++ b/src/app/pages/location/views/results/index.tsx @@ -5,12 +5,13 @@ import { useTitle } from "react-use"; import Divider from "@mui/material/Divider"; import { useParams } from "react-router-dom"; import { useCMSData } from "app/hooks/useCMSData"; -import { useStoreActions, useStoreState } from "app/state/store/hooks"; import { ChartBlock } from "app/components/chart-block"; import { getCMSDataField } from "app/utils/getCMSDataField"; import { TableContainer } from "app/components/table-container"; +import { useStoreActions, useStoreState } from "app/state/store/hooks"; import { HomeResultsStats } from "app/pages/home/components/results-stats"; import { StatCompProps } from "app/pages/home/components/results-stats/data"; +import { useGetDatasetLatestUpdate } from "app/hooks/useGetDatasetLatestUpdate"; import { RESULT_YEARS, ResultsProps, @@ -22,6 +23,10 @@ import { export const Results: React.FC = (props: ResultsProps) => { const cmsData = useCMSData({ returnData: true }); + const latestUpdateDate = useGetDatasetLatestUpdate({ + dataset: "results", + }); + const params = useParams<{ id: string; tab: string }>(); const paramsId = params.id?.replace("|", "%2F"); @@ -119,6 +124,7 @@ export const Results: React.FC = (props: ResultsProps) => { subtitle="" selectedCycles={[props.resultsYear]} handleCycleChange={props.setResultsYear} + latestUpdate={latestUpdateDate} infoType="global" >