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

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

@@ -0,0 +1,54 @@
+import { DataTable, type DataTableHeader, type DataTableRow, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@carbon/react";
+import React from "react";
+
+interface DatatableWrapperProps {
+    rows: Omit<DataTableRow<any[]>, "cells">[];
+    headers: DataTableHeader[];
+    subHeaders?: string[];
+}
+
+const DatatableWrapper: React.FC<DatatableWrapperProps> = ({ rows, headers, subHeaders = [] }) => {
+    return <DataTable rows={rows} headers={headers}>
+        {({
+            rows,
+            headers,
+            getTableProps,
+            getHeaderProps,
+            getRowProps,
+            getCellProps,
+        }) => (
+            <Table {...getTableProps()}>
+                <TableHead>
+                    <TableRow>
+                        {headers.map((header) => (
+                            <TableHeader {...getHeaderProps({ header })}>
+                                {header.header}
+                            </TableHeader>
+                        ))}
+                    </TableRow>
+                    {
+                        (subHeaders && subHeaders.length) &&
+                        <TableRow>
+                            {subHeaders.map((head, i) => (
+                                <TableHeader key={i}>
+                                    {head}
+                                </TableHeader>
+                            ))}
+                        </TableRow>
+                    }
+                </TableHead>
+                <TableBody>
+                    {rows.map((row) => (
+                        <TableRow {...getRowProps({ row })}>
+                            {row.cells.map((cell) => (
+                                <TableCell {...getCellProps({ cell })}>{cell.value}</TableCell>
+                            ))}
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        )}
+    </DataTable>
+}
+
+export default DatatableWrapper;

package/src/reports/moh-240/moh-240-header.component.tsx

@@ -0,0 +1,61 @@
+import React, { useMemo } from "react";
+import TableWrapper from "../table-wrapper/table-wrapper.component";
+import TableRowMapper from "../table-wrapper/table-row-mapper.component";
+import { getCell } from "../../utils/utils";
+import styles from './moh-240.scss';
+
+const MOH240Header: React.FC = () => {
+    const tableRows = useMemo(() => {
+        return [
+            {
+                tableCells: [
+                    getCell("", "County:", 1, 1, true),
+                    getCell("", "", 3),
+                ],
+            },
+            {
+                tableCells: [
+                    getCell("", "Sub-County:", 1, 1, true),
+                    getCell("", "", 3),
+                ],
+            },
+            {
+                tableCells: [
+                    getCell("", "Health Facility:", 1, 1, true),
+                    getCell("", "", 3),
+                ],
+            },
+            {
+                tableCells: [
+                    getCell("", "KMHFL Code:", 1, 1, true),
+                    getCell("", "", 3),
+                ],
+            },
+            {
+                tableCells: [
+                    getCell("", "Type:", 1, 1, true),
+                    getCell("", ""),
+                    getCell("", "Man. Agency:", 1, 1, true),
+                    getCell("", ""),
+                ],
+            },
+            {
+                tableCells: [
+                    getCell("", "Start date:", 1, 1, true),
+                    getCell("", ""),
+                    getCell("", "End date:", 1, 1, true),
+                    getCell("", ""),
+                ],
+            },
+        ];
+    }, []);
+
+    return <div className={styles.headerSection}>
+        <h3>Laboratory (LAB) Register MOH 240</h3>
+        <TableWrapper>
+            <TableRowMapper tableRows={tableRows} />
+        </TableWrapper>
+    </div>
+}
+
+export default MOH240Header;

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

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import { Button, Loading } from '@carbon/react';
+import Moh240Register from "./sub-reports/moh-240-register.component";
+import Moh240PageSummary from "./sub-reports/page-summary.component";
+import { getMoh706PatientList } from "../../resources/moh-706.resource";
+import { getMoh505PatientList } from "../../resources/moh-505.resource";
+import MOH240Header from "./moh-240-header.component";
+import styles from "./moh-240.scss";
+import { navigate } from "@openmrs/esm-framework";
+
+const Moh240Report: React.FC = () => {
+    const [searchParams] = useSearchParams();
+    const [patientList, setPatientList] = useState<any[]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [errorMessage, setErrorMessage] = useState<string>('');
+    const [indicator, setIndicator] = useState<string>('');
+
+    useEffect(() => {
+        const locationUuids = searchParams.get('locationUuids');
+        const startDate = searchParams.get('startDate');
+        const endDate = searchParams.get('endDate');
+        const indicators = searchParams.get('indicators');
+        const report = searchParams.get('report');
+
+        if (locationUuids && startDate && endDate && indicators) {
+            setIndicator(indicators);
+            fetchPatientList({ locationUuids, startDate, endDate, indicators, report: report || 'moh-706' });
+        }
+    }, [searchParams]);
+
+    const fetchPatientList = async (params: { locationUuids: string; startDate: string; endDate: string; indicators: string; report: string }) => {
+        setIsLoading(true);
+        setErrorMessage('');
+        try {
+            let result;
+            if (params.report === 'moh-505') {
+                result = await getMoh505PatientList(params);
+            } else {
+                result = await getMoh706PatientList(params);
+            }
+            setPatientList(result);
+        } catch (error: any) {
+            setErrorMessage(error instanceof Error ? error.message : String(error));
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const navigateBack = () => {
+        const report = searchParams.get('report');
+        const locationUuids = searchParams.get('locationUuids');
+        const startDate = searchParams.get('startDate');
+        const endDate = searchParams.get('endDate');
+
+        const params = new URLSearchParams();
+        if (locationUuids) params.append('locationUuids', locationUuids);
+        if (startDate) params.append('startDate', startDate);
+        if (endDate) params.append('endDate', endDate);
+        navigate({ to: `home/reports/${report}?${params.toString()}` });
+    }
+
+    return (
+        <>
+            <div className={styles.buttonContainer}>
+                <Button onClick={navigateBack}>Back</Button>
+            </div>
+            {isLoading && <Loading description="Fetching patient list...." />}
+            {!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 patient list. Please try again.
+                    </h4>
+                    <p>
+                        <small>{errorMessage}</small>
+                    </p>
+                </div>
+            )}
+
+            <MOH240Header />
+            <Moh240Register patientList={patientList} indicator={indicator} />
+            <Moh240PageSummary />
+        </>
+    );
+}
+
+export default Moh240Report;

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

@@ -0,0 +1,11 @@
+.headerSection {
+  padding: 15px;
+}
+
+.buttonContainer {
+  margin: 1rem;
+}
+
+.wrapper {
+  margin: 1rem;
+}

package/src/reports/moh-240/sub-reports/moh-240-register.component.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import DatatableWrapper from "../../datatable-wrapper/datatable-wrapper.component";
+import styles from "../moh-240.scss";
+interface Moh240RegisterProps {
+    patientList?: any[];
+    indicator?: string;
+}
+
+const Moh240Register: React.FC<Moh240RegisterProps> = ({ patientList = [], indicator = '' }) => {
+    const headers = [
+        { key: 'date', header: 'Date (DD/MM/YYYY)' },
+        { key: 'opd_ip_ref_no', header: 'OPD / IPD Ref. No.' },
+        { key: 'lab_no', header: 'Lab. No. (new client)' },
+        { key: 'revisit_no', header: 'Revisit No.' },
+        { key: 'full_name', header: 'Full Names (Three names)' },
+        { key: 'age', header: 'Age' },
+        { key: 'sex', header: 'Sex' },
+        { key: 'county_sub_county', header: 'County / Sub County' },
+        { key: 'village_estate_landmark', header: 'Village / Estate / Landmark' },
+        { key: 'telephone_number', header: 'Telephone Number' },
+        { key: 'clinical_diagnosis', header: 'Clinical Diagnosis' },
+        { key: 'prior_treatment', header: 'Prior Treatment' },
+        { key: 'type_of_specimen', header: 'Type of Specimen' },
+        { key: 'condition_of_specimen', header: 'Condition of Specimen' },
+        { key: 'investigation_required', header: 'Investigation Required' },
+        { key: 'test_datetime', header: 'Date Sample Collected' },
+        { key: 'date_sample_received', header: 'Date Sample Received' },
+        { key: 'clinician_name', header: 'Clinician Name' },
+        { key: 'date_sample_analysed', header: 'Date Sample Analysed' },
+        { key: 'results', header: 'Results' },
+        { key: 'date_results_dispatched', header: 'Date Results Dispatched' },
+        { key: 'amount_charged', header: 'Amount Charged' },
+        { key: 'receipt_number', header: 'Receipt Number' },
+        { key: 'referrals', header: 'Referrals (From Other HF / To Other HF / 3rd Tier Reference Laboratories)' },
+        { key: 'comments', header: 'Comments' },
+        { key: 'testing_officer', header: 'Name of Analysing/Testing Officer' },
+        { key: 'signature', header: 'Signature' }
+    ];
+
+    const getResultField = (ind: string) => {
+        if (ind.startsWith('min_') || ind.startsWith('max_')) {
+            return ind.substring(4);
+        }
+        if (ind.startsWith('total_')) {
+            return ind.substring(6);
+        }
+        if (ind.startsWith('positive_')) {
+            return ind.substring(9);
+        }
+        return ind;
+    };
+
+    const resultField = getResultField(indicator);
+
+    const subHeaders = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'AA'];
+
+    const rows = patientList.map((patient, index) => {
+        const row: any = {};
+        headers.forEach(header => {
+            if (header.key === 'results') {
+                row[header.key] = patient[resultField] || '';
+            } else {
+                row[header.key] = patient[header.key] || '';
+            }
+            row["id"] = header.key + index;
+        });
+        return row;
+    });
+
+    return <div className={styles.wrapper}>
+        <DatatableWrapper headers={headers} rows={rows} subHeaders={subHeaders} />
+    </div>
+}
+
+export default Moh240Register;

package/src/reports/moh-240/sub-reports/page-summary.component.tsx

@@ -0,0 +1,98 @@
+import React, { useMemo } from "react";
+import TableWrapper from "../../table-wrapper/table-wrapper.component";
+import TableRowMapper from "../../table-wrapper/table-row-mapper.component";
+import { getCell } from "../../../utils/utils";
+import styles from "../moh-240.scss";
+
+const Moh240PageSummary: React.FC = () => {
+    const tableRows = useMemo(() => {
+        return [
+            {
+                tableCells: [
+                    getCell("", "Page Summary", 8, 1, true),
+                ]
+            },
+            {
+                tableCells: [
+                    getCell("", "Malaria Testing", 3, 1, true),
+                    getCell("", "Type of test", 2, 1, true),
+                    getCell("", "Referrals", 3, 1, true),
+                ]
+            },
+            {
+                tableCells: [
+                    getCell("", "", 1, 2, true),
+                    getCell("", "Number", 2, 1, true),
+                    getCell("", "", 1, 2, true),
+                    getCell("", "Number", 1, 2, true),
+                    getCell("", "", 1, 1, true),
+                    getCell("", "Number", 2, 1, true),
+                ]
+            },
+            {
+                tableCells: [
+                    ,
+                    getCell("", "OPD", 1, 1, true),
+                    getCell("", "IP", 1, 1, true),
+                    ,
+                    ,
+                    getCell(),
+                    getCell("", "Routine", 1, 1, true),
+                    getCell("", "Specialized", 1, 1, true),
+                ]
+            },
+            {
+                tableCells: [
+                    getCell("", "Malaria BS (Under five years)"),
+                    getCell(),
+                    getCell(),
+                    getCell("", "No. of Routine tests", 1, 2),
+                    getCell("", "", 1, 2),
+                    getCell("", "From Other HF"),
+                    getCell(),
+                    getCell()
+                ]
+            },
+            {
+                tableCells: [
+                    getCell("", "Malaria BS (5 years and above)"),
+                    getCell(),
+                    getCell(),
+                    ,
+                    ,
+                    getCell("", "To Other HF"),
+                    getCell(),
+                    getCell(),
+                ]
+            },
+            {
+                tableCells: [
+                    getCell("", "Malaria Rapid Diagnostic Tests (Under five years)"),
+                    getCell(),
+                    getCell(),
+                    getCell("", "No. of Special tests", 1, 2),
+                    getCell("", "", 1, 2),
+                    getCell("", "To Reference Laboratories", 1, 2),
+                    getCell("", "", 1, 2),
+                    getCell("", "", 1, 2)
+                ]
+            },
+            {
+                tableCells: [
+                    getCell("", "Malaria Rapid Diagnostic Tests (5 years and above)"),
+                    getCell(),
+                    getCell()
+                ]
+            },
+        ]
+    }, []);
+
+
+    return <div className={styles.wrapper}>
+        <TableWrapper>
+            <TableRowMapper tableRows={tableRows} />
+        </TableWrapper>
+    </div>
+}
+
+export default Moh240PageSummary;

package/src/reports/moh-505/moh-505-header.component.tsx

@@ -0,0 +1,62 @@
+import React, { useMemo } from "react";
+import TableWrapper from "../table-wrapper/table-wrapper.component";
+import TableRowMapper from "../table-wrapper/table-row-mapper.component";
+import { getCell } from "../../utils/utils";
+import styles from './moh-505.scss';
+
+const MOH505Header: React.FC = () => {
+    const tableRows = useMemo(() => {
+        return [
+            {
+                tableCells: [
+                    getCell("", "County:", 1, 1, true),
+                    getCell("", "", 3),
+                ],
+            },
+            {
+                tableCells: [
+                    getCell("", "Sub-County:", 1, 1, true),
+                    getCell("", "", 3),
+                ],
+            },
+            {
+                tableCells: [
+                    getCell("", "Health Facility:", 1, 1, true),
+                    getCell("", "", 3),
+                ],
+            },
+            {
+                tableCells: [
+                    getCell("", "KMHFL code:", 1, 1, true),
+                    getCell("", "", 3),
+                ],
+            },
+            {
+                tableCells: [
+                    getCell("", "Facility Type:", 1, 1, true),
+                    getCell("", ""),
+                    getCell("", "Man. Agency:", 1, 1, true),
+                    getCell("", ""),
+                ],
+            },
+            {
+                tableCells: [
+                    getCell("", "Start date:", 1, 1, true),
+                    getCell("", ""),
+                    getCell("", "End date:", 1, 1, true),
+                    getCell("", ""),
+                ],
+            },
+        ];
+    }, []);
+
+    return <div className={styles.headerSection}>
+        <h3>MOH 505 IDSR</h3>
+        <h3>Weekly Epidemic Monitoring Form</h3>
+        <TableWrapper>
+            <TableRowMapper tableRows={tableRows} />
+        </TableWrapper>
+    </div>
+}
+
+export default MOH505Header;