@kenyaemr/esm-appointments-app 8.0.1-pre.99 → 8.0.3-pre.131

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0"},"modals":[{"name":"end-appointment-modal","component":"endAppointmentModal"}],"extensions":[{"name":"home-appointments","slot":"homepage-widgets-slot","component":"homeAppointments","order":1},{"name":"clinical-appointments-dashboard-link","slot":"homepage-dashboard-slot","component":"appointmentsDashboardLink","meta":{"name":"appointments","slot":"clinical-appointments-dashboard-slot","title":"Appointments"}},{"component":"root","name":"clinical-appointments-dashboard","slot":"clinical-appointments-dashboard-slot"},{"name":"appointments-calendar-dashboard-link","slot":"calendar-dashboard-slot","component":"appointmentsCalendarDashboardLink"},{"name":"check-in-appointment-modal","slot":"todays-appointment-slot","component":"checkInModal"},{"name":"todays-appointments-dashboard","slot":"todays-appointment-slot","component":"homeAppointments"},{"name":"expected-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"checked-in-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"completed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"missed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"cancelled-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"early-appointments-panel","component":"earlyAppointments"},{"name":"appointments-form-workspace","component":"appointmentsFormWorkspace","meta":{"title":{"key":"createNewAppointment","default":"Create new appointment"}}},{"name":"patient-appointments-summary-dashboard","component":"patientAppointmentsSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-appointments-dashboard-slot","title":"Appointments","path":"Appointments"}},{"name":"patientAppointments-details-widget","component":"patientAppointmentsDetailedSummary","slot":"patient-chart-appointments-dashboard-slot","meta":{"columnSpan":1}},{"name":"patient-upcoming-appointment-widget","component":"patientUpcomingAppointmentsWidget","slot":"upcoming-appointment-slot"},{"name":"patient-appointment-cancel-confirmation-dialog","component":"patientAppointmentsCancelConfirmationDialog"},{"name":"edit-appointments-form","component":"appointementForm","meta":{"title":{"key":"editAppointment","default":"Edit Appointment"}}},{"name":"search-patient","component":"searchPatient"},{"name":"create-appointment","component":"appointementForm","meta":{"title":{"key":"appointmentForm","default":"Appointment Form"}}},{"name":"add-appointment","component":"appointementForm","meta":{"title":{"key":"createNewAppointment","default":"Create new appointment"}}},{"name":"home-appointments-tile","slot":"home-metrics-tiles-slot","component":"homeAppointmentsTile"}],"version":"8.0.1-pre.99"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0"},"extensions":[{"name":"home-appointments","slot":"homepage-widgets-slot","component":"homeAppointments","order":1},{"name":"clinical-appointments-dashboard-link","slot":"homepage-dashboard-slot","component":"appointmentsDashboardLink","meta":{"name":"appointments","slot":"clinical-appointments-dashboard-slot","title":"Appointments"}},{"component":"root","name":"clinical-appointments-dashboard","slot":"clinical-appointments-dashboard-slot"},{"name":"appointments-calendar-dashboard-link","slot":"calendar-dashboard-slot","component":"appointmentsCalendarDashboardLink"},{"name":"todays-appointments-dashboard","slot":"todays-appointment-slot","component":"homeAppointments"},{"name":"expected-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"checked-in-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"completed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"missed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"cancelled-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"early-appointments-panel","component":"earlyAppointments"},{"name":"appointments-form-workspace","component":"appointmentsFormWorkspace","meta":{"title":{"key":"createNewAppointment","default":"Create new appointment"}}},{"name":"patient-appointments-summary-dashboard","component":"patientAppointmentsSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-appointments-dashboard-slot","title":"Appointments","path":"Appointments"}},{"name":"patientAppointments-details-widget","component":"patientAppointmentsDetailedSummary","slot":"patient-chart-appointments-dashboard-slot","meta":{"columnSpan":1}},{"name":"patient-upcoming-appointment-widget","component":"patientUpcomingAppointmentsWidget","slot":"upcoming-appointment-slot"},{"name":"edit-appointments-form","component":"appointmentsForm","meta":{"title":{"key":"editAppointment","default":"Edit Appointment"}}},{"name":"search-patient","component":"searchPatient"},{"name":"create-appointment","component":"appointmentsForm","meta":{"title":{"key":"appointmentForm","default":"Appointment Form"}}},{"name":"add-appointment","component":"appointmentsForm","meta":{"title":{"key":"createNewAppointment","default":"Create new appointment"}}},{"name":"home-appointments-tile","slot":"home-metrics-tiles-slot","component":"homeAppointmentsTile"}],"modals":[{"name":"end-appointment-modal","component":"endAppointmentModal"},{"name":"patient-appointment-cancel-confirmation-dialog","component":"patientAppointmentsCancelConfirmationDialog"}],"version":"8.0.3-pre.131"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-appointments-app",
-  "version": "8.0.1-pre.99",
+  "version": "8.0.3-pre.131",
   "description": "Appointments front-end module for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-appointments-app.js",
   "main": "src/index.ts",
@@ -44,7 +44,7 @@
   },
   "peerDependencies": {
     "@openmrs/esm-framework": "5.x",
-    "@openmrs/esm-patient-common-lib": "7.x",
+    "@openmrs/esm-patient-common-lib": "8.x",
     "react": "18.x",
     "react-i18next": "11.x",
     "react-router-dom": "6.x",
@@ -53,5 +53,5 @@
   "devDependencies": {
     "webpack": "^5.74.0"
   },
-  "stableVersion": "8.0.0"
+  "stableVersion": "8.0.2"
 }

package/src/appointments/appointment-tabs.component.tsx

@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Tab, TabList, Tabs, TabPanel, TabPanels } from '@carbon/react';
-
-import { type ConfigObject } from '../config-schema';
 import { useConfig } from '@openmrs/esm-framework';
+import { type ConfigObject } from '../config-schema';
 import ScheduledAppointments from './scheduled/scheduled-appointments.component';
 import UnscheduledAppointments from './unscheduled/unscheduled-appointments.component';
 import styles from './appointment-tabs.scss';

package/src/appointments/common-components/appointments-table.component.tsx

@@ -37,7 +37,7 @@ import {
 } from '@openmrs/esm-framework';
 import { Download } from '@carbon/react/icons';
 import { EmptyState } from '../../empty-state/empty-state.component';
-import { downloadAppointmentsAsExcel } from '../../helpers/excel';
+import { exportAppointmentsToSpreadsheet } from '../../helpers/excel';
 import { useTodaysVisits } from '../../hooks/useTodaysVisits';
 import { type Appointment } from '../../types';
 import { type ConfigObject } from '../../config-schema';
@@ -154,7 +154,7 @@ const AppointmentsTable: React.FC<AppointmentsTableProps> = ({ appointments, isL
                   noToday: true,
                 })
               : null;
-            downloadAppointmentsAsExcel(appointments, `${tableHeading}_appointments_${date}`);
+            exportAppointmentsToSpreadsheet(appointments, `${tableHeading}_appointments_${date}`);
           }}>
           {t('download', 'Download')}
         </Button>

package/src/appointments/common-components/appointments-table.test.tsx

@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 import { getDefaultsFromConfigSchema, useConfig, defineConfigSchema } from '@openmrs/esm-framework';
 import { type ConfigObject, configSchema } from '../../config-schema';
 import type { Appointment, AppointmentKind, AppointmentStatus } from '../../types';
-import { downloadAppointmentsAsExcel } from '../../helpers/excel';
+import { exportAppointmentsToSpreadsheet } from '../../helpers/excel';
 import { getByTextWithMarkup } from 'tools';
 import AppointmentsTable from './appointments-table.component';
 
@@ -62,7 +62,7 @@ const mockAppointments = [
   },
 ] as unknown as Array<Appointment>;
 
-const mockDownloadAppointmentsAsExcel = jest.mocked(downloadAppointmentsAsExcel);
+const mockExportAppointmentsToSpreadsheet = jest.mocked(exportAppointmentsToSpreadsheet);
 const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 
 jest.mock('../../helpers/excel');
@@ -123,7 +123,7 @@ describe('AppointmentsTable', () => {
     const downloadButton = screen.getByRole('button', { name: /download/i });
     await user.click(downloadButton);
     expect(downloadButton).toBeInTheDocument();
-    expect(mockDownloadAppointmentsAsExcel).toHaveBeenCalledWith(mockAppointments, expect.anything());
+    expect(mockExportAppointmentsToSpreadsheet).toHaveBeenCalledWith(mockAppointments, expect.anything());
   });
 });
 

package/src/appointments/common-components/end-appointment.modal.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useVisit, updateVisit, parseDate, showSnackbar } from '@openmrs/esm-framework';
+import { showSnackbar, updateVisit, useVisit } from '@openmrs/esm-framework';
 import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { changeAppointmentStatus } from '../../patient-appointments/patient-appointments.resource';
 import { useMutateAppointments } from '../../form/appointments-form.resource';
@@ -12,48 +12,43 @@ interface EndAppointmentModalProps {
 }
 
 const EndAppointmentModal: React.FC<EndAppointmentModalProps> = ({ patientUuid, appointmentUuid, closeModal }) => {
-  const { activeVisit, mutate } = useVisit(patientUuid);
   const { t } = useTranslation();
+  const { activeVisit, mutate } = useVisit(patientUuid);
   const { mutateAppointments } = useMutateAppointments();
 
-  const endAppointment = () => {
-    return changeAppointmentStatus('Completed', appointmentUuid)
+  const handleEndAppointment = useCallback(() => {
+    changeAppointmentStatus('Completed', appointmentUuid)
       .then(() => {
         mutateAppointments();
         if (activeVisit) {
           const abortController = new AbortController();
-          const endVisitPayload = {
-            location: activeVisit.location.uuid,
-            startDatetime: parseDate(activeVisit.startDatetime),
-            visitType: activeVisit.visitType.uuid,
-            stopDatetime: new Date(),
-          };
-          updateVisit(activeVisit.uuid, endVisitPayload, abortController)
-            .toPromise()
+          const endVisitPayload = { stopDatetime: new Date() };
+
+          return updateVisit(activeVisit.uuid, endVisitPayload, abortController)
             .then(() => {
-              mutate();
               showSnackbar({
                 title: t('appointmentEnded', 'Appointment ended'),
                 subtitle: t(
                   'appointmentEndedAndVisitClosedSuccessfully',
-                  'Appointment successfully ended and visit successfully closed.',
+                  'Appointment successfully ended and visit successfully closed',
                 ),
                 isLowContrast: true,
                 kind: 'success',
               });
-              closeModal();
+              mutate();
             })
-            .catch((err) => {
-              closeModal();
+            .catch((error) => {
               showSnackbar({
-                title: t('appointmentEndedButVisitNotClosedError', 'Appointment ended, but error closing visit'),
-                subtitle: err?.message,
+                title: t(
+                  'appointmentEndedButVisitNotClosedError',
+                  'Appointment ended successfully, but there was an error closing the visit.',
+                ),
+                subtitle: error?.message,
                 kind: 'error',
                 isLowContrast: true,
               });
             });
         } else {
-          closeModal();
           showSnackbar({
             title: t('appointmentEnded', 'Appointment ended'),
             subtitle: t('appointmentEndedSuccessfully', 'Appointment successfully ended.'),
@@ -62,16 +57,18 @@ const EndAppointmentModal: React.FC<EndAppointmentModalProps> = ({ patientUuid,
           });
         }
       })
-      .catch((err) => {
-        closeModal();
+      .catch((error) => {
         showSnackbar({
           title: t('appointmentEndError', 'Error ending appointment'),
-          subtitle: err?.message,
+          subtitle: error?.message,
           kind: 'error',
           isLowContrast: true,
         });
+      })
+      .finally(() => {
+        closeModal();
       });
-  };
+  }, [activeVisit, mutate, mutateAppointments, closeModal, patientUuid, appointmentUuid]);
 
   return (
     <div>
@@ -84,7 +81,7 @@ const EndAppointmentModal: React.FC<EndAppointmentModalProps> = ({ patientUuid,
           {activeVisit
             ? t(
                 'endAppointmentAndVisitConfirmationMessage',
-                'Checking the patient out will mark the appointment as complete, and close out the active visit for this patient.',
+                'Checking the patient out will mark the appointment as complete and close out the active visit for this patient.',
               )
             : t('endAppointmentConfirmationMessage', 'Checking the patient out will mark the appointment as complete.')}
         </p>
@@ -93,7 +90,7 @@ const EndAppointmentModal: React.FC<EndAppointmentModalProps> = ({ patientUuid,
         <Button kind="secondary" onClick={closeModal}>
           {t('cancel', 'Cancel')}
         </Button>
-        <Button kind="danger" onClick={endAppointment}>
+        <Button kind="danger" onClick={handleEndAppointment}>
           {t('checkOut', 'Check out')}
         </Button>
       </ModalFooter>

package/src/appointments/common-components/end-appointment.test.tsx

@@ -1,8 +1,14 @@
 import React from 'react';
-import { of } from 'rxjs';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { updateVisit, showSnackbar, useVisit, type VisitReturnType } from '@openmrs/esm-framework';
+import {
+  updateVisit,
+  showSnackbar,
+  useVisit,
+  type VisitReturnType,
+  type FetchResponse,
+  type Visit,
+} from '@openmrs/esm-framework';
 import { changeAppointmentStatus } from '../../patient-appointments/patient-appointments.resource';
 import EndAppointmentModal from './end-appointment.modal';
 
@@ -20,7 +26,7 @@ jest.mock('../../form/appointments-form.resource', () => ({
 
 describe('EndAppointmentModal', () => {
   beforeEach(() => {
-    mockUpdateVisit.mockImplementation(() => of({}));
+    mockUpdateVisit.mockResolvedValue({} as FetchResponse<Visit>);
   });
 
   it('has a cancel button that closes the modal', async () => {
@@ -73,7 +79,7 @@ describe('EndAppointmentModal', () => {
     expect(closeModal).toHaveBeenCalled();
     expect(showSnackbar).toHaveBeenCalledWith({
       title: 'Appointment ended',
-      subtitle: 'Appointment successfully ended and visit successfully closed.',
+      subtitle: 'Appointment successfully ended and visit successfully closed',
       isLowContrast: true,
       kind: 'success',
     });

package/src/appointments/unscheduled/unscheduled-appointments.component.tsx

@@ -19,7 +19,7 @@ import {
 import { Download } from '@carbon/react/icons';
 import { ConfigurableLink, useConfig, usePagination } from '@openmrs/esm-framework';
 import { useUnscheduledAppointments } from '../../hooks/useUnscheduledAppointments';
-import { downloadUnscheduledAppointments } from '../../helpers/excel';
+import { exportUnscheduledAppointmentsToSpreadsheet } from '../../helpers/excel';
 import { EmptyState } from '../../empty-state/empty-state.component';
 import { getPageSizes, useSearchResults } from '../utils';
 import { type ConfigObject } from '../../config-schema';
@@ -99,7 +99,7 @@ const UnscheduledAppointments: React.FC = () => {
                   size="lg"
                   kind="tertiary"
                   renderIcon={Download}
-                  onClick={() => downloadUnscheduledAppointments(unscheduledAppointments)}>
+                  onClick={() => exportUnscheduledAppointmentsToSpreadsheet(unscheduledAppointments)}>
                   {t('download', 'Download')}
                 </Button>
               </TableToolbarContent>

package/src/appointments/unscheduled/unscheduled-appointments.test.tsx

@@ -5,10 +5,10 @@ import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
 import { type ConfigObject, configSchema } from '../../config-schema';
 import { getByTextWithMarkup } from 'tools';
 import { useUnscheduledAppointments } from '../../hooks/useUnscheduledAppointments';
-import { downloadUnscheduledAppointments } from '../../helpers/excel';
+import { exportUnscheduledAppointmentsToSpreadsheet } from '../../helpers/excel';
 import UnscheduledAppointments from './unscheduled-appointments.component';
 
-const mockDownloadAppointmentsAsExcel = jest.mocked(downloadUnscheduledAppointments);
+const mockExportUnscheduledAppointmentsToSpreadsheet = jest.mocked(exportUnscheduledAppointmentsToSpreadsheet);
 const mockUseUnscheduledAppointments = jest.mocked(useUnscheduledAppointments);
 const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 
@@ -113,7 +113,7 @@ describe('UnscheduledAppointments', () => {
     const downloadButton = await screen.findByText('Download');
     expect(downloadButton).toBeInTheDocument();
     await user.click(downloadButton);
-    expect(mockDownloadAppointmentsAsExcel).toHaveBeenCalledWith(mockUnscheduledAppointments);
+    expect(mockExportUnscheduledAppointmentsToSpreadsheet).toHaveBeenCalledWith(mockUnscheduledAppointments);
   });
 
   it('renders a message if there are no unscheduled appointments', async () => {

package/src/appointments.component.tsx

@@ -30,7 +30,7 @@ const Appointments: React.FC = () => {
   return (
     <SelectedDateContext.Provider value={{ selectedDate, setSelectedDate }}>
       <AppointmentsHeader
-        title={t('home', 'Home')}
+        title={t('appointments', 'Appointments')}
         appointmentServiceType={appointmentServiceType}
         onChange={setAppointmentServiceType}
       />

package/src/appointments.test.tsx

@@ -3,13 +3,13 @@ import { render, screen } from '@testing-library/react';
 import Appointments from './appointments.component';
 
 describe('Appointments', () => {
-  it('should render correctly', () => {
+  it('renders the appointments dashboard', async () => {
     render(<Appointments />);
 
-    expect(screen.getByTitle(/patient queue illustration/i)).toBeInTheDocument();
-    expect(screen.getByText(/^appointments$/i)).toBeInTheDocument();
-    expect(screen.getByText(/home/i)).toBeInTheDocument();
-    expect(screen.getByPlaceholderText(/DD-MMM-YYYY/i)).toBeInTheDocument();
+    await screen.findByText(/^appointments$/i);
     expect(screen.getByRole('button', { name: /appointments calendar/i })).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(/dd-mmm-yyyy/i)).toBeInTheDocument();
+    expect(screen.getByRole('combobox', { name: /view/i })).toBeInTheDocument();
+    expect(screen.getByText(/appointment metrics/i)).toBeInTheDocument();
   });
 });

package/src/calendar/appointments-calendar-view.component.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import dayjs from 'dayjs';
+import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useAppointmentsCalendar } from '../hooks/useAppointmentsCalendar';
 import AppointmentsHeader from '../header/appointments-header.component';
 import CalendarHeader from './header/calendar-header.component';
 import MonthlyCalendarView from './monthly/monthly-calendar-view.component';
 import SelectedDateContext from '../hooks/selectedDateContext';
-import { useParams } from 'react-router-dom';
 import { omrsDateFormat } from '../constants';
 
 const AppointmentsCalendarView: React.FC = () => {

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

@@ -1,17 +1,18 @@
 import React, { useContext } from 'react';
+import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@carbon/react';
 import { ArrowLeft } from '@carbon/react/icons';
 import { navigate } from '@openmrs/esm-framework';
 import { spaHomePage } from '../../constants';
-import styles from './calendar-header.scss';
 import SelectedDateContext from '../../hooks/selectedDateContext';
-import dayjs from 'dayjs';
+import styles from './calendar-header.scss';
 
 const CalendarHeader: React.FC = () => {
   const { t } = useTranslation();
   const { selectedDate } = useContext(SelectedDateContext);
-  const backButtonOnClick = () => {
+
+  const handleClick = () => {
     navigate({ to: `${spaHomePage}/appointments/${dayjs(selectedDate).format('YYYY-MM-DD')}` });
   };
 
@@ -19,10 +20,11 @@ const CalendarHeader: React.FC = () => {
     <div className={styles.calendarHeaderContainer}>
       <div className={styles.titleContainer}>
         <Button
+          className={styles.backButton}
+          iconDescription={t('back', 'Back')}
           kind="ghost"
-          onClick={backButtonOnClick}
+          onClick={handleClick}
           renderIcon={ArrowLeft}
-          iconDescription={t('back', 'Back')}
           size="lg">
           <span>{t('back', 'Back')}</span>
         </Button>

package/src/calendar/header/calendar-header.scss

@@ -24,6 +24,18 @@
   align-items: center;
 }
 
+.backButton {
+  svg {
+    order: 1;
+    margin-right: layout.$spacing-03;
+    margin-left: 0 !important;
+  }
+
+  span {
+    order: 2;
+  }
+}
+
 // Overriding styles for RTL support
 html[dir='rtl'] {
   .titleContent {

package/src/calendar/monthly/days-of-week.component.tsx

@@ -1,15 +1,17 @@
-import dayjs from 'dayjs';
 import React from 'react';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
 import styles from './days-of-week.scss';
 
-interface DaysOfWeekProp {
+interface DaysOfWeekProps {
   dayOfWeek: string;
 }
-const DaysOfWeekCard: React.FC<DaysOfWeekProp> = ({ dayOfWeek }) => {
+
+const DaysOfWeekCard: React.FC<DaysOfWeekProps> = ({ dayOfWeek }) => {
   const isToday = dayjs(new Date()).format('ddd').toUpperCase() === dayOfWeek;
   return (
     <div tabIndex={0} role="button" className={styles.tileContainer}>
-      <span className={isToday ? styles.bold : ''}>{dayOfWeek}</span>
+      <span className={classNames({ [styles.bold]: isToday })}>{dayOfWeek}</span>
     </div>
   );
 };

package/src/calendar/monthly/days-of-week.scss

@@ -10,6 +10,11 @@
   width: 100%;
   align-items: center;
   border: 1px solid colors.$gray-20;
+  border-right: none;
+
+  &:last-child {
+    border-right: 1px solid colors.$gray-20;
+  }
 
   & > span {
     font-size: layout.$spacing-05;

package/src/calendar/monthly/monthly-calendar-view.component.tsx

@@ -4,9 +4,9 @@ import isBetween from 'dayjs/plugin/isBetween';
 import { type DailyAppointmentsCountByService } from '../../types';
 import { monthDays } from '../../helpers';
 import MonthlyViewWorkload from './monthly-workload-view.component';
-import MonthlyHeader from './monthly-header.module';
-import styles from '../appointments-calendar-view-view.scss';
+import MonthlyHeader from './monthly-header.component';
 import SelectedDateContext from '../../hooks/selectedDateContext';
+import styles from '../appointments-calendar-view-view.scss';
 
 dayjs.extend(isBetween);
 

package/src/calendar/monthly/monthly-header.component.tsx

@@ -0,0 +1,49 @@
+import React, { useCallback, useContext } from 'react';
+import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import { formatDate } from '@openmrs/esm-framework';
+import { omrsDateFormat } from '../../constants';
+import DaysOfWeekCard from './days-of-week.component';
+import SelectedDateContext from '../../hooks/selectedDateContext';
+import styles from './monthly-header.scss';
+
+const DAYS_IN_WEEK = ['SUN', 'MON', 'TUE', 'WED', 'THUR', 'FRI', 'SAT'];
+
+const MonthlyHeader: React.FC = () => {
+  const { t } = useTranslation();
+  const { selectedDate, setSelectedDate } = useContext(SelectedDateContext);
+
+  const handleSelectPrevMonth = useCallback(() => {
+    setSelectedDate(dayjs(selectedDate).subtract(1, 'month').format(omrsDateFormat));
+  }, [selectedDate, setSelectedDate]);
+
+  const handleSelectNextMonth = useCallback(() => {
+    setSelectedDate(dayjs(selectedDate).add(1, 'month').format(omrsDateFormat));
+  }, [selectedDate, setSelectedDate]);
+
+  return (
+    <>
+      <div className={styles.container}>
+        <Button
+          aria-label={t('previousMonth', 'Previous month')}
+          kind="tertiary"
+          onClick={handleSelectPrevMonth}
+          size="sm">
+          {t('prev', 'Prev')}
+        </Button>
+        <span>{formatDate(new Date(selectedDate), { day: false, time: false, noToday: true })}</span>
+        <Button aria-label={t('nextMonth', 'Next month')} kind="tertiary" onClick={handleSelectNextMonth} size="sm">
+          {t('next', 'Next')}
+        </Button>
+      </div>
+      <div className={styles.workLoadCard}>
+        {DAYS_IN_WEEK.map((day) => (
+          <DaysOfWeekCard key={day} dayOfWeek={day} />
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default MonthlyHeader;

package/src/calendar/monthly/monthly-view-workload.scss

@@ -13,10 +13,6 @@
   text-align: right;
   @include type.type-style('body-compact-02');
 
-  &:nth-child(-n + 7) {
-    border-top: 1px solid colors.$gray-20;
-  }
-
   &:nth-child(7n) {
     border-right: 1px solid colors.$gray-20;
   }

package/src/calendar/monthly/monthly-workload-view-expanded.component.tsx

@@ -29,7 +29,12 @@ const MonthlyWorkloadViewExpanded: React.FC<MonthlyWorkloadViewExpandedProps> =
 
   return (
     <Popover open={isOpen} align="top" ref={popoverRef}>
-      <button className={styles.showMoreItems} onClick={() => setIsOpen((prev) => !prev)}>
+      <button
+        className={styles.showMoreItems}
+        onClick={(e) => {
+          e.stopPropagation();
+          setIsOpen((prev) => !prev);
+        }}>
         {t('countMore', '{{count}} more', { count })}
       </button>
       <PopoverContent>

package/src/calendar/monthly/monthly-workload-view.component.tsx

@@ -1,14 +1,14 @@
 import React, { useContext, useMemo } from 'react';
 import classNames from 'classnames';
 import dayjs, { type Dayjs } from 'dayjs';
+import { User } from '@carbon/react/icons';
 import { navigate, useLayoutType } from '@openmrs/esm-framework';
-import { isSameMonth } from '../../helpers';
 import { spaHomePage } from '../../constants';
-import styles from './monthly-view-workload.scss';
+import { isSameMonth } from '../../helpers';
 import { type DailyAppointmentsCountByService } from '../../types';
 import SelectedDateContext from '../../hooks/selectedDateContext';
-import { User } from '@carbon/react/icons';
 import MonthlyWorkloadViewExpanded from './monthly-workload-view-expanded.component';
+import styles from './monthly-view-workload.scss';
 
 export interface MonthlyWorkloadViewProps {
   events: Array<DailyAppointmentsCountByService>;

package/src/config-schema.ts

@@ -2,6 +2,11 @@ import { Type, restBaseUrl, validators } from '@openmrs/esm-framework';
 import { spaHomePage } from './constants';
 
 export const configSchema = {
+  includePhoneNumberInExcelSpreadsheet: {
+    _type: Type.Boolean,
+    _description: 'Whether to include phone numbers in the exported Excel spreadsheet',
+    _default: false,
+  },
   allowAllDayAppointments: {
     _type: Type.Boolean,
     _description: 'Whether to allow scheduling of all-day appointments (vs appointments with start time and end time)',
@@ -146,4 +151,5 @@ export interface ConfigObject {
   showUnscheduledAppointmentsTab: boolean;
   useBahmniAppointmentsUI: boolean;
   useFullViewPrivilege: boolean;
+  includePhoneNumberInExcelSpreadsheet: boolean;
 }

package/src/constants.ts

@@ -1,6 +1,6 @@
 export const spaRoot = window['getOpenmrsSpaBase'];
 export const basePath = '/appointments';
-export const spaHomePage = ` ${window.getOpenmrsSpaBase()}home`;
+export const spaHomePage = `${window.spaBase}/home`;
 export const omrsDateFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZZ';
 export const appointmentLocationTagName = 'Appointment Location';