Reporting Demo

packages/esm-covid-app/package.json

@@ -17,6 +17,7 @@
     "prepublishOnly": "npm run build",
     "extract-translations": "i18next 'src/**/*.component.tsx'"
   },
+  "proxy": "https://openmrs-dev.globalhealthapp.net",
   "browserslist": [
     "extends browserslist-config-openmrs"
   ],

packages/esm-covid-app/src/covid-home.component.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { OHRIWelcomeSection } from '@ohri/openmrs-esm-ohri-commons-lib';
+import CovidHomePatientTabs from './covid/dashboard/patient-list-tabs/covid-patient-list-tabs.component';
+import CovidSummaryTiles from './covid/dashboard/summary-tiles/covid-summary-tiles.component';
+
+const CovidHome = () => {
+  return (
+    <div>
+      <OHRIWelcomeSection title="COVID-19 Cases" />
+      <CovidSummaryTiles />
+      <CovidHomePatientTabs />
+    </div>
+  );
+};
+
+export default CovidHome;

packages/esm-covid-app/src/covid-root.component.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { SWRConfig } from 'swr';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import CovidHome from './covid-home.component';
+
+const swrConfiguration = {
+  // Maximum number of retries when the backend returns an error
+  errorRetryCount: 3,
+};
+
+const CovidRoot: React.FC = () => {
+  const covidBasename = window.getOpenmrsSpaBase() + 'home/covid-cases';
+
+  return (
+    <main>
+      <SWRConfig value={swrConfiguration}>
+        <BrowserRouter basename={covidBasename}>
+          <Routes>
+            <Route path="/" element={<CovidHome />} />
+          </Routes>
+        </BrowserRouter>
+      </SWRConfig>
+    </main>
+  );
+};
+
+export default CovidRoot;

packages/esm-covid-app/src/dashboard.meta.ts

@@ -1,4 +1,4 @@
-import { Coronavirus } from '@carbon/react/icons';
+import { Coronavirus, VisualRecognition } from '@carbon/react/icons';
 
 // Patient Chart Dashboards
 export const covidPatientChartMeta = {
@@ -47,3 +47,13 @@ export const covid19CasesDashboardMeta = {
   folderTitle: 'COVID',
   folderIcon: Coronavirus,
 };
+
+export const reportingDemoDashboardMeta = {
+  name: 'covid-cases',
+  icon: VisualRecognition,
+  slot: 'covid-cases-dashboard-slot',
+  title: 'Reporting Demo',
+  isFolder: false,
+  folderTitle: 'Reporting Demo',
+  folderIcon: VisualRecognition,
+};

packages/esm-covid-app/src/home.component.scss

@@ -0,0 +1,75 @@
+@import '~@carbon/styles/scss/colors';
+@import '~@carbon/styles/scss/spacing';
+@import '~@carbon/styles/scss/type/index';
+@import '~@carbon/styles/scss/type';
+$gray-40: #a8a8a8;
+
+.homeContainer {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  max-width: 100%;
+}
+
+.fetchButtonContainer {
+  flex-direction: row;
+  margin-top: 1rem;
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.datePickerContainer {
+  display: flex;
+  gap: 1rem;
+}
+
+.dataTableContainer {
+  margin: 20px;
+  overflow-x: auto;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.dataTableContainer table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 10px;
+  font: caption;
+  font-size: 0.8rem;
+}
+
+.dataTableContainer table tbody td {
+  border: 1px solid $gray-40;
+  text-align: left;
+  padding: 8px;
+}
+
+.dataTableContainer th {
+  border: 1px solid $white;
+  background-color: var(--brand-03);
+  font-weight: bold;
+  padding: 8px;
+  color: white;
+}
+
+.dataTableContainer thead {
+  position: sticky;
+  top: 0;
+  z-index: 999;
+}
+
+.dataTableContainer td {
+  background-color: #ffffff;
+  white-space: unset;
+}
+
+.dataTableContainer tr:nth-child(even) td {
+  background-color: $gray-20;
+}

packages/esm-covid-app/src/home.component.tsx

@@ -1,16 +1,158 @@
-import React from 'react';
+import React, { useState } from 'react';
+import {
+  DataTable,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Dropdown,
+  Button,
+  DatePicker,
+  DatePickerInput,
+} from '@carbon/react';
 import { OHRIWelcomeSection } from '@ohri/openmrs-esm-ohri-commons-lib';
-import CovidHomePatientTabs from './covid/dashboard/patient-list-tabs/covid-patient-list-tabs.component';
-import CovidSummaryTiles from './covid/dashboard/summary-tiles/covid-summary-tiles.component';
+import { openmrsFetch } from '@openmrs/esm-framework';
+import styles from './home.component.scss';
+
+const BASE_WS_API_URL = '/ws/rest/v1/mamba/report';
+
+const HomeComponent = () => {
+  const [headers, setHeaders] = useState([]);
+  const [rows, setRows] = useState([]);
+  const [reportId, setReportId] = useState('mother_hiv_status');
+  const [ptrackerId, setPtrackerId] = useState('12345A232567');
+  const [personUuid, setPersonUuid] = useState('bd49d697-b1de-49b9-95c2-6031fb1375fd');
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+
+  const fetchData = async () => {
+    if (!startDate || !endDate) {
+      console.error('Start date and end date must be provided.');
+      return;
+    }
+
+    try {
+      const url = `${BASE_WS_API_URL}?report_id=${reportId}&ptracker_id=${ptrackerId}&person_uuid=${personUuid}&start_date=${startDate}&end_date=${endDate}`;
+      const response = await openmrsFetch(url, {
+        method: 'GET',
+        headers: {
+          Authorization: 'Basic ' + btoa('root:12345678'),
+        },
+        credentials: 'include',
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+
+      if (data.results.length === 0) {
+        setHeaders([]);
+        setRows([]);
+        return;
+      }
+
+      // Extract headers from the first record
+      const formattedHeaders = data.results[0].record.map((column) => ({
+        key: column.column,
+        header: column.column,
+      }));
+
+      const formattedRows = data.results.map((result) => {
+        const row = { id: result.serialId.toString() };
+        result.record.forEach((column) => {
+          row[column.column] = column.value === null ? '-' : column.value;
+        });
+        return row;
+      });
+
+      setHeaders(formattedHeaders);
+      setRows(formattedRows);
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    }
+  };
+
+  const handleStartDateChange = (event) => {
+    const date = event[0] ? event[0].toISOString().split('T')[0] : '';
+    setStartDate(date);
+  };
+
+  const handleEndDateChange = (event) => {
+    const date = event[0] ? event[0].toISOString().split('T')[0] : '';
+    setEndDate(date);
+  };
 
-const Homecomponent = () => {
   return (
-    <div>
-      <OHRIWelcomeSection title="COVID-19 Cases" />
-      <CovidSummaryTiles />
-      <CovidHomePatientTabs />
+    <div className={styles.homeContainer}>
+      <OHRIWelcomeSection title="Reporting Demo" />
+      <form
+        className={styles.form}
+        onSubmit={(e) => {
+          e.preventDefault();
+          fetchData();
+        }}
+      >
+        <div className={styles.datePickerContainer}>
+          <Dropdown
+            id="report-dropdown"
+            titleText="Select Report"
+            label="Select a report to display"
+            items={[
+              { id: 'ecabd559-14f6-4c65-87af-1254dfdf1304', text: 'Covid-19 Report' },
+              { id: '3ffa5a53-fc65-4a1e-a434-46dbcf1c2de2', text: 'HTS Report' },
+              { id: 'mother_hiv_status', text: 'Mother HIV Status Report' },
+              { id: '2f236b1-b0b5-4ecc-9037-681c23fb45bd', text: 'ADX-HIV Report' },
+            ]}
+            itemToString={(item) => (item ? item.text : '')}
+            onChange={({ selectedItem }) => setReportId(selectedItem.id)}
+          />
+          <DatePicker
+            datePickerType="single"
+            onChange={handleStartDateChange}
+            value={startDate ? [new Date(startDate)] : []}
+          >
+            <DatePickerInput id="start-date" labelText="Start Date" placeholder="yyyy-mm-dd" />
+          </DatePicker>
+          <DatePicker datePickerType="single" onChange={handleEndDateChange} value={endDate ? [new Date(endDate)] : []}>
+            <DatePickerInput id="end-date" labelText="End Date" placeholder="yyyy-mm-dd" />
+          </DatePicker>
+        </div>
+        <div className={styles.fetchButtonContainer}>
+          <Button type="submit">Fetch Report</Button>
+        </div>
+      </form>
+      <div className={styles.dataTableContainer}>
+        <DataTable rows={rows} headers={headers}>
+          {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader {...getHeaderProps({ header })} key={header.key}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow {...getRowProps({ row })} key={row.id}>
+                    {headers.map((header) => (
+                      <TableCell key={header.key}>{row[header.key] || '-'}</TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </DataTable>
+      </div>
     </div>
   );
 };
 
-export default Homecomponent;
+export default HomeComponent;

packages/esm-covid-app/src/index.ts

@@ -9,11 +9,12 @@ import {
   covidClinicalViewDashboardMeta,
   covid19CasesDashboardMeta,
   covidPatientChartMeta,
+  reportingDemoDashboardMeta,
 } from './dashboard.meta';
 import { createOHRIDashboardLink, createOHRIGroupedLink } from '@ohri/openmrs-esm-ohri-commons-lib';
 import { createDashboardGroup, createDashboardLink } from '@openmrs/esm-patient-common-lib';
 import { configSchema } from './config-schema';
-import rootComponent from './root.component';
+import ReportRoot from './root.component';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -68,5 +69,6 @@ export const covidClinicalViewDashboardLink = getSyncLifecycle(
   createOHRIDashboardLink(covidClinicalViewDashboardMeta),
   options,
 );
-export const covidCasesDashboardLink = getSyncLifecycle(createOHRIGroupedLink(covid19CasesDashboardMeta), options);
-export const covidCasesDashboard = getSyncLifecycle(rootComponent, options);
+
+export const reportingDemoDashboardLink = getSyncLifecycle(createOHRIGroupedLink(reportingDemoDashboardMeta), options);
+export const reportingDemoDashboard = getSyncLifecycle(ReportRoot, options);