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

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

@@ -1,74 +1,132 @@
+/* MOH-745 laid out for A4, matching MOH-711 and MOH-740: geometry in
+   millimetres, type in points, one rule weight. Its 33 rows fit one page. */
 
-h3 {
-    text-align: center;
+$ink: #000;
+$rule: 1px solid $ink;
+
+$text: 7pt;
+$title: 7.5pt;
+$meta: 6.5pt;
+
+/* The blocks below stack flush and share their edges, so the sheet reads as one
+   continuous form rather than a title, two loose tables and a footer. */
+
+.reportTitle {
+  padding: 3mm;
+  font-size: $title;
+  font-weight: 700;
+  text-align: center;
+  border: $rule;
 }
-.tableContainer {
-    margin-left: 2rem;
-    margin-bottom: 2rem;
-    margin-top: 1rem;
+
+/* Facility / county / period strip, and the sign-off at the foot: both are one
+   line of fields separated by spacing, with rules to write on. */
+
+.location {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+  /* Six fields rather than the five the other reports carry, so the rules are
+     a little shorter to keep the row on one line. */
+  gap: 2.5mm;
+  padding: 2mm 3mm;
+  font-size: $meta;
+  white-space: nowrap;
+  border: $rule;
+  border-top: none;
 }
 
-.sectionTitle {
-    margin-left: 1rem ;
+.line,
+.shortLine {
+  display: inline-block;
+  padding: 0 0.5mm;
+  margin-left: 1mm;
+  overflow: hidden;
+  font-weight: 600;
+  text-align: center;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+  border-bottom: $rule;
 }
 
-.table {
-  width: auto;
-  border-collapse: collapse;
-  
+.line {
+  width: 24mm;
 }
 
+.shortLine {
+  width: 12mm;
+}
 
+.tableContainer {
+  width: 100%;
+  overflow-x: auto;
+
+  /* pulls the second table onto the first one's edge instead of doubling it */
+  & + & {
+    margin-top: -1px;
+  }
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
 
 .tableBordered td,
 .tableBordered th {
-  border: 1px solid #ccc;
-  padding: 0.3rem;
-  font-size: small;
+  padding: 1mm 1.5mm;
+  font-size: $text;
+  text-align: center;
+  border: $rule;
 }
 
 .tableBordered th {
-    font-weight: bold;
-} 
+  font-weight: 700;
+  background-color: #f4f4f4;
+}
 
 .tableStriped tbody tr:nth-of-type(odd) {
-  background-color: #f9f9f9;
+  background-color: #fafafa;
 }
 
-.rotateUp {
-  writing-mode: vertical-rl;
-  transform: rotate(180deg); 
+/* Sign-off, enclosed by the form rather than floating beneath it.
+
+   Its rules are wider than the header strip's: four fields across the sheet
+   leave about 133mm for them, where the header has to fit six. At the shared
+   12mm a date like "29-Jul-2026" needs 13.6mm and was being ellipsised. Sized
+   to leave headroom rather than to fill the row exactly. */
+
+.signOff .line {
+  width: 36mm;
 }
 
-/*
-span {
-    font-weight: normal;
-    padding: 2px;
+.signOff .shortLine {
+  width: 22mm;
 }
-*/
-.location {
-  margin: 2rem;
+
+.signOff {
   display: flex;
-  flex-wrap: nowrap;     
-  align-items: center;
-  gap: 12px;             
-  white-space: nowrap;   
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 2.5mm;
+  padding: 3mm;
+  font-size: $meta;
+  white-space: nowrap;
+  border: $rule;
+  border-top: none;
 }
 
-
-.line {
-  display: inline-block;
-  width: 150px;
-  border-bottom: 1px solid #000;
-  margin-left: 4px;
+.rotateUp {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
 }
 
-.shortLine {
-  display: inline-block;
-  width: 90px;
-  border-bottom: 1px solid #000;
-  margin-left: 4px;
+/* On paper the striping is screen affordance that prints as grey noise */
+
+@media print {
+  .tableStriped tbody tr:nth-of-type(odd) {
+    background-color: transparent;
+  }
 }
-.buttonContainer {
-    margin: 2rem;
-}

package/src/reports/moh-745/registers/moh-412-register.component.tsx

@@ -1,17 +1,15 @@
-import { Button, Loading, Table, TableBody, TableHead, TableHeader, TableRow } from '@carbon/react';
-import React, { useEffect, useState } from 'react';
+import { Table, TableBody, TableHead, TableHeader, TableRow } from '@carbon/react';
+import React from 'react';
 
-import styles from '../moh-745.scss';
+import styles from '../../../common/report-register/register-table.scss';
 import classNames from 'classnames';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import { moh412Columns } from './type';
 import { getMoh412PatientList } from '../../../resources/moh-745.resource';
+import { moh412ExportColumns } from './moh-412.columns';
+import { RegisterLayout, usePatientList } from '../../../common/report-register';
 
 const Moh412Register: React.FC = () => {
-  const navigate = useNavigate();
-  const [patientlist, setPatientList] = useState<any[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-
   const [searchParams] = useSearchParams();
 
   const startDate = searchParams.get('startDate');
@@ -19,42 +17,43 @@ const Moh412Register: React.FC = () => {
   const locationUuids = searchParams.get('locationUuids');
   const indicator = searchParams.get('indicator');
 
-  useEffect(() => {
-    const fetchData = async () => {
-      if (!startDate || !endDate || !locationUuids || !indicator) return;
-
-      setIsLoading(true);
-
-      try {
-        const params = {
-          startDate,
-          endDate,
-          locationUuids,
-          indicator,
-        };
-
-        const data = await getMoh412PatientList(params);
-
-        setPatientList(data?.results.results || []);
-      } catch (error) {
-        console.error('Failed to fetch register data', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchData();
-  }, [startDate, endDate, locationUuids, indicator]);
+  const {
+    rows: patientlist,
+    total,
+    isTotalExact,
+    isLoading,
+    page,
+    pageSize,
+    onPageChange,
+    fetchAll,
+  } = usePatientList(
+    ({ startIndex, limit }) =>
+      getMoh412PatientList({
+        startDate,
+        endDate,
+        locationUuids,
+        indicator,
+        startIndex,
+        limit,
+      }),
+    [startDate, endDate, locationUuids, indicator],
+  );
 
-  function navigateBack() {
-    navigate('/moh-745');
-  }
   return (
-    <>
-      <div className={styles.buttonContainer}>
-        <Button onClick={navigateBack}>Back</Button>
-      </div>
-      <div>{isLoading && <Loading />}</div>
+    <RegisterLayout
+      parentLabel="MOH-745 Report"
+      parentPath="/moh-745"
+      title="MOH 412 Cancer Screening Register"
+      isLoading={isLoading}
+      isEmpty={patientlist.length === 0}
+      page={page}
+      pageSize={pageSize}
+      total={total}
+      isTotalExact={isTotalExact}
+      onPageChange={onPageChange}
+      fetchAll={fetchAll}
+      columns={moh412ExportColumns}
+    >
       <div className={styles.tableContainer}>
         <Table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
           <TableHead>
@@ -185,7 +184,7 @@ const Moh412Register: React.FC = () => {
           </TableBody>
         </Table>
       </div>
-    </>
+    </RegisterLayout>
   );
 };
 export default Moh412Register;

package/src/reports/moh-745/registers/moh-412.columns.ts

@@ -0,0 +1,52 @@
+import { type RegisterColumn } from '../../../common/report-register';
+
+/**
+ * MOH 412 as the register prints it: one column per cell, in the order they appear.
+ *
+ * One column is rendered by the table but has no heading above it -- the
+ * header row is 24 columns wide against 25 of data. It carries its field name
+ * rather than a heading borrowed from a neighbouring column.
+ */
+export const moh412ExportColumns: RegisterColumn[] = [
+  { header: 'Client Details - a)S/No No', value: (row) => row.serial_no ?? '' },
+  { header: 'Client Details - b)Visit Date', value: (row) => row.visit_date ?? '' },
+  { header: 'Client Details - c)Visit Type', value: (row) => row.visit_type ?? '' },
+  { header: 'Client Details - d)Client No', value: (row) => row.client_no ?? '' },
+  { header: 'Client Details - e)Client Names', value: (row) => row.full_names ?? '' },
+  { header: "Client Details - f)Client's Phone Number", value: (row) => row.phone_number ?? '' },
+  { header: "Client Details - g)Client's Age", value: (row) => row.age ?? '' },
+  { header: 'Client Details - h)Location Residence', value: (row) => row.location_residence ?? '' },
+  {
+    header: "Client Details - i)Treatment Suppoter's Phone Number",
+    value: (row) => row.treatment_supporter_phone_number ?? '',
+  },
+  {
+    header: 'CERVICAL CANCER - Screening Methods and Results - j)Via or VIA/VILLI',
+    value: (row) => row.via_villi ?? '',
+  },
+  { header: 'CERVICAL CANCER - Screening Methods and Results - k)Pap Smear', value: (row) => row.pap_smear ?? '' },
+  {
+    header: 'CERVICAL CANCER - Screening Methods and Results - l)HPV Test (over 30 years)',
+    value: (row) => row.hpv ?? '',
+  },
+  { header: 'CERVICAL CANCER - Pre-Cancer Treatment - m)cryotherapy', value: (row) => row.cryotherapy ?? '' },
+  {
+    header: 'CERVICAL CANCER - Pre-Cancer Treatment - n)Thermo- ablation',
+    value: (row) => row.thermocoagulation ?? '',
+  },
+  { header: 'CERVICAL CANCER - Pre-Cancer Treatment - o)LEEP', value: (row) => row.leep ?? '' },
+  { header: 'Breast Cancer - Methods and Results - p)CBE', value: (row) => row.cbe ?? '' },
+  { header: 'Breast Cancer - Methods and Results - q)Ultrasound', value: (row) => row.ultrasound ?? '' },
+  { header: 'Breast Cancer - Methods and Results - r)Mammogram', value: (row) => row.mammogram ?? '' },
+  { header: 'Colorectal Cancer - Methods and Results - s)Colonoscopy', value: (row) => row.colonoscopy ?? '' },
+  { header: 'Colorectal Cancer - Methods and Results - t)FOBT', value: (row) => row.fobt ?? '' },
+  { header: 'u)HIV Status', value: (row) => row.hiv_status ?? '' },
+  { header: 'v)Referral To/From', value: (row) => row.referral_from ?? '' },
+  { header: 'w)Follow- up Date', value: (row) => row.referral_to ?? '' },
+  {
+    header:
+      'Remarks(e.g Colposcopy done, Cervicography results, Call Client for follow up, Return for post-treatment screening, Communicate with the referral site)',
+    value: (row) => row.follow_up_date ?? '',
+  },
+  { header: 'Remarks', value: (row) => row.remarks ?? '' },
+];

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

@@ -1,21 +1,30 @@
 import React from 'react';
-import { Table, TableBody } from '@carbon/react';
+import classNames from 'classnames';
 import styles from './table-wrapper.scss';
 
 interface TableWrapperProps {
-    children: React.ReactNode;
+  children: React.ReactNode;
+  /** Applied to the wrapper, so a report can use its own stylesheet */
+  className?: string;
 }
 
-const TableWrapper: React.FC<TableWrapperProps> = ({ children }) => {
-    return <>
-        <div className={styles.tableWrapper}>
-            <Table size="sm" className={styles.tableComponent}>
-                <TableBody>
-                    {children}
-                </TableBody>
-            </Table>
-        </div>
-    </>
-}
+/**
+ * The frame the form-shaped reports render their tables in.
+ *
+ * This used to be Carbon's `<Table>`, but every report that uses it is a
+ * printed form rather than a data grid: Carbon sizes its rows to 2rem and pads
+ * its cells to 1rem, at a specificity no report stylesheet can reasonably
+ * outrank. A plain table carries none of those rules, so the reports size their
+ * own cells for A4.
+ */
+const TableWrapper: React.FC<TableWrapperProps> = ({ children, className }) => {
+  return (
+    <div className={classNames(styles.tableWrapper, className)}>
+      <table>
+        <tbody>{children}</tbody>
+      </table>
+    </div>
+  );
+};
 
-export default TableWrapper;
+export default TableWrapper;

package/src/reports/table-wrapper/table-wrapper.scss

@@ -1,20 +1,5 @@
 .tableWrapper {
   overflow-x: auto;
-  border-radius: 4px;
-  padding: 5px;
-}
-
-.tableContainer {
-  width: 100%;
-  border-collapse: collapse;
-
-  thead {
-    background-color: #f4f4f4;
-  }
-
-  tbody {
-    background-color: white;
-  }
 }
 
 .dataCell {
@@ -28,4 +13,4 @@
   &:hover {
     background-color: #f0f7ff;
   }
-}
+}

package/src/resources/moh-505.resource.ts

@@ -1,5 +1,12 @@
 import { openmrsFetch } from '@openmrs/esm-framework';
-import { getEtlBaseUrl } from '../utils/get-base-url';
+import { buildEtlUrl } from '../utils/get-base-url';
+import {
+  PAGE_SIZE,
+  pageParams,
+  toPatientListPage,
+  type PatientListPage,
+  type PatientListParams,
+} from './patient-list-page';
 
 interface Moh505Params {
   locationUuids: string;
@@ -11,30 +18,14 @@ interface Moh505Response {
   result: Array<Record<string, unknown>>;
 }
 
-interface Moh505PatientListParams {
-  locationUuids: string;
-  startDate?: string;
-  endDate?: string;
-  indicators: string;
-}
-
-interface Moh505PatientListResponse {
-  result: Array<Record<string, unknown>>;
-}
-
 export async function getMoh505(params: Moh505Params): Promise<Array<Record<string, unknown>>> {
-  const etlBaseUrl = await getEtlBaseUrl();
-  const url = `${etlBaseUrl}/moh-505`;
-  const queryparams = {
+  const url = await buildEtlUrl('moh-505', {
     locationUuids: params.locationUuids || '',
     startDate: params.startDate || '',
     endDate: params.endDate || '',
-  };
-  const queryString = new URLSearchParams(
-    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
-  ).toString();
+  });
   try {
-    const response = await openmrsFetch(`${url}?${queryString}`);
+    const response = await openmrsFetch(url);
 
     if (!response.ok) {
       const errorText = await response.text();
@@ -53,20 +44,16 @@ export async function getMoh505(params: Moh505Params): Promise<Array<Record<stri
   }
 }
 
-export async function getMoh505PatientList(params: Moh505PatientListParams): Promise<Array<Record<string, unknown>>> {
-  const etlBaseUrl = await getEtlBaseUrl();
-  const url = `${etlBaseUrl}/moh-505/patient-list`;
-  const queryparams = {
+export async function getMoh505PatientList(params: PatientListParams): Promise<PatientListPage> {
+  const url = await buildEtlUrl('moh-505/patient-list', {
     locationUuids: params.locationUuids || '',
     startDate: params.startDate || '',
     endDate: params.endDate || '',
     indicators: params.indicators || '',
-  };
-  const queryString = new URLSearchParams(
-    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
-  ).toString();
+    ...pageParams(params),
+  });
   try {
-    const response = await openmrsFetch(`${url}?${queryString}`);
+    const response = await openmrsFetch(url);
 
     if (!response.ok) {
       const errorText = await response.text();
@@ -75,12 +62,8 @@ export async function getMoh505PatientList(params: Moh505PatientListParams): Pro
 
     const data = await response.json();
 
-    if (!Array.isArray(data.result)) {
-      throw new Error('Invalid MOH-505 patient list response format: missing result array.');
-    }
-
-    return data.result;
+    return toPatientListPage(data, params.startIndex ?? 0, params.limit ?? PAGE_SIZE);
   } catch (error: any) {
     throw new Error(`An error occurred while fetching the MOH-505 patient list: ${error.message}`);
   }
-}
+}

package/src/resources/moh-705.resource.ts

@@ -1,5 +1,12 @@
 import { openmrsFetch } from '@openmrs/esm-framework';
-import { getEtlBaseUrl } from '../utils/get-base-url';
+import { buildEtlUrl } from '../utils/get-base-url';
+import {
+  PAGE_SIZE,
+  pageParams,
+  toPatientListPage,
+  type PatientListPage,
+  type PatientListParams,
+} from './patient-list-page';
 
 interface Moh710Params {
   locationUuids: string;
@@ -9,18 +16,13 @@ interface Moh710Params {
 }
 
 export async function getMoh705a(params: Moh710Params): Promise<any> {
-  const etlBaseUrl = await getEtlBaseUrl();
-  const url = `${etlBaseUrl}/moh-705a`;
-  const queryparams = {
+  const url = await buildEtlUrl('moh-705a', {
     locationUuids: params.locationUuids || '',
     startDate: params.startDate || '',
     endDate: params.endDate || '',
-  };
-  const queryString = new URLSearchParams(
-    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
-  ).toString();
+  });
   try {
-    const response = await openmrsFetch(`${url}?${queryString}`);
+    const response = await openmrsFetch(url);
 
     if (!response.ok) {
       const errorText = await response.text();
@@ -34,21 +36,16 @@ export async function getMoh705a(params: Moh710Params): Promise<any> {
   }
 }
 
-export async function getMoh705aPatientList(params: Moh710Params): Promise<any> {
-  const etlBaseUrl = await getEtlBaseUrl();
-  const url = `${etlBaseUrl}/moh-705a-patient-list`;
-  const queryparams = {
+export async function getMoh705aPatientList(params: PatientListParams): Promise<PatientListPage> {
+  const url = await buildEtlUrl('moh-705a-patient-list', {
     locationUuids: params.locationUuids || '',
     startDate: params.startDate || '',
     endDate: params.endDate || '',
     indicator: Array.isArray(params.indicator) ? params.indicator.join(',') : params.indicator || '',
-    limit: '300',
-  };
-  const queryString = new URLSearchParams(
-    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
-  ).toString();
+    ...pageParams(params),
+  });
   try {
-    const response = await openmrsFetch(`${url}?${queryString}`);
+    const response = await openmrsFetch(url);
 
     if (!response.ok) {
       const errorText = await response.text();
@@ -56,25 +53,21 @@ export async function getMoh705aPatientList(params: Moh710Params): Promise<any>
     }
 
     const data = await response.json();
-    return data;
+
+    return toPatientListPage(data, params.startIndex ?? 0, params.limit ?? PAGE_SIZE);
   } catch (error: any) {
     throw new Error(`An error occurred while fetching the MOH-705 patient list: ${error.message}`);
   }
 }
 
 export async function getMoh705b(params: Moh710Params): Promise<any> {
-  const etlBaseUrl = await getEtlBaseUrl();
-  const url = `${etlBaseUrl}/moh-705b`;
-  const queryparams = {
+  const url = await buildEtlUrl('moh-705b', {
     locationUuids: params.locationUuids || '',
     startDate: params.startDate || '',
     endDate: params.endDate || '',
-  };
-  const queryString = new URLSearchParams(
-    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
-  ).toString();
+  });
   try {
-    const response = await openmrsFetch(`${url}?${queryString}`);
+    const response = await openmrsFetch(url);
 
     if (!response.ok) {
       const errorText = await response.text();
@@ -88,21 +81,16 @@ export async function getMoh705b(params: Moh710Params): Promise<any> {
   }
 }
 
-export async function getMoh705bPatientList(params: Moh710Params): Promise<any> {
-  const etlBaseUrl = await getEtlBaseUrl();
-  const url = `${etlBaseUrl}/moh-705b-patient-list`;
-  const queryparams = {
+export async function getMoh705bPatientList(params: PatientListParams): Promise<PatientListPage> {
+  const url = await buildEtlUrl('moh-705b-patient-list', {
     locationUuids: params.locationUuids || '',
     startDate: params.startDate || '',
     endDate: params.endDate || '',
     indicator: Array.isArray(params.indicator) ? params.indicator.join(',') : params.indicator || '',
-    limit: '300',
-  };
-  const queryString = new URLSearchParams(
-    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
-  ).toString();
+    ...pageParams(params),
+  });
   try {
-    const response = await openmrsFetch(`${url}?${queryString}`);
+    const response = await openmrsFetch(url);
 
     if (!response.ok) {
       const errorText = await response.text();
@@ -110,7 +98,8 @@ export async function getMoh705bPatientList(params: Moh710Params): Promise<any>
     }
 
     const data = await response.json();
-    return data;
+
+    return toPatientListPage(data, params.startIndex ?? 0, params.limit ?? PAGE_SIZE);
   } catch (error: any) {
     throw new Error(`An error occurred while fetching the MOH-705 patient list: ${error.message}`);
   }