@kenyaemr/esm-morgue-app 5.3.8-pre.1562 → 5.3.8-pre.1570

package/src/tabs/tabs.scss

@@ -59,7 +59,6 @@
   justify-content: space-between;
   align-items: center;
   padding: layout.$spacing-04 layout.$spacing-05;
-  // background-color: $ui-02;
 }
 
 .backgroundDataFetchingIndicator {
@@ -183,7 +182,7 @@
 .actionBtn {
   display: flex;
   gap: 0.5rem;
-  margin-right: layout.$spacing-05;
+  margin-right: layout.$spacing-07;
 }
 
 .mainSection {

package/src/types/index.ts

@@ -1,3 +1,10 @@
+import { OpenmrsResource } from '@openmrs/esm-framework';
+
+export interface Concept extends OpenmrsResource {}
+export type QueuePriority = 'Emergency' | 'Not Urgent' | 'Priority' | 'Urgent';
+export type MappedQueuePriority = Omit<QueuePriority, 'Urgent'>;
+export type QueueService = 'Clinical consultation' | 'Triage';
+export type QueueStatus = 'Finished Service' | 'In Service' | 'Waiting';
 export interface Patient {
   uuid: string;
   display: string;
@@ -180,3 +187,116 @@ export interface EncounterList {
     name: string;
   };
 }
+
+export interface VisitQueueEntry {
+  queueEntry: VisitQueueEntry;
+  uuid: string;
+  visit: Visit;
+}
+
+export interface VisitQueueEntry {
+  display: string;
+  endedAt: null;
+  locationWaitingFor: string | null;
+  patient: {
+    uuid: string;
+    person: {
+      age: string;
+      gender: string;
+    };
+    phoneNumber: string;
+  };
+  priority: {
+    display: QueuePriority;
+    uuid: string;
+  };
+  providerWaitingFor: null;
+  queue: Queue;
+  startedAt: string;
+  status: {
+    display: QueueStatus;
+    uuid: string;
+  };
+  uuid: string;
+  visit: Visit;
+}
+
+export interface MappedVisitQueueEntry {
+  id: string;
+  name: string;
+  patientUuid: string;
+  priority: MappedQueuePriority;
+  priorityUuid: string;
+  service: string;
+  status: QueueStatus;
+  statusUuid: string;
+  visitUuid: string;
+  visitType: string;
+  queue: Queue;
+  queueEntryUuid: string;
+}
+
+export interface UseVisitQueueEntries {
+  queueEntry: MappedVisitQueueEntry | null;
+  isLoading: boolean;
+  error: Error;
+  isValidating?: boolean;
+  mutate: () => void;
+}
+export interface Queue {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  location: Location;
+  service: string;
+  allowedPriorities: Array<Concept>;
+  allowedStatuses: Array<Concept>;
+}
+
+export type UpdateVisitPayload = {
+  stopDatetime?: Date;
+};
+
+export interface PaginatedResponse {
+  uuid: string;
+  display: string;
+  identifiers: Identifier[];
+  person: Person;
+}
+
+export interface Identifier {
+  identifier: string;
+  uuid: string;
+  preferred: boolean;
+  location: Location;
+}
+
+export interface Location {
+  uuid: string;
+  name: string;
+}
+
+export interface Person {
+  uuid: string;
+  display: string;
+  gender: string;
+  birthdate: string;
+  dead: boolean;
+  age: number;
+  deathDate: string;
+  causeOfDeath: CauseOfDeath;
+  preferredAddress: PreferredAddress;
+}
+
+export interface CauseOfDeath {
+  uuid: string;
+  display: string;
+}
+
+export interface PreferredAddress {
+  uuid: string;
+  stateProvince: any;
+  countyDistrict: any;
+  address4: any;
+}

package/src/utils/utils.ts

@@ -34,3 +34,26 @@ export function convertDateToDays(startDate: string | Date): number {
   const start = dayjs(startDate);
   return today.diff(start, 'day');
 }
+
+/**
+ * Formats a given date string into "DD-MMM-YYYY, hh:mm A" format.
+ *
+ * @param {string | Date | undefined} date - The date to format.
+ * @returns {string} - The formatted date or an empty string if no date is provided.
+ */
+export const formatDateTime = (date) => {
+  if (!date) {
+    return '--';
+  }
+  return dayjs(date).format('DD-MMM-YYYY, hh:mm A');
+};
+
+// Utility functions to get the current date and time
+
+export const getCurrentTime = () => {
+  const now = new Date();
+  const hours = now.getHours() % 12 || 12;
+  const minutes = String(now.getMinutes()).padStart(2, '0');
+  const period = now.getHours() >= 12 ? 'PM' : 'AM';
+  return { time: `${hours}:${minutes}`, period };
+};

package/src/workspaces/discharge-body.scss

@@ -52,3 +52,16 @@
 .dateTimePickerContainer {
   margin-left: layout.$spacing-04;
 }
+
+.sectionField {
+  min-width: 25rem;
+}
+.columnField {
+  padding: layout.$spacing-02;
+}
+.fieldColumn {
+  padding: layout.$spacing-04;
+}
+.fieldSection {
+  min-width: 22rem;
+}

package/src/workspaces/discharge-body.workspace.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   Button,
   ButtonSet,
@@ -9,56 +10,255 @@ import {
   TimePickerSelect,
   SelectItem,
   Column,
+  TextInput,
 } from '@carbon/react';
-import { ExtensionSlot, ResponsiveWrapper, useLayoutType } from '@openmrs/esm-framework';
-import React from 'react';
+import {
+  ResponsiveWrapper,
+  restBaseUrl,
+  setCurrentVisit,
+  showSnackbar,
+  useConfig,
+  useLayoutType,
+  useSession,
+  useVisit,
+} from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import styles from './discharge-body.scss';
 import DeceasedInfo from '../component/deceasedInfo/deceased-info.component';
+import {
+  removeQueuedPatient,
+  startVisitWithEncounter,
+  updateVisit,
+  useVisitQueueEntry,
+} from '../hook/useMorgue.resource';
+import { z } from 'zod';
+import { useForm, Controller } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { getCurrentTime } from '../utils/utils';
+import { ConfigObject } from '../config-schema';
+import { mutate } from 'swr';
 
-interface PatientAdditionalInfoFormProps {
+interface DischargeFormProps {
   closeWorkspace: () => void;
   patientUuid: string;
 }
 
-const PatientAdditionalInfoForm: React.FC<PatientAdditionalInfoFormProps> = ({ closeWorkspace, patientUuid }) => {
+const dischargeSchema = z.object({
+  dateOfDischarge: z.date({ coerce: true }).refine((date) => !!date, 'Date of discharge is required'),
+  timeOfDischarge: z.string().nonempty('Time of discharge is required'),
+  period: z
+    .string()
+    .nonempty('AM/PM is required')
+    .regex(/^(AM|PM)$/i, 'Invalid period'),
+  burialPermitNumber: z.string().nonempty('Burial Permit Number is required'),
+});
+
+type DischargeFormValues = z.infer<typeof dischargeSchema>;
+
+const DischargeForm: React.FC<DischargeFormProps> = ({ closeWorkspace, patientUuid }) => {
   const { t } = useTranslation();
   const layout = useLayoutType();
+  const { currentVisit, currentVisitIsRetrospective } = useVisit(patientUuid);
+  const { queueEntry } = useVisitQueueEntry(patientUuid, currentVisit?.uuid);
+
+  const { time: defaultTime, period: defaultPeriod } = getCurrentTime();
+
+  const {
+    currentProvider: { uuid: currentProviderUuid },
+    sessionLocation: { uuid: locationUuid },
+  } = useSession();
+
+  const {
+    burialPermitNumberUuid,
+    encounterProviderRoleUuid,
+    morgueAdmissionEncounterType,
+    morgueDischargeEncounterTypeUuid,
+    morgueVisitTypeUuid,
+  } = useConfig<ConfigObject>();
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<DischargeFormValues>({
+    resolver: zodResolver(dischargeSchema),
+    defaultValues: {
+      dateOfDischarge: new Date(),
+      timeOfDischarge: defaultTime,
+      period: defaultPeriod,
+      burialPermitNumber: '',
+    },
+  });
+
+  const onSubmit = async (data: DischargeFormValues) => {
+    if (currentVisitIsRetrospective) {
+      setCurrentVisit(null, null);
+      closeWorkspace();
+    } else {
+      const obs = [];
+      if (data.burialPermitNumber) {
+        obs.push({ concept: burialPermitNumberUuid, value: data.burialPermitNumber });
+      }
+
+      const encounterPayload = {
+        encounterDatetime: data?.dateOfDischarge,
+        patient: currentVisit?.patient?.uuid,
+        encounterType: morgueDischargeEncounterTypeUuid,
+        location: currentVisit?.location?.uuid,
+        encounterProviders: [
+          {
+            provider: currentProviderUuid,
+            encounterRole: encounterProviderRoleUuid,
+          },
+        ],
+        visit: currentVisit?.uuid,
+        obs: obs.length > 0 ? obs : undefined,
+      };
+
+      const endVisitPayload = {
+        stopDatetime: data.dateOfDischarge,
+      };
+
+      const abortController = new AbortController();
+
+      try {
+        // First, create the encounter
+        await startVisitWithEncounter(encounterPayload);
+
+        showSnackbar({
+          title: 'Discharge',
+          subtitle: 'The deceased has been discharged successfully',
+          kind: 'success',
+        });
+
+        // Then, end the visit
+        updateVisit(currentVisit.uuid, endVisitPayload, abortController).subscribe({
+          next: (response) => {
+            if (queueEntry) {
+              removeQueuedPatient(
+                queueEntry.queue.uuid,
+                queueEntry.queueEntryUuid,
+                abortController,
+                response?.data.stopDatetime,
+              );
+            }
+            closeWorkspace();
+            showSnackbar({
+              isLowContrast: true,
+              kind: 'success',
+              subtitle: t('visitEndSuccessfully', `${response?.data?.visitType?.display} ended successfully`),
+              title: t('visitEnded', 'Visit ended'),
+            });
+            mutate((key) => typeof key === 'string' && key.startsWith(`${restBaseUrl}/visit`));
+          },
+          error: (error) => {
+            showSnackbar({
+              title: t('errorEndingVisit', 'Error ending visit'),
+              kind: 'error',
+              isLowContrast: false,
+              subtitle: error?.message,
+            });
+          },
+        });
+      } catch (error) {
+        const errorMessage = JSON.stringify(error?.responseBody?.error?.message?.replace(/\[/g, '').replace(/\]/g, ''));
+        showSnackbar({
+          title: 'Visit Error',
+          subtitle: `An error has occurred while starting visit, Contact system administrator quoting this error ${errorMessage}`,
+          kind: 'error',
+          isLowContrast: true,
+        });
+      }
+    }
+  };
 
   return (
-    <Form className={styles.formContainer}>
+    <Form className={styles.formContainer} onSubmit={handleSubmit(onSubmit)}>
       <Stack gap={4} className={styles.formGrid}>
         <DeceasedInfo patientUuid={patientUuid} />
         <div className={styles.dateTimePickerContainer}>
           <Column>
-            <DatePicker datePickerType="single" className={styles.formAdmissionDatepicker}>
-              <DatePickerInput
-                id="date-of-admission"
-                placeholder="mm/dd/yyyy"
-                labelText={t('dateOfAdmission', 'Date of admission*')}
-              />
-            </DatePicker>
+            <Controller
+              name="dateOfDischarge"
+              control={control}
+              render={({ field }) => (
+                <DatePicker
+                  datePickerType="single"
+                  className={styles.formAdmissionDatepicker}
+                  onChange={(event) => {
+                    if (event.length) {
+                      field.onChange(event[0]);
+                    }
+                  }}
+                  value={field.value ? new Date(field.value) : null}>
+                  <DatePickerInput
+                    {...field}
+                    id="date-of-admission"
+                    placeholder="yyyy-mm-dd"
+                    labelText={t('dateOfAdmission', 'Date of discharge*')}
+                    invalid={!!errors.dateOfDischarge}
+                    invalidText={errors.dateOfDischarge?.message}
+                  />
+                </DatePicker>
+              )}
+            />
           </Column>
 
           <Column>
             <div className={styles.dateTimeSection}>
               <ResponsiveWrapper>
-                <TimePicker
-                  id="time-of-death-picker"
-                  labelText={t('timeofDischarge', 'Time of discharge*')}
-                  className={styles.formAdmissionTimepicker}
+                <Controller
+                  name="timeOfDischarge"
+                  control={control}
+                  render={({ field }) => (
+                    <TimePicker
+                      {...field}
+                      id="time-of-discharge-picker"
+                      labelText={t('timeOfDischarge', 'Time of discharge*')}
+                      className={styles.formAdmissionTimepicker}
+                      invalid={!!errors.timeOfDischarge}
+                      invalidText={errors.timeOfDischarge?.message}
+                    />
+                  )}
+                />
+                <Controller
+                  name="period"
+                  control={control}
+                  render={({ field }) => (
+                    <TimePickerSelect
+                      {...field}
+                      className={styles.formDeathTimepickerSelector}
+                      id="time-picker-select"
+                      labelText={t('selectPeriod', 'AM/PM')}
+                      invalid={!!errors.period}
+                      invalidText={errors.period?.message}>
+                      <SelectItem value="AM" text="AM" />
+                      <SelectItem value="PM" text="PM" />
+                    </TimePickerSelect>
+                  )}
                 />
-                <TimePickerSelect
-                  className={styles.formDeathTimepickerSelector}
-                  id="time-picker-select"
-                  labelText={t('selectPeriod', 'AM/PM')}>
-                  <SelectItem value="AM" text="AM" />
-                  <SelectItem value="PM" text="PM" />
-                </TimePickerSelect>
               </ResponsiveWrapper>
             </div>
           </Column>
         </div>
+        <Column className={styles.fieldColumn}>
+          <Controller
+            name="burialPermitNumber"
+            control={control}
+            render={({ field }) => (
+              <TextInput
+                {...field}
+                id="burialPermitNumber"
+                type="text"
+                className={styles.fieldSection}
+                placeholder={t('burialPermitNumber', 'Burial permit number')}
+                labelText={t('burialPermitNumber', 'Burial permit number')}
+                invalid={!!errors.burialPermitNumber}
+                invalidText={errors.burialPermitNumber?.message}
+              />
+            )}
+          />
+        </Column>
 
         <ButtonSet className={styles.buttonSet}>
           <Button size="lg" kind="secondary" onClick={closeWorkspace}>
@@ -73,4 +273,4 @@ const PatientAdditionalInfoForm: React.FC<PatientAdditionalInfoFormProps> = ({ c
   );
 };
 
-export default PatientAdditionalInfoForm;
+export default DischargeForm;

package/translations/en.json

@@ -2,22 +2,21 @@
   "admissionForm": "Admission form",
   "admit": "Admit",
   "admitted": "Admitted Bodies",
-  "admittedOnes": "Admitted",
   "allocation": "Allocation",
-  "awaiting": "Awaiting",
+  "allocations": "Allocation",
   "causeOfDeath": "Cause of death: ",
+  "dischargeBodies": "Discharged bodies",
   "discharged": "Discharged",
-  "dischargeForm": "Discharge form",
-  "discharges": "Discharges",
   "empty": "Empty",
   "errorMessage": "Error",
   "mortuary": "Mortuary",
   "mortuaryManagement": "Mortuary management",
+  "noAdmittedBodies": "There are no admitted bodies",
   "noDeceasedPersons": "There are no deceased persons on the waiting list",
   "noResultFound": "Sorry, no results found",
   "noWaitingList": "Waiting List",
+  "nullDate": "--",
   "pullingCompartment": "Pulling compartments data.....",
-  "release": "Release",
   "searchForADeceased": "Try to search again using the deceased patient's unique ID number",
   "waitingInLine": "Waiting In Line",
   "waitingQueue": "Waiting queue",