@@ -13,4 +13,4 @@ const Homecomponent = () => {
);
};
-export default Homecomponent;
+export default Home;
diff --git a/packages/esm-covid-app/src/index.ts b/packages/esm-covid-app/src/index.ts
index 93f65014f..79f2d1a80 100644
--- a/packages/esm-covid-app/src/index.ts
+++ b/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);
diff --git a/packages/esm-covid-app/src/report-home.tsx b/packages/esm-covid-app/src/report-home.tsx
new file mode 100644
index 000000000..c1ebd13ce
--- /dev/null
+++ b/packages/esm-covid-app/src/report-home.tsx
@@ -0,0 +1,155 @@
+import React, { useState, useMemo } from 'react';
+import useSWR from 'swr';
+import {
+ DataTable,
+ Table,
+ TableHead,
+ TableRow,
+ TableHeader,
+ TableBody,
+ TableCell,
+ Layer,
+ Tile,
+ DataTableSkeleton,
+} from '@carbon/react';
+import { OHRIWelcomeSection } from '@ohri/openmrs-esm-ohri-commons-lib';
+import { openmrsFetch, useConfig, restBaseUrl } from '@openmrs/esm-framework';
+import styles from './home.component.scss';
+import capitalize from 'lodash/capitalize';
+import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+import ReportFilters from './ReportFilters';
+import { useTranslation } from 'react-i18next';
+
+const snakeCaseToCapitalizedWords = (snakeCaseString) =>
+ snakeCaseString
+ .split('_')
+ .map((word) => capitalize(word))
+ .join(' ');
+
+const fetcher = (url) => openmrsFetch(url).then((res) => res.json());
+
+const ReportComponent = () => {
+ const config = useConfig();
+ const { t } = useTranslation();
+ const [reportId, setReportId] = useState('mother_hiv_status');
+ const [ptrackerId, setPtrackerId] = useState('');
+ const [personUuid, setPersonUuid] = useState('');
+ const [startDate, setStartDate] = useState('');
+ const [endDate, setEndDate] = useState('');
+ const [showFilters, setShowFilters] = useState(false);
+ const [reportRequested, setReportRequested] = useState(false);
+
+ const url = useMemo(() => {
+ if (!startDate || !endDate) return null;
+ return `${restBaseUrl}/mamba/report?report_id=${reportId}&ptracker_id=${ptrackerId}&person_uuid=${personUuid}&start_date=${startDate}&end_date=${endDate}`;
+ }, [reportId, ptrackerId, personUuid, startDate, endDate]);
+
+ const { data, error, mutate } = useSWR(url, fetcher, { revalidateOnFocus: false });
+
+ const headers = useMemo(() => {
+ if (!data || !data.results.length) return [];
+ return data.results[0].record.map((column) => ({
+ key: column.column,
+ header: snakeCaseToCapitalizedWords(column.column),
+ }));
+ }, [data]);
+
+ const rows = useMemo(() => {
+ if (!data || !data.results.length) return [];
+ return data.results.map((result) => ({
+ id: result.serialId.toString(),
+ ...result.record.reduce(
+ (acc, column) => ({
+ ...acc,
+ [column.column]: column.value === null ? '-' : column.value,
+ }),
+ {},
+ ),
+ }));
+ }, [data]);
+
+ const loading = !data && !error && reportRequested;
+
+ const handleFiltersToggle = () => setShowFilters(!showFilters);
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ setReportRequested(true);
+ mutate();
+ };
+
+ return (
+
+
+
+ {loading ? (
+
+ ) : error ? (
+
+
+
+ {t('errorLadigData', 'Error loading data')}
+ {t('pleaseTryAgain', 'Please try again later')}
+
+
+
+ ) : rows.length === 0 || !reportRequested ? (
+
+
+
+
+ {t('noDataToDisplay', 'No data to display')}
+
+ {t('useReportsAboveToBuild', 'Use the report filters above to build your reports')}
+
+
+
+
+ ) : (
+
+
+ {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+
+
+
+ {headers.map((header) => (
+
+ {header.header}
+
+ ))}
+
+
+
+ {rows.map((row) => (
+
+ {headers.map((header) => (
+ {row[header.key] || '-'}
+ ))}
+
+ ))}
+
+
+ )}
+
+
+ )}
+
+ );
+};
+
+export default ReportComponent;
diff --git a/packages/esm-covid-app/src/report-root.tsx b/packages/esm-covid-app/src/report-root.tsx
new file mode 100644
index 000000000..f9ef72a7f
--- /dev/null
+++ b/packages/esm-covid-app/src/report-root.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { SWRConfig } from 'swr';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import ReportComponent from './report-home';
+
+const swrConfiguration = {
+ // Maximum number of retries when the backend returns an error
+ errorRetryCount: 3,
+};
+
+const ReportRoot: React.FC = () => {
+ const reportingBasename = window.getOpenmrsSpaBase() + 'home/covid-report';
+
+ return (
+
+
+
+
+ } />
+
+
+
+
+ );
+};
+
+export default ReportRoot;
diff --git a/packages/esm-covid-app/src/routes.json b/packages/esm-covid-app/src/routes.json
index f7a8a6f3f..b0cb6ed6b 100644
--- a/packages/esm-covid-app/src/routes.json
+++ b/packages/esm-covid-app/src/routes.json
@@ -21,6 +21,26 @@
"slot": "patient-chart-dashboard-slot",
"component": "covidPatientChartDashboard"
},
+
+
+ {
+ "name": "covid-dashboard",
+ "slot": "covid-dashboard",
+ "component": "covidCasesDashboardLink",
+ "meta": {
+
+ "name": "covid-dashboard",
+ "slot": "covid-dashboard-slot",
+ "cofig": {
+ "title": "Covid Dashboard",
+ "columns": 1,
+ "layoutMode": "anchored"
+ },
+ "title": "Covid Dashboard"
+ }
+ },
+
+
{
"name": "covid-assessments-dashboard",
"slot": "ohri-covid-patient-chart-slot",
@@ -76,7 +96,7 @@
"meta": {
"name": "covid-cases",
"slot": "covid-cases-dashboard-slot",
- "title": "TB Treatment"
+ "title": "Covid Cases"
},
"order": 5
},
@@ -84,6 +104,23 @@
"name": "covid-cases-dashboard",
"slot": "covid-cases-dashboard-slot",
"component": "covidCasesDashboard"
+ },
+ {
+ "name": "covid-report-dashboard-ext",
+ "slot": "homepage-dashboard-slot",
+ "component": "reportingDemoDashboardLink",
+ "meta": {
+ "name": "covid-report",
+ "slot": "covid-reporting-dashboard-slot",
+ "title": "Covid Report"
+ },
+ "order": 5
+ },
+ {
+ "name": "covid-reporting-demo-dashboard",
+ "slot": "covid-reporting-dashboard-slot",
+ "component": "reportingDemoDashboard"
}
+
]
}