Update HIS Indicators (#24)

* Refactor charts * Add tools & reports
METS-Programme · Feb 8, 2024 · 1ff7221 · 1ff7221
1 parent f10e412
commit 1ff7221
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 176 deletions.
diff --git a/src/components/data-table/data-tables.scss b/src/components/data-table/data-tables.scss
@@ -138,13 +138,6 @@
   }
 }
 
-:global(.omrs-breakpoint-gt-tablet) {
-  .toolbarWrapper {
-    height: spacing.$spacing-07;
-  }
-}
-
-
 .tableContainer {
   padding: 0;
 

diff --git a/src/facility-metrics/performance/mock-data.ts b/src/facility-metrics/performance/mock-data.ts
@@ -73,160 +73,18 @@ export const donutDepartmentOptions = {
   theme: ChartTheme.WHITE,
 };
 
-export const stackedBarData = [
-  {
-    group: "InPatient",
-    key: "Jan",
-    value: 32432,
-  },
-  {
-    group: "InPatient",
-    key: "Feb",
-    value: 21312,
-  },
-  {
-    group: "InPatient",
-    key: "March",
-    value: 56456,
-  },
-  {
-    group: "InPatient",
-    key: "April",
-    value: 21312,
-  },
-  {
-    group: "InPatient",
-    key: "May",
-    value: 34234,
-  },
-  {
-    group: "InPatient",
-    key: "Jun",
-    value: 32432,
-  },
-  {
-    group: "InPatient",
-    key: "Jul",
-    value: 21312,
-  },
-  {
-    group: "InPatient",
-    key: "Aug",
-    value: 56456,
-  },
-  {
-    group: "InPatient",
-    key: "Sept",
-    value: 21312,
-  },
-  {
-    group: "InPatient",
-    key: "Oct",
-    value: 34234,
-  },
-  {
-    group: "InPatient",
-    key: "Nov",
-    value: 21312,
-  },
-  {
-    group: "InPatient",
-    key: "Dec",
-    value: 56456,
-  },
-  {
-    group: "OutPatient",
-    key: "Jan",
-    value: 12312,
-  },
-  {
-    group: "OutPatient",
-    key: "Feb",
-    value: 23232,
-  },
-  {
-    group: "OutPatient",
-    key: "March",
-    value: 34232,
-  },
-  {
-    group: "OutPatient",
-    key: "April",
-    value: 12312,
-  },
-  {
-    group: "OutPatient",
-    key: "May",
-    value: 34234,
-  },
-  {
-    group: "OutPatient",
-    key: "Jun",
-    value: 23232,
-  },
-  {
-    group: "OutPatient",
-    key: "Jul",
-    value: 34232,
-  },
-  {
-    group: "OutPatient",
-    key: "Aug",
-    value: 12312,
-  },
-  {
-    group: "OutPatient",
-    key: "Sept",
-    value: 34234,
-  },
-  {
-    group: "OutPatient",
-    key: "Oct",
-    value: 34232,
-  },
-  {
-    group: "OutPatient",
-    key: "Nov",
-    value: 12312,
-  },
-  {
-    group: "OutPatient",
-    key: "Dec",
-    value: 34234,
-  },
-];
-
-export const stackedBarOptions = {
-  title: "POC Actived Points",
-  legend: {
-    position: LegendPositions.TOP,
-  },
-  axes: {
-    left: {
-      mapsTo: "value",
-      stacked: true,
-    },
-    bottom: {
-      mapsTo: "key",
-      scaleType: ScaleTypes.LABELS,
-    },
-  },
-  height: "500px",
-  width: "auto",
-};
-
 export const horizontalBarData = [
   {
     group: "ART",
-    value: 10,
+    value: 16,
   },
   {
     group: "TB",
-    value: 10,
+    value: 15,
   },
   {
     group: "LAB",
-    value: 256,
+    value: 50,
   },
   {
     group: "MCH",
@@ -239,7 +97,7 @@ export const horizontalBarData = [
 ];
 
 export const horizontalBarOptions = {
-  title: "Patients Served Vs Service Point",
+  title: "Patients Served Per Service Area",
   legend: {
     position: LegendPositions.TOP,
   },
@@ -282,51 +140,51 @@ export const lineOptions = {
   height: "400px",
 };
 
-export const lineData = [
+export const StackedBarData = [
   {
     group: "ART",
     key: "Triage",
-    value: 1,
+    value: 16,
   },
   {
     group: "ART",
     key: "Clinician",
-    value: 1,
+    value: 16,
   },
   {
     group: "ART",
     key: "LAB",
-    value: 1,
+    value: 12,
   },
   {
     group: "ART",
     key: "Pharmacy",
-    value: 1,
+    value: 16,
   },
   {
     group: "TB",
     key: "Triage",
-    value: 0,
+    value: 15,
   },
   {
     group: "TB",
     key: "Clinician",
-    value: 0,
+    value: 12,
   },
   {
     group: "TB",
     key: "LAB",
-    value: 1,
+    value: 7,
   },
   {
     group: "TB",
     key: "Pharmacy",
-    value: 1,
+    value: 10,
   },
 ];
 
-export const linePOCOptions = {
-  title: "POC Activated Service Points",
+export const StackedBarPOCOptions = {
+  title: "POC Service Points",
   axes: {
     bottom: {
       title: "Service Point",
@@ -335,8 +193,8 @@ export const linePOCOptions = {
     },
     left: {
       mapsTo: "value",
-      title: "Status",
-      scaleType: ScaleTypes.LABELS,
+      title: "Clients Served",
+      scaleType: ScaleTypes.LINEAR,
     },
   },
   height: "500px",

diff --git a/src/facility-metrics/performance/model-components/hmis.component.tsx b/src/facility-metrics/performance/model-components/hmis.component.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@carbon/react";
+import DataList from "../../../components/data-table/data-table.component";
+import { HMISReports, ReportHeaders } from "./model-constants";
 
 interface ToolsPromptProps {
   close: void;
@@ -14,7 +16,11 @@ const ToolsPrompt: React.FC<ToolsPromptProps> = ({ close }) => {
       <div className="cds--modal-header">
         <h3 className="cds--modal-header__heading">HMIS Reports</h3>
       </div>
-      <div className="cds--modal-content"></div>
+
+      <div className="cds--modal-content">
+        <DataList columns={ReportHeaders} data={HMISReports} />
+      </div>
+
       <div className="cds--modal-footer">
         <Button kind="primary" onClick={close}>
           {t("close", "Close")}

diff --git a/src/facility-metrics/performance/model-components/model-constants.ts b/src/facility-metrics/performance/model-components/model-constants.ts
@@ -0,0 +1,45 @@
+export const ToolsHeaders = [
+  {
+    key: "name",
+    header: "NAME",
+    accessor: "name",
+  },
+];
+
+export const ReportHeaders = [
+  {
+    key: "name",
+    header: "REPORT NAME",
+    accessor: "name",
+  },
+];
+
+export const HMISReports = [
+  { name: "HMIS 105a  HEALTH UNIT OUTPATIENT MONTHLY REPORT" },
+  { name: "HMIS 106a HEALTH UNIT QUARTERLY REPORT" },
+];
+
+export const Tools = [
+  {
+    name: "HMIS ACP 003 HIV CARE ART CARD (Summary, clinical assessment & PSS)",
+  },
+  { name: "HMIS ACP 018 HTS CLIENT CARD" },
+  { name: "HMIS ACP 004  COMPREHENSIVE REFFERAL LINKAGE" },
+  { name: "HMIS ACP 008 Comprehensive ART Transfer" },
+  { name: "HMIS ACP 029 SAFE MALE CIRCUMCISION " },
+  { name: "HMIS TB 009 HEALTH UNIT TB REGISTER" },
+  { name: "HMIS TB 014 DRUG RESISTANT (DR) TB REGISTER" },
+  {
+    name: "HMIS ACP 002: Lab Request Form for HIV Viral Load Analysis / HIV Drug Resistance",
+  },
+];
+
+export const PEPFARReports = [
+  { name: "TX_NEW" },
+  { name: "TX_CURR" },
+  { name: "TX_ML" },
+  { name: "TX_RTT" },
+  { name: "TB_STAT" },
+  { name: "TB_ART" },
+  { name: "TX_TB" },
+];
diff --git a/src/facility-metrics/performance/model-components/pepfar.component.tsx b/src/facility-metrics/performance/model-components/pepfar.component.tsx
@@ -1,6 +1,13 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@carbon/react";
+import DataList from "../../../components/data-table/data-table.component";
+import {
+  PEPFARReports,
+  ReportHeaders,
+  Tools,
+  ToolsHeaders,
+} from "./model-constants";
 
 interface ToolsPromptProps {
   close: void;
@@ -14,7 +21,11 @@ const ToolsPrompt: React.FC<ToolsPromptProps> = ({ close }) => {
       <div className="cds--modal-header">
         <h3 className="cds--modal-header__heading">PEPFAR Reports</h3>
       </div>
-      <div className="cds--modal-content"></div>
+
+      <div className="cds--modal-content">
+        <DataList columns={ReportHeaders} data={PEPFARReports} />
+      </div>
+
       <div className="cds--modal-footer">
         <Button kind="primary" onClick={close}>
           {t("close", "Close")}

diff --git a/src/facility-metrics/performance/model-components/tools.component.tsx b/src/facility-metrics/performance/model-components/tools.component.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@carbon/react";
+import DataList from "../../../components/data-table/data-table.component";
+import { Tools, ToolsHeaders } from "./model-constants";
 
 interface ToolsPromptProps {
   close: void;
@@ -12,9 +14,13 @@ const ToolsPrompt: React.FC<ToolsPromptProps> = ({ close }) => {
   return (
     <>
       <div className="cds--modal-header">
-        <h3 className="cds--modal-header__heading">Tools</h3>
+        <h3 className="cds--modal-header__heading">HMIS Tools</h3>
       </div>
-      <div className="cds--modal-content"></div>
+
+      <div className="cds--modal-content">
+        <DataList columns={ToolsHeaders} data={Tools} />
+      </div>
+
       <div className="cds--modal-footer">
         <Button kind="primary" onClick={close}>
           {t("close", "Close")}