@ampath/esm-reports-app 1.0.0-next.59 → 1.0.0-next.60

package/src/reports/moh-710/registers/moh-510/moh-510.component.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+
+import styles from './moh-510.scss';
+import { useSearchParams } from 'react-router-dom';
+import { RegisterLayout, usePatientList } from '../../../../common/report-register';
+import { getMoh710PatientList } from '../../../../resources/moh-710.resource';
+import { moh510ExportColumns } from './moh-510.columns';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import classNames from 'classnames';
+
+interface Moh510RegisterComponentProps {}
+
+const Moh510RegisterComponent: React.FC<Moh510RegisterComponentProps> = () => {
+  const [searchParams] = useSearchParams();
+  const startDate = searchParams.get('startDate');
+  const endDate = searchParams.get('endDate');
+  const locationUuids = searchParams.get('locationUuids');
+  const indicator = searchParams.get('indicator');
+  const reportName = 'moh710Report';
+
+  const {
+    rows: patientlist,
+    total,
+    isTotalExact,
+    isLoading,
+    page,
+    pageSize,
+    onPageChange,
+    fetchAll,
+  } = usePatientList(
+    ({ startIndex, limit }) =>
+      getMoh710PatientList({
+        startDate: startDate!,
+        endDate: endDate!,
+        locationUuids: locationUuids!,
+        indicator: indicator!,
+        startIndex,
+        limit,
+        reportName: reportName,
+      }),
+    [startDate, endDate, locationUuids, indicator],
+  );
+  return (
+    <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={moh510ExportColumns}
+    >
+      <div className={styles.tableContainer}>
+        <Table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
+          <TableHead>
+            <TableRow>
+              <TableHeader>Date (DD/MM/YYYY)</TableHeader>
+              <TableHeader>Serial Number</TableHeader>
+              <TableHeader>Child's Number</TableHeader>
+              <TableHeader>Child's Names</TableHeader>
+              <TableHeader>Sex</TableHeader>
+              <TableHeader>Date of Birth</TableHeader>
+              <TableHeader>Date first Seen</TableHeader>
+              <TableHeader>Father's Full Names/Guardian</TableHeader>
+              <TableHeader>Mother's Full Names/Guardian</TableHeader>
+              <TableHeader>Village /Estate / Landmark</TableHeader>
+              <TableHeader>Telephone No.</TableHeader>
+              <TableHeader>BCG</TableHeader>
+              <TableHeader>Polio birth Dose</TableHeader>
+              <TableHeader>OPV 1</TableHeader>
+              <TableHeader>OPV 2</TableHeader>
+              <TableHeader>OPV 3</TableHeader>
+              <TableHeader>IPV</TableHeader>
+              <TableHeader>DPT / Hep.B / Hib.1</TableHeader>
+              <TableHeader>DPT / Hep.B / Hib.2</TableHeader>
+              <TableHeader>DPT / Hep.B / Hib.3</TableHeader>
+              <TableHeader>PCV 10 (Pneumococcal)</TableHeader>
+              <TableHeader>PCV 10 (Pneumococcal)</TableHeader>
+              <TableHeader>PCV 10 (Pneumococcal)</TableHeader>
+              <TableHeader>Rota1</TableHeader>
+              <TableHeader>Rota2</TableHeader>
+              <TableHeader>Vitamin A(6-11 months)</TableHeader>
+              <TableHeader>MR1</TableHeader>
+              <TableHeader>Yellow Fever</TableHeader>
+              <TableHeader>Fully Immunized Child</TableHeader>
+              <TableHeader>MR2</TableHeader>
+              <TableHeader>Remarks</TableHeader>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {patientlist?.length > 0 ? (
+              patientlist?.map((patient, i) => (
+                <TableRow key={patient.person_id || patient.id}>
+                  <TableCell>{patient.date}</TableCell>
+                  <TableCell>{i + 1}</TableCell>
+                  <TableCell>{patient.child_number}</TableCell>
+                  <TableCell>{patient.child_names}</TableCell>
+                  <TableCell>{patient.sex}</TableCell>
+                  <TableCell>{patient.date_of_birth}</TableCell>
+                  <TableCell>{patient.date_first_seen}</TableCell>
+                  <TableCell>{patient.father_names}</TableCell>
+                  <TableCell>{patient.mother_names}</TableCell>
+                  <TableCell>{patient.village_estate_landmark}</TableCell>
+                  <TableCell>{patient.phone_number}</TableCell>
+                  <TableCell>{patient.bcg}</TableCell>
+                  <TableCell>{patient.polio_birth_dose}</TableCell>
+                  <TableCell>{patient.opv_1}</TableCell>
+                  <TableCell>{patient.opv_2}</TableCell>
+                  <TableCell>{patient.opv_3}</TableCell>
+                  <TableCell>{patient.ipv}</TableCell>
+                  <TableCell>{patient.dpt_hep_1}</TableCell>
+                  <TableCell>{patient.dpt_hep_2}</TableCell>
+                  <TableCell>{patient.dpt_hep_3}</TableCell>
+                  <TableCell>{patient.pneumococcal_1}</TableCell>
+                  <TableCell>{patient.pneumococcal_2}</TableCell>
+                  <TableCell>{patient.pneumococcal_3}</TableCell>
+                  <TableCell>{patient.rotavirus_1}</TableCell>
+                  <TableCell>{patient.rotavirus_2}</TableCell>
+                  <TableCell>{patient.vitamin_a_6_11_months}</TableCell>
+                  <TableCell>{patient.measles_rubella_1}</TableCell>
+                  <TableCell>{patient.yellow_fever}</TableCell>
+                  <TableCell>{patient.fully_immunized_child}</TableCell>
+                  <TableCell>{patient.measles_rubella_2}</TableCell>
+                  <TableCell>{patient.remarks}</TableCell>
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={28}>No data available</TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </RegisterLayout>
+  );
+};
+
+export default Moh510RegisterComponent;

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

@@ -0,0 +1,130 @@
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+/* 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;
+}
+
+.ministry {
+  font-size: $meta;
+}
+
+.reportTitle {
+  font-size: $title;
+  font-weight: 700;
+  color: $ink;
+}
+
+.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;
+}
+
+.shortLine {
+  width: 14mm;
+}
+
+.container {
+  overflow-x: auto;
+  margin: 0;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.tableBordered td,
+.tableBordered th {
+  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: #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;
+  }
+}
+
+/* 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

@@ -512,7 +512,7 @@ const Moh333Register: React.FC = () => {
                     <td rowSpan={2}>
                       {row.date_of_admission ? new Date(row.date_of_admission).toLocaleDateString('en-GB') : ''}
                     </td>
-                    <td rowSpan={2}>{row.amrsID}</td>
+                    <td rowSpan={2}>{row.amrs_id}</td>
                     <td>{row.admission_number}</td>
                     <td rowSpan={2}>{row.full_names}</td>
 

package/src/reports/moh-711/registers/moh-405-register.component.tsx

@@ -405,8 +405,8 @@ const Moh405Register: React.FC = () => {
                       {patient.date_of_visit ? new Date(patient.date_of_visit).toLocaleDateString('en-GB') : ''}
                     </td>
                     <td>{patient.anc_number}</td>
-                    <td rowSpan={2}>{patient.anc_number_NUPI}</td>
-                    <td rowSpan={2}>{patient.amrsID}</td>
+                    <td rowSpan={2}>{patient.anc_number}</td>
+                    <td rowSpan={2}>{patient.amrs_id}</td>
                     <td rowSpan={2}>{patient.number_of_anc_visits}</td>
                     <td rowSpan={2}>{patient.full_names}</td>
                     <td>{patient.date_of_birth ? new Date(patient.date_of_birth).toLocaleDateString('en-GB') : ''}</td>
@@ -476,7 +476,7 @@ const Moh405Register: React.FC = () => {
                   </tr>
 
                   <tr>
-                    <td>{patient.NUPI}</td>
+                    <td>{patient.nupi}</td>
                     <td>{patient.age}</td>
                     <td>{patient.phone_number}</td>
                     <td>{patient.fgm_complications}</td>

package/src/reports/moh-711/registers/moh-406-register.component.tsx

@@ -438,7 +438,7 @@ const Moh406Register: React.FC = () => {
                     </td>
                     <td>{patient.pnc_number}</td>
                     <td rowSpan={2}>{patient.pnc_number}</td>
-                    <td rowSpan={2}>{patient.amrsID}</td>
+                    <td rowSpan={2}>{patient.amrs_id}</td>
                     <td rowSpan={2}>{patient.full_names}</td>
 
                     <td>{patient.date_of_birth ? new Date(patient.date_of_birth).toLocaleDateString('en-GB') : ''}</td>
@@ -509,7 +509,7 @@ const Moh406Register: React.FC = () => {
                     <td>{patient.phone_number}</td>
                     <td>{patient.pallor}</td>
                     <td>{patient.cervical_cancer_results}</td>
-                    <td>{patient.family_planning_method}</td>
+                    <td>{patient.women_received_post_partum_fp}</td>
                   </tr>
                 </React.Fragment>
               ))

package/src/reports/moh-711/sections/family-planning.component.tsx

@@ -55,14 +55,14 @@ const FamilyPlanningComponent: React.FC<FamilyPlanningComponentProps> = ({ moh71
             <td>5</td>
             <td rowSpan={2}>Injectables</td>
             <td>FP Injections DMPA- IM</td>
-            <td>{moh711Data.fp_injections_dmpa_im}</td>
-            <td></td>
+            <td>{moh711Data.fp_injections_dmpa_im_new}</td>
+            <td>{moh711Data.fp_injections_dmpa_im_revisit}</td>
           </tr>
           <tr>
             <td>6</td>
             <td>FP Injections DMPA- SC</td>
-            <td>{moh711Data.fp_injections_dmpa_sc}</td>
-            <td></td>
+            <td>{moh711Data.fp_injections_dmpa_sc_new}</td>
+            <td>{moh711Data.fp_injections_dmpa_sc_revisit}</td>
           </tr>
           <tr>
             <td>7</td>
@@ -112,40 +112,40 @@ const FamilyPlanningComponent: React.FC<FamilyPlanningComponentProps> = ({ moh71
             <td>12</td>
             <td rowSpan={2}>Implants</td>
             <td>1 Rod</td>
-            <td></td>
-            <td></td>
+            <td>{moh711Data.implants_insertion_1_rod_first_time}</td>
+            <td>{moh711Data.implants_insertion_1_rod_re_insertion}</td>
           </tr>
           <tr>
             <td>13</td>
             <td>2 Rods</td>
-            <td></td>
-            <td></td>
+            <td>{moh711Data.implants_insertion_2_rod_first_time}</td>
+            <td>{moh711Data.implants_insertion_2_rod_re_insertion}</td>
           </tr>
           <tr>
             <td>14</td>
             <td rowSpan={2}>I.U.C.D insertion</td>
             <td>Hormonal</td>
-            <td>{moh711Data.iucd_hormonal}</td>
-            <td></td>
+            <td>{moh711Data.iucd_hormonal_first_time}</td>
+            <td>{moh711Data.iucd_hormonal_re_insertion}</td>
           </tr>
           <tr>
             <td>15</td>
             <td>Non Hormonal</td>
-            <td>{moh711Data.iucd_non_hormonal}</td>
-            <td></td>
+            <td>{moh711Data.iucd_non_hormonal_first_time}</td>
+            <td>{moh711Data.iucd_non_hormonal_re_insertion}</td>
           </tr>
           <tr>
             <td>16</td>
             <td rowSpan={2}>Voluntary surgical contraception</td>
             <td>BTL</td>
-            <td>{moh711Data.surgical_contraception_btl}</td>
-            <td className={styles.greyBackground}></td>
+            <td>{moh711Data.surgical_contraception_btl_first_time}</td>
+            <td className={styles.greyBackground}>{moh711Data.surgical_contraception_btl_re_insertion}</td>
           </tr>
           <tr>
             <td>17</td>
             <td>Vasectomy</td>
-            <td>{moh711Data.vasectomy} </td>
-            <td className={styles.greyBackground}></td>
+            <td>{moh711Data.vasectomy_insertion} </td>
+            <td className={styles.greyBackground}>{moh711Data.vasectomy_re_insertion}</td>
           </tr>
           <tr>
             <th colSpan={3}></th>
@@ -156,14 +156,14 @@ const FamilyPlanningComponent: React.FC<FamilyPlanningComponentProps> = ({ moh71
             <td>18</td>
             <td rowSpan={2}>Removals</td>
             <td>I.U.C.D</td>
-            <td>{moh711Data.iucd_removals}</td>
-            <td className={styles.greyBackground}></td>
+            <td>{moh711Data.iucd_removals_new}</td>
+            <td className={styles.greyBackground}>{moh711Data.iucd_removals_revisit}</td>
           </tr>
           <tr>
             <td>19</td>
             <td>Implants</td>
-            <td>{moh711Data.implants_removal}</td>
-            <td className={styles.greyBackground}></td>
+            <td>{moh711Data.implants_removal_new}</td>
+            <td className={styles.greyBackground}>{moh711Data.implants_removal_revisit}</td>
           </tr>
           <tr>
             <td>20</td>
@@ -203,8 +203,8 @@ const FamilyPlanningComponent: React.FC<FamilyPlanningComponentProps> = ({ moh71
           <tr>
             <td>25</td>
             <td>3 days to 6 weeks</td>
-            <td>{moh711Data.post_partum_fp_4_6_weeks_new}</td>
-            <td className={styles.greyBackground}>{moh711Data.post_partum_fp_4_6_weeks_revisit}</td>
+            <td>{moh711Data.post_partum_fp_3days_6_weeks_new}</td>
+            <td className={styles.greyBackground}>{moh711Data.post_partum_fp_3days_6_weeks_revisit}</td>
           </tr>
           <tr>
             <td>26</td>

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

@@ -6,6 +6,9 @@ interface Moh710Params {
   startDate?: string;
   endDate?: string;
   indicator?: string | string[];
+  startIndex?: number;
+  limit?: number;
+  reportName?: string;
 }
 
 export async function getMoh710(params: Moh710Params): Promise<any> {
@@ -30,12 +33,14 @@ export async function getMoh710(params: Moh710Params): Promise<any> {
 }
 
 export async function getMoh710PatientList(params: Moh710Params): Promise<any> {
-  const url = await buildEtlUrl('moh-710-patient-list', {
+  const url = await buildEtlUrl('moh-510-patient-list', {
     locationUuids: params.locationUuids || '',
     startDate: params.startDate || '',
     endDate: params.endDate || '',
     indicator: Array.isArray(params.indicator) ? params.indicator.join(',') : params.indicator || '',
+    reportName: params.reportName || 'moh710Report',
   });
+
   try {
     const response = await openmrsFetch(url);
 

package/src/root.component.tsx

@@ -25,6 +25,7 @@ import Moh366Register from './reports/moh-731/registers/moh-366.component';
 import PrepRegisterComponent from './reports/moh-731/registers/prep-register.component';
 import Moh731Linelist from './reports/moh-731/linelist/moh-731-linelist.component';
 import styles from './root.scss';
+import Moh510RegisterComponent from './reports/moh-710/registers/moh-510/moh-510.component';
 
 const RootComponent: React.FC = () => {
   const baseName = window.getOpenmrsSpaBase() + 'home/reports';
@@ -57,6 +58,7 @@ const RootComponent: React.FC = () => {
           <Route path="/moh-731-linelist" element={<Moh731Linelist />} />
           <Route path="/moh-366-register" element={<Moh366Register />} />
           <Route path="/prep-register" element={<PrepRegisterComponent />} />
+          <Route path="/moh-510-register" element={<Moh510RegisterComponent />} />
         </Routes>
       </div>
     </BrowserRouter>

package/webpack.config.js

@@ -19,4 +19,4 @@ config.overrides.resolve = {
   },
 };
 
-module.exports = config;
+module.exports = config;