@digihmis/esm-service-queue-app 1.0.0

package/src/move-patient-new-room/move-patient-new-room.extension.tsx

@@ -0,0 +1,375 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import {
+  FormGroup,
+  InlineNotification,
+  Select,
+  SelectItem,
+  SelectSkeleton,
+  Stack,
+  InlineLoading,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  RadioButtonGroup,
+  RadioButton,
+  Button,
+} from '@carbon/react';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { type TFunction } from 'i18next';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { navigate, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import QueuePriority from './component/queue-priority.component';
+import styles from './move-patient-new-room.scss';
+import { type ServiceQueueConfig } from '../config-schema';
+import {
+  postQueueEntry,
+  updateQueueEntry,
+  endQueueEntry,
+  useCurrentQueueEntry,
+  usePerson,
+  useQueue,
+} from './move-patient-new-room.resource';
+import { useMutateQueueEntries } from '../service-queue-checkin-form/service-queue-checkin-form.resource';
+import upperCase from 'lodash-es/upperCase';
+import { QueueEntryPayload } from './type';
+
+type MovePatientToNewRoomProps = {
+  patientUuid: string;
+  closeModal?: () => void;
+  context?: 'triage' | 'consultation' | 'default';
+  afterSubmitNavigateUrl?: string;
+};
+
+const createQueueRoomSchema = (t: TFunction) => {
+  return z.object({
+    queue: z.string().min(1, { message: t('queueRequired', 'Queue is required') }),
+    queueRoom: z.string().min(1, { message: t('roomRequired', 'Room is required') }),
+    priority: z.string().min(1, { message: t('priorityRequired', 'Priority is required') }),
+  });
+};
+
+const MovePatientToNewRoom: React.FC<MovePatientToNewRoomProps> = ({
+  patientUuid,
+  closeModal,
+  afterSubmitNavigateUrl,
+  context = 'default',
+}) => {
+  const { t } = useTranslation();
+  const { queues, isLoading, mutate: mutateQueues } = useQueue();
+  const config = useConfig<ServiceQueueConfig>();
+
+  const {
+    currentQueueEntry,
+    isLoading: isLoadingCurrentEntry,
+    mutate: mutateCurrentEntry,
+  } = useCurrentQueueEntry(patientUuid);
+
+  const filteredQueues = useMemo(() => {
+    if (!queues) {
+      return [];
+    }
+
+    const exclusionList = config.queueExclusions[context] || [];
+    return queues.filter((queue) => !exclusionList.includes(queue.uuid));
+  }, [queues, config.queueExclusions, context]);
+
+  const schema = useMemo(() => createQueueRoomSchema(t), [t]);
+  const { mutateQueueEntries } = useMutateQueueEntries();
+  const { person } = usePerson(patientUuid);
+  const openmrsId =
+    person?.identifiers?.find((id) => id.identifierType?.uuid === config.OpenmrsIdentifierTypeUuid)?.identifier || '';
+
+  const {
+    control,
+    formState: { errors, touchedFields },
+    setValue,
+    watch,
+    getValues,
+    clearErrors,
+  } = useForm({
+    defaultValues: {
+      queue: currentQueueEntry?.queue?.uuid || '',
+      queueRoom: '',
+      priority: currentQueueEntry?.priority?.uuid || '',
+    },
+    mode: 'onChange',
+    resolver: zodResolver(schema),
+  });
+
+  const selectedQueueUuid = watch('queue');
+  const selectedPriority = watch('priority');
+
+  useEffect(() => {
+    if (currentQueueEntry) {
+      if (currentQueueEntry.priority?.uuid) {
+        setValue('priority', currentQueueEntry.priority.uuid);
+      }
+    }
+  }, [currentQueueEntry, setValue]);
+
+  const selectedDestinationQueue = useMemo(() => {
+    if (!selectedQueueUuid || !queues) {
+      return null;
+    }
+    return queues.find((q) => q.uuid === selectedQueueUuid);
+  }, [selectedQueueUuid, queues]);
+
+  const availableQueueRooms = useMemo(() => {
+    if (!selectedDestinationQueue?.queueRooms) {
+      return [];
+    }
+
+    const exclusionList = config.queueExclusions[context] || [];
+
+    return selectedDestinationQueue.queueRooms.filter((room) => {
+      const isExcludedByContext = exclusionList.includes(room.uuid);
+      const isCurrentRoom = room.uuid === currentQueueEntry?.queueRoom?.uuid;
+
+      return !isExcludedByContext && !isCurrentRoom;
+    });
+  }, [selectedDestinationQueue, config.queueExclusions, context, currentQueueEntry?.queueRoom?.uuid]);
+
+  const allowedPriorities = useMemo(() => {
+    if (selectedDestinationQueue?.allowedPriorities && selectedDestinationQueue.allowedPriorities.length > 0) {
+      return selectedDestinationQueue.allowedPriorities;
+    }
+
+    return [
+      { uuid: config.concepts.emergencyPriorityConceptUuid, display: 'Emergency' },
+      { uuid: config.concepts.defaultPriorityConceptUuid, display: 'Not Urgent' },
+      { uuid: config.concepts.defaultStatusConceptUuid, display: 'Waiting' },
+    ];
+  }, [selectedDestinationQueue, config.concepts]);
+
+  const sortWeight = useMemo(() => {
+    return selectedPriority === config.concepts.emergencyPriorityConceptUuid ? 1 : 0;
+  }, [selectedPriority, config.concepts.emergencyPriorityConceptUuid]);
+
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const handleSubmit = async () => {
+    const formValues = getValues();
+
+    if (!formValues.queue || !formValues.queueRoom || !formValues.priority) {
+      showSnackbar({
+        title: t('missingFields', 'Missing required fields'),
+        kind: 'error',
+        isLowContrast: true,
+      });
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const isSameQueue = formValues.queue === currentQueueEntry?.queue?.uuid;
+
+      if (isSameQueue) {
+        // Moving within the same queue - just update the room
+        await updateQueueEntry(currentQueueEntry.uuid, {
+          queueRoom: formValues.queueRoom,
+          priority: formValues.priority,
+          status: config.concepts.defaultStatusConceptUuid,
+          sortWeight,
+        });
+
+        showSnackbar({
+          title: t('patientMoved', 'Patient moved successfully'),
+          subtitle: t('patientMovedDescription', '{{patientName}} has been moved to {{queueRoom}}', {
+            patientName: person?.display,
+            queueRoom: availableQueueRooms.find((r) => r.uuid === formValues.queueRoom)?.display || 'new room',
+          }),
+          kind: 'success',
+          isLowContrast: true,
+        });
+      } else {
+        // Transferring to a different queue - end old entry and create new one
+        if (currentQueueEntry?.uuid) {
+          await endQueueEntry(currentQueueEntry.uuid);
+        }
+
+        const payload: QueueEntryPayload = {
+          patientUuid,
+          queueUuid: formValues.queue,
+          queueRoomUuid: formValues.queueRoom,
+          priorityUuid: formValues.priority,
+          statusUuid: config.concepts.defaultStatusConceptUuid,
+          sortWeight,
+          queueComingFrom: currentQueueEntry?.queue?.uuid,
+          queueRoomComingFrom: currentQueueEntry?.queueRoom?.uuid,
+          visitUuid: currentQueueEntry?.visit?.uuid,
+          startedAt: new Date().toISOString(),
+        };
+
+        await postQueueEntry(payload);
+
+        showSnackbar({
+          title: t('patientTransferred', 'Patient transferred successfully'),
+          subtitle: t('patientTransferredDescription', '{{patientName}} has been transferred to {{queueName}}', {
+            patientName: person?.display,
+            queueName: selectedDestinationQueue?.name || 'new queue',
+          }),
+          kind: 'success',
+          isLowContrast: true,
+        });
+      }
+
+      // Mutate all relevant data sources
+      await Promise.all([mutateQueueEntries(), mutateCurrentEntry(), mutateQueues()]);
+
+      closeModal?.();
+
+      if (afterSubmitNavigateUrl) {
+        navigate({ to: afterSubmitNavigateUrl });
+      }
+    } catch (error) {
+      const errorMessage =
+        error?.responseBody?.error?.message ||
+        error?.responseBody?.error?.translatedMessage ||
+        error?.message ||
+        t('unknownError', 'An unknown error occurred');
+
+      showSnackbar({
+        title: t('errorTransferringPatient', 'Error transferring patient'),
+        subtitle: errorMessage,
+        kind: 'error',
+        isLowContrast: true,
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div>
+      <div>
+        <ModalHeader closeModal={closeModal}>
+          <div className={styles.patientHeader}>
+            <span className={styles.patientName}>{upperCase(person?.display)}</span>
+            <span className={styles.patientDetails}>· {openmrsId} </span>
+            <span className={styles.patientDetails}>
+              · {person?.gender} · {person?.age} {t('years', 'yrs')} ·
+            </span>
+            <span className={styles.currentLocation}>
+              {currentQueueEntry?.queueRoom?.display} - {new Date().toLocaleDateString()}
+            </span>
+          </div>
+        </ModalHeader>
+        <ModalBody>
+          <Stack gap={6}>
+            <div>
+              <Controller
+                name="queue"
+                control={control}
+                render={({ field }) =>
+                  isLoading ? (
+                    <SelectSkeleton />
+                  ) : (
+                    <Select
+                      {...field}
+                      labelText={t('queue', 'Queue')}
+                      id="destinationQueue"
+                      invalid={!!errors.queue && touchedFields.queue}
+                      invalidText={errors.queue?.message}
+                      onChange={(event) => {
+                        field.onChange(event.target.value);
+                        // Clear queue room when queue changes
+                        setValue('queueRoom', '', { shouldValidate: false });
+                        clearErrors('queueRoom');
+                      }}>
+                      <SelectItem text={t('selectQueue', 'Select a queue')} value="" />
+                      {filteredQueues?.map((queue) => (
+                        <SelectItem key={queue.uuid} text={queue.name} value={queue.uuid}>
+                          {queue.name}
+                        </SelectItem>
+                      ))}
+                    </Select>
+                  )
+                }
+              />
+            </div>
+
+            {selectedQueueUuid && (
+              <div>
+                <Controller
+                  name="queueRoom"
+                  control={control}
+                  render={({ field }) =>
+                    isLoading ? (
+                      <SelectSkeleton />
+                    ) : (
+                      <Select
+                        {...field}
+                        labelText={t('room', 'Room')}
+                        id="queueRoom"
+                        invalid={!!errors.queueRoom && touchedFields.queueRoom}
+                        invalidText={errors.queueRoom?.message}
+                        disabled={availableQueueRooms.length === 0}>
+                        <SelectItem text={t('selectRoom', 'Select a room')} value="" />
+                        {availableQueueRooms?.map((room) => (
+                          <SelectItem key={room.uuid} text={room.display || room.name} value={room.uuid}>
+                            {room.display || room.name}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    )
+                  }
+                />
+              </div>
+            )}
+
+            <div>
+              {selectedQueueUuid && (
+                <Controller
+                  name="priority"
+                  control={control}
+                  render={({ field }) => (
+                    <>
+                      <RadioButtonGroup
+                        className={styles.radioButtonGroup}
+                        name="priority"
+                        valueSelected={field.value}
+                        onChange={(uuid) => {
+                          field.onChange(uuid);
+                        }}>
+                        {allowedPriorities.map(({ uuid, display }) => (
+                          <RadioButton
+                            key={uuid}
+                            id={uuid}
+                            labelText={
+                              <QueuePriority priority={{ uuid, display }} priorityConfigs={config.priorityConfigs} />
+                            }
+                            value={uuid}
+                          />
+                        ))}
+                      </RadioButtonGroup>
+                      {errors.priority && touchedFields.priority && (
+                        <div className={styles.errorText}>{errors.priority.message}</div>
+                      )}
+                    </>
+                  )}
+                />
+              )}
+            </div>
+          </Stack>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal} type="button" disabled={isSubmitting}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button onClick={handleSubmit} type="submit" disabled={isSubmitting || isLoadingCurrentEntry} kind="primary">
+            {isSubmitting ? (
+              <InlineLoading description={t('transferring', 'Transferring...')} />
+            ) : (
+              t('confirmTransfer', 'Confirm Transfer')
+            )}
+          </Button>
+        </ModalFooter>
+      </div>
+    </div>
+  );
+};
+
+export default MovePatientToNewRoom;

package/src/move-patient-new-room/move-patient-new-room.resource.ts

@@ -0,0 +1,164 @@
+import { openmrsFetch, restBaseUrl, type FetchResponse } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import useSWR from 'swr';
+import { type Patient, type Queue, type QueueEntry, type QueueEntryPayload, type QueueEntryRequestBody } from './type';
+
+export function useCurrentQueueEntry(patientUuid: string) {
+  const customRepresentation =
+    'custom:(uuid,queue:(uuid,display),queueRoom:(uuid,display),status:(uuid,display),priority:(uuid,display),patient:(uuid,display),startedAt,endedAt,queueComingFrom:(uuid,display),queueRoomComingFrom:(uuid,display),visit:(uuid,display))';
+
+  const apiUrl = `${restBaseUrl}/queue-entry?patient=${patientUuid}&isEnded=false&v=${customRepresentation}`;
+
+  const { data, error, isLoading, mutate } = useSWR<FetchResponse<{ results: Array<QueueEntry> }>>(
+    patientUuid ? apiUrl : null,
+    openmrsFetch,
+  );
+
+  const currentQueueEntry = useMemo(() => {
+    if (!data?.data?.results || data.data.results.length === 0) {
+      return null;
+    }
+    return data.data.results[0];
+  }, [data]);
+
+  return {
+    currentQueueEntry,
+    isLoading,
+    error,
+    mutate,
+  };
+}
+
+export function useQueue() {
+  const customRepresentation =
+    'custom:(uuid,display,name,description,location:(uuid,display),service:(uuid,display),' +
+    'allowedPriorities:(uuid,display),allowedStatuses:(uuid,display),' +
+    'queueRooms:(uuid,display,name,description))';
+
+  const apiUrl = `${restBaseUrl}/queue?v=${customRepresentation}`;
+
+  const { data, error, isLoading, mutate } = useSWR<FetchResponse<{ results: Array<Queue> }>>(apiUrl, openmrsFetch);
+
+  return {
+    queues: data?.data?.results || [],
+    isLoading,
+    error,
+    mutate,
+  };
+}
+
+export async function postQueueEntry(payload: QueueEntryPayload) {
+  const {
+    patientUuid,
+    queueUuid,
+    queueRoomUuid,
+    priorityUuid,
+    statusUuid,
+    sortWeight,
+    queueComingFrom,
+    queueRoomComingFrom,
+    visitUuid,
+    startedAt,
+  } = payload;
+
+  const abortController = new AbortController();
+
+  const requestBody: QueueEntryRequestBody = {
+    patient: patientUuid,
+    queue: queueUuid,
+    status: statusUuid,
+    priority: priorityUuid,
+    sortWeight,
+    startedAt: startedAt || new Date().toISOString(),
+    ...(queueRoomUuid && { queueRoom: queueRoomUuid }),
+    ...(queueComingFrom && { queueComingFrom }),
+    ...(queueRoomComingFrom && { queueRoomComingFrom }),
+    ...(visitUuid && { visit: visitUuid }),
+  };
+
+  try {
+    const response = await openmrsFetch(`${restBaseUrl}/queue-entry`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      signal: abortController.signal,
+      body: JSON.stringify(requestBody),
+    });
+
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export const usePerson = (uuid: string) => {
+  const customRepresentation = `custom:(uuid,display,gender,birthdate,dead,age,deathDate,causeOfDeath:(uuid,display),identifiers:(uuid,identifier,identifierType:(uuid,display),preferred),person:(uuid))`;
+  const url = `${restBaseUrl}/person/${uuid}?v=${customRepresentation}`;
+  const { isLoading, error, data } = useSWR<FetchResponse<Patient['person']>>(url, openmrsFetch);
+  const person = data?.data;
+  return { isLoading, error, person };
+};
+
+export async function updateQueueEntry(
+  queueEntryUuid: string,
+  updates: {
+    queueRoom?: string;
+    priority?: string;
+    status?: string;
+    sortWeight?: number;
+  },
+) {
+  const abortController = new AbortController();
+
+  const requestBody: any = {};
+
+  if (updates.queueRoom) {
+    requestBody.queueRoom = updates.queueRoom;
+  }
+  if (updates.priority) {
+    requestBody.priority = updates.priority;
+  }
+  if (updates.status) {
+    requestBody.status = updates.status;
+  }
+  if (updates.sortWeight !== undefined) {
+    requestBody.sortWeight = updates.sortWeight;
+  }
+
+  try {
+    const response = await openmrsFetch(`${restBaseUrl}/queue-entry/${queueEntryUuid}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      signal: abortController.signal,
+      body: JSON.stringify(requestBody),
+    });
+
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function endQueueEntry(queueEntryUuid: string, endedAt?: string) {
+  const abortController = new AbortController();
+
+  try {
+    const response = await openmrsFetch(`${restBaseUrl}/queue-entry/${queueEntryUuid}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      signal: abortController.signal,
+      body: JSON.stringify({
+        endedAt: endedAt || new Date().toISOString(),
+      }),
+    });
+
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}

package/src/move-patient-new-room/move-patient-new-room.scss

@@ -0,0 +1,50 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.inputRow {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: layout.$spacing-05;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    grid-template-columns: 1fr;
+  }
+}
+
+.patientHeader {
+  padding: layout.$spacing-05;
+  border-bottom: 1px solid colors.$gray-20;
+  background-color: colors.$gray-10;
+
+  .patientName {
+    @include type.type-style('heading-compact-01');
+    font-weight: 600;
+    margin-right: layout.$spacing-03;
+  }
+
+  .patientId {
+    @include type.type-style('body-compact-01');
+    font-weight: 600;
+    margin-right: layout.$spacing-02;
+  }
+
+  .patientDetails {
+    @include type.type-style('body-compact-01');
+    color: colors.$gray-70;
+  }
+  .currentLocation {
+    @include type.type-style('body-compact-01');
+    color: colors.$gray-90;
+    float: right;
+  }
+}
+:global(.cds--select-input) {
+  background-color: colors.$gray-20;
+}
+
+@media (min-width: 82rem) {
+  :global(.cds--modal-container) {
+    width: 38%;
+  }
+}