@ampath/esm-reports-app 1.0.0-next.8 → 1.0.0-next.81

package/src/root.component.tsx

@@ -6,20 +6,91 @@ import Moh711Report from './reports/moh-711/moh-711.component';
 import Moh717Report from './reports/moh-717/moh-717.component';
 import MoH706Report from './reports/moh-706/moh-706.component';
 import Moh240Report from './reports/moh-240/moh-240.component';
+import Moh505Report from './reports/moh-505/moh-505.component';
+import Moh705BComponent from './reports/moh-705B/moh-705b.component';
+import Moh705AComponent from './reports/moh-705a/moh-705a.component';
+import Moh745Component from './reports/moh-745/moh-745.component';
+import Moh740Report from './reports/moh-740/moh-740.component';
+import Moh204ARegisterComponent from './reports/moh-705a/registers/moh-204a-register.component';
+import Moh204BRegisterComponent from './reports/moh-705B/moh-204b-register.component';
+import Moh412Register from './reports/moh-745/registers/moh-412-register.component';
+import Moh405Register from './reports/moh-711/registers/moh-405-register.component';
+import Moh406Register from './reports/moh-711/registers/moh-406-register.component';
+import Moh333Register from './reports/moh-711/registers/moh-333-register.component';
+import Moh511Register from './reports/moh-711/registers/moh-511-register.component';
+import Moh511710Register from './reports/moh-710/registers/moh-511-710-register.component';
+import Moh731Report from './reports/moh-731/moh-731.component';
+import Moh729bReport from './reports/moh-729b/moh-729b.component';
+import AcfSummaryReport from './reports/acf-summary/acf-summary.component';
+import AcfSummaryLinelist from './reports/acf-summary/acf-summary-linelist.component';
+import Moh729bLinelist from './reports/moh-729b/moh-729b-linelist.component';
+import Moh366Register from './reports/moh-731/registers/moh-366.component';
+import PrepRegisterComponent from './reports/moh-731/registers/prep-register.component';
+import Moh731Linelist from './reports/moh-731/linelist/moh-731-linelist.component';
+import Moh362Register from './registers/moh-362/moh-362.component';
+import Moh240LabRegister from './registers/moh-240/moh-240.component';
+import TbLabRegister from './registers/tb-lab-register/tb-lab-register.component';
+import Moh267Register from './registers/moh-267/moh-267.component';
+import PresumptiveTbRegister from './registers/presumptive-tb/presumptive-tb.component';
+import Tb4Register from './registers/tb4/tb4.component';
+import styles from './root.scss';
+import Moh510RegisterComponent from './reports/moh-710/registers/moh-510/moh-510.component';
+import Moh222DailyRegister from './reports/moh-740/registers/moh-222-daily-register/moh-222-daily-register';
+import Moh270DailyRegister from './reports/moh-740/registers/moh-270-permanent-register/moh-270-permanent-register';
+import Moh512RegisterComponent from './reports/moh-711/registers/moh-512.component';
+import TbRegisterComponent from './reports/moh-711/registers/tb-register.component';
+import Moh413Component from './reports/moh-710/registers/moh-413/moh-413.component';
+import Moh407RegisterComponent from './reports/moh-711/registers/moh-407-register.component';
 
 const RootComponent: React.FC = () => {
   const baseName = window.getOpenmrsSpaBase() + 'home/reports';
 
   return (
     <BrowserRouter basename={baseName}>
-      <Routes>
-        <Route path="/" element={<ReportsDashboard />} />
-        <Route path="/moh-710" element={<Moh710Report />} />
-        <Route path="/moh-711" element={<Moh711Report />} />
-        <Route path="/moh-717" element={<Moh717Report />} />
-        <Route path="/moh-706" element={<MoH706Report />} />
-        <Route path="/moh-240" element={<Moh240Report />} />
-      </Routes>
+      <div className={styles.page}>
+        <Routes>
+          <Route path="/" element={<ReportsDashboard />} />
+          <Route path="/moh-710" element={<Moh710Report />} />
+          <Route path="/moh-711" element={<Moh711Report />} />
+          <Route path="/moh-717" element={<Moh717Report />} />
+          <Route path="/moh-706" element={<MoH706Report />} />
+          <Route path="/moh-240" element={<Moh240Report />} />
+          <Route path="/moh-505" element={<Moh505Report />} />
+          <Route path="/moh-705a" element={<Moh705AComponent />} />
+          <Route path="/moh-705b" element={<Moh705BComponent />} />
+          <Route path="/moh-745" element={<Moh745Component />} />
+          <Route path="/moh-740" element={<Moh740Report />} />
+          <Route path="/moh-412-register" element={<Moh412Register />} />
+          <Route path="/moh-204b" element={<Moh204BRegisterComponent />} />
+          <Route path="/moh-204a" element={<Moh204ARegisterComponent />} />
+          <Route path="/moh-405-register" element={<Moh405Register />} />
+          <Route path="/moh-406-register" element={<Moh406Register />} />
+          <Route path="/moh-333-register" element={<Moh333Register />} />
+          <Route path="/moh-511-register" element={<Moh511Register />} />
+          <Route path="/moh-511-710-register" element={<Moh511710Register />} />
+          <Route path="/moh-731" element={<Moh731Report />} />
+          <Route path="/moh-729b" element={<Moh729bReport />} />
+          <Route path="/moh-729b-linelist" element={<Moh729bLinelist />} />
+          <Route path="/acf-summary" element={<AcfSummaryReport />} />
+          <Route path="/acf-summary-linelist" element={<AcfSummaryLinelist />} />
+          <Route path="/moh-731-linelist" element={<Moh731Linelist />} />
+          <Route path="/moh-366-register" element={<Moh366Register />} />
+          <Route path="/prep-register" element={<PrepRegisterComponent />} />
+          <Route path="/moh-510-register" element={<Moh510RegisterComponent />} />
+          <Route path="/moh-362" element={<Moh362Register />} />
+          <Route path="/moh-222" element={<Moh222DailyRegister />} />
+          <Route path="/moh-270" element={<Moh270DailyRegister />} />
+          <Route path="/moh-240-register" element={<Moh240LabRegister />} />
+          <Route path="/tb-lab-register" element={<TbLabRegister />} />
+          <Route path="/moh-512-register" element={<Moh512RegisterComponent />} />
+          <Route path="/tb-register" element={<TbRegisterComponent />} />
+          <Route path="/moh-413-register" element={<Moh413Component />} />
+          <Route path="/moh-407-register" element={<Moh407RegisterComponent />} />
+          <Route path="/moh-267" element={<Moh267Register />} />
+          <Route path="/presumptive-tb" element={<PresumptiveTbRegister />} />
+          <Route path="/tb4" element={<Tb4Register />} />
+        </Routes>
+      </div>
     </BrowserRouter>
   );
 };

package/src/root.scss

@@ -1,10 +1,25 @@
 @use '@carbon/layout';
 @use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+/* Single gutter for every route, so the dashboard and the individual reports
+   all clear the left nav by the same amount. */
+.page {
+  box-sizing: border-box;
+  min-height: 100%;
+  padding: 0 layout.$spacing-06;
+}
 
 .container {
   padding: layout.$spacing-07;
 }
 
+@media (max-width: $breakpoint-tablet-max) {
+  .page {
+    padding: 0 layout.$spacing-05;
+  }
+}
+
 .welcome {
   @include type.type-style('heading-04');
   margin: layout.$spacing-05 0;
@@ -13,3 +28,24 @@
 .explainer {
   margin-bottom: layout.$spacing-07;
 }
+
+/* Printing a report should put the report on the paper, not the application
+   around it. Every route renders inside `.page`, so the chrome is hidden once
+   here; the filter bar hides itself (see report-filters.scss), and a report
+   with its own sheet geometry (MOH-731) refines this further. */
+
+@media print {
+
+  .page,
+  .page * {
+    visibility: visible;
+  }
+
+  .page {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 0;
+  }
+}

package/src/routes.json

@@ -9,6 +9,7 @@
       "name": "ampath-reports-dashboard-link",
       "component": "reportsDashboardLink",
       "slot": "homepage-dashboard-slot",
+      "privileges": ["O3 View Reports Dashboard"],
       "meta": {
         "name": "reports",
         "slot": "ampath-reports-dashboard-slot",
@@ -20,7 +21,8 @@
     {
       "component": "root",
       "name": "ampath-reports-dashboard-root",
-      "slot": "ampath-reports-dashboard-slot"
+      "slot": "ampath-reports-dashboard-slot",
+      "privileges": ["O3 View Reports Dashboard"]
     }
   ],
   "pages": []

package/src/utils/format-indicator.ts

@@ -0,0 +1,39 @@
+const PREFIX_LABELS: Record<string, string> = {
+    total: 'total',
+    positive: 'positive',
+    min: 'lowest',
+    max: 'highest',
+};
+
+/** Reads like the form row it was drilled from: `positive_urine_ketones_with_members`
+    becomes "Urine Ketones (positive)" rather than the raw indicator key. */
+export function formatIndicatorName(indicator: string): string {
+    if (!indicator) {
+        return '';
+    }
+
+    const parts = indicator.includes("__")
+        ? indicator.split("__").slice(1)
+        : [indicator];
+
+    return parts
+        .map(part => {
+            // the retrieval-layer suffixes carry no meaning for the reader
+            part = part.replace(/_with_members$/, "");
+            const prefix = part.split("_")[0];
+            const qualifier = PREFIX_LABELS[prefix];
+            if (qualifier) {
+                part = part.slice(prefix.length + 1);
+            }
+            const name = part
+                .split("_")
+                .map(word =>
+                    word.length === 1
+                        ? word.toUpperCase()
+                        : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
+                )
+                .join(" ");
+            return qualifier ? `${name} (${qualifier})` : name;
+        })
+        .join(" ");
+}

package/src/utils/get-base-url.ts

@@ -1,12 +1,44 @@
 import { getConfig } from '@openmrs/esm-framework';
-import { moduleName } from '../index';
+import { configSectionName } from '../index';
 
-export async function getEtlBaseUrl() {
-  const { etlBaseUrl } = await getConfig(moduleName);
-  return etlBaseUrl ?? null;
+/**
+ * The ETL host every report reads from, taken from this module's frontend
+ * configuration (`etlBaseUrl`).
+ *
+ * Throws when it is unset rather than returning an empty string: an empty base
+ * collapses every report URL onto the OpenMRS root, which surfaces as a bare
+ * 404 that reads like a missing endpoint instead of missing configuration.
+ */
+export async function getEtlBaseUrl(): Promise<string> {
+  const { etlBaseUrl } = await getConfig(configSectionName);
+  const baseUrl = typeof etlBaseUrl === 'string' ? etlBaseUrl.trim() : '';
+
+  if (!baseUrl) {
+    throw new Error(
+      `The ETL base URL is not configured. Set "etlBaseUrl" for ${configSectionName} in the frontend configuration.`,
+    );
+  }
+
+  // trailing slash trimmed so callers can join with a leading slash safely
+  return baseUrl.replace(/\/+$/, '');
 }
 
-export async function getSubDomain() {
-  const { subDomain } = await getConfig(moduleName);
-  return subDomain ?? null;
+export type EtlQueryParams = Record<string, string | number | undefined | null>;
+
+/**
+ * Builds a report URL from the configured ETL base, a path and its query
+ * parameters. Blank parameters are dropped rather than sent as empty values.
+ */
+export async function buildEtlUrl(path: string, params: EtlQueryParams = {}): Promise<string> {
+  const baseUrl = await getEtlBaseUrl();
+
+  const query = new URLSearchParams(
+    Object.entries(params)
+      .filter(([, value]) => value !== undefined && value !== null && value !== '')
+      .map(([key, value]) => [key, String(value)]),
+  ).toString();
+
+  const url = `${baseUrl}/${path.replace(/^\/+/, '')}`;
+
+  return query ? `${url}?${query}` : url;
 }

package/src/utils/utils.ts

@@ -1,7 +1,36 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+
 export const getCell = (key = "", label = "", colSpan = 1, rowSpan = 1, strong = false) => ({
     key,
     label,
     strong,
     colSpan,
     rowSpan
-});
+});
+
+export async function getJson<T>(url: string, payload: Record<string, unknown> | null = null): Promise<T> {
+  let requestUrl = url;
+
+  if (payload && Object.keys(payload).length > 0) {
+    const queryString = new URLSearchParams(
+      Object.entries(payload).filter(([, value]) => value !== undefined && value !== null) as Array<[string, string]>,
+    ).toString();
+
+    if (queryString) {
+      requestUrl = `${url}?${queryString}`;
+    }
+  }
+
+  const response = await openmrsFetch(requestUrl);
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Request failed with ${response.status}: ${errorText}`);
+  }
+
+  if (response.status === 204 || response.headers.get('content-length') === '0') {
+    return Promise.resolve({} as T);
+  }
+
+  return response.json() as Promise<T>;
+}

package/tsconfig.json

@@ -5,7 +5,7 @@
     "allowSyntheticDefaultImports": true,
     "jsx": "react",
     "skipLibCheck": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "lib": [
       "dom",
       "es5",

package/webpack.config.js

@@ -1 +1,22 @@
-module.exports = require('openmrs/default-webpack-config');
+const path = require('path');
+const config = (module.exports = require('openmrs/default-webpack-config'));
+config.watchConfig.ignored = ['.git', 'test-results', `${path.resolve(__dirname, 'dist')}/**`];
+config.overrides.resolve = {
+  fallback: {
+    crypto: false,
+    stream: false,
+    os: false,
+    path: false,
+    zlib: false,
+    https: false,
+    http: false,
+    util: false,
+    url: false,
+  },
+  extensions: ['.tsx', '.ts', '.jsx', '.js', '.scss'],
+  alias: {
+    '@openmrs/esm-framework': '@openmrs/esm-framework/src/internal',
+  },
+};
+
+module.exports = config;