@pih/esm-pathology-app 1.0.5 → 1.0.6

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@pih/esm-pathology-app",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "license": "MPL-2.0",
   "description": "A microfrontend pathology OpenMRS",
   "browser": "dist/pih-esm-pathology-app.js",
   "main": "src/index.ts",
   "source": true,
   "scripts": {
-    "start": "openmrs develop --backend http://10.160.20.28:8080",
+    "start": "openmrs develop --backend http://imb.pih-emr.org:8096",
     "serve": "webpack serve --mode development",
     "build": "webpack --mode production",
     "analyze": "webpack --mode=production --env.analyze=true",

package/src/Print-to-PDF/Document-Component.tsx

@@ -1,17 +1,19 @@
 import React from "react";
-import { Document, Page, Text,Image, View, StyleSheet,Font } from "@react-pdf/renderer";
-import ButaroLogo from '../images/ButaroHospitalLogo.gif';
-import GeorgiaFontBold from '../Fonts/georgia/georgia-bold.ttf';
-import GeorgiaFont from '../Fonts/georgia/Georgia.ttf';
-
-// import { Font } from '@react-pdf/renderer';
-Font.register({ family: 'GeorgiaBold', src: GeorgiaFontBold});
-Font.register({ family: 'Georgia', src: GeorgiaFont});
-
-// Font.register({ family: 'Georgia', src: '../Fonts/georgia/Georgia.ttf', fontStyle: 'normal', fontWeight: 'normal' });
-
-
+import {
+  Document,
+  Page,
+  Text,
+  Image,
+  View,
+  StyleSheet,
+  Font,
+} from "@react-pdf/renderer";
+import ButaroLogo from "../images/ButaroHospitalLogo.gif";
+import GeorgiaFontBold from "../Fonts/georgia/georgia-bold.ttf";
+import GeorgiaFont from "../Fonts/georgia/Georgia.ttf";
 
+Font.register({ family: "GeorgiaBold", src: GeorgiaFontBold });
+Font.register({ family: "Georgia", src: GeorgiaFont });
 
 // Create styles
 const styles = StyleSheet.create({
@@ -25,232 +27,270 @@ const styles = StyleSheet.create({
   },
   textLabels: {
     padding: 7,
-    fontFamily:"GeorgiaBold",
+    fontFamily: "GeorgiaBold",
     fontSize: 16,
-    fontWeight: 'bold',
-    paddingBottom:30,
+    fontWeight: "bold",
+    paddingBottom: 30,
   },
   sentenceLabels: {
     paddingTop: 7,
-    fontFamily:"GeorgiaBold",
+    fontFamily: "GeorgiaBold",
     fontSize: 16,
-    fontWeight: 'bold',
-    paddingBottom:3,
+    fontWeight: "bold",
+    paddingBottom: 3,
   },
   textAnswers: {
     margin: 10,
     padding: 20,
-    fontFamily:"Georgia",
+    fontFamily: "Georgia",
     fontSize: 14,
   },
   sentenceAnswers: {
     marginBottom: 10,
     paddingBottom: 20,
-    fontFamily:"Georgia",
+    fontFamily: "Georgia",
     fontSize: 14,
   },
   logo: {
     width: 61,
-
-  }
+  },
 });
 
 // Create Document Component
 const MyDocument = (props) => (
-  
-  <Document title={`Pathology report 
+  <Document
+    title={`Pathology report 
   ${props.encounterInfo.family_name} 
   ${props.encounterInfo.given_name}  
   ${props.encounterInfo.middle_name} `}
   >
     <Page size="A4" style={styles.page}>
-     
-       <View style={styles.section}>
-        <Image style={styles.logo} src={ButaroLogo}/>
-        <Text style={{fontSize: 8}}>Butaro Hospital</Text>
-        <Text style={{ position: "absolute",top: 0,left: 300,width: 300 }}>
-          <Text style={styles.textAnswers}>
-          Lab phone number:
-          </Text>
-          <Text>{" "}{" "}0784433618</Text>
+      <View style={styles.section}>
+        <Image style={styles.logo} src={ButaroLogo} />
+        <Text style={{ fontSize: 8 }}>Butaro Hospital</Text>
+        <Text style={{ position: "absolute", top: 0, left: 300, width: 300 }}>
+          <Text style={styles.textAnswers}>Lab phone number:</Text>
+          <Text> 0784433618</Text>
         </Text>
-        <Text style={{ position: "absolute",top: 15,left: 300,width: 300 }}>
-          <Text style={styles.textAnswers}>
-            Accession number:
-          </Text> 
-          <Text >
-          {" "}{" "}
-          {props.encounterInfo.resultsEncounter.obs.map((obser) => obser.concept.uuid==props.config.AccessionNumberconceptUUID && obser.value)}
+        <Text style={{ position: "absolute", top: 15, left: 300, width: 300 }}>
+          <Text style={styles.textAnswers}>Accession number:</Text>
+          <Text>
+            {" "}
+            {props.encounterInfo.resultsEncounter.obs.map(
+              (obser) =>
+                obser.concept.uuid == props.config.AccessionNumberconceptUUID &&
+                obser.value
+            )}
           </Text>
         </Text>
-        <Text style={{ backgroundColor: "#E4E4E4",borderBottom:'1px', textAlign: 'center',fontWeight: 1500, marginBottom: 30,fontFamily:"GeorgiaBold" }}> 
-          Pathology Report 
+        <Text
+          style={{
+            borderBottom: "1px",
+            textAlign: "center",
+            fontWeight: 1500,
+            marginBottom: 30,
+            fontFamily: "GeorgiaBold",
+          }}
+        >
+          Pathology Report
         </Text>
-        <Text style={{ paddingBottom: 10 }} > 
-          <Text style={styles.textAnswers}>
-            Patient Name:
-          </Text> 
+        <Text style={{ paddingBottom: 10 }}>
+          <Text style={styles.textAnswers}>Patient Name:</Text>
           <Text style={styles.textAnswers}>
-          {" "}{" "}
-            {props.encounterInfo.family_name} {" "} 
-            {props.encounterInfo.given_name} {" "} 
-            {props.encounterInfo.middle_name}  
+            {" "}
+            {props.encounterInfo.family_name} {props.encounterInfo.given_name}{" "}
+            {props.encounterInfo.middle_name}
           </Text>
-          
         </Text>
-        <Text style={{ paddingBottom: 10, position: "absolute",top: 140,left: 335  }}>
+        <Text
+          style={{
+            paddingBottom: 10,
+            position: "absolute",
+            top: 140,
+            left: 335,
+          }}
+        >
+          <Text style={styles.textAnswers}>Surgery Date:</Text>
           <Text style={styles.textAnswers}>
-            Surgery Date:
-          </Text> 
-          <Text style={styles.textAnswers}>
-          {" "}{" "}
-          {props.encounterInfo.resultsEncounter.obs.map((obser) => obser.concept.uuid==props.config.DateBiopsySpecimenTakenconceptUUID && 
-            new Date(obser.value)
-            .toLocaleString(["en-GB","en-US","en","fr-RW"],{day: 'numeric',month: 'numeric',year: 'numeric'})
-          )}
+            {" "}
+            {props.encounterInfo.resultsEncounter.obs.map(
+              (obser) =>
+                obser.concept.uuid ==
+                  props.config.DateBiopsySpecimenTakenconceptUUID &&
+                new Date(obser.value).toLocaleString(
+                  ["en-GB", "en-US", "en", "fr-RW"],
+                  { day: "numeric", month: "numeric", year: "numeric" }
+                )
+            )}
           </Text>
-        
         </Text>
-        <Text style={{ paddingBottom: 10 }} > 
+        <Text style={{ paddingBottom: 10 }}>
+          <Text style={styles.textAnswers}>Patient Birthdate:</Text>
           <Text style={styles.textAnswers}>
-            Patient Birthday:
-          </Text> 
-          <Text style={styles.textAnswers}>
-          {" "}{" "}
-          {
-          new Date(props.encounterInfo.personBirthdate)
-              .toLocaleString(["en-GB","en-US","en","fr-RW"],{day: 'numeric',month: 'numeric',year: 'numeric'})
-            }
+            {" "}
+            {new Date(props.encounterInfo.personBirthdate).toLocaleString(
+              ["en-GB", "en-US", "en", "fr-RW"],
+              { day: "numeric", month: "numeric", year: "numeric" }
+            )}
           </Text>
-          
         </Text>
-        <Text style={{ paddingBottom: 10, position: "absolute",top: 168,left: 335,width: 200  }}> 
-          <Text style={styles.textAnswers}>
-            Specimen Reception Date:
-          </Text> 
+        <Text
+          style={{
+            paddingBottom: 10,
+            position: "absolute",
+            top: 168,
+            left: 335,
+            width: 200,
+          }}
+        >
+          <Text style={styles.textAnswers}>Specimen Reception Date:</Text>
           <Text style={styles.textAnswers}>
-          {" "}{" "}
-          {props.encounterInfo.resultsEncounter.obs.map((obser) => obser.concept.uuid==props.config.SpecimenSubmissionDateconceptUUID && 
-            new Date(obser.value)
-            .toLocaleString(["en-GB","en-US","en","fr-RW"],{day: 'numeric',month: 'numeric',year: 'numeric'})
-          )}
+            {" "}
+            {props.encounterInfo.resultsEncounter.obs.map(
+              (obser) =>
+                obser.concept.uuid ==
+                  props.config.SpecimenSubmissionDateconceptUUID &&
+                new Date(obser.value).toLocaleString(
+                  ["en-GB", "en-US", "en", "fr-RW"],
+                  { day: "numeric", month: "numeric", year: "numeric" }
+                )
+            )}
           </Text>
         </Text>
-        <Text style={{ paddingBottom: 10,borderBottom:'1px' }} > 
+        <Text style={{ paddingBottom: 10, borderBottom: "1px" }}>
+          <Text style={styles.textAnswers}>Patient Gender:</Text>
           <Text style={styles.textAnswers}>
-            Patient Gender:
-          </Text> 
-          <Text style={styles.textAnswers}>
-          {" "}{" "}
+            {" "}
             {props.encounterInfo.personGender}
           </Text>
-          
         </Text>
-        <Text style={{ paddingBottom: 10, position: "absolute",top: 200,left: 335,width: 250 }}>  
-          <Text style={styles.textAnswers}>
-            Signout Date:
-          </Text> 
+        <Text
+          style={{
+            paddingBottom: 10,
+            position: "absolute",
+            top: 200,
+            left: 335,
+            width: 250,
+          }}
+        >
+          <Text style={styles.textAnswers}>Signout Date:</Text>
           <Text style={styles.textAnswers}>
-          {" "}{" "}
-            {
-              new Date(props.encounterInfo.resultsEncounter.encounterDatetime)
-              .toLocaleString(["en-GB","en-US","en","fr-RW"],{day: 'numeric',month: 'numeric',year: 'numeric'})
-            } 
+            {" "}
+            {new Date(
+              props.encounterInfo.resultsEncounter.encounterDatetime
+            ).toLocaleString(["en-GB", "en-US", "en", "fr-RW"], {
+              day: "numeric",
+              month: "numeric",
+              year: "numeric",
+            })}
           </Text>
         </Text>
-        
-        <Text style={{ backgroundColor: "#E4E4E4",paddingBottom: 10 }}> 
-          <Text style={styles.textLabels}>
-            Sending Physician:
-          </Text> 
+
+        <Text style={{ paddingBottom: 10 }}>
+          <Text style={styles.textLabels}>Sending Physician:</Text>
           <Text style={styles.textAnswers}>
-          {" "}{" "}
-          {props.encounterInfo.resultsEncounter.obs.map((obser) => obser.concept.uuid==props.config.SendingPhysicianconceptUUID && obser.value)}
+            {" "}
+            {props.encounterInfo.resultsEncounter.obs.map(
+              (obser) =>
+                obser.concept.uuid ==
+                  props.config.SendingPhysicianconceptUUID && obser.value
+            )}
           </Text>
         </Text>
-        <Text style={{ backgroundColor: "#E4E4E4",paddingBottom: 10 }}>
-          <Text style={styles.textLabels}>
-            Sending Facility: 
-          </Text> 
+        <Text style={{ paddingBottom: 10 }}>
+          <Text style={styles.textLabels}>Sending Facility:</Text>
           <Text style={styles.textAnswers}>
-          {" "}{" "}
-          {props.encounterInfo.resultsEncounter.obs.map((obser) => obser.concept.uuid==props.config.OtherBiopsyLocationconceptUUID && obser.value)}
+            {" "}
+            {props.encounterInfo.resultsEncounter.obs.map(
+              (obser) =>
+                obser.concept.uuid ==
+                  props.config.OtherBiopsyLocationconceptUUID && obser.value
+            )}
           </Text>
         </Text>
-        <Text style={{backgroundColor: "#E4E4E4",paddingBottom: 10 ,fontFamily:"Georgia"}}>Anatomical location:</Text>
-        <Text style={{backgroundColor: "#E4E4E4", paddingBottom: 10,paddingLeft:10 }}> 
-          <Text style={styles.textLabels}>
-            i.System:
-          </Text> 
+        <Text style={{ paddingBottom: 10, fontFamily: "Georgia" }}>
+          Anatomical location:
+        </Text>
+        <Text style={{ paddingBottom: 10, paddingLeft: 10 }}>
+          <Text style={styles.textLabels}>i.System:</Text>
           <Text style={styles.textAnswers}>
-          {" "}{" "}
-          {props.encounterInfo.resultsEncounter.obs.map((obser) => obser.concept.uuid==props.config.OrganSystemconceptUUID && (obser.value.name.display+ ",  "))}
+            {" "}
+            {props.encounterInfo.resultsEncounter.obs.map(
+              (obser) =>
+                obser.concept.uuid == props.config.OrganSystemconceptUUID &&
+                obser.value.name.display + ",  "
+            )}
           </Text>
         </Text>
-        <Text style={{backgroundColor: "#E4E4E4", paddingBottom: 10,paddingLeft:10 }}>
-          <Text style={styles.textLabels}>
-            ii.Organ:
-          </Text> 
+        <Text style={{ paddingBottom: 10, paddingLeft: 10 }}>
+          <Text style={styles.textLabels}>ii.Organ:</Text>
           <Text style={styles.textAnswers}>
-          {" "}{" "}
-          {props.encounterInfo.resultsEncounter.obs.map((obser) => obser.concept.uuid==props.config.OrganconceptUUID && (obser.value.name.display+ ",  "))} 
+            {" "}
+            {props.encounterInfo.resultsEncounter.obs.map(
+              (obser) =>
+                obser.concept.uuid == props.config.OrganconceptUUID &&
+                obser.value.name.display + ",  "
+            )}
           </Text>
         </Text>
-        <Text style={{backgroundColor: "#E4E4E4", paddingBottom: 10,paddingLeft:10 }}>
-          <Text style={styles.textLabels}>
-            iii.Detail:
-          </Text> 
+        <Text style={{ paddingBottom: 10, paddingLeft: 10 }}>
+          <Text style={styles.textLabels}>iii.Detail:</Text>
           <Text style={styles.textAnswers}>
-          {" "}{" "}
-          {props.encounterInfo.resultsEncounter.obs.map((obser) => obser.concept.uuid==props.config.SpecimenDetailconceptUUID && obser.value)}
+            {" "}
+            {props.encounterInfo.resultsEncounter.obs.map(
+              (obser) =>
+                obser.concept.uuid == props.config.SpecimenDetailconceptUUID &&
+                obser.value
+            )}
           </Text>
         </Text>
-        <Text style={{backgroundColor: "#E4E4E4", paddingBottom: 10 }}>
-          <Text style={styles.textLabels}>
-            Procedure type:
-          </Text> 
+        <Text style={{ paddingBottom: 10 }}>
+          <Text style={styles.textLabels}>Procedure type:</Text>
           <Text style={styles.textAnswers}>
-          {" "}{" "}
-          {props.encounterInfo.resultsEncounter.obs.map((obser) => obser.concept.uuid==props.config.OtherTestsOrProceduresconceptUUID && obser.value)}
+            {" "}
+            {props.encounterInfo.resultsEncounter.obs.map(
+              (obser) =>
+                obser.concept.uuid ==
+                  props.config.OtherTestsOrProceduresconceptUUID && obser.value
+            )}
           </Text>
         </Text>
-          <Text style={[styles.sentenceLabels]}>
-            Gross Description: 
-          </Text> 
-          <Text style={[styles.sentenceAnswers]}>
-            {props.encounterInfo.resultsEncounter.obs.map((obser) => obser.concept.uuid==props.config.GrossDescriptionconceptUUID && obser.value)}
-           
-          </Text>
-          <Text style={styles.sentenceLabels}>
-            Microscopic Examination:
-          </Text> 
-          <Text style={styles.sentenceAnswers}>
-          
-            {props.encounterInfo.resultsEncounter.obs.map((obser) => obser.concept.uuid==props.config.MacroscopicExaminationconceptUUID && obser.value)}
-
-          </Text>
-          <Text style={styles.sentenceLabels}>
-            Conclusion:
-          </Text> 
-          <Text style={styles.sentenceAnswers}>
-          
-            {props.encounterInfo.resultsEncounter.obs.map((obser) => obser.concept.uuid==props.config.COMMENTSATCONCLUSIONOFEXAMINATIONconceptUUID && obser.value)}
-          
-          </Text>
+        <Text style={[styles.sentenceLabels]}>Gross Description:</Text>
+        <Text style={[styles.sentenceAnswers]}>
+          {props.encounterInfo.resultsEncounter.obs.map(
+            (obser) =>
+              obser.concept.uuid == props.config.GrossDescriptionconceptUUID &&
+              obser.value
+          )}
+        </Text>
+        <Text style={styles.sentenceLabels}>Microscopic Examination:</Text>
+        <Text style={styles.sentenceAnswers}>
+          {props.encounterInfo.resultsEncounter.obs.map(
+            (obser) =>
+              obser.concept.uuid ==
+                props.config.MacroscopicExaminationconceptUUID && obser.value
+          )}
+        </Text>
+        <Text style={styles.sentenceLabels}>Conclusion:</Text>
+        <Text style={styles.sentenceAnswers}>
+          {props.encounterInfo.resultsEncounter.obs.map(
+            (obser) =>
+              obser.concept.uuid ==
+                props.config.COMMENTSATCONCLUSIONOFEXAMINATIONconceptUUID &&
+              obser.value
+          )}
+        </Text>
 
-         <Text style={{backgroundColor: "#E4E4E4", paddingBottom: 10 }}>  
-          <Text style={styles.textLabels}>
-            Validated by pathologist:
-          </Text> 
-          <Text style= {[styles.textAnswers, { fontWeight: 'bold' }]}>
-          {" "}{" "}
+        <Text style={{ paddingBottom: 10 }}>
+          <Text style={styles.textLabels}>Validated by pathologist:</Text>
+          <Text style={[styles.textAnswers, { fontWeight: "bold" }]}>
+            {" "}
             {props.encounterInfo.approvedBy}
           </Text>
         </Text>
-      </View>  
+      </View>
     </Page>
   </Document>
 );
 
 export default MyDocument;
-

package/src/pathology-report/ReportComponent.tsx

@@ -24,8 +24,6 @@ import {
   postReferralStatusChangeObs,
   updateReferralStatusChangeObs,
   EncounterResult,
-  // postApproval,
-  // voidApprovalObs,
   getUser,
   Concept,
   getEncounter,
@@ -109,9 +107,7 @@ const ReportComponent = () => {
     getEncounters(
       config.healthCenterAttrTypeUUID,
       config.pathologyFullAllowedLocationUUID
-    ).then(
-      setEncountersList
-      );
+    ).then(setEncountersList);
   }, []);
 
   const filteredEncList = encountersList
@@ -148,8 +144,6 @@ const ReportComponent = () => {
 
   const rows = filteredEncList.map((encounterInfo) => {
     return {
-      // rows.push({
-      // patientLink: <a href={`/openmrs/patientDashboard.form?patientId=${encounterInfo.personId}`} >Link</a>,
       id: encounterInfo.encounterId,
       patientNames: (
         <a
@@ -202,8 +196,10 @@ const ReportComponent = () => {
           ))}
         </select>
       ),
-      dateOfRequest: new Date(encounterInfo.encounterDatetime)
-                .toLocaleString(["en-GB","en-US","en","fr-RW"],{day: 'numeric',month: 'numeric',year: 'numeric'}),
+      dateOfRequest: new Date(encounterInfo.encounterDatetime).toLocaleString(
+        ["en-GB", "en-US", "en", "fr-RW"],
+        { day: "numeric", month: "numeric", year: "numeric" }
+      ),
       referralStatus: (
         <select
           onChange={(e) =>
@@ -259,18 +255,19 @@ const ReportComponent = () => {
           </a>
         )
       ),
-      PDFReport:
-        encounterInfo.resultsEncounterId &&
-        (
-          encounterInfo.approvedBy &&
-            <PDFDownloadLink document={<MyDocument encounterInfo={encounterInfo} config={config} />} fileName="Pathology Report">
-              {({loading}) => (loading ? 'loading...' : <button>Download</button>)}
-            </PDFDownloadLink>
-            
-              
-           
-        )
-        
+      PDFReport: encounterInfo.resultsEncounterId &&
+        encounterInfo.approvedBy && (
+          <PDFDownloadLink
+            document={
+              <MyDocument encounterInfo={encounterInfo} config={config} />
+            }
+            fileName="Pathology Report"
+          >
+            {({ loading }) =>
+              loading ? "loading..." : <button>Download</button>
+            }
+          </PDFDownloadLink>
+        ),
     };
   });
 
@@ -300,14 +297,12 @@ const ReportComponent = () => {
           );
           tempEncList[encIndex].sampleDropoffObs = "";
           tempEncList[encIndex].sampleDropoffObsUuid = "";
-
           setEncountersList(tempEncList);
         }
       });
     }
   };
 
-
   const sampleStatusChange = (
     newStatus: { uuid: string; display: string },
     encounterInfo
@@ -397,7 +392,6 @@ const ReportComponent = () => {
       });
     }
   };
-  
 
   return (
     <div>
@@ -462,7 +456,7 @@ const ReportComponent = () => {
           onChange={(e) => setPatientName(e.target.value)}
         />
       </div>
-      {console.log( encountersList)}
+      {console.log(encountersList)}
       <div className={styles.tableContainer}>
         <DataTable rows={rows} headers={headers}>
           {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
@@ -489,15 +483,7 @@ const ReportComponent = () => {
           )}
         </DataTable>
       </div>
-      <div>
-        {/* <PDFViewer>
-          <MyDocument />
-        </PDFViewer> */}
-        {/* <PDFDownloadLink document={<MyDocument />} fileName="Pathology Report">
-          {({loading}) => (loading ? 'loading...' : <button>Download</button>)}
-        </PDFDownloadLink> */}
-        
-      </div>
+      <div></div>
     </div>
   );
 };