(feat) OHRI-2309: Add the Report Navigation and dashboard, and hide it behind a config

package.json

@@ -14,6 +14,7 @@
   },
   "scripts": {
     "start": "openmrs develop --backend https://openmrs-dev.globalhealthapp.net --sources 'packages/esm-*-app/'",
+    "start:commonslib": "openmrs develop --backend https://openmrs-dev.globalhealthapp.net --sources 'packages/esm-commons-lib/'",
     "start:core": "openmrs develop --backend https://openmrs-dev.globalhealthapp.net --sources packages/esm-ohri-core-app",
     "start:covid": "openmrs develop --backend https://openmrs-dev.globalhealthapp.net --sources packages/esm-covid-app",
     "start:hct": "openmrs develop --backend https://openmrs-dev.globalhealthapp.net --sources packages/esm-hiv-care-treatment-app",

packages/esm-commons-lib/src/components/extension-conditional-renderer/side-nav-renderer.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useConfig } from '@openmrs/esm-framework';
+
+export function ConditionalNavLinkRenderer({ children, conditionalConfigKey }) {
+  const config = useConfig();
+
+  if (conditionalConfigKey) {
+    return <>{config[conditionalConfigKey] ? children : null}</>;
+  }
+  return <>{children}</>;
+}
+
+export default ConditionalNavLinkRenderer;

packages/esm-commons-lib/src/components/reports/home.component.scss

@@ -0,0 +1,187 @@
+.centeredTextContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  text-align: center;
+}
+
+.container {
+  padding: 2rem;
+}
+
+.homeContainer {
+  padding: 1rem;
+  width: 85vw
+}
+
+.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: 8px;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.datePickerContainer > * {
+  flex: 1;
+  min-width: 150px;
+}
+
+.fetchButtonContainer {
+  margin-left: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.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;
+}
+
+.dataTableContainer {
+  margin-top: 2rem;
+  padding: 1rem;
+  border: solid 1px #e0e0e0;
+  max-height: calc(100vh - 200px);
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+}
+
+.dataTableFullContainer {
+  margin-top: 2rem;
+  padding: 1rem;
+  max-height: calc(100vh - 200px);
+  overflow: auto; 
+}
+
+.dataTable {
+  width: 100%;
+  border-collapse: collapse;
+  // table-layout: fixed;
+}
+
+.tableHeader {
+  white-space: normal; 
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  max-width: 100px;
+  text-align: center; 
+}
+
+.tableCell {
+  white-space: normal; 
+  word-wrap: break-word; 
+  overflow-wrap: break-word; 
+}
+
+.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;
+}
+
+.tableGridLayout {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 0;
+  padding: 0 5px;
+}
+
+.dataCell {
+  padding: 0px;
+  border-radius: 0px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid gray;
+}
+
+.dataCellHeader {
+  background-color: #e0e0e0;
+  text-align: center;
+}
+
+.dataCellValue {
+  text-align: center;
+}

packages/esm-commons-lib/src/components/reports/report-filters.component.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { ComboBox, Button, DatePicker, DatePickerInput } from '@carbon/react';
+import styles from './home.component.scss';
+
+const ReportFilters = ({
+  config,
+  uuid,
+  reportId,
+  setReportId,
+  ptrackerId,
+  setPtrackerId,
+  personUuid,
+  setPersonUuid,
+  startDate,
+  setStartDate,
+  endDate,
+  setEndDate,
+  handleSubmit,
+  setReportRequested,
+}) => {
+  const handleDateChange = (setter) => (event) => {
+    const date = event[0] ? event[0].toISOString().split('T')[0] : '';
+    setter(date);
+  };
+
+  return (
+    <>
+      <div className={styles.centeredTextContainer}>
+        <h2>Report Filters</h2>
+      </div>
+      <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.uuid || '');
+              } else {
+                setReportId('');
+                setPtrackerId('');
+                setPersonUuid('');
+                setStartDate('');
+                setEndDate('');
+                setReportRequested(false);
+              }
+            }}
+          />
+          <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>
+    </>
+  );
+};
+
+export default ReportFilters;