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

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

@@ -1,45 +1,162 @@
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
-h3 {
-    text-align: center;
+/* MOH-710 laid out for A4, on the same scale as MOH-711, MOH-740 and MOH-745.
+   Its 106 rows across eleven tables run to about two pages, so this is a
+   flowing document: the blocks share their edges, and a lettered section is
+   kept whole across a page break. */
+
+$ink: #000;
+$bar: #d9d9d9;
+$rule: 1px solid $ink;
+
+$text: 7pt;
+$title: 7.5pt;
+$meta: 6.5pt;
+
+$pad: 3mm;
+
+/* Masthead */
+
+.mainTitleBox {
+  padding: $pad;
+  text-align: center;
+  border: $rule;
 }
 
-.container {
-    border: 1px solid #ccc;
-    margin: 0 2rem;
-    margin-top: 0.5px;
+.ministry {
+  font-size: $meta;
 }
 
-.tableContainer {
-    margin-left: 1rem;
-    margin-bottom: 1rem;
+.reportTitle {
+  font-size: $title;
+  font-weight: 700;
+  color: $ink;
+}
+
+/* Facility and period strip, joined to the masthead above */
+
+.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;
+}
+
+.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;
+}
+
+.line {
+  width: 26mm;
 }
 
-.sectionTitle {
-    margin-left: 1rem ;
+.shortLine {
+  width: 14mm;
+}
+
+/* A lettered section, kept off a page break so a table never splits from the
+   heading that names it. Sections share edges rather than sitting apart. */
+
+.container {
+  border: $rule;
+  border-top: none;
+  break-inside: avoid;
+  page-break-inside: avoid;
 }
 
 .title {
-    text-align: center;
-    font-size: 1rem;
-    margin: 1rem;
+  padding: 1.5mm $pad;
+  font-size: $text;
+  font-weight: 700;
+  color: $ink;
+  text-align: left;
+  background-color: $bar;
+  border-bottom: $rule;
+  break-after: avoid;
+  page-break-after: avoid;
 }
+
+.tableContainer {
+  overflow-x: auto;
+  padding: $pad;
+
+  & + .tableContainer {
+    padding-top: 0;
+  }
+}
+
 .table {
-  width: auto;
+  width: 100%;
   border-collapse: collapse;
-  
 }
 
 .tableBordered td,
 .tableBordered th {
-  border: 1px solid black;
-  padding: 0.3rem;
-  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;
 }
 
-.buttonContainer {
-    margin: 1rem;
-}
+@media screen {
+  .tableStriped tbody tr:hover {
+    background-color: $brand-primary-10;
+  }
+}
+
+/* Sign-off, enclosed by the form rather than floating beneath it. Three fields
+   across the sheet, so its rules can be 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;
+  }
+}
+
+/* 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-710/registers/moh-511-710-register.component.tsx

@@ -1,59 +1,64 @@
-import { Button, Loading, Table, TableBody, TableHead, TableHeader, TableRow } from '@carbon/react';
-import React, { useEffect, useState } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { Table, TableBody, TableHead, TableHeader, TableRow } from '@carbon/react';
+import React from 'react';
+import { useLocation, useSearchParams } from 'react-router-dom';
 
-import styles from '../moh-710.scss';
+import styles from '../../../common/report-register/register-table.scss';
 import { getMoh511PatientList } from '../../../resources/moh-711.resource';
 import { moh511Columns } from './type';
+import { moh511ExportColumns } from './moh-511-710.columns';
+import { RegisterLayout, usePatientList } from '../../../common/report-register';
 
 const Moh511710Register: React.FC = () => {
-  const navigate = useNavigate();
-  const [patientlist, setPatientList] = useState<any[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-
   const [searchParams] = useSearchParams();
+  const location = useLocation();
+
+  /* The endpoint scopes its list by report. Defaulted rather than read only
+     from route state, which is lost on a reload or a pasted link. */
+  const reportName = location.state?.reportName || 'moh710Report';
 
   const startDate = searchParams.get('startDate');
   const endDate = searchParams.get('endDate');
   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 getMoh511PatientList(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 }) =>
+      getMoh511PatientList({
+        startDate,
+        endDate,
+        locationUuids,
+        indicator,
+        reportName,
+        startIndex,
+        limit,
+      }),
+    [startDate, endDate, locationUuids, indicator, reportName],
+  );
 
-  function navigateBack() {
-    navigate('/moh-710');
-  }
   return (
-    <>
-      <div className={styles.buttonContainer}>
-        <Button onClick={navigateBack}>Back</Button>
-      </div>
-      <div>{isLoading && <Loading />}</div>
+    <RegisterLayout
+      parentLabel="MOH-710 Report"
+      parentPath="/moh-710"
+      title="MOH 511 Immunization Register"
+      isLoading={isLoading}
+      isEmpty={patientlist.length === 0}
+      page={page}
+      pageSize={pageSize}
+      total={total}
+      isTotalExact={isTotalExact}
+      onPageChange={onPageChange}
+      fetchAll={fetchAll}
+      columns={moh511ExportColumns}
+    >
       <Table>
         <TableHead>
           <TableRow>
@@ -256,7 +261,7 @@ const Moh511710Register: React.FC = () => {
           )}
         </TableBody>
       </Table>
-    </>
+    </RegisterLayout>
   );
 };
 

package/src/reports/moh-710/registers/moh-511-710.columns.ts

@@ -0,0 +1,52 @@
+import { type RegisterColumn } from '../../../common/report-register';
+
+/**
+ * MOH 511 as the register prints it: one column per cell, in the order they appear.
+ */
+export const moh511ExportColumns: RegisterColumn[] = [
+  { header: 'Serial No. - A', value: (row) => row.serial_no ?? '' },
+  { header: 'Date. (DD:MM:YYYY) - B', value: (row) => row.visit_date ?? '' },
+  { header: 'CWC No. (New Visit) - C', value: (row) => row.cwc_number_new ?? '' },
+  { header: 'CWC No. (Revisit) - D', value: (row) => row.cwc_number_revisit ?? '' },
+  { header: 'BIRTH NOTIFICATION (NUMBER) - E', value: (row) => row.birth_notification_number ?? '' },
+  { header: 'Full Names (Three names) - F', value: (row) => row.full_name ?? '' },
+  { header: 'Age - G', value: (row) => row.age ?? '' },
+  { header: 'Sex - H', value: (row) => row.sex ?? '' },
+  { header: 'County/Sub- county - I', value: (row) => row.county_sub_county ?? '' },
+  { header: 'Village /Estate / Landmark - J', value: (row) => row.village_estate_landmark ?? '' },
+  { header: 'Telephone number - K', value: (row) => row.phone_number ?? '' },
+  { header: 'Weight - L', value: (row) => row.height ?? '' },
+  { header: 'Height - M', value: (row) => row.weight_kg ?? '' },
+  { header: 'Weight in Kgs - N', value: (row) => row.weight_category ?? '' },
+  { header: 'Weight categories: (1=Normal 2=UW 3=SUW 4=OW 5=Obese) - O', value: (row) => row.height_category ?? '' },
+  { header: 'Height / Length in cm - P', value: (row) => row.muac ?? '' },
+  {
+    header: 'Height/Length categories: (1=Normal 2=Stunted 3=Sev. Stunted) - Q',
+    value: (row) => row.exclusive_breastfeeding_less_6_months ?? '',
+  },
+  { header: 'MUAC 1.Green 2.Yellow 3.Red - R', value: (row) => row.vitamin_A_supplementation ?? '' },
+  { header: 'Exclusive Breast feeding (less than 6 months)(Y/N) - S', value: (row) => row.dewormed ?? '' },
+  {
+    header: 'Vitamin A supplimentation: (6-59 months) (1=6- 11 months, 2=12-59 months, 3=Not supplimented) - T',
+    value: (row) => row.mnps_supplimentation ?? '',
+  },
+  { header: 'Dewormed (Y/N) - U', value: (row) => row.developmental_milestones ?? '' },
+  { header: 'MNPs supplimentation:(6-23 children) - V', value: (row) => row.danger_signs ?? '' },
+  {
+    header: 'Childs assessed for Developmental milestones including 1st Haed control ,2= sitting, 3=talking - W',
+    value: (row) => row.disability ?? '',
+  },
+  {
+    header:
+      'Any Danger Signs 1.Unable to breastfeed 2.Unable to drink 3.Vomits everything 4.Bloody diarrhoea 5.Has oedema 6.Has convulsions - X',
+    value: (row) => row.immunization_status_up_to_date ?? '',
+  },
+  { header: 'Any Disability - Y', value: (row) => row.llin_supplimentation_given ?? '' },
+  { header: 'Immunization status up to date(Y/N) - Z', value: (row) => row.follow_up ?? '' },
+  { header: 'LLIN gievn to under 1 years(Y/N) - AA', value: (row) => row.referred_from ?? '' },
+  { header: 'Follow up for: 1=Nutrition service 2=Rehabilitation service - AB', value: (row) => row.referred_to ?? '' },
+  {
+    header: '1=referred from CU; 2= referred from another H/F; 3=Not applicable - AC',
+    value: (row) => row.remarks ?? '',
+  },
+];

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

@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from 'react';
-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 styles from './moh711.scss';
 import classNames from 'classnames';
 import { useSession } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
 import { getMoh711 } from '../../resources/moh-711.resource';
-import { Loading } from '@carbon/react';
 import TBScreeningComponent from './sections/tb-screening.component';
 import ANCComponent from './sections/anc.component';
 import MaternityComponent from './sections/maternity.component';
@@ -20,14 +22,15 @@ import MedicalSocialWorkComponent from './sections/medical-social-work.component
 import PhysiotherapyComponent from './sections/physiotherapy.component';
 import OtherComponent from './sections/other.component';
 import ReportCompiledByComponent from './sections/report-compiled-by.component';
-import { type ReportFilters } from '../moh-705a/type';
+import { ReportSkeleton } from '../../common/report-skeleton';
+import { ReportPage } from '../../common/report-page';
 
 const Moh711Report: React.FC = () => {
-  let errorMessage: string = '';
   const [moh711Data, setMoh711Data] = useState<any>(() => {
     const saved = sessionStorage.getItem('moh711Data');
     return saved ? JSON.parse(saved) : [];
   });
+  const isReportGenerated = hasReportData(moh711Data);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [startDate, setStartDate] = useState<string>(() => {
     return sessionStorage.getItem('moh711StartDate') || '';
@@ -51,36 +54,19 @@ const Moh711Report: React.FC = () => {
   const session = useSession();
   const locationUuid = session?.sessionLocation?.uuid;
 
-  const getReportParams = (filters: ReportFilters) => {
-    let { startDate: sDate, endDate: eDate } = filters;
+  /* The masthead names the location the report was generated from; county and
+     sub-county come from the response where the ETL supplies them. Month and
+     year follow the period generated, not today. */
+  const facility = session?.sessionLocation?.display ?? moh711Data?.facility ?? '';
+  const county = moh711Data?.county ?? '';
+  const subCounty = moh711Data?.sub_county ?? '';
+  const reportMonth = startDate ? dayjs(startDate).format('MMMM') : '';
+  const reportYear = startDate ? dayjs(startDate).format('YYYY') : '';
 
-    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}`;
-      };
-
-      sDate = formatLocalDate(start);
-      eDate = formatLocalDate(end);
-    }
-
-    setStartDate(sDate || '');
-    setEndDate(eDate || '');
-
-    return { startDate: sDate, endDate: eDate };
-  };
-
-  const fetchMoh711ReportData = async (filters: { startDate?: string; endDate?: string; month?: string }) => {
+  const fetchMoh711ReportData = async ({ startDate, endDate }: ReportPeriod) => {
     setIsLoading(true);
-
-    const { startDate, endDate } = getReportParams(filters);
+    setStartDate(startDate);
+    setEndDate(endDate);
 
     const params = {
       locationUuids: locationUuid || '',
@@ -94,89 +80,91 @@ const Moh711Report: React.FC = () => {
       setIsLoading(false);
     } catch (error) {
       setIsLoading(false);
-      errorMessage = error instanceof Error ? error.message : String(error);
-      throw new Error(`Failed to fetch MOH-711 report data: ${error instanceof Error ? error.message : String(error)}`);
+      setIsLoading(false);
+      showReportError('the MOH-711 report', error);
     }
   };
   return (
     <>
       <ReportFiltersComponent
         reportName="MOH-711 Report"
-        mode="monthly"
+        mode="both"
         onGenerate={fetchMoh711ReportData}
-        isLoding={isLoading}
+        isLoading={isLoading}
+        isReportGenerated={isReportGenerated}
+        generatedPeriod={{ startDate, endDate }}
       />
-      {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>
-      )}
-      <div className={styles.headerContainer}>
-        <div className={styles.mainTitleBox}>
-          <h5>
-            INTEGRATED PROGRAM SUMMARY REPORT FORM: REPRODUCTIVE AND CHILD HEALTH, MEDICAL AND REHABILITATION SERVICES
-          </h5>
-          <div className={styles.locationContainer}>
-            <span>
-              Facility Name: <span className={styles.line}></span>
-            </span>
-            <span>
-              County: <span className={styles.line}></span>
-            </span>
-            <span>
-              Sub County: <span className={styles.line}></span>
-            </span>
-            <span>
-              Month: <span className={styles.shortLine}></span>
-            </span>
-            <span>
-              Year: <span className={styles.shortLine}></span>
-            </span>
+      {isLoading && <ReportSkeleton />}
+      {!isLoading && !isReportGenerated && <ReportPlaceholder reportName="MOH-711" />}
+      {!isLoading && isReportGenerated && (
+        <ReportPage>
+          <div className={styles.headerContainer}>
+            <div className={styles.mainTitleBox}>
+              <h5>
+                INTEGRATED PROGRAM SUMMARY REPORT FORM: REPRODUCTIVE AND CHILD HEALTH, MEDICAL AND REHABILITATION
+                SERVICES
+              </h5>
+              <div className={styles.locationContainer}>
+                <span>
+                  Facility Name: <span className={styles.line}>{facility}</span>
+                </span>
+                <span>
+                  County: <span className={styles.line}>{county}</span>
+                </span>
+                <span>
+                  Sub County: <span className={styles.line}>{subCounty}</span>
+                </span>
+                <span>
+                  Month: <span className={styles.shortLine}>{reportMonth}</span>
+                </span>
+                <span>
+                  Year: <span className={styles.shortLine}>{reportYear}</span>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className={styles.container}>
+            <div className={styles.left}>
+              <ANCComponent
+                moh711Data={moh711Data}
+                startDate={startDate}
+                endDate={endDate}
+                locationUuids={locationUuid!}
+              />
+              <GBVComponent moh711Data={moh711Data} />
+              <FamilyPlanningComponent moh711Data={moh711Data} />
+              <CervicalCancerComponent
+                moh711Data={moh711Data}
+                startDate={startDate}
+                endDate={endDate}
+                locationUuids={locationUuid!}
+              />
+              <PNCComponent
+                moh711Data={moh711Data}
+                startDate={startDate}
+                endDate={endDate}
+                locationUuids={locationUuid!}
+              />
+              <RehabilitationComponent moh711Data={moh711Data} />
+              <MedicalSocialWorkComponent moh711Data={moh711Data} />
+              <ReportCompiledByComponent />
+            </div>
+            <div className={styles.right}>
+              <MaternityComponent
+                moh711Data={moh711Data}
+                startDate={startDate}
+                endDate={endDate}
+                locationUuids={locationUuid!}
+              />
+              <PostAbortion moh711Data={moh711Data} />
+              <ChanisComponent moh711Data={moh711Data} />
+              <PhysiotherapyComponent moh711Data={moh711Data} />
+              <OtherComponent moh711Data={MaternityComponent} />
+              <TBScreeningComponent moh711Data={moh711Data} />
+            </div>
           </div>
-        </div>
-      </div>
-      <div className={styles.container}>
-        <div className={styles.left}>
-          <ANCComponent moh711Data={moh711Data} startDate={startDate} endDate={endDate} locationUuids={locationUuid!} />
-          <GBVComponent moh711Data={moh711Data} />
-          <FamilyPlanningComponent moh711Data={moh711Data} />
-          <CervicalCancerComponent
-            moh711Data={moh711Data}
-            startDate={startDate}
-            endDate={endDate}
-            locationUuids={locationUuid!}
-          />
-          <PNCComponent moh711Data={moh711Data} startDate={startDate} endDate={endDate} locationUuids={locationUuid!} />
-          <RehabilitationComponent moh711Data={moh711Data} />
-          <MedicalSocialWorkComponent moh711Data={moh711Data} />
-          <ReportCompiledByComponent />
-        </div>
-        <div className={styles.right}>
-          <MaternityComponent
-            moh711Data={moh711Data}
-            startDate={startDate}
-            endDate={endDate}
-            locationUuids={locationUuid!}
-          />
-          <PostAbortion moh711Data={moh711Data} />
-          <ChanisComponent moh711Data={moh711Data} />
-          <PhysiotherapyComponent moh711Data={moh711Data} />
-          <OtherComponent moh711Data={MaternityComponent} />
-          <TBScreeningComponent moh711Data={moh711Data} />
-        </div>
-      </div>
+        </ReportPage>
+      )}
     </>
   );
 };