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

package/src/discharge-printouts/discharge-summary.tsx

@@ -0,0 +1,170 @@
+import { InlineLoading, InlineNotification } from '@carbon/react';
+import { useEmrConfiguration, usePatient, useSession } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import React, { type FC, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useEncounterDetails } from '../hooks/useIpdDischargeEncounter';
+import { useProvider } from '../ward-workspace/admit-patient-form-workspace/patient-admission.resources';
+import {
+  DATE_FORMART,
+  getTreatmentDisplayText,
+  usePatientDiagnosis,
+  usePatientOrders,
+} from './discharge-printout.resource';
+import styles from './discharge-printouts.scss';
+import FieldInput from './field-input';
+import LabResults from './lab-results';
+
+type DischargeSummaryProps = {
+  dischargeEncounterUuid: string;
+  patient: {
+    uuid: string;
+    openmrsId: string;
+    name: string;
+  };
+};
+
+const DischargeSummary: FC<DischargeSummaryProps> = ({ dischargeEncounterUuid, patient: _patient }) => {
+  const { t } = useTranslation();
+  const { encounter, error, isLoading } = useEncounterDetails(dischargeEncounterUuid);
+  const { isLoading: isLoadingPatient, patient, error: patientError } = usePatient(_patient.uuid);
+  const {
+    isLoading: isLoadingDiagnosis,
+    error: diagnosisError,
+    display: diagnoses,
+  } = usePatientDiagnosis(dischargeEncounterUuid);
+  const session = useSession();
+  const { error: errorProvider, isLoading: isLoadingProvider, provider } = useProvider(session.currentProvider.uuid);
+  const { emrConfiguration, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } = useEmrConfiguration();
+  const {
+    isLoading: isLoadingOders,
+    error: orderserror,
+    drugOrders,
+    testOrders,
+    complaints,
+    drugReactions,
+    orderEncounters,
+    dischargeinstructions,
+    physicalExaminations,
+  } = usePatientOrders(dischargeEncounterUuid);
+  const admissionDate = useMemo(() => {
+    const admisionEncounter = encounter?.visit?.encounters?.find(
+      (e) => e.encounterType.uuid === emrConfiguration?.admissionEncounterType?.uuid,
+    );
+    if (!admisionEncounter || !admisionEncounter.encounterDatetime) return null;
+    return admisionEncounter.encounterDatetime;
+  }, [encounter, emrConfiguration]);
+
+  if (
+    isLoading ||
+    isLoadingPatient ||
+    isLoadingEmrConfiguration ||
+    isLoadingDiagnosis ||
+    isLoadingProvider ||
+    isLoadingOders
+  )
+    return <InlineLoading />;
+  if (error || patientError || errorFetchingEmrConfiguration || diagnosisError || errorProvider || orderserror)
+    return (
+      <InlineNotification
+        kind="error"
+        title={
+          error?.message ??
+          patientError?.message ??
+          errorFetchingEmrConfiguration?.message ??
+          diagnosisError?.message ??
+          errorProvider?.message ??
+          orderserror?.message
+        }
+      />
+    );
+  return (
+    <div className={styles.content}>
+      <div className={styles.header}>
+        <h5>{session.sessionLocation.display}</h5>
+        <h5>{t('dischargeSummary', 'Discharge Summary')}</h5>
+      </div>
+      <div className={styles.cols3}>
+        <FieldInput name={t('name', 'Name')} value={_patient.name} />
+        <FieldInput name={t('ipNo', 'IP No')} value={_patient.openmrsId} />
+        <FieldInput
+          name={t('age', 'Age')}
+          value={`${Math.abs(dayjs(patient.birthDate).diff(dayjs(), 'years'))} years`}
+        />
+      </div>
+      <div className={styles.cols3}>
+        <FieldInput name={t('sex', 'Sex')} value={patient.gender} />
+        <FieldInput name={t('dateOfAdmissionAbrv', 'DOA')} value={dayjs(admissionDate).format(DATE_FORMART)} />
+        <FieldInput
+          name={t('dateOfDischargeAbrv', 'DOD')}
+          value={dayjs(encounter.encounterDatetime).format(DATE_FORMART)}
+        />
+      </div>
+      <div className={styles.cols2}>
+        <FieldInput name={t('nameOfConsultant', 'Name of consultant')} value={provider?.display?.split('-')?.at(-1)} />
+        <FieldInput name={t('department', 'Department')} value={encounter.location?.display} />
+      </div>
+
+      <div>
+        <strong className={styles.txtUpper}>{t('diagnosis', 'Diagnosis')}</strong>
+        <p className={styles.txtTitle}>{diagnoses ?? t('noDiagnoses', 'No Diagnoses')}</p>
+      </div>
+      <div>
+        <strong className={styles.txtUpper}>{t('history', 'History')}</strong>
+        <p>
+          {`${complaints ? 'Presented with ' + complaints + '.' : ''}${
+            drugReactions
+              ? t('knownDrugAllergies', 'Known drug allergies') + ': ' + drugReactions
+              : t('noKnownDrugAllergies', 'No known drug allergies')
+          }`}
+        </p>
+      </div>
+      <div>
+        <strong className={styles.txtUpper}>{t('physicalExamination', 'Physical Examination')}</strong>
+        {physicalExaminations?.length ? (
+          physicalExaminations?.map((examination, i) => (
+            <p key={i} className={styles.txtTitle}>
+              {examination}
+            </p>
+          ))
+        ) : (
+          <p>{t('noExaminations', 'No Examinations')}</p>
+        )}
+      </div>
+      <div>
+        <strong className={styles.txtUpper}>{t('investigation', 'Investigation')}</strong>
+        <p>
+          {testOrders.map((order) => (
+            <LabResults
+              order={order}
+              key={order.uuid}
+              labEncounter={orderEncounters.find((e) => e.uuid === order.encounter.uuid)}
+            />
+          ))}
+        </p>
+      </div>
+      <div>
+        <strong className={styles.txtUpper}>{t('treatment', 'Treatment')}</strong>
+        <div>
+          {drugOrders.map((order) => (
+            <p key={order.uuid}>{getTreatmentDisplayText(order)}</p>
+          ))}
+        </div>
+      </div>
+      <div>
+        <strong className={styles.txtUpper}>{t('dischargeInstructions', 'Discharge Instructions')}</strong>
+        <p>{dischargeinstructions ?? t('noInstructions', 'No instructions')}</p>
+      </div>
+      <div className={styles.cols2}>
+        <FieldInput name={t('name', 'Name')} value={provider?.display?.split('-')?.at(-1)} />
+        <FieldInput name={t('signature', 'Signature')} />
+      </div>
+      <div className={styles.cols2}>
+        <FieldInput name={t('destination', 'Destination')} value={t('discharge', 'Discharge')} />
+        <FieldInput name={t('date', 'Date')} value={dayjs().format(DATE_FORMART)} />
+      </div>
+    </div>
+  );
+};
+
+export default DischargeSummary;

package/src/discharge-printouts/field-input.tsx

@@ -0,0 +1,21 @@
+import React, { type FC } from 'react';
+import styles from './discharge-printouts.scss';
+type FieldInputProps = {
+  name: string;
+  value?: string;
+  delimiter?: string;
+};
+
+const FieldInput: FC<FieldInputProps> = ({ name: fieldName, value, delimiter = ':' }) => {
+  return (
+    <div className={styles.field}>
+      <span className={styles.name}>
+        {fieldName}
+        {delimiter && `${delimiter} `}
+      </span>
+      <strong className={styles.value}>{value}</strong>
+    </div>
+  );
+};
+
+export default FieldInput;

package/src/discharge-printouts/gate-pass-printout.tsx

@@ -0,0 +1,125 @@
+import { InlineLoading, InlineNotification } from '@carbon/react';
+import { useEmrConfiguration, usePatient, useSession } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import React, { useMemo, type FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useEncounterDetails } from '../hooks/useIpdDischargeEncounter';
+import styles from './discharge-printouts.scss';
+import FieldInput from './field-input';
+import { DATE_FORMART, TIME_FORMART } from './discharge-printout.resource';
+
+type GatePassPrintoutProps = {
+  dischargeEncounterUuid: string;
+  patient: {
+    uuid: string;
+    openmrsId: string;
+    name: string;
+  };
+};
+
+const GatePassPrintout: FC<GatePassPrintoutProps> = ({ dischargeEncounterUuid, patient: _patient }) => {
+  const { t } = useTranslation();
+
+  const { encounter, error, isLoading } = useEncounterDetails(dischargeEncounterUuid);
+  const { isLoading: isLoadingPatient, patient, error: patientError } = usePatient(_patient.uuid);
+  const session = useSession();
+  const { emrConfiguration, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } = useEmrConfiguration();
+
+  const admissionDate = useMemo(() => {
+    const admisionEncounter = encounter?.visit?.encounters?.find(
+      (e) => e.encounterType.uuid === emrConfiguration?.admissionEncounterType?.uuid,
+    );
+    if (!admisionEncounter || !admisionEncounter.encounterDatetime) return null;
+    return admisionEncounter.encounterDatetime;
+  }, [encounter, emrConfiguration]);
+
+  if (isLoading || isLoadingPatient || isLoadingEmrConfiguration) return <InlineLoading />;
+  if (error || patientError || errorFetchingEmrConfiguration)
+    return (
+      <InlineNotification
+        kind="error"
+        title={error?.message ?? patientError?.message ?? errorFetchingEmrConfiguration?.message}
+      />
+    );
+
+  return (
+    <div className={styles.content}>
+      <div className={styles.header}>
+        <h5>{session?.sessionLocation?.display}</h5>
+        <h5>{t('wardGatePass', 'Ward gate pass')}</h5>
+      </div>
+      <div className={styles.cols4}>
+        <FieldInput name={t('paperNo', 'Paper No')} value={_patient.openmrsId} />
+        <FieldInput name={t('patientNo', 'Patient No')} value={_patient.openmrsId} />
+        <FieldInput name={t('date', 'Date')} value={dayjs().format(DATE_FORMART)} />
+        <FieldInput name={t('time', 'Time')} value={dayjs().format(TIME_FORMART)} />
+      </div>
+      <div className={styles.cols2}>
+        <FieldInput name={t('patientNames', 'Patient names')} value={_patient.name} />
+        <FieldInput
+          name={t('age', 'Age')}
+          value={`${Math.abs(dayjs(patient.birthDate).diff(dayjs(), 'years'))} years`}
+        />
+      </div>
+      <div className={styles.cols2}>
+        <FieldInput name={t('dateOfAdmissionAbrv', 'DOA')} value={dayjs(admissionDate).format(DATE_FORMART)} />
+        <FieldInput
+          name={t('dateOfDischargeAbrv', 'DOD')}
+          value={dayjs(encounter.encounterDatetime).format(DATE_FORMART)}
+        />
+      </div>
+
+      <div>
+        <p>{t('methodsOfPayment', 'Method of payment (tick as approximately)')}</p>
+        <br />
+        <div className={styles.cols7}>
+          <span>{t('cashCheckBox', 'Cash [ ]')}</span>
+          <span>{t('chequCheckBox', 'Cheque [ ]')}</span>
+          <span>{t('shaCheckBox', 'SHA [ ]')}</span>
+          <span>{t('scheme', 'Scheme [ ]')}</span>
+          <span>{t('mrm', 'M.R.M [ ]')}</span>
+          <FieldInput name={t('other', 'Other')} />
+          <FieldInput name="." delimiter="." />
+        </div>
+      </div>
+      <p>
+        <strong>{t('approvedBy', 'Approved By')}</strong>
+      </p>
+      <div className={styles.cols4}>
+        <FieldInput name={t('accountOfficer', 'Account Ofiicer')} />
+        <FieldInput name="." delimiter="." />
+        <FieldInput name={t('sign', 'Sign')} />
+        <FieldInput name={t('date', 'Date')} />
+      </div>
+      <div className={styles.cols4}>
+        <FieldInput name={t('healthRecordOfficer', 'Health Record Officer')} />
+        <FieldInput name="." delimiter="." />
+        <FieldInput name={t('sign', 'Sign')} />
+        <FieldInput name={t('date', 'Date')} />
+      </div>
+      <div className={styles.cols4}>
+        <FieldInput name={t('nurseInCharge', 'Nurse In Charge')} />
+        <FieldInput name="." delimiter="." />
+        <FieldInput name={t('sign', 'Sign')} />
+        <FieldInput name={t('date', 'Date')} />
+      </div>
+      <div className={styles.cols4}>
+        <FieldInput name={t('securityGuard', 'Security Guard')} />
+        <FieldInput name="." delimiter="." />
+        <FieldInput name={t('sign', 'Sign')} />
+        <FieldInput name={t('date', 'Date')} />
+      </div>
+      <p>
+        <strong>{t('note', 'N/B')}:</strong>
+        <span>
+          {t(
+            'noteText',
+            'This form should be filled in duplicate, one copy to be retained in the ward and the other to be left in the main gate',
+          )}
+        </span>
+      </p>
+    </div>
+  );
+};
+
+export default GatePassPrintout;

package/src/discharge-printouts/lab-results.tsx

@@ -0,0 +1,96 @@
+import { InlineLoading, InlineNotification } from '@carbon/react';
+import { type Encounter } from '@openmrs/esm-framework';
+import type { Order } from '@openmrs/esm-patient-common-lib';
+import React, { type FC, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { getObservationDisplayValue, useOrderConceptByUuid } from './discharge-printout.resource';
+import styles from './discharge-printouts.scss';
+type LabResultsProps = {
+  order: Order;
+  labEncounter?: Encounter;
+};
+
+const LabResults: FC<LabResultsProps> = ({ order, labEncounter: encounter }) => {
+  const { concept, isLoading: isLoadingTestConcepts, error } = useOrderConceptByUuid(order?.concept?.uuid);
+  const testResultObs = useMemo(() => {
+    if (!encounter || !concept) return null;
+    return encounter.obs?.find((obs) => obs.concept.uuid === concept.uuid);
+  }, [concept, encounter]);
+  const { t } = useTranslation();
+  const EMPTY_TEXT = t('noResults', 'No results');
+
+  const testResults = useMemo(() => {
+    if (!concept) return [];
+
+    // For panel tests (with set members)
+    if (concept.setMembers && concept.setMembers.length > 0) {
+      return concept.setMembers.map((memberConcept) => {
+        const memberObs = testResultObs?.groupMembers?.find((obs) => obs.concept.uuid === memberConcept.uuid);
+        let resultValue: string;
+        if (memberObs) {
+          resultValue = getObservationDisplayValue(memberObs.value ?? (memberObs as any));
+        } else {
+          resultValue = EMPTY_TEXT;
+        }
+
+        return {
+          id: memberConcept.uuid,
+          testType: memberConcept.display || EMPTY_TEXT,
+          result: resultValue,
+          normalRange:
+            memberConcept.hiNormal && memberConcept.lowNormal
+              ? `${memberConcept.lowNormal} - ${memberConcept.hiNormal}`
+              : 'N/A',
+        };
+      });
+    }
+
+    // For single tests (no set members)
+    let resultValue: string;
+    if (testResultObs) {
+      resultValue = getObservationDisplayValue(testResultObs.value ?? (testResultObs as any));
+    } else {
+      resultValue = EMPTY_TEXT;
+    }
+
+    return [
+      {
+        id: concept.uuid,
+        testType: concept.display || EMPTY_TEXT,
+        result: resultValue,
+        normalRange: concept.hiNormal && concept.lowNormal ? `${concept.lowNormal} - ${concept.hiNormal}` : 'N/A',
+      },
+    ];
+  }, [concept, testResultObs, EMPTY_TEXT]);
+
+  if (isLoadingTestConcepts)
+    return (
+      <InlineLoading
+        status="active"
+        iconDescription="Loading"
+        description={t('loadinglabresults', 'Loading lab results') + '...'}
+      />
+    );
+
+  if (error)
+    return (
+      <InlineNotification
+        kind="error"
+        title={t('labResultError', 'Error loading lab results')}
+        subtitle={error?.message}
+      />
+    );
+
+  return (
+    <div key={order.uuid} className={styles.txtTitle}>
+      {testResults.map((res) => (
+        <p key={res.id}>
+          <strong>{res.testType.toLowerCase()}: </strong>
+          <span>{res.result}</span>
+        </p>
+      ))}
+    </div>
+  );
+};
+
+export default LabResults;

package/src/hooks/useIpdDischargeEncounter.ts

@@ -94,10 +94,12 @@ export const useIpdDischargeEncounter = () => {
   const { isLoadingLocation, location, errorFetchingLocation } = useWardLocation();
   const pageSizes = [10, 20, 50, 100];
   const [currPageSize, setCurrPageSize] = useState(10);
-  const urls =
-    !location || emrConfiguration
-      ? null
-      : `${fhirBaseUrl}/Encounter?_summary=data&type=${emrConfiguration?.exitFromInpatientEncounterType}&location=${location?.uuid}`;
+
+  const urls = useMemo(() => {
+    if (!location || !emrConfiguration?.exitFromInpatientEncounterType?.uuid) return null;
+    else
+      return `${fhirBaseUrl}/Encounter?_summary=data&type=${emrConfiguration?.exitFromInpatientEncounterType?.uuid}&location=${location?.uuid}`;
+  }, [location, emrConfiguration]);
   const { data, isLoading, error, paginated, currentPage, goTo, totalCount, currentPageSize } =
     useFhirPagination<Entry>(urls, currPageSize);
   const encounters = useMemo(() => {
@@ -126,10 +128,10 @@ export const useIpdDischargeEncounter = () => {
   };
 };
 
-export const useEncounterDetails = (encounterUuid: string) => {
-  const rep =
-    'custom:(uuid,display,encounterDatetime,visit:(uuid,display,encounters:(uuid,display,encounterType:(uuid,display),encounterDatetime)))';
-  const url = `${restBaseUrl}/encounter/${encounterUuid}?v=${rep}`;
+export const useEncounterDetails = (encounterUuid: string, rep?: string) => {
+  const _rep =
+    'custom:(uuid,display,location:(display),encounterDatetime,visit:(uuid,display,encounters:(uuid,display,encounterType:(uuid,display),encounterDatetime)))';
+  const url = `${restBaseUrl}/encounter/${encounterUuid}?v=${rep ?? _rep}`;
   const { data, error, isLoading } = useSWR<FetchResponse<Encounter>>(url, openmrsFetch);
   return {
     isLoading,

package/src/index.ts

@@ -128,6 +128,10 @@ export const wardPatientWorkspaceBanner = getAsyncLifecycle(
   () => import('./ward-workspace/patient-banner/patient-banner.component'),
   options,
 );
+export const patientDischargeDocumentPreview = getAsyncLifecycle(
+  () => import('./discharge-printouts/discharge-printout.preview-modal'),
+  options,
+);
 
 export function startupApp() {
   registerBreadcrumbs([]);

package/src/routes.json

@@ -85,6 +85,10 @@
       "name": "maternal-ward",
       "slot": "maternal-ward"
     },
+    {
+      "component": "patientDischargeDocumentPreview",
+      "name": "patient-discharge-document-preview-modal"
+    },
     {
       "component": "wardPatientWorkspaceBanner",
       "name": "ward-patient-workspace-banner",

package/src/ward-patients/admitted-patients.tsx

@@ -18,7 +18,7 @@ import {
   parseDate,
   useAppContext,
   useConfig,
-  usePagination
+  usePagination,
 } from '@openmrs/esm-framework';
 import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
 import dayjs from 'dayjs';
@@ -109,7 +109,7 @@ const AdmittedPatients = () => {
         action: (
           <OverflowMenu size={'sm'} flipped>
             <OverflowMenuItem
-              itemText={t('tranfer', 'Tranfer')}
+              itemText={t('interWardTransfer', 'Interward Trasfer')}
               onClick={() =>
                 launchWorkspace('patient-transfer-swap-workspace', {
                   workspaceTitle: 'Trasfer',

package/src/ward-patients/discharge-in-patients.tsx

@@ -1,43 +1,40 @@
 import {
+  DataTable,
   OverflowMenu,
   OverflowMenuItem,
-  DataTable,
-  TableContainer,
+  Pagination,
   Table,
-  TableHead,
-  TableRow,
-  TableHeader,
   TableBody,
   TableCell,
-  Pagination,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
 } from '@carbon/react';
-import React, { useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { EmptyState } from './table-state-components';
 import {
   type Encounter,
   formatDatetime,
-  launchWorkspace,
-  type OpenmrsResource,
   parseDate,
   useAppContext,
   useConfig,
   useEmrConfiguration,
   usePagination,
 } from '@openmrs/esm-framework';
-import { type WardPatient, type WardViewContext } from '../types';
-import { bedLayoutToBed, getOpenmrsId } from '../ward-view/ward-view.resource';
-import dayjs from 'dayjs';
 import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+import dayjs from 'dayjs';
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { type WardConfigObject } from '../config-schema';
-import { HyperLinkPatientCell, PatientBillStatus, UnAssignPatientBedAction } from './patient-cells';
+import { type WardPatient, type WardViewContext } from '../types';
+import { bedLayoutToBed, getOpenmrsId } from '../ward-view/ward-view.resource';
 import { usePatientDischarge } from '../ward-workspace/kenya-emr-patient-discharge/patient-discharge.resource';
+import { HyperLinkPatientCell, PatientBillStatus, UnAssignPatientBedAction } from './patient-cells';
+import { EmptyState } from './table-state-components';
 
 const DischargeInPatients = () => {
   const { t } = useTranslation();
   const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
   const { bedLayouts, wardAdmittedPatientsWithBed, isLoading } = wardPatientGroupDetails ?? {};
-  //TODO remove (added for demo purposes)
   const { emrConfiguration, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } = useEmrConfiguration();
   const { handleDischarge } = usePatientDischarge();
 
@@ -130,15 +127,22 @@ const DischargeInPatients = () => {
             <UnAssignPatientBedAction
               patientUuid={patient.patient.uuid}
               encounterUuid={encounterAssigningToCurrentInpatientLocation?.uuid}
+              loading={wardPatientGroupDetails?.admissionLocationResponse?.isLoading || isLoadingEmrConfiguration}
               onClick={async () => {
-                await handleDischarge({} as Encounter, patient, emrConfiguration as Record<string, any>, patient.visit);
+                await handleDischarge(
+                  {} as Encounter,
+                  patient,
+                  emrConfiguration as Record<string, any>,
+                  patient.visit,
+                  wardPatientGroupDetails?.admissionLocationResponse?.admissionLocation?.ward,
+                );
               }}
             />
           </OverflowMenu>
         ),
       };
     });
-  }, [results, t, emrConfiguration, handleDischarge]);
+  }, [results, t, emrConfiguration, handleDischarge, wardPatientGroupDetails, isLoadingEmrConfiguration]);
 
   if (!patients.length) return <EmptyState message={t('noDischargeInpatients', 'No Discharge in patients')} />;
 

package/src/ward-patients/discharge-patients.tsx

@@ -16,7 +16,7 @@ import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { EmptyState, ErrorState } from './table-state-components';
 import { useIpdDischargeEncounter } from '../hooks/useIpdDischargeEncounter';
-import { formatDatetime, parseDate } from '@openmrs/esm-framework';
+import { formatDatetime, parseDate, showModal } from '@openmrs/esm-framework';
 import {
   HyperLinkPatientCell,
   PatientAdmissionDateCell,
@@ -24,6 +24,8 @@ import {
   PatientDayInWardCell,
   PatientGenderCell,
 } from './patient-cells';
+import DischargeSummary from '../discharge-printouts/discharge-summary';
+import GatePassPrintout from '../discharge-printouts/gate-pass-printout';
 
 const DischargePatients = () => {
   const { t } = useTranslation();
@@ -64,8 +66,26 @@ const DischargePatients = () => {
         daysAdmitted: <PatientDayInWardCell patientUuid={encounter.patient.uuid} encounterUuid={encounter.uuid} />,
         action: (
           <OverflowMenu size={'sm'} flipped>
-            <OverflowMenuItem itemText={t('dischargeSummary', 'Discharge Summary')} onClick={() => {}} />
-            <OverflowMenuItem itemText={t('gatePass', 'Gate Pass')} onClick={() => {}} />
+            <OverflowMenuItem
+              itemText={t('dischargeSummary', 'Discharge Summary')}
+              onClick={() => {
+                const dispose = showModal('patient-discharge-document-preview-modal', {
+                  size: 'lg',
+                  onClose: () => dispose(),
+                  printout: <DischargeSummary dischargeEncounterUuid={encounter.uuid} patient={encounter.patient} />,
+                });
+              }}
+            />
+            <OverflowMenuItem
+              itemText={t('gatePass', 'Gate Pass')}
+              onClick={() => {
+                const dispose = showModal('patient-discharge-document-preview-modal', {
+                  size: 'lg',
+                  onClose: () => dispose(),
+                  printout: <GatePassPrintout dischargeEncounterUuid={encounter.uuid} patient={encounter.patient} />,
+                });
+              }}
+            />
           </OverflowMenu>
         ),
       };

package/src/ward-patients/patient-cells.tsx

@@ -1,16 +1,8 @@
 import { InlineLoading, OverflowMenuItem, Tag } from '@carbon/react';
-import {
-  ConfigurableLink,
-  formatDatetime,
-  parseDate,
-  useConfig,
-  useEmrConfiguration,
-  usePatient,
-} from '@openmrs/esm-framework';
+import { ConfigurableLink, formatDatetime, parseDate, useEmrConfiguration, usePatient } from '@openmrs/esm-framework';
 import dayjs from 'dayjs';
 import React, { type FC, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { type WardConfigObject } from '../config-schema';
 import { useEncounterDetails } from '../hooks/useIpdDischargeEncounter';
 import { usePatientBills } from '../ward-workspace/kenya-emr-patient-discharge/patient-discharge.resource';
 
@@ -127,11 +119,13 @@ export const PatientBillStatus: FC<PatientAdmissionCellProps> = ({ patientUuid,
 
 type UnAssignPatientBedActionProps = PatientAdmissionCellProps & {
   onClick?: () => void;
+  loading?: boolean;
 };
 export const UnAssignPatientBedAction: FC<UnAssignPatientBedActionProps> = ({
   encounterUuid,
   patientUuid,
   onClick,
+  loading,
 }) => {
   const { encounter, error, isLoading } = useEncounterDetails(encounterUuid);
   const { t } = useTranslation();
@@ -156,7 +150,7 @@ export const UnAssignPatientBedAction: FC<UnAssignPatientBedActionProps> = ({
     dailyBedFeeSettled,
   } = usePatientBills(patientUuid, startDate?.toDate(), endDateDate.toDate());
 
-  if (isLoading || isLoadingBills) return <InlineLoading />;
+  if (isLoading || isLoadingBills || loading) return <InlineLoading />;
   if (error || billsError) return null;
   if (bills.length === 0) return null;
   if (pendingBills.length > 0) return null;