@ampath/esm-reports-app 1.0.0-next.5 → 1.0.0-next.50

package/src/index.ts

@@ -5,6 +5,18 @@ import { reportsDashboardMeta } from './dashboard-meta/reports-dashboard.meta';
 
 export const moduleName = '@ampath/esm-reports-app';
 
+/**
+ * The section this app's configuration is declared under.
+ *
+ * Not the package name: the AMPATH deployment's `o3-config.json` declares
+ * `@ampath/esm-reporting`, and there is no `@ampath/esm-reports-app` section in
+ * it. Registering the schema under the package name left `etlBaseUrl` on its
+ * empty default no matter what the deployment set, so every report failed with
+ * "the ETL base URL is not configured". Keep this in step with the config, not
+ * with `package.json`.
+ */
+export const configSectionName = '@ampath/esm-reporting';
+
 const options = {
   featureName: 'ampath-esm-reports',
   moduleName,
@@ -13,7 +25,7 @@ const options = {
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
 export function startupApp() {
-  defineConfigSchema(moduleName, configSchema);
+  defineConfigSchema(configSectionName, configSchema);
 }
 export const root = getAsyncLifecycle(() => import('./root.component'), options);
 

package/src/reports/datatable-wrapper/datatable-wrapper.component.tsx

@@ -0,0 +1,69 @@
+import {
+  DataTable,
+  type DataTableHeader,
+  type DataTableRow,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import React from 'react';
+
+interface DatatableWrapperProps {
+  rows: Omit<DataTableRow<any[]>, 'cells'>[];
+  headers: DataTableHeader[];
+  subHeaders?: string[];
+  /** Header keys whose cells wrap instead of stretching the row (`wrap: true` columns) */
+  wrapKeys?: readonly string[];
+  /** Applied to the table, so a register can use its own stylesheet */
+  className?: string;
+}
+
+const DatatableWrapper: React.FC<DatatableWrapperProps> = ({
+  rows,
+  headers,
+  subHeaders = [],
+  wrapKeys = [],
+  className,
+}) => {
+  return (
+    <DataTable rows={rows} headers={headers}>
+      {({ rows, headers, getTableProps, getHeaderProps, getRowProps, getCellProps }) => (
+        <Table {...getTableProps()} className={className}>
+          <TableHead>
+            <TableRow>
+              {headers.map((header) => (
+                <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+              ))}
+            </TableRow>
+            {subHeaders && subHeaders.length && (
+              <TableRow>
+                {subHeaders.map((head, i) => (
+                  <TableHeader key={i}>{head}</TableHeader>
+                ))}
+              </TableRow>
+            )}
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow {...getRowProps({ row })}>
+                {row.cells.map((cell, i) => (
+                  <TableCell
+                    {...getCellProps({ cell })}
+                    className={wrapKeys.includes(headers[i]?.key) ? 'wrapCell' : undefined}
+                  >
+                    {cell.value}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </DataTable>
+  );
+};
+
+export default DatatableWrapper;

package/src/reports/moh-240/moh-240-header.component.tsx

@@ -0,0 +1,62 @@
+import React, { useMemo } from 'react';
+import dayjs from 'dayjs';
+import TableWrapper from '../table-wrapper/table-wrapper.component';
+import TableRowMapper from '../table-wrapper/table-row-mapper.component';
+import { getCell } from '../../utils/utils';
+import { useLocationDetails } from '../../common/report-header';
+import styles from './moh-240.scss';
+
+interface MOH240HeaderProps {
+  facility?: string;
+  startDate?: string;
+  endDate?: string;
+}
+
+const asDate = (value?: string) => (value ? dayjs(value).format('DD/MM/YYYY') : '');
+
+const MOH240Header: React.FC<MOH240HeaderProps> = ({ facility = '', startDate, endDate }) => {
+  const { county, subCounty, kmhflCode } = useLocationDetails();
+
+  const tableRows = useMemo(() => {
+    return [
+      {
+        tableCells: [getCell('', 'County:', 1, 1, true), getCell('', county ?? '', 3)],
+      },
+      {
+        tableCells: [getCell('', 'Sub-County:', 1, 1, true), getCell('', subCounty ?? '', 3)],
+      },
+      {
+        tableCells: [getCell('', 'Health Facility:', 1, 1, true), getCell('', facility, 3)],
+      },
+      {
+        tableCells: [getCell('', 'KMHFL Code:', 1, 1, true), getCell('', kmhflCode ?? '', 3)],
+      },
+      {
+        tableCells: [
+          getCell('', 'Type:', 1, 1, true),
+          getCell('', ''),
+          getCell('', 'Man. Agency:', 1, 1, true),
+          getCell('', ''),
+        ],
+      },
+      {
+        tableCells: [
+          getCell('', 'Start date:', 1, 1, true),
+          getCell('', asDate(startDate)),
+          getCell('', 'End date:', 1, 1, true),
+          getCell('', asDate(endDate)),
+        ],
+      },
+    ];
+  }, [county, subCounty, kmhflCode, facility, startDate, endDate]);
+
+  return (
+    <div className={styles.headerSection}>
+      <TableWrapper className={styles.formTable}>
+        <TableRowMapper tableRows={tableRows} />
+      </TableWrapper>
+    </div>
+  );
+};
+
+export default MOH240Header;

package/src/reports/moh-240/moh-240.columns.ts

@@ -0,0 +1,105 @@
+import { type RegisterColumn } from '../../common/report-register';
+import dayjs from 'dayjs';
+
+/** The register's columns, in the order the printed MOH 240 prints them */
+export const MOH_240_HEADERS = [
+  { key: 'date', header: 'Date (DD/MM/YYYY)' },
+  { key: 'opd_ip_ref_no', header: 'OPD / IPD Ref. No.' },
+  { key: 'lab_no', header: 'Lab. No. (new client)' },
+  { key: 'revisit_no', header: 'Revisit No.' },
+  { key: 'full_name', header: 'Full Names (Three names)' },
+  { key: 'age', header: 'Age' },
+  { key: 'sex', header: 'Sex' },
+  { key: 'county_sub_county', header: 'County / Sub County' },
+  { key: 'village_estate_landmark', header: 'Village / Estate / Landmark' },
+  { key: 'telephone_number', header: 'Telephone Number' },
+  { key: 'clinical_diagnosis', header: 'Clinical Diagnosis' },
+  { key: 'prior_treatment', header: 'Prior Treatment' },
+  { key: 'type_of_specimen', header: 'Type of Specimen' },
+  { key: 'condition_of_specimen', header: 'Condition of Specimen' },
+  { key: 'investigation_required', header: 'Investigation Required' },
+  { key: 'test_datetime', header: 'Date Sample Collected' },
+  { key: 'date_sample_received', header: 'Date Sample Received' },
+  { key: 'clinician_name', header: 'Clinician Name' },
+  { key: 'date_sample_analysed', header: 'Date Sample Analysed' },
+  { key: 'results', header: 'Results' },
+  { key: 'date_results_dispatched', header: 'Date Results Dispatched' },
+  { key: 'amount_charged', header: 'Amount Charged' },
+  { key: 'receipt_number', header: 'Receipt Number' },
+  { key: 'referrals', header: 'Referrals (From Other HF / To Other HF / 3rd Tier Reference Laboratories)' },
+  { key: 'comments', header: 'Comments' },
+  { key: 'testing_officer', header: 'Name of Analysing/Testing Officer' },
+  { key: 'signature', header: 'Signature' },
+] as const;
+
+/** The column letters the printed register runs across the top */
+export const MOH_240_SUB_HEADERS = MOH_240_HEADERS.map((_, i) =>
+  i < 26 ? String.fromCharCode(65 + i) : `A${String.fromCharCode(65 + i - 26)}`,
+);
+
+/**
+ * Columns whose values must stay text in the CSV: identifiers lose leading
+ * zeros and phone numbers open as `#NAME?` formulas when Excel parses them
+ * as numbers.
+ */
+export const MOH_240_TEXT_KEYS = ['lab_no', 'opd_ip_ref_no', 'telephone_number', 'receipt_number'];
+
+/**
+ * Prose columns allowed to wrap on screen; everything else stays `nowrap` so
+ * one long value cannot stretch the 27-column row past the fold.
+ */
+export const MOH_240_WRAP_KEYS = ['clinical_diagnosis', 'type_of_specimen', 'referrals', 'comments'];
+
+/**
+ * The results column carries whichever indicator the drill-down was opened for,
+ * so it is read from a field named by that indicator rather than from `results`.
+ */
+export function resultFieldFor(indicator: string): string {
+  if (indicator.startsWith('min_') || indicator.startsWith('max_')) {
+    return indicator.substring(4);
+  }
+  if (indicator.startsWith('total_')) {
+    return indicator.substring(6);
+  }
+  if (indicator.startsWith('positive_')) {
+    return indicator.substring(9);
+  }
+  return indicator;
+}
+
+/**
+ * Formats a datetime column the way the printed form reads it. Values the
+ * payload already sends as `DD/MM/YYYY` pass through untouched; only raw ISO
+ * datetimes (`2026-08-19T10:18:14.000Z`) are reformatted, so screen and CSV
+ * agree no matter which shape the endpoint returns.
+ */
+export function formatRegisterDate(value: unknown): string {
+  if (value === null || value === undefined || value === '') {
+    return '';
+  }
+  const text = String(value).trim();
+  return /^\d{4}-\d{2}-\d{2}/.test(text) ? dayjs(text).format('DD/MM/YYYY') : text;
+}
+
+/** Exported with the register's own headings, so the CSV matches the form */
+export function moh240Columns(indicator: string): RegisterColumn[] {
+  const resultField = resultFieldFor(indicator);
+
+  return MOH_240_HEADERS.map(({ key, header }) => ({
+    header,
+    value: (row: Record<string, any>) => {
+      if (key === 'results') {
+        // The lab-706 register sends the row's translated result directly;
+        // the per-indicator field remains the fallback for payloads that
+        // only carry the test slots.
+        return row.results ?? row[resultField] ?? '';
+      }
+      if (key === 'test_datetime') {
+        return formatRegisterDate(row[key]);
+      }
+      return row[key] ?? '';
+    },
+    text: (MOH_240_TEXT_KEYS as readonly string[]).includes(key) || undefined,
+    wrap: (MOH_240_WRAP_KEYS as readonly string[]).includes(key) || undefined,
+  }));
+}

package/src/reports/moh-240/moh-240.component.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useSession } from '@openmrs/esm-framework';
+
+import Moh240Register from './sub-reports/moh-240-register.component';
+import Moh240PageSummary from './sub-reports/page-summary.component';
+import MOH240Header from './moh-240-header.component';
+import { MOH_240_SUB_HEADERS, moh240Columns } from './moh-240.columns';
+import { getMoh706PatientList } from '../../resources/moh-706.resource';
+import { getMoh505PatientList } from '../../resources/moh-505.resource';
+import { RegisterLayout, usePatientList } from '../../common/report-register';
+import styles from './moh-240.scss';
+
+/** The reports that drill down into this register */
+const PARENTS: Record<string, { label: string; path: string }> = {
+  'moh-505': { label: 'MOH-505 Report', path: '/moh-505' },
+  'moh-706': { label: 'MOH-706 Report', path: '/moh-706' },
+};
+
+const Moh240Report: React.FC = () => {
+  const [searchParams] = useSearchParams();
+  const session = useSession();
+
+  const locationUuids = searchParams.get('locationUuids') ?? '';
+  const startDate = searchParams.get('startDate') ?? '';
+  const endDate = searchParams.get('endDate') ?? '';
+  const indicators = searchParams.get('indicators') ?? '';
+  const report = searchParams.get('report') || 'moh-706';
+
+  const parent = PARENTS[report] ?? PARENTS['moh-706'];
+
+  const {
+    rows: patientList,
+    total,
+    isTotalExact,
+    isLoading,
+    page,
+    pageSize,
+    onPageChange,
+    fetchAll,
+  } = usePatientList(
+    ({ startIndex, limit }) => {
+      const params = { locationUuids, startDate, endDate, indicators, startIndex, limit };
+
+      return report === 'moh-505' ? getMoh505PatientList(params) : getMoh706PatientList(params);
+    },
+    [locationUuids, startDate, endDate, indicators, report],
+  );
+
+  return (
+    <RegisterLayout
+      parentLabel={parent.label}
+      parentPath={parent.path}
+      title="Laboratory (LAB) Register MOH 240"
+      isLoading={isLoading}
+      isEmpty={patientList.length === 0}
+      page={page}
+      pageSize={pageSize}
+      total={total}
+      isTotalExact={isTotalExact}
+      onPageChange={onPageChange}
+      fetchAll={fetchAll}
+      columns={moh240Columns(indicators)}
+      subHeaders={MOH_240_SUB_HEADERS}
+    >
+      <div className={styles.sheet}>
+        <MOH240Header facility={session?.sessionLocation?.display ?? ''} startDate={startDate} endDate={endDate} />
+        <Moh240Register patientList={patientList} indicator={indicators} />
+        <Moh240PageSummary rows={patientList} />
+      </div>
+    </RegisterLayout>
+  );
+};
+
+export default Moh240Report;

package/src/reports/moh-240/moh-240.scss

@@ -0,0 +1,40 @@
+/* MOH-240 is a drill-down line list, so its table comes from the shared
+   register stylesheet. What is styled here is the printed register's own
+   furniture: the facility block above the list and the page summary below it.
+
+   Both render through TableWrapper, whose cell rules are single-class, so
+   scoping these under `.sheet` (a class plus an element) wins deterministically
+   rather than by module load order. The wrapper is asked for a plain table so
+   Carbon's data-table rules, which are far more specific, never apply. */
+
+$ink: #000;
+$rule: 1px solid $ink;
+
+$text: 0.75rem;
+
+.sheet {
+  .formTable table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .formTable td,
+  .formTable th {
+    height: auto;
+    min-width: 0;
+    padding: 0.25rem 0.375rem;
+    overflow-wrap: anywhere;
+    font-size: $text;
+    line-height: 1.3;
+    text-align: left;
+    border: $rule;
+  }
+}
+
+.headerSection {
+  margin-bottom: 0.75rem;
+}
+
+.summarySection {
+  margin-top: 0.75rem;
+}

package/src/reports/moh-240/sub-reports/moh-240-register.component.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import DatatableWrapper from '../../datatable-wrapper/datatable-wrapper.component';
+import { MOH_240_HEADERS, MOH_240_SUB_HEADERS, MOH_240_WRAP_KEYS, formatRegisterDate } from '../moh-240.columns';
+import tableStyles from '../../../common/report-register/register-table.scss';
+import classNames from 'classnames';
+
+interface Moh240RegisterProps {
+  patientList?: any[];
+  indicator?: string;
+}
+
+const Moh240Register: React.FC<Moh240RegisterProps> = ({ patientList = [], indicator = '' }) => {
+  const rows = patientList.map((patient, index) => {
+    const row: { id: string } & Record<string, any> = { id: String(index) };
+
+    MOH_240_HEADERS.forEach(({ key }) => {
+      row[key] = (key === 'test_datetime' ? formatRegisterDate(patient[key]) : patient[key]) || '';
+    });
+
+    return row;
+  });
+
+  return (
+    <div className={tableStyles.tableContainer}>
+      <DatatableWrapper
+        headers={[...MOH_240_HEADERS]}
+        rows={rows}
+        subHeaders={MOH_240_SUB_HEADERS}
+        wrapKeys={MOH_240_WRAP_KEYS}
+        className={classNames(tableStyles.table, tableStyles.tableBordered, tableStyles.tableStriped)}
+      />
+    </div>
+  );
+};
+
+export default Moh240Register;

package/src/reports/moh-240/sub-reports/page-summary.component.tsx

@@ -0,0 +1,148 @@
+import React, { useMemo } from 'react';
+import TableWrapper from '../../table-wrapper/table-wrapper.component';
+import TableRowMapper from '../../table-wrapper/table-row-mapper.component';
+import { getCell } from '../../../utils/utils';
+import styles from '../moh-240.scss';
+
+/**
+ * Encounter types that count as inpatient (IP). The OPD/IP split on this
+ * summary depends on the site's encounter dictionary, which this module
+ * cannot know; while the set is empty the combined count is shown under OPD
+ * and the IP cell stays blank rather than claiming a split.
+ */
+const INPATIENT_ENCOUNTER_TYPES: number[] = [];
+
+/** Reference-lab tests count as the form's "special" tests; the rest are routine */
+const SPECIAL_TEST_FLAGS = ['total_cd4', 'total_viral_load_specimens', 'total_tb_culture_specimens'];
+
+interface Moh240PageSummaryProps {
+  /** The register rows currently fetched; the printed form summarises a page */
+  rows?: Array<Record<string, any>>;
+}
+
+const Moh240PageSummary: React.FC<Moh240PageSummaryProps> = ({ rows = [] }) => {
+  const flagCount = (flag: string, inpatient: boolean) =>
+    rows.filter(
+      (row) => Number(row[flag]) === 1 && INPATIENT_ENCOUNTER_TYPES.includes(Number(row.encounter_type)) === inpatient,
+    ).length;
+
+  /* combined OPD+IP under the OPD cell while the split is undeterminable */
+  const malariaCell = (flag: string, inpatient: boolean) =>
+    INPATIENT_ENCOUNTER_TYPES.length === 0
+      ? inpatient
+        ? ''
+        : String(flagCount(flag, false) + flagCount(flag, true))
+      : String(flagCount(flag, inpatient));
+
+  const summary = useMemo(
+    () => ({
+      bsUnderFive: [malariaCell('total_malaria_bs_under_5', false), malariaCell('total_malaria_bs_under_5', true)],
+      bsFiveAndAbove: [
+        malariaCell('total_malaria_bs_5_and_above', false),
+        malariaCell('total_malaria_bs_5_and_above', true),
+      ],
+      rdtUnderFive: [malariaCell('total_malaria_rdt_under_5', false), malariaCell('total_malaria_rdt_under_5', true)],
+      rdtFiveAndAbove: [
+        malariaCell('total_malaria_rdt_5_and_above', false),
+        malariaCell('total_malaria_rdt_5_and_above', true),
+      ],
+      routineTests: rows.filter(
+        (row) => Number(row.total_exam) === 1 && !SPECIAL_TEST_FLAGS.some((flag) => Number(row[flag]) === 1),
+      ).length,
+      specialTests: rows.filter((row) => SPECIAL_TEST_FLAGS.some((flag) => Number(row[flag]) === 1)).length,
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rows],
+  );
+
+  const tableRows = useMemo(
+    () => [
+      {
+        tableCells: [getCell('', 'Page Summary', 8, 1, true)],
+      },
+      {
+        tableCells: [
+          getCell('', 'Malaria Testing', 3, 1, true),
+          getCell('', 'Type of test', 2, 1, true),
+          getCell('', 'Referrals', 3, 1, true),
+        ],
+      },
+      {
+        tableCells: [
+          getCell('', '', 1, 2, true),
+          getCell('', 'Number', 2, 1, true),
+          getCell('', '', 1, 2, true),
+          getCell('', 'Number', 1, 2, true),
+          getCell('', '', 1, 1, true),
+          getCell('', 'Number', 2, 1, true),
+        ],
+      },
+      {
+        tableCells: [
+          ,
+          getCell('', 'OPD', 1, 1, true),
+          getCell('', 'IP', 1, 1, true),
+          ,
+          ,
+          getCell(),
+          getCell('', 'Routine', 1, 1, true),
+          getCell('', 'Specialized', 1, 1, true),
+        ],
+      },
+      {
+        tableCells: [
+          getCell('', 'Malaria BS (Under five years)'),
+          getCell('', summary.bsUnderFive[0]),
+          getCell('', summary.bsUnderFive[1]),
+          getCell('', 'No. of Routine tests', 1, 2),
+          getCell('', String(summary.routineTests), 1, 2),
+          getCell('', 'From Other HF'),
+          getCell(),
+          getCell(),
+        ],
+      },
+      {
+        tableCells: [
+          getCell('', 'Malaria BS (5 years and above)'),
+          getCell('', summary.bsFiveAndAbove[0]),
+          getCell('', summary.bsFiveAndAbove[1]),
+          ,
+          ,
+          getCell('', 'To Other HF'),
+          getCell(),
+          getCell(),
+        ],
+      },
+      {
+        tableCells: [
+          getCell('', 'Malaria Rapid Diagnostic Tests (Under five years)'),
+          getCell('', summary.rdtUnderFive[0]),
+          getCell('', summary.rdtUnderFive[1]),
+          getCell('', 'No. of Special tests', 1, 2),
+          getCell('', String(summary.specialTests), 1, 2),
+          getCell('', 'To Reference Laboratories', 1, 2),
+          getCell('', '', 1, 2),
+          getCell('', '', 1, 2),
+        ],
+      },
+      {
+        tableCells: [
+          getCell('', 'Malaria Rapid Diagnostic Tests (5 years and above)'),
+          getCell('', summary.rdtFiveAndAbove[0]),
+          getCell('', summary.rdtFiveAndAbove[1]),
+        ],
+      },
+    ],
+    [summary],
+  );
+
+  return (
+    <div className={styles.summarySection}>
+      <TableWrapper className={styles.formTable}>
+        <TableRowMapper tableRows={tableRows} />
+      </TableWrapper>
+    </div>
+  );
+};
+
+export default Moh240PageSummary;

package/src/reports/moh-505/moh-505-header.component.tsx

@@ -0,0 +1,67 @@
+import React, { useMemo } from 'react';
+import dayjs from 'dayjs';
+import TableWrapper from '../table-wrapper/table-wrapper.component';
+import TableRowMapper from '../table-wrapper/table-row-mapper.component';
+import { getCell } from '../../utils/utils';
+import { useLocationDetails } from '../../common/report-header';
+import styles from './moh-505.scss';
+
+interface MOH505HeaderProps {
+  facility?: string;
+  startDate?: string;
+  endDate?: string;
+}
+
+const asDate = (value?: string) => (value ? dayjs(value).format('DD/MM/YYYY') : '');
+
+const MOH505Header: React.FC<MOH505HeaderProps> = ({ facility = '', startDate, endDate }) => {
+  const { county, subCounty, kmhflCode } = useLocationDetails();
+
+  const tableRows = useMemo(() => {
+    return [
+      {
+        tableCells: [getCell('', 'County:', 1, 1, true), getCell('', county ?? '', 3)],
+      },
+      {
+        tableCells: [getCell('', 'Sub-County:', 1, 1, true), getCell('', subCounty ?? '', 3)],
+      },
+      {
+        tableCells: [getCell('', 'Health Facility:', 1, 1, true), getCell('', facility, 3)],
+      },
+      {
+        tableCells: [getCell('', 'KMHFL code:', 1, 1, true), getCell('', kmhflCode ?? '', 3)],
+      },
+      {
+        tableCells: [
+          getCell('', 'Facility Type:', 1, 1, true),
+          getCell('', ''),
+          getCell('', 'Man. Agency:', 1, 1, true),
+          getCell('', ''),
+        ],
+      },
+      {
+        tableCells: [
+          getCell('', 'Start date:', 1, 1, true),
+          getCell('', asDate(startDate)),
+          getCell('', 'End date:', 1, 1, true),
+          getCell('', asDate(endDate)),
+        ],
+      },
+    ];
+  }, [county, subCounty, kmhflCode, facility, startDate, endDate]);
+
+  return (
+    <div className={styles.headerSection}>
+      <div className={styles.mainTitleBox}>
+        <p className={styles.ministry}>Ministry of Health</p>
+        <h3 className={styles.reportTitle}>MOH 505 IDSR</h3>
+        <p className={styles.subTitle}>Weekly Epidemic Monitoring Form</p>
+      </div>
+      <TableWrapper className={styles.headerTable}>
+        <TableRowMapper tableRows={tableRows} />
+      </TableWrapper>
+    </div>
+  );
+};
+
+export default MOH505Header;