@kenyaemr/esm-facility-dashboard-app 5.4.1-pre.1941 → 5.4.1-pre.1946

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.1941"}
+{"$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.1946"}

package/package.json

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

package/src/constants.ts

@@ -1,3 +1,5 @@
+import dayjs from 'dayjs';
+
 export const moduleName = '@kenyaemr/esm-facility-dashboard-app';
 export const etlBasePath = `${window.spaBase}`;
 
@@ -6,6 +8,12 @@ export const today = () => {
   return new Date(date.getFullYear(), date.getMonth(), date.getDate());
 };
 
+export const sevenDaysAgo = () => {
+  const date = today(); // Get today's date
+  date.setDate(date.getDate() - 7); // Subtract 7 days
+  return date;
+};
+
 export const DATE_PICKER_CONTROL_FORMAT = 'd/m/Y';
 
 export const DATE_PICKER_FORMAT = 'DD/MM/YYYY';
@@ -13,3 +21,15 @@ export const DATE_PICKER_FORMAT = 'DD/MM/YYYY';
 export const formatNewDate = (date: Date | null | undefined) => {
   return date ? new Date(date) : '';
 };
+
+// Generate Dammy dates
+export const sevenDaysRunningDates = (index: number) => {
+  const date = new Date(today());
+  date.setDate(today().getDate() - index);
+  const formattedDate = date.toISOString().split('T')[0];
+  return formattedDate;
+};
+
+export const formattedDate = (date: Date) => {
+  return date ? dayjs(date).format(DATE_PICKER_FORMAT) : '';
+};

package/src/hooks/useFacilityDashboardSurveillance.ts

@@ -1,20 +1,25 @@
-import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { FetchResponse, formatDatetime, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import useSWR from 'swr';
 import { IndicationMode, type SurveillanceSummary } from '../types';
 import { useCallback } from 'react';
+import { formattedDate, sevenDaysAgo, today } from '../constants';
+
+const useFacilityDashboardSurveillance = (startDate?: Date, endDate?: Date) => {
+  const url =
+    startDate && endDate
+      ? `${restBaseUrl}/kenyaemr/facility-dashboard?startDate=${formattedDate(startDate)}&endDate=${formattedDate(
+          endDate,
+        )}`
+      : `${restBaseUrl}/kenyaemr/facility-dashboard?startDate=${formattedDate(today())}&endDate=${formattedDate(
+          sevenDaysAgo(),
+        )}`;
 
-const useFacilityDashboardSurveillance = () => {
-  const url = `${restBaseUrl}/kenyaemr/facility-dashboard`;
   const { data, error, isLoading, mutate } = useSWR<FetchResponse<SurveillanceSummary>>(url, openmrsFetch);
   const getIndication = useCallback((indicator: number, denominator: number, threshold: number): IndicationMode => {
-    if (denominator === 0) {
-      return 'decreasing';
-    }
-    if (indicator > denominator * threshold) {
-      return 'increasing';
-    } else {
+    if (denominator === 0 || indicator <= denominator * threshold) {
       return 'decreasing';
     }
+    return 'increasing';
   }, []);
   const getPercentage = useCallback((indicator: number, denominator: number): string => {
     if (indicator === null || indicator === undefined || denominator === null || denominator === undefined) {
@@ -28,7 +33,7 @@ const useFacilityDashboardSurveillance = () => {
   }, []);
 
   return {
-    surveillanceSummary: data?.data,
+    surveillanceSummary: error ? null : data?.data,
     getIndication,
     getPercentage,
     isLoading,

package/src/surveillance/charts/base-indicator-trend-chart.component.tsx

@@ -29,7 +29,7 @@ const BaseIndicatorTrendChart: React.FC<Props> = ({ data, title, yAxisTitle }) =
         mapsTo: 'abnomallPercentage',
       },
       bottom: {
-        title: t('durationInWeeks', 'Duration in weeks'),
+        title: t('durationInDays', 'Duration in days'),
         scaleType: ScaleTypes.LABELS,
         mapsTo: 'week',
       },

package/src/surveillance/charts/base-progress-tracking-chart.component.tsx

@@ -18,7 +18,7 @@ const BaseProgressTrackingChart: React.FC<Props> = ({ data }) => {
     },
     axes: {
       bottom: {
-        title: t('weeks', 'Weeks'),
+        title: t('days', 'Days'),
         mapsTo: 'key',
         scaleType: ScaleTypes.LABELS,
       },
@@ -31,8 +31,8 @@ const BaseProgressTrackingChart: React.FC<Props> = ({ data }) => {
     },
     color: {
       scale: {
-        Pending: '#ff0000', // Red color for Pending
-        Completed: '#0000ff', // Blue color for Completed
+        Pending: '#0000ff',
+        Completed: '#ff0000',
       },
     },
     height: '400px',

package/src/surveillance/charts/charts.scss

@@ -5,3 +5,21 @@
 .chartContainer {
   padding: layout.$spacing-05;
 }
+
+.chartGroupContainer {
+  display: flex !important;
+  flex-flow: row wrap !important;
+}
+.tendChart {
+  flex: 50%;
+}
+
+.trackingChart {
+  flex: 50;
+}
+
+@media (max-width: 800px) {
+  .chartGroupContainer {
+    flex-direction: column;
+  }
+}

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

@@ -3,12 +3,14 @@ import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseIndicatorTrendChart from './base-indicator-trend-chart.component';
 import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
+import { sevenDaysRunningDates } from '../../constants';
+import styles from './charts.scss';
 
 const DelayedEACCharts = () => {
   const { t } = useTranslation();
   const generateRandomData = (numRecords: number) => {
     return Array.from({ length: numRecords }, (_, i) => ({
-      week: `Week ${i + 1}`,
+      week: sevenDaysRunningDates(i),
       abnomallPercentage: Math.floor(Math.random() * 50),
     }));
   };
@@ -18,29 +20,35 @@ const DelayedEACCharts = () => {
     for (let i = 1; i <= numRecords; i++) {
       data.push({
         group: 'Pending',
-        key: `Week ${i}`,
+        key: sevenDaysRunningDates(i),
         value: Math.floor(Math.random() * 50),
       });
       data.push({
         group: 'Completed',
-        key: `Week ${i}`,
+        key: sevenDaysRunningDates(i),
         value: Math.floor(Math.random() * 50),
       });
     }
     return data;
   };
 
-  const data = useMemo(() => generateRandomDataProgress(40), []);
+  const data = useMemo(() => generateRandomDataProgress(7), []);
 
-  const values = useMemo(() => generateRandomData(40), []);
+  const values = useMemo(() => generateRandomData(7), []);
   return (
     <>
-      <BaseIndicatorTrendChart
-        data={values}
-        title={t('delayedEAC', 'Delayed EAC')}
-        yAxisTitle={t('percentageDelatedEAC', '% Delayed EAC')}
-      />
-      <BaseProgressTrackingChart data={data} />;
+      <div className={styles.chartGroupContainer}>
+        <div className={styles.tendChart}>
+          <BaseIndicatorTrendChart
+            data={values}
+            title={t('delayedEAC', 'Delayed EAC')}
+            yAxisTitle={t('percentageDelatedEAC', '% Delayed EAC')}
+          />
+        </div>
+        <div className={styles.trackingChart}>
+          <BaseProgressTrackingChart data={data} />
+        </div>
+      </div>
     </>
   );
 };

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

@@ -3,12 +3,14 @@ import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseIndicatorTrendChart from './base-indicator-trend-chart.component';
 import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
+import { sevenDaysRunningDates } from '../../constants';
+import styles from './charts.scss';
 
 const DNAPCRPendingCharts = () => {
   const { t } = useTranslation();
   const generateRandomData = (numRecords: number) => {
     return Array.from({ length: numRecords }, (_, i) => ({
-      week: `Week ${i + 1}`,
+      week: sevenDaysRunningDates(i),
       abnomallPercentage: Math.floor(Math.random() * 50),
     }));
   };
@@ -18,29 +20,35 @@ const DNAPCRPendingCharts = () => {
     for (let i = 1; i <= numRecords; i++) {
       data.push({
         group: 'Pending',
-        key: `Week ${i}`,
+        key: sevenDaysRunningDates(i),
         value: Math.floor(Math.random() * 50),
       });
       data.push({
         group: 'Completed',
-        key: `Week ${i}`,
+        key: sevenDaysRunningDates(i),
         value: Math.floor(Math.random() * 50),
       });
     }
     return data;
   };
 
-  const data = useMemo(() => generateRandomDataProgress(40), []);
+  const data = useMemo(() => generateRandomDataProgress(7), []);
 
-  const values = useMemo(() => generateRandomData(40), []);
+  const values = useMemo(() => generateRandomData(7), []);
   return (
     <>
-      <BaseIndicatorTrendChart
-        data={values}
-        title={t('dnapcrPending', 'Pending DNA-PCR Results')}
-        yAxisTitle={t('percentagePendingPCRDNAResults', '% of pending PCR-DNA Results')}
-      />
-      <BaseProgressTrackingChart data={data} />;
+      <div className={styles.chartGroupContainer}>
+        <div className={styles.tendChart}>
+          <BaseIndicatorTrendChart
+            data={values}
+            title={t('dnapcrPending', 'Pending DNA-PCR Results')}
+            yAxisTitle={t('percentagePendingPCRDNAResults', '% of pending PCR-DNA Results')}
+          />
+        </div>
+        <div className={styles.trackingChart}>
+          <BaseProgressTrackingChart data={data} />
+        </div>
+      </div>
     </>
   );
 };

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

@@ -3,12 +3,14 @@ import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseIndicatorTrendChart from './base-indicator-trend-chart.component';
 import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
+import { sevenDaysRunningDates } from '../../constants';
+import styles from './charts.scss';
 
 const HEIFinalOutcomesChart = () => {
   const { t } = useTranslation();
   const generateRandomData = (numRecords: number) => {
     return Array.from({ length: numRecords }, (_, i) => ({
-      week: `Week ${i + 1}`,
+      week: sevenDaysRunningDates(i),
       abnomallPercentage: Math.floor(Math.random() * 50),
     }));
   };
@@ -18,29 +20,35 @@ const HEIFinalOutcomesChart = () => {
     for (let i = 1; i <= numRecords; i++) {
       data.push({
         group: 'Pending',
-        key: `Week ${i}`,
+        key: sevenDaysRunningDates(i),
         value: Math.floor(Math.random() * 50),
       });
       data.push({
         group: 'Completed',
-        key: `Week ${i}`,
+        key: sevenDaysRunningDates(i),
         value: Math.floor(Math.random() * 50),
       });
     }
     return data;
   };
 
-  const data = useMemo(() => generateRandomDataProgress(40), []);
+  const data = useMemo(() => generateRandomDataProgress(7), []);
 
-  const values = useMemo(() => generateRandomData(40), []);
+  const values = useMemo(() => generateRandomData(7), []);
   return (
     <>
-      <BaseIndicatorTrendChart
-        data={values}
-        title={t('heiFinalOutcomes', 'HEI Final Outcomes')}
-        yAxisTitle={t('percentageHEIOutcome', '% 24 month old HEI without documented outcomes')}
-      />
-      <BaseProgressTrackingChart data={data} />;
+      <div className={styles.chartGroupContainer}>
+        <div className={styles.tendChart}>
+          <BaseIndicatorTrendChart
+            data={values}
+            title={t('heiFinalOutcomes', 'HEI Final Outcomes')}
+            yAxisTitle={t('percentageHEIOutcome', '% 24 month old HEI without documented outcomes')}
+          />
+        </div>
+        <div className={styles.trackingChart}>
+          <BaseProgressTrackingChart data={data} />
+        </div>
+      </div>
     </>
   );
 };

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

@@ -3,11 +3,14 @@ import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseIndicatorTrendChart from './base-indicator-trend-chart.component';
 import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
+import { sevenDaysRunningDates } from '../../constants';
+import styles from './charts.scss';
 const HIVPositiveNotLinkedToART = () => {
   const { t } = useTranslation();
+
   const generateRandomData = (numRecords: number) => {
     return Array.from({ length: numRecords }, (_, i) => ({
-      week: `Week ${i + 1}`,
+      week: sevenDaysRunningDates(i),
       abnomallPercentage: Math.floor(Math.random() * 50),
     }));
   };
@@ -15,31 +18,38 @@ const HIVPositiveNotLinkedToART = () => {
   const generateRandomDataProgress = (numRecords: number) => {
     const data = [];
     for (let i = 1; i <= numRecords; i++) {
+      const formattedDate = sevenDaysRunningDates(i);
       data.push({
         group: 'Pending',
-        key: `Week ${i}`,
+        key: formattedDate,
         value: Math.floor(Math.random() * 50),
       });
       data.push({
         group: 'Completed',
-        key: `Week ${i}`,
+        key: formattedDate,
         value: Math.floor(Math.random() * 50),
       });
     }
     return data;
   };
 
-  const data = useMemo(() => generateRandomDataProgress(40), []);
+  const data = useMemo(() => generateRandomDataProgress(7), []);
 
-  const values = useMemo(() => generateRandomData(40), []);
+  const values = useMemo(() => generateRandomData(7), []);
   return (
     <>
-      <BaseIndicatorTrendChart
-        data={values}
-        title={t('hivPositiveNotLinkedToART', 'HIV +VE Not linked to ART')}
-        yAxisTitle={t('percentageTestedPositiveNotLinked', '% tested positive not linked')}
-      />
-      <BaseProgressTrackingChart data={data} />;
+      <div className={styles.chartGroupContainer}>
+        <div className={styles.tendChart}>
+          <BaseIndicatorTrendChart
+            data={values}
+            title={t('hivPositiveNotLinkedToART', 'HIV +VE Not linked to ART')}
+            yAxisTitle={t('percentageTestedPositiveNotLinked', '% tested positive not linked')}
+          />
+        </div>
+        <div className={styles.trackingChart}>
+          <BaseProgressTrackingChart data={data} />
+        </div>
+      </div>
     </>
   );
 };

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

@@ -3,12 +3,14 @@ import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseIndicatorTrendChart from './base-indicator-trend-chart.component';
 import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
+import { sevenDaysRunningDates } from '../../constants';
+import styles from './charts.scss';
 
 const MissedOpportunityChart = () => {
   const { t } = useTranslation();
   const generateRandomData = (numRecords: number) => {
     return Array.from({ length: numRecords }, (_, i) => ({
-      week: `Week ${i + 1}`,
+      week: sevenDaysRunningDates(i),
       abnomallPercentage: Math.floor(Math.random() * 50),
     }));
   };
@@ -18,12 +20,12 @@ const MissedOpportunityChart = () => {
     for (let i = 1; i <= numRecords; i++) {
       data.push({
         group: 'Pending',
-        key: `Week ${i}`,
+        key: sevenDaysRunningDates(i),
         value: Math.floor(Math.random() * 50),
       });
       data.push({
         group: 'Completed',
-        key: `Week ${i}`,
+        key: sevenDaysRunningDates(i),
         value: Math.floor(Math.random() * 50),
       });
     }
@@ -35,12 +37,18 @@ const MissedOpportunityChart = () => {
   const values = useMemo(() => generateRandomData(40), []);
   return (
     <>
-      <BaseIndicatorTrendChart
-        data={values}
-        title={t('missedoppotunityVL', 'Missed opportunity VL')}
-        yAxisTitle={t('percentageMissedVL', '% of missed opportunity VL')}
-      />
-      <BaseProgressTrackingChart data={data} />;
+      <div className={styles.chartGroupContainer}>
+        <div className={styles.tendChart}>
+          <BaseIndicatorTrendChart
+            data={values}
+            title={t('missedoppotunityVL', 'Missed opportunity VL')}
+            yAxisTitle={t('percentageMissedVL', '% of missed opportunity VL')}
+          />
+        </div>
+        <div className={styles.trackingChart}>
+          <BaseProgressTrackingChart data={data} />
+        </div>
+      </div>
     </>
   );
 };

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

@@ -3,11 +3,13 @@ import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import BaseIndicatorTrendChart from './base-indicator-trend-chart.component';
 import BaseProgressTrackingChart from './base-progress-tracking-chart.component';
+import { sevenDaysRunningDates } from '../../constants';
+import styles from './charts.scss';
 const PBFWNotInPrep = () => {
   const { t } = useTranslation();
   const generateRandomData = (numRecords: number) => {
     return Array.from({ length: numRecords }, (_, i) => ({
-      week: `Week ${i + 1}`,
+      week: sevenDaysRunningDates(i),
       abnomallPercentage: Math.floor(Math.random() * 50),
     }));
   };
@@ -17,29 +19,35 @@ const PBFWNotInPrep = () => {
     for (let i = 1; i <= numRecords; i++) {
       data.push({
         group: 'Pending',
-        key: `Week ${i}`,
+        key: sevenDaysRunningDates(i),
         value: Math.floor(Math.random() * 50),
       });
       data.push({
         group: 'Completed',
-        key: `Week ${i}`,
+        key: sevenDaysRunningDates(i),
         value: Math.floor(Math.random() * 50),
       });
     }
     return data;
   };
 
-  const data = useMemo(() => generateRandomDataForProgress(40), []);
+  const data = useMemo(() => generateRandomDataForProgress(7), []);
 
-  const values = useMemo(() => generateRandomData(40), []);
+  const values = useMemo(() => generateRandomData(7), []);
   return (
     <>
-      <BaseIndicatorTrendChart
-        data={values}
-        title={t('prepNotlinked', 'High risk +ve PBFW not on PrEP')}
-        yAxisTitle={t('percentageHightRiskPBFW', '% High risk PBFW Not in PrEP')}
-      />
-      <BaseProgressTrackingChart data={data} />;
+      <div className={styles.chartGroupContainer}>
+        <div className={styles.tendChart}>
+          <BaseIndicatorTrendChart
+            data={values}
+            title={t('prepNotlinked', 'High risk +ve PBFW not on PrEP')}
+            yAxisTitle={t('percentageHightRiskPBFW', '% High risk PBFW Not in PrEP')}
+          />
+        </div>
+        <div className={styles.trackingChart}>
+          <BaseProgressTrackingChart data={data} />
+        </div>
+      </div>
     </>
   );
 };

package/src/surveillance/summary-cards/surveillance-summary-cards.component.tsx

@@ -5,9 +5,16 @@ import { useTranslation } from 'react-i18next';
 import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSurveillance';
 import SummaryCard from './summary-card.component';
 import styles from './summary-card.scss';
-const SurveillanceSummaryCards = () => {
+type SurveillanceSummaryCardsProps = {
+  startDate?: Date;
+  endDate?: Date;
+};
+const SurveillanceSummaryCards: React.FC<SurveillanceSummaryCardsProps> = ({ startDate, endDate }) => {
   const { t } = useTranslation();
-  const { error, isLoading, surveillanceSummary, getIndication, getPercentage } = useFacilityDashboardSurveillance();
+  const { error, isLoading, surveillanceSummary, getIndication, getPercentage } = useFacilityDashboardSurveillance(
+    startDate,
+    endDate,
+  );
 
   if (isLoading) {
     return (
@@ -40,7 +47,7 @@ const SurveillanceSummaryCards = () => {
         )}
       />
       <SummaryCard
-        header={t('prepNotlinked', 'High risk +ve PBFW not on PrEP')}
+        header={t('prepNotlinked', 'High risk -ve PBFW not on PrEP')}
         title={t('pbfwNotLinked', 'High risk -ve PBFW Not linked to PrEP')}
         value={`${surveillanceSummary?.getPregnantPostpartumNotInPrep}/${surveillanceSummary?.getPregnantOrPostpartumClients}`}
         percentage={getPercentage(

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

@@ -12,12 +12,15 @@ import HEIFinalOutcomesChart from './charts/hei-final-outcome.component';
 import { SurveillanceindicatorsFilter } from '../types';
 const SurveillancelanceDashboard = () => {
   const { t } = useTranslation();
-  const [currFilters, setCurrFilters] = useState<SurveillanceindicatorsFilter>({});
+  const [currFilters, setCurrFilters] = useState<SurveillanceindicatorsFilter>({
+    indicator: 'getHivPositiveNotLinked',
+  });
+
   return (
     <div>
       <FacilityDashboardHeader title={t('surveillance', 'Surveillance')} />
       <SurveillanceFilters filters={currFilters} onFiltersChange={setCurrFilters} />
-      <SurveillanceSummaryCards />
+      <SurveillanceSummaryCards startDate={currFilters.startdate} endDate={currFilters.endDate} />
       {currFilters.indicator === 'getHivPositiveNotLinked' && <HIVPositiveNotLinkedToART />}
       {currFilters.indicator === 'getPregnantPostpartumNotInPrep' && <PBFWNotInPrep />}
       {currFilters.indicator === 'getEligibleForVlSampleNotTaken' && <DelayedEACCharts />}

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

@@ -3,6 +3,8 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 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';
 
 type Props = {
   filters: SurveillanceindicatorsFilter;
@@ -10,7 +12,7 @@ type Props = {
 };
 const SurveillanceFilters: React.FC<Props> = ({ filters, onFiltersChange }) => {
   const { t } = useTranslation();
-  const reportingPeriods = [{ label: 'Last 1 week view' }];
+  const MaxDate: Date = today();
   const indicators = [
     { key: 'getHivPositiveNotLinked', label: 'HIV +ve not linked' },
     { key: 'getPregnantPostpartumNotInPrep', label: 'High risk +ve PBFW not on PrEP' },
@@ -21,19 +23,34 @@ const SurveillanceFilters: React.FC<Props> = ({ filters, onFiltersChange }) => {
   ];
   return (
     <div className={styles.filtersContainer}>
-      <DatePicker datePickerType="range">
-        <DatePickerInput id="date-picker-input-id-start" placeholder="mm/dd/yyyy" labelText="Start date" size="md" />
-        <DatePickerInput id="date-picker-input-id-finish" placeholder="mm/dd/yyyy" labelText="End date" size="md" />
+      <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>
-      <Dropdown
-        className={styles.filterInput}
-        autoAlign
-        id="filters"
-        itemToString={(item) => item?.label ?? ''}
-        items={reportingPeriods}
-        selectedItem={reportingPeriods[0]}
-        label={t('reportingPeriod', 'Reporting Period')}
-      />
+
       <Dropdown
         className={styles.filterInput}
         autoAlign

package/translations/en.json

@@ -1,10 +1,12 @@
 {
   "aboveSiteDashboard": "Above site facility Dashboard",
   "aboveSiteFacilityDashboard": "Above site facility Dashboard",
+  "days": "Days",
   "delayedEAC": "Delayed EAC",
   "delayedVLTesting": "Number of client on ART that visited, were eligible for VL sampling and no VL was done",
   "dnapcrPending": "DNA-PCR Pending",
-  "durationInWeeks": "Duration in weeks",
+  "durationInDays": "Duration in days",
+  "endDate": "End date",
   "facilitydashboard": "Facility Dashboard",
   "facilitydashboardLeftPannel": "facility Dashboard Left Panel",
   "heiFinalOutcomes": "HEI Final Outcomes",
@@ -23,12 +25,11 @@
   "percentageMissedVL": "% of missed opportunity VL",
   "percentagePendingPCRDNAResults": "% of pending PCR-DNA Results",
   "percentageTestedPositiveNotLinked": "% tested positive not linked",
-  "prepNotlinked": "High risk +ve PBFW not on PrEP",
+  "prepNotlinked": "High risk -ve PBFW not on PrEP",
   "progresstracking": "Progress tracking",
-  "reportingPeriod": "Reporting Period",
+  "startDate": "Start date",
   "surveillance": "Surveillance",
   "surveillanceSummary": "Surveillance Summary",
   "viewOnSuperset": "View on Superset",
-  "virallyUnSuppressedWithoutAdherenceCounselingFor2Weeks": "Virally Unsuppressed clients without enhanced adherence counseling (EAC) within 2 weeks",
-  "weeks": "Weeks"
+  "virallyUnSuppressedWithoutAdherenceCounselingFor2Weeks": "Virally Unsuppressed clients without enhanced adherence counseling (EAC) within 2 weeks"
 }