From 745d9db7881880add9f4ab4fe53c6d448276ec6f Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Tue, 13 May 2025 18:06:20 +0300
Subject: [PATCH 01/17] chore

---
 ...e-status-move-to-next-dialog.component.tsx | 539 ------------------
 ...patient-to-next-action-menu.components.tsx |  36 --
 ...rvice-point-patient-action.components.tsx} |  16 +-
 ...ervice-point-reassign-action.component.tsx |  28 +
 ...g.scss => move-to-next-service-point.scss} |   6 +
 ... move-to-next-service-point.workspace.tsx} | 112 ++--
 .../notes-action-menu.components.tsx          |   2 +-
 .../{ => notes}/notes-dialog.component.tsx    |   2 +-
 ...atient-queue-validation-schema.resource.ts |   4 +-
 .../queue-clinical-table.component.tsx        |  17 +-
 .../queue-triage-table.component.tsx          |  32 +-
 ...ue-table-move-to-next-dialog.component.tsx | 454 ---------------
 packages/esm-patient-queues-app/src/index.ts  |  27 +-
 .../esm-patient-queues-app/src/routes.json    |  44 +-
 packages/esm-ugandaemr-app/src/index.ts       |   4 -
 packages/esm-ugandaemr-app/src/routes.json    |  13 +-
 16 files changed, 168 insertions(+), 1168 deletions(-)
 delete mode 100644 packages/esm-patient-queues-app/src/active-visits/change-status-move-to-next-dialog.component.tsx
 delete mode 100644 packages/esm-patient-queues-app/src/active-visits/move-patient-to-next-action-menu.components.tsx
 rename packages/esm-patient-queues-app/src/active-visits/{move-to-next-service-point-action.components.tsx => move-to-next-service-point-patient-action.components.tsx} (59%)
 create mode 100644 packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-reassign-action.component.tsx
 rename packages/esm-patient-queues-app/src/active-visits/{change-status-dialog.scss => move-to-next-service-point.scss} (89%)
 rename packages/esm-patient-queues-app/src/active-visits/{change-status-dialog.component.tsx => move-to-next-service-point.workspace.tsx} (85%)
 rename packages/esm-patient-queues-app/src/active-visits/{ => notes}/notes-action-menu.components.tsx (93%)
 rename packages/esm-patient-queues-app/src/active-visits/{ => notes}/notes-dialog.component.tsx (94%)
 delete mode 100644 packages/esm-patient-queues-app/src/active-visits/queue-table-move-to-next-dialog.component.tsx

diff --git a/packages/esm-patient-queues-app/src/active-visits/change-status-move-to-next-dialog.component.tsx b/packages/esm-patient-queues-app/src/active-visits/change-status-move-to-next-dialog.component.tsx
deleted file mode 100644
index 189b7a80..00000000
--- a/packages/esm-patient-queues-app/src/active-visits/change-status-move-to-next-dialog.component.tsx
+++ /dev/null
@@ -1,539 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import {
-  Button,
-  ContentSwitcher,
-  Form,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  Select,
-  SelectItem,
-  Switch,
-  TextArea,
-  InlineLoading,
-  Layer,
-  InlineNotification,
-} from '@carbon/react';
-import { useTranslation } from 'react-i18next';
-import {
-  getSessionStore,
-  navigate,
-  parseDate,
-  restBaseUrl,
-  showNotification,
-  showToast,
-  useLayoutType,
-  useSession,
-  useVisit,
-} from '@openmrs/esm-framework';
-import { useQueueRoomLocations } from '../hooks/useQueueRooms';
-import styles from './change-status-dialog.scss';
-import { QueueStatus, extractErrorMessagesFromResponse, handleMutate } from '../utils/utils';
-import {
-  NewQueuePayload,
-  addQueueEntry,
-  getCareProvider,
-  getCurrentPatientQueueByPatientUuid,
-  updateQueueEntry,
-  updateVisit,
-  useProviders,
-} from './patient-queues.resource';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { CreateQueueEntryFormData, createQueueEntrySchema } from './patient-queue-validation-schema.resource';
-import { Controller, useForm } from 'react-hook-form';
-
-interface ChangeStatusDialogProps {
-  patientUuid: string;
-  closeModal: () => void;
-}
-
-const ChangeStatusMoveToNext: React.FC<ChangeStatusDialogProps> = ({ patientUuid, closeModal }) => {
-  const { t } = useTranslation();
-
-  const isTablet = useLayoutType() === 'tablet';
-
-  const sessionUser = useSession();
-
-  const [contentSwitcherIndex, setContentSwitcherIndex] = useState(1);
-
-  const [statusSwitcherIndex, setStatusSwitcherIndex] = useState(1);
-
-  const [status, setStatus] = useState('');
-
-  const { queueRoomLocations, error: errorLoadingQueueRooms } = useQueueRoomLocations(
-    sessionUser?.sessionLocation?.uuid,
-  );
-
-  const [selectedNextQueueLocation, setSelectedNextQueueLocation] = useState(queueRoomLocations[0]?.uuid);
-
-  const { activeVisit } = useVisit(patientUuid);
-
-  const [isLoading, setIsLoading] = useState(true);
-
-  const [provider, setProvider] = useState('');
-
-  const [selectedProvider, setSelectedProvider] = useState('');
-
-  const [priorityComment, setPriorityComment] = useState('');
-
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const [isEndingVisit, setIsEndingVisit] = useState(false);
-
-  const { providers, error: errorLoadingProviders } = useProviders(selectedNextQueueLocation);
-
-  // Memoize the function to fetch the provider using useCallback
-  const fetchProvider = useCallback(() => {
-    if (!sessionUser?.user?.uuid) return;
-
-    setIsLoading(true);
-
-    getCareProvider(sessionUser?.user?.uuid).then(
-      (response) => {
-        const uuid = response?.data?.results[0].uuid;
-        setIsLoading(false);
-        setProvider(uuid);
-      },
-      (error) => {
-        const errorMessages = extractErrorMessagesFromResponse(error);
-        setIsLoading(false);
-        showNotification({
-          title: "Couldn't get provider",
-          kind: 'error',
-          critical: true,
-          description: errorMessages.join(','),
-        });
-      },
-    );
-  }, [sessionUser?.user?.uuid]);
-
-  useEffect(() => fetchProvider(), [fetchProvider]);
-
-  const priorityLabels = useMemo(() => ['Not Urgent', 'Urgent', 'Emergency'], []);
-
-  const statusLabels = useMemo(
-    () => [
-      { status: 'pending', label: 'Move to Pending' },
-      { status: 'completed', label: 'Move to Completed' },
-    ],
-    [],
-  );
-
-  const {
-    handleSubmit,
-    control,
-    formState: { errors },
-  } = useForm<CreateQueueEntryFormData>({
-    mode: 'all',
-    resolver: zodResolver(createQueueEntrySchema),
-  });
-
-  useEffect(() => {
-    setPriorityComment(priorityLabels[contentSwitcherIndex]);
-  }, [contentSwitcherIndex, priorityLabels]);
-
-  useEffect(() => {
-    setStatus(statusLabels[statusSwitcherIndex].status);
-  }, [statusSwitcherIndex, statusLabels]);
-
-  // endVisit
-  const endCurrentVisit = async (event) => {
-    event.preventDefault();
-
-    setIsEndingVisit(true);
-    const endVisitPayload = {
-      location: activeVisit.location.uuid,
-      startDatetime: parseDate(activeVisit.startDatetime),
-      visitType: activeVisit.visitType.uuid,
-      stopDatetime: new Date(),
-    };
-
-    try {
-      const response = await updateVisit(activeVisit.uuid, endVisitPayload);
-
-      if (response.status === 200) {
-        // const comment = event?.target['nextNotes']?.value ?? 'Not Set';
-
-        const patientQueueEntryResponse = await getCurrentPatientQueueByPatientUuid(
-          patientUuid,
-          sessionUser?.sessionLocation?.uuid,
-        );
-
-        const queues = patientQueueEntryResponse.data?.results[0]?.patientQueues;
-        const queueEntry = queues?.filter((item) => item?.patient?.uuid === patientUuid);
-
-        if (queueEntry.length > 0) {
-          await updateQueueEntry(
-            QueueStatus.Completed,
-            provider,
-            queueEntry[0]?.uuid,
-            contentSwitcherIndex,
-            priorityComment,
-            'comment',
-          );
-
-          let navigateTo = `${window.getOpenmrsSpaBase()}home`;
-
-          if (queueEntry.length === 1) {
-            const roles = getSessionStore().getState().session?.user?.roles || [];
-            const hasClinicianRole = roles.some((role) => role?.display === 'Organizational: Clinician');
-
-            if (hasClinicianRole) {
-              navigateTo = `${window.getOpenmrsSpaBase()}home/clinical-room-patient-queues`;
-            } else if (roles.some((role) => role?.display === 'Triage')) {
-              navigateTo = `${window.getOpenmrsSpaBase()}home/triage-patient-queues`;
-            }
-          }
-
-          showToast({
-            critical: true,
-            title: t('endedVisit', 'Ended Visit'),
-            kind: 'success',
-            description: t('endedVisitSuccessfully', 'Successfully ended visit'),
-          });
-          setIsEndingVisit(false);
-          closeModal();
-          navigate({ to: navigateTo });
-          handleMutate(`${restBaseUrl}/patientqueue`);
-        }
-      }
-    } catch (error) {
-      setIsEndingVisit(false);
-      const errorMessages = extractErrorMessagesFromResponse(error);
-      showNotification({
-        title: t('endVisit', 'Error ending visit succcessfully'),
-        kind: 'error',
-        critical: true,
-        description: errorMessages.join(','),
-      });
-    }
-  };
-
-  // change to picked
-  const onSubmit = useCallback(async () => {
-    try {
-      setIsSubmitting(true);
-      // get queue entry by patient id
-      const patientQueueEntryResponse = await getCurrentPatientQueueByPatientUuid(
-        patientUuid,
-        sessionUser?.sessionLocation?.uuid,
-      );
-
-      const queues = patientQueueEntryResponse.data?.results[0]?.patientQueues;
-      const queueEntry = queues?.filter((item) => item?.patient?.uuid === patientUuid);
-
-      if (status === QueueStatus.Pending) {
-        if (queueEntry.length > 0) {
-          await updateQueueEntry(status, provider, queueEntry[0]?.uuid, 0, priorityComment, 'NA').then(() => {
-            showToast({
-              critical: true,
-              title: t('moveToNextServicePoint', 'Move back your service point'),
-              kind: 'success',
-              description: t('backToQueue', 'Successfully moved back patient to your service point'),
-            });
-            closeModal();
-            handleMutate(`${restBaseUrl}/patientqueue`);
-            setIsSubmitting(false);
-          });
-        }
-      }
-
-      if (status === QueueStatus.Completed) {
-        if (queueEntry.length > 0) {
-          await updateQueueEntry(
-            QueueStatus.Completed,
-            provider,
-            queueEntry[0]?.uuid,
-            contentSwitcherIndex,
-            priorityComment,
-            'NA',
-          );
-
-          const request: NewQueuePayload = {
-            patient: patientUuid,
-            provider: selectedProvider ?? '',
-            locationFrom: sessionUser?.sessionLocation?.uuid,
-            locationTo: selectedNextQueueLocation,
-            status: QueueStatus.Pending,
-            priority: contentSwitcherIndex,
-            priorityComment: priorityComment,
-            comment: 'NA',
-            queueRoom: selectedNextQueueLocation,
-          };
-
-          const createQueueResponse = await addQueueEntry(request);
-
-          const response = await updateQueueEntry(
-            QueueStatus.Pending,
-            provider,
-            createQueueResponse.data?.uuid,
-            contentSwitcherIndex,
-            priorityComment,
-            'NA',
-          );
-
-          if (response.status === 200) {
-            showToast({
-              critical: true,
-              title: t('moveToNextServicePoint', 'Move to next service point'),
-              kind: 'success',
-              description: t('movetonextservicepoint', 'Moved to next service point successfully'),
-            });
-            handleMutate(`${restBaseUrl}/patientqueue`);
-            closeModal();
-            setIsSubmitting(false);
-            // view patient summary
-            // navigate({ to: `\${openmrsSpaBase}/home` });
-            const roles = getSessionStore().getState().session?.user?.roles;
-            const roleName = roles[0]?.display;
-            if (roles && roles?.length > 0) {
-              if (roles?.filter((item) => item?.display === 'Organizational: Clinician').length > 0) {
-                navigate({
-                  to: `${window.getOpenmrsSpaBase()}home/clinical-room-patient-queues`,
-                });
-              } else if (roleName === 'Triage') {
-                navigate({
-                  to: `${window.getOpenmrsSpaBase()}home/triage-patient-queues`,
-                });
-              } else {
-                navigate({ to: `${window.getOpenmrsSpaBase()}home` });
-              }
-            }
-          }
-        }
-      }
-    } catch (error) {
-      setIsSubmitting(false);
-      const errorMessages = extractErrorMessagesFromResponse(error);
-      showNotification({
-        title: t('moveToNextServicePoint', 'Error moving to next service point'),
-        kind: 'error',
-        critical: true,
-        description: errorMessages.join(','),
-      });
-    }
-  }, [
-    closeModal,
-    contentSwitcherIndex,
-    patientUuid,
-    priorityComment,
-    provider,
-    selectedNextQueueLocation,
-    selectedProvider,
-    sessionUser?.sessionLocation?.uuid,
-    status,
-    t,
-  ]);
-
-  return (
-    <>
-      <div>
-        {isLoading && <InlineLoading description={'Fetching Provider..'} />}
-        <Form onSubmit={handleSubmit(onSubmit)}>
-          <ModalHeader closeModal={closeModal} />
-          <ModalBody>
-            <div className={styles.modalBody}>
-              <div style={{ display: 'flex', alignItems: 'center' }}>
-                <h4 className={styles.section}> Queue to next service area</h4>
-              </div>
-            </div>
-            <section className={styles.section}>
-              <div className={styles.sectionTitle}>{t('priority', 'Priority')}</div>
-              <Controller
-                name="priorityComment"
-                control={control}
-                render={({ field }) => (
-                  <ContentSwitcher
-                    {...field}
-                    selectedIndex={contentSwitcherIndex}
-                    className={styles.contentSwitcher}
-                    onChange={({ index }) => {
-                      field.onChange(index);
-                      setContentSwitcherIndex(index);
-                    }}
-                  >
-                    {priorityLabels.map((label, index) => (
-                      <Switch
-                        key={index}
-                        name={label.toLowerCase().replace(/\s+/g, '')}
-                        text={t(label.toLowerCase(), label)}
-                      />
-                    ))}
-                  </ContentSwitcher>
-                )}
-              />
-            </section>
-
-            <section className={styles.section}>
-              <div className={styles.sectionTitle}>{t('status', 'Status')}</div>
-              <Controller
-                name="status"
-                control={control}
-                render={({ field }) => (
-                  <ContentSwitcher
-                    {...field}
-                    selectedIndex={statusSwitcherIndex}
-                    className={styles.contentSwitcher}
-                    onChange={({ index }) => {
-                      field.onChange(index);
-                      setStatusSwitcherIndex(index);
-                    }}
-                  >
-                    {statusLabels.map((status, index) => (
-                      <Switch
-                        key={index}
-                        name={status.label.toLowerCase().replace(' ', '')}
-                        text={t(status.label.toLowerCase(), status.label)}
-                      />
-                    ))}
-                  </ContentSwitcher>
-                )}
-              />
-            </section>
-
-            {status === QueueStatus.Completed && (
-              <>
-                <section className={styles.section}>
-                  <div className={styles.sectionTitle}>{t('nextServicePoint', 'Next service point')}</div>
-                  <ResponsiveWrapper isTablet={isTablet}>
-                    <Controller
-                      name="locationTo"
-                      control={control}
-                      render={({ field }) => (
-                        <Select
-                          {...field}
-                          id="nextQueueLocation"
-                          name="nextQueueLocation"
-                          labelText=""
-                          disabled={errorLoadingQueueRooms}
-                          invalid={!!errors.locationTo}
-                          invalidText={errors.locationTo?.message}
-                          value={field.value}
-                          onChange={(e) => {
-                            const selectedValue = e.target.value;
-                            field.onChange(selectedValue);
-                            setSelectedNextQueueLocation(selectedValue);
-                          }}
-                        >
-                          {!field.value && (
-                            <SelectItem value="" text={t('selectNextServicePoint', 'Choose next service point')} />
-                          )}
-
-                          {queueRoomLocations.map(({ uuid, display }) => (
-                            <SelectItem key={uuid} value={uuid} text={display} />
-                          ))}
-                        </Select>
-                      )}
-                    />
-
-                    {errorLoadingQueueRooms && (
-                      <InlineNotification
-                        className={styles.errorNotification}
-                        kind="error"
-                        title={t('errorFetchingQueueRooms', 'Error fetching queue rooms')}
-                        subtitle={errorLoadingQueueRooms}
-                        onCloseButtonClick={() => {}}
-                      />
-                    )}
-                  </ResponsiveWrapper>
-                </section>
-                <section className={styles.section}>
-                  <div className={styles.sectionTitle}>{t('selectAProvider', 'Select a provider')}</div>
-                  <ResponsiveWrapper isTablet={isTablet}>
-                    <Controller
-                      name="provider"
-                      control={control}
-                      render={({ field }) => (
-                        <Select
-                          {...field}
-                          labelText={''}
-                          id="providers-list"
-                          name="providers-list"
-                          disabled={errorLoadingProviders}
-                          invalid={!!errors.provider}
-                          invalidText={errors.provider?.message}
-                          value={field.value}
-                          onChange={(event) => {
-                            field.onChange(event.target.value);
-                            setSelectedProvider(event.target.value);
-                          }}
-                        >
-                          {!field.value ? (
-                            <SelectItem text={t('selectProvider', 'choose a provider')} value="" />
-                          ) : null}
-                          {providers.map((provider) => (
-                            <SelectItem key={provider.uuid} text={provider.display} value={provider.uuid}>
-                              {provider.display}
-                            </SelectItem>
-                          ))}
-                        </Select>
-                      )}
-                    />
-
-                    {errorLoadingProviders && (
-                      <InlineNotification
-                        className={styles.errorNotification}
-                        kind="error"
-                        title={t('errorFetchingQueueRooms', 'Error fetching providers')}
-                        subtitle={errorLoadingProviders}
-                        onClick={() => {}}
-                      />
-                    )}
-                  </ResponsiveWrapper>
-                </section>
-                <section className={styles.section}>
-                  <div className={styles.sectionTitle}>{t('notes', 'Notes')}</div>
-                  <ResponsiveWrapper isTablet={isTablet}>
-                    <Controller
-                      name="comment"
-                      control={control}
-                      render={({ field }) => (
-                        <TextArea
-                          {...field}
-                          aria-label={t('comment', 'Comment')}
-                          invalid={!!errors.comment}
-                          invalidText={errors.comment?.message}
-                          labelText=""
-                          id="comment"
-                          name="comment"
-                          maxCount={500}
-                          enableCounter
-                        />
-                      )}
-                    />
-                  </ResponsiveWrapper>
-                </section>
-              </>
-            )}
-          </ModalBody>
-          <ModalFooter>
-            <Button kind="secondary" onClick={closeModal}>
-              {t('cancel', 'Cancel')}
-            </Button>
-            {isEndingVisit ? (
-              <InlineLoading description={'Ending...'} />
-            ) : (
-              <Button kind="danger" onClick={endCurrentVisit}>
-                {t('endVisit', 'End Visit')}
-              </Button>
-            )}
-
-            {isSubmitting ? (
-              <InlineLoading description={'Submitting...'} />
-            ) : (
-              <Button disabled={!provider || isLoading || isSubmitting} type="submit">
-                {status === QueueStatus.Pending ? 'Save' : 'Move to the next queue room'}
-              </Button>
-            )}
-          </ModalFooter>
-        </Form>
-      </div>
-    </>
-  );
-};
-
-function ResponsiveWrapper({ children, isTablet }) {
-  return isTablet ? <Layer>{children}</Layer> : <div>{children}</div>;
-}
-
-export default ChangeStatusMoveToNext;
diff --git a/packages/esm-patient-queues-app/src/active-visits/move-patient-to-next-action-menu.components.tsx b/packages/esm-patient-queues-app/src/active-visits/move-patient-to-next-action-menu.components.tsx
deleted file mode 100644
index ed587c30..00000000
--- a/packages/esm-patient-queues-app/src/active-visits/move-patient-to-next-action-menu.components.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { useCallback } from 'react';
-
-import { Button, Tooltip } from '@carbon/react';
-import { Send } from '@carbon/react/icons';
-import { useTranslation } from 'react-i18next';
-import { showModal } from '@openmrs/esm-framework';
-import { PatientQueue } from '../types/patient-queues';
-
-interface MovetoNextPointActionProps {
-  patientUuid: string;
-  entries: Array<PatientQueue>;
-}
-
-const MovetoNextPointAction: React.FC<MovetoNextPointActionProps> = ({ patientUuid, entries }) => {
-  const { t } = useTranslation();
-
-  const openModal = useCallback(() => {
-    const dispose = showModal('queue-table-move-to-next-service-point-modal', {
-      patientUuid,
-      entries,
-      closeModal: () => dispose(),
-    });
-  }, [patientUuid, entries]);
-
-  return (
-    <Tooltip label="Re-Assign">
-      <Button
-        kind="ghost"
-        onClick={openModal}
-        iconDescription={t('reassignPatient', 'ReAssign Patient')}
-        renderIcon={(props) => <Send size={16} {...props} />}
-      />
-    </Tooltip>
-  );
-};
-export default MovetoNextPointAction;
diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-action.components.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.components.tsx
similarity index 59%
rename from packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-action.components.tsx
rename to packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.components.tsx
index 261bbf6a..0982cf6a 100644
--- a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-action.components.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.components.tsx
@@ -1,17 +1,17 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { showModal } from '@openmrs/esm-framework';
+import { launchWorkspace, showModal } from '@openmrs/esm-framework';
 
 interface PatientMoveToNextServicePointProps {
-  patientUuid: string;
+  patientUuid?: string;
 }
 
-const PatientMovetoNextPoint: React.FC<PatientMoveToNextServicePointProps> = ({ patientUuid }) => {
+const MovetoNextServicePointPatientActionButton: React.FC<PatientMoveToNextServicePointProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
-  const openModal = useCallback(() => {
-    const dispose = showModal('patient-move-to-next-service-point-modal', {
+  const handleClick = useCallback(() => {
+    launchWorkspace('move-to-next-service-point-form-workspace', {
+      workspaceTitle: t('moveToNextServicePoint', 'Move to next service point'),
       patientUuid,
-      closeModal: () => dispose(),
     });
   }, [patientUuid]);
   return (
@@ -21,7 +21,7 @@ const PatientMovetoNextPoint: React.FC<PatientMoveToNextServicePointProps> = ({
         role="menuitem"
         title={t('moveToNext', 'Move to Next Service Point')}
         data-floating-menu-primary-focus
-        onClick={openModal}
+        onClick={handleClick}
         style={{
           maxWidth: '100vw',
         }}
@@ -33,4 +33,4 @@ const PatientMovetoNextPoint: React.FC<PatientMoveToNextServicePointProps> = ({
     </li>
   );
 };
-export default PatientMovetoNextPoint;
+export default MovetoNextServicePointPatientActionButton;
diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-reassign-action.component.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-reassign-action.component.tsx
new file mode 100644
index 00000000..bd6471b4
--- /dev/null
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-reassign-action.component.tsx
@@ -0,0 +1,28 @@
+import React, { useCallback } from 'react';
+
+import { Button, Tooltip } from '@carbon/react';
+import { Send } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { launchWorkspace } from '@openmrs/esm-framework';
+
+type MovetoNextServicePointPatientActionProps = {};
+
+const MovetoNextServicePointReassignAction: React.FC<MovetoNextServicePointPatientActionProps> = ({}) => {
+  const { t } = useTranslation();
+
+  const handleClick = useCallback(() => {
+    launchWorkspace('move-to-next-service-point-form-workspace', {
+      workspaceTitle: t('moveToNextServicePoint', 'Move to next service point'),
+    });
+  }, []);
+
+  return (
+     <Button
+        kind="ghost"
+        onClick={handleClick}
+        iconDescription={t('reassignPatient', 'ReAssign Patient')}
+        renderIcon={(props) => <Send size={16} {...props} />}
+      />
+  );
+};
+export default MovetoNextServicePointReassignAction;
diff --git a/packages/esm-patient-queues-app/src/active-visits/change-status-dialog.scss b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.scss
similarity index 89%
rename from packages/esm-patient-queues-app/src/active-visits/change-status-dialog.scss
rename to packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.scss
index 02197ebd..56cc587d 100644
--- a/packages/esm-patient-queues-app/src/active-visits/change-status-dialog.scss
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.scss
@@ -32,4 +32,10 @@ section {
 
 :global(.cds--modal-container) {
     overflow: auto;
+}
+
+.errorMessage {
+    color: #d93025;
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
 }
\ No newline at end of file
diff --git a/packages/esm-patient-queues-app/src/active-visits/change-status-dialog.component.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
similarity index 85%
rename from packages/esm-patient-queues-app/src/active-visits/change-status-dialog.component.tsx
rename to packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
index f574945d..810a614d 100644
--- a/packages/esm-patient-queues-app/src/active-visits/change-status-dialog.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
@@ -16,6 +16,7 @@ import {
   InlineNotification,
 } from '@carbon/react';
 import {
+  type DefaultWorkspaceProps,
   navigate,
   parseDate,
   restBaseUrl,
@@ -29,7 +30,7 @@ import {
 import { useTranslation } from 'react-i18next';
 import { useQueueRoomLocations } from '../hooks/useQueueRooms';
 import { ArrowUp, ArrowDown } from '@carbon/react/icons';
-import styles from './change-status-dialog.scss';
+import styles from './move-to-next-service-point.scss';
 import { QueueStatus, extractErrorMessagesFromResponse, handleMutate } from '../utils/utils';
 import {
   NewQueuePayload,
@@ -44,13 +45,16 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { CreateQueueEntryFormData, createQueueEntrySchema } from './patient-queue-validation-schema.resource';
 import { PatientQueue } from '../types/patient-queues';
 
-interface ChangeStatusDialogProps {
-  queueEntry: PatientQueue;
-  currentEntry: PatientQueue;
-  closeModal: () => void;
-}
+type MoveToNextServicePointFormProps = DefaultWorkspaceProps & {
+  queueEntry?: PatientQueue;
+  currentEntry?: PatientQueue;
+};
 
-const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEntry, closeModal }) => {
+const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
+  queueEntry,
+  currentEntry,
+  closeWorkspace,
+}) => {
   const { t } = useTranslation();
 
   const isTablet = useLayoutType() === 'tablet';
@@ -170,7 +174,7 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
           });
 
           navigate({ to: `\${openmrsSpaBase}/home` });
-          closeModal();
+          closeWorkspace();
           setIsEndingVisit(false);
         }
       } catch (error) {
@@ -198,7 +202,7 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
           description: t('queueEntryUpdateSuccessfully', 'Queue Entry Updated Successfully'),
         });
 
-        closeModal();
+        closeWorkspace();
         handleMutate(`${restBaseUrl}/patientqueue`);
         setIsSubmitting(false);
       }
@@ -248,7 +252,7 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
           // View patient summary
           navigate({ to: `\${openmrsSpaBase}/patient/${currentEntry?.patient?.uuid}/chart` });
 
-          closeModal();
+          closeWorkspace();
           handleMutate(`${restBaseUrl}/patientqueue`);
           setIsSubmitting(false);
         }
@@ -269,7 +273,7 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
     queueEntry?.patient?.uuid,
     priorityComment,
     t,
-    closeModal,
+    closeWorkspace,
     contentSwitcherIndex,
     selectedProvider,
     provider,
@@ -280,7 +284,9 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
   ]);
 
   if (queueEntry && Object.keys(queueEntry)?.length === 0) {
-    return <ModalHeader closeModal={closeModal} title={t('patientNotInQueue', 'The patient is not in the queue')} />;
+    return (
+      <ModalHeader closeModal={closeWorkspace} title={t('patientNotInQueue', 'The patient is not in the queue')} />
+    );
   }
 
   if (queueEntry && Object.keys(queueEntry)?.length > 0) {
@@ -289,7 +295,7 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
         <div>
           {isLoading && <InlineLoading description={'Fetching Provider..'} />}
           <Form onSubmit={handleSubmit(onSubmit)}>
-            <ModalHeader closeModal={closeModal} />
+            <ModalHeader closeModal={closeWorkspace} />
             <ModalBody>
               <div className={styles.modalBody}>
                 <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -336,23 +342,28 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
                   name="priorityComment"
                   control={control}
                   render={({ field }) => (
-                    <ContentSwitcher
-                      {...field}
-                      selectedIndex={contentSwitcherIndex}
-                      className={styles.contentSwitcher}
-                      onChange={({ index }) => {
-                        field.onChange(index);
-                        setContentSwitcherIndex(index);
-                      }}
-                    >
-                      {priorityLabels.map((label, index) => (
-                        <Switch
-                          key={index}
-                          name={label.toLowerCase().replace(/\s+/g, '')}
-                          text={t(label.toLowerCase(), label)}
-                        />
-                      ))}
-                    </ContentSwitcher>
+                    <>
+                      <ContentSwitcher
+                        {...field}
+                        selectedIndex={contentSwitcherIndex}
+                        className={styles.contentSwitcher}
+                        onChange={({ index }) => {
+                          field.onChange(priorityLabels[index]);
+                          setContentSwitcherIndex(index);
+                        }}
+                      >
+                        {priorityLabels.map((label, index) => (
+                          <Switch
+                            key={index}
+                            name={label.toLowerCase().replace(/\s+/g, '')}
+                            text={t(label.toLowerCase(), label)}
+                          />
+                        ))}
+                      </ContentSwitcher>
+                      {errors.priorityComment && (
+                        <p className={styles.errorMessage}>{errors.priorityComment.message}</p>
+                      )}
+                    </>
                   )}
                 />
               </section>
@@ -363,23 +374,26 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
                   name="status"
                   control={control}
                   render={({ field }) => (
-                    <ContentSwitcher
-                      {...field}
-                      selectedIndex={statusSwitcherIndex}
-                      className={styles.contentSwitcher}
-                      onChange={({ index }) => {
-                        field.onChange(index);
-                        setStatusSwitcherIndex(index);
-                      }}
-                    >
-                      {statusLabels.map((status, index) => (
-                        <Switch
-                          key={index}
-                          name={status.label.toLowerCase().replace(' ', '')}
-                          text={t(status.label.toLowerCase(), status.label)}
-                        />
-                      ))}
-                    </ContentSwitcher>
+                    <>
+                      <ContentSwitcher
+                        {...field}
+                        selectedIndex={statusSwitcherIndex}
+                        className={styles.contentSwitcher}
+                        onChange={({ index }) => {
+                          field.onChange(statusLabels[index].status);
+                          setStatusSwitcherIndex(index);
+                        }}
+                      >
+                        {statusLabels.map((status, index) => (
+                          <Switch
+                            key={index}
+                            name={status.label.toLowerCase().replace(/\s+/g, '')}
+                            text={t(status.label.toLowerCase(), status.label)}
+                          />
+                        ))}
+                      </ContentSwitcher>
+                      {errors.status && <p className={styles.errorMessage}>{errors.status.message}</p>}
+                    </>
                   )}
                 />
               </section>
@@ -502,7 +516,7 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
               )}
             </ModalBody>
             <ModalFooter>
-              <Button kind="secondary" onClick={closeModal}>
+              <Button kind="secondary" onClick={closeWorkspace}>
                 {t('cancel', 'Cancel')}
               </Button>
               {isEndingVisit ? (
@@ -532,4 +546,4 @@ function ResponsiveWrapper({ children, isTablet }) {
   return isTablet ? <Layer>{children}</Layer> : <div>{children}</div>;
 }
 
-export default ChangeStatus;
+export default MoveToNextServicePointForm;
diff --git a/packages/esm-patient-queues-app/src/active-visits/notes-action-menu.components.tsx b/packages/esm-patient-queues-app/src/active-visits/notes/notes-action-menu.components.tsx
similarity index 93%
rename from packages/esm-patient-queues-app/src/active-visits/notes-action-menu.components.tsx
rename to packages/esm-patient-queues-app/src/active-visits/notes/notes-action-menu.components.tsx
index a4c77624..f5985099 100644
--- a/packages/esm-patient-queues-app/src/active-visits/notes-action-menu.components.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/notes/notes-action-menu.components.tsx
@@ -3,7 +3,7 @@ import { Button } from '@carbon/react';
 import { CatalogPublish } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
 import { showModal } from '@openmrs/esm-framework';
-import { PatientQueue } from '../types/patient-queues';
+import { PatientQueue } from '../../types/patient-queues';
 
 interface NotesActionsMenuProps {
   note: PatientQueue;
diff --git a/packages/esm-patient-queues-app/src/active-visits/notes-dialog.component.tsx b/packages/esm-patient-queues-app/src/active-visits/notes/notes-dialog.component.tsx
similarity index 94%
rename from packages/esm-patient-queues-app/src/active-visits/notes-dialog.component.tsx
rename to packages/esm-patient-queues-app/src/active-visits/notes/notes-dialog.component.tsx
index 718350d0..865b5ffc 100644
--- a/packages/esm-patient-queues-app/src/active-visits/notes-dialog.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/notes/notes-dialog.component.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Form, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import styles from './change-status-dialog.scss';
-import { PatientQueue } from '../types/patient-queues';
+import { PatientQueue } from '../../types/patient-queues';
 
 interface NotesDialogProps {
   queueEntry: PatientQueue;
diff --git a/packages/esm-patient-queues-app/src/active-visits/patient-queue-validation-schema.resource.ts b/packages/esm-patient-queues-app/src/active-visits/patient-queue-validation-schema.resource.ts
index 92d6c86e..76f17bf8 100644
--- a/packages/esm-patient-queues-app/src/active-visits/patient-queue-validation-schema.resource.ts
+++ b/packages/esm-patient-queues-app/src/active-visits/patient-queue-validation-schema.resource.ts
@@ -13,9 +13,9 @@ export const createQueueEntrySchema = z.object({
   provider: z.string().min(1, 'Provider is required'),
   locationFrom: z.string().optional(),
   locationTo: z.string().min(1, 'Destination is required'),
-  status: z.string().optional(),
+  status: z.string().min(1, 'Status is required'),
   priority: z.string().optional(),
-  priorityComment: z.string().optional(),
+  priorityComment: z.string().min(1, 'Priority is required'),
   comment: z.string().optional(),
   queueRoom: z.string().optional(),
 });
diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx
index 410a156e..f5cb8e40 100644
--- a/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx
@@ -37,11 +37,13 @@ import {
 import StatusIcon from '../../queue-entry-table-components/status-icon.component';
 import PickPatientActionMenu from '../../queue-entry-table-components/pick-patient-queue-entry-menu.component';
 import ViewActionsMenu from '../view-action-menu.components';
-import NotesActionsMenu from '../notes-action-menu.components';
+import NotesActionsMenu from '../notes/notes-action-menu.components';
 import styles from '../active-visits-table.scss';
 import dayjs from 'dayjs';
 import { QueueStatus } from '../../utils/utils';
 import { PatientQueueConfig } from '../../config-schema';
+import MovetoNextServicePointAction from '../move-to-next-service-point-reassign-action.component';
+import MovetoNextServicePointReassignAction from '../move-to-next-service-point-reassign-action.component';
 
 interface ActiveVisitsTableProps {
   status: string;
@@ -211,13 +213,18 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
         content: (
           <div style={{ display: 'flex' }}>
             {patientqueue?.status === 'PENDING' && (
-              <>
-                <PickPatientActionMenu queueEntry={patientqueue} closeModal={() => true} />
-              </>
+              <PickPatientActionMenu queueEntry={patientqueue} closeModal={() => true} />
+            )}
+
+            {(patientqueue?.status === 'COMPLETED' || patientqueue?.status === 'PICKED') && (
+              <ViewActionsMenu to={`\${openmrsSpaBase}/patient/${patientqueue?.patient?.uuid}/chart`} from={fromPage} />
             )}
-            <ViewActionsMenu to={`\${openmrsSpaBase}/patient/${patientqueue?.patient?.uuid}/chart`} from={fromPage} />
 
             <NotesActionsMenu note={patientqueue} />
+
+            {((patientqueue?.status === 'PENDING' && isToggled)) && (
+              <MovetoNextServicePointReassignAction />
+            )}
           </div>
         ),
       },
diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx
index 553a3f0a..f30dcb3a 100644
--- a/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx
@@ -21,12 +21,7 @@ import {
 
 import { useTranslation } from 'react-i18next';
 import { useSession, useLayoutType, isDesktop, useConfig } from '@openmrs/esm-framework';
-import {
-  getLocationByUuid,
-  getOriginFromPathName,
-  useParentLocation,
-  usePatientQueuePages,
-} from '../patient-queues.resource';
+import { getOriginFromPathName, useParentLocation, usePatientQueuePages } from '../patient-queues.resource';
 import {
   buildStatusString,
   formatWaitTime,
@@ -37,12 +32,14 @@ import {
 import StatusIcon from '../../queue-entry-table-components/status-icon.component';
 import PickPatientActionMenu from '../../queue-entry-table-components/pick-patient-queue-entry-menu.component';
 import ViewActionsMenu from '../view-action-menu.components';
-import NotesActionsMenu from '../notes-action-menu.components';
-import MovetoNextPointAction from '../move-patient-to-next-action-menu.components';
+import NotesActionsMenu from '../notes/notes-action-menu.components';
 import styles from '../active-visits-table.scss';
 import dayjs from 'dayjs';
 import { QueueStatus } from '../../utils/utils';
 import { PatientQueueConfig } from '../../config-schema';
+import MovetoNextServicePointActionButton from '../move-to-next-service-point-patient-action.components';
+import MovetoNextServicePointAction from '../move-to-next-service-point-reassign-action.component';
+import MovetoNextServicePointReassignAction from '../move-to-next-service-point-reassign-action.component';
 
 interface ActiveVisitsTableProps {
   status: string;
@@ -198,21 +195,18 @@ const ActiveTriageVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) =
         content: (
           <div style={{ display: 'flex' }}>
             {patientqueue?.status === 'PENDING' && (
-              <>
-                <PickPatientActionMenu queueEntry={patientqueue} closeModal={() => true} />
-              </>
+              <PickPatientActionMenu queueEntry={patientqueue} closeModal={() => true} />
             )}
 
-            <ViewActionsMenu to={`\${openmrsSpaBase}/patient/${patientqueue?.patient?.uuid}/chart`} from={fromPage} />
+            {(patientqueue?.status === 'COMPLETED' || patientqueue?.status === 'PICKED') && (
+              <ViewActionsMenu to={`\${openmrsSpaBase}/patient/${patientqueue?.patient?.uuid}/chart`} from={fromPage} />
+            )}
 
             <NotesActionsMenu note={patientqueue} />
-            {patientqueue?.status === 'SERVING' ||
-              (patientqueue?.status === 'PENDING' && isToggled && (
-                <MovetoNextPointAction
-                  patientUuid={patientqueue?.patient?.uuid}
-                  entries={filteredPatientQueueEntries}
-                />
-              ))}
+
+            {((patientqueue?.status === 'PENDING' && isToggled)) && (
+              <MovetoNextServicePointReassignAction />
+            )}
           </div>
         ),
       },
diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-table-move-to-next-dialog.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-table-move-to-next-dialog.component.tsx
deleted file mode 100644
index 0f919404..00000000
--- a/packages/esm-patient-queues-app/src/active-visits/queue-table-move-to-next-dialog.component.tsx
+++ /dev/null
@@ -1,454 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import {
-  Button,
-  ContentSwitcher,
-  Form,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  Select,
-  SelectItem,
-  Switch,
-  TextArea,
-  InlineLoading,
-  Layer,
-  InlineNotification,
-} from '@carbon/react';
-import { useTranslation } from 'react-i18next';
-import {
-  getSessionStore,
-  navigate,
-  restBaseUrl,
-  showNotification,
-  showToast,
-  useLayoutType,
-  useSession,
-} from '@openmrs/esm-framework';
-import { useQueueRoomLocations } from '../hooks/useQueueRooms';
-import styles from './change-status-dialog.scss';
-import { QueueStatus, extractErrorMessagesFromResponse, handleMutate } from '../utils/utils';
-import { PatientQueue } from '../types/patient-queues';
-import {
-  NewQueuePayload,
-  addQueueEntry,
-  getCareProvider,
-  getCurrentPatientQueueByPatientUuid,
-  updateQueueEntry,
-  useProviders,
-} from './patient-queues.resource';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Controller, useForm } from 'react-hook-form';
-import { CreateQueueEntryFormData, createQueueEntrySchema } from './patient-queue-validation-schema.resource';
-
-interface ChangeStatusDialogProps {
-  patientUuid: string;
-  entries: PatientQueue[];
-  closeModal: () => void;
-}
-
-const QueueTableMoveToNext: React.FC<ChangeStatusDialogProps> = ({ patientUuid, entries, closeModal }) => {
-  const { t } = useTranslation();
-
-  const sessionUser = useSession();
-
-  const isTablet = useLayoutType() === 'tablet';
-
-  const [contentSwitcherIndex, setContentSwitcherIndex] = useState(1);
-
-  const [statusSwitcherIndex, setStatusSwitcherIndex] = useState(1);
-
-  const [status, setStatus] = useState('');
-
-  const { queueRoomLocations, error: errorLoadingQueueRooms } = useQueueRoomLocations(
-    sessionUser?.sessionLocation?.uuid,
-  );
-
-  const [selectedNextQueueLocation, setSelectedNextQueueLocation] = useState(queueRoomLocations[0]?.uuid);
-
-  const [isLoading, setIsLoading] = useState(true);
-
-  const [provider, setProvider] = useState('');
-
-  const [selectedProvider, setSelectedProvider] = useState('');
-
-  const [priorityComment, setPriorityComment] = useState('');
-
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const { providers, error: errorLoadingProviders } = useProviders(selectedNextQueueLocation);
-
-  // Memoize the function to fetch the provider using useCallback
-  const fetchProvider = useCallback(() => {
-    if (!sessionUser?.user?.uuid) return;
-
-    setIsLoading(true);
-
-    getCareProvider(sessionUser?.user?.uuid).then(
-      (response) => {
-        const uuid = response?.data?.results[0].uuid;
-        setIsLoading(false);
-        setProvider(uuid);
-      },
-      (error) => {
-        const errorMessages = extractErrorMessagesFromResponse(error);
-        setIsLoading(false);
-        showNotification({
-          title: "Couldn't get provider",
-          kind: 'error',
-          critical: true,
-          description: errorMessages.join(','),
-        });
-      },
-    );
-  }, [sessionUser?.user?.uuid]);
-
-  useEffect(() => fetchProvider(), [fetchProvider]);
-
-  const priorityLabels = useMemo(() => ['Not Urgent', 'Urgent', 'Emergency'], []);
-
-  const statusLabels = useMemo(
-    () => [
-      { status: 'pending', label: 'Move to Pending' },
-      { status: 'completed', label: 'Move to Completed' },
-    ],
-    [],
-  );
-
-  const {
-    handleSubmit,
-    control,
-    formState: { errors },
-  } = useForm<CreateQueueEntryFormData>({
-    mode: 'all',
-    resolver: zodResolver(createQueueEntrySchema),
-  });
-
-  useEffect(() => {
-    setPriorityComment(priorityLabels[contentSwitcherIndex]);
-  }, [contentSwitcherIndex, priorityLabels]);
-
-  useEffect(() => {
-    setStatus(statusLabels[statusSwitcherIndex].status);
-  }, [statusSwitcherIndex, statusLabels]);
-
-  // change to picked
-  const onSubmit = useCallback(async () => {
-    setIsSubmitting(true);
-    try {
-      const patientQueueEntryResponse = await getCurrentPatientQueueByPatientUuid(
-        patientUuid,
-        sessionUser?.sessionLocation?.uuid,
-      );
-
-      const queues = patientQueueEntryResponse.data?.results[0]?.patientQueues;
-      const queueEntry = queues?.filter((item) => item?.patient?.uuid === patientUuid);
-
-      if (status === QueueStatus.Pending) {
-        if (queueEntry.length > 0) {
-          await updateQueueEntry(status, provider, queueEntry[0]?.uuid, 0, priorityComment, 'NA').then(() => {
-            showToast({
-              critical: true,
-              title: t('moveToNextServicePoint', 'Move back your service point'),
-              kind: 'success',
-              description: t('backToQueue', 'Successfully moved back patient to your service point'),
-            });
-            closeModal();
-            handleMutate(`${restBaseUrl}/patientqueue`);
-            setIsSubmitting(false);
-          });
-        }
-      }
-
-      if (status === QueueStatus.Completed) {
-        if (queueEntry.length > 0) {
-          await updateQueueEntry(
-            QueueStatus.Completed,
-            provider,
-            queueEntry[0]?.uuid,
-            contentSwitcherIndex,
-            priorityComment,
-            'NA',
-          );
-
-          const request: NewQueuePayload = {
-            patient: patientUuid,
-            provider: selectedProvider,
-            locationFrom: sessionUser?.sessionLocation?.uuid,
-            locationTo: selectedNextQueueLocation,
-            status: status ?? QueueStatus.Pending,
-            priority: contentSwitcherIndex,
-            priorityComment: priorityComment,
-            comment: 'NA',
-            queueRoom: selectedNextQueueLocation,
-          };
-
-          const createQueueResponse = await addQueueEntry(request);
-
-          if (createQueueResponse.status === 201) {
-            const response = await updateQueueEntry(
-              QueueStatus.Pending,
-              provider,
-              createQueueResponse.data?.uuid,
-              contentSwitcherIndex,
-              priorityComment,
-              'NA',
-            );
-
-            if (response.status === 200) {
-              showToast({
-                critical: true,
-                title: t('moveToNextServicePoint', 'Move to next service point'),
-                kind: 'success',
-                description: t('movetonextservicepoint', 'Moved to next service point successfully'),
-              });
-              handleMutate(`${restBaseUrl}/patientqueue`);
-              closeModal();
-              setIsSubmitting(false);
-              // view patient summary
-              // navigate({ to: `\${openmrsSpaBase}/home` });
-              const roles = getSessionStore().getState().session?.user?.roles;
-              const roleName = roles[0]?.display;
-              if (roles && roles?.length > 0) {
-                if (roles?.filter((item) => item?.display === 'Organizational: Clinician').length > 0) {
-                  navigate({
-                    to: `${window.getOpenmrsSpaBase()}home/clinical-room-patient-queues`,
-                  });
-                } else if (roleName === 'Triage') {
-                  navigate({
-                    to: `${window.getOpenmrsSpaBase()}home/triage-patient-queues`,
-                  });
-                } else {
-                  navigate({ to: `${window.getOpenmrsSpaBase()}home` });
-                }
-              }
-            }
-          }
-        }
-      }
-    } catch (error) {
-      setIsSubmitting(false);
-      const errorMessages = extractErrorMessagesFromResponse(error);
-      showNotification({
-        title: t('moveToNextServicePoint', 'Error moving to next service point'),
-        kind: 'error',
-        critical: true,
-        description: errorMessages.join(','),
-      });
-    }
-  }, [
-    closeModal,
-    contentSwitcherIndex,
-    patientUuid,
-    provider,
-    priorityComment,
-    selectedNextQueueLocation,
-    selectedProvider,
-    sessionUser?.sessionLocation?.uuid,
-    status,
-    t,
-  ]);
-
-  return (
-    <>
-      <div>
-        {isLoading && <InlineLoading description={'Fetching Provider..'} />}
-        <Form onSubmit={handleSubmit(onSubmit)}>
-          <ModalHeader closeModal={closeModal} />
-          <ModalBody>
-            <div className={styles.modalBody}>
-              <div style={{ display: 'flex', alignItems: 'center' }}>
-                <h4 className={styles.section}> Queue to next service area</h4>
-              </div>
-            </div>
-            <section className={styles.section}>
-              <div className={styles.sectionTitle}>{t('priority', 'Priority')}</div>
-              <Controller
-                name="priorityComment"
-                control={control}
-                render={({ field }) => (
-                  <ContentSwitcher
-                    {...field}
-                    selectedIndex={contentSwitcherIndex}
-                    className={styles.contentSwitcher}
-                    onChange={({ index }) => {
-                      field.onChange(index);
-                      setContentSwitcherIndex(index);
-                    }}
-                  >
-                    {priorityLabels.map((label, index) => (
-                      <Switch
-                        key={index}
-                        name={label.toLowerCase().replace(/\s+/g, '')}
-                        text={t(label.toLowerCase(), label)}
-                      />
-                    ))}
-                  </ContentSwitcher>
-                )}
-              />
-            </section>
-
-            <section className={styles.section}>
-              <div className={styles.sectionTitle}>{t('status', 'Status')}</div>
-              <Controller
-                name="status"
-                control={control}
-                render={({ field }) => (
-                  <ContentSwitcher
-                    {...field}
-                    selectedIndex={statusSwitcherIndex}
-                    className={styles.contentSwitcher}
-                    onChange={({ index }) => {
-                      field.onChange(index);
-                      setStatusSwitcherIndex(index);
-                    }}
-                  >
-                    {statusLabels.map((status, index) => (
-                      <Switch
-                        key={index}
-                        name={status.label.toLowerCase().replace(' ', '')}
-                        text={t(status.label.toLowerCase(), status.label)}
-                      />
-                    ))}
-                  </ContentSwitcher>
-                )}
-              />
-            </section>
-
-            {status === QueueStatus.Completed && (
-              <>
-                <section className={styles.section}>
-                  <div className={styles.sectionTitle}>{t('nextServicePoint', 'Next service point')}</div>
-                  <ResponsiveWrapper isTablet={isTablet}>
-                    <Controller
-                      name="locationTo"
-                      control={control}
-                      render={({ field }) => (
-                        <Select
-                          {...field}
-                          id="nextQueueLocation"
-                          name="nextQueueLocation"
-                          labelText=""
-                          disabled={errorLoadingQueueRooms}
-                          invalid={!!errors.locationTo}
-                          invalidText={errors.locationTo?.message}
-                          value={field.value}
-                          onChange={(e) => {
-                            const selectedValue = e.target.value;
-                            field.onChange(selectedValue);
-                            setSelectedNextQueueLocation(selectedValue);
-                          }}
-                        >
-                          {!field.value && (
-                            <SelectItem value="" text={t('selectNextServicePoint', 'Choose next service point')} />
-                          )}
-
-                          {queueRoomLocations.map(({ uuid, display }) => (
-                            <SelectItem key={uuid} value={uuid} text={display} />
-                          ))}
-                        </Select>
-                      )}
-                    />
-
-                    {errorLoadingQueueRooms && (
-                      <InlineNotification
-                        className={styles.errorNotification}
-                        kind="error"
-                        title={t('errorFetchingQueueRooms', 'Error fetching queue rooms')}
-                        subtitle={errorLoadingQueueRooms}
-                        onCloseButtonClick={() => {}}
-                      />
-                    )}
-                  </ResponsiveWrapper>
-                </section>
-                <section className={styles.section}>
-                  <div className={styles.sectionTitle}>{t('selectAProvider', 'Select a provider')}</div>
-                  <ResponsiveWrapper isTablet={isTablet}>
-                    <Controller
-                      name="provider"
-                      control={control}
-                      render={({ field }) => (
-                        <Select
-                          {...field}
-                          labelText={''}
-                          id="providers-list"
-                          name="providers-list"
-                          disabled={errorLoadingProviders}
-                          invalid={!!errors.provider}
-                          invalidText={errors.provider?.message}
-                          value={field.value}
-                          onChange={(event) => {
-                            field.onChange(event.target.value);
-                            setSelectedProvider(event.target.value);
-                          }}
-                        >
-                          {!field.value ? (
-                            <SelectItem text={t('selectProvider', 'choose a provider')} value="" />
-                          ) : null}
-                          {providers.map((provider) => (
-                            <SelectItem key={provider.uuid} text={provider.display} value={provider.uuid}>
-                              {provider.display}
-                            </SelectItem>
-                          ))}
-                        </Select>
-                      )}
-                    />
-
-                    {errorLoadingProviders && (
-                      <InlineNotification
-                        className={styles.errorNotification}
-                        kind="error"
-                        title={t('errorFetchingQueueRooms', 'Error fetching providers')}
-                        subtitle={errorLoadingProviders}
-                        onClick={() => {}}
-                      />
-                    )}
-                  </ResponsiveWrapper>
-                </section>
-                <section className={styles.section}>
-                  <div className={styles.sectionTitle}>{t('notes', 'Notes')}</div>
-                  <ResponsiveWrapper isTablet={isTablet}>
-                    <Controller
-                      name="comment"
-                      control={control}
-                      render={({ field }) => (
-                        <TextArea
-                          {...field}
-                          aria-label={t('comment', 'Comment')}
-                          invalid={!!errors.comment}
-                          invalidText={errors.comment?.message}
-                          labelText=""
-                          id="comment"
-                          name="comment"
-                          maxCount={500}
-                          enableCounter
-                        />
-                      )}
-                    />
-                  </ResponsiveWrapper>
-                </section>
-              </>
-            )}
-          </ModalBody>
-          <ModalFooter>
-            <Button kind="secondary" onClick={closeModal}>
-              {t('cancel', 'Cancel')}
-            </Button>
-            {isSubmitting ? (
-              <InlineLoading description={'Submitting...'} />
-            ) : (
-              <Button disabled={!provider || isLoading || isSubmitting} type="submit">
-                {status === QueueStatus.Pending ? 'Save' : 'Move to the next queue room'}
-              </Button>
-            )}
-          </ModalFooter>
-        </Form>
-      </div>
-    </>
-  );
-};
-
-function ResponsiveWrapper({ children, isTablet }) {
-  return isTablet ? <Layer>{children}</Layer> : <div>{children}</div>;
-}
-
-export default QueueTableMoveToNext;
diff --git a/packages/esm-patient-queues-app/src/index.ts b/packages/esm-patient-queues-app/src/index.ts
index 16e3e5d0..737173fd 100644
--- a/packages/esm-patient-queues-app/src/index.ts
+++ b/packages/esm-patient-queues-app/src/index.ts
@@ -3,12 +3,8 @@ import { configSchema } from './config-schema';
 import { moduleName } from './constants';
 import { createDashboardLink } from './createDashboardLink';
 import { ClinicalRoomMeta, ReceptionMeta, TriageMeta } from './dashboard.meta';
-import editQueueEntryStatusModalComponent from './active-visits/change-status-dialog.component';
-import patientChartMoveToNextServicePointModalComponent from './active-visits/change-status-move-to-next-dialog.component';
-import queueTableMoveToNextServicePointModalComponent from './active-visits/queue-table-move-to-next-dialog.component';
-import moveToNextServicePointButtonComponent from './active-visits/move-to-next-service-point-action.components';
-// import addPatientToQueueComponent from './components/visit-form/visit-form.component';
-import notesModalComponent from './active-visits/notes-dialog.component';
+import moveToNextServicePointButtonComponent from './active-visits/move-to-next-service-point-patient-action.components';
+import notesModalComponent from './active-visits/notes/notes-action-menu.components';
 import pickPatientEntryQueueComponent from './active-visits/pick-patient-dialog.component';
 import queueScreenComponent from './components/queue-board/queue-board.component';
 import rootComponent from './root.component';
@@ -23,6 +19,7 @@ import checkedInTileComponent from './queue-tiles/checked-in-tile.component';
 import queueCompletedTileComponent from './queue-tiles/queue-completed-tile.component';
 import queueInQueueTileComponent from './queue-tiles/queue-in-queue-tile.component';
 import queueWaitingTileComponent from './queue-tiles/queue-waiting-tile.component';
+import moveToNextServicePointWorkspace from './active-visits/move-to-next-service-point.workspace';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -58,17 +55,17 @@ export const queueTriageDashboardLink = getSyncLifecycle(createDashboardLink(Tri
 // clinical room side nav item
 export const queueClinicalRoomDashboardLink = getSyncLifecycle(createDashboardLink(ClinicalRoomMeta), options);
 
-export const editQueueEntryStatusModal = getSyncLifecycle(editQueueEntryStatusModalComponent, options);
+export const moveToNextServicePointFormWorkspace = getSyncLifecycle(moveToNextServicePointWorkspace, options);
 
-export const patientChartMoveToNextServicePointModal = getSyncLifecycle(
-  patientChartMoveToNextServicePointModalComponent,
-  options,
-);
+// export const patientChartMoveToNextServicePointModal = getSyncLifecycle(
+//   patientChartMoveToNextServicePointModalComponent,
+//   options,
+// );
 
-export const queueTableMoveToNextServicePointModal = getSyncLifecycle(
-  queueTableMoveToNextServicePointModalComponent,
-  options,
-);
+// export const queueTableMoveToNextServicePointModal = getSyncLifecycle(
+//   queueTableMoveToNextServicePointModalComponent,
+//   options,
+// );
 
 export const moveToNextServicePointButton = getSyncLifecycle(moveToNextServicePointButtonComponent, options);
 
diff --git a/packages/esm-patient-queues-app/src/routes.json b/packages/esm-patient-queues-app/src/routes.json
index b74ee286..4b508988 100644
--- a/packages/esm-patient-queues-app/src/routes.json
+++ b/packages/esm-patient-queues-app/src/routes.json
@@ -110,18 +110,6 @@
                 "title": "Clinical Room"
             }
         },
-        {
-            "name": "edit-queue-entry-status-modal",
-            "component": "editQueueEntryStatusModal"
-        },
-        {
-            "name": "patient-move-to-next-service-point-modal",
-            "component": "patientChartMoveToNextServicePointModal"
-        },
-        {
-            "name": "queue-table-move-to-next-service-point-modal",
-            "component": "queueTableMoveToNextServicePointModal"
-        },
         {
             "name": "patient-move-to-next-service-point",
             "slot": "patient-actions-slot",
@@ -150,32 +138,16 @@
             "name": "pick-patient-queue-entry",
             "component": "pickPatientEntryQueue"
         },
-        {
-            "name": "add-visit-to-queue-modal",
-            "component": "addVisitToQueueModal"
-        },
-        {
-            "name": "transition-queue-entry-status-modal",
-            "component": "transitionQueueEntryStatusModal"
-        },
         {
             "name": "previous-visit-summary-widget",
             "slot": "previous-visit-summary-slot",
             "component": "previousVisitSummaryWidget"
         },
-        {
-            "name": "add-provider-to-room-modal",
-            "component": "addProviderToRoomModal"
-        },
         {
             "name": "add-queue-entry-widget",
             "slot": "add-queue-entry-slot",
             "component": "addQueueEntryWidget"
         },
-        {
-            "name": "notes-dialog-modal",
-            "component": "notesModal"
-        },
         {
             "name": "queue-waiting-tile-component",
             "slot": "queue-tiles-slot",
@@ -186,5 +158,21 @@
             "slot": "queue-tiles-slot",
             "component": "queueCompletedTile"
         }
+    ],
+    "modals": [
+        {
+            "name": "notes-dialog-modal",
+            "component": "notesModal"
+        }
+    ],
+    "workspaces": [
+        {
+            "name": "move-to-next-service-point-form-workspace",
+            "component": "moveToNextServicePointFormWorkspace",
+            "title": "Move to next service oint",
+            "type": "form",
+            "canMaximize": true,
+            "width": "extra-wide"
+        }
     ]
 }
\ No newline at end of file
diff --git a/packages/esm-ugandaemr-app/src/index.ts b/packages/esm-ugandaemr-app/src/index.ts
index 599909fb..52ab3014 100644
--- a/packages/esm-ugandaemr-app/src/index.ts
+++ b/packages/esm-ugandaemr-app/src/index.ts
@@ -155,8 +155,6 @@ export const htsDashboard = getSyncLifecycle(HivTestingServices, {
   moduleName,
 });
 
-
-
 export const treatmentDashboardLink = getSyncLifecycle(
   createDashboardLink({ ...treatmentDashboardMeta, moduleName }),
   options,
@@ -164,8 +162,6 @@ export const treatmentDashboardLink = getSyncLifecycle(
 
 export const treatmentDashboard = getSyncLifecycle(TreatmentSummary, { featureName: 'treatment-regimen', moduleName });
 
-
-
 export const patientSummaryDashboardLink = getSyncLifecycle(
   createDashboardLink({ ...patientSummaryDashboardMeta, moduleName }),
   options,
diff --git a/packages/esm-ugandaemr-app/src/routes.json b/packages/esm-ugandaemr-app/src/routes.json
index cf870a6d..90e4f01d 100644
--- a/packages/esm-ugandaemr-app/src/routes.json
+++ b/packages/esm-ugandaemr-app/src/routes.json
@@ -92,9 +92,6 @@
             "slot": "general-counselling-summary-slot",
             "component": "generalCounsellingDashboard"
         },
-   
-     
-     
         {
             "name": "hiv-testing-services",
             "slot": "hiv-prevention-services-slot",
@@ -197,10 +194,6 @@
             "slot": "eid-dashboard-slot",
             "component": "eidDashboard"
         },
-        {
-            "name": "retrieve-facility-code-modal",
-            "component": "retrieveFacilityCodeModal"
-        },
         {
             "name": "dispensing-dashboard-link",
             "slot": "homepage-dashboard-slot",
@@ -309,5 +302,11 @@
             "slot": "top-nav-app-menu-slot",
             "component": "appSearchLaunch"
         }
+    ],
+    "modals": [
+        {
+            "name": "retrieve-facility-code-modal",
+            "component": "retrieveFacilityCodeModal"
+        }
     ]
 }
\ No newline at end of file

From 9d018d0bc4dbef31506819ebd25c315b523c4473 Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Tue, 13 May 2025 19:10:30 +0300
Subject: [PATCH 02/17] chore

---
 ...ervice-point-patient-action.component.tsx} |  0
 ...vice-point-re-assign-action.component.tsx} | 12 +--
 .../pick-patient-dialog.component.tsx         |  6 +-
 ...-queue-patient-action-action.component.tsx | 73 +++++++++++++++++++
 .../queue-clinical-table.component.tsx        | 18 ++---
 .../queue-triage-table.component.tsx          | 20 ++---
 ...w-queue-patient-action-menu.component.tsx} |  4 +-
 .../src/config/openmrsPriviledges.ts          |  7 --
 .../src/helpers/functions.ts                  | 19 ++++-
 .../src/helpers/time-helpers.tsx              | 15 ----
 .../actions-menu.component.tsx                | 34 ---------
 .../actions-menu.scss                         |  3 -
 ...ick-patient-queue-entry-menu.component.tsx | 50 -------------
 .../status-icon.component.tsx                 | 17 -----
 .../esm-patient-queues-app/src/routes.json    |  9 ++-
 .../empty-state/empty-state.component.tsx     | 54 --------------
 .../src/utils/empty-state/empty-state.scss    | 62 ----------------
 .../src/utils/{utils.ts => utils.tsx}         | 20 +++++
 18 files changed, 142 insertions(+), 281 deletions(-)
 rename packages/esm-patient-queues-app/src/active-visits/{move-to-next-service-point-patient-action.components.tsx => move-to-next-service-point-patient-action.component.tsx} (100%)
 rename packages/esm-patient-queues-app/src/active-visits/{move-to-next-service-point-reassign-action.component.tsx => move-to-next-service-point-re-assign-action.component.tsx} (78%)
 create mode 100644 packages/esm-patient-queues-app/src/active-visits/pick-queue-patient-action-action.component.tsx
 rename packages/esm-patient-queues-app/src/active-visits/{view-action-menu.components.tsx => view-queue-patient-action-menu.component.tsx} (86%)
 delete mode 100644 packages/esm-patient-queues-app/src/config/openmrsPriviledges.ts
 delete mode 100644 packages/esm-patient-queues-app/src/helpers/time-helpers.tsx
 delete mode 100644 packages/esm-patient-queues-app/src/queue-entry-table-components/actions-menu.component.tsx
 delete mode 100644 packages/esm-patient-queues-app/src/queue-entry-table-components/actions-menu.scss
 delete mode 100644 packages/esm-patient-queues-app/src/queue-entry-table-components/pick-patient-queue-entry-menu.component.tsx
 delete mode 100644 packages/esm-patient-queues-app/src/queue-entry-table-components/status-icon.component.tsx
 delete mode 100644 packages/esm-patient-queues-app/src/utils/empty-state/empty-state.component.tsx
 delete mode 100644 packages/esm-patient-queues-app/src/utils/empty-state/empty-state.scss
 rename packages/esm-patient-queues-app/src/utils/{utils.ts => utils.tsx} (73%)

diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.components.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.component.tsx
similarity index 100%
rename from packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.components.tsx
rename to packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.component.tsx
diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-reassign-action.component.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-re-assign-action.component.tsx
similarity index 78%
rename from packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-reassign-action.component.tsx
rename to packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-re-assign-action.component.tsx
index bd6471b4..ec306e7c 100644
--- a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-reassign-action.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-re-assign-action.component.tsx
@@ -17,12 +17,12 @@ const MovetoNextServicePointReassignAction: React.FC<MovetoNextServicePointPatie
   }, []);
 
   return (
-     <Button
-        kind="ghost"
-        onClick={handleClick}
-        iconDescription={t('reassignPatient', 'ReAssign Patient')}
-        renderIcon={(props) => <Send size={16} {...props} />}
-      />
+    <Button
+      kind="ghost"
+      onClick={handleClick}
+      iconDescription={t('reassignPatient', 'Re-assign patient')}
+      renderIcon={(props) => <Send size={16} {...props} />}
+    />
   );
 };
 export default MovetoNextServicePointReassignAction;
diff --git a/packages/esm-patient-queues-app/src/active-visits/pick-patient-dialog.component.tsx b/packages/esm-patient-queues-app/src/active-visits/pick-patient-dialog.component.tsx
index d0b98f0f..019f9831 100644
--- a/packages/esm-patient-queues-app/src/active-visits/pick-patient-dialog.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/pick-patient-dialog.component.tsx
@@ -16,12 +16,12 @@ import { extractErrorMessagesFromResponse, handleMutate } from '../utils/utils';
 import { PatientQueue } from '../types/patient-queues';
 import { getCareProvider, updateQueueEntry } from './patient-queues.resource';
 
-interface PickPatientDialogProps {
+interface PickQueuePatientDialogProps {
   queueEntry: PatientQueue;
   closeModal: () => void;
 }
 
-const PickPatientStatus: React.FC<PickPatientDialogProps> = ({ queueEntry, closeModal }) => {
+const PickQueuePatientDialog: React.FC<PickQueuePatientDialogProps> = ({ queueEntry, closeModal }) => {
   const { t } = useTranslation();
 
   const sessionUser = useSession();
@@ -134,4 +134,4 @@ const PickPatientStatus: React.FC<PickPatientDialogProps> = ({ queueEntry, close
   }
 };
 
-export default PickPatientStatus;
+export default PickQueuePatientDialog;
diff --git a/packages/esm-patient-queues-app/src/active-visits/pick-queue-patient-action-action.component.tsx b/packages/esm-patient-queues-app/src/active-visits/pick-queue-patient-action-action.component.tsx
new file mode 100644
index 00000000..f4b43792
--- /dev/null
+++ b/packages/esm-patient-queues-app/src/active-visits/pick-queue-patient-action-action.component.tsx
@@ -0,0 +1,73 @@
+import { Button } from '@carbon/react';
+import { Notification } from '@carbon/react/icons';
+import { showModal, showSnackbar, useSession } from '@openmrs/esm-framework';
+import React, { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PatientQueue } from '../types/patient-queues';
+import { usePatientQueuePages } from './patient-queues.resource';
+import { QueueEnumStatus, QueueStatus } from '../utils/utils';
+
+interface PickPatientActionMenuProps {
+  queueEntry: PatientQueue;
+  closeModal: () => void;
+}
+
+const PickQueuePatientActionButton: React.FC<PickPatientActionMenuProps> = ({ queueEntry, closeModal }) => {
+  const { t } = useTranslation();
+  const { sessionLocation, user } = useSession() || {};
+  const sessionLocationId = sessionLocation?.uuid;
+  const providerId = user?.systemId;
+
+  const { items: pickedQueueItems } = usePatientQueuePages(sessionLocationId, QueueStatus.Picked);
+
+  const hasPickedPatient = useMemo(() => {
+    if (!pickedQueueItems || !providerId) return false;
+    return pickedQueueItems.some(
+      (item) =>
+        item?.provider?.identifier === providerId &&
+        item?.status === QueueEnumStatus.PICKED,
+    );
+  }, [pickedQueueItems, providerId]);
+
+  const launchPickPatientQueueModal = useCallback(() => {
+    if (hasPickedPatient) {
+      showSnackbar({
+        title: t('alreadyPickedPatient', 'You have already picked a patient'),
+        subtitle: t('completeCurrentPatient', 'Please complete the current one before picking another'),
+        kind: 'error',
+        autoClose: true,
+      });
+      return;
+    }
+
+    if (queueEntry.status !== QueueEnumStatus.PENDING) {
+      showSnackbar({
+        title: t('invalidStatus', 'Patient cannot be picked'),
+        subtitle: t('onlyPendingAllowed', 'Only patients in PENDING status can be picked'),
+        kind: 'error',
+        autoClose: true,
+      });
+      return;
+    }
+
+    const dispose = showModal('pick-patient-queue-entry', {
+      queueEntry,
+      closeModal: () => {
+        dispose();
+        closeModal?.();
+      },
+    });
+  }, [hasPickedPatient, queueEntry, t, closeModal]);
+
+  return (
+    <Button
+      kind="ghost"
+      onClick={launchPickPatientQueueModal}
+      iconDescription={t('pickPatient', 'Pick Patient')}
+      renderIcon={(props) => <Notification size={16} {...props} />}
+    />
+  );
+};
+
+export default PickQueuePatientActionButton;
+
diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx
index f5cb8e40..17466594 100644
--- a/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx
@@ -22,7 +22,6 @@ import {
 import { useTranslation } from 'react-i18next';
 import { useSession, useLayoutType, isDesktop, useConfig } from '@openmrs/esm-framework';
 import {
-  getLocationByUuid,
   getOriginFromPathName,
   useParentLocation,
   usePatientQueuePages,
@@ -34,16 +33,15 @@ import {
   getTagColor,
   trimVisitNumber,
 } from '../../helpers/functions';
-import StatusIcon from '../../queue-entry-table-components/status-icon.component';
-import PickPatientActionMenu from '../../queue-entry-table-components/pick-patient-queue-entry-menu.component';
-import ViewActionsMenu from '../view-action-menu.components';
+import PickPatientActionMenu from '../pick-queue-patient-action-action.component';
+import ViewActionsMenu from '../view-queue-patient-action-menu.component';
 import NotesActionsMenu from '../notes/notes-action-menu.components';
 import styles from '../active-visits-table.scss';
 import dayjs from 'dayjs';
-import { QueueStatus } from '../../utils/utils';
+import StatusIcon, { QueueStatus } from '../../utils/utils';
 import { PatientQueueConfig } from '../../config-schema';
-import MovetoNextServicePointAction from '../move-to-next-service-point-reassign-action.component';
-import MovetoNextServicePointReassignAction from '../move-to-next-service-point-reassign-action.component';
+import MovetoNextServicePointReassignAction from '../move-to-next-service-point-re-assign-action.component';
+import ViewQueuePatientActionMenu from '../view-queue-patient-action-menu.component';
 
 interface ActiveVisitsTableProps {
   status: string;
@@ -217,14 +215,12 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
             )}
 
             {(patientqueue?.status === 'COMPLETED' || patientqueue?.status === 'PICKED') && (
-              <ViewActionsMenu to={`\${openmrsSpaBase}/patient/${patientqueue?.patient?.uuid}/chart`} from={fromPage} />
+              <ViewQueuePatientActionMenu to={`\${openmrsSpaBase}/patient/${patientqueue?.patient?.uuid}/chart`} from={fromPage} />
             )}
 
             <NotesActionsMenu note={patientqueue} />
 
-            {((patientqueue?.status === 'PENDING' && isToggled)) && (
-              <MovetoNextServicePointReassignAction />
-            )}
+            {patientqueue?.status === 'PENDING' && isToggled && <MovetoNextServicePointReassignAction />}
           </div>
         ),
       },
diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx
index f30dcb3a..91430c3f 100644
--- a/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx
@@ -29,17 +29,15 @@ import {
   getTagColor,
   trimVisitNumber,
 } from '../../helpers/functions';
-import StatusIcon from '../../queue-entry-table-components/status-icon.component';
-import PickPatientActionMenu from '../../queue-entry-table-components/pick-patient-queue-entry-menu.component';
-import ViewActionsMenu from '../view-action-menu.components';
+import PickQueuePatientActionMenu from '../pick-queue-patient-action-action.component';
+import ViewActionsMenu from '../view-queue-patient-action-menu.component';
 import NotesActionsMenu from '../notes/notes-action-menu.components';
 import styles from '../active-visits-table.scss';
 import dayjs from 'dayjs';
-import { QueueStatus } from '../../utils/utils';
+import StatusIcon, { QueueStatus } from '../../utils/utils';
 import { PatientQueueConfig } from '../../config-schema';
-import MovetoNextServicePointActionButton from '../move-to-next-service-point-patient-action.components';
-import MovetoNextServicePointAction from '../move-to-next-service-point-reassign-action.component';
-import MovetoNextServicePointReassignAction from '../move-to-next-service-point-reassign-action.component';
+import MovetoNextServicePointReassignAction from '../move-to-next-service-point-re-assign-action.component';
+import ViewQueuePatientActionMenu from '../view-queue-patient-action-menu.component';
 
 interface ActiveVisitsTableProps {
   status: string;
@@ -195,18 +193,16 @@ const ActiveTriageVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) =
         content: (
           <div style={{ display: 'flex' }}>
             {patientqueue?.status === 'PENDING' && (
-              <PickPatientActionMenu queueEntry={patientqueue} closeModal={() => true} />
+              <PickQueuePatientActionMenu queueEntry={patientqueue} closeModal={() => true} />
             )}
 
             {(patientqueue?.status === 'COMPLETED' || patientqueue?.status === 'PICKED') && (
-              <ViewActionsMenu to={`\${openmrsSpaBase}/patient/${patientqueue?.patient?.uuid}/chart`} from={fromPage} />
+              <ViewQueuePatientActionMenu to={`\${openmrsSpaBase}/patient/${patientqueue?.patient?.uuid}/chart`} from={fromPage} />
             )}
 
             <NotesActionsMenu note={patientqueue} />
 
-            {((patientqueue?.status === 'PENDING' && isToggled)) && (
-              <MovetoNextServicePointReassignAction />
-            )}
+            {patientqueue?.status === 'PENDING' && isToggled && <MovetoNextServicePointReassignAction />}
           </div>
         ),
       },
diff --git a/packages/esm-patient-queues-app/src/active-visits/view-action-menu.components.tsx b/packages/esm-patient-queues-app/src/active-visits/view-queue-patient-action-menu.component.tsx
similarity index 86%
rename from packages/esm-patient-queues-app/src/active-visits/view-action-menu.components.tsx
rename to packages/esm-patient-queues-app/src/active-visits/view-queue-patient-action-menu.component.tsx
index 1811423e..22b115df 100644
--- a/packages/esm-patient-queues-app/src/active-visits/view-action-menu.components.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/view-queue-patient-action-menu.component.tsx
@@ -10,7 +10,7 @@ interface NameLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   from: string;
 }
 
-const ViewActionsMenu: React.FC<NameLinkProps> = ({ from, to }) => {
+const ViewQueuePatientActionMenu: React.FC<NameLinkProps> = ({ from, to }) => {
   const { t } = useTranslation();
 
   const handleNameClick = (event: MouseEvent, to: string) => {
@@ -30,4 +30,4 @@ const ViewActionsMenu: React.FC<NameLinkProps> = ({ from, to }) => {
     </div>
   );
 };
-export default ViewActionsMenu;
+export default ViewQueuePatientActionMenu;
diff --git a/packages/esm-patient-queues-app/src/config/openmrsPriviledges.ts b/packages/esm-patient-queues-app/src/config/openmrsPriviledges.ts
deleted file mode 100644
index 8781b730..00000000
--- a/packages/esm-patient-queues-app/src/config/openmrsPriviledges.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const MANAGE_GLOBAL_PROPERTIES = 'Manage Global Properties';
-
-export const PURGE_LOCATIONS = 'Purge Locations';
-
-export const MANAGE_LOCATIONS = 'Manage Locations';
-
-export const VIEW_LOCATIONS = 'Get Locations';
diff --git a/packages/esm-patient-queues-app/src/helpers/functions.ts b/packages/esm-patient-queues-app/src/helpers/functions.ts
index bbb93a71..70967a84 100644
--- a/packages/esm-patient-queues-app/src/helpers/functions.ts
+++ b/packages/esm-patient-queues-app/src/helpers/functions.ts
@@ -28,7 +28,7 @@ export const formatWaitTime = (dateCreated: string, t) => {
   const diffInMinutes = now.diff(createdTime, 'minute');
 
   const hours = Math.floor(diffInMinutes / 60);
-  const minutes = diffInMinutes % 60; // Get the remainder after extracting hours
+  const minutes = diffInMinutes % 60;
 
   if (hours > 0) {
     return `${hours} ${t('hoursAnd', 'hours and')} ${minutes} ${t('minutes', 'minutes')}`;
@@ -55,3 +55,20 @@ export const getProviderTagColor = (entryProvider: string, loggedInProviderName:
     return '#942509';
   }
 };
+
+
+export type amPm = 'AM' | 'PM';
+
+export const convertTime12to24 = (time12h, timeFormat: amPm) => {
+  let [hours, minutes] = time12h.split(':');
+
+  if (hours === '12' && timeFormat === 'AM') {
+    hours = '00';
+  }
+
+  if (timeFormat === 'PM') {
+    hours = hours === '12' ? hours : parseInt(hours, 10) + 12;
+  }
+
+  return [hours, minutes];
+};
diff --git a/packages/esm-patient-queues-app/src/helpers/time-helpers.tsx b/packages/esm-patient-queues-app/src/helpers/time-helpers.tsx
deleted file mode 100644
index d39e7814..00000000
--- a/packages/esm-patient-queues-app/src/helpers/time-helpers.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-export type amPm = 'AM' | 'PM';
-
-export const convertTime12to24 = (time12h, timeFormat: amPm) => {
-  let [hours, minutes] = time12h.split(':');
-
-  if (hours === '12' && timeFormat === 'AM') {
-    hours = '00';
-  }
-
-  if (timeFormat === 'PM') {
-    hours = hours === '12' ? hours : parseInt(hours, 10) + 12;
-  }
-
-  return [hours, minutes];
-};
diff --git a/packages/esm-patient-queues-app/src/queue-entry-table-components/actions-menu.component.tsx b/packages/esm-patient-queues-app/src/queue-entry-table-components/actions-menu.component.tsx
deleted file mode 100644
index 0602ee3b..00000000
--- a/packages/esm-patient-queues-app/src/queue-entry-table-components/actions-menu.component.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Button } from '@carbon/react';
-import { Logout } from '@carbon/react/icons';
-
-import { showModal } from '@openmrs/esm-framework';
-import React, { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PatientQueue } from '../types/patient-queues';
-
-interface ActionsMenuProps {
-  queueEntry: PatientQueue;
-  closeModal: () => void;
-}
-
-const ActionsMenu: React.FC<ActionsMenuProps> = ({ queueEntry }) => {
-  const { t } = useTranslation();
-
-  const launchNextQueueModal = useCallback(() => {
-    const dispose = showModal('edit-queue-entry-status-modal', {
-      closeModal: () => dispose(),
-      queueEntry,
-    });
-  }, [queueEntry]);
-
-  return (
-    <Button
-      kind="ghost"
-      onClick={launchNextQueueModal}
-      iconDescription={t('moveToNextQueueRoom', 'Move to Next Queue Room ')}
-      renderIcon={(props) => <Logout size={16} {...props} />}
-    />
-  );
-};
-
-export default ActionsMenu;
diff --git a/packages/esm-patient-queues-app/src/queue-entry-table-components/actions-menu.scss b/packages/esm-patient-queues-app/src/queue-entry-table-components/actions-menu.scss
deleted file mode 100644
index 63ac4b32..00000000
--- a/packages/esm-patient-queues-app/src/queue-entry-table-components/actions-menu.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.menuItem {
-  max-width: none;
-}
diff --git a/packages/esm-patient-queues-app/src/queue-entry-table-components/pick-patient-queue-entry-menu.component.tsx b/packages/esm-patient-queues-app/src/queue-entry-table-components/pick-patient-queue-entry-menu.component.tsx
deleted file mode 100644
index 2777e1c6..00000000
--- a/packages/esm-patient-queues-app/src/queue-entry-table-components/pick-patient-queue-entry-menu.component.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Button } from '@carbon/react';
-import { Notification } from '@carbon/react/icons';
-import { showModal, useSession } from '@openmrs/esm-framework';
-import React, { useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PatientQueue } from '../types/patient-queues';
-import { usePatientQueuePages } from '../active-visits/patient-queues.resource';
-import { QueueEnumStatus, QueueStatus } from '../utils/utils';
-
-interface PickPatientActionMenuProps {
-  queueEntry: PatientQueue;
-  closeModal: () => void;
-}
-
-const PickPatientActionMenu: React.FC<PickPatientActionMenuProps> = ({ queueEntry }) => {
-  const { t } = useTranslation();
-  const session = useSession();
-  const sessionLocationId = session?.sessionLocation?.uuid;
-  const providerId = session?.user?.systemId;
-
-  // Fetch patient queue with status "Picked"
-  const { items } = usePatientQueuePages(sessionLocationId, QueueStatus.Picked);
-
-  // Filter by provider
-  const filteredByProvider = useMemo(
-    () =>
-      items?.filter((item) => item?.provider?.identifier === providerId && item.status === QueueEnumStatus.PICKED) ||
-      [],
-    [items, providerId],
-  );
-
-  const launchPickPatientQueueModal = useCallback(() => {
-    const modalType = filteredByProvider.length > 0 ? 'edit-queue-entry-status-modal' : 'pick-patient-queue-entry';
-    const modalProps =
-      filteredByProvider.length > 0 ? { queueEntry: filteredByProvider[0], currentEntry: queueEntry } : { queueEntry };
-
-    const dispose = showModal(modalType, { ...modalProps, closeModal: () => dispose() });
-  }, [filteredByProvider, queueEntry]);
-
-  return (
-    <Button
-      kind="ghost"
-      onClick={launchPickPatientQueueModal}
-      iconDescription={t('pickPatient', 'Pick Patient')}
-      renderIcon={(props) => <Notification size={16} {...props} />}
-    />
-  );
-};
-
-export default PickPatientActionMenu;
diff --git a/packages/esm-patient-queues-app/src/queue-entry-table-components/status-icon.component.tsx b/packages/esm-patient-queues-app/src/queue-entry-table-components/status-icon.component.tsx
deleted file mode 100644
index a89781df..00000000
--- a/packages/esm-patient-queues-app/src/queue-entry-table-components/status-icon.component.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Group, InProgress } from '@carbon/react/icons';
-import React from 'react';
-
-function StatusIcon({ status }) {
-  switch (status) {
-    case 'pending':
-      return <InProgress size={16} />;
-    case 'picked':
-      return <Group size={16} />;
-    case 'completed':
-      return <Group size={16} />;
-    default:
-      return null;
-  }
-}
-
-export default StatusIcon;
diff --git a/packages/esm-patient-queues-app/src/routes.json b/packages/esm-patient-queues-app/src/routes.json
index 4b508988..cb550811 100644
--- a/packages/esm-patient-queues-app/src/routes.json
+++ b/packages/esm-patient-queues-app/src/routes.json
@@ -134,10 +134,7 @@
             "name": "clear-all-queue-entries",
             "component": "clearAllQueueEntries"
         },
-        {
-            "name": "pick-patient-queue-entry",
-            "component": "pickPatientEntryQueue"
-        },
+    
         {
             "name": "previous-visit-summary-widget",
             "slot": "previous-visit-summary-slot",
@@ -163,6 +160,10 @@
         {
             "name": "notes-dialog-modal",
             "component": "notesModal"
+        },
+            {
+            "name": "pick-patient-queue-entry",
+            "component": "pickPatientEntryQueue"
         }
     ],
     "workspaces": [
diff --git a/packages/esm-patient-queues-app/src/utils/empty-state/empty-state.component.tsx b/packages/esm-patient-queues-app/src/utils/empty-state/empty-state.component.tsx
deleted file mode 100644
index 822390a7..00000000
--- a/packages/esm-patient-queues-app/src/utils/empty-state/empty-state.component.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import { Layer, Tile } from '@carbon/react';
-import styles from './empty-state.scss';
-
-type EmptyStateProps = {
-  msg: string;
-  helper: string;
-};
-
-const EmptyState: React.FC<EmptyStateProps> = ({ msg, helper }: EmptyStateProps) => {
-  return (
-    <Layer className={styles.layer}>
-      <Tile className={styles.tile}>
-        <svg width={64} height={64} viewBox="0 0 64 64">
-          <title>Empty data illustration</title>
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M38.133 13.186H21.947c-.768.001-1.39.623-1.39 1.391V50.55l-.186.057-3.97 1.216a.743.743 0 01-.927-.493L3.664 12.751a.742.742 0 01.492-.926l6.118-1.874 17.738-5.43 6.119-1.873a.741.741 0 01.926.492L38.076 13l.057.186z"
-              fill="#F4F4F4"
-            />
-            <path
-              d="M41.664 13L38.026 1.117A1.576 1.576 0 0036.056.07l-8.601 2.633-17.737 5.43-8.603 2.634a1.578 1.578 0 00-1.046 1.97l12.436 40.616a1.58 1.58 0 001.969 1.046l5.897-1.805.185-.057v-.194l-.185.057-5.952 1.822a1.393 1.393 0 01-1.737-.923L.247 12.682a1.39 1.39 0 01.923-1.738L9.772 8.31 27.51 2.881 36.112.247a1.393 1.393 0 011.737.923L41.47 13l.057.186h.193l-.057-.185z"
-              fill="#8D8D8D"
-            />
-            <path
-              d="M11.378 11.855a.836.836 0 01-.798-.59L9.385 7.361a.835.835 0 01.554-1.042l16.318-4.996a.836.836 0 011.042.554l1.195 3.902a.836.836 0 01-.554 1.043l-16.318 4.995a.831.831 0 01-.244.037z"
-              fill="#C6C6C6"
-            />
-            <circle fill="#C6C6C6" cx={17.636} cy={2.314} r={1.855} />
-            <circle fill="#FFF" fillRule="nonzero" cx={17.636} cy={2.314} r={1.175} />
-            <path
-              d="M55.893 53.995H24.544a.79.79 0 01-.788-.789V15.644a.79.79 0 01.788-.788h31.349a.79.79 0 01.788.788v37.562a.79.79 0 01-.788.789z"
-              fill="#F4F4F4"
-            />
-            <path
-              d="M41.47 13H21.948a1.579 1.579 0 00-1.576 1.577V52.4l.185-.057V14.577c.001-.768.623-1.39 1.391-1.39h19.581L41.471 13zm17.02 0H21.947a1.579 1.579 0 00-1.576 1.577v42.478c0 .87.706 1.576 1.576 1.577H58.49a1.579 1.579 0 001.576-1.577V14.577a1.579 1.579 0 00-1.576-1.576zm1.39 44.055c0 .768-.622 1.39-1.39 1.392H21.947c-.768-.001-1.39-.624-1.39-1.392V14.577c0-.768.622-1.39 1.39-1.39H58.49c.768 0 1.39.622 1.39 1.39v42.478z"
-              fill="#8D8D8D"
-            />
-            <path
-              d="M48.751 17.082H31.686a.836.836 0 01-.835-.835v-4.081c0-.46.374-.834.835-.835H48.75c.461 0 .834.374.835.835v4.08c0 .462-.374.835-.835.836z"
-              fill="#C6C6C6"
-            />
-            <circle fill="#C6C6C6" cx={40.218} cy={9.755} r={1.855} />
-            <circle fill="#FFF" fillRule="nonzero" cx={40.218} cy={9.755} r={1.13} />
-          </g>
-        </svg>
-        <p className={styles.content}>{msg}</p>
-        <p className={styles.explainer}>{helper}</p>
-      </Tile>
-    </Layer>
-  );
-};
-
-export default EmptyState;
diff --git a/packages/esm-patient-queues-app/src/utils/empty-state/empty-state.scss b/packages/esm-patient-queues-app/src/utils/empty-state/empty-state.scss
deleted file mode 100644
index 975b1c52..00000000
--- a/packages/esm-patient-queues-app/src/utils/empty-state/empty-state.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-@use '@carbon/styles/scss/colors';
-@use "@carbon/styles/scss/spacing";
-@use "@carbon/styles/scss/type";
-
-.desktopHeading {
-  h4 {
-    @include type.type-style("heading-compact-02");
-    color: colors.$gray-70;
-  }
-}
-
-.tabletHeading {
-  h4 {
-    @include type.type-style("heading-03");
-    color: colors.$gray-70;
-  }
-}
-
-.desktopHeading,
-.tabletHeading {
-  text-align: left;
-  text-transform: capitalize;
-  margin-bottom: spacing.$spacing-05;
-
-  h4:after {
-    content: "";
-    display: block;
-    width: 2rem;
-    padding-top: 0.188rem;
-    border-bottom: 0.375rem solid var(--brand-03);
-  }
-}
-
-.heading:after {
-  content: "";
-  display: block;
-  width: 2rem;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid var(--brand-03);
-}
-
-.tile {
-  padding: 2rem;
-}
-
-.layer {
-  margin: 1rem 0;
-  text-align: center;
-  border: 1px solid colors.$gray-20;
-}
-
-.content {
-  @include type.type-style("heading-compact-02");
-  color: colors.$gray-70;
-  margin-top: spacing.$spacing-05;
-  margin-bottom: spacing.$spacing-03;
-}
-
-.explainer {
-  @include type.type-style('body-compact-01');
-  color: colors.$gray-70;
-}
diff --git a/packages/esm-patient-queues-app/src/utils/utils.ts b/packages/esm-patient-queues-app/src/utils/utils.tsx
similarity index 73%
rename from packages/esm-patient-queues-app/src/utils/utils.ts
rename to packages/esm-patient-queues-app/src/utils/utils.tsx
index af44edbe..7dd0f57e 100644
--- a/packages/esm-patient-queues-app/src/utils/utils.ts
+++ b/packages/esm-patient-queues-app/src/utils/utils.tsx
@@ -1,3 +1,5 @@
+import { Group, InProgress } from '@carbon/react/icons';
+import React from 'react';
 import { restBaseUrl } from '@openmrs/esm-framework';
 import debounce from 'lodash-es/debounce';
 import { mutate } from 'swr';
@@ -32,3 +34,21 @@ export const handleMutate = (url: string) => {
   });
   refreshDashboardMetrics();
 };
+
+
+
+
+function StatusIcon({ status }) {
+  switch (status) {
+    case 'pending':
+      return <InProgress size={16} />;
+    case 'picked':
+      return <Group size={16} />;
+    case 'completed':
+      return <Group size={16} />;
+    default:
+      return null;
+  }
+}
+
+export default StatusIcon;
\ No newline at end of file

From 3abd45e12b67fc10305e6f93f3aae5afff0c2c11 Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Tue, 13 May 2025 19:12:13 +0300
Subject: [PATCH 03/17] chore

---
 .../pick-queue-patient-action-action.component.tsx |  5 +----
 .../queue-clinical-table.component.tsx             | 11 +++++------
 .../queue-triage-table.component.tsx               |  5 ++++-
 .../src/helpers/functions.ts                       |  1 -
 packages/esm-patient-queues-app/src/index.ts       | 14 +-------------
 .../esm-patient-queues-app/src/utils/utils.tsx     |  5 +----
 6 files changed, 12 insertions(+), 29 deletions(-)

diff --git a/packages/esm-patient-queues-app/src/active-visits/pick-queue-patient-action-action.component.tsx b/packages/esm-patient-queues-app/src/active-visits/pick-queue-patient-action-action.component.tsx
index f4b43792..95e3b35b 100644
--- a/packages/esm-patient-queues-app/src/active-visits/pick-queue-patient-action-action.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/pick-queue-patient-action-action.component.tsx
@@ -23,9 +23,7 @@ const PickQueuePatientActionButton: React.FC<PickPatientActionMenuProps> = ({ qu
   const hasPickedPatient = useMemo(() => {
     if (!pickedQueueItems || !providerId) return false;
     return pickedQueueItems.some(
-      (item) =>
-        item?.provider?.identifier === providerId &&
-        item?.status === QueueEnumStatus.PICKED,
+      (item) => item?.provider?.identifier === providerId && item?.status === QueueEnumStatus.PICKED,
     );
   }, [pickedQueueItems, providerId]);
 
@@ -70,4 +68,3 @@ const PickQueuePatientActionButton: React.FC<PickPatientActionMenuProps> = ({ qu
 };
 
 export default PickQueuePatientActionButton;
-
diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx
index 17466594..0d7e5deb 100644
--- a/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx
@@ -21,11 +21,7 @@ import {
 
 import { useTranslation } from 'react-i18next';
 import { useSession, useLayoutType, isDesktop, useConfig } from '@openmrs/esm-framework';
-import {
-  getOriginFromPathName,
-  useParentLocation,
-  usePatientQueuePages,
-} from '../patient-queues.resource';
+import { getOriginFromPathName, useParentLocation, usePatientQueuePages } from '../patient-queues.resource';
 import {
   buildStatusString,
   formatWaitTime,
@@ -215,7 +211,10 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
             )}
 
             {(patientqueue?.status === 'COMPLETED' || patientqueue?.status === 'PICKED') && (
-              <ViewQueuePatientActionMenu to={`\${openmrsSpaBase}/patient/${patientqueue?.patient?.uuid}/chart`} from={fromPage} />
+              <ViewQueuePatientActionMenu
+                to={`\${openmrsSpaBase}/patient/${patientqueue?.patient?.uuid}/chart`}
+                from={fromPage}
+              />
             )}
 
             <NotesActionsMenu note={patientqueue} />
diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx
index 91430c3f..417039df 100644
--- a/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx
@@ -197,7 +197,10 @@ const ActiveTriageVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) =
             )}
 
             {(patientqueue?.status === 'COMPLETED' || patientqueue?.status === 'PICKED') && (
-              <ViewQueuePatientActionMenu to={`\${openmrsSpaBase}/patient/${patientqueue?.patient?.uuid}/chart`} from={fromPage} />
+              <ViewQueuePatientActionMenu
+                to={`\${openmrsSpaBase}/patient/${patientqueue?.patient?.uuid}/chart`}
+                from={fromPage}
+              />
             )}
 
             <NotesActionsMenu note={patientqueue} />
diff --git a/packages/esm-patient-queues-app/src/helpers/functions.ts b/packages/esm-patient-queues-app/src/helpers/functions.ts
index 70967a84..4dc5a474 100644
--- a/packages/esm-patient-queues-app/src/helpers/functions.ts
+++ b/packages/esm-patient-queues-app/src/helpers/functions.ts
@@ -56,7 +56,6 @@ export const getProviderTagColor = (entryProvider: string, loggedInProviderName:
   }
 };
 
-
 export type amPm = 'AM' | 'PM';
 
 export const convertTime12to24 = (time12h, timeFormat: amPm) => {
diff --git a/packages/esm-patient-queues-app/src/index.ts b/packages/esm-patient-queues-app/src/index.ts
index 737173fd..e037a36a 100644
--- a/packages/esm-patient-queues-app/src/index.ts
+++ b/packages/esm-patient-queues-app/src/index.ts
@@ -3,7 +3,7 @@ import { configSchema } from './config-schema';
 import { moduleName } from './constants';
 import { createDashboardLink } from './createDashboardLink';
 import { ClinicalRoomMeta, ReceptionMeta, TriageMeta } from './dashboard.meta';
-import moveToNextServicePointButtonComponent from './active-visits/move-to-next-service-point-patient-action.components';
+import moveToNextServicePointButtonComponent from './active-visits/move-to-next-service-point-patient-action.component';
 import notesModalComponent from './active-visits/notes/notes-action-menu.components';
 import pickPatientEntryQueueComponent from './active-visits/pick-patient-dialog.component';
 import queueScreenComponent from './components/queue-board/queue-board.component';
@@ -57,20 +57,8 @@ export const queueClinicalRoomDashboardLink = getSyncLifecycle(createDashboardLi
 
 export const moveToNextServicePointFormWorkspace = getSyncLifecycle(moveToNextServicePointWorkspace, options);
 
-// export const patientChartMoveToNextServicePointModal = getSyncLifecycle(
-//   patientChartMoveToNextServicePointModalComponent,
-//   options,
-// );
-
-// export const queueTableMoveToNextServicePointModal = getSyncLifecycle(
-//   queueTableMoveToNextServicePointModalComponent,
-//   options,
-// );
-
 export const moveToNextServicePointButton = getSyncLifecycle(moveToNextServicePointButtonComponent, options);
 
-// export const addPatientToQueue = getSyncLifecycle(addPatientToQueueComponent, options);
-
 export const notesModal = getSyncLifecycle(notesModalComponent, options);
 
 export const pickPatientEntryQueue = getSyncLifecycle(pickPatientEntryQueueComponent, options);
diff --git a/packages/esm-patient-queues-app/src/utils/utils.tsx b/packages/esm-patient-queues-app/src/utils/utils.tsx
index 7dd0f57e..0d20234c 100644
--- a/packages/esm-patient-queues-app/src/utils/utils.tsx
+++ b/packages/esm-patient-queues-app/src/utils/utils.tsx
@@ -35,9 +35,6 @@ export const handleMutate = (url: string) => {
   refreshDashboardMetrics();
 };
 
-
-
-
 function StatusIcon({ status }) {
   switch (status) {
     case 'pending':
@@ -51,4 +48,4 @@ function StatusIcon({ status }) {
   }
 }
 
-export default StatusIcon;
\ No newline at end of file
+export default StatusIcon;

From 7d37b415efdf8f028fee6f3a5a2c60575891f50e Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Tue, 13 May 2025 19:45:14 +0300
Subject: [PATCH 04/17] chore

---
 ...service-point-patient-action.component.tsx |  9 ++++----
 ...rvice-point-re-assign-action.component.tsx | 10 +++++---
 .../move-to-next-service-point.workspace.tsx  | 23 ++++++++-----------
 .../queue-clinical-table.component.tsx        |  9 ++++----
 .../queue-triage-table.component.tsx          |  5 ++--
 .../src/queue-reception-home.component.tsx    |  2 +-
 6 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.component.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.component.tsx
index 0982cf6a..50feff9d 100644
--- a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.component.tsx
@@ -1,19 +1,20 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { launchWorkspace, showModal } from '@openmrs/esm-framework';
+import { PatientQueue } from '../types/patient-queues';
 
 interface PatientMoveToNextServicePointProps {
-  patientUuid?: string;
+  queueEntry?: PatientQueue;
 }
 
-const MovetoNextServicePointPatientActionButton: React.FC<PatientMoveToNextServicePointProps> = ({ patientUuid }) => {
+const MovetoNextServicePointPatientActionButton: React.FC<PatientMoveToNextServicePointProps> = ({ queueEntry }) => {
   const { t } = useTranslation();
   const handleClick = useCallback(() => {
     launchWorkspace('move-to-next-service-point-form-workspace', {
       workspaceTitle: t('moveToNextServicePoint', 'Move to next service point'),
-      patientUuid,
+      queueEntry,
     });
-  }, [patientUuid]);
+  }, [queueEntry, t]);
   return (
     <li className="cds--overflow-menu-options__option">
       <button
diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-re-assign-action.component.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-re-assign-action.component.tsx
index ec306e7c..73f34099 100644
--- a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-re-assign-action.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-re-assign-action.component.tsx
@@ -4,17 +4,21 @@ import { Button, Tooltip } from '@carbon/react';
 import { Send } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
 import { launchWorkspace } from '@openmrs/esm-framework';
+import { PatientQueue } from '../types/patient-queues';
 
-type MovetoNextServicePointPatientActionProps = {};
+type MovetoNextServicePointReassignPatientActionProps = {
+  queueEntry: PatientQueue;
+};
 
-const MovetoNextServicePointReassignAction: React.FC<MovetoNextServicePointPatientActionProps> = ({}) => {
+const MovetoNextServicePointReassignAction: React.FC<MovetoNextServicePointReassignPatientActionProps> = ({ queueEntry }) => {
   const { t } = useTranslation();
 
   const handleClick = useCallback(() => {
     launchWorkspace('move-to-next-service-point-form-workspace', {
       workspaceTitle: t('moveToNextServicePoint', 'Move to next service point'),
+      queueEntry,
     });
-  }, []);
+  }, [t, queueEntry]);
 
   return (
     <Button
diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
index 810a614d..f6460bdd 100644
--- a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
@@ -46,17 +46,14 @@ import { CreateQueueEntryFormData, createQueueEntrySchema } from './patient-queu
 import { PatientQueue } from '../types/patient-queues';
 
 type MoveToNextServicePointFormProps = DefaultWorkspaceProps & {
-  queueEntry?: PatientQueue;
-  currentEntry?: PatientQueue;
+  queueEntry: PatientQueue;
 };
 
-const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
-  queueEntry,
-  currentEntry,
-  closeWorkspace,
-}) => {
+const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({ queueEntry, closeWorkspace }) => {
   const { t } = useTranslation();
 
+  console.log('queueEntry--->', queueEntry);
+
   const isTablet = useLayoutType() === 'tablet';
 
   const [contentSwitcherIndex, setContentSwitcherIndex] = useState(1);
@@ -72,7 +69,7 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
   );
   const [selectedNextQueueLocation, setSelectedNextQueueLocation] = useState(queueRoomLocations[0]?.uuid);
 
-  const { activeVisit } = useVisit(queueEntry.patient.uuid);
+  const { activeVisit } = useVisit(queueEntry?.uuid);
 
   const [isLoading, setIsLoading] = useState(true);
 
@@ -236,7 +233,7 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
           await updateQueueEntry(
             QueueStatus.Picked,
             provider,
-            currentEntry?.uuid,
+            queueEntry?.uuid,
             contentSwitcherIndex,
             priorityComment,
             'comment',
@@ -250,7 +247,7 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
           });
 
           // View patient summary
-          navigate({ to: `\${openmrsSpaBase}/patient/${currentEntry?.patient?.uuid}/chart` });
+          navigate({ to: `\${openmrsSpaBase}/patient/${queueEntry?.patient?.uuid}/chart` });
 
           closeWorkspace();
           handleMutate(`${restBaseUrl}/patientqueue`);
@@ -278,8 +275,6 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
     selectedProvider,
     provider,
     sessionUser?.sessionLocation?.uuid,
-    currentEntry?.uuid,
-    currentEntry?.patient?.uuid,
     selectedNextQueueLocation,
   ]);
 
@@ -298,7 +293,7 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
             <ModalHeader closeModal={closeWorkspace} />
             <ModalBody>
               <div className={styles.modalBody}>
-                <div style={{ display: 'flex', alignItems: 'center' }}>
+                {/* <div style={{ display: 'flex', alignItems: 'center' }}>
                   <h4 className={styles.section}> Currently Picked :</h4>
                   <div style={{ margin: '10px' }}>
                     <ArrowDown size={20} />
@@ -316,7 +311,7 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
                   '--'
                 )}
 
-                <br></br>
+                <br></br> */}
                 <hr />
                 <br></br>
                 <div style={{ display: 'flex', alignItems: 'center' }}>
diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx
index 0d7e5deb..e6f526a7 100644
--- a/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx
@@ -30,7 +30,6 @@ import {
   trimVisitNumber,
 } from '../../helpers/functions';
 import PickPatientActionMenu from '../pick-queue-patient-action-action.component';
-import ViewActionsMenu from '../view-queue-patient-action-menu.component';
 import NotesActionsMenu from '../notes/notes-action-menu.components';
 import styles from '../active-visits-table.scss';
 import dayjs from 'dayjs';
@@ -159,7 +158,7 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
   }, [items, searchTerm, status, clinicalRoomTag]);
 
   const tableRows = useMemo(() => {
-    return filteredPatientQueueEntries.map((patientqueue, entry) => ({
+    return filteredPatientQueueEntries.map((patientqueue, index) => ({
       ...patientqueue,
       id: patientqueue.uuid,
       visitNumber: {
@@ -219,12 +218,14 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
 
             <NotesActionsMenu note={patientqueue} />
 
-            {patientqueue?.status === 'PENDING' && isToggled && <MovetoNextServicePointReassignAction />}
+            {patientqueue?.status === 'PENDING' && isToggled && (
+              <MovetoNextServicePointReassignAction queueEntry={filteredPatientQueueEntries[index]} />
+            )}
           </div>
         ),
       },
     }));
-  }, [filteredPatientQueueEntries, session.user, t, fromPage]);
+  }, [filteredPatientQueueEntries, session.user, t, fromPage, isToggled]);
 
   if (isLoading) {
     return <DataTableSkeleton role="progressbar" />;
diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx
index 417039df..69defe3e 100644
--- a/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx
@@ -30,7 +30,6 @@ import {
   trimVisitNumber,
 } from '../../helpers/functions';
 import PickQueuePatientActionMenu from '../pick-queue-patient-action-action.component';
-import ViewActionsMenu from '../view-queue-patient-action-menu.component';
 import NotesActionsMenu from '../notes/notes-action-menu.components';
 import styles from '../active-visits-table.scss';
 import dayjs from 'dayjs';
@@ -205,7 +204,9 @@ const ActiveTriageVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) =
 
             <NotesActionsMenu note={patientqueue} />
 
-            {patientqueue?.status === 'PENDING' && isToggled && <MovetoNextServicePointReassignAction />}
+            {patientqueue?.status === 'PENDING' && isToggled && (
+              <MovetoNextServicePointReassignAction queueEntry={filteredPatientQueueEntries[index]} />
+            )}
           </div>
         ),
       },
diff --git a/packages/esm-patient-queues-app/src/queue-reception-home.component.tsx b/packages/esm-patient-queues-app/src/queue-reception-home.component.tsx
index ae42e761..0ae64c7e 100644
--- a/packages/esm-patient-queues-app/src/queue-reception-home.component.tsx
+++ b/packages/esm-patient-queues-app/src/queue-reception-home.component.tsx
@@ -14,7 +14,6 @@ import {
 import { useServicePointCount } from './components/patient-queue-metrics/clinic-metrics.resource';
 import { ExtensionSlot, useSession } from '@openmrs/esm-framework';
 import { buildStatusString, formatWaitTime, getTagColor, trimVisitNumber } from './helpers/functions';
-import StatusIcon from './queue-entry-table-components/status-icon.component';
 import EditActionsMenu from './active-visits/edit-action-menu.components';
 import QueueLauncher from './components/queue-launcher/queue-launcher.component';
 
@@ -37,6 +36,7 @@ import {
 } from '@carbon/react';
 import { Add } from '@carbon/react/icons';
 import PrintActionsMenu from './active-visits/print-action-menu.components';
+import StatusIcon from './utils/utils';
 
 const ReceptionHome: React.FC = () => {
   const { t } = useTranslation();

From 9dac378094b808f0563f92c8ce0943ba6e0cd38c Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Wed, 14 May 2025 08:57:14 +0300
Subject: [PATCH 05/17] chore

---
 .../active-visits-print/active-visits-print.scss       |  3 +--
 .../src/active-visits/active-visits-table.scss         |  3 +--
 ...-to-next-service-point-patient-action.component.tsx | 10 ++++++----
 ...o-next-service-point-re-assign-action.component.tsx |  6 ++++--
 .../src/active-visits/move-to-next-service-point.scss  |  2 +-
 .../move-to-next-service-point.workspace.tsx           |  9 +++++----
 .../active-visits/pick-patient-dialog.component.tsx    |  1 +
 .../src/components/visit-form/visit-form.scss          |  4 ++--
 packages/esm-patient-queues-app/src/index.ts           |  4 ++--
 .../src/queue-reception-home.scss                      |  2 +-
 packages/esm-patient-queues-app/src/root.scss          |  4 ++--
 packages/esm-patient-queues-app/src/routes.json        |  2 +-
 12 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/packages/esm-patient-queues-app/src/active-visits/active-visits-print/active-visits-print.scss b/packages/esm-patient-queues-app/src/active-visits/active-visits-print/active-visits-print.scss
index 98286140..d271cf03 100644
--- a/packages/esm-patient-queues-app/src/active-visits/active-visits-print/active-visits-print.scss
+++ b/packages/esm-patient-queues-app/src/active-visits/active-visits-print/active-visits-print.scss
@@ -1,8 +1,7 @@
 @use '@carbon/styles/scss/colors';
 @use "@carbon/styles/scss/spacing";
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
-
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 @media screen {
   .printPage {
diff --git a/packages/esm-patient-queues-app/src/active-visits/active-visits-table.scss b/packages/esm-patient-queues-app/src/active-visits/active-visits-table.scss
index 5e2b5b83..514ffedd 100644
--- a/packages/esm-patient-queues-app/src/active-visits/active-visits-table.scss
+++ b/packages/esm-patient-queues-app/src/active-visits/active-visits-table.scss
@@ -1,7 +1,6 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
-
+@use '@openmrs/esm-styleguide/src/vars' as *;
 .container {
   :global(.cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected) {
     background-color: transparent;
diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.component.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.component.tsx
index 50feff9d..d1f626e5 100644
--- a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.component.tsx
@@ -1,18 +1,20 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { launchWorkspace, showModal } from '@openmrs/esm-framework';
+import { launchWorkspace } from '@openmrs/esm-framework';
 import { PatientQueue } from '../types/patient-queues';
 
-interface PatientMoveToNextServicePointProps {
+interface PatientMoveToNextServicePointPatientActionProps {
   queueEntry?: PatientQueue;
 }
 
-const MovetoNextServicePointPatientActionButton: React.FC<PatientMoveToNextServicePointProps> = ({ queueEntry }) => {
+const MovetoNextServicePointPatientActionButton: React.FC<PatientMoveToNextServicePointPatientActionProps> = ({
+  queueEntry,
+}) => {
   const { t } = useTranslation();
   const handleClick = useCallback(() => {
     launchWorkspace('move-to-next-service-point-form-workspace', {
       workspaceTitle: t('moveToNextServicePoint', 'Move to next service point'),
-      queueEntry,
+      queueEntry: queueEntry,
     });
   }, [queueEntry, t]);
   return (
diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-re-assign-action.component.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-re-assign-action.component.tsx
index 73f34099..a9763b79 100644
--- a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-re-assign-action.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-re-assign-action.component.tsx
@@ -10,13 +10,15 @@ type MovetoNextServicePointReassignPatientActionProps = {
   queueEntry: PatientQueue;
 };
 
-const MovetoNextServicePointReassignAction: React.FC<MovetoNextServicePointReassignPatientActionProps> = ({ queueEntry }) => {
+const MovetoNextServicePointReassignAction: React.FC<MovetoNextServicePointReassignPatientActionProps> = ({
+  queueEntry,
+}) => {
   const { t } = useTranslation();
 
   const handleClick = useCallback(() => {
     launchWorkspace('move-to-next-service-point-form-workspace', {
       workspaceTitle: t('moveToNextServicePoint', 'Move to next service point'),
-      queueEntry,
+      queueEntry: queueEntry,
     });
   }, [t, queueEntry]);
 
diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.scss b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.scss
index 56cc587d..c916313f 100644
--- a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.scss
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 .radioButtonGroup {
     display: flex;
     flex-direction: column;
diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
index f6460bdd..621560b3 100644
--- a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
@@ -29,7 +29,7 @@ import {
 } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { useQueueRoomLocations } from '../hooks/useQueueRooms';
-import { ArrowUp, ArrowDown } from '@carbon/react/icons';
+import { ArrowUp } from '@carbon/react/icons';
 import styles from './move-to-next-service-point.scss';
 import { QueueStatus, extractErrorMessagesFromResponse, handleMutate } from '../utils/utils';
 import {
@@ -46,14 +46,12 @@ import { CreateQueueEntryFormData, createQueueEntrySchema } from './patient-queu
 import { PatientQueue } from '../types/patient-queues';
 
 type MoveToNextServicePointFormProps = DefaultWorkspaceProps & {
-  queueEntry: PatientQueue;
+  queueEntry?: PatientQueue;
 };
 
 const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({ queueEntry, closeWorkspace }) => {
   const { t } = useTranslation();
 
-  console.log('queueEntry--->', queueEntry);
-
   const isTablet = useLayoutType() === 'tablet';
 
   const [contentSwitcherIndex, setContentSwitcherIndex] = useState(1);
@@ -173,6 +171,7 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
           navigate({ to: `\${openmrsSpaBase}/home` });
           closeWorkspace();
           setIsEndingVisit(false);
+          handleMutate(`${restBaseUrl}/patientqueue`);
         }
       } catch (error) {
         setIsEndingVisit(false);
@@ -182,6 +181,7 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
           critical: true,
           description: error?.message,
         });
+        handleMutate(`${restBaseUrl}/patientqueue`);
       }
     }
   };
@@ -262,6 +262,7 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
         critical: true,
         description: error?.message,
       });
+      handleMutate(`${restBaseUrl}/patientqueue`);
     }
   }, [
     status,
diff --git a/packages/esm-patient-queues-app/src/active-visits/pick-patient-dialog.component.tsx b/packages/esm-patient-queues-app/src/active-visits/pick-patient-dialog.component.tsx
index 019f9831..ff041f45 100644
--- a/packages/esm-patient-queues-app/src/active-visits/pick-patient-dialog.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/pick-patient-dialog.component.tsx
@@ -89,6 +89,7 @@ const PickQueuePatientDialog: React.FC<PickQueuePatientDialogProps> = ({ queueEn
           critical: true,
           description: error?.message,
         });
+        handleMutate(`${restBaseUrl}/patientqueue`);
       }
     },
     [provider, queueEntry?.uuid, queueEntry?.patient?.uuid, priorityComment, t, closeModal],
diff --git a/packages/esm-patient-queues-app/src/components/visit-form/visit-form.scss b/packages/esm-patient-queues-app/src/components/visit-form/visit-form.scss
index 23d201a9..17e770c9 100644
--- a/packages/esm-patient-queues-app/src/components/visit-form/visit-form.scss
+++ b/packages/esm-patient-queues-app/src/components/visit-form/visit-form.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .container {
   margin: spacing.$spacing-05 0rem;
@@ -93,4 +93,4 @@
       order: 2;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/esm-patient-queues-app/src/index.ts b/packages/esm-patient-queues-app/src/index.ts
index e037a36a..d9e41130 100644
--- a/packages/esm-patient-queues-app/src/index.ts
+++ b/packages/esm-patient-queues-app/src/index.ts
@@ -3,7 +3,7 @@ import { configSchema } from './config-schema';
 import { moduleName } from './constants';
 import { createDashboardLink } from './createDashboardLink';
 import { ClinicalRoomMeta, ReceptionMeta, TriageMeta } from './dashboard.meta';
-import moveToNextServicePointButtonComponent from './active-visits/move-to-next-service-point-patient-action.component';
+import moveToNextServicePointActionComponent from './active-visits/move-to-next-service-point-patient-action.component';
 import notesModalComponent from './active-visits/notes/notes-action-menu.components';
 import pickPatientEntryQueueComponent from './active-visits/pick-patient-dialog.component';
 import queueScreenComponent from './components/queue-board/queue-board.component';
@@ -57,7 +57,7 @@ export const queueClinicalRoomDashboardLink = getSyncLifecycle(createDashboardLi
 
 export const moveToNextServicePointFormWorkspace = getSyncLifecycle(moveToNextServicePointWorkspace, options);
 
-export const moveToNextServicePointButton = getSyncLifecycle(moveToNextServicePointButtonComponent, options);
+export const moveToNextServicePointPatientAction = getSyncLifecycle(moveToNextServicePointActionComponent, options);
 
 export const notesModal = getSyncLifecycle(notesModalComponent, options);
 
diff --git a/packages/esm-patient-queues-app/src/queue-reception-home.scss b/packages/esm-patient-queues-app/src/queue-reception-home.scss
index 97209523..4f95be4a 100644
--- a/packages/esm-patient-queues-app/src/queue-reception-home.scss
+++ b/packages/esm-patient-queues-app/src/queue-reception-home.scss
@@ -1,7 +1,7 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .cardContainer {
     background-color: $ui-02;
diff --git a/packages/esm-patient-queues-app/src/root.scss b/packages/esm-patient-queues-app/src/root.scss
index df390efd..86b13a69 100644
--- a/packages/esm-patient-queues-app/src/root.scss
+++ b/packages/esm-patient-queues-app/src/root.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .productiveHeading01 {
   @include type.type-style('heading-compact-01');
@@ -12,4 +12,4 @@
 
 .bodyLong01 {
   @include type.type-style('body-01');
-}
+}
\ No newline at end of file
diff --git a/packages/esm-patient-queues-app/src/routes.json b/packages/esm-patient-queues-app/src/routes.json
index cb550811..1a298bcc 100644
--- a/packages/esm-patient-queues-app/src/routes.json
+++ b/packages/esm-patient-queues-app/src/routes.json
@@ -113,7 +113,7 @@
         {
             "name": "patient-move-to-next-service-point",
             "slot": "patient-actions-slot",
-            "component": "moveToNextServicePointButton",
+            "component": "moveToNextServicePointPatientAction",
             "online": true,
             "offline": true
         },

From 3a4a977723b0d0a82bea5316b8bf3ef2fc01a0de Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Wed, 14 May 2025 20:19:09 +0300
Subject: [PATCH 06/17] fix store queue uuid undefin

---
 ...service-point-patient-action.component.tsx |  12 +-
 ...rvice-point-re-assign-action.component.tsx |   8 +-
 .../move-to-next-service-point.workspace.tsx  | 113 +++++----
 .../active-visits/patient-queues.resource.ts  |  12 +
 ...-queue-patient-action-action.component.tsx |  12 +-
 .../queue-clinical-table.component.tsx        |   3 +-
 .../queue-triage-table.component.tsx          |   3 +-
 ...ew-queue-patient-action-menu.component.tsx |  30 ++-
 .../visit-form/visit-form.component.tsx       |  81 ++++---
 .../src/components/visit-form/visit-form.scss |   6 +
 .../src/helpers/helpers.tsx                   | 225 ++----------------
 .../src/queue-triage-home.scss                |   2 +-
 packages/esm-patient-queues-app/src/root.scss |   4 +-
 13 files changed, 209 insertions(+), 302 deletions(-)

diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.component.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.component.tsx
index d1f626e5..1aa61a82 100644
--- a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.component.tsx
@@ -1,22 +1,16 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { launchWorkspace } from '@openmrs/esm-framework';
-import { PatientQueue } from '../types/patient-queues';
 
-interface PatientMoveToNextServicePointPatientActionProps {
-  queueEntry?: PatientQueue;
-}
+interface PatientMoveToNextServicePointPatientActionProps {}
 
-const MovetoNextServicePointPatientActionButton: React.FC<PatientMoveToNextServicePointPatientActionProps> = ({
-  queueEntry,
-}) => {
+const MovetoNextServicePointPatientActionButton: React.FC<PatientMoveToNextServicePointPatientActionProps> = ({}) => {
   const { t } = useTranslation();
   const handleClick = useCallback(() => {
     launchWorkspace('move-to-next-service-point-form-workspace', {
       workspaceTitle: t('moveToNextServicePoint', 'Move to next service point'),
-      queueEntry: queueEntry,
     });
-  }, [queueEntry, t]);
+  }, [t]);
   return (
     <li className="cds--overflow-menu-options__option">
       <button
diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-re-assign-action.component.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-re-assign-action.component.tsx
index a9763b79..5ebc2a29 100644
--- a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-re-assign-action.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-re-assign-action.component.tsx
@@ -7,20 +7,20 @@ import { launchWorkspace } from '@openmrs/esm-framework';
 import { PatientQueue } from '../types/patient-queues';
 
 type MovetoNextServicePointReassignPatientActionProps = {
-  queueEntry: PatientQueue;
+  patientUuid: string;
 };
 
 const MovetoNextServicePointReassignAction: React.FC<MovetoNextServicePointReassignPatientActionProps> = ({
-  queueEntry,
+  patientUuid,
 }) => {
   const { t } = useTranslation();
 
   const handleClick = useCallback(() => {
     launchWorkspace('move-to-next-service-point-form-workspace', {
       workspaceTitle: t('moveToNextServicePoint', 'Move to next service point'),
-      queueEntry: queueEntry,
+      patientUuid: patientUuid,
     });
-  }, [t, queueEntry]);
+  }, [t, patientUuid]);
 
   return (
     <Button
diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
index 621560b3..9e4b6983 100644
--- a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
@@ -36,6 +36,7 @@ import {
   NewQueuePayload,
   addQueueEntry,
   getCareProvider,
+  getPatientQueueUuid,
   updateQueueEntry,
   updateVisit,
   useProviders,
@@ -43,82 +44,106 @@ import {
 import { Controller, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { CreateQueueEntryFormData, createQueueEntrySchema } from './patient-queue-validation-schema.resource';
+import { getSelectedPatientQueueUuid, useSelectedPatientQueueUuid } from '../helpers/helpers';
 import { PatientQueue } from '../types/patient-queues';
 
-type MoveToNextServicePointFormProps = DefaultWorkspaceProps & {
-  queueEntry?: PatientQueue;
-};
+type MoveToNextServicePointFormProps = DefaultWorkspaceProps & {};
 
-const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({ queueEntry, closeWorkspace }) => {
+const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({ closeWorkspace }) => {
+  // Hooks
   const { t } = useTranslation();
-
   const isTablet = useLayoutType() === 'tablet';
+  const sessionUser = useSession();
+  const patientQueueUuid = getSelectedPatientQueueUuid().getState();
 
-  const [contentSwitcherIndex, setContentSwitcherIndex] = useState(1);
 
+  // States
+  const [queueEntry, setQueueEntry] = useState<PatientQueue>();
+  const [contentSwitcherIndex, setContentSwitcherIndex] = useState(1);
   const [statusSwitcherIndex, setStatusSwitcherIndex] = useState(1);
-
   const [status, setStatus] = useState('');
-
-  const sessionUser = useSession();
-
-  const { queueRoomLocations, error: errorLoadingQueueRooms } = useQueueRoomLocations(
-    sessionUser?.sessionLocation?.uuid,
-  );
-  const [selectedNextQueueLocation, setSelectedNextQueueLocation] = useState(queueRoomLocations[0]?.uuid);
-
-  const { activeVisit } = useVisit(queueEntry?.uuid);
-
-  const [isLoading, setIsLoading] = useState(true);
-
   const [provider, setProvider] = useState('');
-
   const [selectedProvider, setSelectedProvider] = useState('');
-
   const [priorityComment, setPriorityComment] = useState('');
-
+  const [isLoading, setIsLoading] = useState(true);
   const [isSubmitting, setIsSubmitting] = useState(false);
-
   const [isEndingVisit, setIsEndingVisit] = useState(false);
 
+  // Data Fetching Hooks
+  const { queueRoomLocations, error: errorLoadingQueueRooms } = useQueueRoomLocations(
+    sessionUser?.sessionLocation?.uuid,
+  );
+  const [selectedNextQueueLocation, setSelectedNextQueueLocation] = useState(queueRoomLocations[0]?.uuid);
   const { providers, error: errorLoadingProviders } = useProviders(selectedNextQueueLocation);
+  const { activeVisit } = useVisit(queueEntry?.uuid);
+
+  // Memoized constants
+  const priorityLabels = useMemo(() => ['Not Urgent', 'Urgent', 'Emergency'], []);
+  const statusLabels = useMemo(
+    () => [
+      { status: 'pending', label: 'Move to Pending' },
+      { status: 'completed', label: 'Move to Completed' },
+    ],
+    [],
+  );
 
-  // Memoize the function to fetch the provider using useCallback
+  // Fetch provider info
   const fetchProvider = useCallback(() => {
     if (!sessionUser?.user?.uuid) return;
 
     setIsLoading(true);
-
-    getCareProvider(sessionUser?.user?.uuid).then(
-      (response) => {
-        const uuid = response?.data?.results[0].uuid;
-        setIsLoading(false);
+    getCareProvider(sessionUser.user.uuid)
+      .then((response) => {
+        const uuid = response?.data?.results?.[0]?.uuid;
         setProvider(uuid);
-      },
-      (error) => {
+      })
+      .catch((error) => {
         const errorMessages = extractErrorMessagesFromResponse(error);
-        setIsLoading(false);
         showNotification({
           title: "Couldn't get provider",
           kind: 'error',
           critical: true,
           description: errorMessages.join(','),
         });
-      },
-    );
+      })
+      .finally(() => setIsLoading(false));
   }, [sessionUser?.user?.uuid]);
 
-  useEffect(() => fetchProvider(), [fetchProvider]);
+  // Fetch queue entry
+  const fetchQueueEntry = useCallback(async () => {
+    try {
+      const response = await getPatientQueueUuid(patientQueueUuid.patientQueueUuid);
 
-  const priorityLabels = useMemo(() => ['Not Urgent', 'Urgent', 'Emergency'], []);
+      if (response?.status === 200 && response?.data) {
+        setQueueEntry(response.data);
+      } else {
+        showNotification({
+          title: 'Queue entry not found',
+          kind: 'warning',
+          description: 'The server did not return a valid queue entry.',
+        });
+      }
+    } catch (error) {
+      const errorMessages = extractErrorMessagesFromResponse(error);
+      showNotification({
+        title: "Couldn't get queue entry",
+        kind: 'error',
+        critical: true,
+        description: errorMessages.join(', '),
+      });
+    }
+  }, [patientQueueUuid]);
 
-  const statusLabels = useMemo(
-    () => [
-      { status: 'pending', label: 'Move to Pending' },
-      { status: 'completed', label: 'Move to Completed' },
-    ],
-    [],
-  );
+  // Effects
+  useEffect(() => {
+    fetchProvider();
+  }, [fetchProvider]);
+
+  useEffect(() => {
+    if (patientQueueUuid) {
+      fetchQueueEntry();
+    }
+  }, [patientQueueUuid, fetchQueueEntry]);
 
   const {
     handleSubmit,
@@ -279,7 +304,7 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
     selectedNextQueueLocation,
   ]);
 
-  if (queueEntry && Object.keys(queueEntry)?.length === 0) {
+  if (queueEntry === null || queueEntry === undefined) {
     return (
       <ModalHeader closeModal={closeWorkspace} title={t('patientNotInQueue', 'The patient is not in the queue')} />
     );
diff --git a/packages/esm-patient-queues-app/src/active-visits/patient-queues.resource.ts b/packages/esm-patient-queues-app/src/active-visits/patient-queues.resource.ts
index 76366865..370fd605 100644
--- a/packages/esm-patient-queues-app/src/active-visits/patient-queues.resource.ts
+++ b/packages/esm-patient-queues-app/src/active-visits/patient-queues.resource.ts
@@ -382,3 +382,15 @@ export function getLocationByUuid(uuid: string) {
     },
   });
 }
+
+export function getPatientQueueUuid(uuid: string) {
+  const abortController = new AbortController();
+  const url = `${restBaseUrl}/patientqueue/${uuid}?v=full`;
+  return openmrsFetch<PatientQueue>(url, {
+    method: 'GET',
+    signal: abortController.signal,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}
diff --git a/packages/esm-patient-queues-app/src/active-visits/pick-queue-patient-action-action.component.tsx b/packages/esm-patient-queues-app/src/active-visits/pick-queue-patient-action-action.component.tsx
index 95e3b35b..ef667b64 100644
--- a/packages/esm-patient-queues-app/src/active-visits/pick-queue-patient-action-action.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/pick-queue-patient-action-action.component.tsx
@@ -1,11 +1,12 @@
 import { Button } from '@carbon/react';
 import { Notification } from '@carbon/react/icons';
 import { showModal, showSnackbar, useSession } from '@openmrs/esm-framework';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PatientQueue } from '../types/patient-queues';
 import { usePatientQueuePages } from './patient-queues.resource';
 import { QueueEnumStatus, QueueStatus } from '../utils/utils';
+import { updateSelectedPatientQueueUuid } from '../helpers/helpers';
 
 interface PickPatientActionMenuProps {
   queueEntry: PatientQueue;
@@ -18,6 +19,15 @@ const PickQueuePatientActionButton: React.FC<PickPatientActionMenuProps> = ({ qu
   const sessionLocationId = sessionLocation?.uuid;
   const providerId = user?.systemId;
 
+    console.log('queueUuid--> 1', queueEntry?.uuid);
+
+
+  useEffect(() => {
+    if (queueEntry?.uuid) {
+      updateSelectedPatientQueueUuid(queueEntry?.uuid);
+    }
+  }, [queueEntry?.uuid]);
+
   const { items: pickedQueueItems } = usePatientQueuePages(sessionLocationId, QueueStatus.Picked);
 
   const hasPickedPatient = useMemo(() => {
diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx
index e6f526a7..11d08f10 100644
--- a/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx
@@ -213,13 +213,14 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
               <ViewQueuePatientActionMenu
                 to={`\${openmrsSpaBase}/patient/${patientqueue?.patient?.uuid}/chart`}
                 from={fromPage}
+                queueUuid={filteredPatientQueueEntries[index]?.uuid}
               />
             )}
 
             <NotesActionsMenu note={patientqueue} />
 
             {patientqueue?.status === 'PENDING' && isToggled && (
-              <MovetoNextServicePointReassignAction queueEntry={filteredPatientQueueEntries[index]} />
+              <MovetoNextServicePointReassignAction patientUuid={filteredPatientQueueEntries[index].uuid} />
             )}
           </div>
         ),
diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx
index 69defe3e..d6334d09 100644
--- a/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx
@@ -199,13 +199,14 @@ const ActiveTriageVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) =
               <ViewQueuePatientActionMenu
                 to={`\${openmrsSpaBase}/patient/${patientqueue?.patient?.uuid}/chart`}
                 from={fromPage}
+                queueUuid={filteredPatientQueueEntries[index].uuid}
               />
             )}
 
             <NotesActionsMenu note={patientqueue} />
 
             {patientqueue?.status === 'PENDING' && isToggled && (
-              <MovetoNextServicePointReassignAction queueEntry={filteredPatientQueueEntries[index]} />
+              <MovetoNextServicePointReassignAction patientUuid={filteredPatientQueueEntries[index].patient.uuid} />
             )}
           </div>
         ),
diff --git a/packages/esm-patient-queues-app/src/active-visits/view-queue-patient-action-menu.component.tsx b/packages/esm-patient-queues-app/src/active-visits/view-queue-patient-action-menu.component.tsx
index 22b115df..829bad04 100644
--- a/packages/esm-patient-queues-app/src/active-visits/view-queue-patient-action-menu.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/view-queue-patient-action-menu.component.tsx
@@ -1,33 +1,47 @@
-import React, { AnchorHTMLAttributes } from 'react';
+import React, { AnchorHTMLAttributes, useCallback, useEffect } from 'react';
 
 import { Button } from '@carbon/react';
 import { Dashboard } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
 import { navigate } from '@openmrs/esm-framework';
+import { updateSelectedPatientQueueUuid } from '../helpers/helpers';
 
 interface NameLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   to: string;
   from: string;
+  queueUuid: string;
 }
 
-const ViewQueuePatientActionMenu: React.FC<NameLinkProps> = ({ from, to }) => {
+const ViewQueuePatientActionMenu: React.FC<NameLinkProps> = ({ from, to, queueUuid }) => {
   const { t } = useTranslation();
 
-  const handleNameClick = (event: MouseEvent, to: string) => {
-    event.preventDefault();
-    navigate({ to });
-    localStorage.setItem('fromPage', from);
-  };
+  console.log('queueUuid-->2', queueUuid);
+
+  useEffect(() => {
+    if (queueUuid) {
+      updateSelectedPatientQueueUuid(queueUuid);
+    }
+  }, [queueUuid]);
+
+  const handleNameClick = useCallback(
+    (event: any) => {
+      event.preventDefault();
+      localStorage.setItem('fromPage', from);
+      navigate({ to });
+    },
+    [from, to],
+  );
 
   return (
     <div>
       <Button
         kind="ghost"
-        onClick={(e) => handleNameClick(e, to)}
+        onClick={handleNameClick}
         iconDescription={t('viewPatient', 'View Patient')}
         renderIcon={(props) => <Dashboard size={16} {...props} />}
       />
     </div>
   );
 };
+
 export default ViewQueuePatientActionMenu;
diff --git a/packages/esm-patient-queues-app/src/components/visit-form/visit-form.component.tsx b/packages/esm-patient-queues-app/src/components/visit-form/visit-form.component.tsx
index 845e1590..ee08b63a 100644
--- a/packages/esm-patient-queues-app/src/components/visit-form/visit-form.component.tsx
+++ b/packages/esm-patient-queues-app/src/components/visit-form/visit-form.component.tsx
@@ -76,6 +76,9 @@ const StartVisitForm: React.FC<VisitFormProps> = ({ patientUuid, closePanel, hea
   } = useForm<CreateQueueEntryFormData>({
     mode: 'all',
     resolver: zodResolver(createQueueEntrySchema),
+    defaultValues: {
+      status: QueueStatus.Pending,
+    },
   });
 
   useEffect(() => {
@@ -168,39 +171,58 @@ const StartVisitForm: React.FC<VisitFormProps> = ({ patientUuid, closePanel, hea
             }}
           />
         )}
-        <Form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+        <Form className={styles.form}>
           <div>
+            {Object.keys(errors).length > 0 && (
+              <div className={styles.errorMessage}>
+                <ul>
+                  {Object.entries(errors).map(([key, error]) => (
+                    <li key={key}>
+                      {key}: {error?.message}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+
             <Stack gap={8} className={styles.container}>
               <section className={styles.section}>
                 <div className={styles.sectionTitle}>{t('priority', 'Priority')}</div>
+
                 <Controller
                   name="priorityComment"
                   control={control}
                   render={({ field }) => (
-                    <ContentSwitcher
-                      {...field}
-                      selectedIndex={contentSwitcherIndex}
-                      className={styles.contentSwitcher}
-                      onChange={({ index }) => {
-                        field.onChange(index);
-                        setContentSwitcherIndex(index);
-                      }}
-                    >
-                      {priorityLabels.map((label, index) => (
-                        <Switch
-                          key={index}
-                          name={label.toLowerCase().replace(/\s+/g, '')}
-                          text={t(label.toLowerCase(), label)}
-                        />
-                      ))}
-                    </ContentSwitcher>
+                    <>
+                      <ContentSwitcher
+                        {...field}
+                        selectedIndex={contentSwitcherIndex}
+                        className={styles.contentSwitcher}
+                        onChange={({ index }) => {
+                          field.onChange(priorityLabels[index]);
+                          setContentSwitcherIndex(index);
+                        }}
+                      >
+                        {priorityLabels.map((label, index) => (
+                          <Switch
+                            key={index}
+                            name={label.toLowerCase().replace(/\s+/g, '')}
+                            text={t(label.toLowerCase(), label)}
+                          />
+                        ))}
+                      </ContentSwitcher>
+
+                      {errors.priorityComment && <div className={styles.error}>{errors.priorityComment.message}</div>}
+                    </>
                   )}
                 />
               </section>
+
               <section className={styles.section}>
                 {contentSwitcherIndex !== 0 && (
                   <>
                     <div className={styles.sectionTitle}>{t('priorityLevel', 'Priority Levels')}</div>
+
                     <ResponsiveWrapper isTablet={isTablet}>
                       <Controller
                         name="priority"
@@ -209,21 +231,18 @@ const StartVisitForm: React.FC<VisitFormProps> = ({ patientUuid, closePanel, hea
                           <Dropdown
                             {...field}
                             aria-label={t('prioritylevels', 'Priority Levels')}
-                            invalid={!!errors.priority}
-                            invalidText={errors.priority?.message}
                             id="priority-levels"
                             titleText=""
                             label="Choose a priority level"
                             items={priorityLevels ?? []}
                             initialSelectedItem={priorityLevels[0]}
-                            itemToString={(item) => (item ? String(item) : '')}
-                            onChange={(e) => {
-                              if (!e.selectedItem) {
-                                return;
-                              }
-
-                              field.onChange(e.selectedItem?.id);
+                            itemToString={(item) => (item ? String(item.name || item.label || item) : '')}
+                            onChange={({ selectedItem }) => {
+                              if (!selectedItem) return;
+                              field.onChange(selectedItem.id);
                             }}
+                            invalid={!!errors.priority}
+                            invalidText={errors.priority?.message}
                           />
                         )}
                       />
@@ -349,7 +368,13 @@ const StartVisitForm: React.FC<VisitFormProps> = ({ patientUuid, closePanel, hea
             <Button className={styles.button} kind="secondary" onClick={closePanel}>
               {t('discard', 'Discard')}
             </Button>
-            <Button className={styles.button} disabled={isSubmitting} kind="primary" type="submit">
+            <Button
+              className={styles.button}
+              disabled={isSubmitting}
+              kind="primary"
+              type="submit"
+              onClick={handleSubmit(onSubmit)}
+            >
               {isSubmitting ? (
                 <InlineLoading description={t('saving', 'Saving') + '...'} />
               ) : (
diff --git a/packages/esm-patient-queues-app/src/components/visit-form/visit-form.scss b/packages/esm-patient-queues-app/src/components/visit-form/visit-form.scss
index 17e770c9..663e6df6 100644
--- a/packages/esm-patient-queues-app/src/components/visit-form/visit-form.scss
+++ b/packages/esm-patient-queues-app/src/components/visit-form/visit-form.scss
@@ -72,6 +72,12 @@
   }
 }
 
+.errorMessage {
+  color: #d93025;
+  font-size: 0.875rem;
+  margin: 1rem;
+}
+
 .backButton {
   align-items: center;
   display: flex;
diff --git a/packages/esm-patient-queues-app/src/helpers/helpers.tsx b/packages/esm-patient-queues-app/src/helpers/helpers.tsx
index 88defd07..8a500834 100644
--- a/packages/esm-patient-queues-app/src/helpers/helpers.tsx
+++ b/packages/esm-patient-queues-app/src/helpers/helpers.tsx
@@ -2,213 +2,28 @@ import { getGlobalStore } from '@openmrs/esm-framework';
 import { useEffect, useState } from 'react';
 import { PatientQueue } from '../types/patient-queues';
 
-const initialServiceNameState = { serviceName: localStorage.getItem('queueServiceName') };
-const initialServiceUuidState = { serviceUuid: localStorage.getItem('queueServiceUuid') };
-const intialStatusNameState = { status: '' };
-const initialQueueLocationNameState = { queueLocationName: localStorage.getItem('queueLocationName') };
-const initialQueueLocationUuidState = { queueLocationUuid: localStorage.getItem('queueLocationUuid') };
-const initialSelectedQueueRoomTimestamp = { providerQueueRoomTimestamp: new Date() };
-const initialPermanentProviderQueueRoomState = {
-  isPermanentProviderQueueRoom: localStorage.getItem('isPermanentProviderQueueRoom'),
-};
-
-// queue room
-const initialQueueRoomLocationNameState = { queueRoomLocationName: localStorage.getItem('queueRoomLocationName') };
-const initialQueueRoomLocationUuidState = { queueRoomLocationUuid: localStorage.getItem('queueRoomLocationUuid') };
-
-export function getSelectedQueueRoomLocationName() {
-  return getGlobalStore<{ queueRoomLocationName: string }>('queueRoomLocationName', initialQueueRoomLocationNameState);
-}
+// selected queue patient uuid
+const initialPatientQueueUuidState = { patientQueueUuid: localStorage.getItem('patientQueueUuid') };
 
-export function getSelectedQueueRoomLocationUuid() {
-  return getGlobalStore<{ queueRoomLocationUuid: string }>('queueRoomLocationUuid', initialQueueRoomLocationUuidState);
+export function getSelectedPatientQueueUuid() {
+  return getGlobalStore<{ patientQueueUuid: string }>('patientQueueUuid', initialPatientQueueUuidState);
 }
 
-export const updateSelectedQueueRoomLocationName = (currentQueueRoomLocationName: string) => {
-  const store = getSelectedQueueRoomLocationName();
-  store.setState({ queueRoomLocationName: currentQueueRoomLocationName });
+export const updateSelectedPatientQueueUuid = (currentPatientQueueUuid: string) => {
+  const store = getSelectedPatientQueueUuid();
+  store.setState({ patientQueueUuid: currentPatientQueueUuid });
 };
 
-export const updateSelectedQueueRoomLocationUuid = (currentQueueRoomLocationUuid: string) => {
-  const store = getSelectedQueueRoomLocationUuid();
-  store.setState({ queueRoomLocationUuid: currentQueueRoomLocationUuid });
-};
-
-export const useSelectedQueueRoomLocationName = () => {
-  const [currentQueueRoomLocationName, setCurrentQueueRoomLocationName] = useState(
-    initialQueueRoomLocationNameState.queueRoomLocationName,
-  );
+export const useSelectedPatientQueueUuid = () => {
+  const [currentPatientQueueUuid, setCurrentPatientQueueUuid] = useState(initialPatientQueueUuidState.patientQueueUuid);
 
   useEffect(() => {
-    getSelectedQueueRoomLocationName().subscribe(({ queueRoomLocationName }) =>
-      setCurrentQueueRoomLocationName(queueRoomLocationName),
-    );
+    getSelectedPatientQueueUuid().subscribe(({ patientQueueUuid }) => setCurrentPatientQueueUuid(patientQueueUuid));
   }, []);
-  return currentQueueRoomLocationName;
+  return currentPatientQueueUuid;
 };
 
-export const useSelectedQueueRoomLocationUuid = () => {
-  const [currentQueueRoomLocationUuid, setCurrentQueueRoomLocationUuid] = useState(
-    initialQueueRoomLocationUuidState.queueRoomLocationUuid,
-  );
-
-  useEffect(() => {
-    getSelectedQueueRoomLocationUuid().subscribe(({ queueRoomLocationUuid }) =>
-      setCurrentQueueRoomLocationUuid(queueRoomLocationUuid),
-    );
-  }, []);
-  return currentQueueRoomLocationUuid;
-};
 
-//
-
-export function getSelectedServiceName() {
-  return getGlobalStore<{ serviceName: string }>('queueSelectedServiceName', initialServiceNameState);
-}
-
-export function getSelectedServiceUuid() {
-  return getGlobalStore<{ serviceUuid: string }>('queueSelectedServiceUuid', initialServiceUuidState);
-}
-
-export function getSelectedAppointmentStatus() {
-  return getGlobalStore<{ status: string }>('appointmentSelectedStatus', intialStatusNameState);
-}
-
-export function getSelectedQueueLocationName() {
-  return getGlobalStore<{ queueLocationName: string }>('queueLocationNameSelected', initialQueueLocationNameState);
-}
-
-export function getSelectedQueueLocationUuid() {
-  return getGlobalStore<{ queueLocationUuid: string }>('queueLocationUuidSelected', initialQueueLocationUuidState);
-}
-
-export function getPatientQueueWaitingList() {
-  return getGlobalStore<{ queue: PatientQueue[] }>('patientQueueWaitingList', { queue: [] });
-}
-
-export function getSelectedQueueRoomTimestamp() {
-  return getGlobalStore<{ providerQueueRoomTimestamp: Date }>(
-    'queueProviderRoomTimestamp',
-    initialSelectedQueueRoomTimestamp,
-  );
-}
-
-export function getIsPermanentProviderQueueRoom() {
-  return getGlobalStore<{ isPermanentProviderQueueRoom: string }>(
-    'isPermanentProviderQueueRoom',
-    initialPermanentProviderQueueRoomState,
-  );
-}
-
-export const updateSelectedServiceName = (currentServiceName: string) => {
-  const store = getSelectedServiceName();
-  store.setState({ serviceName: currentServiceName });
-};
-
-export const updateSelectedServiceUuid = (currentServiceUuid: string) => {
-  const store = getSelectedServiceUuid();
-  store.setState({ serviceUuid: currentServiceUuid });
-};
-
-export const updateSelectedAppointmentStatus = (currentAppointmentStatus: string) => {
-  const store = getSelectedAppointmentStatus();
-  store.setState({ status: currentAppointmentStatus });
-};
-
-export const updateSelectedQueueLocationName = (currentLocationName: string) => {
-  const store = getSelectedQueueLocationName();
-  store.setState({ queueLocationName: currentLocationName });
-};
-
-export const updateSelectedQueueLocationUuid = (currentLocationUuid: string) => {
-  const store = getSelectedQueueLocationUuid();
-  store.setState({ queueLocationUuid: currentLocationUuid });
-};
-
-export const updatedSelectedQueueRoomTimestamp = (currentProviderRoomTimestamp: Date) => {
-  const store = getSelectedQueueRoomTimestamp();
-  store.setState({ providerQueueRoomTimestamp: currentProviderRoomTimestamp });
-};
-
-export const updateIsPermanentProviderQueueRoom = (currentIsPermanentProviderQueueRoom) => {
-  const store = getIsPermanentProviderQueueRoom();
-  store.setState({ isPermanentProviderQueueRoom: currentIsPermanentProviderQueueRoom });
-};
-
-export const useSelectedServiceName = () => {
-  const [currentServiceName, setCurrentServiceName] = useState(initialServiceNameState.serviceName);
-
-  useEffect(() => {
-    getSelectedServiceName().subscribe(({ serviceName }) => setCurrentServiceName(serviceName));
-  }, []);
-  return currentServiceName;
-};
-
-export const useSelectedServiceUuid = () => {
-  const [currentServiceUuid, setCurrentServiceUuid] = useState(initialServiceUuidState.serviceUuid);
-
-  useEffect(() => {
-    getSelectedServiceUuid().subscribe(({ serviceUuid }) => setCurrentServiceUuid(serviceUuid));
-  }, []);
-  return currentServiceUuid;
-};
-
-export const useSelectedAppointmentStatus = () => {
-  const [currentAppointmentStatus, setCurrentAppointmentStatus] = useState(intialStatusNameState.status);
-
-  useEffect(() => {
-    getSelectedAppointmentStatus().subscribe(({ status }) => setCurrentAppointmentStatus(status));
-  }, []);
-  return currentAppointmentStatus;
-};
-
-export const useSelectedQueueLocationName = () => {
-  const [currentQueueLocationName, setCurrentQueueLocationName] = useState(
-    initialQueueLocationNameState.queueLocationName,
-  );
-
-  useEffect(() => {
-    getSelectedQueueLocationName().subscribe(({ queueLocationName }) => setCurrentQueueLocationName(queueLocationName));
-  }, []);
-  return currentQueueLocationName;
-};
-
-export const useSelectedQueueLocationUuid = () => {
-  const [currentQueueLocationUuid, setCurrentQueueLocationUuid] = useState(
-    initialQueueLocationUuidState.queueLocationUuid,
-  );
-
-  useEffect(() => {
-    getSelectedQueueLocationUuid().subscribe(({ queueLocationUuid }) => setCurrentQueueLocationUuid(queueLocationUuid));
-  }, []);
-  return currentQueueLocationUuid;
-};
-
-export const useSelectedProviderRoomTimestamp = () => {
-  const [currentProviderRoomTimestamp, setCurrentProviderRoomTimestamp] = useState(
-    initialSelectedQueueRoomTimestamp.providerQueueRoomTimestamp,
-  );
-
-  useEffect(() => {
-    getSelectedQueueRoomTimestamp().subscribe(({ providerQueueRoomTimestamp }) =>
-      setCurrentProviderRoomTimestamp(providerQueueRoomTimestamp),
-    );
-  }, []);
-  return currentProviderRoomTimestamp;
-};
-
-export const useIsPermanentProviderQueueRoom = () => {
-  const [currentIsPermanentProviderQueueRoom, setCurrentIsPermanentProviderQueueRoom] = useState(
-    initialPermanentProviderQueueRoomState.isPermanentProviderQueueRoom,
-  );
-
-  useEffect(() => {
-    getIsPermanentProviderQueueRoom().subscribe(({ isPermanentProviderQueueRoom }) =>
-      setCurrentIsPermanentProviderQueueRoom(isPermanentProviderQueueRoom),
-    );
-  }, []);
-  return currentIsPermanentProviderQueueRoom;
-};
 
 // facility
 const initialFacilityNameState = { facilityName: localStorage.getItem('facilityName') };
@@ -254,13 +69,7 @@ export const useSelectedFacilityIdentifier = () => {
   return currentFacilityIdentifier;
 };
 
-// Patient Queue stores
-export const updatePatientQueueWaitingList = (queue: PatientQueue[]) => {
-  const store = getPatientQueueWaitingList();
-  store.setState({ queue });
-};
-
-// patient
+// patient 
 const initialSelectedPatientUuid = { patientUuid: localStorage.getItem('patientUuid') };
 
 export function getSelectedPatientUuid() {
@@ -280,3 +89,13 @@ export const useSelectedPatientUuid = () => {
   }, []);
   return currentPatientUuid;
 };
+
+
+// Patient Queue stores
+export function getPatientQueueWaitingList() {
+  return getGlobalStore<{ queue: PatientQueue[] }>('patientQueueWaitingList', { queue: [] });
+}
+export const updatePatientQueueWaitingList = (queue: PatientQueue[]) => {
+  const store = getPatientQueueWaitingList();
+  store.setState({ queue });
+};
diff --git a/packages/esm-patient-queues-app/src/queue-triage-home.scss b/packages/esm-patient-queues-app/src/queue-triage-home.scss
index 97209523..4f95be4a 100644
--- a/packages/esm-patient-queues-app/src/queue-triage-home.scss
+++ b/packages/esm-patient-queues-app/src/queue-triage-home.scss
@@ -1,7 +1,7 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .cardContainer {
     background-color: $ui-02;
diff --git a/packages/esm-patient-queues-app/src/root.scss b/packages/esm-patient-queues-app/src/root.scss
index 86b13a69..df390efd 100644
--- a/packages/esm-patient-queues-app/src/root.scss
+++ b/packages/esm-patient-queues-app/src/root.scss
@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@use '@openmrs/esm-styleguide/src/vars' as *;
+@import '~@openmrs/esm-styleguide/src/vars';
 
 .productiveHeading01 {
   @include type.type-style('heading-compact-01');
@@ -12,4 +12,4 @@
 
 .bodyLong01 {
   @include type.type-style('body-01');
-}
\ No newline at end of file
+}

From 21e984c9dc3f46553e618e9a4e9e7ae5876992a4 Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Wed, 14 May 2025 21:25:20 +0300
Subject: [PATCH 07/17] fix field error display

---
 .../move-to-next-service-point.scss           |  26 +-
 .../move-to-next-service-point.workspace.tsx  | 518 +++++++-----------
 ...-queue-patient-action-action.component.tsx |   3 -
 ...ew-queue-patient-action-menu.component.tsx |   2 -
 .../src/helpers/helpers.tsx                   |  78 ---
 5 files changed, 228 insertions(+), 399 deletions(-)

diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.scss b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.scss
index c916313f..a85524a3 100644
--- a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.scss
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.scss
@@ -1,19 +1,29 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
-.radioButtonGroup {
+
+.container {
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
-    margin-top: spacing.$spacing-03;
-    min-height: spacing.$spacing-10;
+    justify-content: space-between;
+    height: 100%;
+}
+
+.button {
+    display: flex;
+    align-content: flex-start;
+    align-items: baseline;
+    min-width: 50%;
+}
+
+.buttonSet {
+    display: flex;
+    justify-content: space-between;
     width: 100%;
-    @include type.type-style('body-compact-01');
 }
 
-.radioButton {
-    padding: spacing.$spacing-02 spacing.$spacing-02;
-    margin: spacing.$spacing-03 0;
+.body {
+    padding: 1.2rem;
 }
 
 section {
diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
index 9e4b6983..32a03d9b 100644
--- a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
@@ -3,9 +3,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Button,
   ContentSwitcher,
-  Form,
-  ModalBody,
-  ModalFooter,
   ModalHeader,
   Select,
   SelectItem,
@@ -18,18 +15,14 @@ import {
 import {
   type DefaultWorkspaceProps,
   navigate,
-  parseDate,
   restBaseUrl,
   showNotification,
-  showSnackbar,
   showToast,
   useLayoutType,
   useSession,
-  useVisit,
 } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { useQueueRoomLocations } from '../hooks/useQueueRooms';
-import { ArrowUp } from '@carbon/react/icons';
 import styles from './move-to-next-service-point.scss';
 import { QueueStatus, extractErrorMessagesFromResponse, handleMutate } from '../utils/utils';
 import {
@@ -38,7 +31,6 @@ import {
   getCareProvider,
   getPatientQueueUuid,
   updateQueueEntry,
-  updateVisit,
   useProviders,
 } from './patient-queues.resource';
 import { Controller, useForm } from 'react-hook-form';
@@ -46,6 +38,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { CreateQueueEntryFormData, createQueueEntrySchema } from './patient-queue-validation-schema.resource';
 import { getSelectedPatientQueueUuid, useSelectedPatientQueueUuid } from '../helpers/helpers';
 import { PatientQueue } from '../types/patient-queues';
+import { ButtonSet } from '@carbon/react';
 
 type MoveToNextServicePointFormProps = DefaultWorkspaceProps & {};
 
@@ -56,7 +49,6 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
   const sessionUser = useSession();
   const patientQueueUuid = getSelectedPatientQueueUuid().getState();
 
-
   // States
   const [queueEntry, setQueueEntry] = useState<PatientQueue>();
   const [contentSwitcherIndex, setContentSwitcherIndex] = useState(1);
@@ -65,9 +57,9 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
   const [provider, setProvider] = useState('');
   const [selectedProvider, setSelectedProvider] = useState('');
   const [priorityComment, setPriorityComment] = useState('');
+  const [comment, setComment] = useState('');
   const [isLoading, setIsLoading] = useState(true);
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isEndingVisit, setIsEndingVisit] = useState(false);
 
   // Data Fetching Hooks
   const { queueRoomLocations, error: errorLoadingQueueRooms } = useQueueRoomLocations(
@@ -75,7 +67,6 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
   );
   const [selectedNextQueueLocation, setSelectedNextQueueLocation] = useState(queueRoomLocations[0]?.uuid);
   const { providers, error: errorLoadingProviders } = useProviders(selectedNextQueueLocation);
-  const { activeVisit } = useVisit(queueEntry?.uuid);
 
   // Memoized constants
   const priorityLabels = useMemo(() => ['Not Urgent', 'Urgent', 'Emergency'], []);
@@ -152,6 +143,10 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
   } = useForm<CreateQueueEntryFormData>({
     mode: 'all',
     resolver: zodResolver(createQueueEntrySchema),
+    defaultValues: {
+      priorityComment: priorityLabels[contentSwitcherIndex],
+      status: statusLabels[statusSwitcherIndex].status,
+    },
   });
 
   useEffect(() => {
@@ -162,56 +157,7 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
     setStatus(statusLabels[statusSwitcherIndex].status);
   }, [statusSwitcherIndex, statusLabels]);
 
-  // endVisit
-  const endCurrentVisit = async () => {
-    setIsEndingVisit(true);
-    const endVisitPayload = {
-      location: activeVisit.location.uuid,
-      startDatetime: parseDate(activeVisit.startDatetime),
-      visitType: activeVisit.visitType.uuid,
-      stopDatetime: new Date(),
-    };
-
-    const response = await updateVisit(activeVisit.uuid, endVisitPayload);
-
-    if (response.status === 200) {
-      try {
-        const response = await updateQueueEntry(
-          QueueStatus.Completed,
-          provider,
-          queueEntry?.uuid,
-          contentSwitcherIndex,
-          priorityComment,
-          'comment',
-        );
-
-        if (response.status === 200) {
-          showSnackbar({
-            isLowContrast: true,
-            kind: 'success',
-            subtitle: t('visitEndSuccessfully', 'Visit ended successfully'),
-            title: t('visitEnded', 'Visit ended'),
-          });
-
-          navigate({ to: `\${openmrsSpaBase}/home` });
-          closeWorkspace();
-          setIsEndingVisit(false);
-          handleMutate(`${restBaseUrl}/patientqueue`);
-        }
-      } catch (error) {
-        setIsEndingVisit(false);
-        showNotification({
-          title: t('queueEntryUpdateFailed', 'Error ending visit'),
-          kind: 'error',
-          critical: true,
-          description: error?.message,
-        });
-        handleMutate(`${restBaseUrl}/patientqueue`);
-      }
-    }
-  };
-
-  const onSubmit = useCallback(async () => {
+  const handleSave = useCallback(async () => {
     try {
       setIsSubmitting(true);
       if (status === QueueStatus.Pending) {
@@ -235,7 +181,7 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
           queueEntry?.uuid,
           contentSwitcherIndex,
           priorityComment,
-          'comment',
+          comment,
         );
 
         // Add new queue entry
@@ -247,7 +193,7 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
           status: QueueStatus.Pending,
           priority: contentSwitcherIndex,
           priorityComment: priorityComment,
-          comment: 'NA',
+          comment: comment,
           queueRoom: selectedNextQueueLocation,
         };
 
@@ -261,7 +207,7 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
             queueEntry?.uuid,
             contentSwitcherIndex,
             priorityComment,
-            'comment',
+            comment,
           );
 
           showToast({
@@ -304,263 +250,219 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
     selectedNextQueueLocation,
   ]);
 
-  if (queueEntry === null || queueEntry === undefined) {
-    return (
-      <ModalHeader closeModal={closeWorkspace} title={t('patientNotInQueue', 'The patient is not in the queue')} />
-    );
-  }
-
-  if (queueEntry && Object.keys(queueEntry)?.length > 0) {
-    return (
-      <>
-        <div>
-          {isLoading && <InlineLoading description={'Fetching Provider..'} />}
-          <Form onSubmit={handleSubmit(onSubmit)}>
-            <ModalHeader closeModal={closeWorkspace} />
-            <ModalBody>
-              <div className={styles.modalBody}>
-                {/* <div style={{ display: 'flex', alignItems: 'center' }}>
-                  <h4 className={styles.section}> Currently Picked :</h4>
-                  <div style={{ margin: '10px' }}>
-                    <ArrowDown size={20} />
-                  </div>
-                </div>
-                {currentEntry?.patient?.display ? (
-                  <h5 className={styles.section}>
-                    {currentEntry?.patient?.display} &nbsp; · &nbsp;{currentEntry?.patient?.person?.gender} &nbsp; ·
-                    &nbsp;
-                    {currentEntry?.patient?.person?.age}
-                    &nbsp;
-                    {t('years', 'Years')}
-                  </h5>
-                ) : (
-                  '--'
-                )}
+  return (
+    <div className={styles.container}>
+      {isLoading && <InlineLoading description={'Fetching Provider..'} />}
+
+      <div className={styles.body}>
+        {Object.keys(errors).length > 0 && (
+          <div className={styles.errorMessage}>
+            <ul>
+              {Object.entries(errors).map(([key, error]) => (
+                <li key={key}>
+                  {key}: {error?.message}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+        <section className={styles.section}>
+          <div className={styles.sectionTitle}>{t('priority', 'Priority')}</div>
+          <Controller
+            name="priorityComment"
+            control={control}
+            render={({ field }) => (
+              <>
+                <ContentSwitcher
+                  {...field}
+                  selectedIndex={contentSwitcherIndex}
+                  className={styles.contentSwitcher}
+                  onChange={({ index }) => {
+                    field.onChange(priorityLabels[index]);
+                    setContentSwitcherIndex(index);
+                  }}
+                >
+                  {priorityLabels.map((label, index) => (
+                    <Switch
+                      key={index}
+                      name={label.toLowerCase().replace(/\s+/g, '')}
+                      text={t(label.toLowerCase(), label)}
+                    />
+                  ))}
+                </ContentSwitcher>
+                {errors.priorityComment && <p className={styles.errorMessage}>{errors.priorityComment.message}</p>}
+              </>
+            )}
+          />
+        </section>
+
+        <section className={styles.section}>
+          <div className={styles.sectionTitle}>{t('status', 'Status')}</div>
+          <Controller
+            name="status"
+            control={control}
+            render={({ field }) => (
+              <>
+                <ContentSwitcher
+                  {...field}
+                  selectedIndex={statusSwitcherIndex}
+                  className={styles.contentSwitcher}
+                  onChange={({ index }) => {
+                    field.onChange(statusLabels[index].status);
+                    setStatusSwitcherIndex(index);
+                  }}
+                >
+                  {statusLabels.map((status, index) => (
+                    <Switch
+                      key={index}
+                      name={status.label.toLowerCase().replace(/\s+/g, '')}
+                      text={t(status.label.toLowerCase(), status.label)}
+                    />
+                  ))}
+                </ContentSwitcher>
+                {errors.status && <p className={styles.errorMessage}>{errors.status.message}</p>}
+              </>
+            )}
+          />
+        </section>
+
+        {status === QueueStatus.Completed && (
+          <>
+            <section className={styles.section}>
+              <div className={styles.sectionTitle}>{t('nextServicePoint', 'Next service point')}</div>
+              <ResponsiveWrapper isTablet={isTablet}>
+                <Controller
+                  name="locationTo"
+                  control={control}
+                  defaultValue={queueRoomLocations[0]?.uuid || ''}
+                  render={({ field }) => (
+                    <Select
+                      {...field}
+                      id="nextQueueLocation"
+                      name="nextQueueLocation"
+                      labelText=""
+                      disabled={errorLoadingQueueRooms}
+                      invalid={!!errors.locationTo}
+                      invalidText={errors.locationTo?.message}
+                      value={field.value}
+                      onChange={(e) => {
+                        const selectedValue = e.target.value;
+                        field.onChange(selectedValue);
+                        setSelectedNextQueueLocation(selectedValue);
+                      }}
+                    >
+                      {!field.value && (
+                        <SelectItem value="" text={t('selectNextServicePoint', 'Choose next service point')} />
+                      )}
 
-                <br></br> */}
-                <hr />
-                <br></br>
-                <div style={{ display: 'flex', alignItems: 'center' }}>
-                  <h4 className={styles.section}> Queue to next service area :</h4>
-                  <div style={{ margin: '10px' }}>
-                    <ArrowUp size={20} />
-                  </div>
-                </div>
-                {queueEntry?.patient?.display ? (
-                  <h5 className={styles.section}>
-                    {queueEntry?.patient?.display} &nbsp; · &nbsp;{queueEntry?.patient?.person?.gender} &nbsp; · &nbsp;
-                    {queueEntry?.patient?.person?.age}
-                    &nbsp;
-                    {t('years', 'Years')}
-                  </h5>
-                ) : (
-                  '--'
+                      {queueRoomLocations.map(({ uuid, display }) => (
+                        <SelectItem key={uuid} value={uuid} text={display} />
+                      ))}
+                    </Select>
+                  )}
+                />
+
+                {errorLoadingQueueRooms && (
+                  <InlineNotification
+                    className={styles.errorNotification}
+                    kind="error"
+                    title={t('errorFetchingQueueRooms', 'Error fetching queue rooms')}
+                    subtitle={errorLoadingQueueRooms}
+                    onClick={() => {}}
+                  />
                 )}
-              </div>
-              <section className={styles.section}>
-                <div className={styles.sectionTitle}>{t('priority', 'Priority')}</div>
+              </ResponsiveWrapper>
+            </section>
+            <section className={styles.section}>
+              <div className={styles.sectionTitle}>{t('selectAProvider', 'Select a provider')}</div>
+              <ResponsiveWrapper isTablet={isTablet}>
                 <Controller
-                  name="priorityComment"
+                  name="provider"
                   control={control}
                   render={({ field }) => (
-                    <>
-                      <ContentSwitcher
-                        {...field}
-                        selectedIndex={contentSwitcherIndex}
-                        className={styles.contentSwitcher}
-                        onChange={({ index }) => {
-                          field.onChange(priorityLabels[index]);
-                          setContentSwitcherIndex(index);
-                        }}
-                      >
-                        {priorityLabels.map((label, index) => (
-                          <Switch
-                            key={index}
-                            name={label.toLowerCase().replace(/\s+/g, '')}
-                            text={t(label.toLowerCase(), label)}
-                          />
-                        ))}
-                      </ContentSwitcher>
-                      {errors.priorityComment && (
-                        <p className={styles.errorMessage}>{errors.priorityComment.message}</p>
-                      )}
-                    </>
+                    <Select
+                      {...field}
+                      labelText={''}
+                      id="providers-list"
+                      name="providers-list"
+                      disabled={errorLoadingProviders}
+                      invalid={!!errors.provider}
+                      invalidText={errors.provider?.message}
+                      value={field.value}
+                      onChange={(event) => {
+                        field.onChange(event.target.value);
+                        setSelectedProvider(event.target.value);
+                      }}
+                    >
+                      {!field.value ? <SelectItem text={t('selectProvider', 'choose a provider')} value="" /> : null}
+                      {providers.map((provider) => (
+                        <SelectItem key={provider.uuid} text={provider.display} value={provider.uuid}>
+                          {provider.display}
+                        </SelectItem>
+                      ))}
+                    </Select>
                   )}
                 />
-              </section>
 
-              <section className={styles.section}>
-                <div className={styles.sectionTitle}>{t('status', 'Status')}</div>
+                {errorLoadingProviders && (
+                  <InlineNotification
+                    className={styles.errorNotification}
+                    kind="error"
+                    title={t('errorFetchingQueueRooms', 'Error fetching providers')}
+                    subtitle={errorLoadingProviders}
+                    onClick={() => {}}
+                  />
+                )}
+              </ResponsiveWrapper>
+            </section>
+            <section className={styles.section}>
+              <div className={styles.sectionTitle}>{t('notes', 'Notes')}</div>
+              <ResponsiveWrapper isTablet={isTablet}>
                 <Controller
-                  name="status"
+                  name="comment"
                   control={control}
                   render={({ field }) => (
-                    <>
-                      <ContentSwitcher
-                        {...field}
-                        selectedIndex={statusSwitcherIndex}
-                        className={styles.contentSwitcher}
-                        onChange={({ index }) => {
-                          field.onChange(statusLabels[index].status);
-                          setStatusSwitcherIndex(index);
-                        }}
-                      >
-                        {statusLabels.map((status, index) => (
-                          <Switch
-                            key={index}
-                            name={status.label.toLowerCase().replace(/\s+/g, '')}
-                            text={t(status.label.toLowerCase(), status.label)}
-                          />
-                        ))}
-                      </ContentSwitcher>
-                      {errors.status && <p className={styles.errorMessage}>{errors.status.message}</p>}
-                    </>
+                    <TextArea
+                      {...field}
+                      aria-label={t('comment', 'Comment')}
+                      id="comment"
+                      labelText=""
+                      invalid={!!errors.comment}
+                      invalidText={errors.comment?.message}
+                      maxCount={500}
+                      enableCounter
+                      value={field.value}
+                      onChange={(e) => {
+                        field.onChange(e.target.value);
+                        setComment(e.target.value);
+                      }}
+                    />
                   )}
                 />
-              </section>
-
-              {status === QueueStatus.Completed && (
-                <>
-                  <section className={styles.section}>
-                    <div className={styles.sectionTitle}>{t('nextServicePoint', 'Next service point')}</div>
-                    <ResponsiveWrapper isTablet={isTablet}>
-                      <Controller
-                        name="locationTo"
-                        control={control}
-                        defaultValue={queueRoomLocations[0]?.uuid || ''}
-                        render={({ field }) => (
-                          <Select
-                            {...field}
-                            id="nextQueueLocation"
-                            name="nextQueueLocation"
-                            labelText=""
-                            disabled={errorLoadingQueueRooms}
-                            invalid={!!errors.locationTo}
-                            invalidText={errors.locationTo?.message}
-                            value={field.value}
-                            onChange={(e) => {
-                              const selectedValue = e.target.value;
-                              field.onChange(selectedValue);
-                              setSelectedNextQueueLocation(selectedValue);
-                            }}
-                          >
-                            {!field.value && (
-                              <SelectItem value="" text={t('selectNextServicePoint', 'Choose next service point')} />
-                            )}
-
-                            {queueRoomLocations.map(({ uuid, display }) => (
-                              <SelectItem key={uuid} value={uuid} text={display} />
-                            ))}
-                          </Select>
-                        )}
-                      />
-
-                      {errorLoadingQueueRooms && (
-                        <InlineNotification
-                          className={styles.errorNotification}
-                          kind="error"
-                          title={t('errorFetchingQueueRooms', 'Error fetching queue rooms')}
-                          subtitle={errorLoadingQueueRooms}
-                          onClick={() => {}}
-                        />
-                      )}
-                    </ResponsiveWrapper>
-                  </section>
-                  <section className={styles.section}>
-                    <div className={styles.sectionTitle}>{t('selectAProvider', 'Select a provider')}</div>
-                    <ResponsiveWrapper isTablet={isTablet}>
-                      <Controller
-                        name="provider"
-                        control={control}
-                        render={({ field }) => (
-                          <Select
-                            {...field}
-                            labelText={''}
-                            id="providers-list"
-                            name="providers-list"
-                            disabled={errorLoadingProviders}
-                            invalid={!!errors.provider}
-                            invalidText={errors.provider?.message}
-                            value={field.value}
-                            onChange={(event) => {
-                              field.onChange(event.target.value);
-                              setSelectedProvider(event.target.value);
-                            }}
-                          >
-                            {!field.value ? (
-                              <SelectItem text={t('selectProvider', 'choose a provider')} value="" />
-                            ) : null}
-                            {providers.map((provider) => (
-                              <SelectItem key={provider.uuid} text={provider.display} value={provider.uuid}>
-                                {provider.display}
-                              </SelectItem>
-                            ))}
-                          </Select>
-                        )}
-                      />
-
-                      {errorLoadingProviders && (
-                        <InlineNotification
-                          className={styles.errorNotification}
-                          kind="error"
-                          title={t('errorFetchingQueueRooms', 'Error fetching providers')}
-                          subtitle={errorLoadingProviders}
-                          onClick={() => {}}
-                        />
-                      )}
-                    </ResponsiveWrapper>
-                  </section>
-                  <section className={styles.section}>
-                    <div className={styles.sectionTitle}>{t('notes', 'Notes')}</div>
-                    <ResponsiveWrapper isTablet={isTablet}>
-                      <Controller
-                        name="comment"
-                        control={control}
-                        render={({ field }) => (
-                          <TextArea
-                            {...field}
-                            aria-label={t('comment', 'Comment')}
-                            invalid={!!errors.comment}
-                            invalidText={errors.comment?.message}
-                            labelText=""
-                            id="comment"
-                            name="comment"
-                            maxCount={500}
-                            enableCounter
-                            value={field.value}
-                          />
-                        )}
-                      />
-                    </ResponsiveWrapper>
-                  </section>
-                </>
-              )}
-            </ModalBody>
-            <ModalFooter>
-              <Button kind="secondary" onClick={closeWorkspace}>
-                {t('cancel', 'Cancel')}
-              </Button>
-              {isEndingVisit ? (
-                <InlineLoading description={'Ending...'} />
-              ) : (
-                <Button kind="danger" onClick={endCurrentVisit}>
-                  {t('endVisit', 'End Visit')}
-                </Button>
-              )}
-
-              {isSubmitting ? (
-                <InlineLoading description={'Submitting...'} />
-              ) : (
-                <Button disabled={!provider || isLoading || isSubmitting} type="submit">
-                  {status === QueueStatus.Pending ? 'Save' : 'Move to the next queue room'}
-                </Button>
-              )}
-            </ModalFooter>
-          </Form>
-        </div>
-      </>
-    );
-  }
+              </ResponsiveWrapper>
+            </section>
+          </>
+        )}
+      </div>
+      <ButtonSet className={styles.buttonSet}>
+        <Button kind="secondary" onClick={closeWorkspace} className={styles.button}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        {isSubmitting ? (
+          <InlineLoading description={'Submitting...'} />
+        ) : (
+          <Button
+            disabled={!provider || isLoading || isSubmitting}
+            type="submit"
+            onClick={handleSubmit(handleSave)}
+            className={styles.button}
+          >
+            {status === QueueStatus.Pending ? 'Save' : 'Move to the next queue room'}
+          </Button>
+        )}
+      </ButtonSet>
+    </div>
+  );
 };
 
 function ResponsiveWrapper({ children, isTablet }) {
diff --git a/packages/esm-patient-queues-app/src/active-visits/pick-queue-patient-action-action.component.tsx b/packages/esm-patient-queues-app/src/active-visits/pick-queue-patient-action-action.component.tsx
index ef667b64..5a89e742 100644
--- a/packages/esm-patient-queues-app/src/active-visits/pick-queue-patient-action-action.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/pick-queue-patient-action-action.component.tsx
@@ -19,9 +19,6 @@ const PickQueuePatientActionButton: React.FC<PickPatientActionMenuProps> = ({ qu
   const sessionLocationId = sessionLocation?.uuid;
   const providerId = user?.systemId;
 
-    console.log('queueUuid--> 1', queueEntry?.uuid);
-
-
   useEffect(() => {
     if (queueEntry?.uuid) {
       updateSelectedPatientQueueUuid(queueEntry?.uuid);
diff --git a/packages/esm-patient-queues-app/src/active-visits/view-queue-patient-action-menu.component.tsx b/packages/esm-patient-queues-app/src/active-visits/view-queue-patient-action-menu.component.tsx
index 829bad04..03c905d7 100644
--- a/packages/esm-patient-queues-app/src/active-visits/view-queue-patient-action-menu.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/view-queue-patient-action-menu.component.tsx
@@ -15,8 +15,6 @@ interface NameLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 const ViewQueuePatientActionMenu: React.FC<NameLinkProps> = ({ from, to, queueUuid }) => {
   const { t } = useTranslation();
 
-  console.log('queueUuid-->2', queueUuid);
-
   useEffect(() => {
     if (queueUuid) {
       updateSelectedPatientQueueUuid(queueUuid);
diff --git a/packages/esm-patient-queues-app/src/helpers/helpers.tsx b/packages/esm-patient-queues-app/src/helpers/helpers.tsx
index 8a500834..788504f8 100644
--- a/packages/esm-patient-queues-app/src/helpers/helpers.tsx
+++ b/packages/esm-patient-queues-app/src/helpers/helpers.tsx
@@ -1,5 +1,4 @@
 import { getGlobalStore } from '@openmrs/esm-framework';
-import { useEffect, useState } from 'react';
 import { PatientQueue } from '../types/patient-queues';
 
 // selected queue patient uuid
@@ -14,83 +13,6 @@ export const updateSelectedPatientQueueUuid = (currentPatientQueueUuid: string)
   store.setState({ patientQueueUuid: currentPatientQueueUuid });
 };
 
-export const useSelectedPatientQueueUuid = () => {
-  const [currentPatientQueueUuid, setCurrentPatientQueueUuid] = useState(initialPatientQueueUuidState.patientQueueUuid);
-
-  useEffect(() => {
-    getSelectedPatientQueueUuid().subscribe(({ patientQueueUuid }) => setCurrentPatientQueueUuid(patientQueueUuid));
-  }, []);
-  return currentPatientQueueUuid;
-};
-
-
-
-// facility
-const initialFacilityNameState = { facilityName: localStorage.getItem('facilityName') };
-const initialFacilityIdentifierState = { facilityIdentifier: localStorage.getItem('facilityIdentifier') };
-
-export function getSelectedFacilityName() {
-  return getGlobalStore<{ facilityName: string }>('facilityName', initialFacilityNameState);
-}
-
-export function getSelectedFacilityIdentifier() {
-  return getGlobalStore<{ facilityIdentifier: string }>('facilityIdentifier', initialFacilityIdentifierState);
-}
-
-export const updateSelectedFacilityName = (currentFacilityName: string) => {
-  const store = getSelectedFacilityName();
-  store.setState({ facilityName: currentFacilityName });
-};
-
-export const updateSelectedFacilityIdentifier = (currentFacilityIdentifier: string) => {
-  const store = getSelectedFacilityIdentifier();
-  store.setState({ facilityIdentifier: currentFacilityIdentifier });
-};
-
-export const useSelectedFacilityName = () => {
-  const [currentFacilityName, setCurrentFacilityName] = useState(initialFacilityNameState.facilityName);
-
-  useEffect(() => {
-    getSelectedFacilityName().subscribe(({ facilityName }) => setCurrentFacilityName(facilityName));
-  }, []);
-  return currentFacilityName;
-};
-
-export const useSelectedFacilityIdentifier = () => {
-  const [currentFacilityIdentifier, setCurrentFacilityIdentifier] = useState(
-    initialFacilityIdentifierState.facilityIdentifier,
-  );
-
-  useEffect(() => {
-    getSelectedFacilityIdentifier().subscribe(({ facilityIdentifier }) =>
-      setCurrentFacilityIdentifier(facilityIdentifier),
-    );
-  }, []);
-  return currentFacilityIdentifier;
-};
-
-// patient 
-const initialSelectedPatientUuid = { patientUuid: localStorage.getItem('patientUuid') };
-
-export function getSelectedPatientUuid() {
-  return getGlobalStore<{ patientUuid: string }>('patientUuid', initialSelectedPatientUuid);
-}
-
-export const updateSelectedPatientUuid = (currentPatientUuid: string) => {
-  const store = getSelectedPatientUuid();
-  store.setState({ patientUuid: currentPatientUuid });
-};
-
-export const useSelectedPatientUuid = () => {
-  const [currentPatientUuid, setCurrentPatientUuid] = useState(initialSelectedPatientUuid.patientUuid);
-
-  useEffect(() => {
-    getSelectedPatientUuid().subscribe(({ patientUuid }) => setCurrentPatientUuid(patientUuid));
-  }, []);
-  return currentPatientUuid;
-};
-
-
 // Patient Queue stores
 export function getPatientQueueWaitingList() {
   return getGlobalStore<{ queue: PatientQueue[] }>('patientQueueWaitingList', { queue: [] });

From 4900fabb1a5f69d6a757a2564324580b11502bcb Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Wed, 14 May 2025 21:30:07 +0300
Subject: [PATCH 08/17] chore

---
 .../move-to-next-service-point-patient-action.component.tsx  | 4 +---
 .../active-visits/move-to-next-service-point.workspace.tsx   | 5 +++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.component.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.component.tsx
index 1aa61a82..8b49ec66 100644
--- a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point-patient-action.component.tsx
@@ -2,9 +2,7 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { launchWorkspace } from '@openmrs/esm-framework';
 
-interface PatientMoveToNextServicePointPatientActionProps {}
-
-const MovetoNextServicePointPatientActionButton: React.FC<PatientMoveToNextServicePointPatientActionProps> = ({}) => {
+const MovetoNextServicePointPatientActionButton: React.FC = () => {
   const { t } = useTranslation();
   const handleClick = useCallback(() => {
     launchWorkspace('move-to-next-service-point-form-workspace', {
diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
index 32a03d9b..5b9b6e9b 100644
--- a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
@@ -11,6 +11,7 @@ import {
   TextArea,
   Layer,
   InlineNotification,
+  ButtonSet,
 } from '@carbon/react';
 import {
   type DefaultWorkspaceProps,
@@ -36,9 +37,8 @@ import {
 import { Controller, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { CreateQueueEntryFormData, createQueueEntrySchema } from './patient-queue-validation-schema.resource';
-import { getSelectedPatientQueueUuid, useSelectedPatientQueueUuid } from '../helpers/helpers';
+import { getSelectedPatientQueueUuid } from '../helpers/helpers';
 import { PatientQueue } from '../types/patient-queues';
-import { ButtonSet } from '@carbon/react';
 
 type MoveToNextServicePointFormProps = DefaultWorkspaceProps & {};
 
@@ -248,6 +248,7 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
     provider,
     sessionUser?.sessionLocation?.uuid,
     selectedNextQueueLocation,
+    comment,
   ]);
 
   return (

From a8476ade36907f1b1c38ea27debba9bc329b083a Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Thu, 15 May 2025 08:30:53 +0300
Subject: [PATCH 09/17] chore

---
 .../move-to-next-service-point.scss           |  10 +-
 .../queue-clinical-table.component.tsx        |   2 +-
 .../queue-triage-table.component.tsx          |   2 +-
 .../visit-form/visit-form.component.tsx       | 342 +++++++++---------
 .../src/components/visit-form/visit-form.scss |  89 +----
 .../esm-patient-queues-app/src/routes.json    |  10 +
 6 files changed, 198 insertions(+), 257 deletions(-)

diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.scss b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.scss
index a85524a3..73e3da96 100644
--- a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.scss
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.scss
@@ -23,7 +23,7 @@
 }
 
 .body {
-    padding: 1.2rem;
+    padding: 1rem;
 }
 
 section {
@@ -36,14 +36,6 @@ section {
     margin-bottom: spacing.$spacing-04;
 }
 
-.modalBody {
-    padding-bottom: spacing.$spacing-05;
-}
-
-:global(.cds--modal-container) {
-    overflow: auto;
-}
-
 .errorMessage {
     color: #d93025;
     font-size: 0.875rem;
diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx
index 11d08f10..775eec96 100644
--- a/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx
@@ -217,7 +217,7 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
               />
             )}
 
-            <NotesActionsMenu note={patientqueue} />
+            {/* <NotesActionsMenu note={patientqueue} /> */}
 
             {patientqueue?.status === 'PENDING' && isToggled && (
               <MovetoNextServicePointReassignAction patientUuid={filteredPatientQueueEntries[index].uuid} />
diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx
index d6334d09..244b0e7a 100644
--- a/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx
@@ -203,7 +203,7 @@ const ActiveTriageVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) =
               />
             )}
 
-            <NotesActionsMenu note={patientqueue} />
+            {/* <NotesActionsMenu note={patientqueue} /> */}
 
             {patientqueue?.status === 'PENDING' && isToggled && (
               <MovetoNextServicePointReassignAction patientUuid={filteredPatientQueueEntries[index].patient.uuid} />
diff --git a/packages/esm-patient-queues-app/src/components/visit-form/visit-form.component.tsx b/packages/esm-patient-queues-app/src/components/visit-form/visit-form.component.tsx
index ee08b63a..1822c674 100644
--- a/packages/esm-patient-queues-app/src/components/visit-form/visit-form.component.tsx
+++ b/packages/esm-patient-queues-app/src/components/visit-form/visit-form.component.tsx
@@ -159,8 +159,8 @@ const StartVisitForm: React.FC<VisitFormProps> = ({ patientUuid, closePanel, hea
   );
 
   return (
-    <div>
-      <Overlay closePanel={closePanel} header={header}>
+    <Overlay closePanel={closePanel} header={header}>
+      <div>
         {patient && (
           <ExtensionSlot
             name="patient-header-slot"
@@ -171,8 +171,8 @@ const StartVisitForm: React.FC<VisitFormProps> = ({ patientUuid, closePanel, hea
             }}
           />
         )}
-        <Form className={styles.form}>
-          <div>
+        <div className={styles.container}>
+          <div className={styles.body}>
             {Object.keys(errors).length > 0 && (
               <div className={styles.errorMessage}>
                 <ul>
@@ -185,186 +185,184 @@ const StartVisitForm: React.FC<VisitFormProps> = ({ patientUuid, closePanel, hea
               </div>
             )}
 
-            <Stack gap={8} className={styles.container}>
-              <section className={styles.section}>
-                <div className={styles.sectionTitle}>{t('priority', 'Priority')}</div>
+            <section className={styles.section}>
+              <div className={styles.sectionTitle}>{t('priority', 'Priority')}</div>
 
-                <Controller
-                  name="priorityComment"
-                  control={control}
-                  render={({ field }) => (
-                    <>
-                      <ContentSwitcher
-                        {...field}
-                        selectedIndex={contentSwitcherIndex}
-                        className={styles.contentSwitcher}
-                        onChange={({ index }) => {
-                          field.onChange(priorityLabels[index]);
-                          setContentSwitcherIndex(index);
-                        }}
-                      >
-                        {priorityLabels.map((label, index) => (
-                          <Switch
-                            key={index}
-                            name={label.toLowerCase().replace(/\s+/g, '')}
-                            text={t(label.toLowerCase(), label)}
-                          />
-                        ))}
-                      </ContentSwitcher>
-
-                      {errors.priorityComment && <div className={styles.error}>{errors.priorityComment.message}</div>}
-                    </>
-                  )}
-                />
-              </section>
-
-              <section className={styles.section}>
-                {contentSwitcherIndex !== 0 && (
+              <Controller
+                name="priorityComment"
+                control={control}
+                render={({ field }) => (
                   <>
-                    <div className={styles.sectionTitle}>{t('priorityLevel', 'Priority Levels')}</div>
+                    <ContentSwitcher
+                      {...field}
+                      selectedIndex={contentSwitcherIndex}
+                      className={styles.contentSwitcher}
+                      onChange={({ index }) => {
+                        field.onChange(priorityLabels[index]);
+                        setContentSwitcherIndex(index);
+                      }}
+                    >
+                      {priorityLabels.map((label, index) => (
+                        <Switch
+                          key={index}
+                          name={label.toLowerCase().replace(/\s+/g, '')}
+                          text={t(label.toLowerCase(), label)}
+                        />
+                      ))}
+                    </ContentSwitcher>
 
-                    <ResponsiveWrapper isTablet={isTablet}>
-                      <Controller
-                        name="priority"
-                        control={control}
-                        render={({ field }) => (
-                          <Dropdown
-                            {...field}
-                            aria-label={t('prioritylevels', 'Priority Levels')}
-                            id="priority-levels"
-                            titleText=""
-                            label="Choose a priority level"
-                            items={priorityLevels ?? []}
-                            initialSelectedItem={priorityLevels[0]}
-                            itemToString={(item) => (item ? String(item.name || item.label || item) : '')}
-                            onChange={({ selectedItem }) => {
-                              if (!selectedItem) return;
-                              field.onChange(selectedItem.id);
-                            }}
-                            invalid={!!errors.priority}
-                            invalidText={errors.priority?.message}
-                          />
-                        )}
-                      />
-                    </ResponsiveWrapper>
+                    {errors.priorityComment && <div className={styles.error}>{errors.priorityComment.message}</div>}
                   </>
                 )}
-              </section>
+              />
+            </section>
 
-              <section className={styles.section}>
-                <div className={styles.sectionTitle}>{t('nextServicePoint', 'Next service point')}</div>
-                <ResponsiveWrapper isTablet={isTablet}>
-                  <Controller
-                    name="locationTo"
-                    control={control}
-                    defaultValue={queueRoomLocations.length > 0 ? queueRoomLocations[0].uuid : ''}
-                    render={({ field }) => (
-                      <Select
-                        {...field}
-                        labelText={''}
-                        id="nextQueueLocation"
-                        name="nextQueueLocation"
-                        disabled={errorLoadingQueueRooms}
-                        invalid={!!errors.locationTo}
-                        invalidText={errors.locationTo?.message}
-                        value={field.value}
-                        onChange={(event) => {
-                          field.onChange(event.target.value);
-                          setSelectedNextQueueLocation(event.target.value);
-                        }}
-                      >
-                        {!field.value ? (
-                          <SelectItem text={t('selectNextServicePoint', 'Choose next service point')} value="" />
-                        ) : null}
-                        {queueRoomLocations.map((location) => (
-                          <SelectItem key={location.uuid} text={location.display} value={location.uuid}>
-                            {location.display}
-                          </SelectItem>
-                        ))}
-                      </Select>
-                    )}
-                  />
+            <section className={styles.section}>
+              {contentSwitcherIndex !== 0 && (
+                <>
+                  <div className={styles.sectionTitle}>{t('priorityLevel', 'Priority Levels')}</div>
 
-                  {errorLoadingQueueRooms && (
-                    <InlineNotification
-                      className={styles.errorNotification}
-                      kind="error"
-                      onClick={() => {}}
-                      subtitle={errorLoadingQueueRooms}
-                      title={t('errorFetchingQueueRooms', 'Error fetching queue rooms')}
+                  <ResponsiveWrapper isTablet={isTablet}>
+                    <Controller
+                      name="priority"
+                      control={control}
+                      render={({ field }) => (
+                        <Dropdown
+                          {...field}
+                          aria-label={t('prioritylevels', 'Priority Levels')}
+                          id="priority-levels"
+                          titleText=""
+                          label="Choose a priority level"
+                          items={priorityLevels ?? []}
+                          initialSelectedItem={priorityLevels[0]}
+                          itemToString={(item) => (item ? String(item.name || item.label || item) : '')}
+                          onChange={({ selectedItem }) => {
+                            if (!selectedItem) return;
+                            field.onChange(selectedItem.id);
+                          }}
+                          invalid={!!errors.priority}
+                          invalidText={errors.priority?.message}
+                        />
+                      )}
                     />
+                  </ResponsiveWrapper>
+                </>
+              )}
+            </section>
+
+            <section className={styles.section}>
+              <div className={styles.sectionTitle}>{t('nextServicePoint', 'Next service point')}</div>
+              <ResponsiveWrapper isTablet={isTablet}>
+                <Controller
+                  name="locationTo"
+                  control={control}
+                  defaultValue={queueRoomLocations.length > 0 ? queueRoomLocations[0].uuid : ''}
+                  render={({ field }) => (
+                    <Select
+                      {...field}
+                      labelText={''}
+                      id="nextQueueLocation"
+                      name="nextQueueLocation"
+                      disabled={errorLoadingQueueRooms}
+                      invalid={!!errors.locationTo}
+                      invalidText={errors.locationTo?.message}
+                      value={field.value}
+                      onChange={(event) => {
+                        field.onChange(event.target.value);
+                        setSelectedNextQueueLocation(event.target.value);
+                      }}
+                    >
+                      {!field.value ? (
+                        <SelectItem text={t('selectNextServicePoint', 'Choose next service point')} value="" />
+                      ) : null}
+                      {queueRoomLocations.map((location) => (
+                        <SelectItem key={location.uuid} text={location.display} value={location.uuid}>
+                          {location.display}
+                        </SelectItem>
+                      ))}
+                    </Select>
                   )}
-                </ResponsiveWrapper>
-              </section>
+                />
 
-              <section className={styles.section}>
-                <div className={styles.sectionTitle}>{t('selectAProvider', 'Select a provider')}</div>
-                <ResponsiveWrapper isTablet={isTablet}>
-                  <Controller
-                    name="provider"
-                    control={control}
-                    defaultValue={providers.length > 0 ? providers[0].uuid : ''}
-                    render={({ field }) => (
-                      <Select
-                        {...field}
-                        labelText={''}
-                        id="providers-list"
-                        name="providers-list"
-                        disabled={errorLoadingProviders}
-                        invalid={!!errors.provider}
-                        invalidText={errors.provider?.message}
-                        value={field.value}
-                        onChange={(event) => {
-                          field.onChange(event.target.value);
-                          setSelectedProvider(event.target.value);
-                        }}
-                      >
-                        {!field.value ? <SelectItem text={t('selectProvider', 'choose a provider')} value="" /> : null}
-                        {providers.map((provider) => (
-                          <SelectItem key={provider.uuid} text={provider.display} value={provider.uuid}>
-                            {provider.display}
-                          </SelectItem>
-                        ))}
-                      </Select>
-                    )}
+                {errorLoadingQueueRooms && (
+                  <InlineNotification
+                    className={styles.errorNotification}
+                    kind="error"
+                    onClick={() => {}}
+                    subtitle={errorLoadingQueueRooms}
+                    title={t('errorFetchingQueueRooms', 'Error fetching queue rooms')}
                   />
+                )}
+              </ResponsiveWrapper>
+            </section>
 
-                  {errorLoadingProviders && (
-                    <InlineNotification
-                      className={styles.errorNotification}
-                      kind="error"
-                      onClick={() => {}}
-                      subtitle={errorLoadingProviders}
-                      title={t('errorFetchingQueueRooms', 'Error fetching providers')}
-                    />
+            <section className={styles.section}>
+              <div className={styles.sectionTitle}>{t('selectAProvider', 'Select a provider')}</div>
+              <ResponsiveWrapper isTablet={isTablet}>
+                <Controller
+                  name="provider"
+                  control={control}
+                  defaultValue={providers.length > 0 ? providers[0].uuid : ''}
+                  render={({ field }) => (
+                    <Select
+                      {...field}
+                      labelText={''}
+                      id="providers-list"
+                      name="providers-list"
+                      disabled={errorLoadingProviders}
+                      invalid={!!errors.provider}
+                      invalidText={errors.provider?.message}
+                      value={field.value}
+                      onChange={(event) => {
+                        field.onChange(event.target.value);
+                        setSelectedProvider(event.target.value);
+                      }}
+                    >
+                      {!field.value ? <SelectItem text={t('selectProvider', 'choose a provider')} value="" /> : null}
+                      {providers.map((provider) => (
+                        <SelectItem key={provider.uuid} text={provider.display} value={provider.uuid}>
+                          {provider.display}
+                        </SelectItem>
+                      ))}
+                    </Select>
                   )}
-                </ResponsiveWrapper>
-              </section>
-              <section className={styles.section}>
-                <div className={styles.sectionTitle}>{t('visitNotes', 'Visit Notes')}</div>
-                <ResponsiveWrapper isTablet={isTablet}>
-                  <Controller
-                    name="comment"
-                    control={control}
-                    render={({ field }) => (
-                      <TextArea
-                        {...field}
-                        aria-label={t('comment', 'Comment')}
-                        invalid={!!errors.comment}
-                        invalidText={errors.comment?.message}
-                        labelText=""
-                        id="comment"
-                        name="comment"
-                        maxCount={500}
-                        enableCounter
-                      />
-                    )}
+                />
+
+                {errorLoadingProviders && (
+                  <InlineNotification
+                    className={styles.errorNotification}
+                    kind="error"
+                    onClick={() => {}}
+                    subtitle={errorLoadingProviders}
+                    title={t('errorFetchingQueueRooms', 'Error fetching providers')}
                   />
-                </ResponsiveWrapper>
-              </section>
-            </Stack>
+                )}
+              </ResponsiveWrapper>
+            </section>
+            <section className={styles.section}>
+              <div className={styles.sectionTitle}>{t('visitNotes', 'Visit Notes')}</div>
+              <ResponsiveWrapper isTablet={isTablet}>
+                <Controller
+                  name="comment"
+                  control={control}
+                  render={({ field }) => (
+                    <TextArea
+                      {...field}
+                      aria-label={t('comment', 'Comment')}
+                      invalid={!!errors.comment}
+                      invalidText={errors.comment?.message}
+                      labelText=""
+                      id="comment"
+                      name="comment"
+                      maxCount={500}
+                      enableCounter
+                    />
+                  )}
+                />
+              </ResponsiveWrapper>
+            </section>
           </div>
-          <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
+          <ButtonSet className={styles.buttonSet}>
             <Button className={styles.button} kind="secondary" onClick={closePanel}>
               {t('discard', 'Discard')}
             </Button>
@@ -382,9 +380,9 @@ const StartVisitForm: React.FC<VisitFormProps> = ({ patientUuid, closePanel, hea
               )}
             </Button>
           </ButtonSet>
-        </Form>
-      </Overlay>
-    </div>
+        </div>
+      </div>
+    </Overlay>
   );
 };
 
diff --git a/packages/esm-patient-queues-app/src/components/visit-form/visit-form.scss b/packages/esm-patient-queues-app/src/components/visit-form/visit-form.scss
index 663e6df6..86526372 100644
--- a/packages/esm-patient-queues-app/src/components/visit-form/visit-form.scss
+++ b/packages/esm-patient-queues-app/src/components/visit-form/visit-form.scss
@@ -2,101 +2,42 @@
 @use '@carbon/styles/scss/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
-.container {
-  margin: spacing.$spacing-05 0rem;
-  background-color: $ui-background;
-
-  & section {
-    margin: spacing.$spacing-02 spacing.$spacing-05 0;
-  }
-}
-
-.heading {
-  @include type.type-style('heading-03');
-  margin: spacing.$spacing-05;
-}
-
-.sectionTitle {
-  @include type.type-style('heading-compact-02');
-  color: $text-02;
-  margin-bottom: spacing.$spacing-05;
-}
-
-.dateTimeSection {
-  display: flex;
-}
-
-.radioButton {
-  margin: spacing.$spacing-05 0;
-}
-
-.headerGridRow {
-  border-bottom: 0.0625rem solid $grey-2;
-  margin: 0;
-}
 
-.dataGridRow {
-  display: grid;
-  grid-template-columns: 50% 10% 1fr;
-  margin: spacing.$spacing-03 spacing.$spacing-05;
-  width: 100%;
-}
-
-.form {
+.container {
   background-color: $ui-background;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  height: 100%;
 }
 
 .button {
-  height: 4rem;
   display: flex;
   align-content: flex-start;
   align-items: baseline;
   min-width: 50%;
 }
 
-.tablet {
-  padding: spacing.$spacing-06 spacing.$spacing-05;
-  background-color: $ui-02;
+.buttonSet {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
 }
 
-.desktop {
-  padding: 0rem;
+.body {
+  padding: 1rem;
 }
-
-@media screen and (max-width: 600px) {
-  .dateTimeSection {
-    flex-direction: column;
-  }
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: spacing.$spacing-05;
 }
 
+section {
+  margin: spacing.$spacing-03;
+}
 .errorMessage {
   color: #d93025;
   font-size: 0.875rem;
   margin: 1rem;
 }
-
-.backButton {
-  align-items: center;
-  display: flex;
-  justify-content: flex-start;
-  margin: spacing.$spacing-03 0;
-  padding: 0;
-  @include type.type-style('body-compact-01');
-
-  button {
-    display: flex;
-
-    svg {
-      order: 1;
-      margin-right: spacing.$spacing-03;
-      margin-left: 0rem !important;
-    }
-
-    span {
-      order: 2;
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/esm-patient-queues-app/src/routes.json b/packages/esm-patient-queues-app/src/routes.json
index 1a298bcc..bf7ac060 100644
--- a/packages/esm-patient-queues-app/src/routes.json
+++ b/packages/esm-patient-queues-app/src/routes.json
@@ -174,6 +174,16 @@
             "type": "form",
             "canMaximize": true,
             "width": "extra-wide"
+        },
+
+        {
+            "name" : "start-visit-form-workspace",
+            "component": "startVisitFormWorkspace",
+            "title": "Start Visit",
+            "type": "form",
+            "canMaximize": true,
+            "width": "extra-wide"
+            
         }
     ]
 }
\ No newline at end of file

From 797f61fe0edb090bb166610d3c9efff68927afa5 Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Thu, 15 May 2025 10:17:58 +0300
Subject: [PATCH 10/17] fix move to next queue bug

---
 .../move-to-next-service-point.workspace.tsx  | 157 ++++++++++--------
 1 file changed, 92 insertions(+), 65 deletions(-)

diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
index 5b9b6e9b..227dabc3 100644
--- a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
@@ -3,7 +3,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Button,
   ContentSwitcher,
-  ModalHeader,
   Select,
   SelectItem,
   Switch,
@@ -21,6 +20,7 @@ import {
   showToast,
   useLayoutType,
   useSession,
+  getSessionStore,
 } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { useQueueRoomLocations } from '../hooks/useQueueRooms';
@@ -30,6 +30,7 @@ import {
   NewQueuePayload,
   addQueueEntry,
   getCareProvider,
+  getCurrentPatientQueueByPatientUuid,
   getPatientQueueUuid,
   updateQueueEntry,
   useProviders,
@@ -40,9 +41,11 @@ import { CreateQueueEntryFormData, createQueueEntrySchema } from './patient-queu
 import { getSelectedPatientQueueUuid } from '../helpers/helpers';
 import { PatientQueue } from '../types/patient-queues';
 
-type MoveToNextServicePointFormProps = DefaultWorkspaceProps & {};
+type MoveToNextServicePointFormProps = DefaultWorkspaceProps & {
+  patientUuid: string;
+};
 
-const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({ closeWorkspace }) => {
+const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({ patientUuid, closeWorkspace }) => {
   // Hooks
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
@@ -160,95 +163,119 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
   const handleSave = useCallback(async () => {
     try {
       setIsSubmitting(true);
-      if (status === QueueStatus.Pending) {
-        await updateQueueEntry(status, provider, queueEntry?.uuid, 0, priorityComment, 'comment');
+      // get queue entry by patient id
+      const patientQueueEntryResponse = await getCurrentPatientQueueByPatientUuid(
+        patientUuid,
+        sessionUser?.sessionLocation?.uuid,
+      );
 
-        showToast({
-          critical: true,
-          title: t('updateEntry', 'Update entry'),
-          kind: 'success',
-          description: t('queueEntryUpdateSuccessfully', 'Queue Entry Updated Successfully'),
-        });
+      const queues = patientQueueEntryResponse.data?.results[0]?.patientQueues;
+      const queueEntry = queues?.filter((item) => item?.patient?.uuid === patientUuid);
 
-        closeWorkspace();
-        handleMutate(`${restBaseUrl}/patientqueue`);
-        setIsSubmitting(false);
+      if (status === QueueStatus.Pending) {
+        if (queueEntry.length > 0) {
+          await updateQueueEntry(status, provider, queueEntry[0]?.uuid, 0, priorityComment, comment).then(() => {
+            showToast({
+              critical: true,
+              title: t('moveToNextServicePoint', 'Move back your service point'),
+              kind: 'success',
+              description: t('backToQueue', 'Successfully moved back patient to your service point'),
+            });
+            closeWorkspace();
+            handleMutate(`${restBaseUrl}/patientqueue`);
+            setIsSubmitting(false);
+          });
+        }
       }
+
       if (status === QueueStatus.Completed) {
-        await updateQueueEntry(
-          QueueStatus.Completed,
-          provider,
-          queueEntry?.uuid,
-          contentSwitcherIndex,
-          priorityComment,
-          comment,
-        );
-
-        // Add new queue entry
-        const request: NewQueuePayload = {
-          patient: queueEntry?.patient?.uuid,
-          provider: selectedProvider,
-          locationFrom: sessionUser?.sessionLocation?.uuid,
-          locationTo: selectedNextQueueLocation,
-          status: QueueStatus.Pending,
-          priority: contentSwitcherIndex,
-          priorityComment: priorityComment,
-          comment: comment,
-          queueRoom: selectedNextQueueLocation,
-        };
-
-        const createQueueResponse = await addQueueEntry(request);
-
-        if (createQueueResponse.status === 201) {
-          // Pick and route
+        if (queueEntry.length > 0) {
           await updateQueueEntry(
-            QueueStatus.Picked,
+            QueueStatus.Completed,
             provider,
-            queueEntry?.uuid,
+            queueEntry[0]?.uuid,
             contentSwitcherIndex,
             priorityComment,
             comment,
           );
 
-          showToast({
-            critical: true,
-            title: t('updateEntry', 'Move to next queue'),
-            kind: 'success',
-            description: t('movetonextqueue', 'Move to next queue successfully'),
-          });
-
-          // View patient summary
-          navigate({ to: `\${openmrsSpaBase}/patient/${queueEntry?.patient?.uuid}/chart` });
+          const request: NewQueuePayload = {
+            patient: patientUuid,
+            provider: selectedProvider ?? '',
+            locationFrom: sessionUser?.sessionLocation?.uuid,
+            locationTo: selectedNextQueueLocation,
+            status: QueueStatus.Pending,
+            priority: contentSwitcherIndex,
+            priorityComment: priorityComment,
+            comment: comment,
+            queueRoom: selectedNextQueueLocation,
+          };
+
+          const createQueueResponse = await addQueueEntry(request);
+
+          const response = await updateQueueEntry(
+            QueueStatus.Pending,
+            provider,
+            createQueueResponse.data?.uuid,
+            contentSwitcherIndex,
+            priorityComment,
+            comment,
+          );
 
-          closeWorkspace();
-          handleMutate(`${restBaseUrl}/patientqueue`);
-          setIsSubmitting(false);
+          if (response.status === 200) {
+            showToast({
+              critical: true,
+              title: t('moveToNextServicePoint', 'Move to next service point'),
+              kind: 'success',
+              description: t('movetonextservicepoint', 'Moved to next service point successfully'),
+            });
+            handleMutate(`${restBaseUrl}/patientqueue`);
+            closeWorkspace();
+            setIsSubmitting(false);
+            // view patient summary
+            // navigate({ to: `\${openmrsSpaBase}/home` });
+            const roles = getSessionStore().getState().session?.user?.roles;
+            const roleName = roles[0]?.display;
+            if (roles && roles?.length > 0) {
+              if (roles?.filter((item) => item?.display === 'Organizational: Clinician').length > 0) {
+                navigate({
+                  to: `${window.getOpenmrsSpaBase()}home/clinical-room-patient-queues`,
+                });
+              } else if (roleName === 'Triage') {
+                navigate({
+                  to: `${window.getOpenmrsSpaBase()}home/triage-patient-queues`,
+                });
+              } else {
+                navigate({ to: `${window.getOpenmrsSpaBase()}home` });
+              }
+            }
+          }
         }
       }
-    } catch (error: any) {
+    } catch (error) {
       setIsSubmitting(false);
+      const errorMessages = extractErrorMessagesFromResponse(error);
       showNotification({
-        title: t('queueEntryUpdateFailed', 'Error updating queue entry status'),
+        title: t('moveToNextServicePoint', 'Error moving to next service point'),
         kind: 'error',
         critical: true,
-        description: error?.message,
+        description: errorMessages.join(','),
       });
       handleMutate(`${restBaseUrl}/patientqueue`);
+      closeWorkspace();
     }
   }, [
-    status,
-
-    queueEntry?.uuid,
-    queueEntry?.patient?.uuid,
-    priorityComment,
-    t,
     closeWorkspace,
     contentSwitcherIndex,
-    selectedProvider,
+    patientUuid,
+    priorityComment,
     provider,
-    sessionUser?.sessionLocation?.uuid,
     selectedNextQueueLocation,
+    selectedProvider,
+    sessionUser?.sessionLocation?.uuid,
+    status,
     comment,
+    t,
   ]);
 
   return (

From cddd72c4b62efbe9c3ef048200f7c92e1ca0bd52 Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Thu, 15 May 2025 12:01:42 +0300
Subject: [PATCH 11/17] make summary tiles consistent across

---
 .../clinic-metrics.component.tsx              |  16 +--
 .../clinic-metrics.resource.tsx               |   2 +-
 .../metrics-card.component.tsx                |  64 ----------
 .../patient-queue-metrics/metrics-card.scss   | 113 -----------------
 .../src/queue-reception-home.component.tsx    |   8 +-
 .../queue-tiles/checked-in-tile.component.tsx |   3 +-
 .../queue-completed-tile.component.tsx        |   9 +-
 .../queue-in-queue-tile.component.tsx         |   8 +-
 .../queue-waiting-tile.component.tsx          |   5 +-
 .../src/queue-triage-home.component.tsx       |   1 -
 .../summary-tiles/summary-tile.component.tsx  |  73 ++++++-----
 .../src/summary-tiles/summary-tile.scss       | 114 +++++++++++++++++-
 12 files changed, 187 insertions(+), 229 deletions(-)
 delete mode 100644 packages/esm-patient-queues-app/src/components/patient-queue-metrics/metrics-card.component.tsx
 delete mode 100644 packages/esm-patient-queues-app/src/components/patient-queue-metrics/metrics-card.scss

diff --git a/packages/esm-patient-queues-app/src/components/patient-queue-metrics/clinic-metrics.component.tsx b/packages/esm-patient-queues-app/src/components/patient-queue-metrics/clinic-metrics.component.tsx
index e2d93808..596ffee8 100644
--- a/packages/esm-patient-queues-app/src/components/patient-queue-metrics/clinic-metrics.component.tsx
+++ b/packages/esm-patient-queues-app/src/components/patient-queue-metrics/clinic-metrics.component.tsx
@@ -5,11 +5,11 @@ import { PRIVILEGE_RECEPTION_METRIC, PRIVILIGE_TRIAGE_METRIC } from '../../const
 
 import { useServicePointCount } from './clinic-metrics.resource';
 import styles from './clinic-metrics.scss';
-import MetricsCard from './metrics-card.component';
-import { useParentLocation, usePatientQueuePages } from '../../active-visits/patient-queues.resource';
+import { useParentLocation } from '../../active-visits/patient-queues.resource';
 import { CheckmarkOutline, Pending, ProgressBarRound } from '@carbon/react/icons';
 import { Tooltip as ReactTooltip } from 'react-tooltip';
 import dayjs from 'dayjs';
+import SummaryTile from '../../summary-tiles/summary-tile.component';
 
 const ClinicMetrics: React.FC = () => {
   const { t } = useTranslation();
@@ -25,24 +25,24 @@ const ClinicMetrics: React.FC = () => {
   return (
     <div className={styles.cardContainer}>
       <UserHasAccess privilege={PRIVILEGE_RECEPTION_METRIC}>
-        <MetricsCard
+        <SummaryTile
           values={[{ label: 'Patients', value: 0 }]}
           headerLabel={t('checkedInPatients', 'Checked in patients')}
         />
-        <MetricsCard
+        <SummaryTile
           values={[{ label: 'Expected Appointments', value: 0 }]}
           headerLabel={t('noOfExpectedAppointments', 'No. Of Expected Appointments')}
         />
-        <MetricsCard values={stats} headerLabel={t('currentlyServing', 'No. of Currently being Served')} />
+        <SummaryTile values={stats} headerLabel={t('currentlyServing', 'No. of Currently being Served')} />
       </UserHasAccess>
 
       <UserHasAccess privilege={PRIVILIGE_TRIAGE_METRIC}>
-        <MetricsCard values={[{ label: 'In Queue', value: 0 }]} headerLabel={t('inQueueTriage', 'Patients Waiting')} />
-        <MetricsCard
+        <SummaryTile values={[{ label: 'In Queue', value: 0 }]} headerLabel={t('inQueueTriage', 'Patients Waiting')} />
+        <SummaryTile
           values={[{ label: t('byTriage', 'By you'), value: 0 }]}
           headerLabel={t('pendingTriageServing', 'Patients waiting to be Served')}
         />
-        <MetricsCard
+        <SummaryTile
           values={[{ label: 'Patients Served', value: 0 }]}
           headerLabel={t('noOfPatientsServed', 'No. of Patients Served')}
         />
diff --git a/packages/esm-patient-queues-app/src/components/patient-queue-metrics/clinic-metrics.resource.tsx b/packages/esm-patient-queues-app/src/components/patient-queue-metrics/clinic-metrics.resource.tsx
index c56505a9..6e16ab71 100644
--- a/packages/esm-patient-queues-app/src/components/patient-queue-metrics/clinic-metrics.resource.tsx
+++ b/packages/esm-patient-queues-app/src/components/patient-queue-metrics/clinic-metrics.resource.tsx
@@ -1,8 +1,8 @@
 import useSWR from 'swr';
 import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import { PatientQueue } from '../../types/patient-queues';
-import { Value } from './metrics-card.component';
 import { getMetrics } from './clinic-metrics.component';
+import { Value } from '../../summary-tiles/summary-tile.component';
 export interface PatientStats {
   locationTag: LocationTag;
   pending: number;
diff --git a/packages/esm-patient-queues-app/src/components/patient-queue-metrics/metrics-card.component.tsx b/packages/esm-patient-queues-app/src/components/patient-queue-metrics/metrics-card.component.tsx
deleted file mode 100644
index 5eccddac..00000000
--- a/packages/esm-patient-queues-app/src/components/patient-queue-metrics/metrics-card.component.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Layer, Tile } from '@carbon/react';
-import React from 'react';
-import styles from './metrics-card.scss';
-
-export interface Value {
-  label: string;
-  value: number;
-  status?: Array<Status>;
-}
-
-interface Status {
-  status: any;
-  value: number;
-  color: string;
-}
-
-interface MetricsCardProps {
-  values: Array<Value>;
-  headerLabel: string;
-}
-
-const MetricsCard: React.FC<MetricsCardProps> = ({ values, headerLabel }) => {
-  return (
-    <Layer className={`${styles.cardWithChildren} ${styles.container}`}>
-      <Tile className={styles.tileContainer}>
-        <div className={styles.tileHeader}>
-          <div className={styles.headerLabelContainer}>
-            <label className={styles.headerLabel}>{headerLabel}</label>
-          </div>
-        </div>
-        <div className={styles.valueContainer}>
-          {values?.map((value) => (
-            <div className={styles.valueInnerContainer}>
-              <div key={value.label}>
-                <label className={styles.totalsLabel}>{value.label}</label>
-                <p className={styles.totalsValue}>{value.value}</p>
-              </div>
-              <div className={styles.valueStatus}>
-                {value?.status?.map((status, index) => (
-                  <div key={index} className={styles.status}>
-                    <p className={styles.statusValue}>{status.value}</p>
-                    <label
-                      className={`${styles.statusLabel} ${
-                        status.color === 'orange'
-                          ? styles.statusOrange
-                          : status.color === 'green'
-                          ? styles.statusGreen
-                          : styles.statusBlue
-                      }`}
-                    >
-                      {status.status}
-                    </label>
-                  </div>
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-      </Tile>
-    </Layer>
-  );
-};
-
-export default MetricsCard;
diff --git a/packages/esm-patient-queues-app/src/components/patient-queue-metrics/metrics-card.scss b/packages/esm-patient-queues-app/src/components/patient-queue-metrics/metrics-card.scss
deleted file mode 100644
index d2448f47..00000000
--- a/packages/esm-patient-queues-app/src/components/patient-queue-metrics/metrics-card.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
-
-.container {
-  flex-grow: 1;
-}
-
-/* Tablet viewport */
-:global(.omrs-breakpoint-lt-desktop) {
-  // The card containing the dropdown element should be the first to overflow on tablet
-  .cardWithChildren {
-    order: 3;
-  }
-}
-
-.tileContainer {
-  border: 0.0625rem solid $ui-03;
-  height: 10.875rem;
-  padding: spacing.$spacing-05;
-  margin: spacing.$spacing-03 spacing.$spacing-03;
-}
-
-.tileHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  margin-bottom: spacing.$spacing-03;
-}
-
-.headerLabel {
-  @include type.type-style('heading-compact-01');
-  color: $text-02;
-}
-
-.totalsLabel {
-  font-weight: bold !important;
-  @include type.type-style('label-01');
-  color: $text-02;
-}
-
-.totalsValue {
-  @include type.type-style('heading-04');
-  color: $ui-05;
-}
-
-.headerLabelContainer {
-  display: flex;
-  height: spacing.$spacing-07;
-
-  :global(.cds--dropdown__wrapper--inline) {
-    gap: 0;
-    margin-top: -0.75rem;
-  }
-
-  :global(.cds--list-box__menu-icon) {
-    height: 1rem;
-  }
-}
-
-.link {
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  color: $interactive-01;
-
-  svg {
-    margin-left: spacing.$spacing-03;
-  }
-}
-
-.valueContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.valueInnerContainer {
-  display: flex;
-}
-
-.valueStatus {
-  padding-left: 0.5rem;
-}
-
-.status {
-  display: flex;
-  align-items: start;
-  margin-right: 10px;
-}
-
-.statusValue {
-  margin: 0 5px 0 0;
-  font-size: 0.8em;
-}
-
-.statusLabel {
-  margin: 0;
-  font-size: 0.8em;
-}
-
-.statusOrange {
-  color: colors.$orange-30;
-}
-
-.statusGreen {
-  color: colors.$green-50;
-}
-
-.statusBlue {
-  color: colors.$blue-30;
-}
diff --git a/packages/esm-patient-queues-app/src/queue-reception-home.component.tsx b/packages/esm-patient-queues-app/src/queue-reception-home.component.tsx
index 0ae64c7e..be26a351 100644
--- a/packages/esm-patient-queues-app/src/queue-reception-home.component.tsx
+++ b/packages/esm-patient-queues-app/src/queue-reception-home.component.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import PatientQueueHeader from './components/patient-queue-header/patient-queue-header.component';
-import MetricsCard from './components/patient-queue-metrics/metrics-card.component';
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
 
@@ -37,6 +36,7 @@ import {
 import { Add } from '@carbon/react/icons';
 import PrintActionsMenu from './active-visits/print-action-menu.components';
 import StatusIcon from './utils/utils';
+import SummaryTile from './summary-tiles/summary-tile.component';
 
 const ReceptionHome: React.FC = () => {
   const { t } = useTranslation();
@@ -139,15 +139,15 @@ const ReceptionHome: React.FC = () => {
     <div>
       <PatientQueueHeader title="Reception" />
       <div className={styles.cardContainer}>
-        <MetricsCard
+        <SummaryTile
           values={[{ label: 'Patients', value: totalCount }]}
           headerLabel={t('checkedInPatients', 'Checked in patients')}
         />
-        <MetricsCard
+        <SummaryTile
           values={[{ label: 'Expected Appointments', value: 0 }]}
           headerLabel={t('noOfExpectedAppointments', 'No. Of Expected Appointments')}
         />
-        <MetricsCard values={stats} headerLabel={t('currentlyServing', 'No. of Currently being Served')} />
+        <SummaryTile values={stats} headerLabel={t('currentlyServing', 'No. of Currently being Served')} />
       </div>
 
       <div className={styles.container}>
diff --git a/packages/esm-patient-queues-app/src/queue-tiles/checked-in-tile.component.tsx b/packages/esm-patient-queues-app/src/queue-tiles/checked-in-tile.component.tsx
index 44445d79..9e3f3efe 100644
--- a/packages/esm-patient-queues-app/src/queue-tiles/checked-in-tile.component.tsx
+++ b/packages/esm-patient-queues-app/src/queue-tiles/checked-in-tile.component.tsx
@@ -10,8 +10,7 @@ const CheckedInTile: React.FC = () => {
 
   return (
     <SummaryTile
-      label={t('checkedInPatients', 'Checked In Patients')}
-      value={totalCount}
+      values={[{ label: t('checkedInPatients', 'Checked In Patients'), value: totalCount }]}
       headerLabel={t('pending', 'Pending')}
     />
   );
diff --git a/packages/esm-patient-queues-app/src/queue-tiles/queue-completed-tile.component.tsx b/packages/esm-patient-queues-app/src/queue-tiles/queue-completed-tile.component.tsx
index bd10fb4b..402fe0e0 100644
--- a/packages/esm-patient-queues-app/src/queue-tiles/queue-completed-tile.component.tsx
+++ b/packages/esm-patient-queues-app/src/queue-tiles/queue-completed-tile.component.tsx
@@ -10,11 +10,14 @@ const QueueCompletedTile: React.FC = () => {
   const session = useSession();
 
   const { items } = usePatientQueuePages(session.sessionLocation.uuid, '');
-
   return (
     <SummaryTile
-      label={t('noOfPatientsServed', 'No. of Patients Served')}
-      value={items.filter((item) => item.status === QueueEnumStatus.COMPLETED).length}
+      values={[
+        {
+          label: t('noOfPatientsServed', 'No. of Patients Served'),
+          value: items.filter((item) => item.status === QueueEnumStatus.COMPLETED).length,
+        },
+      ]}
       headerLabel={t('finished', 'Finished')}
     />
   );
diff --git a/packages/esm-patient-queues-app/src/queue-tiles/queue-in-queue-tile.component.tsx b/packages/esm-patient-queues-app/src/queue-tiles/queue-in-queue-tile.component.tsx
index 6b9b66e3..fddcf09d 100644
--- a/packages/esm-patient-queues-app/src/queue-tiles/queue-in-queue-tile.component.tsx
+++ b/packages/esm-patient-queues-app/src/queue-tiles/queue-in-queue-tile.component.tsx
@@ -13,8 +13,12 @@ const QueueInQueueTile: React.FC = () => {
 
   return (
     <SummaryTile
-      label={t('patientsWaitingToBeServed', 'Patients waiting to be Served')}
-      value={items.filter((item) => item.status === (QueueEnumStatus.PICKED || QueueEnumStatus.PENDING)).length}
+      values={[
+        {
+          label: t('patientsWaitingToBeServed', 'Patients waiting to be Served'),
+          value: items.filter((item) => item.status === (QueueEnumStatus.PICKED || QueueEnumStatus.PENDING)).length,
+        },
+      ]}
       headerLabel={t('byYou', 'By You')}
     />
   );
diff --git a/packages/esm-patient-queues-app/src/queue-tiles/queue-waiting-tile.component.tsx b/packages/esm-patient-queues-app/src/queue-tiles/queue-waiting-tile.component.tsx
index c2046e4b..93f199be 100644
--- a/packages/esm-patient-queues-app/src/queue-tiles/queue-waiting-tile.component.tsx
+++ b/packages/esm-patient-queues-app/src/queue-tiles/queue-waiting-tile.component.tsx
@@ -13,8 +13,9 @@ const QueueWaitingTile: React.FC = () => {
 
   return (
     <SummaryTile
-      label={t('patientsWaiting', 'Patients Waiting')}
-      value={items.filter((item) => item.status === QueueEnumStatus.PENDING).length}
+      values={[
+        { label: 'Patients Waiting', value: items.filter((item) => item.status === QueueEnumStatus.PENDING).length },
+      ]}
       headerLabel={t('inQueue', 'In Queue')}
     />
   );
diff --git a/packages/esm-patient-queues-app/src/queue-triage-home.component.tsx b/packages/esm-patient-queues-app/src/queue-triage-home.component.tsx
index d20d6a2f..efa8a32f 100644
--- a/packages/esm-patient-queues-app/src/queue-triage-home.component.tsx
+++ b/packages/esm-patient-queues-app/src/queue-triage-home.component.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import PatientQueueHeader from './components/patient-queue-header/patient-queue-header.component';
-import MetricsCard from './components/patient-queue-metrics/metrics-card.component';
 import { useTranslation } from 'react-i18next';
 import { QueueStatus } from './utils/utils';
 import { Tabs, TabPanel, TabList, Tab, TabPanels } from '@carbon/react';
diff --git a/packages/esm-patient-queues-app/src/summary-tiles/summary-tile.component.tsx b/packages/esm-patient-queues-app/src/summary-tiles/summary-tile.component.tsx
index 62dff251..32c88ad7 100644
--- a/packages/esm-patient-queues-app/src/summary-tiles/summary-tile.component.tsx
+++ b/packages/esm-patient-queues-app/src/summary-tiles/summary-tile.component.tsx
@@ -2,45 +2,64 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Tile } from '@carbon/react';
 import styles from './summary-tile.scss';
+import { Layer } from '@carbon/react';
 
-export interface KeyPerformanceIndicator {
-  value: any;
+interface Status {
+  status: any;
+  value: number;
+  color: string;
+}
+export interface Value {
   label: string;
+  value: number;
+  status?: Array<Status>;
 }
 
 interface SummaryTileProps {
-  label: string;
-  value: number;
+  values: Array<Value>;
   headerLabel: string;
-  children?: React.ReactNode;
-  additionalKpis?: Array<KeyPerformanceIndicator>;
 }
 
-const SummaryTile: React.FC<SummaryTileProps> = ({ label, value, headerLabel, children, additionalKpis }) => {
-  const { t } = useTranslation();
+const SummaryTile: React.FC<SummaryTileProps> = ({ values, headerLabel }) => {
 
   return (
-    <Tile className={styles.tileContainer} light={true}>
-      <div className={styles.tileHeader}>
-        <div className={styles.headerLabelContainer}>
-          <label className={styles.headerLabel}>{headerLabel}</label>
-          {children}
+    <Layer className={`${styles.cardWithChildren} ${styles.container}`}>
+      <Tile className={styles.tileContainer}>
+        <div className={styles.tileHeader}>
+          <div className={styles.headerLabelContainer}>
+            <label className={styles.headerLabel}>{headerLabel}</label>
+          </div>
         </div>
-        <div></div>
-      </div>
-      <div className={styles.kpis}>
-        <div>
-          <label className={styles.totalsLabel}>{label}</label>
-          <p className={styles.totalsValue}>{value}</p>
+        <div className={styles.valueContainer}>
+          {values?.map((value) => (
+            <div className={styles.valueInnerContainer}>
+              <div key={value.label}>
+                <label className={styles.totalsLabel}>{value.label}</label>
+                <p className={styles.totalsValue}>{value.value}</p>
+              </div>
+              <div className={styles.valueStatus}>
+                {value?.status?.map((status, index) => (
+                  <div key={index} className={styles.status}>
+                    <p className={styles.statusValue}>{status.value}</p>
+                    <label
+                      className={`${styles.statusLabel} ${
+                        status.color === 'orange'
+                          ? styles.statusOrange
+                          : status.color === 'green'
+                          ? styles.statusGreen
+                          : styles.statusBlue
+                      }`}
+                    >
+                      {status.status}
+                    </label>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
         </div>
-        {additionalKpis?.map((p) => (
-          <div>
-            <label className={styles.totalsLabel}>{p.label}</label>
-            <p className={styles.totalsValue}>{p.value}</p>
-          </div>
-        ))}
-      </div>
-    </Tile>
+      </Tile>
+    </Layer>
   );
 };
 
diff --git a/packages/esm-patient-queues-app/src/summary-tiles/summary-tile.scss b/packages/esm-patient-queues-app/src/summary-tiles/summary-tile.scss
index 7665c8bc..9a25a69a 100644
--- a/packages/esm-patient-queues-app/src/summary-tiles/summary-tile.scss
+++ b/packages/esm-patient-queues-app/src/summary-tiles/summary-tile.scss
@@ -1,7 +1,7 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import "~@openmrs/esm-styleguide/src/vars";
-
+@use '@carbon/styles/scss/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
 .tileContainer {
   border: 0.0625rem solid $ui-03;
   flex-grow: 1;
@@ -51,4 +51,114 @@
 
 .kpis > div {
   text-align: left;
+}
+
+.container {
+  flex-grow: 1;
+}
+
+/* Tablet viewport */
+:global(.omrs-breakpoint-lt-desktop) {
+
+  // The card containing the dropdown element should be the first to overflow on tablet
+  .cardWithChildren {
+    order: 3;
+  }
+}
+
+.tileContainer {
+  border: 0.0625rem solid $ui-03;
+  height: 10.875rem;
+  padding: spacing.$spacing-05;
+  margin: spacing.$spacing-03 spacing.$spacing-03;
+}
+
+.tileHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.headerLabel {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+}
+
+.totalsLabel {
+  font-weight: bold !important;
+  @include type.type-style('label-01');
+  color: $text-02;
+}
+
+.totalsValue {
+  @include type.type-style('heading-04');
+  color: $ui-05;
+}
+
+.headerLabelContainer {
+  display: flex;
+  height: spacing.$spacing-07;
+
+  :global(.cds--dropdown__wrapper--inline) {
+    gap: 0;
+    margin-top: -0.75rem;
+  }
+
+  :global(.cds--list-box__menu-icon) {
+    height: 1rem;
+  }
+}
+
+.link {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  color: $interactive-01;
+
+  svg {
+    margin-left: spacing.$spacing-03;
+  }
+}
+
+.valueContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.valueInnerContainer {
+  display: flex;
+}
+
+.valueStatus {
+  padding-left: 0.5rem;
+}
+
+.status {
+  display: flex;
+  align-items: start;
+  margin-right: 10px;
+}
+
+.statusValue {
+  margin: 0 5px 0 0;
+  font-size: 0.8em;
+}
+
+.statusLabel {
+  margin: 0;
+  font-size: 0.8em;
+}
+
+.statusOrange {
+  color: colors.$orange-30;
+}
+
+.statusGreen {
+  color: colors.$green-50;
+}
+
+.statusBlue {
+  color: colors.$blue-30;
 }
\ No newline at end of file

From 0260bf57bbd24625756996d61bbebc1cf71fb35e Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Thu, 15 May 2025 12:07:12 +0300
Subject: [PATCH 12/17] make summary tiles consistent across

---
 .../src/summary-tiles/summary-tile.component.tsx             | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/esm-patient-queues-app/src/summary-tiles/summary-tile.component.tsx b/packages/esm-patient-queues-app/src/summary-tiles/summary-tile.component.tsx
index 32c88ad7..085cdb47 100644
--- a/packages/esm-patient-queues-app/src/summary-tiles/summary-tile.component.tsx
+++ b/packages/esm-patient-queues-app/src/summary-tiles/summary-tile.component.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Tile } from '@carbon/react';
+import { Tile, Layer } from '@carbon/react';
 import styles from './summary-tile.scss';
-import { Layer } from '@carbon/react';
 
 interface Status {
   status: any;
@@ -21,7 +19,6 @@ interface SummaryTileProps {
 }
 
 const SummaryTile: React.FC<SummaryTileProps> = ({ values, headerLabel }) => {
-
   return (
     <Layer className={`${styles.cardWithChildren} ${styles.container}`}>
       <Tile className={styles.tileContainer}>

From 04879dc90048902780de285ed534fa89f9043f0b Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Mon, 19 May 2025 12:54:58 +0300
Subject: [PATCH 13/17] fix priority comment bug

---
 .../src/components/visit-form/visit-form.component.tsx           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/esm-patient-queues-app/src/components/visit-form/visit-form.component.tsx b/packages/esm-patient-queues-app/src/components/visit-form/visit-form.component.tsx
index 1822c674..b9ff5884 100644
--- a/packages/esm-patient-queues-app/src/components/visit-form/visit-form.component.tsx
+++ b/packages/esm-patient-queues-app/src/components/visit-form/visit-form.component.tsx
@@ -78,6 +78,7 @@ const StartVisitForm: React.FC<VisitFormProps> = ({ patientUuid, closePanel, hea
     resolver: zodResolver(createQueueEntrySchema),
     defaultValues: {
       status: QueueStatus.Pending,
+      priorityComment: priorityLabels[contentSwitcherIndex] 
     },
   });
 

From e2265cf5d7ac63d3df869f5542b5ebbe54c61efd Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Mon, 19 May 2025 13:02:38 +0300
Subject: [PATCH 14/17] put back notes

---
 .../queue-patients-triage/queue-triage-table.component.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx
index 244b0e7a..d6334d09 100644
--- a/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx
@@ -203,7 +203,7 @@ const ActiveTriageVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) =
               />
             )}
 
-            {/* <NotesActionsMenu note={patientqueue} /> */}
+            <NotesActionsMenu note={patientqueue} />
 
             {patientqueue?.status === 'PENDING' && isToggled && (
               <MovetoNextServicePointReassignAction patientUuid={filteredPatientQueueEntries[index].patient.uuid} />

From b84fcdf657f785ca831bac40bc4903fee3c64e5a Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Mon, 19 May 2025 13:14:10 +0300
Subject: [PATCH 15/17] fix notes dialog not displaying

---
 .../src/active-visits/notes/notes-dialog.component.tsx   | 2 +-
 .../src/active-visits/notes/notes-dialog.scss            | 9 +++++++++
 .../queue-clinical-table.component.tsx                   | 2 +-
 packages/esm-patient-queues-app/src/index.ts             | 2 +-
 4 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 packages/esm-patient-queues-app/src/active-visits/notes/notes-dialog.scss

diff --git a/packages/esm-patient-queues-app/src/active-visits/notes/notes-dialog.component.tsx b/packages/esm-patient-queues-app/src/active-visits/notes/notes-dialog.component.tsx
index 865b5ffc..41b17d43 100644
--- a/packages/esm-patient-queues-app/src/active-visits/notes/notes-dialog.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/notes/notes-dialog.component.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, Form, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import styles from './change-status-dialog.scss';
+import styles from './notes-dialog.scss';
 import { PatientQueue } from '../../types/patient-queues';
 
 interface NotesDialogProps {
diff --git a/packages/esm-patient-queues-app/src/active-visits/notes/notes-dialog.scss b/packages/esm-patient-queues-app/src/active-visits/notes/notes-dialog.scss
new file mode 100644
index 00000000..731ce5c7
--- /dev/null
+++ b/packages/esm-patient-queues-app/src/active-visits/notes/notes-dialog.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+
+.section {
+    margin: spacing.$spacing-03;
+}
+.modalBody {
+    padding-bottom: spacing.$spacing-05;
+}
\ No newline at end of file
diff --git a/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx
index 775eec96..11d08f10 100644
--- a/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx
@@ -217,7 +217,7 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
               />
             )}
 
-            {/* <NotesActionsMenu note={patientqueue} /> */}
+            <NotesActionsMenu note={patientqueue} />
 
             {patientqueue?.status === 'PENDING' && isToggled && (
               <MovetoNextServicePointReassignAction patientUuid={filteredPatientQueueEntries[index].uuid} />
diff --git a/packages/esm-patient-queues-app/src/index.ts b/packages/esm-patient-queues-app/src/index.ts
index d9e41130..36217ec8 100644
--- a/packages/esm-patient-queues-app/src/index.ts
+++ b/packages/esm-patient-queues-app/src/index.ts
@@ -4,7 +4,7 @@ import { moduleName } from './constants';
 import { createDashboardLink } from './createDashboardLink';
 import { ClinicalRoomMeta, ReceptionMeta, TriageMeta } from './dashboard.meta';
 import moveToNextServicePointActionComponent from './active-visits/move-to-next-service-point-patient-action.component';
-import notesModalComponent from './active-visits/notes/notes-action-menu.components';
+import notesModalComponent from './active-visits/notes/notes-dialog.component';
 import pickPatientEntryQueueComponent from './active-visits/pick-patient-dialog.component';
 import queueScreenComponent from './components/queue-board/queue-board.component';
 import rootComponent from './root.component';

From 01d607283b78fa367f6e7b19d619c5505909e38d Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Mon, 19 May 2025 14:47:46 +0300
Subject: [PATCH 16/17] fix move back to queue

---
 .../active-visits/move-to-next-service-point.workspace.tsx    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
index 227dabc3..1c56e6b1 100644
--- a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
@@ -149,6 +149,7 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
     defaultValues: {
       priorityComment: priorityLabels[contentSwitcherIndex],
       status: statusLabels[statusSwitcherIndex].status,
+
     },
   });
 
@@ -362,7 +363,7 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
                 <Controller
                   name="locationTo"
                   control={control}
-                  defaultValue={queueRoomLocations[0]?.uuid || ''}
+                  defaultValue={queueRoomLocations[0]?.uuid || sessionUser?.sessionLocation?.uuid}
                   render={({ field }) => (
                     <Select
                       {...field}
@@ -407,6 +408,7 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
                 <Controller
                   name="provider"
                   control={control}
+                  defaultValue={providers[0]?.uuid || sessionUser?.currentProvider?.uuid}
                   render={({ field }) => (
                     <Select
                       {...field}

From 85399ead6c5059c30b4acdd4546eb858d8103fa0 Mon Sep 17 00:00:00 2001
From: jabahum <jabajnan8@gmail.com>
Date: Mon, 19 May 2025 16:07:12 +0300
Subject: [PATCH 17/17] update routing

---
 .../move-to-next-service-point.workspace.tsx     | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
index 1c56e6b1..37885944 100644
--- a/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
+++ b/packages/esm-patient-queues-app/src/active-visits/move-to-next-service-point.workspace.tsx
@@ -185,6 +185,22 @@ const MoveToNextServicePointForm: React.FC<MoveToNextServicePointFormProps> = ({
             closeWorkspace();
             handleMutate(`${restBaseUrl}/patientqueue`);
             setIsSubmitting(false);
+
+            const roles = getSessionStore().getState().session?.user?.roles;
+            const roleName = roles[0]?.display;
+            if (roles && roles?.length > 0) {
+              if (roles?.filter((item) => item?.display === 'Organizational: Clinician').length > 0) {
+                navigate({
+                  to: `${window.getOpenmrsSpaBase()}home/clinical-room-patient-queues`,
+                });
+              } else if (roleName === 'Triage') {
+                navigate({
+                  to: `${window.getOpenmrsSpaBase()}home/triage-patient-queues`,
+                });
+              } else {
+                navigate({ to: `${window.getOpenmrsSpaBase()}home` });
+              }
+            }
           });
         }
       }