@kenyaemr/esm-service-queues-app 7.0.2-pre.65

package/dist/routes.json

@@ -0,0 +1 @@
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0","queue":"^2.4.0-0"},"extensions":[{"name":"outpatient-side-nav-ext","component":"outpatientSideNav","slot":"outpatient-sidebar-slot","online":true,"offline":true},{"name":"service-queues-dashboard-link","component":"serviceQueuesDashboardLink","slot":"homepage-dashboard-slot","meta":{"name":"service-queues","slot":"service-queues-dashboard-slot","title":"Service queues"},"online":true,"offline":true},{"name":"queue-table-by-status-menu-dashboard-link","component":"queueTableByStatusMenu","meta":{"name":"service-queues","slot":"service-queues-dashboard-slot","title":"Service queues"},"online":true,"offline":true},{"component":"root","name":"service-queues-dashboard","slot":"service-queues-dashboard-slot"},{"name":"edit-queue-entry-status-modal","component":"editQueueEntryStatusModal"},{"name":"patient-info-banner-slot","component":"patientInfoBannerSlot"},{"name":"remove-queue-entry","component":"removeQueueEntry"},{"name":"clear-all-queue-entries","component":"clearAllQueueEntries"},{"name":"add-visit-to-queue-modal","component":"addVisitToQueueModal"},{"name":"transition-queue-entry-status-modal","component":"transitionQueueEntryStatusModal"},{"name":"previous-visit-summary-widget","component":"pastVisitSummary","slot":"previous-visit-summary-slot"},{"name":"add-provider-to-room-modal","component":"addProviderToRoomModal"},{"name":"transition-queue-entry-modal","component":"transitionQueueEntryModal"},{"name":"edit-queue-entry-modal","component":"editQueueEntryModal"},{"name":"undo-transition-queue-entry-modal","component":"undoTransitionQueueEntryModal"},{"name":"void-queue-entry-modal","component":"voidQueueEntryModal"},{"name":"end-queue-entry-modal","component":"endQueueEntryModal"},{"name":"active-visits-row-actions","component":"activeVisitsRowActions","slot":"queue-table-serve-patient-slot"},{"name":"visit-form-queue-fields","component":"visitFormQueueFields","slot":"visit-form-queue-slot"}],"workspaces":[{"name":"service-queues-service-form","title":"addNewQueueService","component":"addNewQueueServiceWorkspace","type":"service-queues"},{"name":"service-queues-room-form","title":"addNewQueueServiceRoom","component":"addNewQueueServiceRoomWorkspace","type":"service-queues"},{"name":"service-queues-linelist-filter","title":"filter","component":"queueLinelistFilterWorkspace","type":"service-queues"},{"name":"service-queues-patient-search","title":"searchPatient","component":"patientSearchWorkspace","type":"service-queues"}],"version":"7.0.2-pre.65"}

package/jest.config.js

@@ -0,0 +1,3 @@
+const rootConfig = require('../../jest.config.js');
+
+module.exports = rootConfig;

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@kenyaemr/esm-service-queues-app",
+  "version": "7.0.2-pre.65",
+  "description": "Outpatient front-end module for the OpenMRS SPA",
+  "browser": "dist/kenyaemr-esm-service-queues-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/openmrs/openmrs-esm-patient-management#readme",
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
+    "debug": "npm run serve",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "lint": "cross-env eslint src --ext ts,tsx",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests --color",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
+    "coverage": "yarn test --coverage",
+    "typescript": "tsc",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.extension.tsx' 'src/**/*.workspace.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openmrs/openmrs-esm-patient-management.git"
+  },
+  "bugs": {
+    "url": "https://github.com/openmrs/openmrs-esm-patient-management/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "~1.37.0",
+    "lodash-es": "^4.17.15"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "5.x",
+    "react": "^18.1.0",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x",
+    "swr": "2.x"
+  },
+  "devDependencies": {
+    "webpack": "^5.74.0"
+  },
+  "stableVersion": "7.0.1"
+}

package/src/active-visits/active-visits-row-actions.component.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import TransitionMenu from '../queue-entry-table-components/transition-entry.component';
+import { type QueueTableCellComponentProps, type QueueEntry } from '../types';
+import { useConfig } from '@openmrs/esm-framework';
+import { type ConfigObject } from '../config-schema';
+import { mapVisitQueueEntryProperties } from './active-visits-table.resource';
+import styles from './active-visits-row-actions.scss';
+
+// This component is meant to be mounted as an extension in the queue-table-extension-column-slot.
+// Defines the following actions the user can perform on a queue entry:
+// - queue / requeue (to the in-service status)
+
+const ActiveVisitRowActionsCell = ({ queueEntry }: QueueTableCellComponentProps) => {
+  const { visitQueueNumberAttributeUuid } = useConfig<ConfigObject>();
+
+  const mappedQueueEntry = mapVisitQueueEntryProperties(queueEntry, visitQueueNumberAttributeUuid);
+
+  return (
+    <div className={styles.transitionMenuContainer}>
+      <TransitionMenu queueEntry={mappedQueueEntry} />
+    </div>
+  );
+};
+
+export default ActiveVisitRowActionsCell;

package/src/active-visits/active-visits-row-actions.scss

@@ -0,0 +1,4 @@
+.transitionMenuContainer {
+  display: inline;
+  vertical-align: top;
+}

package/src/active-visits/active-visits-table.resource.ts

@@ -0,0 +1,273 @@
+import { formatDate, openmrsFetch, parseDate, restBaseUrl, type Visit } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
+import isEmpty from 'lodash-es/isEmpty';
+import useSWR from 'swr';
+import { type Concept, type Identifer, type MappedServiceQueueEntry, type Queue, type QueueEntry } from '../types';
+
+dayjs.extend(isToday);
+
+export interface VisitQueueEntry {
+  queueEntry: QueueEntry;
+  uuid: string;
+  visit: Visit;
+}
+
+export interface MappedVisitQueueEntry {
+  id: string;
+  encounters: Array<MappedEncounter>;
+  name: string;
+  patientAge: string;
+  patientDob: string;
+  patientUuid: string;
+  queue: Queue;
+  priority: Concept;
+  priorityComment: string;
+  status: Concept;
+  startedAt: Date;
+  endedAt: Date;
+  visitType: string;
+  visitUuid: string;
+  visitTypeUuid: string;
+  queueUuid: string;
+  queueEntryUuid: string;
+  queueLocation: string;
+  sortWeight: number;
+  visitQueueNumber: string;
+  identifiers: Array<Identifer>;
+  queueComingFrom: string;
+}
+
+interface ObsData {
+  concept: {
+    display: string;
+    uuid: string;
+  };
+  value?: string | any;
+  groupMembers?: Array<{
+    concept: { uuid: string; display: string };
+    value?: string | any;
+  }>;
+  obsDatetime: string;
+}
+
+interface Encounter {
+  diagnoses: Array<any>;
+  encounterDatetime: string;
+  encounterProviders?: Array<{ provider: { person: { display: string } } }>;
+  encounterType: { display: string; uuid: string };
+  obs: Array<ObsData>;
+  uuid: string;
+  voided: boolean;
+}
+
+interface MappedEncounter extends Omit<Encounter, 'encounterType' | 'provider'> {
+  encounterType: string;
+  provider: string;
+}
+
+const mapEncounterProperties = (encounter: Encounter): MappedEncounter => ({
+  diagnoses: encounter.diagnoses,
+  encounterDatetime: encounter.encounterDatetime,
+  encounterType: encounter.encounterType.display,
+  obs: encounter.obs,
+  provider: encounter.encounterProviders[0]?.provider?.person?.display,
+  uuid: encounter.uuid,
+  voided: encounter.voided,
+});
+
+export const mapVisitQueueEntryProperties = (
+  queueEntry: QueueEntry,
+  visitQueueNumberAttributeUuid: string,
+): MappedVisitQueueEntry => ({
+  id: queueEntry.uuid,
+  encounters: queueEntry.visit?.encounters?.map(mapEncounterProperties),
+  name: queueEntry.display,
+  patientUuid: queueEntry.patient.uuid,
+  patientAge: queueEntry.patient.person?.age + '',
+  patientDob: queueEntry?.patient?.person?.birthdate
+    ? formatDate(parseDate(queueEntry.patient.person.birthdate), { time: false })
+    : '--',
+  queue: queueEntry.queue,
+  priority: queueEntry.priority,
+  priorityComment: queueEntry.priorityComment,
+  status: queueEntry.status,
+  startedAt: dayjs(queueEntry.startedAt).toDate(),
+  endedAt: queueEntry.endedAt ? dayjs(queueEntry.endedAt).toDate() : null,
+  visitType: queueEntry.visit?.visitType?.display,
+  queueLocation: (queueEntry?.queue as any)?.location?.uuid,
+  visitTypeUuid: queueEntry.visit?.visitType?.uuid,
+  visitUuid: queueEntry.visit?.uuid,
+  queueUuid: queueEntry.queue.uuid,
+  queueEntryUuid: queueEntry.uuid,
+  sortWeight: queueEntry.sortWeight,
+  visitQueueNumber: queueEntry.visit?.attributes?.find((e) => e?.attributeType?.uuid === visitQueueNumberAttributeUuid)
+    ?.value,
+  identifiers: queueEntry.patient?.identifiers as Identifer[],
+  queueComingFrom: queueEntry?.queueComingFrom?.name,
+});
+
+export async function updateQueueEntry(
+  visitUuid: string,
+  previousQueueUuid: string,
+  newQueueUuid: string,
+  queueEntryUuid: string,
+  patientUuid: string,
+  priority: string,
+  status: string,
+  endedAt: Date,
+  sortWeight: number,
+) {
+  const abortController = new AbortController();
+  const queueServiceUuid = isEmpty(newQueueUuid) ? previousQueueUuid : newQueueUuid;
+
+  await Promise.all([endPatientStatus(previousQueueUuid, queueEntryUuid, endedAt)]);
+
+  return openmrsFetch(`${restBaseUrl}/visit-queue-entry`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: {
+      visit: { uuid: visitUuid },
+      queueEntry: {
+        status: {
+          uuid: status,
+        },
+        priority: {
+          uuid: priority,
+        },
+        queue: {
+          uuid: queueServiceUuid,
+        },
+        patient: {
+          uuid: patientUuid,
+        },
+        startedAt: new Date(),
+        sortWeight: sortWeight,
+        queueComingFrom: previousQueueUuid,
+      },
+    },
+  });
+}
+
+export async function endPatientStatus(previousQueueUuid: string, queueEntryUuid: string, endedAt: Date) {
+  const abortController = new AbortController();
+  await openmrsFetch(`${restBaseUrl}/queue/${previousQueueUuid}/entry/${queueEntryUuid}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: {
+      endedAt: endedAt,
+    },
+  });
+}
+
+export function useServiceQueueEntries(service: string, locationUuid: string) {
+  const apiUrl = `${restBaseUrl}/visit-queue-entry?status=waiting&service=${service}&location=${locationUuid}&v=full`;
+  const { data, error, isLoading, isValidating } = useSWR<{ data: { results: Array<VisitQueueEntry> } }, Error>(
+    service && locationUuid ? apiUrl : null,
+    openmrsFetch,
+  );
+
+  const mapServiceQueueEntryProperties = (visitQueueEntry: VisitQueueEntry): MappedServiceQueueEntry => ({
+    id: visitQueueEntry.queueEntry.uuid,
+    name: visitQueueEntry.queueEntry.display,
+    age: visitQueueEntry.queueEntry.patient ? visitQueueEntry?.queueEntry?.patient?.person?.age + '' : '--',
+    returnDate: visitQueueEntry.queueEntry.startedAt,
+    visitType: visitQueueEntry.visit?.visitType?.display,
+    gender: visitQueueEntry.queueEntry.patient ? visitQueueEntry?.queueEntry?.patient?.person?.gender : '--',
+    patientUuid: visitQueueEntry.queueEntry ? visitQueueEntry?.queueEntry.uuid : '--',
+  });
+
+  const mappedServiceQueueEntries = data?.data?.results?.map(mapServiceQueueEntryProperties);
+
+  return {
+    serviceQueueEntries: mappedServiceQueueEntries ? mappedServiceQueueEntries : [],
+    isLoading,
+    isError: error,
+    isValidating,
+  };
+}
+
+export async function postQueueEntry(
+  visitUuid: string,
+  queueUuid: string,
+  patientUuid: string,
+  priority: string,
+  status: string,
+  sortWeight: number,
+  locationUuid: string,
+  visitQueueNumberAttributeUuid: string,
+) {
+  const abortController = new AbortController();
+
+  await Promise.all([generateVisitQueueNumber(locationUuid, visitUuid, queueUuid, visitQueueNumberAttributeUuid)]);
+
+  return openmrsFetch(`${restBaseUrl}/visit-queue-entry`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: {
+      visit: { uuid: visitUuid },
+      queueEntry: {
+        status: {
+          uuid: status,
+        },
+        priority: {
+          uuid: priority,
+        },
+        queue: {
+          uuid: queueUuid,
+        },
+        patient: {
+          uuid: patientUuid,
+        },
+        startedAt: new Date(),
+        sortWeight: sortWeight,
+      },
+    },
+  });
+}
+
+export async function generateVisitQueueNumber(
+  location: string,
+  visitUuid: string,
+  queueUuid: string,
+  visitQueueNumberAttributeUuid: string,
+) {
+  const abortController = new AbortController();
+
+  await openmrsFetch(
+    `${restBaseUrl}/queue-entry-number?location=${location}&queue=${queueUuid}&visit=${visitUuid}&visitAttributeType=${visitQueueNumberAttributeUuid}`,
+    {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      signal: abortController.signal,
+    },
+  );
+}
+
+export function serveQueueEntry(servicePointName: string, ticketNumber: string, status: string) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`${restBaseUrl}/queueutil/assignticket`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: {
+      servicePointName,
+      ticketNumber,
+      status,
+    },
+  });
+}

package/src/active-visits/change-status-dialog.component.tsx

@@ -0,0 +1,272 @@
+import React, { useMemo } from 'react';
+import {
+  Button,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Form,
+  ContentSwitcher,
+  Switch,
+  Select,
+  SelectItem,
+  InlineNotification,
+  RadioButton,
+  RadioButtonGroup,
+  InlineLoading,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { navigate, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import { type MappedQueueEntry } from '../types';
+import { updateQueueEntry } from './active-visits-table.resource';
+import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
+import styles from './change-status-dialog.scss';
+import { useQueues } from '../hooks/useQueues';
+import { useForm, Controller } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { type ConfigObject } from '../config-schema';
+import { useMutateQueueEntries } from '../hooks/useQueueEntries';
+
+interface ChangeStatusDialogProps {
+  queueEntry: MappedQueueEntry;
+  closeModal: () => void;
+}
+
+const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, closeModal }) => {
+  const { t } = useTranslation();
+  const { concepts } = useConfig<ConfigObject>();
+  const { allowedPriorities, allowedStatuses } = queueEntry.queue ?? {};
+
+  const schema = useMemo(
+    () =>
+      z.object({
+        location: z.string({ required_error: t('queueLocationRequired', 'Queue location is required') }),
+        service: z.string({ required_error: t('serviceIsRequired', 'Service is required') }),
+        status: z.string({ required_error: t('statusIsRequired', 'Status is required') }),
+        priority: z.string({ required_error: t('priorityIsRequired', 'Priority is required') }),
+      }),
+    [],
+  );
+
+  type ChangeStatusForm = z.infer<typeof schema>;
+
+  const {
+    control,
+    handleSubmit,
+    formState: { isSubmitting, errors },
+    getValues,
+  } = useForm<ChangeStatusForm>({
+    defaultValues: { priority: allowedPriorities[1]?.uuid },
+    resolver: zodResolver(schema),
+  });
+
+  const { queues } = useQueues(queueEntry?.queueLocation);
+  const { queueLocations } = useQueueLocations();
+  const { mutateQueueEntries } = useMutateQueueEntries();
+
+  const onSubmit = (data: ChangeStatusForm) => {
+    const { priority, status, service } = data;
+    const defaultPriority = concepts.defaultPriorityConceptUuid;
+    const queuePriority = priority === '' ? defaultPriority : priority;
+    const emergencyPriorityConceptUuid = concepts.emergencyPriorityConceptUuid;
+    const sortWeight = priority === emergencyPriorityConceptUuid ? 1.0 : 0.0;
+    const endDate = new Date();
+    updateQueueEntry(
+      queueEntry?.visitUuid,
+      queueEntry?.queue?.uuid,
+      service,
+      queueEntry?.queueEntryUuid,
+      queueEntry?.patientUuid,
+      queuePriority,
+      status,
+      endDate,
+      sortWeight,
+    ).then(
+      ({ status }) => {
+        if (status === 201) {
+          showSnackbar({
+            isLowContrast: true,
+            title: t('updateEntry', 'Update entry'),
+            kind: 'success',
+            subtitle: t('queueEntryUpdateSuccessfully', 'Queue Entry Updated Successfully'),
+          });
+          closeModal();
+          mutateQueueEntries();
+          navigate({ to: `${window.spaBase}/home/service-queues` });
+        }
+      },
+      (error) => {
+        showSnackbar({
+          title: t('queueEntryStatusUpdateFailed', 'Error updating queue entry status'),
+          kind: 'error',
+          subtitle: error?.message,
+        });
+      },
+    );
+  };
+  const onError = (errors) => console.error(errors);
+
+  if (Object.keys(queueEntry)?.length === 0) {
+    return <ModalHeader closeModal={closeModal} title={t('patientNotInQueue', 'The patient is not in the queue')} />;
+  }
+
+  if (Object.keys(queueEntry)?.length > 0) {
+    return (
+      <div>
+        <Form onSubmit={handleSubmit(onSubmit, onError)}>
+          <ModalHeader
+            closeModal={closeModal}
+            title={t('movePatientToNextService', 'Move patient to the next service?')}
+          />
+          <ModalBody>
+            <div className={styles.modalBody}>
+              <h5>
+                {queueEntry.name} &nbsp; · &nbsp;{queueEntry.patientSex} &nbsp; · &nbsp;{queueEntry.patientAge}&nbsp;
+                {t('years', 'Years')}
+              </h5>
+            </div>
+            <section>
+              <Controller
+                name="location"
+                control={control}
+                render={({ field: { onChange, value } }) => (
+                  <Select
+                    labelText={t('selectQueueLocation', 'Select a queue location')}
+                    id="location"
+                    invalid={!!errors.location}
+                    invalidText={errors.location?.message}
+                    value={value}
+                    onChange={(event) => {
+                      onChange(event.target.value);
+                    }}>
+                    {!getValues()?.location && (
+                      <SelectItem text={t('selectQueueLocation', 'Select a queue location')} value="" />
+                    )}
+                    {queueLocations?.length > 0 &&
+                      queueLocations.map((location) => (
+                        <SelectItem key={location.id} text={location.name} value={location.id}>
+                          {location.name}
+                        </SelectItem>
+                      ))}
+                  </Select>
+                )}
+              />
+            </section>
+
+            <section className={styles.section}>
+              <div className={styles.sectionTitle}>{t('queueService', 'Queue service')}</div>
+              <Controller
+                name="service"
+                control={control}
+                render={({ field: { onChange, value } }) => (
+                  <Select
+                    labelText={t('selectService', 'Select a service')}
+                    id="service"
+                    invalid={!!errors.service}
+                    invalidText={errors.service?.message}
+                    value={value}
+                    onChange={(event) => onChange(event.target.value)}>
+                    {!getValues()?.service && <SelectItem text={t('selectService', 'Select a service')} value="" />}
+                    {queues?.length > 0 &&
+                      queues.map((service) => (
+                        <SelectItem key={service.uuid} text={service.display} value={service.uuid}>
+                          {service.display}
+                        </SelectItem>
+                      ))}
+                  </Select>
+                )}
+              />
+            </section>
+
+            <section className={styles.section}>
+              <div className={styles.sectionTitle}>{t('queueStatus', 'Queue status')}</div>
+              {!allowedStatuses?.length ? (
+                <InlineNotification
+                  className={styles.inlineNotification}
+                  kind={'error'}
+                  lowContrast
+                  subtitle={t('configureStatus', 'Please configure status to continue.')}
+                  title={t('noStatusConfigured', 'No status configured')}
+                />
+              ) : (
+                <Controller
+                  name="status"
+                  control={control}
+                  render={({ field: { value, onChange } }) => (
+                    <RadioButtonGroup
+                      className={styles.radioButtonWrapper}
+                      name="status"
+                      invalid={!!errors.status}
+                      invalidText={errors.status?.message}
+                      defaultSelected={value}
+                      onChange={(uuid) => {
+                        onChange(uuid);
+                      }}>
+                      {allowedStatuses?.length > 0 &&
+                        allowedStatuses.map(({ uuid, display }) => (
+                          <RadioButton key={uuid} labelText={display} value={uuid} />
+                        ))}
+                    </RadioButtonGroup>
+                  )}
+                />
+              )}
+            </section>
+
+            <section className={styles.section}>
+              <div className={styles.sectionTitle}>{t('queuePriority', 'Queue priority')}</div>
+              <Controller
+                control={control}
+                name="priority"
+                render={({ field: { onChange } }) => (
+                  <>
+                    <ContentSwitcher
+                      size="sm"
+                      selectedIndex={1}
+                      onChange={(event) => {
+                        onChange(event.name as any);
+                      }}>
+                      {allowedPriorities?.length > 0 ? (
+                        allowedPriorities.map(({ uuid, display }) => {
+                          return <Switch name={uuid} text={display} key={uuid} value={uuid} />;
+                        })
+                      ) : (
+                        <Switch
+                          name={t('noPriorityFound', 'No priority found')}
+                          text={t('noPriorityFound', 'No priority found')}
+                          value={null}
+                        />
+                      )}
+                    </ContentSwitcher>
+                    {errors.priority && <div className={styles.error}>{errors.priority.message}</div>}
+                  </>
+                )}
+              />
+            </section>
+          </ModalBody>
+          <ModalFooter>
+            <Button kind="secondary" onClick={closeModal}>
+              {t('cancel', 'Cancel')}
+            </Button>
+            <Button disabled={isSubmitting} type="submit">
+              <>
+                {isSubmitting ? (
+                  <div className={styles.inline}>
+                    <InlineLoading
+                      status="active"
+                      iconDescription={t('submitting', 'Submitting')}
+                      description={t('submitting', 'Submitting')}
+                    />
+                  </div>
+                ) : (
+                  t('moveToNextService', 'Move to next service')
+                )}
+              </>
+            </Button>
+          </ModalFooter>
+        </Form>
+      </div>
+    );
+  }
+};
+
+export default ChangeStatus;

package/src/active-visits/change-status-dialog.scss

@@ -0,0 +1,47 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+
+.radioButtonGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: spacing.$spacing-03;
+  min-height: spacing.$spacing-10;
+  width: 100%;
+  @include type.type-style('body-compact-01');
+}
+
+.radioButton {
+  padding: spacing.$spacing-02 spacing.$spacing-02;
+  margin: spacing.$spacing-03 0;
+}
+
+section {
+  margin: spacing.$spacing-03;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin-bottom: spacing.$spacing-04;
+}
+
+.modalBody {
+  padding-bottom: spacing.$spacing-05;
+}
+
+.inline {
+  display: flex;
+  align-items: center;
+}
+
+.loading {
+  margin-right: spacing.$spacing-02;
+}
+
+.error {
+  margin-top: spacing.$spacing-03;
+  color: colors.$red-60;
+  @include type.type-style('label-01');
+}