@kenyaemr/esm-facility-dashboard-app 5.4.1-pre.1867

package/src/surveillance/summary-cards/summary-card.scss

@@ -0,0 +1,49 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.cardcontainer {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: layout.$spacing-05;
+  padding: 0 layout.$spacing-05;
+}
+
+.summaryCard {
+  position: relative;
+  border: colors.$gray-20 solid 1px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+
+  & > h4 {
+    font-weight: bold;
+    color: colors.$gray-80;
+    margin-bottom: layout.$spacing-03;
+  }
+
+  & > p {
+    color: colors.$gray-60;
+    font-size: small;
+  }
+
+  & > strong {
+    color: colors.$gray-60;
+    text-transform: uppercase;
+  }
+
+  & > span {
+    position: absolute;
+    right: layout.$spacing-05;
+    top: layout.$spacing-05;
+  }
+}
+
+.upIcon {
+  color: colors.$red-50;
+}
+
+.downIcon {
+  color: colors.$green-50;
+}

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

@@ -0,0 +1,78 @@
+import { Layer, SkeletonPlaceholder } from '@carbon/react';
+import { ErrorState } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import useFacilityDashboardSurveillance from '../../hooks/useFacilityDashboardSurveillance';
+import SummaryCard from './summary-card.component';
+import styles from './summary-card.scss';
+const SurveillanceSummaryCards = () => {
+  const { t } = useTranslation();
+  const { error, isLoading, surveillanceSummary, getIndication } = useFacilityDashboardSurveillance();
+
+  if (isLoading) {
+    return (
+      <Layer className={styles.cardcontainer}>
+        {Array.from({ length: 6 }).map((_, index) => (
+          <SkeletonPlaceholder className={styles.summaryCard} key={index} />
+        ))}
+      </Layer>
+    );
+  }
+
+  if (error) {
+    return <ErrorState error={error} headerTitle={t('surveillanceSummary', 'Surveillance Summary')} />;
+  }
+
+  return (
+    <Layer className={styles.cardcontainer}>
+      <SummaryCard
+        header={t('hivNotlinked', 'HIV Not linked')}
+        title={t('hivPositiveClientsnotLinkedToArt', 'HIV Positive Clients not linked to ART')}
+        value={`${surveillanceSummary?.getHivPositiveNotLinked}`}
+        mode={getIndication(
+          surveillanceSummary?.getHivPositiveNotLinked,
+          surveillanceSummary?.getHivTestedPositive,
+          surveillanceSummary?.fivePercentThreshhold,
+        )}
+      />
+      <SummaryCard
+        header={t('prepNotlinked', 'PREP Not linked')}
+        title={t(
+          'pregnantPostPartumWomenNotLinkedToPREP',
+          'Pregnant / postpartum women at high risk not linked to PREP',
+        )}
+        value={`${surveillanceSummary?.getPregnantPostpartumNotInPrep}`}
+        mode={'decreasing'}
+      />
+      <SummaryCard
+        header={t('eacPending', 'EAC Pending')}
+        title={t(
+          'virallyUnSuppressedWithoutAdherenceCounselingFor2Weeks',
+          'Virally Unsuppressed clients without enhanced adherence counseling (EAC) within 2 weeks',
+        )}
+        value={`${surveillanceSummary?.getVirallySuppressedWithoutEAC}`}
+        mode="decreasing"
+      />
+      <SummaryCard
+        header={t('vlDelayed', 'VL Delayed')}
+        title={t('delayedVLTesting', 'Delayed Viral Load (VL) testing')}
+        value={`${surveillanceSummary?.getEligibleForVlSampleNotTaken}`}
+        mode="decreasing"
+      />
+      <SummaryCard
+        header={t('dnapcrPending', 'DNA-PCR Pending')}
+        title={t('HEIWithoutDNAPCR', 'HEI (6-8 WEEKS) without DNA PCR Results')}
+        value={`${surveillanceSummary?.getHeiSixToEightWeeksWithoutPCRResults}`}
+        mode="decreasing"
+      />
+      <SummaryCard
+        header={t('heiIncomplete', 'HEI Incomplete')}
+        title={t('HEIWithoutFinalDocumentedOutcome', 'HEI (24 months) without final documented outcomes')}
+        value={`${surveillanceSummary?.getHei24MonthsWithoutDocumentedOutcome}`}
+        mode="increasing"
+      />
+    </Layer>
+  );
+};
+
+export default SurveillanceSummaryCards;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import SurveillanceSummaryCards from './summary-cards/surveillance-summary-cards.component';
+import SurveillanceFilters from './surveillance-filters.component';
+import FacilityDashboardHeader from '../components/header/header.component';
+const SurveillancelanceDashboard = () => {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <FacilityDashboardHeader title={t('surveillance', 'Surveillance')} />
+      <SurveillanceFilters />
+      <SurveillanceSummaryCards />
+    </div>
+  );
+};
+
+export default SurveillancelanceDashboard;

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

@@ -0,0 +1,22 @@
+import { Dropdown } from '@carbon/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './surveillance.scss';
+
+const SurveillanceFilters = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.filtersContainer}>
+      <Dropdown
+        className={styles.viewToggler}
+        autoAlign
+        id="filters"
+        itemToString={(item) => item?.label ?? ''}
+        items={[{ label: 'Last day view' }, { label: 'Last 1 week view' }]}
+        label={t('reportingPeriod', 'Reporting Period')}
+      />
+    </div>
+  );
+};
+
+export default SurveillanceFilters;

package/src/surveillance/surveillance.scss

@@ -0,0 +1,16 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.filtersContainer {
+  margin: 0 layout.$spacing-05 layout.$spacing-05 layout.$spacing-05;
+  display: flex;
+  flex-direction: row;
+  gap: layout.$spacing-05;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+}
+
+.viewToggler {
+  width: 330px;
+}

package/src/types/index.ts

@@ -0,0 +1,13 @@
+export type SurveillanceSummary = {
+  getHivPositiveNotLinked: number;
+  getHivTestedPositive: number;
+  getPregnantPostpartumNotInPrep: number;
+  getEligibleForVlSampleNotTaken: number;
+  getVirallySuppressedWithoutEAC: number;
+  getHeiSixToEightWeeksWithoutPCRResults: number;
+  getHei24MonthsWithoutDocumentedOutcome: number;
+  fivePercentThreshhold: number;
+  onePercentThreshhold: number;
+};
+
+export type IndicationMode = 'decreasing' | 'increasing';

package/translations/en.json

@@ -0,0 +1,22 @@
+{
+  "aboveSiteDashboard": "Above site facility Dashboard",
+  "aboveSiteFacilityDashboard": "Above site facility Dashboard",
+  "delayedVLTesting": "Delayed Viral Load (VL) testing",
+  "dnapcrPending": "DNA-PCR Pending",
+  "eacPending": "EAC Pending",
+  "facilitydashboard": "Facility Dashboard",
+  "facilitydashboardLeftPannel": "facility Dashboard Left Panel",
+  "heiIncomplete": "HEI Incomplete",
+  "HEIWithoutDNAPCR": "HEI (6-8 WEEKS) without DNA PCR Results",
+  "HEIWithoutFinalDocumentedOutcome": "HEI (24 months) without final documented outcomes",
+  "hivNotlinked": "HIV Not linked",
+  "hivPositiveClientsnotLinkedToArt": "HIV Positive Clients not linked to ART",
+  "pregnantPostPartumWomenNotLinkedToPREP": "Pregnant / postpartum women at high risk not linked to PREP",
+  "prepNotlinked": "PREP Not linked",
+  "reportingPeriod": "Reporting Period",
+  "surveillance": "Surveillance",
+  "surveillanceSummary": "Surveillance Summary",
+  "viewOnSuperset": "View on Superset",
+  "virallyUnSuppressedWithoutAdherenceCounselingFor2Weeks": "Virally Unsuppressed clients without enhanced adherence counseling (EAC) within 2 weeks",
+  "vlDelayed": "VL Delayed"
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.tsx"]
+}

package/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require('openmrs/default-webpack-config');