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

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

@@ -0,0 +1,127 @@
+import { ArrowLeft } from '@carbon/react/icons';
+import { useNavigate } from 'react-router-dom';
+import React from 'react';
+import { Button } from '@carbon/react';
+
+import styles from './report-filters.scss';
+
+interface ReportFiltersComponentProps {
+  reportName: string;
+  mode?: 'monthly' | 'daily';
+  isFacility?: false | 'true';
+  onGenerate?: (filters: { startDate?: string; endDate?: string; month?: string }) => void;
+  isLoding?: boolean;
+}
+const ReportFiltersComponent: React.FC<ReportFiltersComponentProps> = ({
+  reportName,
+  mode = 'daily',
+  isFacility,
+  onGenerate,
+  isLoding = false,
+}) => {
+  const navigate = useNavigate();
+
+  const getToday = () => {
+    return new Date().toISOString().split('T')[0];
+  };
+
+  const getPreviousMonth = () => {
+    const date = new Date();
+    date.setMonth(date.getMonth() - 1);
+
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+
+    return `${year}-${month}`;
+  };
+
+  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 [startDateTime, setStartDateTime] = React.useState<string>('');
+  const [endDateTime, setEndDateTime] = React.useState<string>('');
+
+  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;
+      }
+      onGenerate(filters);
+    }
+  };
+  return (
+    <>
+      <div className={styles.titleContainer}>
+        <ArrowLeft className={styles.backIcon} onClick={() => navigate(-1)} />
+        <h2 className={styles.title}>{reportName}</h2>
+      </div>
+      <div className={styles.filtersContainer}>
+        {mode === 'daily' && (
+          <div className={styles.dateContainer}>
+            <label htmlFor="startingMonth">Start Date:</label>
+            <label htmlFor="endingMonth">End Date:</label>
+
+            <input
+              id="startingMonth"
+              type="date"
+              className={styles.input}
+              value={startDateString}
+              onChange={(e) => setStartDateString(e.target.value)}
+            />
+
+            <input
+              id="endingMonth"
+              type="date"
+              className={styles.input}
+              value={endDateString}
+              onChange={(e) => setEndDateString(e.target.value)}
+            />
+          </div>
+        )}
+        {mode === 'monthly' && (
+          <div>
+            <div>
+              <div>
+                <label htmlFor="month">Month:</label>
+                <input
+                  id="month"
+                  type="month"
+                  className={styles.input}
+                  value={monthString}
+                  onChange={(e) => setMonthString(e.target.value)}
+                />
+              </div>
+            </div>
+            <div className={styles.clearFix}></div>
+          </div>
+        )}
+        {isFacility === 'true' && (
+          <div>
+            <label>Facility</label>
+            <select
+              className={styles.input}
+              name="selectedFacility"
+              value={selectedFacility}
+              onChange={(e) => setSelectedFacility(e.target.value)}
+            >
+              <option value="">{facility}</option>
+            </select>
+          </div>
+        )}
+      </div>
+      {!isLoding && (
+        <div className={styles.buttonContainer}>
+          <Button onClick={generateReport}>Generate Report</Button>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ReportFiltersComponent;

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

@@ -0,0 +1,49 @@
+
+
+.filtersContainer {
+    margin: 0 2rem;
+    margin-bottom: 0.5rem;
+    border: 1px solid #ccc;
+    padding: 1rem;
+}
+
+.title {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-top: 1rem;
+    color: green;
+    text-decoration: underline;
+}
+
+.titleContainer {
+    margin: 2rem;
+}
+
+.dateContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr; 
+  gap: 8px 16px;
+  align-items: center;
+}
+
+.dateContainer label {
+  font-weight: 500;
+}
+
+.input {
+  width: 100%;
+  padding: 6px 8px;
+  box-sizing: border-box;
+  border: 1px solid #ccc;
+  outline: none;
+}
+.input:focus {
+  border-color: #999; 
+}
+
+.buttonContainer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin: 0 2rem;
+}

package/src/config-schema.ts

@@ -0,0 +1,12 @@
+import { Type } from '@openmrs/esm-framework';
+export const configSchema = {
+  etlBaseUrl: {
+    _type: Type.String,
+    _default: '',
+    _description: 'ETL endpoint',
+  },
+};
+
+export type Config = {
+  etlBaseUrl: string;
+};

package/src/createDashboardLink.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { DashboardExtension, type DashboardExtensionProps, type IconId } from '@openmrs/esm-framework';
+
+export const createDashboardLink = (config: Omit<DashboardExtensionProps, 'icon'> & { icon?: IconId }) => () => (
+  <BrowserRouter>
+    <DashboardExtension path={config.path} title={config.title} basePath={config.basePath} icon={config.icon} />
+  </BrowserRouter>
+);

package/src/dashboard/reports-dasboard.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ClickableTile } from '@carbon/react';
+
+import styles from './reports-dashboard.module.scss';
+interface ReportsDashboardProps {}
+const ReportsDashboard: React.FC<ReportsDashboardProps> = () => {
+  const navigate = useNavigate();
+  return (
+    <>
+      <div className={styles.container}>
+        <ClickableTile onClick={() => navigate('/moh-710')} className={styles.tile}>
+          MOH-710 REPORT
+        </ClickableTile>
+        <ClickableTile onClick={() => navigate('/moh-711')} className={styles.tile}>
+          MOH-711 REPORT
+        </ClickableTile>
+        <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>
+      </div>
+    </>
+  );
+};
+
+export default ReportsDashboard;

package/src/dashboard/reports-dashboard.module.scss

@@ -0,0 +1,14 @@
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    margin: 2rem;
+}
+
+.tile {
+    flex: 1 1 calc(33.333% - 40px);
+    min-width: 5rem;
+    max-width: 15rem;
+    padding: 1rem;
+    text-align: center;
+}

package/src/dashboard-meta/reports-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const reportsDashboardMeta = {
+  path: 'reports',
+  slot: 'ampath-reports',
+  title: 'Reports',
+  basePath: `${window.spaBase}/home`,
+};

package/src/declarations.d.ts

@@ -0,0 +1,5 @@
+declare module '*.css';
+declare module '*.scss';
+declare module '*.png';
+
+declare type SideNavProps = object;

package/src/index.ts

@@ -0,0 +1,20 @@
+import { getAsyncLifecycle, defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import { createDashboardLink } from './createDashboardLink';
+import { reportsDashboardMeta } from './dashboard-meta/reports-dashboard.meta';
+
+export const moduleName = '@ampath/esm-reports-app';
+
+const options = {
+  featureName: 'ampath-esm-reports',
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}
+export const root = getAsyncLifecycle(() => import('./root.component'), options);
+
+export const reportsDashboardLink = getSyncLifecycle(createDashboardLink(reportsDashboardMeta), options);

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.component.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import Moh240Register from "./sub-reports/moh-240-register.component";
+import Moh240PageSummary from "./sub-reports/page-summary.component";
+
+const Moh240Report: React.FC = () => {
+    return <>
+        <Moh240Register />
+        <Moh240PageSummary />
+    </>
+}
+
+export default Moh240Report;

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

@@ -0,0 +1,42 @@
+import React from "react";
+import DatatableWrapper from "../../datatable-wrapper/datatable-wrapper.component";
+
+const Moh240Register: React.FC = () => {
+    const headers = [
+        { key: 'date', header: 'Date (DD/MM/YYYY)' },
+        { key: 'opd_ipd_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', 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: 'date_sample_collected', 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: 'analysing_officer', header: 'Name of Analysing/Testing Officer' },
+        { key: 'signature', header: 'Signature' }
+    ];
+
+    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 = [];
+
+    return <DatatableWrapper headers={headers} rows={rows} subHeaders={subHeaders}/>
+}
+
+export default Moh240Register;

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

@@ -0,0 +1,95 @@
+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";
+
+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 <TableWrapper>
+        <TableRowMapper tableRows={tableRows} />
+    </TableWrapper>
+}
+
+export default Moh240PageSummary;