@kenyaemr/esm-ward-app 7.0.3-pre.88 → 7.0.3-pre.94

package/src/ward-workspace/admit-patient-form-workspace/admit-patient-form.workspace.tsx

@@ -0,0 +1,267 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { z } from 'zod';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslation } from 'react-i18next';
+import { Button, ButtonSet, Column, Dropdown, DropdownSkeleton, Form, InlineNotification, Row } from '@carbon/react';
+import { showSnackbar, useFeatureFlag, useSession } from '@openmrs/esm-framework';
+import { filterBeds } from '../../ward-view/ward-view.resource';
+import type { BedLayout, DispositionType } from '../../types';
+import { assignPatientToBed, createEncounter } from '../../ward.resource';
+import { useAdmissionLocation } from '../../hooks/useAdmissionLocation';
+import { useInpatientRequest } from '../../hooks/useInpatientRequest';
+import useEmrConfiguration from '../../hooks/useEmrConfiguration';
+import useWardLocation from '../../hooks/useWardLocation';
+import type { AdmitPatientFormWorkspaceProps } from './types';
+import styles from './admit-patient-form.scss';
+
+const AdmitPatientFormWorkspace: React.FC<AdmitPatientFormWorkspaceProps> = ({
+  patient,
+  dispositionType,
+  closeWorkspace,
+  closeWorkspaceWithSavedChanges,
+  promptBeforeClosing,
+}) => {
+  const { t } = useTranslation();
+  const { location } = useWardLocation();
+  const { currentProvider } = useSession();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { mutate: mutateInpatientRequest } = useInpatientRequest();
+  const { emrConfiguration, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } = useEmrConfiguration();
+  const [showErrorNotifications, setShowErrorNotifications] = useState(false);
+  const { isLoading, admissionLocation, mutate: mutateAdmissionLocation } = useAdmissionLocation();
+  const beds = useMemo(() => (isLoading ? [] : filterBeds(admissionLocation)), [admissionLocation]);
+  const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
+  const getBedRepresentation = useCallback((bedLayout: BedLayout) => {
+    const bedNumber = bedLayout.bedNumber;
+    const patients =
+      bedLayout.patients.length === 0
+        ? [t('emptyText', 'Empty')]
+        : bedLayout.patients.map((patient) => patient?.person?.preferredName?.display);
+    return [bedNumber, ...patients].join(' · ');
+  }, []);
+
+  const zodSchema = useMemo(
+    () =>
+      z.object({
+        bedId: z.number().optional(),
+      }),
+    [isBedManagementModuleInstalled, beds],
+  );
+
+  type FormValues = z.infer<typeof zodSchema>;
+
+  const {
+    control,
+    formState: { errors, isDirty },
+    handleSubmit,
+    getValues,
+    watch,
+  } = useForm<FormValues>({
+    resolver: zodResolver(zodSchema),
+  });
+
+  useEffect(() => {
+    promptBeforeClosing(() => isDirty);
+  }, [isDirty]);
+
+  const onSubmit = useCallback(
+    (values: FormValues) => {
+      setShowErrorNotifications(false);
+      setIsSubmitting(true);
+      const bedSelected = beds.find((bed) => bed.bedId === values.bedId);
+      createEncounter({
+        patient: patient.uuid,
+        encounterType:
+          dispositionType === 'ADMIT'
+            ? emrConfiguration.admissionEncounterType.uuid
+            : dispositionType === 'TRANSFER'
+              ? emrConfiguration.transferWithinHospitalEncounterType.uuid
+              : null,
+        location: location?.uuid,
+        encounterProviders: [
+          {
+            provider: currentProvider?.uuid,
+            encounterRole: emrConfiguration.clinicianEncounterRole.uuid,
+          },
+        ],
+        obs: [],
+      })
+        .then(
+          async (response) => {
+            if (response.ok) {
+              if (bedSelected) {
+                return assignPatientToBed(values.bedId, patient.uuid, response.data.uuid);
+              }
+              return response;
+            }
+          },
+          (err: Error) => {
+            showSnackbar({
+              kind: 'error',
+              title: t('errorCreatingEncounter', 'Failed to admit patient', {
+                encounterType:
+                  dispositionType === 'ADMIT'
+                    ? emrConfiguration.admissionEncounterType.display
+                    : emrConfiguration.transferWithinHospitalEncounterType.display,
+              }),
+              subtitle: err.message,
+            });
+          },
+        )
+        .then(
+          (response) => {
+            if (response && response?.ok) {
+              if (bedSelected) {
+                showSnackbar({
+                  kind: 'success',
+                  title: t('patientAdmittedSuccessfully', 'Patient admitted successfully'),
+                  subtitle: t(
+                    'patientAdmittedSuccessfullySubtitle',
+                    '{{patientName}} has been successfully admitted and assigned to bed {{bedNumber}}',
+                    {
+                      patientName: patient.person.preferredName.display,
+                      bedNumber: bedSelected.bedNumber,
+                    },
+                  ),
+                });
+              } else {
+                showSnackbar({
+                  kind: 'success',
+                  title: t('patientAdmittedSuccessfully', 'Patient admitted successfully'),
+                  subtitle: t('patientAdmittedWoBed', 'Patient admitted successfully to {{location}}', {
+                    location: location?.display,
+                  }),
+                });
+              }
+              mutateAdmissionLocation();
+              mutateInpatientRequest();
+              closeWorkspaceWithSavedChanges();
+            }
+          },
+          () => {
+            showSnackbar({
+              kind: 'warning',
+              title: t('patientAdmittedSuccessfully', 'Patient admitted successfully'),
+              subtitle: t(
+                'patientAdmittedButBedNotAssigned',
+                'Patient admitted successfully but fail to assign bed to patient',
+              ),
+            });
+            mutateAdmissionLocation();
+            mutateInpatientRequest();
+            closeWorkspaceWithSavedChanges();
+          },
+        )
+        .finally(() => {
+          setIsSubmitting(false);
+        });
+    },
+    [beds, patient, emrConfiguration, location, closeWorkspaceWithSavedChanges, dispositionType, currentProvider],
+  );
+
+  const onError = useCallback((values) => {
+    setShowErrorNotifications(true);
+    setIsSubmitting(false);
+  }, []);
+
+  return (
+    <Form control={control} className={styles.form} onSubmit={handleSubmit(onSubmit, onError)}>
+      <div className={styles.formContent}>
+        {errorFetchingEmrConfiguration && (
+          <div className={styles.formError}>
+            <InlineNotification
+              kind="error"
+              title={t('somePartsOfTheFormDidntLoad', "Some parts of the form didn't load")}
+              subtitle={t(
+                'fetchingEmrConfigurationFailed',
+                'Fetching EMR configuration failed. Try refreshing the page or contact your system administrator.',
+              )}
+              lowContrast
+              hideCloseButton
+            />
+          </div>
+        )}
+        <Row>
+          <Column>
+            <h2 className={styles.productiveHeading02}>{t('selectABed', 'Select a bed')}</h2>
+            <div className={styles.bedSelectionDropdown}>
+              {isBedManagementModuleInstalled ? (
+                isLoading ? (
+                  <DropdownSkeleton />
+                ) : beds.length ? (
+                  <Controller
+                    control={control}
+                    name="bedId"
+                    render={({ field: { onChange }, fieldState: { error } }) => {
+                      const selectedItem = beds.find((bed) => bed.bedId === getValues()?.bedId);
+                      return (
+                        <Dropdown
+                          id="default"
+                          titleText=""
+                          helperText=""
+                          label={!selectedItem && t('chooseAnOption', 'Choose an option')}
+                          items={beds}
+                          itemToString={getBedRepresentation}
+                          selectedItem={selectedItem}
+                          onChange={({ selectedItem }: { selectedItem: BedLayout }) => onChange(selectedItem.bedId)}
+                          invalid={!!error}
+                          invalidText={error?.message}
+                        />
+                      );
+                    }}
+                  />
+                ) : (
+                  <InlineNotification
+                    kind="error"
+                    title={t('noBedsConfiguredForLocation', 'No beds configured for {{location}} location', {
+                      location: location?.display,
+                    })}
+                    lowContrast
+                    hideCloseButton
+                  />
+                )
+              ) : (
+                <InlineNotification
+                  kind="info"
+                  title={t('unableToSelectBeds', 'Unable to select beds')}
+                  subtitle={t(
+                    'bedManagementModuleNotInstalled',
+                    'Bed management module is not present to allow bed selection',
+                  )}
+                  lowContrast
+                  hideCloseButton
+                />
+              )}
+            </div>
+          </Column>
+        </Row>
+        <div className={styles.errorNotifications}>
+          {showErrorNotifications &&
+            Object.entries(errors).map(([key, value]) => {
+              return (
+                <Row key={key}>
+                  <Column>
+                    <InlineNotification kind="error" subtitle={value.message} lowContrast />
+                  </Column>
+                </Row>
+              );
+            })}
+        </div>
+      </div>
+      <ButtonSet className={styles.buttonSet}>
+        <Button size="xl" kind="secondary" onClick={() => closeWorkspace({ ignoreChanges: true })}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button
+          type="submit"
+          size="xl"
+          disabled={isSubmitting || isLoadingEmrConfiguration || errorFetchingEmrConfiguration}>
+          {!isSubmitting ? t('admit', 'Admit') : t('admitting', 'Admitting...')}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default AdmitPatientFormWorkspace;

package/src/ward-workspace/admit-patient-form-workspace/types.ts

@@ -0,0 +1,7 @@
+import type { DefaultWorkspaceProps, Patient } from '@openmrs/esm-framework';
+import type { DispositionType } from '../../types';
+
+export interface AdmitPatientFormWorkspaceProps extends DefaultWorkspaceProps {
+  patient: Patient;
+  dispositionType: DispositionType;
+}

package/src/ward-workspace/patient-banner/patient-banner.component.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { WardPatient } from '../../types';
+import { WardPatientCardElement } from '../../ward-patient-card/ward-patient-card-element.component';
+import { useCurrentWardCardConfig } from '../../hooks/useCurrentWardCardConfig';
+import styles from './style.scss';
+import WardPatientBedNumber from '../../ward-patient-card/row-elements/ward-patient-bed-number';
+import WardPatientName from '../../ward-patient-card/row-elements/ward-patient-name';
+
+const WardPatientWorkspaceBanner = (wardPatient: WardPatient) => {
+  const { headerRowElements } = useCurrentWardCardConfig();
+  const { patient, bed, visit } = wardPatient;
+
+  if (!(patient && visit)) {
+    console.warn('Patient details and visit details were not received by the workspace');
+    return null;
+  }
+
+  return (
+    <div className={styles.patientBanner}>
+      {bed ? <WardPatientBedNumber bed={bed} /> : null}
+      <WardPatientName patient={patient} />
+      {headerRowElements.map((elementId, i) => (
+        <WardPatientCardElement key={`ward-card-${patient.uuid}-header-${i}`} elementId={elementId} {...wardPatient} />
+      ))}
+    </div>
+  );
+};
+
+export default WardPatientWorkspaceBanner;

package/src/ward-workspace/patient-banner/style.scss

@@ -0,0 +1,23 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.patientBanner {
+  @extend .dotSeparatedChildren;
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  padding: layout.$spacing-04;
+  background: $ui-01;
+}
+
+.dotSeparatedChildren {
+  > div:not(div:first-of-type):not(:empty) {
+    display: flex;
+    align-items: center;
+
+    &::before {
+      content: '·';
+      padding: 0 layout.$spacing-02;
+    }
+  }
+}

package/src/ward-workspace/patient-transfer-bed-swap/patient-bed-swap-form.component.tsx

@@ -0,0 +1,210 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import styles from './patient-transfer-swap.scss';
+import { useAdmissionLocation } from '../../hooks/useAdmissionLocation';
+import { z } from 'zod';
+import { useTranslation } from 'react-i18next';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { filterBeds } from '../../ward-view/ward-view.resource';
+import type { BedLayout, WardPatientWorkspaceProps } from '../../types';
+import { assignPatientToBed, createEncounter } from '../../ward.resource';
+import useEmrConfiguration from '../../hooks/useEmrConfiguration';
+import { showSnackbar, useSession } from '@openmrs/esm-framework';
+import useWardLocation from '../../hooks/useWardLocation';
+import { useInpatientRequest } from '../../hooks/useInpatientRequest';
+import {
+  Form,
+  ButtonSet,
+  Button,
+  RadioButtonGroup,
+  RadioButton,
+  RadioButtonSkeleton,
+  InlineNotification,
+} from '@carbon/react';
+
+export default function PatientBedSwapForm({
+  promptBeforeClosing,
+  closeWorkspaceWithSavedChanges,
+  wardPatient,
+}: WardPatientWorkspaceProps) {
+  const { patient } = wardPatient;
+  const { t } = useTranslation();
+  const [showErrorNotifications, setShowErrorNotifications] = useState(false);
+  const { isLoading, admissionLocation } = useAdmissionLocation();
+  const { emrConfiguration, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } = useEmrConfiguration();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { currentProvider } = useSession();
+  const { location } = useWardLocation();
+  const { mutate: mutateAdmissionLocation } = useAdmissionLocation();
+  const { mutate: mutateInpatientRequest } = useInpatientRequest();
+
+  const zodSchema = useMemo(
+    () =>
+      z.object({
+        bedId: z.number({
+          required_error: t('pleaseSelectBed', 'Please select a bed'),
+        }),
+      }),
+    [t],
+  );
+
+  type FormValues = z.infer<typeof zodSchema>;
+
+  const {
+    formState: { errors, isDirty },
+    control,
+    handleSubmit,
+    getValues,
+  } = useForm<FormValues>({ resolver: zodResolver(zodSchema) });
+
+  useEffect(() => {
+    promptBeforeClosing(() => isDirty);
+    return () => promptBeforeClosing(null);
+  }, [isDirty]);
+
+  const getBedInformation = useCallback(
+    (bed: BedLayout) => {
+      const patients = bed.patients.map((bedPatient) => bedPatient?.person?.preferredName?.display);
+      const bedNumber = bed.bedNumber;
+      return [bedNumber, ...(patients.length ? patients : [t('empty', 'Empty')])].join(' · ');
+    },
+    [t],
+  );
+
+  const beds = useMemo(() => (admissionLocation ? filterBeds(admissionLocation) : []), [admissionLocation]);
+  const bedDetails = useMemo(
+    () =>
+      beds.map((bed) => {
+        const isPatientAssignedToBed = bed.patients.find((bedPatient) => bedPatient.uuid === patient.uuid);
+        return { id: bed.bedId, label: getBedInformation(bed), isPatientAssignedToBed };
+      }),
+    [beds, getBedInformation],
+  );
+
+  const onSubmit = useCallback(
+    (values: FormValues) => {
+      const bedSelected = beds.find((bed) => bed.bedId === values.bedId);
+      setShowErrorNotifications(false);
+      createEncounter({
+        patient: patient.uuid,
+        encounterType: emrConfiguration.transferWithinHospitalEncounterType.uuid,
+        location: location?.uuid,
+        encounterProviders: [
+          {
+            provider: currentProvider?.uuid,
+            encounterRole: emrConfiguration.clinicianEncounterRole.uuid,
+          },
+        ],
+        obs: [],
+      })
+        .then(async (response) => {
+          if (response.ok) {
+            return assignPatientToBed(values.bedId, patient.uuid, response.data.uuid);
+          }
+        })
+        .then((response) => {
+          if (response && response?.ok) {
+            showSnackbar({
+              kind: 'success',
+              title: t('patientAssignedNewbed', 'Patient assigned to new bed'),
+              subtitle: t('patientAssignedToBed', '{{patientName}} assigned to bed {{bedNumber}}', {
+                patientName: patient.person.preferredName.display,
+                bedNumber: bedSelected.bedNumber,
+              }),
+            });
+            mutateAdmissionLocation();
+            mutateInpatientRequest();
+            closeWorkspaceWithSavedChanges();
+          }
+        })
+        .catch((error: Error) => {
+          showSnackbar({
+            kind: 'error',
+            title: t('errorAssigningBedToPatient', 'Error assigning bed to patient'),
+            subtitle: error?.message,
+          });
+          mutateAdmissionLocation();
+          mutateInpatientRequest();
+          closeWorkspaceWithSavedChanges();
+        })
+        .finally(() => {
+          setIsSubmitting(false);
+        });
+    },
+    [setShowErrorNotifications, patient, emrConfiguration, currentProvider, location, beds],
+  );
+
+  const onError = useCallback(() => {
+    setShowErrorNotifications(true);
+  }, []);
+
+  return (
+    <Form onSubmit={handleSubmit(onSubmit, onError)} className={styles.formContainer}>
+      <div>
+        {errorFetchingEmrConfiguration && (
+          <div className={styles.formError}>
+            <InlineNotification
+              kind="error"
+              title={t('somePartsOfTheFormDidntLoad', "Some parts of the form didn't load")}
+              subtitle={t(
+                'fetchingEmrConfigurationFailed',
+                'Fetching EMR configuration failed. Try refreshing the page or contact your system administrator.',
+              )}
+              lowContrast
+              hideCloseButton
+            />
+          </div>
+        )}
+        <h2 className={styles.productiveHeading02}>{t('selectABed', 'Select a bed')}</h2>
+        {isLoading ? (
+          <RadioButtonGroup className={styles.radioButtonGroup} name="bedId">
+            <RadioButtonSkeleton />
+            <RadioButtonSkeleton />
+            <RadioButtonSkeleton />
+          </RadioButtonGroup>
+        ) : (
+          <Controller
+            name="bedId"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <RadioButtonGroup
+                className={styles.radioButtonGroup}
+                onChange={onChange}
+                invalid={!!errors?.bedId?.message}
+                invalidText={errors?.bedId?.message}>
+                {bedDetails.map(({ id, label, isPatientAssignedToBed }) => (
+                  <RadioButton
+                    key={id}
+                    labelText={label}
+                    control={control}
+                    value={id}
+                    checked={id === value}
+                    disabled={isPatientAssignedToBed}
+                  />
+                ))}
+              </RadioButtonGroup>
+            )}
+          />
+        )}
+        {showErrorNotifications && (
+          <div className={styles.notifications}>
+            {Object.values(errors).map((error) => (
+              <InlineNotification lowContrast subtitle={error.message} />
+            ))}
+          </div>
+        )}
+      </div>
+      <ButtonSet className={styles.buttonSet}>
+        <Button size="xl" kind="secondary" onClick={closeWorkspaceWithSavedChanges}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button
+          type="submit"
+          size="xl"
+          disabled={isLoadingEmrConfiguration || isSubmitting || errorFetchingEmrConfiguration}>
+          {t('save', 'Save')}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+}