@ampath/esm-reports-app 1.0.0-next.2 → 1.0.0-next.21

package/src/reports/moh-711/sections/post-abortion.component.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import styles from '../moh711.scss';
+import classNames from 'classnames';
+
+interface PostAbortionProps {
+  moh711Data: any;
+}
+
+const PostAbortion: React.FC<PostAbortionProps> = ({ moh711Data }) => {
+  return (
+    <>
+      <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
+        <thead>
+          <tr>
+            <th colSpan={2}>E. Post Abortion Care (PAC) Services</th>
+            <th>Total</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>No. of Adolescents (10-19yrs) Receiving PAC Services</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>No. of Youth 20-24 yrs receiving PAC services</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td>No. Receiving PAC (25 Years plus)</td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+    </>
+  );
+};
+
+export default PostAbortion;

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

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import styles from '../moh711.scss';
+import classNames from 'classnames';
+
+interface RehabilitationComponentProps {
+  moh711Data: any;
+}
+
+const RehabilitationComponent: React.FC<RehabilitationComponentProps> = ({ moh711Data }) => {
+  return (
+    <>
+      <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
+        <thead>
+          <tr>
+            <th></th>
+            <th colSpan={2}>I. Rehabilitation Services</th>
+          </tr>
+          <tr>
+            <th></th>
+            <th className={styles.greyBackground}></th>
+            <th>Total</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>Number Assessed</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>Number Treated</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td>Number Rehabilitated</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>4</td>
+            <td>Rehab referred for further Interventions</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>5</td>
+            <td>Number Integrated to Communities</td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+    </>
+  );
+};
+
+export default RehabilitationComponent;

package/src/reports/moh-711/sections/report-compiled-by.component.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import styles from '../moh711.scss';
+import classNames from 'classnames';
+
+const ReportCompiledByComponent: React.FC = () => {
+  return (
+    <>
+      <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
+        <thead>
+          <tr>
+            <th colSpan={3}>Report Compiled By:</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td></td>
+            <td>Name:</td>
+            <td className={styles.compiledBy}></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td>Designation:</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td>Date:</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td>Signature</td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+    </>
+  );
+};
+
+export default ReportCompiledByComponent;

package/src/reports/moh-711/sections/tb-screening.component.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import styles from '../moh711.scss';
+import classNames from 'classnames';
+
+interface TBScreeningProps {
+  moh711Data: any;
+}
+
+const TBScreeningComponent: React.FC<TBScreeningProps> = ({ moh711Data }) => {
+  return (
+    <>
+      <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
+        <thead>
+          <tr>
+            <th colSpan={2}>M. TB SCREENING</th>
+            <th>0 - 14 years</th>
+            <th>15 years +</th>
+            <th>Total</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>Total Number of people screened</td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>Total Number of presumptive TB cases</td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td>Total Number of already on TB treatment</td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>4</td>
+            <td>Total Number of people not screened</td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+    </>
+  );
+};
+
+export default TBScreeningComponent;

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

@@ -0,0 +1,152 @@
+import React, { useState } from 'react';
+import ReportFiltersComponent from '../../common/report-filters/report-filters.component';
+
+import styles from './moh717.scss';
+import classNames from 'classnames';
+import { useSession } from '@openmrs/esm-framework';
+import { getMoh717 } from '../../resources/moh-717.resource';
+import { Loading } from '@carbon/react';
+import OutpatientComponent from './sections/outpatient.component';
+import InpatientComponent from './sections/inpatient.component';
+import MaternityComponent from './sections/maternity.component';
+import OperationsComponent from './sections/operations.component';
+import OrthopaedicTraumaComponent from './sections/orthopaedic-trauma.component';
+import SpecialServicesComponent from './sections/special-services.component';
+import PharmacyComponent from './sections/pharmacy.component';
+import MortuaryComponent from './sections/mortuary.component';
+import MedicalRecordsComponent from './sections/medical-records.component';
+import FinanceComponent from './sections/finance.component';
+import PreparedbyComponent from './sections/preparedby.component';
+
+const Moh717Report: React.FC = () => {
+  let errorMessage: string = '';
+  const [moh717ReportData, setMoh717ReportData] = useState<any>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const session = useSession();
+  const locationUuid = session?.sessionLocation?.uuid;
+  const fetchMoh717ReportData = 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 getMoh717(params);
+      const flatData = Object.assign({}, ...data.result);
+      setMoh717ReportData(flatData);
+      setIsLoading(false);
+    } catch (error) {
+      setIsLoading(false);
+      errorMessage = error instanceof Error ? error.message : String(error);
+      throw new Error(`Failed to fetch MOH-717 report data: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  };
+  return (
+    <>
+      <ReportFiltersComponent
+        reportName="MOH-717 Report"
+        mode="monthly"
+        onGenerate={fetchMoh717ReportData}
+        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>
+      )}
+      <h3>Monthly Service Workload Report for Health Facilities</h3>
+      <div className={styles.location}>
+        <span>
+          County: <span className={styles.shortLine}></span>
+        </span>
+        <span>
+          Sub-County: <span className={styles.shortLine}></span>
+        </span>
+        <span>
+          Health Facility: <span className={styles.shortLine}></span>
+        </span>
+      </div>
+      <div className={styles.location}>
+        <span>
+          Month: <span className={styles.shortLine}></span>
+        </span>
+        <span>
+          Year: <span className={styles.shortLine}></span>
+        </span>
+        <span>
+          KMHFL Code: <span className={styles.shortLine}></span>
+        </span>
+      </div>
+      <div className={styles.container}>
+        <div className={styles.section}>
+          <OutpatientComponent moh717ReportData={moh717ReportData} />
+        </div>
+        <InpatientComponent moh717ReportData={moh717ReportData} />
+        <div className={styles.sectionContainer}>
+          <div className={styles.left}>
+            <MaternityComponent moh717ReportData={moh717ReportData} />
+          </div>
+          <div className={styles.right}>
+            <OperationsComponent moh717ReportData={moh717ReportData} />
+            <div className={styles.section}>
+              <OrthopaedicTraumaComponent moh717ReportData={moh717ReportData} />
+            </div>
+          </div>
+        </div>
+        <SpecialServicesComponent moh717ReportData={moh717ReportData} />
+        <div className={styles.sectionTwoContainer}>
+          <div className={styles.one}>
+            <PharmacyComponent moh717ReportData={moh717ReportData} />
+          </div>
+          <div className={styles.two}>
+            <MortuaryComponent moh717ReportData={moh717ReportData} />
+          </div>
+          <div className={styles.three}>
+            <MedicalRecordsComponent moh717ReportData={moh717ReportData} />
+          </div>
+        </div>
+
+        <FinanceComponent moh717ReportData={moh717ReportData} />
+        <div className={styles.preparedByContainer}>
+          <PreparedbyComponent />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Moh717Report;

package/src/reports/moh-717/moh717.scss

@@ -0,0 +1,150 @@
+
+h3 {
+    text-align: center;
+}
+
+.container {
+    margin: 0 2rem;
+    padding: 1rem;
+}
+
+.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;
+}
+
+.tableBordered th {
+    font-weight: bold;
+} 
+
+.tableStriped tbody tr:nth-of-type(odd) {
+  background-color: #f9f9f9;
+}
+.greyBackground {
+    background-color: #ccc;
+}
+
+.totals {
+    font-weight: bold;
+    color: #0437F2;
+}
+
+.alighnLeft {
+    text-align: left;
+}
+
+.rotateUp {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg); 
+  text-align: center;
+  white-space: nowrap;
+}
+
+.sectionContainer {
+   margin: 2rem 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+//   gap: 1rem;
+
+  grid-template-areas:
+    "left right";
+}
+
+.left {
+  grid-area: left;
+}
+
+.right {
+  grid-area: right;
+}
+
+.section{
+      margin: 2rem 0;
+}
+
+.sectionTwoContainer {
+  margin: 2rem 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 1rem;
+  padding: 0 2rem;
+  grid-template-areas:
+    "one two three";
+}
+
+.one {
+  grid-area: one;
+}
+
+.two {
+  grid-area: two;
+}
+
+.three {
+  grid-area: three;
+}
+
+
+/* 📱 Stack on small screens */
+@media (max-width: 768px) {
+  .sectionContainer {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "left"
+      "right";
+  }
+}
+
+.preparedByContainer {
+    margin: 2rem 0;
+}
+
+.location {
+  margin: 2rem;
+  display: flex;
+  flex-wrap: nowrap;     
+  align-items: center;
+  gap: 12px;             
+  white-space: nowrap;   
+}
+
+
+.line {
+  display: inline-block;
+  width: 150px;
+  border-bottom: 1px solid #000;
+  margin-left: 4px;
+}
+
+.shortLine {
+  display: inline-block;
+  width: 90px;
+  border-bottom: 1px solid #000;
+  margin-left: 4px;
+}
+
+span {
+    font-weight: bold;
+}

package/src/reports/moh-717/sections/finance.component.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import styles from '../moh717.scss';
+import classNames from 'classnames';
+
+interface FinanceComponentProps {
+  moh717ReportData: any;
+}
+
+const FinanceComponent: React.FC<FinanceComponentProps> = ({ moh717ReportData }) => {
+  return (
+    <>
+      <table className={classNames(`${styles.table}`, `${styles.tableBordered}`, `${styles.tableStriped}`)}>
+        <thead>
+          <tr>
+            <th colSpan={2}>G. FINANCE</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>G.1 Total Amount Collected (Kshs)</td>
+            <td>{}</td>
+            <td>G.3 Clients waived</td>
+            <td>{}</td>
+            <td>Clients exempted</td>
+            <td>{}</td>
+          </tr>
+          <tr>
+            <td>G.2 Total Amount Received</td>
+            <td>{}</td>
+            <td>G.4 Clients waived (Kshs)</td>
+            <td>{}</td>
+            <td>G.5 Clients Exempted (Kshs)</td>
+            <td>{}</td>
+          </tr>
+        </tbody>
+      </table>
+    </>
+  );
+};
+
+export default FinanceComponent;