@openmrs/esm-appointments-app 9.2.1-pre.7303 → 9.2.1-pre.7315

package/src/form/exported-appointments-form.workspace.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { type Workspace2DefinitionProps } from '@openmrs/esm-framework';
+import type { Appointment, RecurringPattern } from '../types';
+import AppointmentsForm from './appointments-form.workspace';
+
+interface ExportedAppointmentsFormProps {
+  appointment?: Appointment;
+  recurringPattern?: RecurringPattern;
+}
+
+interface ExportedAppointmentsFormGroupProps {
+  patientUuid: string;
+}
+
+/**
+ * Workspace used to create or edit an appointment in the patient chart (or app with compatible workspaceGroup)
+ */
+const ExportedAppointmentsForm: React.FC<
+  Workspace2DefinitionProps<ExportedAppointmentsFormProps, {}, ExportedAppointmentsFormGroupProps>
+> = ({ workspaceProps: { appointment, recurringPattern }, groupProps: { patientUuid }, ...rest }) => {
+  return <AppointmentsForm workspaceProps={{ appointment, recurringPattern, patientUuid }} groupProps={{}} {...rest} />;
+};
+
+export default ExportedAppointmentsForm;

package/src/helpers/functions.ts

@@ -1,41 +1,65 @@
 import dayjs, { type Dayjs } from 'dayjs';
-import { formatDate, parseDate } from '@openmrs/esm-framework';
-import { type AppointmentSummary, type Appointment } from '../types';
-import { configSchema } from '../config-schema';
+import { type TFunction } from 'i18next';
+import { launchWorkspace2, type Workspace2DefinitionProps } from '@openmrs/esm-framework';
+import { type AppointmentSummary, type AppointmentCountMap } from '../types';
+import { appointmentsFormWorkspace } from '../constants';
 
-export const getHighestAppointmentServiceLoad = (appointmentSummary: Array<any> = []) => {
-  const groupedAppointments = appointmentSummary?.map(({ countMap, serviceName }) => ({
+interface FlattenedAppointmentSummary {
+  serviceName: string;
+  countMap: AppointmentCountMap[];
+}
+
+interface ServiceLoadSummary {
+  serviceName: string;
+  count: number;
+}
+
+export const getHighestAppointmentServiceLoad = (
+  appointmentSummary: FlattenedAppointmentSummary[] = [],
+): ServiceLoadSummary | undefined => {
+  const groupedAppointments = appointmentSummary.map(({ countMap, serviceName }) => ({
     serviceName: serviceName,
-    count: countMap.reduce((cummulator, currentValue) => cummulator + currentValue.allAppointmentsCount, 0),
+    count: countMap.reduce((accumulator, currentValue) => accumulator + currentValue.allAppointmentsCount, 0),
   }));
+  if (groupedAppointments.length === 0) {
+    return undefined;
+  }
   return groupedAppointments.find((summary) => summary.count === Math.max(...groupedAppointments.map((x) => x.count)));
 };
 
-export const flattenAppointmentSummary = (appointmentToTransfrom: Array<any>) =>
-  appointmentToTransfrom.flatMap((el: any) => ({
+export const flattenAppointmentSummary = (
+  appointmentToTransform: AppointmentSummary[],
+): FlattenedAppointmentSummary[] =>
+  appointmentToTransform.flatMap((el) => ({
     serviceName: el.appointmentService.name,
-    countMap: Object.entries(el.appointmentCountMap).flatMap((el) => el[1]),
+    countMap: Object.entries(el.appointmentCountMap).flatMap(([, countMap]) => countMap),
   }));
 
 export const getServiceCountByAppointmentType = (
-  appointmentSummary: Array<AppointmentSummary>,
-  appointmentType: string,
-) => {
+  appointmentSummary: AppointmentSummary[],
+  appointmentType: 'allAppointmentsCount' | 'missedAppointmentsCount',
+): number => {
   return appointmentSummary
-    .map((el) => Object.entries(el.appointmentCountMap).flatMap((el) => el[1][appointmentType]))
+    .map((el) =>
+      Object.values(el.appointmentCountMap).map((countMap) => {
+        const value = countMap[appointmentType];
+        if (typeof value === 'number') {
+          return value;
+        }
+        return 0;
+      }),
+    )
     .flat(1)
     .reduce((count, val) => count + val, 0);
 };
 
-export const formatAMPM = (date) => {
-  let hours = date.getHours();
-  let minutes = date.getMinutes();
-  let ampm = hours >= 12 ? 'PM' : 'AM';
-  hours = hours % 12;
-  hours = hours ? hours : 12; // the hour '0' should be '12'
-  minutes = minutes < 10 ? '0' + minutes : minutes;
-  const strTime = hours + ':' + minutes + ' ' + ampm;
-  return strTime;
+export const formatAMPM = (date: Date): string => {
+  const hours24 = date.getHours();
+  const minutes = date.getMinutes();
+  const ampm = hours24 >= 12 ? 'PM' : 'AM';
+  const hours12 = hours24 % 12 || 12; // Convert 0 to 12
+  const minutesStr = minutes < 10 ? `0${minutes}` : minutes.toString();
+  return `${hours12}:${minutesStr} ${ampm}`;
 };
 
 export const isSameMonth = (cellDate: Dayjs, currentDate: Dayjs) => {
@@ -51,7 +75,7 @@ export const monthDays = (currentDate: Dayjs) => {
   let days: Dayjs[] = [];
 
   for (let i = lastMonth.daysInMonth() - monthStart.day() + 1; i <= lastMonth.daysInMonth(); i++) {
-    days.push(dayjs().month(lastMonth.month()).date(i));
+    days.push(lastMonth.date(i));
   }
 
   for (let i = 1; i <= monthDays; i++) {
@@ -61,12 +85,12 @@ export const monthDays = (currentDate: Dayjs) => {
   const dayLen = days.length > 30 ? 7 : 14;
 
   for (let i = 1; i < dayLen - monthEnd.day(); i++) {
-    days.push(dayjs().month(nextMonth.month()).date(i));
+    days.push(nextMonth.date(i));
   }
   return days;
 };
 
-export const getGender = (gender, t) => {
+export const getGender = (gender: string | undefined, t: TFunction<'translation', undefined>): string => {
   switch (gender) {
     case 'M':
       return t('male', 'Male');
@@ -80,3 +104,26 @@ export const getGender = (gender, t) => {
       return gender;
   }
 };
+
+export const launchCreateAppointmentForm = (t: TFunction<'translation', undefined>) => {
+  launchWorkspace2(
+    'appointments-patient-search-workspace',
+    {
+      initialQuery: '',
+      workspaceTitle: t('createNewAppointment', 'Create new appointment'),
+      onPatientSelected(
+        patientUuid: string,
+        patient: fhir.Patient,
+        launchChildWorkspace: Workspace2DefinitionProps['launchChildWorkspace'],
+        closeWorkspace: Workspace2DefinitionProps['closeWorkspace'],
+      ) {
+        launchChildWorkspace(appointmentsFormWorkspace, {
+          patientUuid: patient.id,
+        });
+      },
+    },
+    {
+      startVisitWorkspaceName: 'appointments-patient-search-start-visit-workspace',
+    },
+  );
+};

package/src/index.ts

@@ -92,8 +92,6 @@ export const metricsCardProvidersBooked = getAsyncLifecycle(
   options,
 );
 
-export const searchPatient = getAsyncLifecycle(() => import('./patient-search/patient-search.component'), options);
-
 // t('Appointments', 'Appointments')
 export const patientAppointmentsSummaryDashboardLink = getAsyncLifecycle(async () => {
   const commonLib = await import('@openmrs/esm-patient-common-lib');
@@ -120,9 +118,13 @@ export const cancelAppointmentModal = getAsyncLifecycle(
   options,
 );
 
-// t('createNewAppointment', 'Create new appointment')
 export const appointmentsFormWorkspace = getAsyncLifecycle(() => import('./form/appointments-form.workspace'), options);
 
+export const exportedAppointmentsFormWorkspace = getAsyncLifecycle(
+  () => import('./form/exported-appointments-form.workspace'),
+  options,
+);
+
 export const endAppointmentModal = getAsyncLifecycle(
   () => import('./appointments/common-components/end-appointment.modal'),
   options,

package/src/metrics/metrics-cards/highest-volume-service.extension.tsx

@@ -19,7 +19,7 @@ export default function HighestVolumeServiceExtension() {
   return (
     <MetricsCard
       headerLabel={t('highestServiceVolume', 'Highest volume service: {{time}}', { time: formattedStartDate })}
-      label={highestServiceLoad?.count !== 0 ? t(highestServiceLoad?.serviceName) : t('serviceName', 'Service name')}
+      label={highestServiceLoad ? t(highestServiceLoad.serviceName) : t('serviceName', 'Service name')}
       value={highestServiceLoad?.count ?? '--'}
     />
   );

package/src/metrics/metrics-cards/metrics-card.component.tsx

@@ -9,7 +9,7 @@ dayjs.extend(isSameOrBefore);
 
 interface MetricsCardProps {
   label: string;
-  value: number;
+  value: number | string;
   headerLabel: string;
   count?: { pendingAppointments: Array<any>; arrivedAppointments: Array<any> };
 }

package/src/metrics/metrics-header.component.tsx

@@ -4,10 +4,11 @@ import isToday from 'dayjs/plugin/isToday';
 import { useTranslation } from 'react-i18next';
 import { Calendar, Hospital } from '@carbon/react/icons';
 import { Button } from '@carbon/react';
-import { ExtensionSlot, isDesktop, launchWorkspace, navigate, useLayoutType } from '@openmrs/esm-framework';
+import { isDesktop, navigate, useLayoutType } from '@openmrs/esm-framework';
 import { spaHomePage } from '../constants';
 import { useAppointmentsStore } from '../store';
 import styles from './metrics-header.scss';
+import { launchCreateAppointmentForm } from '../helpers';
 
 dayjs.extend(isToday);
 
@@ -17,16 +18,6 @@ const MetricsHeader: React.FC = () => {
   const layout = useLayoutType();
   const responsiveSize = isDesktop(layout) ? 'sm' : 'md';
 
-  const launchCreateAppointmentForm = (patientUuid) => {
-    const props = {
-      patientUuid: patientUuid,
-      context: 'creating',
-      mutate: () => {}, // TODO get this to mutate properly
-    };
-
-    launchWorkspace('appointments-form-workspace', { ...props });
-  };
-
   return (
     <div className={styles.metricsContainer}>
       <div className={styles.metricsContent}>
@@ -39,19 +30,13 @@ const MetricsHeader: React.FC = () => {
           }>
           {t('appointmentsCalendar', 'Appointments calendar')}
         </Button>
-        <ExtensionSlot
-          name="patient-search-button-slot"
-          state={{
-            selectPatientAction: launchCreateAppointmentForm,
-            buttonText: t('createNewAppointment', 'Create new appointment'),
-            overlayHeader: t('createNewAppointment', 'Create new appointment'),
-            buttonProps: {
-              kind: 'primary',
-              renderIcon: (props) => <Hospital size={32} {...props} />,
-              size: responsiveSize,
-            },
-          }}
-        />
+        <Button
+          kind="primary"
+          renderIcon={(props) => <Hospital size={32} {...props} />}
+          size={responsiveSize}
+          onClick={() => launchCreateAppointmentForm(t)}>
+          {t('createNewAppointment', 'Create new appointment')}
+        </Button>
       </div>
     </div>
   );

package/src/patient-appointments/patient-appointments-action-menu.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Layer, OverflowMenu, OverflowMenuItem } from '@carbon/react';
-import { launchWorkspace, showModal, useLayoutType } from '@openmrs/esm-framework';
+import { launchWorkspace2, showModal, useLayoutType } from '@openmrs/esm-framework';
 import type { Appointment } from '../types';
 import styles from './patient-appointments-action-menu.scss';
 
@@ -15,11 +15,7 @@ export const PatientAppointmentsActionMenu = ({ appointment, patientUuid }: appo
   const isTablet = useLayoutType() === 'tablet';
 
   const handleLaunchEditAppointmentForm = () => {
-    launchWorkspace('appointments-form-workspace', {
-      appointment,
-      context: 'editing',
-      workspaceTitle: t('editAppointment', 'Edit appointment'),
-    });
+    launchWorkspace2('appointments-form-workspace', { appointment, patientUuid });
   };
 
   const handleLaunchCancelAppointmentModal = () => {

package/src/patient-appointments/patient-appointments-detailed-summary.extension.tsx

@@ -1,23 +1,184 @@
-import React from 'react';
-import PatientAppointmentsBase from './patient-appointments-base.component';
-import {
-  PatientAppointmentContextProvider,
-  PatientAppointmentContextTypes,
-} from '../hooks/patient-appointment-context';
-
-interface PatientAppointmentsDetailedSummaryProps {
+import React, { useState, useMemo } from 'react';
+import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import { Button, ContentSwitcher, DataTableSkeleton, InlineLoading, Layer, Switch, Tile } from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import { launchWorkspace2, useLayoutType } from '@openmrs/esm-framework';
+import { CardHeader, EmptyDataIllustration, ErrorState } from '@openmrs/esm-patient-common-lib';
+import { type Appointment } from '../types';
+import { usePatientAppointments } from './patient-appointments.resource';
+import PatientAppointmentsTable from './patient-appointments-table.component';
+import styles from './patient-appointments-detailed-summary.scss';
+
+interface PatientAppointmentsDetailProps {
   patientUuid: string;
+
+  /**
+   * Optional callback to launch the appropriate appointments form workspace, depending
+   * on which app is using this extension. If not provided, uses the default implementation
+   * for patient chart context.
+   */
+  launchAppointmentForm?(patientUuid: string, appointment?: Appointment): void;
+}
+
+enum AppointmentTypes {
+  UPCOMING = 0,
+  TODAY = 1,
+  PAST = 2,
 }
+
 /**
- * This component is wired in as an extension to render the patient appointments view (all appointments for a single patient) within of the context of the patient chart.
- * It uses the PatientAppointmentsBase component to render the actual appointments data.
+ * This extension displays a detailed summary of appointments for a single patient.
+ * Note that this extension can be used both in the patient chart and in the appointments app.
+ * Accordingly, the `launchAppointmentForm` callback is passed in to allow the app to define
+ * how the appointments form workspace is launched.
  */
-const PatientAppointmentsDetailedSummary: React.FC<PatientAppointmentsDetailedSummaryProps> = ({ patientUuid }) => {
-  return (
-    <PatientAppointmentContextProvider value={PatientAppointmentContextTypes.PATIENT_CHART}>
-      <PatientAppointmentsBase patientUuid={patientUuid} />
-    </PatientAppointmentContextProvider>
+const PatientAppointmentsDetailedSummary: React.FC<PatientAppointmentsDetailProps> = ({
+  patientUuid,
+  launchAppointmentForm,
+}) => {
+  const { t } = useTranslation();
+  const headerTitle = t('appointments', 'Appointments');
+  const isTablet = useLayoutType() === 'tablet';
+  const [switchedView, setSwitchedView] = useState(false);
+
+  // Default implementation for patient chart context
+  const defaultLaunchAppointmentForm = (patientUuid: string, appointment?: Appointment) => {
+    launchWorkspace2('appointments-form-workspace', { patientUuid, appointment });
+  };
+
+  const handleLaunchAppointmentForm = launchAppointmentForm || defaultLaunchAppointmentForm;
+
+  const [contentSwitcherValue, setContentSwitcherValue] = useState(0);
+  const startDate = useMemo(() => dayjs().subtract(6, 'month').toISOString(), []);
+  const {
+    data: appointmentsData,
+    error,
+    isLoading,
+    isValidating,
+  } = usePatientAppointments(
+    patientUuid,
+    startDate,
+    useMemo(() => new AbortController(), []),
   );
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" compact={!isTablet} zebra />;
+  }
+
+  if (error) {
+    return <ErrorState headerTitle={headerTitle} error={error} />;
+  }
+
+  if (appointmentsData && Object.keys(appointmentsData)?.length) {
+    return (
+      <div className={styles.widgetCard}>
+        <CardHeader title={headerTitle}>
+          {isValidating ? (
+            <span>
+              <InlineLoading />
+            </span>
+          ) : null}
+          <div className={styles.contentSwitcherWrapper}>
+            <ContentSwitcher
+              size={isTablet ? 'md' : 'sm'}
+              onChange={({ index }) => {
+                setContentSwitcherValue(index);
+                setSwitchedView(true);
+              }}>
+              <Switch name={'upcoming'} text={t('upcoming', 'Upcoming')} />
+              <Switch name={'today'} text={t('today', 'Today')} />
+              <Switch name={'past'} text={t('past', 'Past')} />
+            </ContentSwitcher>
+            <div className={styles.divider}>|</div>
+            <Button
+              kind="ghost"
+              renderIcon={(props) => <Add size={16} {...props} />}
+              iconDescription="Add Appointments"
+              onClick={() => handleLaunchAppointmentForm(patientUuid)}>
+              {t('add', 'Add')}
+            </Button>
+          </div>
+        </CardHeader>
+        {(() => {
+          if (contentSwitcherValue === AppointmentTypes.UPCOMING) {
+            if (appointmentsData.upcomingAppointments?.length) {
+              return (
+                <PatientAppointmentsTable
+                  patientAppointments={appointmentsData?.upcomingAppointments}
+                  switchedView={switchedView}
+                  setSwitchedView={setSwitchedView}
+                  patientUuid={patientUuid}
+                />
+              );
+            }
+            return (
+              <Layer>
+                <Tile className={styles.tile}>
+                  <EmptyDataIllustration />
+                  <p className={styles.content}>
+                    {t(
+                      'noUpcomingAppointmentsForPatient',
+                      'There are no upcoming appointments to display for this patient',
+                    )}
+                  </p>
+                </Tile>
+              </Layer>
+            );
+          }
+
+          if (contentSwitcherValue === AppointmentTypes.TODAY) {
+            if (appointmentsData.todaysAppointments?.length) {
+              return (
+                <PatientAppointmentsTable
+                  patientAppointments={appointmentsData?.todaysAppointments}
+                  switchedView={switchedView}
+                  setSwitchedView={setSwitchedView}
+                  patientUuid={patientUuid}
+                />
+              );
+            }
+            return (
+              <Layer>
+                <Tile className={styles.tile}>
+                  <EmptyDataIllustration />
+                  <p className={styles.content}>
+                    {t(
+                      'noCurrentAppointments',
+                      'There are no appointments scheduled for today to display for this patient',
+                    )}
+                  </p>
+                </Tile>
+              </Layer>
+            );
+          }
+
+          if (contentSwitcherValue === AppointmentTypes.PAST) {
+            if (appointmentsData.pastAppointments?.length) {
+              return (
+                <PatientAppointmentsTable
+                  patientAppointments={appointmentsData?.pastAppointments}
+                  switchedView={switchedView}
+                  setSwitchedView={setSwitchedView}
+                  patientUuid={patientUuid}
+                />
+              );
+            }
+            return (
+              <Layer>
+                <Tile className={styles.tile}>
+                  <EmptyDataIllustration />
+                  <p className={styles.content}>
+                    {t('noPastAppointments', 'There are no past appointments to display for this patient')}
+                  </p>
+                </Tile>
+              </Layer>
+            );
+          }
+        })()}
+      </div>
+    );
+  }
 };
 
 export default PatientAppointmentsDetailedSummary;

package/src/patient-appointments/{patient-appointments-base.test.tsx → patient-appointments-detailed-summary.test.tsx}

@@ -3,32 +3,32 @@ import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
 import { mockAppointmentsData } from '__mocks__';
-import { mockPatient, patientChartBasePath, renderWithContext, waitForLoadingToFinish, withSwr } from 'tools';
-import { type AppointmentsFetchResponse } from '../types';
 import {
-  PatientAppointmentContextProvider,
-  PatientAppointmentContextTypes,
-} from '../hooks/patient-appointment-context';
-import AppointmentsBase from './patient-appointments-base.component';
+  mockPatient,
+  patientChartBasePath,
+  renderWithContext,
+  renderWithSwr,
+  waitForLoadingToFinish,
+  withSwr,
+} from 'tools';
+import { type AppointmentsFetchResponse } from '../types';
+import AppointmentsDetailedSummary from './patient-appointments-detailed-summary.extension';
 
 const testProps = {
   basePath: patientChartBasePath,
   patientUuid: mockPatient.id,
+  launchAppointmentForm: jest.fn(),
 };
 
 const mockOpenmrsFetch = jest.mocked(openmrsFetch);
 
-describe('AppointmentsOverview', () => {
+describe('AppointmentsDetailedSummary', () => {
   it('renders an empty state if appointments data is unavailable', async () => {
     mockOpenmrsFetch.mockResolvedValueOnce({
       data: [],
     } as unknown as FetchResponse<AppointmentsFetchResponse>);
 
-    renderWithContext(
-      withSwr(<AppointmentsBase {...testProps} />),
-      PatientAppointmentContextProvider,
-      PatientAppointmentContextTypes.APPOINTMENTS_APP,
-    );
+    renderWithSwr(<AppointmentsDetailedSummary {...testProps} />);
 
     await waitForLoadingToFinish();
 
@@ -48,11 +48,7 @@ describe('AppointmentsOverview', () => {
 
     mockOpenmrsFetch.mockRejectedValueOnce(error);
 
-    renderWithContext(
-      withSwr(<AppointmentsBase {...testProps} />),
-      PatientAppointmentContextProvider,
-      PatientAppointmentContextTypes.APPOINTMENTS_APP,
-    );
+    renderWithSwr(<AppointmentsDetailedSummary {...testProps} />);
 
     await waitForLoadingToFinish();
 
@@ -71,11 +67,7 @@ describe('AppointmentsOverview', () => {
       ...mockAppointmentsData,
     } as unknown as FetchResponse<AppointmentsFetchResponse>);
 
-    renderWithContext(
-      withSwr(<AppointmentsBase {...testProps} />),
-      PatientAppointmentContextProvider,
-      PatientAppointmentContextTypes.APPOINTMENTS_APP,
-    );
+    renderWithSwr(<AppointmentsDetailedSummary {...testProps} />);
 
     await waitForLoadingToFinish();
 

package/src/patient-appointments/patient-appointments-overview.component.tsx

@@ -1,12 +1,8 @@
 import React from 'react';
 import { DataTableSkeleton } from '@carbon/react';
 import { useParams } from 'react-router-dom';
-import { usePatient, useLayoutType, isDesktop, WorkspaceContainer } from '@openmrs/esm-framework';
-import {
-  PatientAppointmentContextProvider,
-  PatientAppointmentContextTypes,
-} from '../hooks/patient-appointment-context';
-import PatientAppointmentsBase from './patient-appointments-base.component';
+import { usePatient, useLayoutType, isDesktop, WorkspaceContainer, launchWorkspace2 } from '@openmrs/esm-framework';
+import PatientAppointmentsDetailedSummary from './patient-appointments-detailed-summary.extension';
 import PatientAppointmentsHeader from './patient-appointments-header.component';
 import styles from './patient-appointments-overview.scss';
 
@@ -22,18 +18,19 @@ const PatientAppointmentsOverview: React.FC = () => {
   const response = usePatient(params.patientUuid);
   const layout = useLayoutType();
 
-  return (
-    <PatientAppointmentContextProvider value={PatientAppointmentContextTypes.APPOINTMENTS_APP}>
-      {response.isLoading ? (
-        <DataTableSkeleton role="progressbar" compact={isDesktop(layout)} zebra />
-      ) : (
-        <div className={styles.patientAppointmentsOverview}>
-          <PatientAppointmentsHeader patient={response.patient} />
-          <PatientAppointmentsBase patientUuid={response.patient.id} />
-          <WorkspaceContainer overlay contextKey={`patient/${params.patientUuid}`} />
-        </div>
-      )}
-    </PatientAppointmentContextProvider>
+  return response.isLoading ? (
+    <DataTableSkeleton role="progressbar" compact={isDesktop(layout)} zebra />
+  ) : (
+    <div className={styles.patientAppointmentsOverview}>
+      <PatientAppointmentsHeader patient={response.patient} />
+      <PatientAppointmentsDetailedSummary
+        patientUuid={response.patient.id}
+        launchAppointmentForm={(patientUuid, appointment) => {
+          launchWorkspace2('appointments-form-workspace', { patientUuid, appointment });
+        }}
+      />
+      <WorkspaceContainer overlay contextKey={`patient/${params.patientUuid}`} />
+    </div>
   );
 };
 

package/src/routes.json

@@ -97,10 +97,6 @@
       "component": "patientUpcomingAppointmentsWidget",
       "slot": "visit-form-top-slot"
     },
-    {
-      "name": "search-patient",
-      "component": "searchPatient"
-    },
     {
       "name": "home-appointments-tile",
       "slot": "home-metrics-tiles-slot",
@@ -135,12 +131,31 @@
       "component": "cancelAppointmentModal"
     }
   ],
-  "workspaces": [
+  "workspaceGroups2": [{
+      "name": "appointments-group"
+    }
+  ],
+  "workspaceWindows2": [
+    {
+      "name": "appointments-window",
+      "group": "appointments-group"
+    }
+  ],
+  "workspaces2": [
     {
       "name": "appointments-form-workspace",
       "component": "appointmentsFormWorkspace",
-      "title": "createNewAppointment",
-      "type": "form"
+      "window": "appointments-window"
+    },
+    {
+      "name": "appointments-patient-search-workspace",
+      "component": "@openmrs/esm-patient-search-app#patientSearchWorkspace2",
+      "window": "appointments-window"
+    },
+    {
+      "name": "appointments-patient-search-start-visit-workspace",
+      "component": "@openmrs/esm-patient-chart-app#exportedVisitForm",
+      "window": "appointments-window"
     }
   ]
 }