Merge pull request #91 from sainingo/main

Fetch and render report data
AMPATH · Jun 25, 2024 · 6cbc292 · 6cbc292
2 parents f777968 + 5b5e21a
commit 6cbc292
Show file tree

Hide file tree

Showing 12 changed files with 151 additions and 107 deletions.
diff --git a/packages/esm-report-app/src/api/api.ts b/packages/esm-report-app/src/api/api.ts
@@ -36,8 +36,8 @@ async function postData(url: string, ac = new AbortController()) {
   return response.data;
 }
 
-export const generateMOH362Reports = () => {
-  const { data, error, isLoading, isValidating } = useSWR(`${BASE_URL}/view`, fetcher);
+export const generateMOH362Reports = (id) => {
+  const { data, error, isLoading, isValidating } = useSWR(`${BASE_URL}/view?id=${id}`, fetcher);
 
   const mohData = data ? (data as any)?.results : [];
   return {
@@ -84,6 +84,13 @@ export const fetchReportLogsByLocationAndId = async (
   return results.data;
 };
 
+export const generateReportData = async (reportId: number, ac = new AbortController()) => {
+  const results = await openmrsFetch(`${BASE_URL}/view?id=${reportId}`, {
+    signal: ac.signal,
+  });
+  return results.data;
+};
+
 export const getFacilityLocations = () => {
   const { data, error, isLoading, isValidating } = useSWR(`${url}/location?v=default`, async () => {
     const response = await openmrsFetch(`${url}/location?v=default`, {

diff --git a/packages/esm-report-app/src/registers/MOH-362/moh-362a/MOH_362A_component.tsx b/packages/esm-report-app/src/registers/MOH-362/moh-362a/MOH_362A_component.tsx
@@ -1,14 +1,8 @@
 import React from 'react';
-import { generateMOH362Reports } from '../../../api/api';
 import styles from '../MOH-362.scss';
 import { TableContainer, TableHead, TableRow, TableHeader, Table, TableBody, TableCell } from '@carbon/react';
 
-const RenderMOH362a: React.FC = () => {
-  const { mohData: moh362a, isLoading, error } = generateMOH362Reports();
-
-  if (isLoading) return <div>Loading...</div>;
-  if (error) return <div>Error loading data</div>;
-
+const RenderMOH362a: React.FC<{ reportData: any }> = ({ reportData }) => {
   return (
     <TableContainer className={styles['table-container']} title="MOH 362 HTS LAB, REFERRAL AND LINKAGE REGISTER">
       <div className={styles['header']}>
@@ -154,15 +148,15 @@ const RenderMOH362a: React.FC = () => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {moh362a && moh362a.length > 0 ? (
-            moh362a.map((item, i) => (
+          {reportData && reportData.length > 0 ? (
+            reportData.map((item, i) => (
               <React.Fragment key={i}>
                 <TableRow>
-                  <TableCell rowSpan={2}>{item.patient_id}</TableCell>
+                  <TableCell rowSpan={2}>{i}</TableCell>
                   <TableCell className={styles['dotted-border']} rowSpan={1}>
                     {item.patient_id}
                   </TableCell>
-                  <TableCell rowSpan={2}>{item.patient_id}</TableCell>
+                  <TableCell rowSpan={2}>{item.visit_date}</TableCell>
                   <TableCell rowSpan={2}>{item.patient_id}</TableCell>
                   <TableCell rowSpan={2}>{item.patient_id}</TableCell>
                   <TableCell rowSpan={2}>{item.patient_id}</TableCell>

diff --git a/packages/esm-report-app/src/registers/MOH-362/moh-362b/MOH_362B_component.tsx b/packages/esm-report-app/src/registers/MOH-362/moh-362b/MOH_362B_component.tsx
@@ -1,16 +1,7 @@
 import React from 'react';
-import { TableContainer, TableHead, TableRow, TableHeader } from '@carbon/react';
-import { Table } from '@carbon/react';
-import { TableBody } from '@carbon/react';
-import { TableCell } from '@carbon/react';
-import { generateMOH362Reports } from '../../../api/api';
+import { TableContainer, TableHead, TableRow, TableHeader, Table, TableCell, TableBody } from '@carbon/react';
 import styles from '../MOH-362.scss';
-const RenderMOH362b: React.FC = () => {
-  const { mohData: moh362b, isLoading, error } = generateMOH362Reports();
-
-  if (isLoading) return <div>Loading...</div>;
-  if (error) return <div>Error loading data</div>;
-
+const RenderMOH362b: React.FC<{ reportData: any }> = ({ reportData }) => {
   return (
     <TableContainer className={styles['table-container']} title="MOH 362 HTS LAB, REFERRAL AND LINKAGE REGISTER">
       <div className={styles['header']}>
@@ -67,8 +58,8 @@ const RenderMOH362b: React.FC = () => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {moh362b && moh362b.length > 0 ? (
-            moh362b.map((item, i) => (
+          {reportData && reportData.length > 0 ? (
+            reportData.map((item, i) => (
               <React.Fragment key={i}>
                 <TableRow>
                   <TableCell rowSpan={2}> {item.patient_id}</TableCell>

diff --git a/packages/esm-report-app/src/registers/MOH-405/MOH_405_component.tsx b/packages/esm-report-app/src/registers/MOH-405/MOH_405_component.tsx
@@ -1,11 +1,8 @@
 import React from 'react';
 import styles from './MOH-405.scss';
-import { TableContainer, TableHead, TableRow, TableHeader } from '@carbon/react';
-import { Table } from '@carbon/react';
-import { TableBody } from '@carbon/react';
-import { TableCell } from '@carbon/react';
+import { TableContainer, TableHead, TableRow, Table, TableBody, TableCell, TableHeader } from '@carbon/react';
 
-const RenderMOH405: React.FC = () => (
+const RenderMOH405: React.FC<{ reportData: any }> = ({ reportData }) => (
   <TableContainer className={styles['table-container']}>
     <div className={styles['header']}>
       <div className={styles['left']}>

diff --git a/packages/esm-report-app/src/registers/MOH-406/MOH_406_component.tsx b/packages/esm-report-app/src/registers/MOH-406/MOH_406_component.tsx
@@ -1,12 +1,9 @@
 import React from 'react';
 import styles from './MOH_406.scss';
 
-import { TableContainer, TableHead, TableRow, TableHeader } from '@carbon/react';
-import { Table } from '@carbon/react';
-import { TableBody } from '@carbon/react';
-import { TableCell } from '@carbon/react';
+import { TableContainer, TableHead, TableRow, TableHeader, Table, TableBody, TableCell } from '@carbon/react';
 
-const RenderMOH406: React.FC = () => (
+const RenderMOH406: React.FC<{ reportData: any }> = ({ reportData }) => (
   <TableContainer className={styles['table-container']}>
     <div className={styles['header']}>
       <div className={styles['left']}>

diff --git a/packages/esm-report-app/src/registers/MOH-407/clientFollowUp/ClientFollowUp_component.tsx b/packages/esm-report-app/src/registers/MOH-407/clientFollowUp/ClientFollowUp_component.tsx
@@ -1,11 +1,8 @@
 import React from 'react';
 import styles from '../nutrition.scss';
-import { TableContainer, TableHead, TableRow, TableHeader } from '@carbon/react';
-import { Table } from '@carbon/react';
-import { TableBody } from '@carbon/react';
-import { TableCell } from '@carbon/react';
+import { TableContainer, TableHead, TableRow, TableHeader, Table, TableBody, TableCell } from '@carbon/react';
 
-const ClientFollowUpRegister: React.FC = () => (
+const ClientFollowUpRegister: React.FC<{ reportData: any }> = ({ reportData }) => (
   <TableContainer className={styles['table-container']}>
     <div className={styles['header']}>
       <div className={styles['left']}>

diff --git a/packages/esm-report-app/src/registers/MOH-407/nutrition/Nutrition_component.tsx b/packages/esm-report-app/src/registers/MOH-407/nutrition/Nutrition_component.tsx
@@ -1,11 +1,8 @@
 import React from 'react';
 import styles from '../nutrition.scss';
-import { TableContainer, TableHead, TableRow, TableHeader } from '@carbon/react';
-import { Table } from '@carbon/react';
-import { TableBody } from '@carbon/react';
-import { TableCell } from '@carbon/react';
+import { TableContainer, TableHead, TableRow, TableHeader, Table, TableBody, TableCell } from '@carbon/react';
 
-const NutritionRegister: React.FC = () => (
+const NutritionRegister: React.FC<{ reportData: any }> = ({ reportData }) => (
   <TableContainer className={styles['table-container']}>
     <div className={styles['header']}>
       <div className={styles['left']}>

diff --git a/packages/esm-report-app/src/registers/MOH-408/MOH-408-component.tsx b/packages/esm-report-app/src/registers/MOH-408/MOH-408-component.tsx
@@ -1,10 +1,7 @@
 import React from 'react';
 import styles from './MOH-408.scss';
-import { TableContainer, TableHead, TableRow, TableHeader } from '@carbon/react';
-import { Table } from '@carbon/react';
-import { TableBody } from '@carbon/react';
-import { TableCell } from '@carbon/react';
-const RenderMOH408: React.FC = () => {
+import { TableContainer, TableHead, TableRow, TableHeader, Table, TableBody, TableCell } from '@carbon/react';
+const RenderMOH408: React.FC<{ reportData: any }> = ({ reportData }) => {
   return (
     <TableContainer className={styles['table-container']}>
       <div className={styles['header']}>

diff --git a/...es/esm-report-app/src/reports-dashboard/report-loader/dynamic-report-loader-component.tsx b/...es/esm-report-app/src/reports-dashboard/report-loader/dynamic-report-loader-component.tsx
@@ -10,51 +10,50 @@ import PrepRegister from '../../registers/MOH-267/prep-activity-register.compone
 import MOH731 from '../../registers/MOH-731/MOH_731';
 import CareAndTreatment from '../../registers/CARE_AND_TREATMENT/Care_and_Treatment';
 import MOH333 from '../../registers/MOH_333_MATERNITY/MOH_333_component';
-import { useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import styles from './dynamic-report-loader.scss';
 import RenderMOH408 from '../../registers/MOH-408/MOH-408-component';
 import UseBreadcrumb from '../breadcrumb/bread-crumb';
 import html2canvas from 'html2canvas';
 import { PDFDocument } from 'pdf-lib';
+import reportMapping from './reportMapping.json';
 
-const reportComponentMapping = {
-  'MOH 405 - AnteNatal(ANC) Register': RenderMOH405,
-  'MOH 406 A PNC REGISTER': RenderMOH406,
-  'MOH 362 A - HTS LABS REGISTER': RenderMOH362A,
-  'MOH 362 B - HTS LABS REGISTER': RenderMOH362B,
-  'MOH 407 Nutrition Service Register': NutritionRegisters,
-  'ClientFollowUp Service Register MOH 407': ClientFollowUpRegister,
-  'PrEP DAR': PrepRegister,
-  'MOH 408 HEI REGISTER': RenderMOH408,
-  'MOH 731': MOH731,
-  'Care & Treatment': CareAndTreatment,
-  'MOH 333 Maternity Register': MOH333,
+const componentMap = {
+  RenderMOH405,
+  RenderMOH406,
+  RenderMOH362A,
+  RenderMOH362B,
+  NutritionRegisters,
+  ClientFollowUpRegister,
+  PrepRegister,
+  RenderMOH408,
+  MOH333,
+  CareAndTreatment,
+  MOH731,
 };
 
 const DynamicReportLoader: React.FC = () => {
   const { reportUuid } = useParams<{ reportUuid: string }>();
-  const ReportComponent = reportComponentMapping[reportUuid];
+  const location = useLocation();
+  const { reportData } = location.state || {};
+
+  const reportMappingEntry = reportMapping.find((entry) => entry.report_uuid === reportUuid);
+  const ReportComponent = reportMappingEntry ? componentMap[reportMappingEntry.component] : null;
+
   const downloadPDF = async () => {
     const element = document.getElementById('report-content');
     if (element) {
-      // Capture the element as an image using html2canvas
       const canvas = await html2canvas(element);
       const imgData = canvas.toDataURL('image/png');
-
-      // Create a new PDF document
       const pdfDoc = await PDFDocument.create();
       const page = pdfDoc.addPage([canvas.width, canvas.height]);
-
-      // Draw the captured image in the PDF
       const pngImage = await pdfDoc.embedPng(imgData);
       page.drawImage(pngImage, {
         x: 0,
         y: 0,
         width: canvas.width,
         height: canvas.height,
       });
-
-      // Save and open the PDF
       const pdfBytes = await pdfDoc.save();
       const blob = new Blob([pdfBytes], { type: 'application/pdf' });
       const url = URL.createObjectURL(blob);
@@ -82,11 +81,11 @@ const DynamicReportLoader: React.FC = () => {
               Download PDF
             </button>
             <button className={styles.downloadButton} onClick={downloadExcel}>
-              Download Excel
+              Export Excel
             </button>
           </div>
           <div id="report-content">
-            <ReportComponent />
+            <ReportComponent reportData={reportData} />
           </div>
         </>
       ) : (

diff --git a/packages/esm-report-app/src/reports-dashboard/report-loader/reportMapping.json b/packages/esm-report-app/src/reports-dashboard/report-loader/reportMapping.json
@@ -1,12 +1,57 @@
-{
-    "MOH 405 - AnteNatal(ANC) Register": "MOH_405_component",
-    "MOH 406 A PNC REGISTER": "MOH_406_component",
-    "MOH 362 A - HTS LABS REGISTER": "MOH_362A_component",
-    "MOH 362 B - HTS LABS REGISTER": "MOH_362B_component",
-    "MOH 407 Nutrition Service Register": "Nutrition_component",
-    "ClientFollowUp Service Register MOH 407": "ClientFollowUp_component",
-    "uuid-for-prep-register": "prep-activity-register.component",
-    "MOH 408 HEI REGISTER": "MOH-408-component"
+[
+  {
+    "report_name": "MOH 405 - AnteNatal(ANC) Register",
+    "report_uuid": "9b3a8ae4-ad09-4806-a824-3807b41ba370",
+    "component": "RenderMOH405"
+  },
+  {
+    "report_name": "MOH 406 A PNC REGISTER",
+    "report_uuid": "fa94e87a-fc49-4e8e-bbec-aee08da51add",
+    "component": "RenderMOH406"
+  },
+  {
+    "report_name": "MOH 362 A - HTS LABS REGISTER",
+    "report_uuid": "7daf4258-eceb-47c3-81ba-8ae6ddea41d9",
+    "component": "RenderMOH362A"
+  },
+  {
+    "report_name": "MOH 362 B - HTS LABS REGISTER",
+    "report_uuid": "9b55b530-908a-44b2-8974-8328b2c952dd",
+    "component": "RenderMOH362B"
+  },
+  {
+    "report_name": "MOH 407 Nutrition Service Register",
+    "report_uuid": "43ca0b4f-7767-4beb-b122-f11500602470",
+    "component": "NutritionRegisters"
+  },
+  {
+    "report_name": "ClientFollowUp Service Register MOH 407",
+    "report_uuid": "43ca0b4f-7767-4beb-b122-f11500602470",
+    "component": "ClientFollowUpRegister"
+  },
+  {
+    "report_name": "PrEP DAR",
+    "report_uuid": "d611bd51-8cec-4069-87d6-d59a205bee05",
+    "component": "PrepRegister"
+  },
+  {
+    "report_name": "MOH 408 HEI REGISTER",
+    "report_uuid": "d611bd51-8cec-4069-87d6-d59a205bee05",
+    "component": "RenderMOH408"
+  },
+  {
+    "report_name": "MOH 731",
+    "report_uuid": "f3650738-5830-4159-ac8d-e68a15852cc4",
+    "component": "MOH731"
+  },
+  {
+    "report_name": "Care & Treatment",
+    "report_uuid": "b8dcd336-d8fa-405e-95fe-fd23783db908",
+    "component": "CareAndTreatment"
+  },
+  {
+    "report_name": "MOH 333 Maternity Register",
+    "report_uuid": "e6f9b821-e087-4a6e-b7ee-1a17dcd6f9b3",
+    "component": "MOH333"
   }
-
-
+]
diff --git a/packages/esm-report-app/src/reports-dashboard/report-summary/ReportSummary.tsx b/packages/esm-report-app/src/reports-dashboard/report-summary/ReportSummary.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   DataTable,
   TableContainer,
@@ -10,13 +10,16 @@ import {
   TableCell,
   TableSelectAll,
   TableSelectRow,
-  Button,
-  Pagination,
+  Loading,
 } from '@carbon/react';
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import styles from './ReportSummary.css';
+import reportMapping from '../report-loader/reportMapping.json';
+import { generateReportData } from '../../api/api';
 
 const ReportSummary: React.FC<any> = ({ rows }) => {
+  const [loading, setLoading] = useState(false);
+
   const headers = [
     { key: 'status', header: 'Status' },
     { key: 'start_date', header: 'Start Date' },
@@ -27,19 +30,40 @@ const ReportSummary: React.FC<any> = ({ rows }) => {
     { key: 'download', header: 'Download' },
   ];
 
-  // Add view and download buttons to rows data
-  const rowsWithButtons = rows.map((row) => ({
-    ...row,
-    view: (
-      <Link to={`/reports/${row.report_name}`}>
-        <button className={styles.view_button}>View</button>
-      </Link>
-    ),
-    download: <button className={styles.download_button}>Download</button>,
-  }));
+  const navigate = useNavigate();
+
+  const handleViewClick = async (report_uuid, report_id) => {
+    setLoading(true);
+    try {
+      const response = await generateReportData(report_id);
+      const data = response.results;
+
+      navigate(`/reports/${report_uuid}`, { state: { reportData: data } });
+    } catch (error) {
+      console.error('Error fetching report data:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const rowsWithButtons = rows.map((row) => {
+    const reportMappingEntry = reportMapping.find((entry) => entry.report_uuid === row.uuid);
+    return {
+      ...row,
+      view: reportMappingEntry ? (
+        <button
+          className={styles.view_button}
+          onClick={() => handleViewClick(reportMappingEntry.report_uuid, Number(row.log_id))}>
+          View
+        </button>
+      ) : null,
+      download: <button className={styles.download_button}>Download</button>,
+    };
+  });
 
   return (
     <div className={styles.wrapper_container}>
+      {loading && <Loading description="Loading data..." withOverlay={true} />}
       <TableContainer title="Reports logs">
         <DataTable
           rows={rowsWithButtons}