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

package/src/reports/moh-711/moh711.scss

@@ -1,125 +1,156 @@
 
-h5 {
-    text-align: center;
+/* Smaller than the section headings beneath it: at 9pt the form title was
+   heavier than the lettered sections it introduces. */
+
+.mainTitleBox h5 {
+  font-size: 7.5pt;
+  font-weight: 700;
+  line-height: 1.25;
+  text-align: center;
 }
 
 .container {
-  margin: 2rem 2rem;
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-  padding: 0 2rem;
+  gap: 4mm;
+  align-items: start;
+  margin: 0 0 4mm;
 
-  grid-template-areas:
-    "left right";
+  grid-template-areas: 'left right';
 }
 
-
 .left {
   grid-area: left;
+  min-width: 0;
 }
 
 .right {
   grid-area: right;
+  min-width: 0;
 }
 
-/* 📱 Stack on small screens */
+/* Stack on small screens */
 @media (max-width: 768px) {
   .container {
     grid-template-columns: 1fr;
     grid-template-areas:
-      "left"
-      "right";
+      'left'
+      'right';
   }
 }
 
-.sectionTitle {
-    margin-left: 1rem ;
-}
+/* A lettered section. Maternity carries three tables and Family Planning two,
+   so the gap inside a section is smaller than the gap between them -- given the
+   same margin, a multi-table section reads as several separate ones.
+
+   Kept off a page break so a section is never split from its heading; at about
+   116 rows in the taller column this runs to roughly two A4 pages. */
 
-.title {
-    text-align: center;
-    font-size: 1rem;
-    margin: 1rem;
+.section {
+  margin-bottom: 4mm;
+  break-inside: avoid;
+  page-break-inside: avoid;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
+
+/* Full width, so both columns fill their half of the grid and line up with the
+   header box above -- sized to content they came out ragged and short of it. */
+
 .table {
-  width: auto;
+  width: 100%;
+  margin-bottom: 2mm;
+  table-layout: auto;
   border-collapse: collapse;
-  
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .tableBordered td,
 .tableBordered th {
-  border: 1px solid black;
-  padding: 0.3rem;
-  font-size: small;
+  padding: 1mm 1.5mm;
+  font-size: 7pt;
+  border: 1px solid #000;
 }
 
 .tableBordered th {
-    font-weight: bold;
-} 
+  font-weight: 600;
+  background-color: #f4f4f4;
+}
 
 .tableStriped tbody tr:nth-of-type(odd) {
   background-color: #f9f9f9;
 }
 
+/* Sub-heading rows inside a section table */
+
 .greyBackground {
-    background-color: #ccc;
-}
-.compiledBy {
-    width: 10rem
+  font-weight: 600;
+  background-color: #e0e0e0;
 }
 
-.buttonContainer {
-    margin: 1rem;
+.compiledBy {
+  width: 10rem;
 }
 
-.textCenter {
-  text-align: center;
-}
-.tableContainer {
-  margin: 1rem;
-}
+/* Spans the same width as the two columns beneath it */
 
 .headerContainer {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 10px;
-    margin: 2rem;
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  margin: 0 0 4mm;
 }
 
 .mainTitleBox {
-    border: 2px solid #000;
-    padding: 10px;
-    text-align: center;
-    width: 100%;
-}
-
-.mainTitle {
-    margin: 0;
-}
-
-.subTitle {
-    margin: 5px 0;
+  width: 100%;
+  padding: 3mm;
+  text-align: center;
+  border: 1px solid #000;
 }
 
 .locationContainer {
   display: flex;
-  margin: 1rem;
-  justify-content: space-evenly;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 3mm;
+  margin-top: 3mm;
+  font-size: 6.5pt;
+  white-space: nowrap;
 }
 
-.line {
+/* These carry the facility and period once a report is generated, so they need
+   to hold text on the rule rather than only draw it. */
+
+.line,
+.shortLine {
   display: inline-block;
-  width: 150px;
+  padding: 0 0.5mm;
+  margin-left: 1mm;
+  overflow: hidden;
+  font-weight: 600;
+  text-align: center;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
   border-bottom: 1px solid #000;
-  margin-left: 4px;
+}
+
+.line {
+  width: 26mm;
 }
 
 .shortLine {
-  display: inline-block;
-  width: 90px;
-  border-bottom: 1px solid #000;
-  margin-left: 4px;
-}
+  width: 14mm;
+}
+/* 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-711/registers/moh-333-register.component.tsx

@@ -1,17 +1,14 @@
-import { Button, Loading } from '@carbon/react';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 
-import styles from '../moh711.scss';
+import styles from '../../../common/report-register/register-table.scss';
 import classNames from 'classnames';
 import { getMoh333PatientList } from '../../../resources/moh-711.resource';
 import { moh333Columns } from './type';
+import { moh333ExportColumns } from './moh-333.columns';
+import { RegisterLayout, usePatientList } from '../../../common/report-register';
 
 const Moh333Register: React.FC = () => {
-  const navigate = useNavigate();
-  const [patientlist, setPatientList] = useState<any[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-
   const [searchParams] = useSearchParams();
   const location = useLocation();
 
@@ -21,44 +18,45 @@ const Moh333Register: React.FC = () => {
   const indicator = searchParams.get('indicator');
   const reportName = location.state?.reportName || '';
 
-  useEffect(() => {
-    const fetchData = async () => {
-      if (!startDate || !endDate || !locationUuids || !indicator || !reportName) return;
-
-      setIsLoading(true);
-
-      try {
-        const params = {
-          startDate,
-          endDate,
-          locationUuids,
-          indicator,
-          reportName,
-        };
-
-        const data = await getMoh333PatientList(params);
-
-        setPatientList(data?.results.results || []);
-      } catch (error) {
-        console.error('Failed to fetch register data', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchData();
-  }, [startDate, endDate, locationUuids, indicator, reportName]);
+  const {
+    rows: patientlist,
+    total,
+    isTotalExact,
+    isLoading,
+    page,
+    pageSize,
+    onPageChange,
+    fetchAll,
+  } = usePatientList(
+    ({ startIndex, limit }) =>
+      getMoh333PatientList({
+        startDate,
+        endDate,
+        locationUuids,
+        indicator,
+        reportName,
+        startIndex,
+        limit,
+      }),
+    [startDate, endDate, locationUuids, indicator, reportName],
+  );
 
-  function navigateBack() {
-    navigate(location.state?.from || '//moh-711');
-  }
   return (
-    <>
+    <RegisterLayout
+      parentLabel="MOH-711 Report"
+      parentPath="/moh-711"
+      title="MOH 333 Register"
+      isLoading={isLoading}
+      isEmpty={patientlist.length === 0}
+      page={page}
+      pageSize={pageSize}
+      total={total}
+      isTotalExact={isTotalExact}
+      onPageChange={onPageChange}
+      fetchAll={fetchAll}
+      columns={moh333ExportColumns}
+    >
       {' '}
-      <div className={styles.buttonContainer}>
-        <Button onClick={navigateBack}>Back</Button>
-      </div>
-      <div>{isLoading && <Loading />}</div>
       <div className={styles.tableContainer}>
         <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
           <thead>
@@ -453,59 +451,59 @@ const Moh333Register: React.FC = () => {
           </thead>
           <tbody>
             <tr>
-              <td className={styles.textCenter}>(a)</td>
-              <td className={styles.textCenter}>(b)</td>
-              <td className={styles.textCenter}>(c)</td>
-              <td className={styles.textCenter}>(d)</td>
-              <td className={styles.textCenter}>(e)</td>
-              <td className={styles.textCenter}>(f)</td>
-              <td className={styles.textCenter}>(g)</td>
-              <td className={styles.textCenter}>(h)</td>
-              <td className={styles.textCenter}>(i)</td>
-              <td className={styles.textCenter}>(j)</td>
-              <td className={styles.textCenter}>(k)</td>
-              <td className={styles.textCenter}>(l)</td>
-              <td className={styles.textCenter}>(m)</td>
-              <td className={styles.textCenter}>(n)</td>
-              <td className={styles.textCenter}>(o)</td>
-              <td className={styles.textCenter}>(p)</td>
-              <td className={styles.textCenter}>(q)</td>
-              <td className={styles.textCenter}>(r)</td>
-              <td className={styles.textCenter}>(s)</td>
-              <td className={styles.textCenter}>(t)</td>
-              <td className={styles.textCenter}>(u)</td>
-              <td className={styles.textCenter}>(v)</td>
-              <td className={styles.textCenter}>(w)</td>
-              <td className={styles.textCenter}>(x)</td>
-              <td className={styles.textCenter}>(y)</td>
-              <td className={styles.textCenter}>(z)</td>
-              <td className={styles.textCenter}>(aa)</td>
-              <td className={styles.textCenter}>(ab)</td>
-              <td className={styles.textCenter}>(ac)</td>
-              <td className={styles.textCenter}>(ad)</td>
-              <td className={styles.textCenter}>(ae)</td>
-              <td className={styles.textCenter}>(af)</td>
-              <td className={styles.textCenter}>(ag)</td>
-              <td className={styles.textCenter}>(ah)</td>
-              <td className={styles.textCenter}>(ai)</td>
-              <td className={styles.textCenter}>(aj)</td>
-              <td colSpan={3} className={styles.textCenter}>
+              <td className={styles.textCentre}>(a)</td>
+              <td className={styles.textCentre}>(b)</td>
+              <td className={styles.textCentre}>(c)</td>
+              <td className={styles.textCentre}>(d)</td>
+              <td className={styles.textCentre}>(e)</td>
+              <td className={styles.textCentre}>(f)</td>
+              <td className={styles.textCentre}>(g)</td>
+              <td className={styles.textCentre}>(h)</td>
+              <td className={styles.textCentre}>(i)</td>
+              <td className={styles.textCentre}>(j)</td>
+              <td className={styles.textCentre}>(k)</td>
+              <td className={styles.textCentre}>(l)</td>
+              <td className={styles.textCentre}>(m)</td>
+              <td className={styles.textCentre}>(n)</td>
+              <td className={styles.textCentre}>(o)</td>
+              <td className={styles.textCentre}>(p)</td>
+              <td className={styles.textCentre}>(q)</td>
+              <td className={styles.textCentre}>(r)</td>
+              <td className={styles.textCentre}>(s)</td>
+              <td className={styles.textCentre}>(t)</td>
+              <td className={styles.textCentre}>(u)</td>
+              <td className={styles.textCentre}>(v)</td>
+              <td className={styles.textCentre}>(w)</td>
+              <td className={styles.textCentre}>(x)</td>
+              <td className={styles.textCentre}>(y)</td>
+              <td className={styles.textCentre}>(z)</td>
+              <td className={styles.textCentre}>(aa)</td>
+              <td className={styles.textCentre}>(ab)</td>
+              <td className={styles.textCentre}>(ac)</td>
+              <td className={styles.textCentre}>(ad)</td>
+              <td className={styles.textCentre}>(ae)</td>
+              <td className={styles.textCentre}>(af)</td>
+              <td className={styles.textCentre}>(ag)</td>
+              <td className={styles.textCentre}>(ah)</td>
+              <td className={styles.textCentre}>(ai)</td>
+              <td className={styles.textCentre}>(aj)</td>
+              <td colSpan={3} className={styles.textCentre}>
                 (ak)
               </td>
-              <td className={styles.textCenter}>(al)</td>
-              <td className={styles.textCenter}>(am)</td>
-              <td className={styles.textCenter}>(an)</td>
-              <td className={styles.textCenter}>(ao)</td>
-              <td className={styles.textCenter}>(ap)</td>
-              <td className={styles.textCenter}>(aq)</td>
-              <td className={styles.textCenter}>(ar)</td>
-              <td className={styles.textCenter}>(as)</td>
-              <td className={styles.textCenter}>(at)</td>
-              <td className={styles.textCenter}>(au)</td>
-              <td className={styles.textCenter}>(av)</td>
-              <td className={styles.textCenter}>(aw)</td>
-              <td className={styles.textCenter}>(ax)</td>
-              <td className={styles.textCenter}>(ay)</td>
+              <td className={styles.textCentre}>(al)</td>
+              <td className={styles.textCentre}>(am)</td>
+              <td className={styles.textCentre}>(an)</td>
+              <td className={styles.textCentre}>(ao)</td>
+              <td className={styles.textCentre}>(ap)</td>
+              <td className={styles.textCentre}>(aq)</td>
+              <td className={styles.textCentre}>(ar)</td>
+              <td className={styles.textCentre}>(as)</td>
+              <td className={styles.textCentre}>(at)</td>
+              <td className={styles.textCentre}>(au)</td>
+              <td className={styles.textCentre}>(av)</td>
+              <td className={styles.textCentre}>(aw)</td>
+              <td className={styles.textCentre}>(ax)</td>
+              <td className={styles.textCentre}>(ay)</td>
             </tr>
             {patientlist?.length > 0 ? (
               patientlist.map((row, i) => (
@@ -632,7 +630,7 @@ const Moh333Register: React.FC = () => {
           </tbody>
         </table>
       </div>
-    </>
+    </RegisterLayout>
   );
 };
 

package/src/reports/moh-711/registers/moh-333.columns.ts

@@ -0,0 +1,119 @@
+import { type RegisterColumn } from '../../../common/report-register';
+
+/**
+ * MOH 333 as the register prints it: one column per cell, in the order they appear.
+ *
+ * The last 8 columns are rendered by the table but have no headings above
+ * them -- the header row is 53 columns wide against 61 of data. They carry
+ * their field names rather than headings borrowed from neighbouring columns.
+ */
+export const moh333ExportColumns: RegisterColumn[] = [
+  { header: 'Date of Admission (dd/mm/yyyy)', value: (row) => row.date_of_admission ?? '' },
+  { header: 'AMRSID', value: (row) => row.amrsID ?? '' },
+  { header: 'Admission number (yyyy-mm-nnnn) - NUPI', value: (row) => row.admission_number ?? '' },
+  { header: 'Full Name (First, Middle, surname)', value: (row) => row.full_names ?? '' },
+  { header: 'Date of Birth (dd/mm/yyyy) - Age', value: (row) => row.date_of_birth ?? '' },
+  { header: 'County/ Subcounty', value: (row) => row.subcounty_county ?? '' },
+  { header: 'Village/ Estate/ Land mark - Phone number', value: (row) => row.village_estate_landmark ?? '' },
+  {
+    header: 'Marital Status 1 = Married 2 = Widowed 3 = Single 4 = Divorced 5 = Separated',
+    value: (row) => row.marital_status ?? '',
+  },
+  { header: 'Parity (X+Y)', value: (row) => row.parity ?? '' },
+  { header: 'Gravidae', value: (row) => row.gravidae ?? '' },
+  { header: 'No. of ANC visits', value: (row) => row.no_of_anc_visits ?? '' },
+  { header: 'Date of Last Menstrual Period (LMP) (dd/mm/yyyy)', value: (row) => row.lmp ?? '' },
+  { header: 'Estimated Date of Delivery (EDD) (dd/mm/yyyy)', value: (row) => row.edd ?? '' },
+  { header: 'Diagnosis', value: (row) => row.diagnosis ?? '' },
+  { header: 'Delivery - Duration of labour (hours)', value: (row) => row.duration_of_labour ?? '' },
+  { header: 'Delivery - Date of Delivery (dd/mm/yyyy)', value: (row) => row.date_of_delivery ?? '' },
+  { header: 'Delivery - Time of Delivery', value: (row) => row.time_of_delivery ?? '' },
+  { header: 'Delivery - Gestation at Birth (wks)', value: (row) => row.gestation_at_birth ?? '' },
+  { header: 'Delivery - Mode of Delivery 1) SVD 2) CS 3) Breech 4) AVD', value: (row) => row.mode_of_delivery ?? '' },
+  { header: 'Delivery - No.of babies delivered', value: (row) => row.no_of_babies_delivered ?? '' },
+  { header: 'Delivery - Placenta Complete 1=Yes 2=No 3=BBA', value: (row) => row.placenta_complete ?? '' },
+  {
+    header: 'Delivery - Uterotonic given 1=oxytocin 2=Carbetocin 3=Others Specify 4= None',
+    value: (row) => row.uterotonic_given ?? '',
+  },
+  {
+    header: 'Delivery - Vaginal Examination 1= Normal 2=Episiotomy 3=Vaginal tear 4=FGM 5=Vaginal warts',
+    value: (row) => row.vaginal_examination ?? '',
+  },
+  { header: 'Delivery - Blood loss (mls)', value: (row) => row.blood_loss ?? '' },
+  {
+    header: "Delivery - Mother's status after Delivery (Alive/ Dead)",
+    value: (row) => row.mother_status_after_delivery ?? '',
+  },
+  {
+    header: 'Delivery - Maternal deaths Notified (Y/N/NA) - Date Death notified',
+    value: (row) => row.maternal_deaths_notified ?? '',
+  },
+  {
+    header:
+      'Delivery - Delivery Complications 1=A.P.H. (Ante Partum Haemorrhage); 2=P.P.H. (Post Partum Haemorrhage); 3= Eclampsia; 4=Ruptured Uterus; 5=Obstructed labour; 6=Sepsis 7= NA',
+    value: (row) => row.delivery_complications ?? '',
+  },
+  { header: 'APGAR Score', value: (row) => row.apgar_score ?? '' },
+  { header: 'Birth Outcome (LB/FSB/ MSB)', value: (row) => row.birth_outcome ?? '' },
+  { header: 'Birth Weight (grams)', value: (row) => row.birth_weight ?? '' },
+  { header: 'Sex (M/F)', value: (row) => row.sex ?? '' },
+  {
+    header: 'Initiated on BF in < 1hr (Y/N) - Kangaroo Mother Care (Y/N)',
+    value: (row) => row.initiated_on_bf_less_one_hour ?? '',
+  },
+  { header: 'TEO given at birth? (Y/N)', value: (row) => row.teo_given_at_birth ?? '' },
+  { header: 'Chlorhexidine applied on cord stump (Y/N)', value: (row) => row.chlorhexdine_applied_on_cord_stump ?? '' },
+  {
+    header: 'Birth with deformity (Y/N) - 1- congenital syphilis. 2- spina bifida, 3- Hydrocephalus, 4- Talipes',
+    value: (row) => row.birth_with_deformity ?? '',
+  },
+  { header: 'Given Vitamin K (Y/N)', value: (row) => row.given_vitamin_k ?? '' },
+  {
+    header: 'VDRL/ RPR Results (Specify 1-VDRL 2-RPR 3-Duo testing) - (P/N/ND)',
+    value: (row) => row.duo_test_result ?? '',
+  },
+  {
+    header: 'Baby - HIV Test 1 - Kit Name: - Lot No. - Expiry / / - (N/P/I/NA)',
+    value: (row) => row.hiv_test_1_kit_name ?? '',
+  },
+  {
+    header: 'Baby - HIV Test 2 - Kit Name: - Lot No. - Expiry / / - (N/P/I/NA)',
+    value: (row) => row.hiv_test_2_kit_name ?? '',
+  },
+  {
+    header: 'Baby - HIV Test 3 - Kit Name: - Lot No. - Expiry / / - (N/P/I/NA)',
+    value: (row) => row.hiv_test_3_kit_name ?? '',
+  },
+  {
+    header: 'Baby - HIV Result Maternity (N/P/Inc/U/NA) - Initial/Retest/ NA',
+    value: (row) => row.hiv_test_results_maternity ?? '',
+  },
+  { header: 'Maternal HAART - Start at Maternity - (Y/N/NA)', value: (row) => row.maternal_haart ?? '' },
+  { header: 'Infant Prophylaxis - (Y/N/NA)', value: (row) => row.infant_prophylaxis ?? '' },
+  { header: 'Partner Tested for HIV - (Y/N/NA)', value: (row) => row.partner_tested_for_hiv ?? '' },
+  { header: 'Counselled on infant feeding (Y/N/NA)', value: (row) => row.counselled_on_infant_feeding ?? '' },
+  { header: 'Delivery Conducted by (Enter Name)', value: (row) => row.deleivery_conducted_by ?? '' },
+  { header: 'Birth Notification Number', value: (row) => row.birth_notification_number ?? '' },
+  { header: 'Discharge - Date (dd/mm/yyyy)', value: (row) => row.discharge_date ?? '' },
+  { header: 'Discharge - Status of Baby A= Alive D= Dead', value: (row) => row.discharge_status_of_baby ?? '' },
+  {
+    header: 'Referral - From - 1= From Community Unit, 2= From Another Health Facility, 3=Not Applicable',
+    value: (row) => row.referrals_from ?? '',
+  },
+  {
+    header:
+      'Referral - To - 1= To Community Unit, 2=Referred to HIV preventive services 3=Another Health Facility, 4=Not Applicable',
+    value: (row) => row.referrals_to ?? '',
+  },
+  { header: 'Referral - Reason for referral', value: (row) => row.reasons_for_refferal ?? '' },
+  { header: 'Comments', value: (row) => row.comments ?? '' },
+  { header: 'Nupi', value: (row) => row.nupi ?? '' },
+  { header: 'Age', value: (row) => row.age ?? '' },
+  { header: 'Phone number', value: (row) => row.phone_number ?? '' },
+  { header: 'Date maternal death notified', value: (row) => row.date_maternal_death_notified ?? '' },
+  { header: 'Kangaroo mother care', value: (row) => row.kangaroo_mother_care ?? '' },
+  { header: 'Type of deformity', value: (row) => row.type_of_deformity ?? '' },
+  { header: 'Hiv test type', value: (row) => row.hiv_test_type ?? '' },
+  { header: 'Hiv test type', value: (row) => row.hiv_test_type ?? '' },
+];