(refactor) follow up changes on the imaging report (#14)

* (feat) redesign the printing report * (feat) translation updates
palladiumkenya · Dec 19, 2024 · 5a67a76 · 5a67a76
1 parent e345190
commit 5a67a76
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 27 deletions.
diff --git a/packages/esm-imaging-orders-app/src/form/review-form/review-imaging-form.workspace.tsx b/packages/esm-imaging-orders-app/src/form/review-form/review-imaging-form.workspace.tsx
@@ -139,7 +139,7 @@ const ImagingReviewForm: React.FC<ReviewOrderDialogProps> = ({ order, closeWorks
                 />
                 <TextArea
                   className={styles.textAreaInput}
-                  labelText={t('nextNotes', "Reviewer's notes")}
+                  labelText={t('impression', 'Impression note')}
                   id="nextNotes"
                   name="nextNotes"
                   value={notes}

diff --git a/packages/esm-imaging-orders-app/src/hooks/useOrdersWorklist.ts b/packages/esm-imaging-orders-app/src/hooks/useOrdersWorklist.ts
@@ -14,7 +14,7 @@ const createApiUrl = (
   fulfillerStatus: string,
 ) => {
   const responseFormat =
-    'custom:(uuid,orderNumber,patient:(uuid,display,person:(uuid,display,age,gender)),concept:(uuid,display,conceptClass),action,careSetting,orderer:ref,urgency,instructions,bodySite,laterality,commentToFulfiller,procedures,display,fulfillerStatus,dateStopped,scheduledDate,dateActivated,fulfillerComment)';
+    'custom:(uuid,orderNumber,patient:(uuid,display,identifiers,person:(uuid,display,age,gender)),concept:(uuid,display,conceptClass),action,careSetting,orderer:ref,urgency,instructions,bodySite,laterality,commentToFulfiller,procedures,display,fulfillerStatus,dateStopped,scheduledDate,dateActivated,fulfillerComment)';
   const orderTypeParam = `orderTypes=${OrderTypeUuid}&activatedOnOrAfterDate=${activatedOnOrAfterDate}&activatedOnOrBeforeDate=${activatedOnOrBeforeDate}&isStopped=false&fulfillerStatus=${fulfillerStatus}&v=${responseFormat}`;
 
   return `${restBaseUrl}/order?${orderTypeParam}`;

diff --git a/packages/esm-imaging-orders-app/src/print/print-report-modal.component.tsx b/packages/esm-imaging-orders-app/src/print/print-report-modal.component.tsx
@@ -6,14 +6,14 @@ import PrintableReport from './print-report.component';
 import styles from './print-report.scss';
 import { IdentifierType, Person } from '../utils/functions';
 import { Identifer } from '../../../esm-procedure-orders-app/src/types/index';
+import { Order } from '../types';
 
 type PrintPreviewModalProps = {
   onClose: () => void;
-  Person: Person;
-  Report: string;
+  approvedOrder: Order;
 };
 
-const PrintPreviewModal: React.FC<PrintPreviewModalProps> = ({ onClose, Person, Report }) => {
+const PrintPreviewModal: React.FC<PrintPreviewModalProps> = ({ onClose, approvedOrder }) => {
   const { t } = useTranslation();
   const [printError, setPrintError] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -26,7 +26,7 @@ const PrintPreviewModal: React.FC<PrintPreviewModalProps> = ({ onClose, Person,
     <>
       <ModalBody>
         <div ref={ref}>
-          <PrintableReport Person={Person} Report={Report} />
+          <PrintableReport approvedOrders={approvedOrder} />
         </div>
       </ModalBody>
       <ModalFooter>

diff --git a/packages/esm-imaging-orders-app/src/print/print-report.component.tsx b/packages/esm-imaging-orders-app/src/print/print-report.component.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
 import styles from './print-report.scss';
-import { useConfig, useSession } from '@openmrs/esm-framework';
+import { useConfig, useSession, formatDate } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { IdentifierType, Person } from '../utils/functions';
 import startCase from 'lodash-es/startCase';
 import dayjs from 'dayjs';
+import { Order } from '../types';
 
 interface PrintableReportProps {
-  Person: Person;
-  Report: string;
+  approvedOrders: Order;
 }
 
-const PrintableReport: React.FC<PrintableReportProps> = ({ Person, Report }) => {
+const PrintableReport: React.FC<PrintableReportProps> = ({ approvedOrders }) => {
   const { t } = useTranslation();
   const { logo } = useConfig({ externalModuleName: '@kenyaemr/esm-login-app' });
   const { sessionLocation, user } = useSession();
@@ -21,36 +21,60 @@ const PrintableReport: React.FC<PrintableReportProps> = ({ Person, Report }) =>
     <div className={styles.container}>
       <div className={styles.mainContent}>
         <div className={styles.printableHeader}>
-          <p className={styles.heading}>{t('imagingReport', 'Imaging Report')}</p>
+          <p className={styles.heading}>
+            {t('imagingReport', 'Imaging Report')} - {approvedOrders?.orderNumber}
+          </p>
           {logo?.src && <img className={styles.img} height={60} width={250} src={logo.src} alt={logo.alt} />}
         </div>
-
         <div className={styles.printableBody}>
           <div className={styles.billDetails}>
             <p className={styles.itemHeading}>{t('reportSummaryTo', 'Report summary to')}</p>
-            <p className={styles.itemLabel}>{startCase(Person?.display)}</p>
             <p className={styles.itemLabel}>
-              {t('age', 'Age')} {Person?.age}
+              {t('name', 'Name')}: {startCase(approvedOrders?.patient?.person?.display)}
+            </p>
+            <p className={styles.itemLabel}>
+              {t('identifier', 'Identifier')}: {approvedOrders?.patient?.identifiers[0]?.identifier}
+            </p>
+            <p className={styles.itemLabel}>
+              {t('age', 'Age')}: {approvedOrders?.patient?.person?.age}
             </p>
             <p className={styles.itemLabel}>
-              {t('gender', 'Gender')} {Person?.gender}
+              {t('gender', 'Gender')}:
+              {approvedOrders?.patient?.person?.gender === 'M'
+                ? ' Male'
+                : approvedOrders?.patient?.person?.gender === 'F'
+                ? ' Female'
+                : ' Unknown'}
+            </p>
+            <p className={styles.itemLabel}>
+              {t('orderDate', 'Order date')} {formatDate(new Date(approvedOrders?.dateActivated))}
             </p>
           </div>
 
           <div className={styles.facilityDetails}>
             <p className={styles.facilityName}>{location}</p>
-            <p className={styles.itemLabel}>Kenya</p>
+            <p className={styles.facilityName}>{approvedOrders?.careSetting?.name}</p>
+            <p className={styles.facilityName}>{t('kenya', 'Kenya')}</p>
           </div>
         </div>
-
         <div className={styles.printResults}>
-          <p className={styles.itemHeading}>{t('imagingResults', 'Imaging Results')}</p>
+          <p className={styles.itemHeading}>{t('procedure', 'Procedure')}</p>
           <div className={styles.reportSection}>
-            <p className={styles.itemLabel}>{Report}</p>
+            <p className={styles.itemLabel}>{startCase(approvedOrders?.concept?.display)}</p>
+          </div>
+        </div>
+        <div className={styles.printResults}>
+          <p className={styles.itemHeading}>{t('findings', 'Findings')}</p>
+          <div className={styles.reportSection}>
+            <p className={styles.itemLabel}>{approvedOrders?.procedures[0]?.procedureReport}</p>
+          </div>
+        </div>
+        <div className={styles.printResults}>
+          <p className={styles.itemHeading}>{t('impressions', 'Impressions')}</p>
+          <div className={styles.reportSection}>
+            <p className={styles.itemLabel}>{approvedOrders?.procedures[0]?.procedureReason}</p>
           </div>
         </div>
-
-        <p className={styles.itemHeadingGroup}>{t('anyAdditionalNotes', 'Any additional notes')}</p>
       </div>
 
       <section className={styles.sectionFooter}>

diff --git a/packages/esm-imaging-orders-app/src/shared/ui/common/list-order-details.component.tsx b/packages/esm-imaging-orders-app/src/shared/ui/common/list-order-details.component.tsx
@@ -97,9 +97,7 @@ const ListOrderDetails: React.FC<ListOrdersDetailsProps> = ({ groupedOrders, sho
                   onClick={() => {
                     const dispose = showModal('print-preview-Report-modal', {
                       onClose: () => dispose(),
-                      Person: row?.patient?.person,
-                      Report: row.procedures[0].procedureReport,
-                      identifier: row?.patient?.identifier?.[0]?.identifier,
+                      approvedOrder: row,
                     });
                   }}
                   size="sm"

diff --git a/packages/esm-imaging-orders-app/src/types/index.ts b/packages/esm-imaging-orders-app/src/types/index.ts
@@ -52,3 +52,114 @@ export type DateFilterContext = {
   dateRange: Array<Date>;
   setDateRange: React.Dispatch<React.SetStateAction<Array<Date>>>;
 };
+
+export interface Order {
+  uuid: string;
+  orderNumber: string;
+  patient: Patient;
+  concept: Concept;
+  action: string;
+  careSetting: {
+    name: string;
+  };
+  orderer: Orderer;
+  urgency: string;
+  instructions: any;
+  bodySite: any;
+  laterality: string;
+  commentToFulfiller: any;
+  procedures: Procedure[];
+  display: string;
+  fulfillerStatus: string;
+  dateStopped: any;
+  scheduledDate: any;
+  dateActivated: string;
+  fulfillerComment: string;
+  isApproved: boolean;
+}
+interface Patient {
+  uuid: string;
+  display: string;
+  identifiers: Identifier[];
+  person: Person;
+}
+interface Identifier {
+  identifier: string;
+  identifierType: {
+    display: string;
+  };
+  location: Location;
+}
+
+interface Location {
+  display: string;
+}
+export interface Person {
+  uuid: string;
+  display: string;
+  age: number;
+  gender: string;
+}
+
+interface Orderer {
+  uuid: string;
+  display: string;
+}
+
+export interface Procedure {
+  uuid: string;
+  procedureOrder: ProcedureOrder;
+  procedureReason: any;
+  category: any;
+  bodySite: any;
+  partOf: any;
+  startDatetime: any;
+  endDatetime: any;
+  status: string;
+  statusReason: any;
+  outcome: string;
+  procedureReport: string;
+  location: any;
+  encounters: any[];
+  resourceVersion: string;
+}
+interface ProcedureOrder {
+  uuid: string;
+  orderNumber: string;
+  accessionNumber: any;
+  action: string;
+  previousOrder: any;
+  dateActivated: string;
+  scheduledDate: any;
+  dateStopped: any;
+  autoExpireDate: any;
+  encounter: Encounter;
+  orderReason: any;
+  orderReasonNonCoded: string;
+  orderType: OrderType;
+  urgency: string;
+  instructions: any;
+  commentToFulfiller: any;
+  display: string;
+  specimenSource: any;
+  laterality: string;
+  clinicalHistory: any;
+  frequency: any;
+  numberOfRepeats: any;
+  specimenType: any;
+  bodySite: any;
+  relatedProcedure: any;
+  type: string;
+  resourceVersion: string;
+}
+
+interface Encounter {
+  uuid: string;
+  display: string;
+}
+
+interface OrderType {
+  uuid: string;
+  display: string;
+  name: string;
+}
diff --git a/packages/esm-imaging-orders-app/translations/en.json b/packages/esm-imaging-orders-app/translations/en.json
@@ -6,7 +6,6 @@
   "amendAnOrder": "Amend the order",
   "amendRequest": "Amend request",
   "amendSuccessfully": "You have successfully returned the order to worklist",
-  "anyAdditionalNotes": "Any additional notes",
   "approvedOrders": "Approved Orders",
   "bodySite": "Body Site",
   "cancel": "Cancel",
@@ -21,16 +20,20 @@
   "errorPicking an order', 'Error Picking an Order": "",
   "errorRejecting order', 'Error Rejecting a order": "",
   "errorSavingReport": "Error occurred while saving the report",
+  "findings": "Findings",
   "gender": "Gender",
+  "identifier": "Identifier",
   "imagingOrders": "Imaging Orders",
   "imagingOrderSaveSuccess": "Imaging order saved successfully",
   "imagingOrderSaveSuccessSubtitle": "Imaging order saved successfully. Report transitioned to awaiting approval.",
   "imagingReport": "Imaging Report",
   "imagingReportForm": "Imaging Report Form",
   "imagingReports": "Imaging report",
-  "imagingResults": "Imaging Results",
+  "impressions": "Impressions",
+  "kenya": "Kenya",
   "laterality": "Laterality",
   "loading": "Loading",
+  "name": "Name",
   "NoInstructionLeft": "No instructions are provided.",
   "NoOrdersFound": "There are no orders to display for this patient",
   "notes": "Enter Comments ",
@@ -56,6 +59,7 @@
   "printError": "Error",
   "printReport": "Print report",
   "priority": "Priority",
+  "procedure": "Procedure",
   "referredTests": "Referred Tests",
   "rejectImagingOrder": "Reject Imaging Order",
   "rejectionReason": "Rejection Reason:",
@@ -68,7 +72,6 @@
   "saveOrder": "Save order",
   "scheduleDate": "Scheduled date",
   "searchByPatientName": "Search by patient name",
-  "status": "Status",
   "submitting": "Submitting...",
   "successfullyRejected": "You have successfully rejected an Order with OrderNumber {{orderNumber}} ",
   "testOrdered": "Test Ordered",