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

package/src/reports/moh-705a/moh-705a.scss

@@ -1,45 +1,130 @@
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
-h3 {
-    text-align: center;
+/* MOH-705A laid out for A4, on the same scale as the other reports. Its 76 rows
+   are a single diagnoses table, so the sheet is one continuous form: masthead,
+   facility strip, table and sign-off share their edges. */
+
+$ink: #000;
+$rule: 1px solid $ink;
+
+$text: 7pt;
+$title: 7.5pt;
+$meta: 6.5pt;
+
+$pad: 3mm;
+
+.mainTitleBox {
+  padding: $pad;
+  text-align: center;
+  border: $rule;
 }
 
-.container {
-    margin: 0 2rem;
-    margin-top: 0.5px;
+.ministry {
+  font-size: $meta;
+}
+
+.reportTitle {
+  font-size: $title;
+  font-weight: 700;
+  color: $ink;
 }
 
-.tableContainer {
-    margin-left: 1rem;
-    margin-bottom: 1rem;
-    font-weight: bold;
+.location {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 2.5mm;
+  padding: 2mm $pad;
+  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;
 }
 
-.title {
-    text-align: center;
-    font-size: 1rem;
-    margin: 1rem;
+.line {
+  width: 26mm;
 }
+
+.shortLine {
+  width: 14mm;
+}
+
+.container {
+  overflow-x: auto;
+  margin: 0;
+}
+
 .table {
-  width: auto;
+  width: 100%;
   border-collapse: collapse;
-  
 }
 
 .tableBordered td,
 .tableBordered th {
-  border: 1px solid black;
-  padding: 1rem;
-  font-size: small;
+  padding: 1mm 1.5mm;
+  font-size: $text;
+  text-align: left;
+  border: $rule;
+}
+
+.tableBordered th {
+  font-weight: 700;
+  color: $ink;
+  background-color: #f0f0f0;
 }
 
 .tableStriped tbody tr:nth-of-type(odd) {
-  background-color: #f9f9f9;
+  background-color: #fafafa;
+}
+
+@media screen {
+  .tableStriped tbody tr:hover {
+    background-color: $brand-primary-10;
+  }
+}
+
+/* Sign-off, enclosed by the form. Three fields across the sheet, so its rules
+   are wider than the header strip's five. */
+
+.signOff {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 2.5mm;
+  padding: $pad;
+  font-size: $meta;
+  white-space: nowrap;
+  border: $rule;
+  border-top: none;
+
+  .line {
+    width: 45mm;
+  }
+
+  .shortLine {
+    width: 25mm;
+  }
 }
 
-.buttonContainer {
-    margin: 1rem;
-}
+/* On paper the striping is screen affordance that prints as grey noise */
+
+@media print {
+  .tableStriped tbody tr:nth-of-type(odd) {
+    background-color: transparent;
+  }
+}

package/src/reports/moh-705a/registers/moh-204a-register.component.tsx

@@ -1,60 +1,59 @@
-import React, { useEffect, useState } from 'react';
-import { Button, Loading, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import React from 'react';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
 
-import styles from '../moh-705a.scss';
+import styles from '../../../common/report-register/register-table.scss';
 import classNames from 'classnames';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { getMoh705aPatientList } from '../../../resources/moh-705.resource';
+import { moh204aExportColumns } from './moh-204a.columns';
+import { RegisterLayout, usePatientList } from '../../../common/report-register';
 
 interface Moh204ARegisterComponentProps {}
 
 const Moh204ARegisterComponent: React.FC<Moh204ARegisterComponentProps> = () => {
-  const [patientlist, setPatientList] = useState<any[]>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
   const [searchParams] = useSearchParams();
-  const navigate = useNavigate();
-  const location = useLocation();
   const startDate = searchParams.get('startDate');
   const endDate = searchParams.get('endDate');
   const locationUuids = searchParams.get('locationUuids');
   const indicator = searchParams.get('indicator');
 
-  function navigateBack() {
-    navigate(location.state?.from || '/moh-705b');
-  }
-
-  useEffect(() => {
-    const fetchData = async () => {
-      if (!startDate || !endDate || !locationUuids || !indicator) return;
-
-      setIsLoading(true);
-
-      try {
-        const params = {
-          startDate,
-          endDate,
-          locationUuids,
-          indicator,
-        };
-
-        const data = await getMoh705aPatientList(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 }) =>
+      getMoh705aPatientList({
+        startDate: startDate!,
+        endDate: endDate!,
+        locationUuids: locationUuids!,
+        indicator: indicator!,
+        startIndex,
+        limit,
+      }),
+    [startDate, endDate, locationUuids, indicator],
+  );
 
   return (
-    <>
-      <div className={styles.buttonContainer}>
-        <Button onClick={navigateBack}>Back</Button>
-      </div>
-      <div>{isLoading && <Loading />}</div>
+    <RegisterLayout
+      parentLabel="MOH-705A Report"
+      parentPath="/moh-705a"
+      title="MOH 204A Under-5 Outpatient Register"
+      isLoading={isLoading}
+      isEmpty={patientlist.length === 0}
+      page={page}
+      pageSize={pageSize}
+      total={total}
+      isTotalExact={isTotalExact}
+      onPageChange={onPageChange}
+      fetchAll={fetchAll}
+      columns={moh204aExportColumns}
+    >
       <div className={styles.tableContainer}>
         <Table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
           <TableHead>
@@ -314,7 +313,7 @@ const Moh204ARegisterComponent: React.FC<Moh204ARegisterComponentProps> = () =>
           </TableBody>
         </Table>
       </div>
-    </>
+    </RegisterLayout>
   );
 };
 

package/src/reports/moh-705a/registers/moh-204a.columns.ts

@@ -0,0 +1,57 @@
+import { type RegisterColumn } from '../../../common/report-register';
+
+/**
+ * MOH 204A as the register prints it: one column per cell, in the order they appear.
+ */
+export const moh204aExportColumns: RegisterColumn[] = [
+  { header: 'Date (DD/MM/YYYY) - A', value: (row) => row.date ?? '' },
+  { header: 'OPD No. (New) - B', value: (row) => row.opd_number_new_visit ?? '' },
+  { header: 'OPD No. (Revisit) - C', value: (row) => row.opd_number_return_visit ?? '' },
+  { header: 'Referred From 1=CU, 2=From Other facility, 3= Within 4=N/A - D', value: (row) => row.referred_from ?? '' },
+  { header: 'Full Names (THREE names) - E', value: (row) => row.full_names ?? '' },
+  { header: 'Age - F', value: (row) => row.age ?? '' },
+  { header: 'Sex - G', value: (row) => row.sex ?? '' },
+  { header: 'Countu/Sub-county - H', value: (row) => row.county_sub_county ?? '' },
+  { header: 'Village /Estate / Landmark - I', value: (row) => row.village_estate_landmark ?? '' },
+  { header: "Parent/Caregivers's Telephone No. - J", value: (row) => row.caregiver_phone_number ?? '' },
+  { header: 'Weight(kg) - K', value: (row) => row.weight ?? '' },
+  { header: 'Height /Length (cm) - L', value: (row) => row.height ?? '' },
+  { header: 'MUAC 1.Green 2.Yellow 3.Red - M', value: (row) => row.muac ?? '' },
+  { header: 'Temp (oC) - N', value: (row) => row.temp ?? '' },
+  { header: 'Respiratory Rate - O', value: (row) => row.respiratory_rate ?? '' },
+  { header: 'Oxygen Saturation Reading (SPO2) - P', value: (row) => row.oxygen_saturation ?? '' },
+  { header: 'Pulse Rate - Q', value: (row) => row.pulse_rate ?? '' },
+  {
+    header:
+      'DANGER SIGNS 1.Unable to drink or breastfeed 2.Vomits everything 3.Had convulsions in this illness 4.Is lethargic or unconscious 5.Is convulsing now - R',
+    value: (row) => row.danger_signs ?? '',
+  },
+  { header: 'Duration of Current Illness (in hours/ days) - S', value: (row) => row.duration_of_illness ?? '' },
+  {
+    header:
+      'Malaria 1.Presenting with symptoms NOT Tested 2.RDT Tested (-ve) 3.Microscopy Tested (-ve) 4.RDT Tested (+ve) 5. Microscopy Tested (+ve) - T',
+    value: (row) => row.suspected_malaria_cases ?? '',
+  },
+  { header: 'IMNCI Classification or Diagnosis - U', value: (row) => row.diagnosis ?? '' },
+  {
+    header:
+      'TRACER DRUGS PRESCRIBED 1. ORS & Zinc (Co-pack) 2.Zinc Only 3. ORS Only 4. Amoxicillin DT 5. Vitamin A 6.Oxygen 7. Albendazole 8.IV Fluids - V',
+    value: (row) => row.tracer_drugs_prescribed ?? '',
+  },
+  {
+    header: 'Other ALL Treatments Prescribed 1. CPAP 2. Other - W',
+    value: (row) => row.all_other_treatments_prescribed ?? '',
+  },
+  { header: 'Immunization Status Up to Date (Y/N) - X', value: (row) => row.immunization_status_up_to_date ?? '' },
+  { header: 'TB Screening 1. presumed TB 2. Referred - Y', value: (row) => row.tb_screening ?? '' },
+  {
+    header:
+      'Nutrition and diatetics Interventions 1=Nutrition counselling 2=Nutrition therapeutic supplements 3 =. Diatetics - Z',
+    value: (row) => row.nutrition_dietetics ?? '',
+  },
+  {
+    header: 'Referred to (1=CU, 2= to other H/F, 3=within the facility/ 4=N/A) - AA',
+    value: (row) => row.referred_to ?? '',
+  },
+  { header: 'REMARKS/ Outcome - AB', value: (row) => row.remarks ?? '' },
+];

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

@@ -1,61 +1,63 @@
-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-706.scss';
 
-const MOH706Header: 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("", "Facility 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 MOH706HeaderProps {
+  facility?: string;
+  startDate?: string;
+  endDate?: string;
+}
+
+const asDate = (value?: string) => (value ? dayjs(value).format('DD/MM/YYYY') : '');
 
-    return <div className={styles.headerSection}>
-        <h3>MOH 706 _Laboratory (LAB) Services Summary</h3>
-        <TableWrapper>
-            <TableRowMapper tableRows={tableRows} />
-        </TableWrapper>
+const MOH706Header: React.FC<MOH706HeaderProps> = ({ 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('', '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)),
+        ],
+      },
+    ];
+  }, [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 706 &ndash; Laboratory (LAB) Services Summary</h3>
+      </div>
+      <TableWrapper>
+        <TableRowMapper tableRows={tableRows} />
+      </TableWrapper>
     </div>
-}
+  );
+};
 
-export default MOH706Header;
+export default MOH706Header;

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { useSession } from '@openmrs/esm-framework';
-import { Column, Grid, Loading } from '@carbon/react';
+import { formatDate, useSession } from '@openmrs/esm-framework';
+import { Column, Grid } from '@carbon/react';
 import UrineAnalysis from './sub-reports/urine-analysis/urine-analysis.component';
 import BloodChemistry from './sub-reports/blood-chemistry/blood-chemistry.component';
 import Parasitology from './sub-reports/parasitology/parasitology.component';
@@ -10,21 +10,30 @@ import HistologyAndCytology from './sub-reports/histology-and-cytology/histology
 import Serology from './sub-reports/serology/serology.component';
 import SpecimenReferralToHigherLevels from './sub-reports/specimen-referral-to-higher-levels/specimen-referral-to-higher-levels.component';
 import DrugSusceptibilityTesting from './sub-reports/drug-susceptibility-testing/drug-susceptibility-testing.component';
-import ReportFiltersComponent from '../../common/report-filters/report-filters.component';
+import { ReportFiltersComponent, type ReportPeriod } from '../../common/report-filters';
+import { showReportError } from '../../common/report-error';
+import { hasReportData, ReportPlaceholder } from '../../common/report-placeholder';
 import { getMoh706 } from '../../resources/moh-706.resource';
 import styles from './moh-706.scss';
 import MOH706Header from './moh-706-header.component';
 import { useSearchParams } from 'react-router-dom';
+import { ReportSkeleton } from '../../common/report-skeleton';
+import { ReportPage } from '../../common/report-page';
 
 const MoH706Report: React.FC = () => {
   const [moh706Data, setMoh706Data] = useState<any>({});
+  const isReportGenerated = hasReportData(moh706Data);
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [errorMessage, setErrorMessage] = useState<string>('');
   const [filters, setFilters] = useState<{ locationUuids?: string; startDate?: string; endDate?: string }>({});
 
   const session = useSession();
   const locationUuids = session?.sessionLocation?.uuid;
 
+  /* Masthead and sign-off fill themselves in, as on the other reports */
+  const facility = session?.sessionLocation?.display ?? '';
+  const compiledBy = session?.user?.person?.display ?? session?.user?.display ?? '';
+  const compiledOn = formatDate(new Date(), { mode: 'standard', time: false, noToday: true });
+
   const [searchParams] = useSearchParams();
 
   useEffect(() => {
@@ -37,29 +46,9 @@ const MoH706Report: React.FC = () => {
     }
   }, [searchParams]);
 
-  const fetchMoh706Data = async (filters: { startDate?: string; endDate?: string; month?: string }) => {
-    setErrorMessage('');
+  const fetchMoh706Data = async ({ startDate, endDate }: Pick<ReportPeriod, 'startDate' | 'endDate'>) => {
     setIsLoading(true);
 
-    let startDate = filters.startDate;
-    let endDate = filters.endDate;
-
-    if (filters.month) {
-      const [year, monthIndex] = filters.month.split('-').map(Number);
-      const start = new Date(year, monthIndex - 1, 1);
-      const end = new Date(year, monthIndex, 0);
-
-      const formatLocalDate = (d: Date) => {
-        const y = d.getFullYear();
-        const m = String(d.getMonth() + 1).padStart(2, '0');
-        const day = String(d.getDate()).padStart(2, '0');
-        return `${y}-${m}-${day}`;
-      };
-
-      startDate = formatLocalDate(start);
-      endDate = formatLocalDate(end);
-    }
-
     const params = {
       locationUuids: locationUuids || '',
       startDate,
@@ -72,7 +61,7 @@ const MoH706Report: React.FC = () => {
       setMoh706Data(flatData);
       setFilters({ locationUuids: params.locationUuids, startDate, endDate });
     } catch (error: any) {
-      setErrorMessage(error instanceof Error ? error.message : String(error));
+      showReportError('the MOH-706 report', error);
     } finally {
       setIsLoading(false);
     }
@@ -80,36 +69,76 @@ const MoH706Report: React.FC = () => {
 
   return (
     <>
-      <ReportFiltersComponent reportName="MOH-706 Report" mode="monthly" onGenerate={fetchMoh706Data} isLoding={isLoading} />
-      {isLoading && <Loading description="Fetching data...." />}
-      {!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 report. Please try again.
-          </h4>
-          <p>
-            <small>{errorMessage}</small>
-          </p>
-        </div>
+      <ReportFiltersComponent
+        reportName="MOH-706 Report"
+        mode="both"
+        onGenerate={fetchMoh706Data}
+        isLoading={isLoading}
+        isReportGenerated={isReportGenerated}
+      />
+      {isLoading && <ReportSkeleton />}
+      {!isLoading && !isReportGenerated && <ReportPlaceholder reportName="MOH-706" />}
+      {!isLoading && isReportGenerated && (
+        <ReportPage>
+          <div className={styles.sheet}>
+            <MOH706Header facility={facility} startDate={filters.startDate} endDate={filters.endDate} />
+            <div className={styles.reportSections}>
+              <UrineAnalysis
+                data={moh706Data}
+                locationUuids={filters.locationUuids}
+                startDate={filters.startDate}
+                endDate={filters.endDate}
+              />
+              <BloodChemistry
+                data={moh706Data}
+                locationUuids={filters.locationUuids}
+                startDate={filters.startDate}
+                endDate={filters.endDate}
+              />
+              <Parasitology
+                data={moh706Data}
+                locationUuids={filters.locationUuids}
+                startDate={filters.startDate}
+                endDate={filters.endDate}
+              />
+              <Haematology
+                data={moh706Data}
+                locationUuids={filters.locationUuids}
+                startDate={filters.startDate}
+                endDate={filters.endDate}
+              />
+              <Bacteriology
+                data={moh706Data}
+                locationUuids={filters.locationUuids}
+                startDate={filters.startDate}
+                endDate={filters.endDate}
+              />
+              <HistologyAndCytology />
+              <Serology
+                data={moh706Data}
+                locationUuids={filters.locationUuids}
+                startDate={filters.startDate}
+                endDate={filters.endDate}
+              />
+              <SpecimenReferralToHigherLevels />
+              <DrugSusceptibilityTesting />
+            </div>
+
+            <div className={styles.signOff}>
+              <span>
+                Compiled by:<span className={styles.line}>{compiledBy}</span>
+              </span>
+              <span>
+                Signature:
+                <span className={styles.line} />
+              </span>
+              <span>
+                Date:<span className={styles.shortLine}>{compiledOn}</span>
+              </span>
+            </div>
+          </div>
+        </ReportPage>
       )}
-      <MOH706Header />
-      <div className={styles.reportSections}>
-        <UrineAnalysis data={moh706Data} locationUuids={filters.locationUuids} startDate={filters.startDate} endDate={filters.endDate} />
-        <BloodChemistry data={moh706Data} locationUuids={filters.locationUuids} startDate={filters.startDate} endDate={filters.endDate} />
-        <Parasitology data={moh706Data} locationUuids={filters.locationUuids} startDate={filters.startDate} endDate={filters.endDate} />
-        <Haematology data={moh706Data} locationUuids={filters.locationUuids} startDate={filters.startDate} endDate={filters.endDate} />
-        <Bacteriology data={moh706Data} locationUuids={filters.locationUuids} startDate={filters.startDate} endDate={filters.endDate} />
-        <HistologyAndCytology />
-        <Serology data={moh706Data} locationUuids={filters.locationUuids} startDate={filters.startDate} endDate={filters.endDate} />
-        <SpecimenReferralToHigherLevels />
-        <DrugSusceptibilityTesting />
-      </div>
     </>
   );
 };