@kenyaemr/esm-care-panel-app 5.4.2-pre.2203 → 5.4.2-pre.2223

package/src/patient-discharge/patient-discharge.workspace.tsx

@@ -0,0 +1,93 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { InlineLoading, InlineNotification } from '@carbon/react';
+import {
+  DefaultWorkspaceProps,
+  Encounter,
+  ExtensionSlot,
+  useEmrConfiguration,
+  usePatient,
+} from '@openmrs/esm-framework';
+import { useVisitOrOfflineVisit } from '@openmrs/esm-patient-common-lib';
+import { usePatientDischarge } from './patient-discharge.resource';
+import { WardPatient } from '../types';
+
+const IN_PATIENT_DISCHARGE_FORM_UUID = '98a781d2-b777-4756-b4c9-c9b0deb3483c';
+
+type PatientDischargeWorkspaceProps = DefaultWorkspaceProps & {
+  readonly patientUuid: string;
+  readonly wardPatient: WardPatient;
+};
+
+export function PatientDischargeWorkspace(props: PatientDischargeWorkspaceProps) {
+  const { t } = useTranslation();
+  const { patientUuid, closeWorkspace, closeWorkspaceWithSavedChanges, wardPatient, promptBeforeClosing } = props;
+
+  const { isLoading: isLoadingVisit, currentVisit, error: visitError } = useVisitOrOfflineVisit(patientUuid);
+  const { patient, isLoading: isLoadingPatient, error: patientError } = usePatient(patientUuid);
+  const { emrConfiguration, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } = useEmrConfiguration();
+
+  const { handleDischarge } = usePatientDischarge();
+
+  const encounterUuid = useMemo(() => currentVisit?.encounters?.[0]?.uuid ?? null, [currentVisit?.encounters]);
+
+  const state = useMemo<Record<string, unknown>>(
+    () => ({
+      view: 'form',
+      formUuid: IN_PATIENT_DISCHARGE_FORM_UUID,
+      visitUuid: currentVisit?.uuid ?? null,
+      visitTypeUuid: currentVisit?.visitType?.uuid ?? null,
+      patientUuid: patientUuid ?? null,
+      patient,
+      encounterUuid,
+      closeWorkspaceWithSavedChanges,
+      closeWorkspace,
+      promptBeforeClosing,
+      handlePostResponse: (encounter: Encounter) =>
+        handleDischarge(encounter, wardPatient, emrConfiguration as Record<string, unknown>, currentVisit),
+    }),
+    [
+      patientUuid,
+      currentVisit,
+      encounterUuid,
+      patient,
+      closeWorkspace,
+      promptBeforeClosing,
+      emrConfiguration,
+      closeWorkspaceWithSavedChanges,
+      handleDischarge,
+    ],
+  );
+
+  const isLoading = isLoadingVisit || isLoadingPatient || isLoadingEmrConfiguration;
+  const error = visitError || patientError || errorFetchingEmrConfiguration;
+
+  if (isLoading) {
+    return <InlineLoading description={t('loading', 'Loading')} iconDescription={t('loading', 'Loading data...')} />;
+  }
+
+  if (error) {
+    return (
+      <InlineNotification
+        aria-label={t('error', 'Error')}
+        kind="error"
+        onClose={() => {}}
+        onCloseButtonClick={() => {}}
+        statusIconDescription="notification"
+        subtitle={t('errorLoadingPatientWorkspace', 'Error loading patient workspace {{errorMessage}}', {
+          errorMessage: error?.message,
+        })}
+        title={t('error', 'Error')}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <ExtensionSlot name="visit-context-header-slot" state={{ patientUuid }} />
+      {patient && <ExtensionSlot name="form-widget-slot" state={state} />}
+    </div>
+  );
+}
+
+export default PatientDischargeWorkspace;

package/src/patient-summary/patient-summary.component.tsx

@@ -38,7 +38,7 @@ const PatientSummary: React.FC<PatientSummaryProps> = ({ patientUuid }) => {
   }, [showPrintComponent, handlePrint]);
 
   if (isLoading) {
-    return <StructuredListSkeleton role="progressbar" />;
+    return <StructuredListSkeleton />;
   }
   if (error) {
     return <span>{t('errorPatientSummary', 'Error loading patient summary')}</span>;

package/src/patient-summary/patient-summary.scss

@@ -2,7 +2,7 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/colors';
 @use '@carbon/layout';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .bodyContainer {
   margin: spacing.$spacing-03;

package/src/program-enrollment/program-enrollment.component.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { ReactNode, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Tile,
@@ -12,14 +12,15 @@ import {
   OverflowMenu,
   OverflowMenuItem,
   TableContainer,
+  DataTableHeader,
 } from '@carbon/react';
 import styles from './program-enrollment.scss';
 import isEmpty from 'lodash/isEmpty';
 import dayjs from 'dayjs';
-import { formatDate, restBaseUrl, useVisit } from '@openmrs/esm-framework';
+import { formatDate, launchWorkspace, restBaseUrl, useVisit } from '@openmrs/esm-framework';
 import orderBy from 'lodash/orderBy';
 import { mutate } from 'swr';
-import { getPatientUuidFromStore, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import { getPatientUuidFromStore } from '@openmrs/esm-patient-common-lib';
 import { useHeiOutcome } from '../hooks/useHeiOutcome';
 
 export interface ProgramEnrollmentProps {
@@ -68,11 +69,11 @@ const ProgramEnrollment: React.FC<ProgramEnrollmentProps> = ({ enrollments = [],
   const { currentVisit } = useVisit(getPatientUuidFromStore());
   const { heiOutcome } = useHeiOutcome(currentVisit?.patient?.uuid);
   const orderedEnrollments = orderBy(enrollments, 'dateEnrolled', 'desc');
-  const headers = useMemo(
+  const headers: Array<DataTableHeader> = useMemo(
     () =>
       Object.entries(programDetailsMap[programName] ?? { ...shareObjProperty }).map(([key, value]) => ({
         key,
-        header: value,
+        header: value as ReactNode,
       })),
     [programName],
   );
@@ -104,7 +105,7 @@ const ProgramEnrollment: React.FC<ProgramEnrollmentProps> = ({ enrollments = [],
   };
 
   const handleDiscontinue = (enrollment) => {
-    launchPatientWorkspace('patient-form-entry-workspace', {
+    launchWorkspace('patient-form-entry-workspace', {
       workspaceTitle: enrollment?.discontinuationFormName,
       mutateForm: handleMutation,
       formInfo: {
@@ -112,15 +113,15 @@ const ProgramEnrollment: React.FC<ProgramEnrollmentProps> = ({ enrollments = [],
         visitTypeUuid: currentVisit?.visitType?.uuid ?? '',
         visitUuid: currentVisit?.uuid ?? '',
         formUuid: enrollment?.discontinuationFormUuid,
-        additionalProps:
-          { enrollmentDetails: { dateEnrolled: new Date(enrollment.dateEnrolled), uuid: enrollment.enrollmentUuid } } ??
-          {},
+        additionalProps: {
+          enrollmentDetails: { dateEnrolled: new Date(enrollment.dateEnrolled), uuid: enrollment.enrollmentUuid },
+        },
       },
     });
   };
 
   const handleHeiOutcome = () => {
-    launchPatientWorkspace('patient-form-entry-workspace', {
+    launchWorkspace('patient-form-entry-workspace', {
       workspaceTitle: 'HEI Outcome',
       mutateForm: () => {
         mutate((key) => true, undefined, {
@@ -138,7 +139,7 @@ const ProgramEnrollment: React.FC<ProgramEnrollmentProps> = ({ enrollments = [],
   };
 
   const handleEditEnrollment = (enrollment) => {
-    launchPatientWorkspace('patient-form-entry-workspace', {
+    launchWorkspace('patient-form-entry-workspace', {
       workspaceTitle: enrollment?.enrollmentFormName,
       mutateForm: () => {
         mutate(
@@ -153,9 +154,9 @@ const ProgramEnrollment: React.FC<ProgramEnrollmentProps> = ({ enrollments = [],
         formUuid: enrollment?.enrollmentFormUuid,
         visitTypeUuid: currentVisit?.visitType?.uuid ?? '',
         visitUuid: currentVisit?.uuid ?? '',
-        additionalProps:
-          { enrollmentDetails: { dateEnrolled: new Date(enrollment.dateEnrolled), uuid: enrollment.enrollmentUuid } } ??
-          {},
+        additionalProps: {
+          enrollmentDetails: { dateEnrolled: new Date(enrollment.dateEnrolled), uuid: enrollment.enrollmentUuid },
+        },
       },
     });
   };

package/src/program-enrollment/program-enrollment.scss

@@ -1,13 +1,13 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .desktopHeading {
   h4 {
     @include type.type-style('heading-compact-02');
     color: $text-02;
-    background-color: $ui-background;
+    background-color: colors.$white;
     padding-top: spacing.$spacing-02;
   }
 }
@@ -25,7 +25,7 @@
   justify-content: space-between;
   text-align: left;
   text-transform: capitalize;
-  background-color: $ui-background;
+  background-color: colors.$white;
   padding-top: spacing.$spacing-02;
   padding-bottom: spacing.$spacing-03;
 }

package/src/program-summary/program-summary.component.tsx

@@ -18,7 +18,7 @@ const ProgramSummary: React.FC<ProgramSummaryProps> = ({ patientUuid, programNam
 
   const isTablet = useLayoutType() == 'tablet';
   if (isLoading) {
-    return <StructuredListSkeleton role="progressbar" />;
+    return <StructuredListSkeleton />;
   }
   if (isError) {
     return <span>{t('errorProgramSummary', 'Error loading HIV summary')}</span>;

package/src/program-summary/program-summary.scss

@@ -1,7 +1,7 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .desktopHeading {
   h4 {

package/src/regimen/regimen-history.component.tsx

@@ -25,7 +25,7 @@ const RegimenHistory: React.FC<RegimenHistoryProps> = ({ patientUuid, category }
   const { regimen, isLoading, error } = useRegimenHistory(patientUuid, RegimenType[category]);
 
   if (isLoading) {
-    return <StructuredListSkeleton role="progressbar" />;
+    return <StructuredListSkeleton />;
   }
 
   if (error) {

package/src/regimen/regimen-history.scss

@@ -1,7 +1,7 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .bodyShort01 {
   @include type.type-style('body-compact-01');
@@ -11,7 +11,7 @@
   h4 {
     @include type.type-style('heading-compact-02');
     color: $text-02;
-    background-color: $ui-background;
+    background-color: colors.$white;
     padding-top: spacing.$spacing-02;
   }
 }
@@ -19,7 +19,7 @@
 .tabletHeading {
   text-align: left;
   text-transform: capitalize;
-  background-color: $ui-background;
+  background-color: colors.$white;
   padding-top: spacing.$spacing-02;
 }
 .structuredList {
@@ -36,5 +36,5 @@
   :global(.cds--structured-list-td) {
     padding: 0.2rem 0.2rem 0.5rem;
   }
-  background-color: $ui-background;
+  background-color: colors.$white;
 }

package/src/regimen-editor/regimen-form.component.tsx

@@ -336,8 +336,6 @@ const RegimenForm: React.FC<RegimenFormProps> = ({
       <DatePicker
         dateFormat="d/m/Y"
         datePickerType="single"
-        id="regimenDate"
-        style={{ paddingBottom: '1rem' }}
         maxDate={new Date().toISOString()}
         onChange={([date]) => setVisitDate(date)}
         value={visitDate}>
@@ -364,12 +362,12 @@ const RegimenForm: React.FC<RegimenFormProps> = ({
             <RadioButtonGroup
               className={styles.radioButtonWrapper}
               name="regimenEvent"
-              onChange={(uuid) => setRegimenEvent(uuid)}>
+              onChange={(uuid) => setRegimenEvent(uuid as string)}>
               <RadioButton
                 key={'start-regimen'}
                 labelText={t('startRegimen', 'Start')}
                 value={Regimen.startOrRestartConcept}
-                disabled={lastRegimenEncounter.uuid}
+                disabled={!!lastRegimenEncounter.uuid}
               />
               <RadioButton
                 key={'restart-regimen'}
@@ -387,7 +385,9 @@ const RegimenForm: React.FC<RegimenFormProps> = ({
                 key={'stop-regimen'}
                 labelText={t('stopRegimen', 'Stop')}
                 value={Regimen.stopRegimenConcept}
-                disabled={lastRegimenEncounter.endDate || (!lastRegimenEncounter.uuid && !lastRegimenEncounter.endDate)}
+                disabled={
+                  !!lastRegimenEncounter.endDate || (!lastRegimenEncounter.uuid && !lastRegimenEncounter.endDate)
+                }
               />
               <RadioButton
                 key={'undo-regimen'}
@@ -406,7 +406,7 @@ const RegimenForm: React.FC<RegimenFormProps> = ({
                     <RadioButtonGroup
                       className={styles.radioButtonWrapper}
                       name="regimenType"
-                      onChange={(uuid) => setSelectedRegimenType(uuid)}>
+                      onChange={(uuid) => setSelectedRegimenType(uuid as string)}>
                       <RadioButton key={'standardUuid'} labelText={'Use standard regimen'} value={'standardUuid'} />
                       <RadioButton
                         key={'nonStandardUuid'}

package/src/regimen-editor/standard-regimen.scss

@@ -1,14 +1,14 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .inputContainer {
   margin: spacing.$spacing-05 0;
 }
 .container {
   margin: spacing.$spacing-05;
-  background-color: $ui-background;
+  background-color: colors.$white;
 
   & section {
     margin: spacing.$spacing-02 spacing.$spacing-05 0;

package/src/routes.json

@@ -58,6 +58,11 @@
       "order": 1,
       "online": true,
       "offline": true
+    },
+    {
+      "name": "patient-discharge-side-rail-icon",
+      "component": "patientDischargeSideRailIcon",
+      "slot": "action-menu-ward-patient-items-slot"
     }
   ],
   "workspaces": [
@@ -69,6 +74,16 @@
       "canMaximize": true,
       "canHide": true,
       "width": "wider"
+    },
+    {
+      "name": "patient-care-discharge-workspace",
+      "title": "Patient Discharge",
+      "component": "patientDischargeWorkspace",
+      "type": "workspace",
+      "canMaximize": true,
+      "canHide": true,
+      "width": "extra-wide",
+      "groups": ["ward-patient"]
     }
   ]
 }

package/src/types/index.ts

@@ -1,3 +1,5 @@
+import { OpenmrsResource, Patient, Visit } from '@openmrs/esm-framework';
+
 type HIVData = {
   whoStage: number;
   whoStageDate: string;
@@ -245,3 +247,33 @@ export interface Enrollment {
     uuid: string;
   };
 }
+
+export type WardPatient = {
+  /**
+   * Taken either from the inpatientAdmission object, the inpatientRequest object
+   * or the admissionLocation object (which contains the bed)
+   */
+  patient: Patient;
+
+  /**
+   * Taken either from the inpatientAdmission object, the inpatientRequest object
+   * or the admissionLocation object (which contains the bed)
+   */
+  visit: Visit;
+
+  /**
+   * the bed assigned to the patient. This object is only set if the patient
+   * has a bed assigned
+   */
+  bed: Bed;
+};
+
+interface Bed {
+  id: number;
+  uuid: string;
+  bedNumber: string;
+  bedType: OpenmrsResource;
+  row: number;
+  column: number;
+  status: OpenmrsResource;
+}

package/translations/en.json

@@ -39,6 +39,7 @@
   "deleteRegimenModalConfirmationText": "Are you sure you want to delete regimen?",
   "description": "Description",
   "discard": "Discard",
+  "discharge": "Discharge",
   "discontinue": "Discontinue",
   "diseaseClassification": "Disease classification",
   "drugAllergies": "Drug Allergies",