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

package/src/common/report-filters/report-filters.component.tsx

@@ -1,4 +1,3 @@
-import { ArrowLeft } from '@carbon/react/icons';
 import { useNavigate } from 'react-router-dom';
 import React from 'react';
 import { Button } from '@carbon/react';
@@ -12,6 +11,7 @@ interface ReportFiltersComponentProps {
   onGenerate?: (filters: { startDate?: string; endDate?: string; month?: string }) => void;
   isLoding?: boolean;
 }
+
 const ReportFiltersComponent: React.FC<ReportFiltersComponentProps> = ({
   reportName,
   mode = 'daily',
@@ -35,28 +35,43 @@ const ReportFiltersComponent: React.FC<ReportFiltersComponentProps> = ({
     return `${year}-${month}`;
   };
 
+  const [activeTab, setActiveTab] = React.useState<'monthly' | 'custom'>('monthly');
+
   const [startDateString, setStartDateString] = React.useState<string>(getToday());
   const [endDateString, setEndDateString] = React.useState<string>(getToday());
   const [monthString, setMonthString] = React.useState<string>(getPreviousMonth());
+
   const [selectedFacility, setSelectedFacility] = React.useState<string>('');
   const [facility, setFacility] = React.useState<string>('Select Facility');
 
   const generateReport = () => {
     if (onGenerate) {
       const filters: { startDate?: string; endDate?: string; month?: string } = {};
+
       if (mode === 'daily') {
         filters.startDate = startDateString;
         filters.endDate = endDateString;
-      } else if (mode === 'monthly') {
-        filters.month = monthString;
       }
+
+      if (mode === 'monthly') {
+        if (activeTab === 'monthly') {
+          filters.month = monthString;
+        } else {
+          filters.startDate = startDateString;
+          filters.endDate = endDateString;
+        }
+      }
+
       onGenerate(filters);
     }
   };
+
   return (
     <>
       <div className={styles.titleContainer}>
-        <ArrowLeft className={styles.backIcon} onClick={() => navigate(-1)} />
+        <Button className={styles.backIcon} onClick={() => navigate('/')}>
+          Back
+        </Button>
         <h2 className={styles.title}>{reportName}</h2>
       </div>
       <div className={styles.filtersContainer}>
@@ -82,11 +97,31 @@ const ReportFiltersComponent: React.FC<ReportFiltersComponentProps> = ({
             />
           </div>
         )}
+
         {mode === 'monthly' && (
           <div>
-            <div>
+            {/* Tabs */}
+            <div className={styles.tabsContainer}>
+              <Button
+                className={activeTab === 'monthly' ? styles.activeTab : styles.tab}
+                onClick={() => setActiveTab('monthly')}
+              >
+                Monthly
+              </Button>
+
+              <Button
+                className={activeTab === 'custom' ? styles.activeTab : styles.tab}
+                onClick={() => setActiveTab('custom')}
+              >
+                Custom
+              </Button>
+            </div>
+
+            {/* Monthly tab */}
+            {activeTab === 'monthly' && (
               <div>
                 <label htmlFor="month">Month:</label>
+
                 <input
                   id="month"
                   type="month"
@@ -95,13 +130,38 @@ const ReportFiltersComponent: React.FC<ReportFiltersComponentProps> = ({
                   onChange={(e) => setMonthString(e.target.value)}
                 />
               </div>
-            </div>
-            <div className={styles.clearFix}></div>
+            )}
+
+            {/* Custom tab */}
+            {activeTab === 'custom' && (
+              <div className={styles.dateContainer}>
+                <label htmlFor="customStartDate">Start Date:</label>
+                <label htmlFor="customEndDate">End Date:</label>
+
+                <input
+                  id="customStartDate"
+                  type="date"
+                  className={styles.input}
+                  value={startDateString}
+                  onChange={(e) => setStartDateString(e.target.value)}
+                />
+
+                <input
+                  id="customEndDate"
+                  type="date"
+                  className={styles.input}
+                  value={endDateString}
+                  onChange={(e) => setEndDateString(e.target.value)}
+                />
+              </div>
+            )}
           </div>
         )}
+
         {isFacility === 'true' && (
           <div>
             <label>Facility</label>
+
             <select
               className={styles.input}
               name="selectedFacility"
@@ -113,6 +173,7 @@ const ReportFiltersComponent: React.FC<ReportFiltersComponentProps> = ({
           </div>
         )}
       </div>
+
       {!isLoding && (
         <div className={styles.buttonContainer}>
           <Button onClick={generateReport}>Generate Report</Button>

package/src/common/report-filters/report-filters.scss

@@ -46,4 +46,46 @@
     justify-content: flex-end;
     gap: 10px;
     margin: 0 2rem;
+}
+
+.tabsContainer {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  align-items: center;
+}
+
+.tab,
+.activeTab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.5rem;
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  min-height: 2.5rem;
+
+  background: transparent;
+  color: green;
+
+  border: 1px solid black; 
+  cursor: pointer;
+}
+
+.activeTab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  min-height: 2.5rem;
+
+  background: green;
+  color: white;
+
+  border: 1px solid black;
 }

package/src/dashboard/reports-dasboard.tsx

@@ -18,6 +18,27 @@ const ReportsDashboard: React.FC<ReportsDashboardProps> = () => {
         <ClickableTile onClick={() => navigate('/moh-717')} className={styles.tile}>
           MOH-717 REPORT
         </ClickableTile>
+        <ClickableTile onClick={() => navigate('/moh-706')} className={styles.tile}>
+          MOH-706 REPORT
+        </ClickableTile>
+        <ClickableTile onClick={() => navigate('/moh-505')} className={styles.tile}>
+          MOH-505 REPORT
+        </ClickableTile>
+        <ClickableTile onClick={() => navigate('/moh-705a')} className={styles.tile}>
+          MOH-705A REPORT
+        </ClickableTile>
+        <ClickableTile onClick={() => navigate('/moh-705b')} className={styles.tile}>
+          MOH-705B REPORT
+        </ClickableTile>
+        <ClickableTile onClick={() => navigate('/moh-745')} className={styles.tile}>
+          MOH-745 REPORT
+        </ClickableTile>
+        <ClickableTile onClick={() => navigate('/moh-740')} className={styles.tile}>
+          MOH-740 REPORT
+        </ClickableTile>
+        <ClickableTile onClick={() => navigate('/moh-731')} className={styles.tile}>
+          MOH-731 REPORT
+        </ClickableTile>
       </div>
     </>
   );

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;