@ampath/esm-reports-app 1.0.0-next.10

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

@@ -0,0 +1,41 @@
+
+h3 {
+    text-align: center;
+}
+
+.container {
+    border: 1px solid #ccc;
+    margin: 0 2rem;
+    margin-top: 0.5px;
+}
+
+.tableContainer {
+    margin-left: 1rem;
+    margin-bottom: 1rem;
+}
+
+.sectionTitle {
+    margin-left: 1rem ;
+}
+
+.title {
+    text-align: center;
+    font-size: 1rem;
+    margin: 1rem;
+}
+.table {
+  width: auto;
+  border-collapse: collapse;
+  
+}
+
+.tableBordered td,
+.tableBordered th {
+  border: 1px solid black;
+  padding: 0.3rem;
+  font-size: small;
+}
+
+.tableStriped tbody tr:nth-of-type(odd) {
+  background-color: #f9f9f9;
+}

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

@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import ReportFiltersComponent from '../../common/report-filters/report-filters.component';
+
+import styles from './moh711.scss';
+import classNames from 'classnames';
+import { useSession } from '@openmrs/esm-framework';
+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';
+import GBVComponent from './sections/gbv.component';
+import FamilyPlanningComponent from './sections/family-planning.component';
+import CervicalCancerComponent from './sections/cervical-cancer.component';
+import PostAbortion from './sections/post-abortion.component';
+import ChanisComponent from './sections/chanis.component';
+import PNCComponent from './sections/pnc.component';
+import RehabilitationComponent from './sections/rehabilitation.component';
+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';
+
+const Moh711Report: React.FC = () => {
+  let errorMessage: string = '';
+  const [moh711Data, setMoh711Data] = useState<any>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const session = useSession();
+  const locationUuid = session?.sessionLocation?.uuid;
+  const fetchMoh711ReportData = async (filters: { startDate?: string; endDate?: string; month?: string }) => {
+    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 year = d.getFullYear();
+        const month = String(d.getMonth() + 1).padStart(2, '0');
+        const day = String(d.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+      };
+
+      startDate = formatLocalDate(start);
+      endDate = formatLocalDate(end);
+    }
+
+    const params = {
+      locationUuids: locationUuid || '',
+      startDate,
+      endDate,
+    };
+    try {
+      const data = await getMoh711(params);
+      const flatData = Object.assign({}, ...data.result);
+      setMoh711Data(flatData);
+      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)}`);
+    }
+  };
+  return (
+    <>
+      <ReportFiltersComponent
+        reportName="MOH-711 Report"
+        mode="monthly"
+        onGenerate={fetchMoh711ReportData}
+        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>
+      )}
+      <h5>
+        INTEGRATED PROGRAM SUMMARY REPORT FORM: REPRODUCTIVE AND CHILD HEALTH, MEDICAL AND REHABILITATION SERVICES
+      </h5>
+      <div className={styles.container}>
+        <div className={styles.left}>
+          <ANCComponent moh711Data={moh711Data} />
+          <GBVComponent moh711Data={moh711Data} />
+          <FamilyPlanningComponent moh711Data={moh711Data} />
+          <CervicalCancerComponent moh711Data={moh711Data} />
+          <PNCComponent moh711Data={moh711Data} />
+          <RehabilitationComponent moh711Data={moh711Data} />
+          <MedicalSocialWorkComponent moh711Data={moh711Data} />
+          <ReportCompiledByComponent />
+        </div>
+        <div className={styles.right}>
+          <MaternityComponent moh711Data={moh711Data} />
+          <PostAbortion moh711Data={moh711Data} />
+          <ChanisComponent moh711Data={moh711Data} />
+          <PhysiotherapyComponent moh711Data={moh711Data} />
+          <OtherComponent moh711Data={MaternityComponent} />
+          <TBScreeningComponent moh711Data={moh711Data} />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Moh711Report;

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

@@ -0,0 +1,71 @@
+
+h5 {
+    text-align: center;
+}
+
+.container {
+  margin: 2rem 2rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  padding: 0 2rem;
+
+  grid-template-areas:
+    "left right";
+}
+
+
+.left {
+  grid-area: left;
+}
+
+.right {
+  grid-area: right;
+}
+
+/* 📱 Stack on small screens */
+@media (max-width: 768px) {
+  .container {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "left"
+      "right";
+  }
+}
+
+.sectionTitle {
+    margin-left: 1rem ;
+}
+
+.title {
+    text-align: center;
+    font-size: 1rem;
+    margin: 1rem;
+}
+.table {
+  width: auto;
+  border-collapse: collapse;
+  
+}
+
+.tableBordered td,
+.tableBordered th {
+  border: 1px solid black;
+  padding: 0.3rem;
+  font-size: small;
+}
+
+.tableBordered th {
+    font-weight: bold;
+} 
+
+.tableStriped tbody tr:nth-of-type(odd) {
+  background-color: #f9f9f9;
+}
+
+.greyBackground {
+    background-color: #ccc;
+}
+.compiledBy {
+    width: 10rem
+}

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

@@ -0,0 +1,134 @@
+import React from 'react';
+
+import styles from '../moh711.scss';
+import classNames from 'classnames';
+
+interface ANCComponentProps {
+  moh711Data: any;
+}
+
+const ANCComponent: React.FC<ANCComponentProps> = ({ moh711Data }) => {
+  return (
+    <>
+      <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
+        <thead>
+          <tr>
+            <th colSpan={3}>A. ANC/PMTCT</th>
+            <th>Total</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td rowSpan={2}>No. of ANC Clients</td>
+            <td>New</td>
+            <td>{moh711Data.new_anc_clients}</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>Re-visit</td>
+            <td>{moh711Data.revisit_anc_clients}</td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td colSpan={2}>No. of Clients given IPT (1st Dose)</td>
+            <td>{moh711Data.first_ipt_dose}</td>
+          </tr>
+          <tr>
+            <td>4</td>
+            <td colSpan={2}>No. of Clients given IPT (2nd Dose)</td>
+            <td>{moh711Data.second_ipt_dose}</td>
+          </tr>
+          <tr>
+            <td>5</td>
+            <td colSpan={2}>No. of Clients given IPT (3rd Dose)</td>
+            <td>{moh711Data.third_ipt_dose}</td>
+          </tr>
+          <tr>
+            <td>6</td>
+            <td colSpan={2}>No. of Clients with Hb&lt;11g/dl</td>
+            <td>{moh711Data.Hb_less_11g}</td>
+          </tr>
+          <tr>
+            <td>7</td>
+            <td colSpan={2}>No. clients with 1st ANC contact at 12 or less weeks</td>
+            <td>{moh711Data.first_anc_contact_12_or_less_weeks}</td>
+          </tr>
+          <tr>
+            <td>8</td>
+            <td colSpan={2}>Pregnant women completing 4th ANC Contacts</td>
+            <td>{moh711Data.completing_4_anc_visits}</td>
+          </tr>
+          <tr>
+            <td>9</td>
+            <td colSpan={2}>No. of clients completed 8th ANC Contacts</td>
+            <td>{moh711Data.completing_8_anc_contact}</td>
+          </tr>
+          <tr>
+            <td>10</td>
+            <td colSpan={2}>No. of LLINs distributed to under 1 year</td>
+            <td>{moh711Data.llins_children_less_than_one}</td>
+          </tr>
+          <tr>
+            <td>11</td>
+            <td colSpan={2}>No. of LLINs distributed to ANC clients</td>
+            <td>{moh711Data.llins_anc_clients}</td>
+          </tr>
+          <tr>
+            <td>12</td>
+            <td rowSpan={2}>No. of clients</td>
+            <td>Tested for Syphilis</td>
+            <td>{moh711Data.anc_clients_tested_syphilis}</td>
+          </tr>
+          <tr>
+            <td>13</td>
+            <td>Positive (+ve)</td>
+            <td>{moh711Data.syphilis_positive}</td>
+          </tr>
+          <tr>
+            <td>14</td>
+            <td colSpan={2}>Total Women Done Breast Examination</td>
+            <td>{moh711Data.breast_exam}</td>
+          </tr>
+          <tr>
+            <td>15</td>
+            <td colSpan={2}>No. of adolescents (10-14 years) presenting with pregnancy at 1st ANC contact</td>
+            <td>{moh711Data.adolesc_10_14}</td>
+          </tr>
+          <tr>
+            <td>16</td>
+            <td colSpan={2}>No. of adolescents (15-19 years) presenting with pregnancy at 1st ANC contact</td>
+            <td>{moh711Data.adolesc_15_19}</td>
+          </tr>
+          <tr>
+            <td>17</td>
+            <td colSpan={2}>No. of youth (20-24 years) presenting with pregnancy at 1st ANC contact</td>
+            <td>{moh711Data.youth_20_24}</td>
+          </tr>
+          <tr>
+            <td>18</td>
+            <td colSpan={2}>No. of clients issued with Iron</td>
+            <td>{moh711Data.iron}</td>
+          </tr>
+          <tr>
+            <td>19</td>
+            <td colSpan={2}>No. of clients issued with Folic</td>
+            <td>{moh711Data.folic}</td>
+          </tr>
+          <tr>
+            <td>20</td>
+            <td colSpan={2}>No. of clients issued with Combined Ferrous Folate</td>
+            <td>{moh711Data.iron_and_folate}</td>
+          </tr>
+          <tr>
+            <td>21</td>
+            <td colSpan={2}>No. of pregnant women presenting in ANC with complication associated with FGM</td>
+            <td>{moh711Data.fgm_complications}</td>
+          </tr>
+        </tbody>
+      </table>
+    </>
+  );
+};
+
+export default ANCComponent;

package/src/reports/moh-711/sections/cervical-cancer.component.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+
+import styles from '../moh711.scss';
+import classNames from 'classnames';
+
+interface CervicalCancerComponentProps {
+  moh711Data: any;
+}
+
+const CervicalCancerComponent: React.FC<CervicalCancerComponentProps> = ({ moh711Data }) => {
+  return (
+    <>
+      <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
+        <thead>
+          <tr>
+            <th></th>
+            <th colSpan={4}>G. Cervical cancer screening</th>
+          </tr>
+          <tr>
+            <th></th>
+            <th className={styles.greyBackground}></th>
+            <th>&lt;25 yrs</th>
+            <th>25-49 Years</th>
+            <th>50+yrs</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>No. of Clients receiving VIA/VILI/HPV VILI/HPV</td>
+            <td>{moh711Data.via_villi_hpv_less_25}</td>
+            <td>{moh711Data.via_villi_hpv_25_49}</td>
+            <td>{moh711Data.via_villi_hpv_50_above}</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>No. screened for Pap smear</td>
+            <td>{moh711Data.pap_smear_less_25}</td>
+            <td>{moh711Data.pap_smear_25_49}</td>
+            <td>{moh711Data.pap_smear_50_above}</td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td>No. screend for HPV test</td>
+            <td>{moh711Data.hpv_test_less_25}</td>
+            <td>{moh711Data.hpv_test_25_49}</td>
+            <td>{moh711Data.hpv_test_50_above}</td>
+          </tr>
+          <tr>
+            <td>4</td>
+            <td>No. of clients with Positive VIA/VILI results</td>
+            <td>{moh711Data.positive_via_villi_less_25}</td>
+            <td>{moh711Data.positive_via_villi_25_49}</td>
+            <td>{moh711Data.positive_via_villi_50_above}</td>
+          </tr>
+          <tr>
+            <td>5</td>
+            <td>No. of clients with Positive Cytology result</td>
+            <td>{moh711Data.positive_cytology_less_25}</td>
+            <td>{moh711Data.positive_cytology_25_49}</td>
+            <td>{moh711Data.positive_cytology_50_above}</td>
+          </tr>
+          <tr>
+            <td>6</td>
+            <td>No. of clients with Positive HPV results</td>
+            <td>{moh711Data.positive_hpv_less_25}</td>
+            <td>{moh711Data.positive_hpv_25_49}</td>
+            <td>{moh711Data.positive_hpv_50_above}</td>
+          </tr>
+          <tr>
+            <td>7</td>
+            <td>No. of clients with suspicious cancer lessions</td>
+            <td>{moh711Data.suspicious_cancer_lessions_less_25}</td>
+            <td>{moh711Data.suspicious_cancer_lessions_25_49}</td>
+            <td>{moh711Data.suspicious_cancer_lessions_50_above}</td>
+          </tr>
+          <tr>
+            <td>8</td>
+            <td>No. of clients treated using Cryotherapy</td>
+            <td>{moh711Data.cryotherapy_treatment_less_25}</td>
+            <td>{moh711Data.cryotherapy_treatment_25_49}</td>
+            <td>{moh711Data.cryotherapy_treatment_50_above}</td>
+          </tr>
+          <tr>
+            <td>9</td>
+            <td>No. of clients treated using LEEP</td>
+            <td>{moh711Data.leep_treatment_less_25}</td>
+            <td>{moh711Data.leep_treatment_25_49}</td>
+            <td>{moh711Data.leep_treatment_50_above}</td>
+          </tr>
+          <tr>
+            <td>10</td>
+            <td>No of HIV positive clients screened</td>
+            <td>{moh711Data.hiv_positive_screened_cervical_cancer_less_25}</td>
+            <td>{moh711Data.hiv_positive_screened_cervical_cancer_25_49}</td>
+            <td>{moh711Data.hiv_positive_screened_cervical_cancer_50_above}</td>
+          </tr>
+        </tbody>
+      </table>
+    </>
+  );
+};
+
+export default CervicalCancerComponent;