@palladium-ethiopia/esm-reports-app 5.4.2-pre.200

package/src/left-nav/reports-left-nav.component.scss

@@ -0,0 +1,23 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.sideNav {
+  border-right: 1px solid var(--cds-border-subtle, #e0e0e0);
+  // The fixed SideNav starts at the top of the viewport, behind the 3rem app
+  // header, which clips the "Reports" heading. Offset it below the navbar to
+  // match the framework's own left-nav placement.
+  top: var(--omrs-navbar-height, 3rem);
+  height: calc(100% - var(--omrs-navbar-height, 3rem));
+}
+
+.heading {
+  @include type.type-style('heading-compact-02');
+  padding: layout.$spacing-05 layout.$spacing-05 layout.$spacing-03;
+  margin: 0;
+}
+
+.status {
+  padding: layout.$spacing-03 layout.$spacing-05;
+  color: var(--cds-text-secondary, #525252);
+  @include type.type-style('body-compact-01');
+}

package/src/left-nav/reports-left-nav.component.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { SideNav, SideNavItems, SideNavMenu, SideNavMenuItem, SideNavLink, InlineLoading } from '@carbon/react';
+import { useGroupedReports } from '../api/reports.resource';
+import styles from './reports-left-nav.component.scss';
+
+const ReportsLeftNav: React.FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { groupedReports, isLoading, error } = useGroupedReports();
+
+  const currentUuid = location.pathname.replace(/^\//, '');
+
+  const categories = Object.keys(groupedReports);
+  const hasAnyReport = categories.some((c) => (groupedReports[c]?.length ?? 0) > 0);
+
+  return (
+    <SideNav
+      isFixedNav
+      expanded
+      isChildOfHeader={false}
+      aria-label={t('ethiopiaEmrReports', 'EthiopiaEMR Reports')}
+      className={styles.sideNav}>
+      <SideNavItems>
+        <h4 className={styles.heading}>{t('reports', 'Reports')}</h4>
+
+        {isLoading && (
+          <div className={styles.status}>
+            <InlineLoading description={t('loading', 'Loading…')} />
+          </div>
+        )}
+
+        {error && <div className={styles.status}>{t('errorLoadingReports', 'Could not load the report list.')}</div>}
+
+        {!isLoading &&
+          !error &&
+          categories.map((category) => {
+            const reports = groupedReports[category] ?? [];
+            if (reports.length === 0) {
+              return null;
+            }
+            // Expand the group that contains the currently selected report (default: first).
+            const containsActive = reports.some((r) => r.uuid === currentUuid);
+            return (
+              <SideNavMenu
+                key={category}
+                title={category}
+                defaultExpanded={containsActive || category === categories[0]}>
+                {reports.map((report) => (
+                  <SideNavMenuItem
+                    key={report.uuid}
+                    isActive={report.uuid === currentUuid}
+                    href="#"
+                    onClick={(e: React.MouseEvent) => {
+                      e.preventDefault();
+                      navigate(`/${report.uuid}`);
+                    }}>
+                    {report.name}
+                  </SideNavMenuItem>
+                ))}
+              </SideNavMenu>
+            );
+          })}
+
+        {!isLoading && !error && !hasAnyReport && (
+          <SideNavLink href="#" onClick={(e: React.MouseEvent) => e.preventDefault()}>
+            {t('noRows', 'No rows.')}
+          </SideNavLink>
+        )}
+      </SideNavItems>
+    </SideNav>
+  );
+};
+
+export default ReportsLeftNav;

package/src/report/info-landing.component.scss

@@ -0,0 +1,31 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: layout.$spacing-09;
+  min-height: 60vh;
+}
+
+.tile {
+  max-width: 28rem;
+  text-align: center;
+  padding: layout.$spacing-09 layout.$spacing-07;
+}
+
+.icon {
+  color: var(--cds-icon-secondary, #6f6f6f);
+  margin-bottom: layout.$spacing-05;
+}
+
+.title {
+  @include type.type-style('heading-03');
+  margin-bottom: layout.$spacing-03;
+}
+
+.body {
+  @include type.type-style('body-01');
+  color: var(--cds-text-secondary, #525252);
+}

package/src/report/info-landing.component.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tile } from '@carbon/react';
+import { DocumentMultiple_01 } from '@carbon/react/icons';
+import styles from './info-landing.component.scss';
+
+const InfoLanding: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.wrapper}>
+      <Tile className={styles.tile}>
+        <DocumentMultiple_01 size={48} className={styles.icon} />
+        <h3 className={styles.title}>{t('selectAReport', 'Select a report')}</h3>
+        <p className={styles.body}>
+          {t('selectAReportToBegin', 'Select a report from the menu on the left to get started.')}
+        </p>
+      </Tile>
+    </div>
+  );
+};
+
+export default InfoLanding;

package/src/report/report-results.component.scss

@@ -0,0 +1,26 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.results {
+  margin-top: layout.$spacing-05;
+}
+
+.dataset {
+  margin-bottom: layout.$spacing-06;
+}
+
+.dsTitle {
+  @include type.type-style('heading-compact-02');
+  margin-bottom: layout.$spacing-03;
+}
+
+.scroll {
+  overflow-x: auto;
+  width: 100%;
+}
+
+.empty {
+  @include type.type-style('body-compact-01');
+  color: var(--cds-text-secondary, #525252);
+  padding: layout.$spacing-03 0;
+}

package/src/report/report-results.component.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { type ReportDataSet } from '../api/report-request';
+import styles from './report-results.component.scss';
+
+interface ReportResultsProps {
+  reportUuid: string;
+  dataSets: Array<ReportDataSet>;
+  columnOrderByUuid: Record<string, Array<string>>;
+  hiddenDatasets: Array<string>;
+}
+
+/**
+ * Renders run-report results, one table per (visible) dataset. Columns are
+ * ordered using the configured per-report column order, with any unlisted columns
+ * appended afterwards — porting the legacy GSP's orderColumns()/HIDDEN_DATASETS.
+ */
+const ReportResults: React.FC<ReportResultsProps> = ({ reportUuid, dataSets, columnOrderByUuid, hiddenDatasets }) => {
+  const { t } = useTranslation();
+  const hidden = new Set(hiddenDatasets);
+  const visible = dataSets.filter((ds) => !hidden.has(ds.name));
+
+  if (visible.length === 0) {
+    return <p className={styles.empty}>{t('noData', 'No data returned.')}</p>;
+  }
+
+  return (
+    <div className={styles.results}>
+      {visible.map((ds, idx) => {
+        if (ds.rows.length === 0) {
+          return (
+            <div key={`${ds.name}-${idx}`}>
+              <h4 className={styles.dsTitle}>{ds.name}</h4>
+              <p className={styles.empty}>{t('noRows', 'No rows.')}</p>
+            </div>
+          );
+        }
+
+        const columns = orderColumns(reportUuid, Object.keys(ds.rows[0]), columnOrderByUuid);
+        const headers = columns.map((c) => ({ key: c, header: c }));
+        const tableRows = ds.rows.map((row, rIdx) => {
+          const r: Record<string, string> = { id: String(rIdx) };
+          columns.forEach((c) => {
+            const v = row[c];
+            r[c] = v === null || v === undefined ? '-' : String(v);
+          });
+          return r;
+        });
+
+        return (
+          <div key={`${ds.name}-${idx}`} className={styles.dataset}>
+            <h4 className={styles.dsTitle}>{ds.name}</h4>
+            <DataTable
+              rows={tableRows as Array<{ id: string } & Record<string, string>>}
+              headers={headers}
+              size="sm"
+              useZebraStyles>
+              {({ rows, headers: hdrs, getHeaderProps, getTableProps }) => (
+                <TableContainer>
+                  <div className={styles.scroll}>
+                    <Table {...getTableProps()}>
+                      <TableHead>
+                        <TableRow>
+                          {hdrs.map((header) => {
+                            const { key, ...rest } = getHeaderProps({ header });
+                            return (
+                              <TableHeader key={header.key} {...rest}>
+                                {header.header}
+                              </TableHeader>
+                            );
+                          })}
+                        </TableRow>
+                      </TableHead>
+                      <TableBody>
+                        {rows.map((row) => (
+                          <TableRow key={row.id}>
+                            {row.cells.map((cell) => (
+                              <TableCell key={cell.id}>{String(cell.value)}</TableCell>
+                            ))}
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                </TableContainer>
+              )}
+            </DataTable>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+function orderColumns(
+  uuid: string,
+  availableCols: Array<string>,
+  columnOrderByUuid: Record<string, Array<string>>,
+): Array<string> {
+  const preferred = columnOrderByUuid?.[uuid];
+  if (!preferred) {
+    return availableCols;
+  }
+  const present = new Set(availableCols);
+  const ordered: Array<string> = [];
+  preferred.forEach((c) => {
+    if (present.has(c)) {
+      ordered.push(c);
+      present.delete(c);
+    }
+  });
+  // append any data columns not in the preferred list
+  availableCols.forEach((c) => {
+    if (present.has(c)) {
+      ordered.push(c);
+    }
+  });
+  return ordered;
+}
+
+export default ReportResults;

package/src/report/report-runner.component.scss

@@ -0,0 +1,44 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  padding: layout.$spacing-05 layout.$spacing-06;
+}
+
+.title {
+  @include type.type-style('heading-04');
+  margin-bottom: layout.$spacing-02;
+}
+
+.description {
+  @include type.type-style('body-01');
+  color: var(--cds-text-secondary, #525252);
+  margin-bottom: layout.$spacing-05;
+}
+
+.formPanel {
+  padding: layout.$spacing-05;
+  margin-bottom: layout.$spacing-05;
+}
+
+.fields {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-05;
+  margin-bottom: layout.$spacing-05;
+}
+
+.field {
+  min-width: 12rem;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-03;
+  align-items: center;
+}
+
+.status {
+  margin-top: layout.$spacing-04;
+}

package/src/report/report-runner.component.tsx

@@ -0,0 +1,220 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import {
+  Button,
+  DatePicker,
+  DatePickerInput,
+  InlineLoading,
+  InlineNotification,
+  Layer,
+  TextInput,
+} from '@carbon/react';
+import { useConfig } from '@openmrs/esm-framework';
+import { type EthiopiaReportsConfig } from '../config-schema';
+import { useReportDefinition } from '../api/reports.resource';
+import { runReport, downloadReportDesign, type ReportDataSet } from '../api/report-request';
+import ReportResults from './report-results.component';
+import styles from './report-runner.component.scss';
+
+const ReportRunner: React.FC = () => {
+  const { t } = useTranslation();
+  const { reportUuid } = useParams<{ reportUuid: string }>();
+  const config = useConfig<EthiopiaReportsConfig>();
+  const { reportDefinition, isLoading, error } = useReportDefinition(reportUuid);
+
+  const [paramValues, setParamValues] = useState<Record<string, string>>({});
+  const [results, setResults] = useState<Array<ReportDataSet> | null>(null);
+  const [running, setRunning] = useState(false);
+  const [downloadingUuid, setDownloadingUuid] = useState<string | null>(null);
+  const [status, setStatus] = useState<{ text: string; kind: 'success' | 'error' } | null>(null);
+  const downloadAbortRef = useRef<AbortController | null>(null);
+
+  // Abort any in-flight download poll when the component unmounts or the report changes.
+  useEffect(() => {
+    return () => {
+      downloadAbortRef.current?.abort();
+    };
+  }, [reportUuid]);
+
+  const params = useMemo(() => reportDefinition?.parameters ?? [], [reportDefinition]);
+
+  const allFilled = useMemo(
+    () => params.every((p) => paramValues[p.name] && paramValues[p.name].length > 0),
+    [params, paramValues],
+  );
+
+  const setParam = useCallback((name: string, value: string) => {
+    setParamValues((prev) => ({ ...prev, [name]: value }));
+  }, []);
+
+  const handleRun = useCallback(async () => {
+    if (!reportUuid || !allFilled) {
+      setStatus({ text: t('fillAllFields', 'Please fill in all required fields.'), kind: 'error' });
+      return;
+    }
+    setRunning(true);
+    setStatus({ text: t('running', 'Running report, please wait…'), kind: 'success' });
+    try {
+      const dataSets = await runReport(reportUuid, paramValues);
+      setResults(dataSets);
+      setStatus({ text: t('reportCompleted', 'Report completed successfully.'), kind: 'success' });
+    } catch (e) {
+      setStatus({
+        text: (e as Error)?.message ?? t('reportFailed', 'Report evaluation failed on the server.'),
+        kind: 'error',
+      });
+    } finally {
+      setRunning(false);
+    }
+  }, [reportUuid, allFilled, paramValues, t]);
+
+  const handleDownload = useCallback(
+    async (designUuid: string) => {
+      if (!reportUuid || !allFilled) {
+        setStatus({ text: t('fillAllFields', 'Please fill in all required fields.'), kind: 'error' });
+        return;
+      }
+      downloadAbortRef.current?.abort();
+      const controller = new AbortController();
+      downloadAbortRef.current = controller;
+      setDownloadingUuid(designUuid);
+      setStatus({ text: t('generatingDownload', 'Generating download, please wait…'), kind: 'success' });
+      try {
+        await downloadReportDesign(reportUuid, designUuid, paramValues, controller.signal);
+        setStatus({ text: t('downloadReady', 'Download ready.'), kind: 'success' });
+      } catch (e) {
+        if ((e as Error)?.name === 'AbortError') {
+          return;
+        }
+        setStatus({ text: (e as Error)?.message ?? t('downloadFailed', 'Download failed.'), kind: 'error' });
+      } finally {
+        setDownloadingUuid(null);
+      }
+    },
+    [reportUuid, allFilled, paramValues, t],
+  );
+
+  if (isLoading) {
+    return (
+      <div className={styles.container}>
+        <InlineLoading description={t('loading', 'Loading…')} />
+      </div>
+    );
+  }
+
+  if (error || !reportDefinition) {
+    return (
+      <div className={styles.container}>
+        <InlineNotification
+          kind="error"
+          lowContrast
+          hideCloseButton
+          title={t('errorLoadingReport', 'Could not load this report.')}
+          subtitle={(error as Error)?.message ?? ''}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      <h2 className={styles.title}>{reportDefinition.name}</h2>
+      {reportDefinition.description && <p className={styles.description}>{reportDefinition.description}</p>}
+
+      <Layer className={styles.formPanel}>
+        <div className={styles.fields}>
+          {params.map((param) =>
+            param.type === 'date' ? (
+              <DatePicker
+                key={param.name}
+                datePickerType="single"
+                dateFormat="Y-m-d"
+                className={styles.field}
+                onChange={(dates: Array<Date>) => {
+                  // Carbon's single DatePicker fires onChange with an empty array when it
+                  // closes without a (re)selection — e.g. when focus moves to the other
+                  // date field. Treat that as "no change" so it doesn't clobber a value the
+                  // user already picked. An explicit clear is handled via the input's
+                  // onChange below.
+                  const d = dates?.[0];
+                  if (d) {
+                    setParam(param.name, formatIsoDate(d));
+                  }
+                }}>
+                <DatePickerInput
+                  id={`param-${param.name}`}
+                  labelText={param.label}
+                  placeholder="yyyy-mm-dd"
+                  size="md"
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    if (!e.target.value) {
+                      setParam(param.name, '');
+                    }
+                  }}
+                />
+              </DatePicker>
+            ) : (
+              <TextInput
+                key={param.name}
+                id={`param-${param.name}`}
+                labelText={param.label}
+                size="md"
+                className={styles.field}
+                value={paramValues[param.name] ?? ''}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setParam(param.name, e.target.value)}
+              />
+            ),
+          )}
+        </div>
+
+        <div className={styles.actions}>
+          <Button kind="primary" disabled={running || !allFilled} onClick={handleRun}>
+            {running ? <InlineLoading description={t('running', 'Running…')} /> : t('runReport', 'Run Report')}
+          </Button>
+          {reportDefinition.designs.map((design) => (
+            <Button
+              key={design.uuid}
+              kind="tertiary"
+              disabled={downloadingUuid !== null}
+              onClick={() => handleDownload(design.uuid)}>
+              {downloadingUuid === design.uuid ? (
+                <InlineLoading description={t('generatingDownload', 'Generating…')} />
+              ) : (
+                `${t('download', 'Download')} ${design.name}`
+              )}
+            </Button>
+          ))}
+        </div>
+
+        {status && (
+          <InlineNotification
+            className={styles.status}
+            kind={status.kind}
+            lowContrast
+            hideCloseButton
+            title={status.text}
+          />
+        )}
+      </Layer>
+
+      {results && (
+        <ReportResults
+          reportUuid={reportUuid}
+          dataSets={results}
+          columnOrderByUuid={config.columnOrderByUuid}
+          hiddenDatasets={config.hiddenDatasets}
+        />
+      )}
+    </div>
+  );
+};
+
+function formatIsoDate(date: Date): string {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  return `${y}-${m}-${d}`;
+}
+
+export default ReportRunner;

package/src/root.component.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import ReportsLeftNav from './left-nav/reports-left-nav.component';
+import InfoLanding from './report/info-landing.component';
+import ReportRunner from './report/report-runner.component';
+import styles from './root.scss';
+
+const Root: React.FC = () => {
+  const spaBasePath = `${window.getOpenmrsSpaBase()}reports`;
+
+  return (
+    <BrowserRouter basename={spaBasePath}>
+      <ReportsLeftNav />
+      <main className={styles.container}>
+        <Routes>
+          <Route path="/" element={<InfoLanding />} />
+          <Route path="/:reportUuid" element={<ReportRunner />} />
+        </Routes>
+      </main>
+    </BrowserRouter>
+  );
+};
+
+export default Root;

package/src/root.scss

@@ -0,0 +1,11 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.container {
+  background-color: colors.$white-0;
+  min-height: calc(100vh - 3rem);
+}
+
+:global(.omrs-breakpoint-gt-tablet) .container {
+  margin-left: var(--omrs-sidenav-width);
+}

package/src/routes.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "ethiopiaemrreports": ">=1.0.0",
+    "reporting": ">=1.27.0",
+    "reportingrest": ">=1.15.0"
+  },
+  "pages": [
+    {
+      "component": "root",
+      "route": "reports"
+    }
+  ],
+  "extensions": []
+}

package/translations/am.json

@@ -0,0 +1,20 @@
+{
+  "download": "Download",
+  "downloadFailed": "Download failed.",
+  "downloadReady": "Download ready.",
+  "errorLoadingReport": "Could not load this report.",
+  "errorLoadingReports": "Could not load the report list.",
+  "ethiopiaEmrReports": "EthiopiaEMR Reports",
+  "fillAllFields": "Please fill in all required fields.",
+  "generatingDownload": "Generating…",
+  "loading": "Loading…",
+  "noData": "No data returned.",
+  "noRows": "No rows.",
+  "reportCompleted": "Report completed successfully.",
+  "reportFailed": "Report evaluation failed on the server.",
+  "reports": "Reports",
+  "running": "Running…",
+  "runReport": "Run Report",
+  "selectAReport": "Select a report",
+  "selectAReportToBegin": "Select a report from the menu on the left to get started."
+}

package/translations/en.json

@@ -0,0 +1,20 @@
+{
+  "download": "Download",
+  "downloadFailed": "Download failed.",
+  "downloadReady": "Download ready.",
+  "errorLoadingReport": "Could not load this report.",
+  "errorLoadingReports": "Could not load the report list.",
+  "ethiopiaEmrReports": "EthiopiaEMR Reports",
+  "fillAllFields": "Please fill in all required fields.",
+  "generatingDownload": "Generating download, please wait…",
+  "loading": "Loading…",
+  "noData": "No data returned.",
+  "noRows": "No rows.",
+  "reportCompleted": "Report completed successfully.",
+  "reportFailed": "Report evaluation failed on the server.",
+  "reports": "Reports",
+  "running": "Running report, please wait…",
+  "runReport": "Run Report",
+  "selectAReport": "Select a report",
+  "selectAReportToBegin": "Select a report from the menu on the left to get started."
+}

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"]
+}