@kenyaemr/esm-facility-dashboard-app 5.4.2-pre.2120 → 5.4.2-pre.2126

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

@@ -2,12 +2,12 @@ import '@carbon/charts/styles.css';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseIndicatorTrendChart from './base-indicator-trend-chart.component';
-import BaseArtProgressTrackingChart from './base-art-progress-tracking-chart.component';
+import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
 import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSurveillance';
-import { useSurveillanceData } from '../../hooks/useSurveillanceData';
 import EmptyState from '../empty-state/empty-state-log.components';
 import styles from './charts.scss';
 import { InlineLoading } from '@carbon/react';
+import BaseCumulativeProgressTrackingChart from './base-cumulative-progress-tracking-chart.component';
 type HIVPositiveNotLinkedToARTProps = {
   startDate?: Date;
   endDate?: Date;
@@ -15,40 +15,99 @@ type HIVPositiveNotLinkedToARTProps = {
 const HIVPositiveNotLinkedToART: React.FC<HIVPositiveNotLinkedToARTProps> = ({ startDate, endDate }) => {
   const { t } = useTranslation();
 
-  const { error, isLoading, surveillanceSummary } = useFacilityDashboardSurveillance(startDate, endDate);
+  const {
+    error,
+    isLoading,
+    surveillanceSummary,
+    getCompletedPercentage,
+    getPendingPercentage,
+    getThirtydaysRunninPercentage,
+    getThirtydaysRunninPendingPercentage,
+  } = useFacilityDashboardSurveillance(startDate, endDate);
 
-  const hivPositivePatientValue = useSurveillanceData(surveillanceSummary, 'getMonthlyHivPositiveNotLinked');
+  const cumulativeHivPositivePatientData = {
+    data: [
+      {
+        group: 'Completed',
+        value: getCompletedPercentage(
+          surveillanceSummary?.getHivPositiveNotLinked,
+          surveillanceSummary?.getHivTestedPositive,
+        ),
+      },
+      {
+        group: 'Pending',
+        value: getPendingPercentage(
+          surveillanceSummary?.getHivPositiveNotLinked,
+          surveillanceSummary?.getHivTestedPositive,
+        ),
+      },
+    ],
+  };
 
-  const monthlyHivPositivePatientData = useSurveillanceData(
-    surveillanceSummary,
-    'getMonthlyHivPositiveNotLinkedPatients',
+  const notLinkedToArtData = getThirtydaysRunninPercentage(
+    surveillanceSummary?.getMonthlyPatientsTestedHivPositive.data,
+    surveillanceSummary?.getMonthlyHivPositiveNotLinkedPatients.data,
+  );
+
+  const lineGraphData = getThirtydaysRunninPendingPercentage(
+    surveillanceSummary?.getMonthlyPatientsTestedHivPositive.data,
+    surveillanceSummary?.getMonthlyHivPositiveNotLinkedPatients.data,
   );
 
+  if (error) {
+    return <EmptyState subTitle={t('errorLoadingData', 'Error loading data')} />;
+  }
+
   return (
-    <div>
+    <div className={styles.chartContainer}>
       {isLoading ? (
         <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
       ) : (
-        <>
+        <div className={styles.chartContainer}>
           <div className={styles.chart}>
-            {hivPositivePatientValue.length > 0 ? (
+            {lineGraphData.length > 0 ? (
               <BaseIndicatorTrendChart
-                data={hivPositivePatientValue}
+                data={lineGraphData}
                 title={t('hivPositiveNotLinkedToART', 'HIV +VE Not linked to ART')}
-                yAxisTitle={t('numberTestedPositiveNotLinked', 'Number tested positive not linked')}
+                yAxisTitle={t('percentageTestedPositiveNotLinked', '% 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} />
+            {notLinkedToArtData.length > 0 ? (
+              <BaseProgressTrackingChart
+                data={notLinkedToArtData}
+                stackTitle={t('progressInAddressingLinkedToArt', 'Progress in addressing Linkage to ART')}
+                leftAxiTtitle={t('percentageHivPositive', '% HIV positive')}
+              />
             ) : (
               <EmptyState subTitle={'No Linkage to ART data to display'} />
             )}
           </div>
-        </>
+          <div className={styles.chart}>
+            {surveillanceSummary?.getHivTestedPositive > 0 ? (
+              <div className={styles.cumulativeChart}>
+                <BaseCumulativeProgressTrackingChart
+                  data={cumulativeHivPositivePatientData}
+                  title={t(
+                    'cumulativeProgressOfAddressingLinkedToArt',
+                    'Cumulative progress of addressing Linkage to ART',
+                  )}
+                  yAxisTitle={t('percentageHivPositive', '% HIV positive')}
+                />
+              </div>
+            ) : (
+              <EmptyState
+                subTitle={t(
+                  'noCumulativeHivPositiveNotLinked',
+                  'No cumulative HIV +VE Not linked to ART data to display',
+                )}
+              />
+            )}
+          </div>
+        </div>
       )}
     </div>
   );

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

@@ -6,29 +6,97 @@ import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSu
 import { useSurveillanceData } from '../../hooks/useSurveillanceData';
 import EmptyState from '../empty-state/empty-state-log.components';
 import { InlineLoading } from '@carbon/react';
+import BaseCumulativeProgressTrackingChart from './base-cumulative-progress-tracking-chart.component';
+import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
 type MissedOpportunityChartProps = {
   startDate?: Date;
   endDate?: Date;
 };
 const MissedOpportunityChart: React.FC<MissedOpportunityChartProps> = ({ startDate, endDate }) => {
   const { t } = useTranslation();
-  const { error, isLoading, surveillanceSummary } = useFacilityDashboardSurveillance(startDate, endDate);
+  const {
+    error,
+    isLoading,
+    surveillanceSummary,
+    getCompletedPercentage,
+    getPendingPercentage,
+    getThirtydaysRunninPercentage,
+    getThirtydaysRunninPendingPercentage,
+  } = useFacilityDashboardSurveillance(startDate, endDate);
 
-  const missedoppotunityVLValue = useSurveillanceData(surveillanceSummary, 'getMonthlyEligibleForVlSampleNotTaken');
+  const cumulativeMissedoppotunityVLData = {
+    data: [
+      {
+        group: 'Completed',
+        value: getCompletedPercentage(
+          surveillanceSummary?.getEligibleForVlSampleNotTaken,
+          surveillanceSummary?.getEligibleForVl,
+        ),
+      },
+      {
+        group: 'Pending',
+        value: getPendingPercentage(
+          surveillanceSummary?.getEligibleForVlSampleNotTaken,
+          surveillanceSummary?.getEligibleForVl,
+        ),
+      },
+    ],
+  };
+
+  const thirtyDaysrunningData = getThirtydaysRunninPercentage(
+    surveillanceSummary?.getMonthlyEligibleForVl.data,
+    surveillanceSummary?.getMonthlyEligibleForVlSampleNotTaken.data,
+  );
+
+  const lineGraphData = getThirtydaysRunninPendingPercentage(
+    surveillanceSummary?.getMonthlyEligibleForVl.data,
+    surveillanceSummary?.getMonthlyEligibleForVlSampleNotTaken.data,
+  );
+
+  if (error) {
+    return <EmptyState subTitle={t('errorLoadingData', 'Error loading data')} />;
+  }
   return (
-    <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>
+    <>
+      <div className={styles.chart}>
+        {isLoading ? (
+          <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
+        ) : lineGraphData.length > 0 ? (
+          <BaseIndicatorTrendChart
+            data={lineGraphData}
+            title={t('missedoppotunityVL', 'Missed opportunity in viral load testing')}
+            yAxisTitle={t('percentageMissedVL', '% of missed opportunity VL')}
+          />
+        ) : (
+          <EmptyState subTitle={t('nomissedoppotunityVL', 'No missed opportunity VL data to display')} />
+        )}
+      </div>
+      <div className={styles.chart}>
+        {thirtyDaysrunningData.length > 0 ? (
+          <BaseProgressTrackingChart
+            data={thirtyDaysrunningData}
+            stackTitle={t('progressInAddressingDelayedVL', 'Progress in addressing delayed VL testing')}
+            leftAxiTtitle={t('percentageEligibleForVL', '% eligible for VL')}
+          />
+        ) : (
+          <EmptyState subTitle={t('noEligibleForVL', 'No eligible for VL data to display')} />
+        )}
+      </div>
+      <div className={styles.chart}>
+        {surveillanceSummary?.getEligibleForVl > 0 ? (
+          <div className={styles.cumulativeChart}>
+            <BaseCumulativeProgressTrackingChart
+              data={cumulativeMissedoppotunityVLData}
+              title={t('cumulativeProgressMissedoppotunityVL', 'Cumulative Progress in addressing delayed VL Testing')}
+            />
+          </div>
+        ) : (
+          <EmptyState
+            subTitle={t('noCumulativeMissedoppotunityVL', 'No cumulative missed opportunity VL data to display')}
+          />
+        )}
+      </div>
+    </>
   );
 };
 

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

@@ -4,10 +4,10 @@ import { useTranslation } from 'react-i18next';
 import BaseIndicatorTrendChart from './base-indicator-trend-chart.component';
 import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
 import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSurveillance';
-import { useSurveillanceData } from '../../hooks/useSurveillanceData';
 import EmptyState from '../empty-state/empty-state-log.components';
 import styles from './charts.scss';
 import { InlineLoading } from '@carbon/react';
+import BaseCumulativeProgressTrackingChart from './base-cumulative-progress-tracking-chart.component';
 
 type PBFWNotInPrepProps = {
   startDate?: Date;
@@ -15,40 +15,89 @@ type PBFWNotInPrepProps = {
 };
 const PBFWNotInPrep: React.FC<PBFWNotInPrepProps> = ({ startDate, endDate }) => {
   const { t } = useTranslation();
-  const { error, isLoading, surveillanceSummary } = useFacilityDashboardSurveillance(startDate, endDate);
-  const highRiskPBFWNotOnPrepValue = useSurveillanceData(surveillanceSummary, 'getMonthlyHighRiskPBFWNotOnPrep');
-
-  const monthlyhighRiskPBFWNotOnPrepPatientData = useSurveillanceData(
+  const {
+    error,
+    isLoading,
     surveillanceSummary,
-    'getMonthlyHighRiskPBFWNotOnPrepPatients',
+    getCompletedPercentage,
+    getPendingPercentage,
+    getThirtydaysRunninPercentage,
+    getThirtydaysRunninPendingPercentage,
+  } = useFacilityDashboardSurveillance(startDate, endDate);
+
+  const cumulativeHighRiskPBFWNotOnPrepValueData = {
+    data: [
+      {
+        group: 'Completed',
+        value: getCompletedPercentage(
+          surveillanceSummary?.getPregnantPostpartumNotInPrep,
+          surveillanceSummary?.getPregnantOrPostpartumClients,
+        ),
+      },
+      {
+        group: 'Pending',
+        value: getPendingPercentage(
+          surveillanceSummary?.getPregnantPostpartumNotInPrep,
+          surveillanceSummary?.getPregnantOrPostpartumClients,
+        ),
+      },
+    ],
+  };
+
+  const thirtyDaysrunningData = getThirtydaysRunninPercentage(
+    surveillanceSummary?.getMonthlyPregnantOrPostpartumClients.data,
+    surveillanceSummary?.getMonthlyHighRiskPBFWNotOnPrep.data,
   );
 
+  const lineGraphData = getThirtydaysRunninPendingPercentage(
+    surveillanceSummary?.getMonthlyPregnantOrPostpartumClients.data,
+    surveillanceSummary?.getMonthlyHighRiskPBFWNotOnPrep.data,
+  );
+
+  if (error) {
+    return <EmptyState subTitle={t('errorLoadingData', 'Error loading data')} />;
+  }
+
   return (
     <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 className={styles.chart}>
+        {lineGraphData.length > 0 ? (
+          <BaseIndicatorTrendChart
+            data={lineGraphData}
+            title={t('prepNotlinked', 'High risk +ve PBFW not on PrEP')}
+            yAxisTitle={t('percentageHightRiskPBFW', '% 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}>
+        {thirtyDaysrunningData.length > 0 ? (
+          <BaseProgressTrackingChart
+            data={thirtyDaysrunningData}
+            stackTitle={t('progressEnrollingHighRiskPBFWToPrEP', 'Progress enroling high risk PBFW to PrEP')}
+            leftAxiTtitle={t('percentageOfPregnantOrPostpartumPatients', '% of pregnant or postpartum patients')}
+          />
+        ) : (
+          <EmptyState subTitle={t('noHighRiskPBFW', 'No high risk PBFW not on PrEP data to display')} />
+        )}
+      </div>
+      <br />
+      <div className={styles.chart}>
+        {surveillanceSummary?.getPregnantOrPostpartumClients > 0 ? (
+          <div className={styles.cumulativeChart}>
+            <BaseCumulativeProgressTrackingChart
+              data={cumulativeHighRiskPBFWNotOnPrepValueData}
+              title={t(
+                'cumulativeProgressMissedoppotunityVL',
+                'Cumulative progress of missed opportunity in viral load testing',
+              )}
+            />
           </div>
-        </>
-      )}
+        ) : (
+          <EmptyState subTitle={t('noHighRiskPBFW', 'No High risk PBFW Not on PrEP data to display')} />
+        )}
+      </div>
     </div>
   );
 };

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import FacilityDashboardHeader from '../components/header/header.component';
 import HIVPositiveNotLinkedToART from './charts/hiv-not-linked-to-art.component';
@@ -11,12 +11,17 @@ 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';
+import { formattedDate, thirtyDays, today } from '../constants';
+import { CardHeader } from '@openmrs/esm-patient-common-lib/src';
+import styles from './surveillance.scss';
 const SurveillancelanceDashboard = () => {
   const { t } = useTranslation();
   const [currFilters, setCurrFilters] = useState<SurveillanceindicatorsFilter>({
     indicator: 'getHivPositiveNotLinked',
   });
   const [activeTab, setActiveTab] = useState(0);
+  const defaultStartDate = useMemo(() => new Date(thirtyDays()), []);
+  const defaultEndDate = useMemo(() => new Date(today()), []);
 
   return (
     <div>
@@ -24,8 +29,8 @@ const SurveillancelanceDashboard = () => {
 
       <Tabs onChange={({ selectedIndex }) => setActiveTab(selectedIndex)}>
         <TabList>
-          <Tab>{t('kpi', 'KPI')}</Tab>
-          <Tab>{t('monitoringCharts', 'Monitoring charts')}</Tab>
+          <Tab>{t('realTimeGapReview', 'Realtime gap review')}</Tab>
+          <Tab>{t('progressTracker', 'Progress tracker')}</Tab>
         </TabList>
         <TabPanels>
           <TabPanel>
@@ -34,26 +39,26 @@ const SurveillancelanceDashboard = () => {
               <SurveillanceSummaryCards startDate={currFilters.startdate} endDate={currFilters.endDate} />
             </>
           </TabPanel>
-          <TabPanel>
+          <TabPanel className={styles.tabPanel}>
             <>
               <SurveillanceFilters filters={currFilters} onFiltersChange={setCurrFilters} tabSelected={activeTab} />
               {currFilters.indicator === 'getHivPositiveNotLinked' && (
-                <HIVPositiveNotLinkedToART startDate={currFilters.startdate} endDate={currFilters.endDate} />
+                <HIVPositiveNotLinkedToART startDate={defaultStartDate} endDate={defaultEndDate} />
               )}
               {currFilters.indicator === 'getPregnantPostpartumNotInPrep' && (
-                <PBFWNotInPrep startDate={currFilters.startdate} endDate={currFilters.endDate} />
+                <PBFWNotInPrep startDate={defaultStartDate} endDate={defaultEndDate} />
               )}
               {currFilters.indicator === 'getEligibleForVlSampleNotTaken' && (
-                <DelayedEACCharts startDate={currFilters.startdate} endDate={currFilters.endDate} />
+                <DelayedEACCharts startDate={defaultStartDate} endDate={defaultEndDate} />
               )}
               {currFilters.indicator === 'getVirallyUnsuppressedWithoutEAC' && (
-                <MissedOpportunityChart startDate={currFilters.startdate} endDate={currFilters.endDate} />
+                <MissedOpportunityChart startDate={defaultStartDate} endDate={defaultEndDate} />
               )}
               {currFilters.indicator === 'getHeiSixToEightWeeksWithoutPCRResults' && (
-                <DNAPCRPendingCharts startDate={currFilters.startdate} endDate={currFilters.endDate} />
+                <DNAPCRPendingCharts startDate={defaultStartDate} endDate={defaultEndDate} />
               )}
               {currFilters.indicator === 'getHei24MonthsWithoutDocumentedOutcome' && (
-                <HEIFinalOutcomesChart startDate={currFilters.startdate} endDate={currFilters.endDate} />
+                <HEIFinalOutcomesChart startDate={defaultStartDate} endDate={defaultEndDate} />
               )}
             </>
           </TabPanel>

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

@@ -5,6 +5,7 @@ import { SurveillanceindicatorsFilter } from '../types';
 import styles from './surveillance.scss';
 import { DATE_PICKER_CONTROL_FORMAT, DATE_PICKER_FORMAT, today } from '../constants';
 import { formatDatetime } from '@openmrs/esm-framework';
+import { CardHeader } from '@openmrs/esm-patient-common-lib/src';
 
 type Props = {
   filters: SurveillanceindicatorsFilter;
@@ -16,7 +17,7 @@ const SurveillanceFilters: React.FC<Props> = ({ filters, onFiltersChange, tabSel
   const MaxDate: Date = today();
   const indicators = [
     { key: 'getHivPositiveNotLinked', label: 'HIV +ve not linked' },
-    { key: 'getPregnantPostpartumNotInPrep', label: 'High risk +ve PBFW not on PrEP' },
+    { key: 'getPregnantPostpartumNotInPrep', label: 'High risk -ve PBFW not enrolled to PrEP' },
     { key: 'getEligibleForVlSampleNotTaken', label: 'Delayed EAC' },
     { key: 'getVirallyUnsuppressedWithoutEAC', label: 'Missed opportunity VL' },
     { key: 'getHeiSixToEightWeeksWithoutPCRResults', label: 'DNA-PCR Pending' },
@@ -24,7 +25,7 @@ const SurveillanceFilters: React.FC<Props> = ({ filters, onFiltersChange, tabSel
   ];
   return (
     <div className={styles.filtersContainer}>
-      {tabSelected === 0 && (
+      {tabSelected === 0 ? (
         <DatePicker
           datePickerType="range"
           minDate={formatDatetime(MaxDate)}
@@ -52,23 +53,29 @@ const SurveillanceFilters: React.FC<Props> = ({ filters, onFiltersChange, tabSel
             size="md"
           />
         </DatePicker>
+      ) : (
+        <div className={styles.cardHeaderContainer}>
+          <CardHeader title={t('thirtyDaysProgressTracker', 'Thirty days progress tracker')}>{''}</CardHeader>
+        </div>
       )}
 
       {tabSelected === 1 && (
-        <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 className={styles.dropdownContainer}>
+          <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>
       )}
     </div>
   );

package/src/surveillance/surveillance.scss

@@ -7,10 +7,23 @@
   display: flex;
   flex-direction: row;
   gap: layout.$spacing-05;
-  justify-content: flex-end;
+  justify-content: space-between;
   flex-wrap: wrap;
+  align-items: center;
 }
 
 .filterInput {
   width: 330px;
 }
+
+.cardHeaderContainer {
+  flex: 1;
+}
+
+.dropdownContainer {
+  margin-left: auto;
+}
+
+.tabPanel {
+  background-color: colors.$white;
+}

package/src/types/index.ts

@@ -21,6 +21,12 @@ export type SurveillanceSummary = {
   getMonthlyEligibleForVlSampleNotTaken: HivPositiveNotLinkedData;
   getMonthlyHei24MonthsWithoutDocumentedOutcome: HivPositiveNotLinkedData;
   getMonthlyVirallyUnsuppressedWithoutEAC: HivPositiveNotLinkedData;
+  getMonthlyPatientsTestedHivPositive: HivPositiveNotLinkedData;
+  getMonthlyPregnantOrPostpartumClients: HivPositiveNotLinkedData;
+  getMonthlyHeiSixToEightWeeksOld: HivPositiveNotLinkedData;
+  getMonthlyEligibleForVl: HivPositiveNotLinkedData;
+  getMonthlyHei24MonthsOld: HivPositiveNotLinkedData;
+  getMonthlyVirallyUnsuppressed: HivPositiveNotLinkedData;
 };
 
 export type IndicationMode = 'decreasing' | 'increasing';
@@ -37,3 +43,11 @@ export type HivPositiveNotLinked = {
   value: number;
   group?: string;
 };
+
+export type Linkage = {
+  group?: string;
+  value?: number;
+};
+export type LinkageData = {
+  data: Array<Linkage>;
+};

package/translations/en.json

@@ -1,12 +1,17 @@
 {
   "aboveSiteDashboard": "Above site facility Dashboard",
   "aboveSiteFacilityDashboard": "Above site facility Dashboard",
+  "cumulativeProgressDelayedEAC": "Cumulative Progress in addressing delayed EAC",
+  "cumulativeProgressDnapcrPending": "Cumulative Progress in addressing  HEI PCR results",
+  "cumulativeProgressHeiFinalOutcomes": "Cumulative progress in addressing HEI final outcome",
+  "cumulativeProgressMissedoppotunityVL": "Cumulative progress of missed opportunity in viral load testing",
+  "cumulativeProgressOfAddressingLinkedToArt": "Cumulative progress of addressing Linkage to ART",
   "day": "Day",
-  "days": "Days",
   "delayedEAC": "Delayed enhanced adherence counselling",
   "delayedVLTesting": "Number of client on ART that visited, were eligible for VL sampling and no VL was done",
   "dnapcrPending": "HEI (6-8 weeks) without DNA-PCR Results",
   "endDate": "End date",
+  "errorLoadingData": "Error loading data",
   "facilitydashboard": "Facility Dashboard",
   "facilitydashboardLeftPannel": "facility Dashboard Left Panel",
   "heiFinalOutcomes": "Undocumented final outcome",
@@ -16,30 +21,44 @@
   "hivPositiveClientsnotLinkedToArt": "HIV Positive Clients not linked to ART",
   "hivPositiveNotLinkedToART": "HIV +VE Not linked to ART",
   "indicator": "Indicator",
-  "kpi": "KPI",
   "missedoppotunityVL": "Missed opportunity in viral load testing",
-  "monitoringCharts": "Monitoring charts",
-  "noDelayedEAC": "No Delayed EAC data to display",
+  "noCumulativeDnapcrPending": "No cumulative HEI (6-8 weeks) without DNA-PCR data to display",
+  "noCumulativeHivPositiveNotLinked": "No cumulative HIV +VE Not linked to ART data to display",
+  "noCumulativeMissedoppotunityVL": "No cumulative missed opportunity VL data to display",
+  "noDelayedEAC": "No delayed EAC data to display",
+  "noEligibleForVL": "No eligible for VL data to display",
+  "noHEIFinalOutcome": "No HEI final outcome data to display",
   "noheiFinalOutcomes": "No undocumented final outcome data to display",
   "noHighRiskPBFW": "No High risk PBFW Not on PrEP data to display",
   "noHivPositiveNotLinked": "No HIV +VE Not linked to ART data to display",
   "nomissedoppotunityVL": "No missed opportunity VL data to display",
   "noPendingPCRDNAResults": "No pending PCR DNA results data to display",
   "numberDelayedEAC": "Number of Delayed EAC",
-  "numberHEIOutcome": "Number of undocumented final outcome",
-  "numberHightRiskPBFW": "Number of High risk PBFW Not on PrEP",
-  "numberHivPositive": "Number HIV positive",
-  "numberMissedVL": "Number of missed opportunity VL",
-  "numberOfPendingPCRDNAResults": "Number of HEI (6-8 weeks) without DNA-PCR Results",
-  "numberTestedPositiveNotLinked": "Number tested positive not linked",
   "pbfwNotLinked": "High risk -ve PBFW Not linked to PrEP",
-  "percentage": "Percentage",
+  "percentageDelayedEAC": "% Delayed EAC",
+  "percentageEligibleForVL": "% eligible for VL",
+  "percentageHEIFinalOutcome": "% HEI final outcome",
+  "percentageHEIOutcome": "% undocumented final outcome",
+  "percentageHEIPCRResults": "% HEI (6-8 weeks) PCR result",
+  "percentageHightRiskPBFW": "% of high risk PBFW not on PrEP",
+  "percentageHivPositive": "% HIV positive",
+  "percentageMissedVL": "% of missed opportunity VL",
+  "percentageOfPendingPCRDNAResults": "% HEI (6-8 weeks) without DNA-PCR results",
+  "percentageOfPregnantOrPostpartumPatients": "% of pregnant or postpartum patients",
+  "percentageTestedPositiveNotLinked": "% tested positive not linked",
   "prepNotlinked": "High risk -ve PBFW not on PrEP",
+  "progressEnrollingHighRiskPBFWToPrEP": "Progress enroling high risk PBFW to PrEP",
+  "progressInAddressingDelayedEAC": "Progress in addressing delayed EAC",
+  "progressInAddressingDelayedVL": "Progress in addressing delayed VL testing",
+  "progressInAddressingHEIFinalOutcome": "Progress in addressing HEI final Outcome",
+  "progressInAddressingHEIPCRResults ": "Progress in addressing  HEI PCR results",
   "progressInAddressingLinkedToArt": "Progress in addressing Linkage to ART",
-  "progresstracking": "Progress tracking",
+  "progressTracker": "Progress tracker",
+  "realTimeGapReview": "Realtime gap review",
   "startDate": "Start date",
   "surveillance": "Surveillance",
   "surveillanceSummary": "Surveillance Summary",
+  "thirtyDaysProgressTracker": "Thirty days progress tracker",
   "viewOnSuperset": "View on Superset",
   "virallyUnSuppressedWithoutAdherenceCounselingFor2Weeks": "Virally Unsuppressed clients without enhanced adherence counseling (EAC) within 2 weeks"
 }