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

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

@@ -0,0 +1,639 @@
+import { Button, Loading } from '@carbon/react';
+import React, { useEffect, useState } from 'react';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+
+import styles from '../moh711.scss';
+import classNames from 'classnames';
+import { getMoh333PatientList } from '../../../resources/moh-711.resource';
+import { moh333Columns } from './type';
+
+const Moh333Register: React.FC = () => {
+  const navigate = useNavigate();
+  const [patientlist, setPatientList] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [searchParams] = useSearchParams();
+  const location = useLocation();
+
+  const startDate = searchParams.get('startDate');
+  const endDate = searchParams.get('endDate');
+  const locationUuids = searchParams.get('locationUuids');
+  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]);
+
+  function navigateBack() {
+    navigate(location.state?.from || '//moh-711');
+  }
+  return (
+    <>
+      {' '}
+      <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>
+            <tr>
+              <th rowSpan={6}>
+                Date of
+                <br />
+                Admission <br />
+                (dd/mm/yyyy)
+              </th>
+              <th rowSpan={6}>AMRSID</th>
+              <th>Admission number (yyyy-mm-nnnn)</th>
+              <th rowSpan={6}>
+                Full Name
+                <br />
+                (First, Middle, surname)
+              </th>
+              <th>
+                Date of Birth <br />
+                (dd/mm/yyyy)
+              </th>
+              <th rowSpan={6}>
+                County/ <br />
+                Subcounty
+              </th>
+              <th>
+                Village/
+                <br />
+                Estate/
+                <br />
+                Land mark
+              </th>
+              <th rowSpan={6}>
+                Marital Status <br />
+                1 = Married
+                <br />
+                2 = Widowed <br />
+                3 = Single
+                <br />
+                4 = Divorced
+                <br />5 = Separated
+              </th>
+              <th rowSpan={6}>
+                Parity
+                <br />
+                (X+Y)
+              </th>
+              <th rowSpan={6}>Gravidae</th>
+              <th rowSpan={6}>
+                No. of <br />
+                ANC <br />
+                visits
+              </th>
+              <th rowSpan={6}>
+                Date of Last
+                <br />
+                Menstrual
+                <br />
+                Period (LMP) <br />
+                (dd/mm/yyyy)
+              </th>
+              <th rowSpan={6}>
+                Estimated Date <br />
+                of Delivery
+                <br />
+                (EDD)
+                <br />
+                (dd/mm/yyyy)
+              </th>
+              <th rowSpan={6}>Diagnosis</th>
+              <th colSpan={13}>Delivery</th>
+              <th colSpan={9}></th>
+              <th>
+                VDRL/
+                <br />
+                RPR
+                <br />
+                Results
+                <br />
+                (Specify
+                <br />
+                1-VDRL
+                <br />
+                2-RPR
+                <br />
+                3-Duo
+                <br />
+                testing)
+              </th>
+              <th colSpan={4}>Baby</th>
+              <th>
+                Maternal <br />
+                HAART
+              </th>
+              <th>
+                Infant <br />
+                Prophylaxis
+              </th>
+              <th>
+                Partner <br />
+                Tested for <br />
+                HIV
+              </th>
+              <th rowSpan={6}>
+                Counselled <br />
+                on infant <br />
+                feeding <br />
+                (Y/N/NA)
+              </th>
+              <th rowSpan={6}>
+                Delivery <br />
+                Conducted by <br />
+                (Enter Name)
+              </th>
+              <th rowSpan={6}>
+                Birth <br />
+                Notification <br />
+                Number
+              </th>
+              <th colSpan={2}>Discharge</th>
+              <th colSpan={3}>Referral</th>
+              <th rowSpan={6}>Comments</th>
+            </tr>
+            <tr>
+              <th rowSpan={5}>NUPI</th>
+              <th rowSpan={5}>Age</th>
+              <th rowSpan={5}>Phone number</th>
+              <th rowSpan={5}>
+                Duration of <br />
+                labour
+                <br />
+                (hours)
+              </th>
+              <th rowSpan={5}>
+                Date of
+                <br />
+                Delivery <br />
+                (dd/mm/yyyy)
+              </th>
+              <th rowSpan={5}>
+                Time of
+                <br />
+                Delivery
+              </th>
+              <th rowSpan={5}>
+                Gestation
+                <br />
+                at Birth
+                <br />
+                (wks)
+              </th>
+              <th rowSpan={5}>
+                Mode of <br />
+                Delivery <br />
+                1) SVD
+                <br />
+                2) CS
+                <br />
+                3) Breech
+                <br />
+                4) AVD
+              </th>
+              <th rowSpan={5}>
+                No.of babies <br />
+                delivered
+              </th>
+              <th rowSpan={5}>
+                Placenta
+                <br />
+                Complete <br />
+                1=Yes
+                <br />
+                2=No
+                <br />
+                3=BBA
+              </th>
+              <th rowSpan={5}>
+                Uterotonic <br />
+                given <br />
+                1=oxytocin <br />
+                2=Carbetocin <br />
+                3=Others <br />
+                Specify
+                <br />
+                4= None
+              </th>
+              <th rowSpan={5}>
+                Vaginal
+                <br />
+                Examination
+                <br />
+                1= Normal
+                <br />
+                2=Episiotomy
+                <br />
+                3=Vaginal tear
+                <br />
+                4=FGM
+                <br />
+                5=Vaginal warts
+              </th>
+              <th rowSpan={5}>
+                Blood
+                <br />
+                loss
+                <br />
+                (mls)
+              </th>
+              <th rowSpan={5}>
+                Mother's <br />
+                status after <br />
+                Delivery
+                <br />
+                (Alive/ <br />
+                Dead)
+              </th>
+              <th>
+                Maternal deaths <br />
+                Notified <br />
+                (Y/N/NA)
+              </th>
+              <th rowSpan={5}>
+                Delivery
+                <br />
+                Complications
+                <br />
+                1=A.P.H. (Ante Partum <br />
+                Haemorrhage); <br />
+                2=P.P.H. (Post Partum <br />
+                Haemorrhage); <br />
+                3= Eclampsia; <br />
+                4=Ruptured Uterus;
+                <br />
+                5=Obstructed labour; <br />
+                6=Sepsis <br />
+                7= NA
+              </th>
+              <th rowSpan={5}>
+                APGAR <br />
+                Score
+              </th>
+              <th rowSpan={5}>
+                Birth
+                <br />
+                Outcome
+                <br />
+                (LB/FSB/ <br />
+                MSB)
+              </th>
+              <th rowSpan={5}>
+                Birth <br />
+                Weight
+                <br />
+                (grams)
+              </th>
+              <th rowSpan={5}>
+                Sex <br />
+                (M/F)
+              </th>
+              <th>
+                Initiated on <br />
+                BF in
+                <br />
+                &lt; 1hr
+                <br />
+                (Y/N)
+              </th>
+              <th rowSpan={5}>
+                TEO
+                <br />
+                given at
+                <br />
+                birth? <br />
+                (Y/N)
+              </th>
+              <th rowSpan={5}>
+                Chlorhexidine <br />
+                applied on <br />
+                cord stump
+                <br />
+                (Y/N)
+              </th>
+              <th>
+                Birth with <br />
+                deformity <br />
+                (Y/N)
+              </th>
+              <th rowSpan={5}>
+                Given
+                <br />
+                Vitamin <br />
+                K <br />
+                (Y/N)
+              </th>
+              <th rowSpan={5}>(P/N/ND)</th>
+              <th>HIV Test 1</th>
+              <th>HIV Test 2</th>
+              <th>HIV Test 3</th>
+              <th>
+                HIV Result <br />
+                Maternity <br />
+                (N/P/Inc/U/NA)
+              </th>
+              <th>
+                Start at <br />
+                Maternity
+              </th>
+              <th rowSpan={5}>(Y/N/NA)</th>
+              <th rowSpan={5}>(Y/N/NA)</th>
+              <th rowSpan={5}>
+                Date <br />
+                (dd/mm/yyyy)
+              </th>
+              <th rowSpan={5}>
+                Status of <br />
+                Baby
+                <br />
+                A= Alive
+                <br />
+                D= Dead
+              </th>
+              <th>From</th>
+              <th>To</th>
+              <th rowSpan={5}>Reason for referral</th>
+            </tr>
+            <tr>
+              <th rowSpan={4}>
+                Date Death <br />
+                notified
+              </th>
+              <th rowSpan={4}>
+                Kangaroo <br />
+                Mother <br />
+                Care <br />
+                (Y/N)
+              </th>
+              <th rowSpan={4}>
+                1- congenital <br />
+                syphilis.
+                <br />
+                2- spina bifida, <br />
+                3- Hydrocephalus,
+                <br />
+                4- Talipes
+              </th>
+              <th>Kit Name:</th>
+              <th>Kit Name:</th>
+              <th>Kit Name:</th>
+              <th rowSpan={4}>
+                Initial/Retest/
+                <br />
+                NA
+              </th>
+              <th rowSpan={4}>(Y/N/NA)</th>
+              <th rowSpan={4}>
+                1= From Community <br />
+                Unit,
+                <br />
+                2= From Another
+                <br />
+                Health Facility, <br />
+                3=Not Applicable
+              </th>
+              <th rowSpan={4}>
+                1= To Community
+                <br />
+                Unit, <br />
+                2=Referred to HIV <br />
+                preventive services
+                <br />
+                3=Another Health <br />
+                Facility,
+                <br />
+                4=Not Applicable
+              </th>
+            </tr>
+            <tr>
+              <th>Lot No.</th>
+              <th>Lot No.</th>
+              <th>Lot No.</th>
+            </tr>
+            <tr>
+              <th>Expiry / /</th>
+              <th>Expiry / /</th>
+              <th>Expiry / /</th>
+            </tr>
+            <tr>
+              <th>(N/P/I/NA)</th>
+              <th>(N/P/I/NA)</th>
+              <th>(N/P/I/NA)</th>
+            </tr>
+          </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}>
+                (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>
+            </tr>
+            {patientlist?.length > 0 ? (
+              patientlist.map((row, i) => (
+                <React.Fragment key={i}>
+                  <tr>
+                    <td rowSpan={2}>
+                      {row.date_of_admission ? new Date(row.date_of_admission).toLocaleDateString('en-GB') : ''}
+                    </td>
+                    <td rowSpan={2}>{row.amrsID}</td>
+                    <td>{row.admission_number}</td>
+                    <td rowSpan={2}>{row.full_names}</td>
+
+                    <td>{row.date_of_birth ? new Date(row.date_of_birth).toLocaleDateString('en-GB') : ''}</td>
+
+                    <td rowSpan={2}>{row.subcounty_county}</td>
+                    <td>{row.village_estate_landmark}</td>
+                    <td rowSpan={2}>{row.marital_status}</td>
+                    <td rowSpan={2}>{row.parity}</td>
+                    <td rowSpan={2}>{row.gravidae}</td>
+                    <td rowSpan={2}>{row.no_of_anc_visits}</td>
+
+                    <td rowSpan={2}>{row.lmp ? new Date(row.lmp).toLocaleDateString('en-GB') : ''}</td>
+
+                    <td rowSpan={2}>{row.edd ? new Date(row.edd).toLocaleDateString('en-GB') : ''}</td>
+
+                    <td rowSpan={2}>{row.diagnosis}</td>
+                    <td rowSpan={2}>{row.duration_of_labour}</td>
+
+                    <td rowSpan={2}>
+                      {row.date_of_delivery ? new Date(row.date_of_delivery).toLocaleDateString('en-GB') : ''}
+                    </td>
+
+                    <td rowSpan={2}>{row.time_of_delivery}</td>
+                    <td rowSpan={2}>{row.gestation_at_birth}</td>
+                    <td rowSpan={2}>{row.mode_of_delivery}</td>
+                    <td rowSpan={2}>{row.no_of_babies_delivered}</td>
+                    <td rowSpan={2}>{row.placenta_complete}</td>
+                    <td rowSpan={2}>{row.uterotonic_given}</td>
+                    <td rowSpan={2}>{row.vaginal_examination}</td>
+                    <td rowSpan={2}>{row.blood_loss}</td>
+                    <td rowSpan={2}>{row.mother_status_after_delivery}</td>
+
+                    <td>{row.maternal_deaths_notified}</td>
+
+                    <td rowSpan={2}>{row.delivery_complications}</td>
+                    <td rowSpan={2}>{row.apgar_score}</td>
+                    <td rowSpan={2}>{row.birth_outcome}</td>
+                    <td rowSpan={2}>{row.birth_weight}</td>
+                    <td rowSpan={2}>{row.sex}</td>
+
+                    <td>{row.initiated_on_bf_less_one_hour}</td>
+
+                    <td rowSpan={2}>{row.teo_given_at_birth}</td>
+                    <td rowSpan={2}>{row.chlorhexdine_applied_on_cord_stump}</td>
+                    <td>{row.birth_with_deformity}</td>
+                    <td rowSpan={2}>{row.given_vitamin_k}</td>
+
+                    <td>{row.duo_test_result}</td>
+
+                    <td rowSpan={2}>
+                      {row.hiv_test_1_kit_name} / {row.hiv_test_1_lot_no} /{' '}
+                      {row.hiv_test_1_expiry_date
+                        ? new Date(row.hiv_test_1_expiry_date).toLocaleDateString('en-GB')
+                        : ''}
+                    </td>
+
+                    <td rowSpan={2}>
+                      {row.hiv_test_2_kit_name} / {row.hiv_test_2_lot_no} /{' '}
+                      {row.hiv_test_2_expiry_date
+                        ? new Date(row.hiv_test_2_expiry_date).toLocaleDateString('en-GB')
+                        : ''}
+                    </td>
+
+                    <td rowSpan={2}>
+                      {row.hiv_test_3_kit_name} / {row.hiv_test_3_lot_no} /{' '}
+                      {row.hiv_test_3_expiry_date
+                        ? new Date(row.hiv_test_3_expiry_date).toLocaleDateString('en-GB')
+                        : ''}
+                    </td>
+
+                    <td>{row.hiv_test_results_maternity}</td>
+
+                    <td rowSpan={2}>{row.maternal_haart}</td>
+                    <td rowSpan={2}>{row.infant_prophylaxis}</td>
+                    <td rowSpan={2}>{row.partner_tested_for_hiv}</td>
+                    <td rowSpan={2}>{row.counselled_on_infant_feeding}</td>
+                    <td rowSpan={2}>{row.deleivery_conducted_by}</td>
+                    <td rowSpan={2}>{row.birth_notification_number}</td>
+
+                    <td rowSpan={2}>
+                      {row.discharge_date ? new Date(row.discharge_date).toLocaleDateString('en-GB') : ''}
+                    </td>
+
+                    <td rowSpan={2}>{row.discharge_status_of_baby}</td>
+                    <td rowSpan={2}>{row.referrals_from}</td>
+                    <td rowSpan={2}>{row.referrals_to}</td>
+                    <td rowSpan={2}>{row.reasons_for_refferal}</td>
+                    <td rowSpan={2}>{row.comments}</td>
+                  </tr>
+
+                  <tr>
+                    <td>{row.nupi}</td>
+                    <td>{row.age}</td>
+                    <td>{row.phone_number}</td>
+
+                    <td>
+                      {row.date_maternal_death_notified
+                        ? new Date(row.date_maternal_death_notified).toLocaleDateString('en-GB')
+                        : ''}
+                    </td>
+
+                    <td>{row.kangaroo_mother_care}</td>
+                    <td>{row.type_of_deformity}</td>
+                    <td>{row.hiv_test_type}</td>
+                    <td>{row.hiv_test_type}</td>
+                  </tr>
+                </React.Fragment>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={moh333Columns.length}>No data available</td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+};
+
+export default Moh333Register;