@kenyaemr/esm-ward-app 8.5.1-pre.35 → 8.5.1-pre.41

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0","emrapi":"^2.0.0 || 2.0.0-SNAPSHOT"},"optionalBackendDependencies":{"bedmanagement":{"version":"^6.0.0 || 6.0.0-SNAPSHOT","feature":{"flagName":"bedmanagement-module","label":"Ward App Patient Service","description":"This module, if installed, provides services for managing patients admitted to the ward."}}},"extensions":[{"name":"ward-dashboard-link","component":"wardDashboardLink","slot":"homepage-dashboard-slot","meta":{"name":"ward","slot":"ward-dashboard-slot","title":"Wards"}},{"component":"root","name":"ward-dashboard","slot":"ward-dashboard-slot"},{"component":"wardView","name":"ward-view","slot":"ward-view-slot"},{"component":"wardPatientActionButtonExtension","name":"ward-patient-action-button","slot":"action-menu-ward-patient-items-slot"},{"component":"wardPatientNotesActionButtonExtension","name":"ward-inpatient-notes-form-action-button","slot":"action-menu-ward-patient-items-slot"},{"component":"coloredObsTagCardRowExtension","name":"colored-obs-tags-card-row","slot":"ward-patient-card-slot"},{"name":"transfer-swap-patient-siderail-button","slot":"action-menu-ward-patient-items-slot","component":"patientTransferAndSwapWorkspaceSiderailIcon"},{"name":"patient-discharge-siderail-button","slot":"action-menu-ward-patient-items-slot","component":"patientDischargeWorkspaceSideRailIcon"},{"name":"clinical-forms-workspace-siderail-button","component":"clinicalFormWorkspaceSideRailIcon","slot":"action-menu-ward-patient-items-slot"},{"name":"admission-requests-workspace-siderail-button","component":"admissionRequestsWorkspaceSideRailIcon","slot":"action-menu-ward-patient-admission-requests-items-slot"},{"name":"create-admission-request-workspace-siderail-button","component":"createAdmissionEncounterWorkspaceSideRailIcon","slot":"action-menu-ward-patient-admission-requests-items-slot"},{"component":"defaultWardView","name":"default-ward","slot":"default-ward"},{"component":"maternalWardView","name":"maternal-ward","slot":"maternal-ward"},{"component":"wardPatientWorkspaceBanner","name":"ward-patient-workspace-banner","slot":"ward-workspace-patient-banner-slot"}],"workspaces":[{"name":"admission-requests-workspace","component":"admissionRequestWorkspace","title":"admissionRequests","type":"pending-admission-requests","width":"wider"},{"name":"create-admission-encounter-workspace","component":"createAdmissionEncounterWorkspace","title":"admitPatient","type":"patient-search-workspace","width":"wider"},{"name":"ward-patient-notes-workspace","component":"wardPatientNotesWorkspace","type":"ward-patient-notes","title":"inpatientNotesWorkspaceTitle"},{"name":"admit-patient-form-workspace","component":"admitPatientFormWorkspace","title":"admissionRequests","type":"admission-requests"},{"name":"ward-patient-workspace","component":"wardPatientWorkspace","type":"ward","title":"Ward patient","width":"extra-wide"},{"name":"patient-transfer-swap-workspace","component":"patientTransferAndSwapWorkspace","title":"transfers","type":"transfer-swap-bed-form"},{"name":"patient-transfer-request-workspace","component":"patientTransferRequestWorkspace","title":"transferRequest","type":"transfer-request-form"},{"name":"patient-discharge-workspace","component":"patientDischargeWorkspace","title":"discharge","width":"extra-wide","canMaximize":true,"type":"ward-patient-discharge"},{"name":"ward-patient-clinical-forms-workspace","component":"patientClinicalFormsWorkspace","title":"clinicalForms","type":"ward-patient-clinical-forms","width":"wider"},{"name":"cancel-admission-request-workspace","component":"cancelAdmissionRequestWorkspace","title":"cancelAdmissionRequest","type":"cancel-admission-request"}],"workspaceGroups":[{"name":"ward-patient","members":["ward-patient-workspace","ward-patient-notes-workspace","patient-transfer-swap-workspace","patient-discharge-workspace","ward-patient-clinical-forms-workspace","add-drug-order","order-basket","add-lab-order"]},{"name":"ward-patient-admission-requests","members":["admission-requests-workspace","create-admission-encounter-workspace"]}],"version":"8.5.1-pre.35"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0","emrapi":"^2.0.0 || 2.0.0-SNAPSHOT"},"optionalBackendDependencies":{"bedmanagement":{"version":"^6.0.0 || 6.0.0-SNAPSHOT","feature":{"flagName":"bedmanagement-module","label":"Ward App Patient Service","description":"This module, if installed, provides services for managing patients admitted to the ward."}}},"extensions":[{"name":"ward-dashboard-link","component":"wardDashboardLink","slot":"homepage-dashboard-slot","meta":{"name":"ward","slot":"ward-dashboard-slot","title":"Wards"}},{"component":"root","name":"ward-dashboard","slot":"ward-dashboard-slot"},{"component":"wardView","name":"ward-view","slot":"ward-view-slot"},{"component":"wardPatientActionButtonExtension","name":"ward-patient-action-button","slot":"action-menu-ward-patient-items-slot"},{"component":"wardPatientNotesActionButtonExtension","name":"ward-inpatient-notes-form-action-button","slot":"action-menu-ward-patient-items-slot"},{"component":"coloredObsTagCardRowExtension","name":"colored-obs-tags-card-row","slot":"ward-patient-card-slot"},{"name":"transfer-swap-patient-siderail-button","slot":"action-menu-ward-patient-items-slot","component":"patientTransferAndSwapWorkspaceSiderailIcon"},{"name":"patient-discharge-siderail-button","slot":"action-menu-ward-patient-items-slot","component":"patientDischargeWorkspaceSideRailIcon"},{"name":"clinical-forms-workspace-siderail-button","component":"clinicalFormWorkspaceSideRailIcon","slot":"action-menu-ward-patient-items-slot"},{"name":"admission-requests-workspace-siderail-button","component":"admissionRequestsWorkspaceSideRailIcon","slot":"action-menu-ward-patient-admission-requests-items-slot"},{"name":"create-admission-request-workspace-siderail-button","component":"createAdmissionEncounterWorkspaceSideRailIcon","slot":"action-menu-ward-patient-admission-requests-items-slot"},{"component":"defaultWardView","name":"default-ward","slot":"default-ward"},{"component":"maternalWardView","name":"maternal-ward","slot":"maternal-ward"},{"component":"patientDischargeDocumentPreview","name":"patient-discharge-document-preview-modal"},{"component":"wardPatientWorkspaceBanner","name":"ward-patient-workspace-banner","slot":"ward-workspace-patient-banner-slot"}],"workspaces":[{"name":"admission-requests-workspace","component":"admissionRequestWorkspace","title":"admissionRequests","type":"pending-admission-requests","width":"wider"},{"name":"create-admission-encounter-workspace","component":"createAdmissionEncounterWorkspace","title":"admitPatient","type":"patient-search-workspace","width":"wider"},{"name":"ward-patient-notes-workspace","component":"wardPatientNotesWorkspace","type":"ward-patient-notes","title":"inpatientNotesWorkspaceTitle"},{"name":"admit-patient-form-workspace","component":"admitPatientFormWorkspace","title":"admissionRequests","type":"admission-requests"},{"name":"ward-patient-workspace","component":"wardPatientWorkspace","type":"ward","title":"Ward patient","width":"extra-wide"},{"name":"patient-transfer-swap-workspace","component":"patientTransferAndSwapWorkspace","title":"transfers","type":"transfer-swap-bed-form"},{"name":"patient-transfer-request-workspace","component":"patientTransferRequestWorkspace","title":"transferRequest","type":"transfer-request-form"},{"name":"patient-discharge-workspace","component":"patientDischargeWorkspace","title":"discharge","width":"extra-wide","canMaximize":true,"type":"ward-patient-discharge"},{"name":"ward-patient-clinical-forms-workspace","component":"patientClinicalFormsWorkspace","title":"clinicalForms","type":"ward-patient-clinical-forms","width":"wider"},{"name":"cancel-admission-request-workspace","component":"cancelAdmissionRequestWorkspace","title":"cancelAdmissionRequest","type":"cancel-admission-request"}],"workspaceGroups":[{"name":"ward-patient","members":["ward-patient-workspace","ward-patient-notes-workspace","patient-transfer-swap-workspace","patient-discharge-workspace","ward-patient-clinical-forms-workspace","add-drug-order","order-basket","add-lab-order"]},{"name":"ward-patient-admission-requests","members":["admission-requests-workspace","create-admission-encounter-workspace"]}],"version":"8.5.1-pre.41"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-ward-app",
-  "version": "8.5.1-pre.35",
+  "version": "8.5.1-pre.41",
   "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

@@ -350,6 +350,11 @@ 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',
+  },
 };
 
 export interface WardConfigObject {
@@ -387,6 +392,7 @@ export interface WardConfigObject {
   inpatientAdmissionEncounterProviderRole: string;
   mortuaryAdmissionLoctionTagUuid: string;
   dailyBedFeeBillableService: string;
+  drugOrderEncounterType: 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,215 @@
+import {
+  type FetchResponse,
+  fhirBaseUrl,
+  openmrsFetch,
+  restBaseUrl,
+  useConfig,
+  type Visit,
+} from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import useSWR from 'swr';
+import { useEncounterDetails } from '../hooks/useIpdDischargeEncounter';
+import { type WardConfigObject } from '../config-schema';
+import { type Order } from '@openmrs/esm-patient-common-lib';
+export const DATE_FORMART = 'DD/MM/YYYY';
+export const TIME_FORMART = 'hh:mm A';
+
+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(', ');
+    return null;
+  }, [diagnoses]);
+
+  return {
+    error,
+    isLoading,
+    diagnoses: (diagnoses ?? []) as Array<{ id: string; text: string; certainty: string }>,
+    display,
+  };
+};
+
+export interface AllergyIntoleranceResponse {
+  resourceType: string;
+  id: string;
+  meta: {
+    lastUpdated: string;
+  };
+  type: string;
+  total: number;
+  entry: Array<{
+    resource: AllergyIntolerance;
+  }>;
+}
+
+export interface AllergyIntolerance {
+  resourceType: string;
+  id: string;
+  meta: {
+    lastUpdated: string;
+  };
+  clinicalStatus: {
+    coding: [
+      {
+        system: string;
+        code: string;
+        display: string;
+      },
+    ];
+    text: string;
+  };
+  verificationStatus: {
+    coding: [
+      {
+        system: string;
+        code: string;
+        display: string;
+      },
+    ];
+    text: string;
+  };
+  type: string;
+  category: Array<string>;
+  criticality: string;
+  code: {
+    coding: [
+      {
+        code: string;
+        display: string;
+      },
+    ];
+    text: string;
+  };
+  patient: {
+    reference: string;
+    type: string;
+    display: string;
+  };
+  recordedDate: string;
+  recorder: {
+    reference: string;
+    type: string;
+    display: string;
+  };
+  reaction: [
+    {
+      substance: {
+        coding: [
+          {
+            code: string;
+            display: string;
+          },
+        ];
+        text: string;
+      };
+      manifestation: [
+        {
+          coding: [
+            {
+              code: string;
+              display: string;
+            },
+          ];
+          text: string;
+        },
+      ];
+      severity: string;
+    },
+  ];
+}
+
+export interface Coding {
+  system?: string;
+  code: string;
+  display?: string;
+}
+
+export function getConceptCoding(codings: Coding[]): Coding {
+  return codings ? codings.find((c) => !('system' in c) || c.system === undefined) : null;
+}
+
+export function getConceptCodingDisplay(codings: Coding[]): string {
+  return getConceptCoding(codings)?.display;
+}
+
+export function usePatientAllergies(patientUuid: string) {
+  const { data, error, isLoading } = useSWR<{ data: AllergyIntoleranceResponse }, Error>(
+    `${fhirBaseUrl}/AllergyIntolerance?patient=${patientUuid}`,
+    openmrsFetch,
+  );
+  const allergies: Array<AllergyIntolerance> = useMemo(() => {
+    const _allergies: Array<AllergyIntolerance> = [];
+    if (data) {
+      const entries = data?.data.entry;
+      entries?.map((allergy) => {
+        return _allergies.push(allergy.resource);
+      });
+    }
+    return _allergies;
+  }, [data]);
+
+  const display = useMemo(() => {
+    if (allergies?.length) return allergies.map((allergy) => getConceptCodingDisplay(allergy.code.coding)).join(', ');
+    return null;
+  }, [allergies]);
+
+  return {
+    allergies,
+    totalAllergies: data?.data.total,
+    error,
+    isLoading,
+    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 } = useConfig<WardConfigObject>();
+  const orderEncounters = useMemo(() => {
+    const encounters = (encounter?.visit?.encounters ?? []).filter(
+      (enc) => enc.encounterType.uuid === drugOrderEncounterType,
+    );
+    return encounters;
+  }, [encounter, drugOrderEncounterType]);
+  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],
+  );
+
+  return {
+    isLoading,
+    error,
+    drugOrders: drugorder,
+    testOrders: testorder,
+    orderEncounters,
+  };
+}

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);
+}

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

@@ -0,0 +1,171 @@
+import React, { type FC, useMemo } from 'react';
+import styles from './discharge-printouts.scss';
+import FieldInput from './field-input';
+import { useTranslation } from 'react-i18next';
+import { useEmrConfiguration, usePatient, useSession } from '@openmrs/esm-framework';
+import { useEncounterDetails } from '../hooks/useIpdDischargeEncounter';
+import { InlineLoading, InlineNotification } from '@carbon/react';
+import dayjs from 'dayjs';
+import {
+  DATE_FORMART,
+  usePatientAllergies,
+  usePatientDiagnosis,
+  usePatientOrders,
+} from './discharge-printout.resource';
+import { useProvider } from '../ward-workspace/admit-patient-form-workspace/patient-admission.resources';
+
+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 {
+    display: allergies,
+    error: allergiesError,
+    isLoading: isLoadingAllergies,
+  } = usePatientAllergies(_patient.uuid);
+  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,
+  } = 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 ||
+    isLoadingAllergies ||
+    isLoadingOders
+  )
+    return <InlineLoading />;
+  if (
+    error ||
+    patientError ||
+    errorFetchingEmrConfiguration ||
+    diagnosisError ||
+    errorProvider ||
+    allergiesError ||
+    orderserror
+  )
+    return (
+      <InlineNotification
+        kind="error"
+        title={
+          error?.message ??
+          patientError?.message ??
+          errorFetchingEmrConfiguration?.message ??
+          diagnosisError?.message ??
+          errorProvider?.message ??
+          allergiesError?.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?.toLowerCase() ?? t('noDiagnoses', 'No Diagnoses')}</p>
+      </div>
+      <div>
+        <strong className={styles.txtUpper}>{t('history', 'History')}</strong>
+        <p>
+          {`${_patient.name}, a ${Math.abs(dayjs(patient.birthDate).diff(dayjs(), 'years'))} year ${
+            patient.gender
+          } presented with .${
+            allergies
+              ? t('knownAlergies', 'Known Alergies') + ': ' + allergies
+              : t('noKnownAlergies', 'No known alergies')
+          }`}
+        </p>
+      </div>
+      <div>
+        <strong className={styles.txtUpper}>{t('physicalExamination', 'Physical Examination')}</strong>
+        <p></p>
+      </div>
+      <div>
+        <strong className={styles.txtUpper}>{t('investigation', 'Investigation')}</strong>
+        <p>
+          {testOrders.map((order) => (
+            <p key={order.uuid} className={styles.txtTitle}>
+              {order.display?.toLowerCase()}
+            </p>
+          ))}
+        </p>
+      </div>
+      <div>
+        <strong className={styles.txtUpper}>{t('treatment', 'Treatment')}</strong>
+        <div>
+          {drugOrders.map((order) => (
+            <p key={order.uuid}>{order.display}</p>
+          ))}
+        </div>
+      </div>
+      <div>
+        <strong className={styles.txtUpper}>{t('dischargeInstructions', 'Discharge Instructions')}</strong>
+        <p></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;