@ampath/esm-reports-app 1.0.0-next.7 → 1.0.0-next.71

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

@@ -1,54 +1,69 @@
-import { DataTable, type DataTableHeader, type DataTableRow, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@carbon/react";
-import React from "react";
+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[];
+  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 = [] }) => {
-    return <DataTable rows={rows} headers={headers}>
-        {({
-            rows,
-            headers,
-            getTableProps,
-            getHeaderProps,
-            getRowProps,
-            getCellProps,
-        }) => (
-            <Table {...getTableProps()}>
-                <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) => (
-                                <TableCell {...getCellProps({ cell })}>{cell.value}</TableCell>
-                            ))}
-                        </TableRow>
-                    ))}
-                </TableBody>
-            </Table>
-        )}
+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;
+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,113 @@
+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.
+ * `results` wraps because full-panel rows (v1.2) compose every analyte,
+ * including 'Not done' placeholders, into one long string.
+ */
+export const MOH_240_WRAP_KEYS = [
+  'clinical_diagnosis',
+  'type_of_specimen',
+  'referrals',
+  'comments',
+  'results',
+];
+
+/**
+ * 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

@@ -1,12 +1,75 @@
-import React from "react";
-import Moh240Register from "./sub-reports/moh-240-register.component";
-import Moh240PageSummary from "./sub-reports/page-summary.component";
+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 = () => {
-    return <>
-        <Moh240Register />
-        <Moh240PageSummary />
-    </>
-}
+  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;
+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

@@ -1,42 +1,36 @@
-import React from "react";
-import DatatableWrapper from "../../datatable-wrapper/datatable-wrapper.component";
+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';
 
-const Moh240Register: React.FC = () => {
-    const headers = [
-        { key: 'date', header: 'Date (DD/MM/YYYY)' },
-        { key: 'opd_ipd_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', 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: 'date_sample_collected', 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: 'analysing_officer', header: 'Name of Analysing/Testing Officer' },
-        { key: 'signature', header: 'Signature' }
-    ];
+interface Moh240RegisterProps {
+  patientList?: any[];
+  indicator?: string;
+}
 
-    const subHeaders = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z', 'AA'];
+const Moh240Register: React.FC<Moh240RegisterProps> = ({ patientList = [], indicator = '' }) => {
+  const rows = patientList.map((patient, index) => {
+    const row: { id: string } & Record<string, any> = { id: String(index) };
 
-    const rows = [];
+    MOH_240_HEADERS.forEach(({ key }) => {
+      row[key] = (key === 'test_datetime' ? formatRegisterDate(patient[key]) : patient[key]) || '';
+    });
 
-    return <DatatableWrapper headers={headers} rows={rows} subHeaders={subHeaders}/>
-}
+    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;
+export default Moh240Register;