@ampath/esm-reports-app 1.0.0-next.2 → 1.0.0-next.21

package/src/reports/moh-745/moh-745.scss

@@ -0,0 +1,69 @@
+
+h3 {
+    text-align: center;
+}
+.tableContainer {
+    margin-left: 2rem;
+    margin-bottom: 2rem;
+    margin-top: 1rem;
+}
+
+.sectionTitle {
+    margin-left: 1rem ;
+}
+
+.table {
+  width: auto;
+  border-collapse: collapse;
+  
+}
+
+.tableBordered td,
+.tableBordered th {
+  border: 1px solid #ccc;
+  padding: 0.3rem;
+  font-size: small;
+}
+
+.tableBordered th {
+    font-weight: bold;
+} 
+
+.tableStriped tbody tr:nth-of-type(odd) {
+  background-color: #f9f9f9;
+}
+
+.rotateUp {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg); 
+}
+
+/*
+span {
+    font-weight: normal;
+    padding: 2px;
+}
+*/
+.location {
+  margin: 2rem;
+  display: flex;
+  flex-wrap: nowrap;     
+  align-items: center;
+  gap: 12px;             
+  white-space: nowrap;   
+}
+
+
+.line {
+  display: inline-block;
+  width: 150px;
+  border-bottom: 1px solid #000;
+  margin-left: 4px;
+}
+
+.shortLine {
+  display: inline-block;
+  width: 90px;
+  border-bottom: 1px solid #000;
+  margin-left: 4px;
+}

package/src/reports/table-wrapper/table-row-mapper.component.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { TableRow, TableCell } from "@carbon/react";
+import styles from './table-wrapper.scss';
+import { navigate } from "@openmrs/esm-framework";
+
+interface TableRowMapperProps {
+    tableRows: {
+        tableCells: Array<{
+            key: string;
+            label: any;
+            strong: boolean;
+            colSpan: number;
+            rowSpan: number;
+        }>
+    }[],
+    data?: any,
+    redirectTo?: string,
+    locationUuids?: string,
+    startDate?: string,
+    endDate?: string
+}
+
+const TableRowMapper: React.FC<TableRowMapperProps> = ({ tableRows, data, redirectTo = "home/reports/moh-240", locationUuids, startDate, endDate }) => {
+    return <>
+        {tableRows.map((tR) => (
+            <TableRow>
+                {tR.tableCells.map((tC, i) => {
+                    const value = data ? data[tC.key] : "";
+
+                    const onClick = () => {
+                        if (!tC.label && tC.key) {
+                            const params = new URLSearchParams();
+                            if (locationUuids) params.append('locationUuids', locationUuids);
+                            if (startDate) params.append('startDate', startDate);
+                            if (endDate) params.append('endDate', endDate);
+                            if (tC.key) params.append('indicators', tC.key);
+                            navigate({ to: `${redirectTo}?${params.toString()}` });
+                        }
+                    };
+
+                    return <TableCell className={styles.dataCell} colSpan={tC.colSpan} key={i} onClick={onClick} {...({ rowSpan: tC.rowSpan } as any)}>
+                        {tC.label ? (tC.strong ? <strong>{tC.label}</strong> : tC.label) : value}
+                    </TableCell>
+
+                })}
+            </TableRow>
+        ))}
+    </>
+}
+
+export default TableRowMapper;

package/src/reports/table-wrapper/table-wrapper.component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Table, TableBody } from '@carbon/react';
+import styles from './table-wrapper.scss';
+
+interface TableWrapperProps {
+    children: React.ReactNode;
+}
+
+const TableWrapper: React.FC<TableWrapperProps> = ({ children }) => {
+    return <>
+        <div className={styles.tableWrapper}>
+            <Table size="sm" className={styles.tableComponent}>
+                <TableBody>
+                    {children}
+                </TableBody>
+            </Table>
+        </div>
+    </>
+}
+
+export default TableWrapper;

package/src/reports/table-wrapper/table-wrapper.scss

@@ -0,0 +1,31 @@
+.tableWrapper {
+  overflow-x: auto;
+  border-radius: 4px;
+  padding: 5px;
+}
+
+.tableContainer {
+  width: 100%;
+  border-collapse: collapse;
+
+  thead {
+    background-color: #f4f4f4;
+  }
+
+  tbody tr {
+    border-bottom: 1px solid #e0e0e0;
+  }
+}
+
+.dataCell {
+  padding: 0.01rem;
+  border: 1px solid #d0d0d0;
+  text-align: center;
+  height: 20px;
+  min-width: 50px;
+  font-size: small;
+
+  &:hover {
+    background-color: #f0f7ff;
+  }
+}

package/src/resources/moh-705.resource.ts

@@ -0,0 +1,60 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { getEtlBaseUrl } from '../utils/get-base-url';
+
+interface Moh710Params {
+  locationUuids: string;
+  startDate?: string;
+  endDate?: string;
+}
+
+export async function getMoh705a(params: Moh710Params): Promise<any> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const url = `${etlBaseUrl}/moh-705a`;
+  const queryparams = {
+    locationUuids: params.locationUuids || '',
+    startDate: params.startDate || '',
+    endDate: params.endDate || '',
+  };
+  const queryString = new URLSearchParams(
+    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
+  ).toString();
+  try {
+    const response = await openmrsFetch(`${url}?${queryString}`);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to fetch dashboard summary: ${response.status} - ${errorText}`);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error: any) {
+    throw new Error(`An error occurred while fetching the MOH-710 report: ${error.message}`);
+  }
+}
+
+export async function getMoh705b(params: Moh710Params): Promise<any> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const url = `${etlBaseUrl}/moh-705b`;
+  const queryparams = {
+    locationUuids: params.locationUuids || '',
+    startDate: params.startDate || '',
+    endDate: params.endDate || '',
+  };
+  const queryString = new URLSearchParams(
+    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
+  ).toString();
+  try {
+    const response = await openmrsFetch(`${url}?${queryString}`);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to fetch dashboard summary: ${response.status} - ${errorText}`);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error: any) {
+    throw new Error(`An error occurred while fetching the MOH-710 report: ${error.message}`);
+  }
+}

package/src/resources/moh-706.resource.ts

@@ -0,0 +1,86 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { getEtlBaseUrl } from '../utils/get-base-url';
+
+interface Moh706Params {
+  locationUuids: string;
+  startDate?: string;
+  endDate?: string;
+}
+
+interface Moh706Response {
+  result: Array<Record<string, unknown>>;
+}
+
+interface Moh706PatientListParams {
+  locationUuids: string;
+  startDate?: string;
+  endDate?: string;
+  indicators: string;
+}
+
+interface Moh706PatientListResponse {
+  result: Array<Record<string, unknown>>;
+}
+
+export async function getMoh706(params: Moh706Params): Promise<Array<Record<string, unknown>>> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const url = `${etlBaseUrl}/lab-706`;
+  const queryparams = {
+    locationUuids: params.locationUuids || '',
+    startDate: params.startDate || '',
+    endDate: params.endDate || '',
+  };
+  const queryString = new URLSearchParams(
+    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
+  ).toString();
+  try {
+    const response = await openmrsFetch(`${url}?${queryString}`);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to fetch MOH-706 report: ${response.status} - ${errorText}`);
+    }
+
+    const data = await response.json();
+
+    if (!Array.isArray(data.result)) {
+      throw new Error('Invalid MOH-706 response format: missing result array.');
+    }
+
+    return data.result;
+  } catch (error: any) {
+    throw new Error(`An error occurred while fetching the MOH-706 report: ${error.message}`);
+  }
+}
+
+export async function getMoh706PatientList(params: Moh706PatientListParams): Promise<Array<Record<string, unknown>>> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const url = `${etlBaseUrl}/lab-706/patient-list`;
+  const queryparams = {
+    locationUuids: params.locationUuids || '',
+    startDate: params.startDate || '',
+    endDate: params.endDate || '',
+    indicators: params.indicators || '',
+  };
+  const queryString = new URLSearchParams(
+    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
+  ).toString();
+  try {
+    const response = await openmrsFetch(`${url}?${queryString}`);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to fetch MOH-706 patient list: ${response.status} - ${errorText}`);
+    }
+
+    const data = await response.json();
+
+    if (!Array.isArray(data.result)) {
+      throw new Error('Invalid MOH-706 patient list response format: missing result array.');
+    }
+
+    return data.result;
+  } catch (error: any) {
+    throw new Error(`An error occurred while fetching the MOH-706 patient list: ${error.message}`);
+  }
+}

package/src/resources/moh-710.resource.ts

@@ -0,0 +1,34 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { getEtlBaseUrl } from '../utils/get-base-url';
+
+interface Moh710Params {
+  locationUuids: string;
+  startDate?: string;
+  endDate?: string;
+}
+
+export async function getMoh710(params: Moh710Params): Promise<any> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const url = `${etlBaseUrl}/moh-710`;
+  const queryparams = {
+    locationUuids: params.locationUuids || '',
+    startDate: params.startDate || '',
+    endDate: params.endDate || '',
+  };
+  const queryString = new URLSearchParams(
+    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
+  ).toString();
+  try {
+    const response = await openmrsFetch(`${url}?${queryString}`);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to fetch dashboard summary: ${response.status} - ${errorText}`);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error: any) {
+    throw new Error(`An error occurred while fetching the MOH-710 report: ${error.message}`);
+  }
+}

package/src/resources/moh-711.resource.ts

@@ -0,0 +1,34 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { getEtlBaseUrl } from '../utils/get-base-url';
+
+interface Moh711Params {
+  locationUuids: string;
+  startDate?: string;
+  endDate?: string;
+}
+
+export async function getMoh711(params: Moh711Params): Promise<any> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const url = `${etlBaseUrl}/moh-711`;
+  const queryparams = {
+    locationUuids: params.locationUuids || '',
+    startDate: params.startDate || '',
+    endDate: params.endDate || '',
+  };
+  const queryString = new URLSearchParams(
+    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
+  ).toString();
+  try {
+    const response = await openmrsFetch(`${url}?${queryString}`);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to fetch dashboard summary: ${response.status} - ${errorText}`);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error: any) {
+    throw new Error(`An error occurred while fetching the MOH-711 report: ${error.message}`);
+  }
+}

package/src/resources/moh-717.resource.ts

@@ -0,0 +1,35 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { getEtlBaseUrl } from '../utils/get-base-url';
+
+interface Moh717Params {
+  locationUuids: string;
+  startDate?: string;
+  endDate?: string;
+}
+
+export async function getMoh717(params: Moh717Params): Promise<any> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const url = `${etlBaseUrl}/moh-717`;
+  const queryparams = {
+    locationUuids: params.locationUuids || '',
+    startDate: params.startDate || '',
+    endDate: params.endDate || '',
+  };
+  const queryString = new URLSearchParams(
+    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
+  ).toString();
+
+  try {
+    const response = await openmrsFetch(`${url}?${queryString}`);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to fetch dashboard summary: ${response.status} - ${errorText}`);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error: any) {
+    throw new Error(`An error occurred while fetching the MOH-717 report: ${error.message}`);
+  }
+}

package/src/resources/moh-745.resource.ts

@@ -0,0 +1,34 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { getEtlBaseUrl } from '../utils/get-base-url';
+
+interface Moh710Params {
+  locationUuids: string;
+  startDate?: string;
+  endDate?: string;
+}
+
+export async function getMoh745(params: Moh710Params): Promise<any> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const url = `${etlBaseUrl}/moh-745`;
+  const queryparams = {
+    locationUuids: params.locationUuids || '',
+    startDate: params.startDate || '',
+    endDate: params.endDate || '',
+  };
+  const queryString = new URLSearchParams(
+    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
+  ).toString();
+  try {
+    const response = await openmrsFetch(`${url}?${queryString}`);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to fetch dashboard summary: ${response.status} - ${errorText}`);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error: any) {
+    throw new Error(`An error occurred while fetching the MOH-710 report: ${error.message}`);
+  }
+}

package/src/root.component.tsx

@@ -1,39 +1,37 @@
-/**
- * From here, the application is pretty typical React, but with lots of
- * support from `@openmrs/esm-framework`. Check out `Greeter` to see
- * usage of the configuration system, and check out `PatientGetter` to
- * see data fetching using the OpenMRS FHIR API.
- *
- * Check out the Config docs:
- *   https://openmrs.github.io/openmrs-esm-core/#/main/config
- */
-
 import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Boxes } from './boxes/slot/boxes.component';
-import Greeter from './greeter/greeter.component';
-import PatientGetter from './patient-getter/patient-getter.component';
-import Resources from './resources/resources.component';
-import styles from './root.scss';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import ReportsDashboard from './dashboard/reports-dasboard';
+import Moh710Report from './reports/moh-710/moh-710.component';
+import Moh711Report from './reports/moh-711/moh-711.component';
+import Moh717Report from './reports/moh-717/moh-717.component';
+import MoH706Report from './reports/moh-706/moh-706.component';
+import Moh240Report from './reports/moh-240/moh-240.component';
+import Moh505Report from './reports/moh-505/moh-505.component';
+import Moh705BComponent from './reports/moh-705B/moh-705b.component';
+import Moh705AComponent from './reports/moh-705a/moh-705a.component';
+import Moh745Component from './reports/moh-745/moh-745.component';
+import Moh740Report from './reports/moh-740/moh-740.component';
 
-const Root: React.FC = () => {
-  const { t } = useTranslation();
+const RootComponent: React.FC = () => {
+  const baseName = window.getOpenmrsSpaBase() + 'home/reports';
 
   return (
-    <div className={styles.container}>
-      <h3 className={styles.welcome}>{t('welcomeText', 'Welcome to the O3 Template app')}</h3>
-      <p className={styles.explainer}>
-        {t('explainer', 'The following examples demonstrate some key features of the O3 framework')}.
-      </p>
-      {/* Greeter: demonstrates the configuration system */}
-      <Greeter />
-      {/* Boxes: demonstrates the extension system */}
-      <Boxes />
-      {/* PatientGetter: demonstrates data fetching */}
-      <PatientGetter />
-      <Resources />
-    </div>
+    <BrowserRouter basename={baseName}>
+      <Routes>
+        <Route path="/" element={<ReportsDashboard />} />
+        <Route path="/moh-710" element={<Moh710Report />} />
+        <Route path="/moh-711" element={<Moh711Report />} />
+        <Route path="/moh-717" element={<Moh717Report />} />
+        <Route path="/moh-706" element={<MoH706Report />} />
+        <Route path="/moh-240" element={<Moh240Report />} />
+        <Route path="/moh-505" element={<Moh505Report />} />
+        <Route path="/moh-705a" element={<Moh705AComponent />} />
+        <Route path="/moh-705b" element={<Moh705BComponent />} />
+        <Route path="/moh-745" element={<Moh745Component />} />
+        <Route path="/moh-740" element={<Moh740Report />} />
+      </Routes>
+    </BrowserRouter>
   );
 };
 
-export default Root;
+export default RootComponent;

package/src/routes.json

@@ -6,25 +6,22 @@
   },
   "extensions": [
     {
-      "name": "Red box",
-      "component": "redBox",
-      "slot": "Boxes"
+      "name": "ampath-reports-dashboard-link",
+      "component": "reportsDashboardLink",
+      "slot": "homepage-dashboard-slot",
+      "meta": {
+        "name": "reports",
+        "slot": "ampath-reports-dashboard-slot",
+        "title": "Reports"
+      },
+      "online": true,
+      "offline": true
     },
-    {
-      "name": "Blue box",
-      "component": "blueBox",
-      "slot": "Boxes"
-    },
-        {
-      "name": "Brand box",
-      "component": "blueBox",
-      "slot": "Boxes"
-    }
-  ],
-  "pages": [
     {
       "component": "root",
-      "route": "root"
+      "name": "ampath-reports-dashboard-root",
+      "slot": "ampath-reports-dashboard-slot"
     }
-  ]
+  ],
+  "pages": []
 }

package/src/utils/get-base-url.ts

@@ -0,0 +1,12 @@
+import { getConfig } from '@openmrs/esm-framework';
+import { moduleName } from '../index';
+
+export async function getEtlBaseUrl() {
+  const { etlBaseUrl } = await getConfig(moduleName);
+  return etlBaseUrl ?? null;
+}
+
+export async function getSubDomain() {
+  const { subDomain } = await getConfig(moduleName);
+  return subDomain ?? null;
+}

package/src/utils/utils.ts

@@ -0,0 +1,36 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+
+export const getCell = (key = "", label = "", colSpan = 1, rowSpan = 1, strong = false) => ({
+    key,
+    label,
+    strong,
+    colSpan,
+    rowSpan
+});
+
+export async function getJson<T>(url: string, payload: Record<string, unknown> | null = null): Promise<T> {
+  let requestUrl = url;
+
+  if (payload && Object.keys(payload).length > 0) {
+    const queryString = new URLSearchParams(
+      Object.entries(payload).filter(([, value]) => value !== undefined && value !== null) as Array<[string, string]>,
+    ).toString();
+
+    if (queryString) {
+      requestUrl = `${url}?${queryString}`;
+    }
+  }
+
+  const response = await openmrsFetch(requestUrl);
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Request failed with ${response.status}: ${errorText}`);
+  }
+
+  if (response.status === 204 || response.headers.get('content-length') === '0') {
+    return Promise.resolve({} as T);
+  }
+
+  return response.json() as Promise<T>;
+}