@ampath/esm-reports-app 1.0.0-next.41 → 1.0.0-next.42

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

@@ -1,54 +1,56 @@
-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[];
+  /** 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 = [], 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) => (
+                  <TableCell {...getCellProps({ cell })}>{cell.value}</TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
     </DataTable>
-}
+  );
+};
 
-export default DatatableWrapper;
+export default DatatableWrapper;

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

@@ -1,61 +1,59 @@
-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 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 styles from './moh-240.scss';
 
-const MOH240Header: React.FC = () => {
-    const tableRows = useMemo(() => {
-        return [
-            {
-                tableCells: [
-                    getCell("", "County:", 1, 1, true),
-                    getCell("", "", 3),
-                ],
-            },
-            {
-                tableCells: [
-                    getCell("", "Sub-County:", 1, 1, true),
-                    getCell("", "", 3),
-                ],
-            },
-            {
-                tableCells: [
-                    getCell("", "Health Facility:", 1, 1, true),
-                    getCell("", "", 3),
-                ],
-            },
-            {
-                tableCells: [
-                    getCell("", "KMHFL Code:", 1, 1, true),
-                    getCell("", "", 3),
-                ],
-            },
-            {
-                tableCells: [
-                    getCell("", "Type:", 1, 1, true),
-                    getCell("", ""),
-                    getCell("", "Man. Agency:", 1, 1, true),
-                    getCell("", ""),
-                ],
-            },
-            {
-                tableCells: [
-                    getCell("", "Start date:", 1, 1, true),
-                    getCell("", ""),
-                    getCell("", "End date:", 1, 1, true),
-                    getCell("", ""),
-                ],
-            },
-        ];
-    }, []);
+interface MOH240HeaderProps {
+  facility?: string;
+  startDate?: string;
+  endDate?: string;
+}
+
+const asDate = (value?: string) => (value ? dayjs(value).format('DD/MM/YYYY') : '');
 
-    return <div className={styles.headerSection}>
-        <h3>Laboratory (LAB) Register MOH 240</h3>
-        <TableWrapper>
-            <TableRowMapper tableRows={tableRows} />
-        </TableWrapper>
+const MOH240Header: React.FC<MOH240HeaderProps> = ({ facility = '', startDate, endDate }) => {
+  const tableRows = useMemo(() => {
+    return [
+      {
+        tableCells: [getCell('', 'County:', 1, 1, true), getCell('', '', 3)],
+      },
+      {
+        tableCells: [getCell('', 'Sub-County:', 1, 1, true), getCell('', '', 3)],
+      },
+      {
+        tableCells: [getCell('', 'Health Facility:', 1, 1, true), getCell('', facility, 3)],
+      },
+      {
+        tableCells: [getCell('', 'KMHFL Code:', 1, 1, true), getCell('', '', 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)),
+        ],
+      },
+    ];
+  }, [facility, startDate, endDate]);
+
+  return (
+    <div className={styles.headerSection}>
+      <TableWrapper className={styles.formTable}>
+        <TableRowMapper tableRows={tableRows} />
+      </TableWrapper>
     </div>
-}
+  );
+};
 
-export default MOH240Header;
+export default MOH240Header;

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

@@ -0,0 +1,64 @@
+import { type RegisterColumn } from '../../common/report-register';
+
+/** 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)}`,
+);
+
+/**
+ * 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;
+}
+
+/** 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>) => (key === 'results' ? (row[resultField] ?? '') : (row[key] ?? '')),
+  }));
+}

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

@@ -1,93 +1,74 @@
-import React, { useEffect, useState } from "react";
-import { useSearchParams } from "react-router-dom";
-import { Button, Loading } from '@carbon/react';
-import Moh240Register from "./sub-reports/moh-240-register.component";
-import Moh240PageSummary from "./sub-reports/page-summary.component";
-import { getMoh706PatientList } from "../../resources/moh-706.resource";
-import { getMoh505PatientList } from "../../resources/moh-505.resource";
-import MOH240Header from "./moh-240-header.component";
-import styles from "./moh-240.scss";
-import { navigate } from "@openmrs/esm-framework";
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useSession } from '@openmrs/esm-framework';
 
-const Moh240Report: React.FC = () => {
-    const [searchParams] = useSearchParams();
-    const [patientList, setPatientList] = useState<any[]>([]);
-    const [isLoading, setIsLoading] = useState<boolean>(false);
-    const [errorMessage, setErrorMessage] = useState<string>('');
-    const [indicator, setIndicator] = useState<string>('');
+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 { 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';
 
-    useEffect(() => {
-        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');
+/** 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' },
+};
 
-        if (locationUuids && startDate && endDate && indicators) {
-            setIndicator(indicators);
-            fetchPatientList({ locationUuids, startDate, endDate, indicators, report: report || 'moh-706' });
-        }
-    }, [searchParams]);
+const Moh240Report: React.FC = () => {
+  const [searchParams] = useSearchParams();
+  const session = useSession();
 
-    const fetchPatientList = async (params: { locationUuids: string; startDate: string; endDate: string; indicators: string; report: string }) => {
-        setIsLoading(true);
-        setErrorMessage('');
-        try {
-            let result;
-            if (params.report === 'moh-505') {
-                result = await getMoh505PatientList(params);
-            } else {
-                result = await getMoh706PatientList(params);
-            }
-            setPatientList(result);
-        } catch (error: any) {
-            setErrorMessage(error instanceof Error ? error.message : String(error));
-        } finally {
-            setIsLoading(false);
-        }
-    };
+  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 navigateBack = () => {
-        const report = searchParams.get('report');
-        const locationUuids = searchParams.get('locationUuids');
-        const startDate = searchParams.get('startDate');
-        const endDate = searchParams.get('endDate');
+  const parent = PARENTS[report] ?? PARENTS['moh-706'];
 
-        const params = new URLSearchParams();
-        if (locationUuids) params.append('locationUuids', locationUuids);
-        if (startDate) params.append('startDate', startDate);
-        if (endDate) params.append('endDate', endDate);
-        navigate({ to: `home/reports/${report}?${params.toString()}` });
-    }
+  const {
+    rows: patientList,
+    total,
+    isTotalExact,
+    isLoading,
+    page,
+    pageSize,
+    onPageChange,
+    fetchAll,
+  } = usePatientList(
+    ({ startIndex, limit }) => {
+      const params = { locationUuids, startDate, endDate, indicators, startIndex, limit };
 
-    return (
-        <>
-            <div className={styles.buttonContainer}>
-                <Button onClick={navigateBack}>Back</Button>
-            </div>
-            {isLoading && <Loading description="Fetching patient list...." />}
-            {!isLoading && errorMessage && (
-                <div>
-                    <a href="#" className="close" data-dismiss="alert">
-                        &times;
-                    </a>
-                    <h4>
-                        <strong>
-                            <span className="glyphicon glyphicon-warning-sign"></span>{' '}
-                        </strong>{' '}
-                        An error occurred while trying to load the patient list. Please try again.
-                    </h4>
-                    <p>
-                        <small>{errorMessage}</small>
-                    </p>
-                </div>
-            )}
+      return report === 'moh-505' ? getMoh505PatientList(params) : getMoh706PatientList(params);
+    },
+    [locationUuids, startDate, endDate, indicators, report],
+  );
 
-            <MOH240Header />
-            <Moh240Register patientList={patientList} indicator={indicator} />
-            <Moh240PageSummary />
-        </>
-    );
-}
+  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)}
+    >
+      <div className={styles.sheet}>
+        <MOH240Header facility={session?.sessionLocation?.display ?? ''} startDate={startDate} endDate={endDate} />
+        <Moh240Register patientList={patientList} indicator={indicators} />
+        <Moh240PageSummary />
+      </div>
+    </RegisterLayout>
+  );
+};
 
-export default Moh240Report;
+export default Moh240Report;

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

@@ -1,11 +1,40 @@
-.headerSection {
-  padding: 15px;
+/* 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;
+  }
 }
 
-.buttonContainer {
-  margin: 1rem;
+.headerSection {
+  margin-bottom: 0.75rem;
 }
 
-.wrapper {
-  margin: 1rem;
-}
+.summarySection {
+  margin-top: 0.75rem;
+}

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

@@ -1,75 +1,37 @@
-import React from "react";
-import DatatableWrapper from "../../datatable-wrapper/datatable-wrapper.component";
-import styles from "../moh-240.scss";
+import React from 'react';
+import DatatableWrapper from '../../datatable-wrapper/datatable-wrapper.component';
+import { MOH_240_HEADERS, MOH_240_SUB_HEADERS, resultFieldFor } from '../moh-240.columns';
+import tableStyles from '../../../common/report-register/register-table.scss';
+import classNames from 'classnames';
+
 interface Moh240RegisterProps {
-    patientList?: any[];
-    indicator?: string;
+  patientList?: any[];
+  indicator?: string;
 }
 
 const Moh240Register: React.FC<Moh240RegisterProps> = ({ patientList = [], indicator = '' }) => {
-    const 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' }
-    ];
-
-    const getResultField = (ind: string) => {
-        if (ind.startsWith('min_') || ind.startsWith('max_')) {
-            return ind.substring(4);
-        }
-        if (ind.startsWith('total_')) {
-            return ind.substring(6);
-        }
-        if (ind.startsWith('positive_')) {
-            return ind.substring(9);
-        }
-        return ind;
-    };
-
-    const resultField = getResultField(indicator);
+  const resultField = resultFieldFor(indicator);
 
-    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 rows = patientList.map((patient, index) => {
+    const row: { id: string } & Record<string, any> = { id: String(index) };
 
-    const rows = patientList.map((patient, index) => {
-        const row: any = {};
-        headers.forEach(header => {
-            if (header.key === 'results') {
-                row[header.key] = patient[resultField] || '';
-            } else {
-                row[header.key] = patient[header.key] || '';
-            }
-            row["id"] = header.key + index;
-        });
-        return row;
+    MOH_240_HEADERS.forEach(({ key }) => {
+      row[key] = (key === 'results' ? patient[resultField] : patient[key]) || '';
     });
 
-    return <div className={styles.wrapper}>
-        <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}
+        className={classNames(tableStyles.table, tableStyles.tableBordered, tableStyles.tableStriped)}
+      />
     </div>
-}
+  );
+};
 
-export default Moh240Register;
+export default Moh240Register;

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

@@ -88,8 +88,8 @@ const Moh240PageSummary: React.FC = () => {
     }, []);
 
 
-    return <div className={styles.wrapper}>
-        <TableWrapper>
+    return <div className={styles.summarySection}>
+        <TableWrapper className={styles.formTable}>
             <TableRowMapper tableRows={tableRows} />
         </TableWrapper>
     </div>