@kenyaemr/esm-ward-app 8.5.1-pre.37 → 8.5.1-pre.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-ward-app",
-  "version": "8.5.1-pre.37",
+  "version": "8.5.1-pre.44",
   "description": "Ward and bed management module for O3",
   "browser": "dist/kenyaemr-esm-ward-app.js",
   "main": "src/index.ts",
@@ -42,6 +42,7 @@
     "classnames": "^2.3.2",
     "lodash-es": "^4.17.15",
     "react-hook-form": "^7.54.0",
+    "react-to-print": "^2.14.13",
     "zod": "3.24.1"
   },
   "peerDependencies": {

package/src/config-schema.ts

@@ -300,6 +300,11 @@ export const configSchema: ConfigSchema = {
       emmergencyDoctorPhoneNumber: '163152AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
       admissionDateTime: '1640AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
       chiefComplaint: '5219AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      complaint: '160531AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      physicalExamination: '162737AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      dischargeInstruction: '160632AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      drugReaction: '162747AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      reactingDrug: '1193AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
     },
   },
   diagnosisConceptSourceUud: {
@@ -350,6 +355,21 @@ export const configSchema: ConfigSchema = {
     _type: Type.UUID,
     _default: '37ce491f-b2dd-4433-b203-efebb8ba1469',
   },
+  drugOrderEncounterType: {
+    _description: 'Drug Order encounter type Uuid',
+    _type: Type.UUID,
+    _default: '7df67b83-1b84-4fe2-b1b7-794b4e9bfcc3',
+  },
+  clinicalConsultationEncounterType: {
+    _description: 'Clinical consultation encounter type Uuid',
+    _type: Type.UUID,
+    _default: '465a92f2-baf8-42e9-9612-53064be868e8',
+  },
+  doctorsNoteEncounterType: {
+    _description: 'Doctors note encounter type Uuid',
+    _type: Type.UUID,
+    _default: '14b36860-5033-4765-b91b-ace856ab64c2',
+  },
 };
 
 export interface WardConfigObject {
@@ -382,11 +402,19 @@ export interface WardConfigObject {
     emmergencyDoctorPhoneNumber: string;
     admissionDateTime: string;
     chiefComplaint: string;
+    physicalExamination: string;
+    dischargeInstruction: string;
+    complaint: string;
+    drugReaction: string;
+    reactingDrug: string;
   };
   diagnosisConceptSourceUud: string;
   inpatientAdmissionEncounterProviderRole: string;
   mortuaryAdmissionLoctionTagUuid: string;
   dailyBedFeeBillableService: string;
+  drugOrderEncounterType: string;
+  clinicalConsultationEncounterType: string;
+  doctorsNoteEncounterType: string;
 }
 
 export interface PendingItemsElementConfig {

package/src/discharge-printouts/discharge-printout.preview-modal.tsx

@@ -0,0 +1,40 @@
+import { ModalHeader , ModalBody , ModalFooter , ButtonSet , Button } from '@carbon/react';
+import React, { type FC, type ReactNode, useRef } from 'react';
+import styles from './discharge-printouts.scss';
+import { useTranslation } from 'react-i18next';
+import { useReactToPrint } from 'react-to-print';
+
+type DischargePrintoutPreviewModalProps = {
+  printout: ReactNode;
+  onClose: () => void;
+};
+const DischargePrintoutPreviewModal: FC<DischargePrintoutPreviewModalProps> = ({ onClose, printout }) => {
+  const { t } = useTranslation();
+  const ref = useRef<HTMLDivElement>(null);
+
+  const handlePrint = useReactToPrint({
+    content: () => ref.current,
+  });
+  return (
+    <React.Fragment>
+      <ModalHeader className={styles.sectionHeader} closeModal={onClose}>
+        {t('printPreview', 'Print Preview')}
+      </ModalHeader>
+      <ModalBody>
+        <div ref={ref}>{printout}</div>
+      </ModalBody>
+      <ModalFooter>
+        <ButtonSet className={styles.buttonSet}>
+          <Button kind="secondary" onClick={onClose} className={styles.button}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button kind="primary" onClick={handlePrint} className={styles.button}>
+            {t('print', 'Print')}
+          </Button>
+        </ButtonSet>
+      </ModalFooter>
+    </React.Fragment>
+  );
+};
+
+export default DischargePrintoutPreviewModal;

package/src/discharge-printouts/discharge-printout.resource.ts

@@ -0,0 +1,335 @@
+import {
+  type Encounter,
+  type FetchResponse,
+  type Obs,
+  openmrsFetch,
+  type OpenmrsResource,
+  restBaseUrl,
+  useConfig,
+  type Visit,
+} from '@openmrs/esm-framework';
+import { type Order } from '@openmrs/esm-patient-common-lib';
+import { useMemo } from 'react';
+import useSWR from 'swr';
+import { type WardConfigObject } from '../config-schema';
+import { useEncounterDetails } from '../hooks/useIpdDischargeEncounter';
+export const DATE_FORMART = 'DD/MM/YYYY';
+export const TIME_FORMART = 'hh:mm A';
+
+const labConceptRepresentation =
+  'custom:(uuid,display,name,datatype,set,answers,hiNormal,hiAbsolute,hiCritical,lowNormal,lowAbsolute,lowCritical,units,allowDecimal,' +
+  'setMembers:(uuid,display,answers,datatype,hiNormal,hiAbsolute,hiCritical,lowNormal,lowAbsolute,lowCritical,units,allowDecimal,set,setMembers:(uuid)))';
+
+export const usePatientDiagnosis = (encounterUuid: string) => {
+  const customRepresentation =
+    'custom:(uuid,display,visit:(uuid,encounters:(uuid,diagnoses:(uuid,display,certainty,diagnosis:(coded:(uuid,display))))))';
+  const url = `${restBaseUrl}/encounter/${encounterUuid}?v=${customRepresentation}`;
+
+  const { data, error, isLoading } = useSWR<FetchResponse<{ visit: Visit }>>(url, openmrsFetch);
+
+  const diagnoses = useMemo(() => {
+    return (
+      data?.data?.visit?.encounters?.flatMap(
+        (encounter) =>
+          encounter.diagnoses.map((diagnosis) => ({
+            id: diagnosis.diagnosis.coded.uuid,
+            text: diagnosis.display,
+            certainty: diagnosis.certainty,
+          })) || [],
+      ) || []
+    );
+  }, [data]);
+  const display = useMemo(() => {
+    if (diagnoses?.length)
+      return diagnoses
+        .map((d) => d.text)
+        .join(', ')
+        ?.toLowerCase();
+    return null;
+  }, [diagnoses]);
+
+  return {
+    error,
+    isLoading,
+    diagnoses: (diagnoses ?? []) as Array<{ id: string; text: string; certainty: string }>,
+    display,
+  };
+};
+
+export function usePatientOrders(dischargeEncounterUuId: string) {
+  const rep =
+    'custom:(uuid,display,location:(display),encounterDatetime,visit:(uuid,display,encounters:(uuid,display,encounterType:(uuid,display),encounterDatetime,orders,obs)))';
+  const { encounter, error, isLoading } = useEncounterDetails(dischargeEncounterUuId, rep);
+  const {
+    drugOrderEncounterType,
+    clinicalConsultationEncounterType,
+    ipdDischargeEncounterTypeUuid,
+    doctorsNoteEncounterType,
+    conceptUuidForWardAdmission: concepts,
+  } = useConfig<WardConfigObject>();
+
+  const orderEncounters = useMemo(() => {
+    const encounters = (encounter?.visit?.encounters ?? []).filter(
+      (enc) => enc.encounterType.uuid === drugOrderEncounterType,
+    );
+    return encounters;
+  }, [encounter, drugOrderEncounterType]);
+
+  const clinicalConsultationEncounters = useMemo(() => {
+    const encounters = (encounter?.visit?.encounters ?? []).filter(
+      (enc) => enc.encounterType.uuid === clinicalConsultationEncounterType,
+    );
+    return encounters;
+  }, [encounter, clinicalConsultationEncounterType]);
+
+  const doctorsNoteEncounters = useMemo(() => {
+    const encounters = (encounter?.visit?.encounters ?? []).filter(
+      (enc) => enc.encounterType.uuid === doctorsNoteEncounterType,
+    );
+    return encounters;
+  }, [encounter, doctorsNoteEncounterType]);
+
+  const { drugorder, testorder } = useMemo<{ drugorder: Array<Order>; testorder: Array<Order> }>(
+    () =>
+      orderEncounters.reduce(
+        (prev, curr) => {
+          if (curr.orders?.length) {
+            prev['drugorder'].push(...curr.orders.filter((order) => order.type === 'drugorder'));
+            prev['testorder'].push(...curr.orders.filter((order) => order.type === 'testorder'));
+          }
+          return prev;
+        },
+        { drugorder: [], testorder: [] },
+      ),
+    [orderEncounters],
+  );
+
+  const complaints = useMemo(() => {
+    const obs = getComplaintsObs(doctorsNoteEncounters, concepts.complaint, concepts.chiefComplaint);
+    if (obs.length) return obs.map((o) => getObservationDisplayValue(o.value, null)).join(', ');
+    return null;
+  }, [doctorsNoteEncounters, concepts]);
+
+  const drugReactions = useMemo(() => {
+    const obs = getDrugReactions(clinicalConsultationEncounters, concepts.drugReaction, concepts.reactingDrug);
+    if (obs.length)
+      return obs
+        .map((o) => getObservationDisplayValue(o.value, null))
+        .join(', ')
+        .toLowerCase();
+    return null;
+  }, [clinicalConsultationEncounters, concepts]);
+
+  const ipdDischargeEncounter = useMemo<Encounter>(() => {
+    const encounters = (encounter?.visit?.encounters ?? []).find(
+      (enc) => enc.encounterType.uuid === ipdDischargeEncounterTypeUuid,
+    );
+    return encounters;
+  }, [encounter, ipdDischargeEncounterTypeUuid]);
+
+  const physicalExaminations = useMemo(() => {
+    const obs = doctorsNoteEncounters.reduce<Array<Obs>>((prev, cur) => {
+      if (cur.obs?.length) {
+        const obs = cur.obs.filter((o) => o.concept.uuid === concepts.physicalExamination);
+        prev.push(...obs);
+      }
+      return prev;
+    }, []);
+    return obs?.map((ob) => getObservationDisplayValue(ob.value, null)?.toLowerCase());
+  }, [doctorsNoteEncounters, concepts.physicalExamination]);
+
+  const dischargeinstructions = useMemo(() => {
+    const instructionObsValue = ipdDischargeEncounter?.obs?.find(
+      (o) => o.concept.uuid === concepts.dischargeInstruction,
+    )?.value;
+    return getObservationDisplayValue(instructionObsValue, null);
+  }, [ipdDischargeEncounter, concepts.dischargeInstruction]);
+
+  return {
+    isLoading,
+    error,
+    drugOrders: drugorder,
+    testOrders: testorder,
+    orderEncounters,
+    clinicalConsultationEncounters,
+    complaints,
+    drugReactions,
+    dischargeinstructions,
+    ipdDischargeEncounter,
+    physicalExaminations,
+  };
+}
+
+function getComplaintsObs(
+  encounters: Array<Encounter>,
+  complaintsConceptUuid: string,
+  chiefComplainConceptUuid: string,
+) {
+  return encounters.reduce<Array<Obs>>((prev, curr) => {
+    if (curr.obs.length) {
+      const complaintObs = curr.obs
+        .filter((o) => o.concept.uuid === complaintsConceptUuid && o.groupMembers)
+        .flatMap((o) => o.groupMembers)
+        .filter((o) => o.concept.uuid === chiefComplainConceptUuid);
+      prev.push(...complaintObs);
+    }
+    return prev;
+  }, []);
+}
+
+function getDrugReactions(encounters: Array<Encounter>, drugReactionsConceptUuid: string, drugConceptUuid: string) {
+  return encounters.reduce<Array<Obs>>((prev, curr) => {
+    if (curr.obs.length) {
+      const complaintObs = curr.obs
+        .filter((o) => o.concept.uuid === drugReactionsConceptUuid && o.groupMembers)
+        .flatMap((o) => o.groupMembers)
+        .filter((o) => o.concept.uuid === drugConceptUuid);
+      prev.push(...complaintObs);
+    }
+    return prev;
+  }, []);
+}
+type NullableNumber = number | null | undefined;
+export type ObservationValue =
+  | OpenmrsResource // coded
+  | number // numeric
+  | string // text or misc
+  | boolean
+  | null;
+
+export interface LabOrderConcept {
+  uuid: string;
+  display: string;
+  name?: ConceptName;
+  datatype: LabOrderConceptDatatype;
+  set: boolean;
+  version: string;
+  retired: boolean;
+  descriptions: Array<LabOrderConceptDescription>;
+  mappings?: Array<LabOrderConceptMapping>;
+  answers?: Array<OpenmrsResource>;
+  setMembers?: Array<LabOrderConcept>;
+  hiNormal?: NullableNumber;
+  hiAbsolute?: NullableNumber;
+  hiCritical?: NullableNumber;
+  lowNormal?: NullableNumber;
+  lowAbsolute?: NullableNumber;
+  lowCritical?: NullableNumber;
+  allowDecimal?: boolean | null;
+  units?: string;
+}
+
+export interface ConceptName {
+  display: string;
+  uuid: string;
+  name: string;
+  locale: string;
+  localePreferred: boolean;
+  conceptNameType: string;
+}
+
+export interface LabOrderConceptDatatype {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  hl7Abbreviation: string;
+  retired: boolean;
+  resourceVersion: string;
+}
+
+export interface LabOrderConceptDescription {
+  display: string;
+  uuid: string;
+  description: string;
+  locale: string;
+  resourceVersion: string;
+}
+
+export interface LabOrderConceptMapping {
+  display: string;
+  uuid: string;
+  conceptReferenceTerm: OpenmrsResource;
+  conceptMapType: OpenmrsResource;
+  resourceVersion: string;
+}
+export function useOrderConceptByUuid(uuid: string) {
+  const apiUrl = `${restBaseUrl}/concept/${uuid}?v=${labConceptRepresentation}`;
+
+  const { data, error, isLoading, isValidating, mutate } = useSWR<LabOrderConcept, Error>(uuid, fetchAllSetMembers);
+  /**
+   * We are fetching 2 levels of set members at one go.
+   */
+
+  const results = useMemo(
+    () => ({
+      concept: data,
+      isLoading,
+      error,
+      isValidating,
+      mutate,
+    }),
+    [data, error, isLoading, isValidating, mutate],
+  );
+
+  return results;
+}
+
+/**
+ * This function fetches all the different levels of set members for a concept,
+ * while fetching 2 levels of set members at one go.
+ * @param conceptUuid - The UUID of the concept to fetch.
+ * @returns The concept with all its set members and their set members.
+ */
+async function fetchAllSetMembers(conceptUuid: string): Promise<LabOrderConcept> {
+  const conceptResponse = await openmrsFetch<LabOrderConcept>(getUrlForConcept(conceptUuid));
+  let concept = conceptResponse.data;
+  const secondLevelSetMembers = concept.set
+    ? concept.setMembers
+        .map((member) => (member.set ? member.setMembers.map((lowerMember) => lowerMember.uuid) : []))
+        .flat()
+    : [];
+  if (secondLevelSetMembers.length > 0) {
+    const concepts = await Promise.all(secondLevelSetMembers.map((uuid) => fetchAllSetMembers(uuid)));
+    const uuidMap = concepts.reduce(
+      (acc, c) => {
+        acc[c.uuid] = c;
+        return acc;
+      },
+      {} as Record<string, LabOrderConcept>,
+    );
+    concept.setMembers = concept.setMembers.map((member) => {
+      if (member.set) {
+        member.setMembers = member.setMembers.map((lowerMember) => uuidMap[lowerMember.uuid]);
+      }
+      return member;
+    });
+  }
+
+  return concept;
+}
+
+function getUrlForConcept(conceptUuid: string) {
+  return `${restBaseUrl}/concept/${conceptUuid}?v=${labConceptRepresentation}`;
+}
+
+export const getObservationDisplayValue = (value: ObservationValue, defaultValue: string | null = '--'): string => {
+  if (value == null) return defaultValue;
+
+  switch (typeof value) {
+    case 'string':
+      return value.trim() || defaultValue;
+    case 'number':
+      return String(value);
+    case 'object':
+      if ('display' in value && typeof value.display === 'string') {
+        return value.display.trim() || defaultValue;
+      }
+      break;
+  }
+
+  return defaultValue;
+};
+export const getTreatmentDisplayText = (order: Order): string => {
+  return `${order.drug?.display} ${order.frequency.display} for ${order.duration} ${order.durationUnits.display}`;
+};

package/src/discharge-printouts/discharge-printouts.scss

@@ -0,0 +1,125 @@
+@use '@carbon/type';
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.sectionHeader {
+  @include type.type-style('heading-02');
+}
+
+.button {
+  height: layout.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 20%;
+}
+
+.buttonSet {
+  padding: 0rem;
+  margin-top: layout.$spacing-05;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: layout.$spacing-05;
+}
+
+.content {
+  padding: 6rem;
+  margin: 0 auto;
+  max-width: 800px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #000;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-06;
+
+  // Print-specific tweaks
+  @media print {
+    padding: 0.5in;
+    font-size: 12px;
+    line-height: 1.4;
+    color-adjust: exact; // prevents color fading during print
+    -webkit-print-color-adjust: exact;
+  }
+
+  // Optional: section separators
+  & + .content {
+    margin-top: 2rem;
+    border-top: 1px dashed #ccc;
+    padding-top: 1rem;
+  }
+}
+
+.header {
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  font-weight: bold;
+  padding-top: layout.$spacing-05;
+  padding-bottom: layout.$spacing-05;
+  gap: layout.$spacing-03;
+  text-transform: uppercase;
+}
+
+.field {
+  display: flex;
+  align-items: baseline;
+  gap: 0;
+  width: 100%;
+  flex-grow: 1;
+
+  > .name {
+    text-transform: uppercase;
+    margin-right: 8px;
+  }
+
+  > .value {
+    text-transform: uppercase;
+    border-bottom: 2px dotted black;
+    flex: 1;
+    line-height: 1.4;
+    display: inline-block;
+  }
+}
+
+@mixin gridByColumnCount($columns: 3, $gap: 1rem) {
+  display: grid;
+  grid-template-columns: repeat($columns, 1fr);
+  gap: $gap;
+  align-items: baseline;
+
+  @media print {
+    padding: 0;
+    gap: 0.5rem;
+    border: none;
+    grid-template-columns: repeat($columns, 1fr);
+  }
+}
+
+.txtUpper {
+  text-transform: uppercase;
+}
+
+.txtTitle {
+  text-transform: capitalize;
+}
+
+.cols4 {
+  @include gridByColumnCount(4);
+}
+
+.cols2 {
+  @include gridByColumnCount(2);
+}
+
+.cols3 {
+  @include gridByColumnCount(3);
+}
+
+.cols7 {
+  @include gridByColumnCount(7);
+}