Reporting Demo

packages/esm-covid-app/src/ReportFilters.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Dropdown, Button, Accordion, AccordionItem, DatePicker, DatePickerInput } from '@carbon/react';
+import styles from './home.component.scss';
+import { ComboBox } from '@carbon/react';
+
+const ReportFilters = ({
+  config,
+  reportId,
+  setReportId,
+  ptrackerId,
+  setPtrackerId,
+  personUuid,
+  setPersonUuid,
+  startDate,
+  setStartDate,
+  endDate,
+  setEndDate,
+  handleSubmit,
+  showFilters,
+  handleFiltersToggle,
+}) => {
+  const handleDateChange = (setter) => (event) => {
+    const date = event[0] ? event[0].toISOString().split('T')[0] : '';
+    setter(date);
+  };
+
+  return (
+    <Accordion className={styles.accordion}>
+      <AccordionItem
+        className={styles.heading}
+        title="Report Filters"
+        open={showFilters}
+        onHeadingClick={handleFiltersToggle}
+      >
+        <div className={styles.formContainer}>
+          <form className={styles.form} onSubmit={handleSubmit}>
+            <div className={styles.datePickerContainer}>
+              <ComboBox
+                id="report-dropdown"
+                titleText="Select Report"
+                label="Select a report to display"
+                items={config.reports}
+                itemToString={(item) => (item ? item.name : '')}
+                onChange={({ selectedItem }) => {
+                  if (selectedItem) {
+                    setReportId(selectedItem.reportId || '');
+                    setPtrackerId(selectedItem.ptrackerId || '');
+                    setPersonUuid(selectedItem.personUuid || '');
+                  }
+                }}
+              />
+              <DatePicker
+                datePickerType="single"
+                onChange={handleDateChange(setStartDate)}
+                value={startDate ? [new Date(startDate)] : []}
+              >
+                <DatePickerInput id="start-date" labelText="Start Date" placeholder="yyyy-mm-dd" />
+              </DatePicker>
+              <DatePicker
+                datePickerType="single"
+                onChange={handleDateChange(setEndDate)}
+                value={endDate ? [new Date(endDate)] : []}
+              >
+                <DatePickerInput id="end-date" labelText="End Date" placeholder="yyyy-mm-dd" />
+              </DatePicker>
+              <Button className={styles.button} kind="tertiary" type="submit">
+                View Report
+              </Button>
+            </div>
+          </form>
+        </div>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export default ReportFilters;

packages/esm-covid-app/src/config-schema.ts

@@ -89,9 +89,8 @@ export const configSchema = {
       CovidAssessmentFormName: 'COVID Assessment Form',
       CovidOutcomeFormName: 'COVID Outcome Form',
       CovidVaccinationFormName: 'COVID Vaccination Form',
-      CovidLabTestFormName: 'COVID Lab Test',
-      CovidLabResultFormName: 'COVID Lab Result Form',
-      CovidLabCancellationFormName: 'Lab Order Cancellation',
+      CovidLabTestFormName: 'COVID Lab Test Form',
+      CCovidLabCancellationFormName: 'Lab Order Cancellation',
       CovidSampleCollectionFormName: 'Sample Collection',
       CovidLabOrderFormName: 'COVID Lab Order Form',
     },
@@ -110,12 +109,19 @@ export const configSchema = {
       covidSampleCollectionFormUuid: '371d19b6-485f-11ec-99cc-1fdd2d4e9d88',
     },
   },
+  reports: {
+    _type: Type.Array,
+    _description: 'Reports and their associated UUIDs.',
+    _default: [
+      { name: 'Covid-19 Report', uuid: 'ecabd559-14f6-4c65-87af-1254dfdf1304' },
+      { name: 'HTS Report', uuid: '3ffa5a53-fc65-4a1e-a434-46dbcf1c2de2' },
+      { name: 'ADX-HIV Report', uuid: '2f236b1-b0b5-4ecc-9037-681c23fb45bd' },
+      {
+        name: 'Mother HIV Status Report',
+        ptrackerId: '12345A232567',
+        personUuid: 'bd49d697-b1de-49b9-95c2-6031fb1375fd',
+        reportId: 'mother_hiv_status',
+      },
+    ],
+  },
 };
-
-export interface ConfigObject {
-  encounterTypes: Object;
-  obsConcepts: Object;
-  formNames: object;
-  cohorts: object;
-  formUuids: Object;
-}

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 = {
@@ -39,6 +39,17 @@ export const covidClinicalViewDashboardMeta = {
   title: 'COVID',
 };
 
+export const covidCasesDashboardMeta = {
+  name: 'covid-dashboard',
+  icon: VisualRecognition,
+  slot: 'covid-dashboard-slot',
+  title: 'Covid Test',
+  isFolder: true,
+  folderTitle: 'Covid Test',
+  folderIcon: VisualRecognition,
+  isHidde: true,
+};
+
 export const covid19CasesDashboardMeta = {
   name: 'covid-cases',
   slot: 'covid-cases-dashboard-slot',
@@ -47,3 +58,13 @@ export const covid19CasesDashboardMeta = {
   folderTitle: 'COVID',
   folderIcon: Coronavirus,
 };
+
+export const reportingDemoDashboardMeta = {
+  name: 'covid-report',
+  icon: VisualRecognition,
+  slot: 'covid-reporting-dashboard-slot',
+  title: 'Reporting Demo',
+  isFolder: true,
+  folderTitle: 'Reporting Demo',
+  folderIcon: VisualRecognition,
+};

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

@@ -0,0 +1,133 @@
+.container {
+  padding: 2rem;
+}
+.homeContainer {
+  padding: 1rem;
+}
+.dropdownItem {
+  display: flex;
+  align-items: center;
+}
+.layer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 300px;
+}
+
+.tile {
+  padding: 2rem;
+  text-align: center;
+}
+
+.content {
+  font-size: 1.25rem;
+  color: #5a5a5a;
+}
+
+.explainer {
+  color: #777;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.formContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.datePickerContainer {
+  display: flex;
+  align-items: center; 
+  gap: 16px; 
+}
+
+.fetchButtonContainer {
+  margin-left: 16px;
+  display: flex;
+  align-items: center; 
+}
+
+.datePickerContainer > * {
+  flex: 1; 
+}
+
+.datePickerInput {
+  min-width: 120px;
+}
+
+.button {
+  max-height: 40px;
+  line-height: 40px; 
+  font-size: 14px;
+  padding: 0 16px;
+  margin-top: 1rem;
+  max-width: 120px;
+  align-items: center;
+}
+
+
+.datePickerContainer {
+  display: flex;
+  gap: 1rem;
+}
+
+.fetchButtonContainer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.dataTableContainer {
+  margin-top: 2rem;
+  padding: 1rem;
+  border: solid 1px #e0e0e0;
+  height: 100vh;
+}
+
+.dataTableFullContainer {
+  margin-top: 2rem;
+  padding: 1rem;
+  height: 100vh;
+}
+
+.tableContainer {
+  margin-top: 1rem;
+}
+
+.toolbarWrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.toolbarContent {
+  display: flex;
+  gap: 1rem;
+}
+
+.searchbox {
+  flex-grow: 1;
+}
+
+.tileContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+}
+
+.tileContent {
+  text-align: center;
+}
+
+.content {
+  font-size: 1.25rem;
+  color: #5a5a5a;
+}
+
+.pagination {
+  margin-top: 1rem;
+}

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

@@ -3,7 +3,7 @@ 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 Homecomponent = () => {
+const Home = () => {
   return (
     <div>
       <OHRIWelcomeSection title="COVID-19 Cases" />
@@ -13,4 +13,4 @@ const Homecomponent = () => {
   );
 };
 
-export default Homecomponent;
+export default Home;

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

@@ -9,11 +9,13 @@ 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 Root from './root.component';
+import ReportRoot from './report-root';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -69,4 +71,7 @@ export const covidClinicalViewDashboardLink = getSyncLifecycle(
   options,
 );
 export const covidCasesDashboardLink = getSyncLifecycle(createOHRIGroupedLink(covid19CasesDashboardMeta), options);
-export const covidCasesDashboard = getSyncLifecycle(rootComponent, options);
+export const covidCasesDashboard = getSyncLifecycle(Root, options);
+
+export const reportingDemoDashboardLink = getSyncLifecycle(createOHRIGroupedLink(reportingDemoDashboardMeta), options);
+export const reportingDemoDashboard = getSyncLifecycle(ReportRoot, options);