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

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

@@ -0,0 +1,74 @@
+
+h3 {
+    text-align: center;
+}
+.tableContainer {
+    margin-left: 2rem;
+    margin-bottom: 2rem;
+    margin-top: 1rem;
+}
+
+.sectionTitle {
+    margin-left: 1rem ;
+}
+
+.table {
+  width: auto;
+  border-collapse: collapse;
+  
+}
+
+
+
+.tableBordered td,
+.tableBordered th {
+  border: 1px solid #ccc;
+  padding: 0.3rem;
+  font-size: small;
+}
+
+.tableBordered th {
+    font-weight: bold;
+} 
+
+.tableStriped tbody tr:nth-of-type(odd) {
+  background-color: #f9f9f9;
+}
+
+.rotateUp {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg); 
+}
+
+/*
+span {
+    font-weight: normal;
+    padding: 2px;
+}
+*/
+.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;
+}
+.buttonContainer {
+    margin: 2rem;
+}

package/src/reports/moh-745/registers/moh-412-register.component.tsx

@@ -0,0 +1,191 @@
+import { Button, Loading, Table, TableBody, TableHead, TableHeader, TableRow } from '@carbon/react';
+import React, { useEffect, useState } from 'react';
+
+import styles from '../moh-745.scss';
+import classNames from 'classnames';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { moh412Columns } from './type';
+import { getMoh412PatientList } from '../../../resources/moh-745.resource';
+
+const Moh412Register: React.FC = () => {
+  const navigate = useNavigate();
+  const [patientlist, setPatientList] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [searchParams] = useSearchParams();
+
+  const startDate = searchParams.get('startDate');
+  const endDate = searchParams.get('endDate');
+  const locationUuids = searchParams.get('locationUuids');
+  const indicator = searchParams.get('indicator');
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (!startDate || !endDate || !locationUuids || !indicator) return;
+
+      setIsLoading(true);
+
+      try {
+        const params = {
+          startDate,
+          endDate,
+          locationUuids,
+          indicator,
+        };
+
+        const data = await getMoh412PatientList(params);
+
+        setPatientList(data?.results.results || []);
+      } catch (error) {
+        console.error('Failed to fetch register data', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [startDate, endDate, locationUuids, indicator]);
+
+  function navigateBack() {
+    navigate('/moh-745');
+  }
+  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}`)}>
+          <TableHead>
+            <TableRow>
+              <TableHeader colSpan={3}>Month:</TableHeader>
+              <TableHeader colSpan={2}>Year</TableHeader>
+              <TableHeader></TableHeader>
+              <TableHeader></TableHeader>
+              <TableHeader></TableHeader>
+              <TableHeader></TableHeader>
+              <TableHeader colSpan={6}>CERVICAL CANCER</TableHeader>
+              <TableHeader colSpan={3}>Breast Cancer</TableHeader>
+              <TableHeader colSpan={2}>Colorectal Cancer</TableHeader>
+              <TableHeader></TableHeader>
+              <TableHeader></TableHeader>
+              <TableHeader></TableHeader>
+              <TableHeader></TableHeader>
+            </TableRow>
+            <TableRow>
+              <TableHeader colSpan={9}>Client Details</TableHeader>
+              <TableHeader colSpan={3}>Screening Methods and Results</TableHeader>
+              <TableHeader colSpan={3}>Pre-Cancer Treatment</TableHeader>
+              <TableHeader colSpan={3}>Methods and Results</TableHeader>
+              <TableHeader colSpan={2}>Methods and Results</TableHeader>
+              <TableHeader></TableHeader>
+              <TableHeader></TableHeader>
+              <TableHeader></TableHeader>
+              <TableHeader></TableHeader>
+            </TableRow>
+            <TableRow>
+              <TableHeader>
+                a)S/No
+                <br />
+                No
+              </TableHeader>
+              <TableHeader>
+                b)Visit <br />
+                Date
+              </TableHeader>
+              <TableHeader>
+                c)Visit <br />
+                Type
+              </TableHeader>
+              <TableHeader>
+                d)Client <br />
+                No
+              </TableHeader>
+              <TableHeader>e)Client Names</TableHeader>
+              <TableHeader>
+                f)Client's Phone <br />
+                Number
+              </TableHeader>
+              <TableHeader>
+                g)Client's <br /> Age
+              </TableHeader>
+              <TableHeader>
+                h)Location
+                <br />
+                Residence
+              </TableHeader>
+              <TableHeader>
+                i)Treatment
+                <br />
+                Suppoter's Phone
+                <br />
+                Number
+              </TableHeader>
+              <TableHeader>
+                j)Via or <br />
+                VIA/VILLI
+              </TableHeader>
+              <TableHeader>
+                k)Pap <br />
+                Smear
+              </TableHeader>
+              <TableHeader>
+                l)HPV Test
+                <br />
+                (over 30 years)
+              </TableHeader>
+              <TableHeader>m)cryotherapy</TableHeader>
+              <TableHeader>
+                n)Thermo-
+                <br />
+                ablation
+              </TableHeader>
+              <TableHeader>o)LEEP</TableHeader>
+              <TableHeader>p)CBE</TableHeader>
+              <TableHeader>q)Ultrasound</TableHeader>
+              <TableHeader>r)Mammogram</TableHeader>
+              <TableHeader>s)Colonoscopy</TableHeader>
+              <TableHeader>t)FOBT</TableHeader>
+              <TableHeader>u)HIV Status</TableHeader>
+              <TableHeader>
+                v)Referral <br />
+                To/From
+              </TableHeader>
+              <TableHeader>
+                w)Follow-
+                <br />
+                up Date
+              </TableHeader>
+              <TableHeader>
+                Remarks(e.g Colposcopy done,
+                <br />
+                Cervicography results, Call
+                <br />
+                Client for follow up, Return for <br />
+                post-treatment screening, <br />
+                Communicate with the referral site)
+              </TableHeader>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {patientlist?.length > 0 ? (
+              patientlist.map((patient, index) => (
+                <TableRow key={index}>
+                  {moh412Columns.map((col) => (
+                    <td key={col}>{col === 'serial_no' ? index + 1 : (patient?.[col] ?? '')}</td>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <td colSpan={moh412Columns.length}>No data available</td>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </>
+  );
+};
+export default Moh412Register;

package/src/reports/moh-745/registers/type.ts

@@ -0,0 +1,30 @@
+export const moh412Columns = [
+  'serial_no',
+  'visit_date',
+  'visit_type',
+  'client_no',
+  'full_names',
+  'phone_number',
+  'age',
+  'location_residence',
+  'treatment_supporter_phone_number',
+
+  'via_villi',
+  'pap_smear',
+  'hpv',
+  'cryotherapy',
+  'thermocoagulation',
+  'leep',
+
+  'cbe',
+  'ultrasound',
+  'mammogram',
+  'colonoscopy',
+  'fobt',
+  'hiv_status',
+
+  'referral_from',
+  'referral_to',
+  'follow_up_date',
+  'remarks',
+];

package/src/reports/table-wrapper/table-row-mapper.component.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { TableRow, TableCell } from "@carbon/react";
+import styles from './table-wrapper.scss';
+import { navigate } from "@openmrs/esm-framework";
+
+interface TableRowMapperProps {
+    tableRows: {
+        tableCells: Array<{
+            key: string;
+            label: any;
+            strong: boolean;
+            colSpan: number;
+            rowSpan: number;
+        }>
+    }[],
+    data?: any,
+    redirectTo?: string,
+    locationUuids?: string,
+    startDate?: string,
+    endDate?: string
+    report?: string,
+}
+
+const TableRowMapper: React.FC<TableRowMapperProps> = ({ tableRows, data, redirectTo = "home/reports/moh-240", locationUuids, startDate, endDate, report = "moh-706" }) => {
+    return <>
+        {tableRows.map((tR) => (
+            <TableRow>
+                {tR.tableCells.map((tC, i) => {
+                    const value = data ? data[tC.key] : "";
+
+                    const onClick = () => {
+                        if (!tC.label && tC.key) {
+                            const params = new URLSearchParams();
+                            if (locationUuids) params.append('locationUuids', locationUuids);
+                            if (startDate) params.append('startDate', startDate);
+                            if (endDate) params.append('endDate', endDate);
+                            if (tC.key) params.append('indicators', tC.key);
+                            params.append('report', report);
+                            navigate({ to: `${redirectTo}?${params.toString()}` });
+                        }
+                    };
+
+                    return <TableCell className={styles.dataCell} colSpan={tC.colSpan} key={i} onClick={onClick} {...({ rowSpan: tC.rowSpan } as any)}>
+                        {tC.label ? (tC.strong ? <strong>{tC.label}</strong> : tC.label) : value}
+                    </TableCell>
+
+                })}
+            </TableRow>
+        ))}
+    </>
+}
+
+export default TableRowMapper;

package/src/reports/table-wrapper/table-wrapper.component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Table, TableBody } from '@carbon/react';
+import styles from './table-wrapper.scss';
+
+interface TableWrapperProps {
+    children: React.ReactNode;
+}
+
+const TableWrapper: React.FC<TableWrapperProps> = ({ children }) => {
+    return <>
+        <div className={styles.tableWrapper}>
+            <Table size="sm" className={styles.tableComponent}>
+                <TableBody>
+                    {children}
+                </TableBody>
+            </Table>
+        </div>
+    </>
+}
+
+export default TableWrapper;

package/src/reports/table-wrapper/table-wrapper.scss

@@ -0,0 +1,31 @@
+.tableWrapper {
+  overflow-x: auto;
+  border-radius: 4px;
+  padding: 5px;
+}
+
+.tableContainer {
+  width: 100%;
+  border-collapse: collapse;
+
+  thead {
+    background-color: #f4f4f4;
+  }
+
+  tbody {
+    background-color: white;
+  }
+}
+
+.dataCell {
+  padding: 0.01rem;
+  border: 1px solid #d0d0d0;
+  text-align: center;
+  height: 20px;
+  min-width: 50px;
+  font-size: small;
+
+  &:hover {
+    background-color: #f0f7ff;
+  }
+}

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

@@ -0,0 +1,86 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { getEtlBaseUrl } from '../utils/get-base-url';
+
+interface Moh505Params {
+  locationUuids: string;
+  startDate?: string;
+  endDate?: string;
+}
+
+interface Moh505Response {
+  result: Array<Record<string, unknown>>;
+}
+
+interface Moh505PatientListParams {
+  locationUuids: string;
+  startDate?: string;
+  endDate?: string;
+  indicators: string;
+}
+
+interface Moh505PatientListResponse {
+  result: Array<Record<string, unknown>>;
+}
+
+export async function getMoh505(params: Moh505Params): Promise<Array<Record<string, unknown>>> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const url = `${etlBaseUrl}/moh-505`;
+  const queryparams = {
+    locationUuids: params.locationUuids || '',
+    startDate: params.startDate || '',
+    endDate: params.endDate || '',
+  };
+  const queryString = new URLSearchParams(
+    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
+  ).toString();
+  try {
+    const response = await openmrsFetch(`${url}?${queryString}`);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to fetch MOH-505 report: ${response.status} - ${errorText}`);
+    }
+
+    const data = await response.json();
+
+    if (!Array.isArray(data.result)) {
+      throw new Error('Invalid MOH-505 response format: missing result array.');
+    }
+
+    return data.result;
+  } catch (error: any) {
+    throw new Error(`An error occurred while fetching the MOH-505 report: ${error.message}`);
+  }
+}
+
+export async function getMoh505PatientList(params: Moh505PatientListParams): Promise<Array<Record<string, unknown>>> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const url = `${etlBaseUrl}/moh-505/patient-list`;
+  const queryparams = {
+    locationUuids: params.locationUuids || '',
+    startDate: params.startDate || '',
+    endDate: params.endDate || '',
+    indicators: params.indicators || '',
+  };
+  const queryString = new URLSearchParams(
+    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
+  ).toString();
+  try {
+    const response = await openmrsFetch(`${url}?${queryString}`);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to fetch MOH-505 patient list: ${response.status} - ${errorText}`);
+    }
+
+    const data = await response.json();
+
+    if (!Array.isArray(data.result)) {
+      throw new Error('Invalid MOH-505 patient list response format: missing result array.');
+    }
+
+    return data.result;
+  } catch (error: any) {
+    throw new Error(`An error occurred while fetching the MOH-505 patient list: ${error.message}`);
+  }
+}

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

@@ -0,0 +1,117 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { getEtlBaseUrl } from '../utils/get-base-url';
+
+interface Moh710Params {
+  locationUuids: string;
+  startDate?: string;
+  endDate?: string;
+  indicator?: string | string[];
+}
+
+export async function getMoh705a(params: Moh710Params): Promise<any> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const url = `${etlBaseUrl}/moh-705a`;
+  const queryparams = {
+    locationUuids: params.locationUuids || '',
+    startDate: params.startDate || '',
+    endDate: params.endDate || '',
+  };
+  const queryString = new URLSearchParams(
+    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
+  ).toString();
+  try {
+    const response = await openmrsFetch(`${url}?${queryString}`);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to fetch dashboard summary: ${response.status} - ${errorText}`);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error: any) {
+    throw new Error(`An error occurred while fetching the MOH-710 report: ${error.message}`);
+  }
+}
+
+export async function getMoh705aPatientList(params: Moh710Params): Promise<any> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const url = `${etlBaseUrl}/moh-705a-patient-list`;
+  const queryparams = {
+    locationUuids: params.locationUuids || '',
+    startDate: params.startDate || '',
+    endDate: params.endDate || '',
+    indicator: Array.isArray(params.indicator) ? params.indicator.join(',') : params.indicator || '',
+    limit: '300',
+  };
+  const queryString = new URLSearchParams(
+    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
+  ).toString();
+  try {
+    const response = await openmrsFetch(`${url}?${queryString}`);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to fetch patient list: ${response.status} - ${errorText}`);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error: any) {
+    throw new Error(`An error occurred while fetching the MOH-705 patient list: ${error.message}`);
+  }
+}
+
+export async function getMoh705b(params: Moh710Params): Promise<any> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const url = `${etlBaseUrl}/moh-705b`;
+  const queryparams = {
+    locationUuids: params.locationUuids || '',
+    startDate: params.startDate || '',
+    endDate: params.endDate || '',
+  };
+  const queryString = new URLSearchParams(
+    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
+  ).toString();
+  try {
+    const response = await openmrsFetch(`${url}?${queryString}`);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to fetch dashboard summary: ${response.status} - ${errorText}`);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error: any) {
+    throw new Error(`An error occurred while fetching the MOH-710 report: ${error.message}`);
+  }
+}
+
+export async function getMoh705bPatientList(params: Moh710Params): Promise<any> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const url = `${etlBaseUrl}/moh-705b-patient-list`;
+  const queryparams = {
+    locationUuids: params.locationUuids || '',
+    startDate: params.startDate || '',
+    endDate: params.endDate || '',
+    indicator: Array.isArray(params.indicator) ? params.indicator.join(',') : params.indicator || '',
+    limit: '300',
+  };
+  const queryString = new URLSearchParams(
+    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
+  ).toString();
+  try {
+    const response = await openmrsFetch(`${url}?${queryString}`);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to fetch patient list: ${response.status} - ${errorText}`);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error: any) {
+    throw new Error(`An error occurred while fetching the MOH-705 patient list: ${error.message}`);
+  }
+}

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

@@ -0,0 +1,86 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { getEtlBaseUrl } from '../utils/get-base-url';
+
+interface Moh706Params {
+  locationUuids: string;
+  startDate?: string;
+  endDate?: string;
+}
+
+interface Moh706Response {
+  result: Array<Record<string, unknown>>;
+}
+
+interface Moh706PatientListParams {
+  locationUuids: string;
+  startDate?: string;
+  endDate?: string;
+  indicators: string;
+}
+
+interface Moh706PatientListResponse {
+  result: Array<Record<string, unknown>>;
+}
+
+export async function getMoh706(params: Moh706Params): Promise<Array<Record<string, unknown>>> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const url = `${etlBaseUrl}/lab-706`;
+  const queryparams = {
+    locationUuids: params.locationUuids || '',
+    startDate: params.startDate || '',
+    endDate: params.endDate || '',
+  };
+  const queryString = new URLSearchParams(
+    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
+  ).toString();
+  try {
+    const response = await openmrsFetch(`${url}?${queryString}`);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to fetch MOH-706 report: ${response.status} - ${errorText}`);
+    }
+
+    const data = await response.json();
+
+    if (!Array.isArray(data.result)) {
+      throw new Error('Invalid MOH-706 response format: missing result array.');
+    }
+
+    return data.result;
+  } catch (error: any) {
+    throw new Error(`An error occurred while fetching the MOH-706 report: ${error.message}`);
+  }
+}
+
+export async function getMoh706PatientList(params: Moh706PatientListParams): Promise<Array<Record<string, unknown>>> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const url = `${etlBaseUrl}/lab-706/patient-list`;
+  const queryparams = {
+    locationUuids: params.locationUuids || '',
+    startDate: params.startDate || '',
+    endDate: params.endDate || '',
+    indicators: params.indicators || '',
+  };
+  const queryString = new URLSearchParams(
+    Object.fromEntries(Object.entries(queryparams).filter(([_, v]) => v !== undefined && v !== null)),
+  ).toString();
+  try {
+    const response = await openmrsFetch(`${url}?${queryString}`);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to fetch MOH-706 patient list: ${response.status} - ${errorText}`);
+    }
+
+    const data = await response.json();
+
+    if (!Array.isArray(data.result)) {
+      throw new Error('Invalid MOH-706 patient list response format: missing result array.');
+    }
+
+    return data.result;
+  } catch (error: any) {
+    throw new Error(`An error occurred while fetching the MOH-706 patient list: ${error.message}`);
+  }
+}