@kenyaemr/esm-facility-dashboard-app 5.4.1-pre.2025 → 5.4.1-pre.2029

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemrCharts":"^1.6.7"},"extensions":[{"component":"surveillanceDashboardLink","name":"surveillance-dashboard-link","slot":"facility-dashboard-left-panel-slot"},{"component":"aboveSiteDashboardLink","name":"above-site-dashboard-link","slot":"facility-dashboard-left-panel-slot"}],"workspaces":[],"modals":[],"pages":[{"component":"root","route":"facility-dashboard"}],"version":"5.4.1-pre.2025"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemrCharts":"^1.6.7"},"extensions":[{"component":"surveillanceDashboardLink","name":"surveillance-dashboard-link","slot":"facility-dashboard-left-panel-slot"},{"component":"aboveSiteDashboardLink","name":"above-site-dashboard-link","slot":"facility-dashboard-left-panel-slot"}],"workspaces":[],"modals":[],"pages":[{"component":"root","route":"facility-dashboard"}],"version":"5.4.1-pre.2029"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-facility-dashboard-app",
-  "version": "5.4.1-pre.2025",
+  "version": "5.4.1-pre.2029",
   "description": "Facility dashboard app",
   "browser": "dist/kenyaemr-esm-facility-dashboard-app.js",
   "main": "src/index.ts",

package/src/constants.ts

@@ -20,22 +20,6 @@ export const formatNewDate = (date: Date | null | undefined) => {
   return date ? new Date(date) : '';
 };
 
-// Generate Dammy dates
-export const sevenDaysRunningDates = (index: number, endDate: Date = new Date()): string => {
-  const date = new Date(endDate);
-  date.setDate(date.getDate() - index);
-  return date.toISOString().split('T')[0];
-};
-
 export const formattedDate = (date: Date) => {
   return date ? dayjs(date).format(DATE_PICKER_FORMAT) : '';
 };
-
-export const getNumberOfDays = (startDate?: Date, endDate?: Date) => {
-  if (!startDate || !endDate) {
-    return 7;
-  }
-  const start = dayjs(startDate);
-  const end = dayjs(endDate);
-  return end.diff(start, 'day');
-};

package/src/surveillance/charts/delayed-eac-charts.component.tsx

@@ -1,10 +1,12 @@
 import '@carbon/charts/styles.css';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseIndicatorTrendChart from './base-indicator-trend-chart.component';
-import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
-import { getNumberOfDays, sevenDaysRunningDates } from '../../constants';
 import styles from './charts.scss';
+import EmptyState from '../empty-state/empty-state-log.components';
+import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSurveillance';
+import { useSurveillanceData } from '../../hooks/useSurveillanceData';
+import { InlineLoading } from '@carbon/react';
 type DelayedEACChartsProps = {
   startDate?: Date;
   endDate?: Date;
@@ -12,40 +14,23 @@ type DelayedEACChartsProps = {
 
 const DelayedEACCharts: React.FC<DelayedEACChartsProps> = ({ startDate, endDate }) => {
   const { t } = useTranslation();
-  const generateRandomData = (numRecords: number) => {
-    return Array.from({ length: numRecords }, (_, i) => ({
-      day: sevenDaysRunningDates(i, endDate),
-      value: Math.floor(Math.random() * 50),
-    }));
-  };
+  const { error, isLoading, surveillanceSummary } = useFacilityDashboardSurveillance(startDate, endDate);
 
-  const numberSequence = useMemo(() => Math.max(1, getNumberOfDays(startDate, endDate)), [startDate, endDate]);
-
-  const generateRandomDataProgress = (numRecords: number) => {
-    const data = [];
-    for (let i = 1; i <= numRecords; i++) {
-      data.push({
-        group: 'Pending',
-        key: sevenDaysRunningDates(i, endDate),
-        value: Math.floor(Math.random() * 50),
-      });
-      data.push({
-        group: 'Completed',
-        key: sevenDaysRunningDates(i, endDate),
-        value: Math.floor(Math.random() * 50),
-      });
-    }
-    return data;
-  };
-
-  const data = useMemo(() => generateRandomDataProgress(numberSequence), [numberSequence, startDate, endDate]);
-  const values = useMemo(() => generateRandomData(numberSequence), [numberSequence, startDate, endDate]);
+  const delayedEACValue = useSurveillanceData(surveillanceSummary, 'getMonthlyVirallyUnsuppressedWithoutEAC');
   return (
-    <BaseIndicatorTrendChart
-      data={values}
-      title={t('delayedEAC', 'Delayed enhanced adherence counselling')}
-      yAxisTitle={t('percentageDelatedEAC', '% Delayed EAC')}
-    />
+    <div className={styles.chart}>
+      {isLoading ? (
+        <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
+      ) : delayedEACValue.length > 0 ? (
+        <BaseIndicatorTrendChart
+          data={delayedEACValue}
+          title={t('delayedEAC', 'Delayed enhanced adherence counselling')}
+          yAxisTitle={t('numberDelayedEAC', 'Number of Delayed EAC')}
+        />
+      ) : (
+        <EmptyState subTitle={t('noDelayedEAC', 'No Delayed EAC data to display')} />
+      )}
+    </div>
   );
 };
 

package/src/surveillance/charts/dna-pcr-pending-chart.component.tsx

@@ -1,49 +1,35 @@
 import '@carbon/charts/styles.css';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseIndicatorTrendChart from './base-indicator-trend-chart.component';
-import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
-import { getNumberOfDays, sevenDaysRunningDates } from '../../constants';
 import styles from './charts.scss';
+import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSurveillance';
+import { useSurveillanceData } from '../../hooks/useSurveillanceData';
+import EmptyState from '../empty-state/empty-state-log.components';
+import { InlineLoading } from '@carbon/react';
 type DNAPCRPendingChartsProps = {
   startDate?: Date;
   endDate?: Date;
 };
 const DNAPCRPendingCharts: React.FC<DNAPCRPendingChartsProps> = ({ startDate, endDate }) => {
   const { t } = useTranslation();
-  const generateRandomData = (numRecords: number) => {
-    return Array.from({ length: numRecords }, (_, i) => ({
-      day: sevenDaysRunningDates(i, endDate),
-      value: Math.floor(Math.random() * 50),
-    }));
-  };
+  const { error, isLoading, surveillanceSummary } = useFacilityDashboardSurveillance(startDate, endDate);
 
-  const numberSequence = useMemo(() => Math.max(1, getNumberOfDays(startDate, endDate)), [startDate, endDate]);
-  const generateRandomDataProgress = (numRecords: number) => {
-    const data = [];
-    for (let i = 1; i <= numRecords; i++) {
-      data.push({
-        group: 'Pending',
-        key: sevenDaysRunningDates(i, endDate),
-        value: Math.floor(Math.random() * 50),
-      });
-      data.push({
-        group: 'Completed',
-        key: sevenDaysRunningDates(i, endDate),
-        value: Math.floor(Math.random() * 50),
-      });
-    }
-    return data;
-  };
-
-  const data = useMemo(() => generateRandomDataProgress(numberSequence), [numberSequence, startDate, endDate]);
-  const values = useMemo(() => generateRandomData(numberSequence), [numberSequence, startDate, endDate]);
+  const PendingPCRDNAResultsValue = useSurveillanceData(surveillanceSummary, 'getMonthlyHeiDNAPCRPending');
   return (
-    <BaseIndicatorTrendChart
-      data={values}
-      title={t('dnapcrPending', 'HEI (6-8 weeks) without DNA-PCR Results')}
-      yAxisTitle={t('percentagePendingPCRDNAResults', '% of HEI (6-8 weeks) without DNA-PCR Results')}
-    />
+    <div className={styles.chart}>
+      {isLoading ? (
+        <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
+      ) : PendingPCRDNAResultsValue.length > 0 ? (
+        <BaseIndicatorTrendChart
+          data={PendingPCRDNAResultsValue}
+          title={t('dnapcrPending', 'HEI (6-8 weeks) without DNA-PCR results')}
+          yAxisTitle={t('numberOfPendingPCRDNAResults', 'Number of HEI (6-8 weeks) without DNA-PCR results')}
+        />
+      ) : (
+        <EmptyState subTitle={t('noPendingPCRDNAResults', 'No pending PCR DNA results data to display')} />
+      )}
+    </div>
   );
 };
 

package/src/surveillance/charts/hei-final-outcome.component.tsx

@@ -1,10 +1,12 @@
 import '@carbon/charts/styles.css';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseIndicatorTrendChart from './base-indicator-trend-chart.component';
-import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
-import { getNumberOfDays, sevenDaysRunningDates } from '../../constants';
 import styles from './charts.scss';
+import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSurveillance';
+import { useSurveillanceData } from '../../hooks/useSurveillanceData';
+import EmptyState from '../empty-state/empty-state-log.components';
+import { InlineLoading } from '@carbon/react';
 type HEIFinalOutcomesChartProps = {
   startDate?: Date;
   endDate?: Date;
@@ -12,40 +14,26 @@ type HEIFinalOutcomesChartProps = {
 
 const HEIFinalOutcomesChart: React.FC<HEIFinalOutcomesChartProps> = ({ startDate, endDate }) => {
   const { t } = useTranslation();
-  const generateRandomData = (numRecords: number) => {
-    return Array.from({ length: numRecords }, (_, i) => ({
-      day: sevenDaysRunningDates(i),
-      value: Math.floor(Math.random() * 50),
-    }));
-  };
+  const { error, isLoading, surveillanceSummary } = useFacilityDashboardSurveillance(startDate, endDate);
 
-  const numberSequence = useMemo(() => Math.max(0, getNumberOfDays(startDate, endDate)), [startDate, endDate]);
-
-  const generateRandomDataProgress = (numRecords: number) => {
-    const data = [];
-    for (let i = 1; i <= numRecords; i++) {
-      data.push({
-        group: 'Pending',
-        key: sevenDaysRunningDates(i, endDate),
-        value: Math.floor(Math.random() * 50),
-      });
-      data.push({
-        group: 'Completed',
-        key: sevenDaysRunningDates(i, endDate),
-        value: Math.floor(Math.random() * 50),
-      });
-    }
-    return data;
-  };
-
-  const data = useMemo(() => generateRandomDataProgress(numberSequence), [numberSequence, startDate, endDate]);
-  const values = useMemo(() => generateRandomData(numberSequence), [numberSequence, startDate, endDate]);
+  const heiFinalOutcomesValue = useSurveillanceData(
+    surveillanceSummary,
+    'getMonthlyHei24MonthsWithoutDocumentedOutcome',
+  );
   return (
-    <BaseIndicatorTrendChart
-      data={values}
-      title={t('heiFinalOutcomes', 'Undocumented final outcome')}
-      yAxisTitle={t('percentageHEIOutcome', '% of Undocumented final outcome')}
-    />
+    <div className={styles.chart}>
+      {isLoading ? (
+        <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
+      ) : heiFinalOutcomesValue.length > 0 ? (
+        <BaseIndicatorTrendChart
+          data={heiFinalOutcomesValue}
+          title={t('heiFinalOutcomes', 'Undocumented final outcome')}
+          yAxisTitle={t('numberHEIOutcome', 'Number of undocumented final outcome')}
+        />
+      ) : (
+        <EmptyState subTitle={t('noheiFinalOutcomes', 'No undocumented final outcome data to display')} />
+      )}
+    </div>
   );
 };
 

package/src/surveillance/charts/hiv-not-linked-to-art.component.tsx

@@ -7,6 +7,7 @@ import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSu
 import { useSurveillanceData } from '../../hooks/useSurveillanceData';
 import EmptyState from '../empty-state/empty-state-log.components';
 import styles from './charts.scss';
+import { InlineLoading } from '@carbon/react';
 type HIVPositiveNotLinkedToARTProps = {
   startDate?: Date;
   endDate?: Date;
@@ -24,26 +25,32 @@ const HIVPositiveNotLinkedToART: React.FC<HIVPositiveNotLinkedToARTProps> = ({ s
   );
 
   return (
-    <>
-      <div className={styles.chart}>
-        {hivPositivePatientValue.length > 0 ? (
-          <BaseIndicatorTrendChart
-            data={hivPositivePatientValue}
-            title={t('hivPositiveNotLinkedToART', 'HIV +VE Not linked to ART')}
-            yAxisTitle={t('numberTestedPositiveNotLinked', 'Number tested positive not linked')}
-          />
-        ) : (
-          <EmptyState subTitle={t('noHivPositiveNotLinked', 'No HIV +VE Not linked to ART data to display')} />
-        )}
-      </div>
-      <div className={styles.chart}>
-        {monthlyHivPositivePatientData.length > 0 ? (
-          <BaseArtProgressTrackingChart data={monthlyHivPositivePatientData} />
-        ) : (
-          <EmptyState subTitle={'No Linkage to ART data to display'} />
-        )}
-      </div>
-    </>
+    <div>
+      {isLoading ? (
+        <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
+      ) : (
+        <>
+          <div className={styles.chart}>
+            {hivPositivePatientValue.length > 0 ? (
+              <BaseIndicatorTrendChart
+                data={hivPositivePatientValue}
+                title={t('hivPositiveNotLinkedToART', 'HIV +VE Not linked to ART')}
+                yAxisTitle={t('numberTestedPositiveNotLinked', 'Number tested positive not linked')}
+              />
+            ) : (
+              <EmptyState subTitle={t('noHivPositiveNotLinked', 'No HIV +VE Not linked to ART data to display')} />
+            )}
+          </div>
+          <div className={styles.chart}>
+            {monthlyHivPositivePatientData.length > 0 ? (
+              <BaseArtProgressTrackingChart data={monthlyHivPositivePatientData} />
+            ) : (
+              <EmptyState subTitle={'No Linkage to ART data to display'} />
+            )}
+          </div>
+        </>
+      )}
+    </div>
   );
 };
 

package/src/surveillance/charts/missed-opportunity-vl-chart.component.tsx

@@ -1,50 +1,34 @@
-import '@carbon/charts/styles.css';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseIndicatorTrendChart from './base-indicator-trend-chart.component';
-import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
-import { getNumberOfDays, sevenDaysRunningDates } from '../../constants';
 import styles from './charts.scss';
+import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSurveillance';
+import { useSurveillanceData } from '../../hooks/useSurveillanceData';
+import EmptyState from '../empty-state/empty-state-log.components';
+import { InlineLoading } from '@carbon/react';
 type MissedOpportunityChartProps = {
   startDate?: Date;
   endDate?: Date;
 };
 const MissedOpportunityChart: React.FC<MissedOpportunityChartProps> = ({ startDate, endDate }) => {
   const { t } = useTranslation();
-  const generateRandomData = (numRecords: number) => {
-    return Array.from({ length: numRecords }, (_, i) => ({
-      day: sevenDaysRunningDates(i, endDate),
-      value: Math.floor(Math.random() * 50),
-    }));
-  };
+  const { error, isLoading, surveillanceSummary } = useFacilityDashboardSurveillance(startDate, endDate);
 
-  const numberSequence = useMemo(() => Math.max(1, getNumberOfDays(startDate, endDate)), [startDate, endDate]);
-
-  const generateRandomDataProgress = (numRecords: number) => {
-    const data = [];
-    for (let i = 1; i <= numRecords; i++) {
-      data.push({
-        group: 'Pending',
-        key: sevenDaysRunningDates(i, endDate),
-        value: Math.floor(Math.random() * 50),
-      });
-      data.push({
-        group: 'Completed',
-        key: sevenDaysRunningDates(i, endDate),
-        value: Math.floor(Math.random() * 50),
-      });
-    }
-    return data;
-  };
-
-  const data = useMemo(() => generateRandomDataProgress(numberSequence), [numberSequence, startDate, endDate]);
-  const values = useMemo(() => generateRandomData(numberSequence), [numberSequence, startDate, endDate]);
+  const missedoppotunityVLValue = useSurveillanceData(surveillanceSummary, 'getMonthlyEligibleForVlSampleNotTaken');
   return (
-    <BaseIndicatorTrendChart
-      data={values}
-      title={t('missedoppotunityVL', 'Missed opportunity in viral load testing')}
-      yAxisTitle={t('percentageMissedVL', '% of missed opportunity VL')}
-    />
+    <div className={styles.chart}>
+      {isLoading ? (
+        <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
+      ) : missedoppotunityVLValue.length > 0 ? (
+        <BaseIndicatorTrendChart
+          data={missedoppotunityVLValue}
+          title={t('missedoppotunityVL', 'Missed opportunity in viral load testing')}
+          yAxisTitle={t('numberMissedVL', 'Number of missed opportunity VL')}
+        />
+      ) : (
+        <EmptyState subTitle={t('nomissedoppotunityVL', 'No missed opportunity VL data to display')} />
+      )}
+    </div>
   );
 };
 

package/src/surveillance/charts/pbfw-not-in-prep.component.tsx

@@ -7,6 +7,7 @@ import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSu
 import { useSurveillanceData } from '../../hooks/useSurveillanceData';
 import EmptyState from '../empty-state/empty-state-log.components';
 import styles from './charts.scss';
+import { InlineLoading } from '@carbon/react';
 
 type PBFWNotInPrepProps = {
   startDate?: Date;
@@ -23,26 +24,32 @@ const PBFWNotInPrep: React.FC<PBFWNotInPrepProps> = ({ startDate, endDate }) =>
   );
 
   return (
-    <>
-      <div className={styles.chart}>
-        {highRiskPBFWNotOnPrepValue.length > 0 ? (
-          <BaseIndicatorTrendChart
-            data={highRiskPBFWNotOnPrepValue}
-            title={t('prepNotlinked', 'High risk +ve PBFW not on PrEP')}
-            yAxisTitle={t('numberHightRiskPBFW', 'Number of High risk PBFW Not on PrEP')}
-          />
-        ) : (
-          <EmptyState subTitle={t('noHighRiskPBFW', 'No High risk PBFW Not on PrEP data to display')} />
-        )}
-      </div>
-      <div>
-        {monthlyhighRiskPBFWNotOnPrepPatientData.length > 0 ? (
-          <BaseProgressTrackingChart data={monthlyhighRiskPBFWNotOnPrepPatientData} />
-        ) : (
-          <EmptyState subTitle={t('noHighRiskPBFW', 'No High risk PBFW Not on PrEP data to display')} />
-        )}
-      </div>
-    </>
+    <div>
+      {isLoading ? (
+        <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
+      ) : (
+        <>
+          <div className={styles.chart}>
+            {highRiskPBFWNotOnPrepValue.length > 0 ? (
+              <BaseIndicatorTrendChart
+                data={highRiskPBFWNotOnPrepValue}
+                title={t('prepNotlinked', 'High risk +ve PBFW not on PrEP')}
+                yAxisTitle={t('numberHightRiskPBFW', 'Number of High risk PBFW Not on PrEP')}
+              />
+            ) : (
+              <EmptyState subTitle={t('noHighRiskPBFW', 'No High risk PBFW Not on PrEP data to display')} />
+            )}
+          </div>
+          <div className={styles.chart}>
+            {monthlyhighRiskPBFWNotOnPrepPatientData.length > 0 ? (
+              <BaseProgressTrackingChart data={monthlyhighRiskPBFWNotOnPrepPatientData} />
+            ) : (
+              <EmptyState subTitle={t('noHighRiskPBFW', 'No High risk PBFW Not on PrEP data to display')} />
+            )}
+          </div>
+        </>
+      )}
+    </div>
   );
 };
 

package/src/surveillance/surveillance-dashboard.component.tsx

@@ -10,35 +10,55 @@ import MissedOpportunityChart from './charts/missed-opportunity-vl-chart.compone
 import DNAPCRPendingCharts from './charts/dna-pcr-pending-chart.component';
 import HEIFinalOutcomesChart from './charts/hei-final-outcome.component';
 import { SurveillanceindicatorsFilter } from '../types';
+import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@carbon/react';
 const SurveillancelanceDashboard = () => {
   const { t } = useTranslation();
   const [currFilters, setCurrFilters] = useState<SurveillanceindicatorsFilter>({
     indicator: 'getHivPositiveNotLinked',
   });
+  const [activeTab, setActiveTab] = useState(0);
 
   return (
     <div>
       <FacilityDashboardHeader title={t('surveillance', 'Surveillance')} />
-      <SurveillanceFilters filters={currFilters} onFiltersChange={setCurrFilters} />
-      <SurveillanceSummaryCards startDate={currFilters.startdate} endDate={currFilters.endDate} />
-      {currFilters.indicator === 'getHivPositiveNotLinked' && (
-        <HIVPositiveNotLinkedToART startDate={currFilters.startdate} endDate={currFilters.endDate} />
-      )}
-      {currFilters.indicator === 'getPregnantPostpartumNotInPrep' && (
-        <PBFWNotInPrep startDate={currFilters.startdate} endDate={currFilters.endDate} />
-      )}
-      {currFilters.indicator === 'getEligibleForVlSampleNotTaken' && (
-        <DelayedEACCharts startDate={currFilters.startdate} endDate={currFilters.endDate} />
-      )}
-      {currFilters.indicator === 'getVirallyUnsuppressedWithoutEAC' && (
-        <MissedOpportunityChart startDate={currFilters.startdate} endDate={currFilters.endDate} />
-      )}
-      {currFilters.indicator === 'getHeiSixToEightWeeksWithoutPCRResults' && (
-        <DNAPCRPendingCharts startDate={currFilters.startdate} endDate={currFilters.endDate} />
-      )}
-      {currFilters.indicator === 'getHei24MonthsWithoutDocumentedOutcome' && (
-        <HEIFinalOutcomesChart startDate={currFilters.startdate} endDate={currFilters.endDate} />
-      )}
+
+      <Tabs onChange={({ selectedIndex }) => setActiveTab(selectedIndex)}>
+        <TabList>
+          <Tab>{t('kpi', 'KPI')}</Tab>
+          <Tab>{t('monitoringCharts', 'Monitoring charts')}</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <>
+              <SurveillanceFilters filters={currFilters} onFiltersChange={setCurrFilters} tabSelected={activeTab} />
+              <SurveillanceSummaryCards startDate={currFilters.startdate} endDate={currFilters.endDate} />
+            </>
+          </TabPanel>
+          <TabPanel>
+            <>
+              <SurveillanceFilters filters={currFilters} onFiltersChange={setCurrFilters} tabSelected={activeTab} />
+              {currFilters.indicator === 'getHivPositiveNotLinked' && (
+                <HIVPositiveNotLinkedToART startDate={currFilters.startdate} endDate={currFilters.endDate} />
+              )}
+              {currFilters.indicator === 'getPregnantPostpartumNotInPrep' && (
+                <PBFWNotInPrep startDate={currFilters.startdate} endDate={currFilters.endDate} />
+              )}
+              {currFilters.indicator === 'getEligibleForVlSampleNotTaken' && (
+                <DelayedEACCharts startDate={currFilters.startdate} endDate={currFilters.endDate} />
+              )}
+              {currFilters.indicator === 'getVirallyUnsuppressedWithoutEAC' && (
+                <MissedOpportunityChart startDate={currFilters.startdate} endDate={currFilters.endDate} />
+              )}
+              {currFilters.indicator === 'getHeiSixToEightWeeksWithoutPCRResults' && (
+                <DNAPCRPendingCharts startDate={currFilters.startdate} endDate={currFilters.endDate} />
+              )}
+              {currFilters.indicator === 'getHei24MonthsWithoutDocumentedOutcome' && (
+                <HEIFinalOutcomesChart startDate={currFilters.startdate} endDate={currFilters.endDate} />
+              )}
+            </>
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
     </div>
   );
 };

package/src/surveillance/surveillance-filters.component.tsx

@@ -9,8 +9,9 @@ import { formatDatetime } from '@openmrs/esm-framework';
 type Props = {
   filters: SurveillanceindicatorsFilter;
   onFiltersChange?: (filters: SurveillanceindicatorsFilter) => void;
+  tabSelected?: number;
 };
-const SurveillanceFilters: React.FC<Props> = ({ filters, onFiltersChange }) => {
+const SurveillanceFilters: React.FC<Props> = ({ filters, onFiltersChange, tabSelected }) => {
   const { t } = useTranslation();
   const MaxDate: Date = today();
   const indicators = [
@@ -23,48 +24,52 @@ const SurveillanceFilters: React.FC<Props> = ({ filters, onFiltersChange }) => {
   ];
   return (
     <div className={styles.filtersContainer}>
-      <DatePicker
-        datePickerType="range"
-        minDate={formatDatetime(MaxDate)}
-        locale="en"
-        dateFormat={DATE_PICKER_CONTROL_FORMAT}
-        onChange={(dates: Array<Date>) => {
-          if (onFiltersChange) {
-            onFiltersChange({
-              ...filters,
-              startdate: dates[0],
-              endDate: dates[1],
-            });
+      {tabSelected === 0 && (
+        <DatePicker
+          datePickerType="range"
+          minDate={formatDatetime(MaxDate)}
+          locale="en"
+          dateFormat={DATE_PICKER_CONTROL_FORMAT}
+          onChange={(dates: Array<Date>) => {
+            if (onFiltersChange) {
+              onFiltersChange({
+                ...filters,
+                startdate: dates[0],
+                endDate: dates[1],
+              });
+            }
+          }}>
+          <DatePickerInput
+            id="date-picker-input-id-start"
+            placeholder={DATE_PICKER_FORMAT}
+            labelText={t('startDate', 'Start date')}
+            size="md"
+          />
+          <DatePickerInput
+            id="date-picker-input-id-finish"
+            placeholder={DATE_PICKER_FORMAT}
+            labelText={t('endDate', 'End date')}
+            size="md"
+          />
+        </DatePicker>
+      )}
+
+      {tabSelected === 1 && (
+        <Dropdown
+          className={styles.filterInput}
+          autoAlign
+          id="filters"
+          itemToString={(item: { key: string; label: string }) =>
+            indicators.find(({ key }) => key === item.key)?.label ?? ''
           }
-        }}>
-        <DatePickerInput
-          id="date-picker-input-id-start"
-          placeholder={DATE_PICKER_FORMAT}
-          labelText={t('startDate', 'Start date')}
-          size="md"
-        />
-        <DatePickerInput
-          id="date-picker-input-id-finish"
-          placeholder={DATE_PICKER_FORMAT}
-          labelText={t('endDate', 'End date')}
-          size="md"
+          items={indicators}
+          selectedItem={indicators.find(({ key }) => key === filters.indicator)}
+          label={t('indicator', 'Indicator')}
+          onChange={({ selectedItem: { key } }) => {
+            onFiltersChange({ ...filters, indicator: key });
+          }}
         />
-      </DatePicker>
-
-      <Dropdown
-        className={styles.filterInput}
-        autoAlign
-        id="filters"
-        itemToString={(item: { key: string; label: string }) =>
-          indicators.find(({ key }) => key === item.key)?.label ?? ''
-        }
-        items={indicators}
-        selectedItem={indicators.find(({ key }) => key === filters.indicator)}
-        label={t('indicator', 'Indicator')}
-        onChange={({ selectedItem: { key } }) => {
-          onFiltersChange({ ...filters, indicator: key });
-        }}
-      />
+      )}
     </div>
   );
 };

package/src/types/index.ts

@@ -17,6 +17,10 @@ export type SurveillanceSummary = {
   getMonthlyHivPositiveNotLinkedPatients: HivPositiveNotLinkedData;
   getMonthlyHighRiskPBFWNotOnPrep: HivPositiveNotLinkedData;
   getMonthlyHighRiskPBFWNotOnPrepPatients: HivPositiveNotLinkedData;
+  getMonthlyHeiDNAPCRPending: HivPositiveNotLinkedData;
+  getMonthlyEligibleForVlSampleNotTaken: HivPositiveNotLinkedData;
+  getMonthlyHei24MonthsWithoutDocumentedOutcome: HivPositiveNotLinkedData;
+  getMonthlyVirallyUnsuppressedWithoutEAC: HivPositiveNotLinkedData;
 };
 
 export type IndicationMode = 'decreasing' | 'increasing';