@kenyaemr/esm-appointments-app 8.1.1-pre.129 → 8.1.2-pre.152

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

@@ -5,14 +5,16 @@ import {
   type FetchResponse,
   getDefaultsFromConfigSchema,
   openmrsFetch,
+  showSnackbar,
   useConfig,
   useLocations,
   useSession,
 } from '@openmrs/esm-framework';
-import { mockUseAppointmentServiceData, mockSession, mockLocations } from '__mocks__';
+import { configSchema, type ConfigObject } from '../config-schema';
+import { mockUseAppointmentServiceData, mockSession, mockLocations, mockProviders } from '__mocks__';
 import { mockPatient, renderWithSwr, waitForLoadingToFinish } from 'tools';
 import { saveAppointment } from './appointments-form.resource';
-import { configSchema, type ConfigObject } from '../config-schema';
+import { useProviders } from '../hooks/useProviders';
 import AppointmentForm from './appointments-form.component';
 
 const defaultProps = {
@@ -20,79 +22,40 @@ const defaultProps = {
   closeWorkspace: jest.fn(),
   patientUuid: mockPatient.id,
   promptBeforeClosing: jest.fn(),
+  closeWorkspaceWithSavedChanges: jest.fn(),
+  setTitle: jest.fn(),
 };
 
-const mockCreateAppointment = jest.mocked(saveAppointment);
 const mockOpenmrsFetch = jest.mocked(openmrsFetch);
+const mockSaveAppointment = jest.mocked(saveAppointment);
+const mockShowSnackbar = jest.mocked(showSnackbar);
 const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 const mockUseLocations = jest.mocked(useLocations);
+const mockUseProviders = jest.mocked(useProviders);
 const mockUseSession = jest.mocked(useSession);
 
-jest.mock('react-hook-form', () => ({
-  ...jest.requireActual('react-hook-form'),
-  useForm: jest.fn().mockImplementation(() => ({
-    handleSubmit: () => jest.fn(),
-    control: {
-      register: jest.fn(),
-      unregister: jest.fn(),
-      getFieldState: jest.fn(),
-      _names: {
-        array: new Set('test'),
-        mount: new Set('test'),
-        unMount: new Set('test'),
-        watch: new Set('test'),
-        focus: 'test',
-        watchAll: false,
-      },
-      _subjects: {
-        watch: jest.fn(),
-        array: jest.fn(),
-        state: jest.fn(),
-      },
-      _getWatch: jest.fn(),
-      _formValues: [],
-      _defaultValues: [],
-    },
-    getValues: (str) => {
-      if (str === 'recurringPatternDaysOfWeek') {
-        return [];
-      } else {
-        return null;
-      }
-    },
-    setValue: () => jest.fn(),
-    formState: () => jest.fn(),
-    watch: () => jest.fn(),
-  })),
-  Controller: ({ render }) =>
-    render({
-      field: {
-        onChange: jest.fn(),
-        onBlur: jest.fn(),
-        value: '',
-        ref: jest.fn(),
-      },
-      formState: {
-        isSubmitted: false,
-      },
-      fieldState: {
-        isTouched: false,
-      },
-    }),
-  useSubscribe: () => ({
-    r: { current: { subject: { subscribe: () => jest.fn() } } },
-  }),
-  useController: () => ({
-    field: { ref: jest.fn() },
-  }),
-}));
-
 jest.mock('./appointments-form.resource', () => ({
   ...jest.requireActual('./appointments-form.resource'),
   saveAppointment: jest.fn(),
 }));
 
+jest.mock('../hooks/useProviders', () => ({
+  ...jest.requireActual('../hooks/useProviders'),
+  useProviders: jest.fn(),
+}));
+
+jest.mock('../workload/workload.resource', () => ({
+  ...jest.requireActual('../workload/workload.resource'),
+  getMonthlyCalendarDistribution: jest.fn(),
+  useAppointmentSummary: jest.fn(),
+  useCalendarDistribution: jest.fn(),
+  useMonthlyCalendarDistribution: jest.fn().mockReturnValue([]),
+  useMonthlyAppointmentSummary: jest.fn().mockReturnValue([]),
+}));
+
 describe('AppointmentForm', () => {
+  const dateTimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d{3}Z|\+00:00)$/;
+
   beforeEach(() => {
     mockUseConfig.mockReturnValue({
       ...getDefaultsFromConfigSchema(configSchema),
@@ -100,36 +63,42 @@ describe('AppointmentForm', () => {
     });
     mockUseLocations.mockReturnValue(mockLocations.data.results);
     mockUseSession.mockReturnValue(mockSession.data);
+    mockUseProviders.mockReturnValue({
+      providers: mockProviders.data,
+      isLoading: false,
+      error: null,
+      isValidating: false,
+    });
   });
 
-  it('renders the appointments form showing all the relevant fields and values', async () => {
+  it('renders the appointments form', async () => {
     mockOpenmrsFetch.mockResolvedValue(mockUseAppointmentServiceData as unknown as FetchResponse);
 
     renderWithSwr(<AppointmentForm {...defaultProps} />);
 
     await waitForLoadingToFinish();
 
-    expect(screen.getByLabelText(/Select a location/i)).toBeInTheDocument();
-    expect(screen.getByLabelText(/^Date$/i)).toBeInTheDocument();
-    expect(screen.getByLabelText(/Select a service/i)).toBeInTheDocument();
-    expect(screen.getByLabelText(/Select the type of appointment/i)).toBeInTheDocument();
-    expect(screen.getByLabelText(/Write an additional note/i)).toBeInTheDocument();
-    expect(screen.getByPlaceholderText(/Write any additional points here/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/select a location/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/select a service/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/select the type of appointment/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/write an additional note/i)).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(/write any additional points here/i)).toBeInTheDocument();
     expect(screen.getAllByPlaceholderText(/dd\/mm\/yyyy/i).length).toBe(2);
-    expect(screen.getByRole('option', { name: /Mosoriot/i })).toBeInTheDocument();
-    expect(screen.getByRole('option', { name: /Inpatient Ward/i })).toBeInTheDocument();
-    expect(screen.getByRole('option', { name: /AM/i })).toBeInTheDocument();
-    expect(screen.getByRole('option', { name: /PM/i })).toBeInTheDocument();
-    expect(screen.getByRole('option', { name: /Choose appointment type/i })).toBeInTheDocument();
-    expect(screen.getByRole('option', { name: /Scheduled/i })).toBeInTheDocument();
-    expect(screen.getByRole('option', { name: /WalkIn/i })).toBeInTheDocument();
-    expect(screen.getByRole('textbox', { name: /^Date$/i })).toBeInTheDocument();
-    expect(screen.getByRole('textbox', { name: /Time/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /Discard/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /Save and close/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /mosoriot/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /inpatient ward/i })).toBeInTheDocument();
+    expect(screen.getByLabelText(/^date$/i)).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /^am$/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /^pm$/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /choose appointment type/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /scheduled/i })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: /walkin/i })).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: /^date$/i })).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: /time/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /discard/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /save and close/i })).toBeInTheDocument();
   });
 
-  it('closes the form and the workspace when the cancel button is clicked', async () => {
+  it('closes the workspace when the cancel button is clicked', async () => {
     const user = userEvent.setup();
 
     mockOpenmrsFetch.mockResolvedValueOnce(mockUseAppointmentServiceData as unknown as FetchResponse);
@@ -144,34 +113,64 @@ describe('AppointmentForm', () => {
     expect(defaultProps.closeWorkspace).toHaveBeenCalledTimes(1);
   });
 
-  it('renders a success snackbar  upon successfully scheduling an appointment', async () => {
+  it('renders a success snackbar upon successfully scheduling an appointment', async () => {
     const user = userEvent.setup();
 
     mockOpenmrsFetch.mockResolvedValue({ data: mockUseAppointmentServiceData } as unknown as FetchResponse);
-    mockCreateAppointment.mockResolvedValue({ status: 200, statusText: 'Ok' } as FetchResponse);
+    mockSaveAppointment.mockResolvedValue({ status: 200, statusText: 'Ok' } as FetchResponse);
 
     renderWithSwr(<AppointmentForm {...defaultProps} />);
 
     await waitForLoadingToFinish();
 
-    const saveButton = screen.getByRole('button', { name: /Save and close/i });
-    const dateInput = screen.getByRole('textbox', { name: /^Date$/i });
-    const timeInput = screen.getByRole('textbox', { name: /Time/i });
-    const timeFormat = screen.getByRole('combobox', { name: /Time/i });
-    const serviceSelect = screen.getByRole('combobox', { name: /Select a service/i });
-    const appointmentTypeSelect = screen.getByRole('combobox', { name: /Select the type of appointment/i });
-
-    expect(saveButton).toBeEnabled();
+    const locationSelect = screen.getByRole('combobox', { name: /select a location/i });
+    const serviceSelect = screen.getByRole('combobox', { name: /select a service/i });
+    const appointmentTypeSelect = screen.getByRole('combobox', { name: /select the type of appointment/i });
+    const providerSelect = screen.getByRole('combobox', { name: /select a provider/i });
+    const dateInput = screen.getByRole('textbox', { name: /^date$/i });
+    const timeInput = screen.getByRole('textbox', { name: /time/i });
+    const timeFormat = screen.getByRole('combobox', { name: /time/i });
+    const saveButton = screen.getByRole('button', { name: /save and close/i });
 
-    await user.clear(dateInput);
-    await user.type(dateInput, '4/4/2021');
-    await user.clear(timeInput);
-    await user.type(timeInput, '09:30');
-    await user.selectOptions(timeFormat, 'AM');
+    await user.selectOptions(locationSelect, ['Inpatient Ward']);
     await user.selectOptions(serviceSelect, ['Outpatient']);
     await user.selectOptions(appointmentTypeSelect, ['Scheduled']);
+    await user.selectOptions(providerSelect, ['doctor - James Cook']);
+
+    const date = '4/4/2021';
+    const time = '09:30';
 
+    await user.type(dateInput, date);
+    await user.type(timeInput, time);
+    await user.tab();
+    await user.selectOptions(timeFormat, 'AM');
     await user.click(saveButton);
+
+    expect(mockSaveAppointment).toHaveBeenCalledTimes(1);
+    expect(mockSaveAppointment).toHaveBeenCalledWith(
+      {
+        appointmentKind: 'Scheduled',
+        comments: '',
+        dateAppointmentScheduled: expect.stringMatching(dateTimeRegex),
+        endDateTime: expect.stringMatching(dateTimeRegex),
+        locationUuid: 'b1a8b05e-3542-4037-bbd3-998ee9c40574',
+        patientUuid: mockPatient.id,
+        providers: [{ uuid: 'f9badd80-ab76-11e2-9e96-0800200c9a66' }],
+        serviceUuid: 'e2ec9cf0-ec38-4d2b-af6c-59c82fa30b90',
+        startDateTime: expect.stringMatching(dateTimeRegex),
+        status: '',
+        uuid: undefined,
+      },
+      new AbortController(),
+    );
+
+    expect(mockShowSnackbar).toHaveBeenCalledTimes(1);
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
+      kind: 'success',
+      isLowContrast: true,
+      subtitle: 'It is now visible on the Appointments page',
+      title: 'Appointment scheduled',
+    });
   });
 
   it('renders an error snackbar if there was a problem scheduling an appointment', async () => {
@@ -185,27 +184,60 @@ describe('AppointmentForm', () => {
       },
     };
 
-    mockOpenmrsFetch.mockResolvedValueOnce({ data: mockUseAppointmentServiceData } as unknown as FetchResponse);
-    mockCreateAppointment.mockRejectedValueOnce(error);
+    mockOpenmrsFetch.mockResolvedValue({ data: mockUseAppointmentServiceData } as unknown as FetchResponse);
+    mockSaveAppointment.mockRejectedValue(error);
 
     renderWithSwr(<AppointmentForm {...defaultProps} />);
 
     await waitForLoadingToFinish();
 
-    const saveButton = screen.getByRole('button', { name: /Save and close/i });
-    const dateInput = screen.getByRole('textbox', { name: /^Date$/i });
-    const timeInput = screen.getByRole('textbox', { name: /Time/i });
-    const timeFormat = screen.getByRole('combobox', { name: /Time/i });
-    const serviceSelect = screen.getByRole('combobox', { name: /Select a service/i });
-    const appointmentTypeSelect = screen.getByRole('combobox', { name: /Select the type of appointment/i });
-
-    await user.clear(dateInput);
-    await user.type(dateInput, '4/4/2021');
-    await user.clear(timeInput);
-    await user.type(timeInput, '09:30');
-    await user.selectOptions(timeFormat, 'AM');
+    const locationSelect = screen.getByRole('combobox', { name: /select a location/i });
+    const serviceSelect = screen.getByRole('combobox', { name: /select a service/i });
+    const appointmentTypeSelect = screen.getByRole('combobox', { name: /select the type of appointment/i });
+    const providerSelect = screen.getByRole('combobox', { name: /select a provider/i });
+    const dateInput = screen.getByRole('textbox', { name: /^date$/i });
+    const timeInput = screen.getByRole('textbox', { name: /time/i });
+    const timeFormat = screen.getByRole('combobox', { name: /time/i });
+    const saveButton = screen.getByRole('button', { name: /save and close/i });
+
+    await user.selectOptions(locationSelect, ['Inpatient Ward']);
     await user.selectOptions(serviceSelect, ['Outpatient']);
     await user.selectOptions(appointmentTypeSelect, ['Scheduled']);
+    await user.selectOptions(providerSelect, ['doctor - James Cook']);
+
+    const date = '4/4/2021';
+    const time = '09:30';
+
+    await user.type(dateInput, date);
+    await user.type(timeInput, time);
+    await user.tab();
+    await user.selectOptions(timeFormat, 'AM');
     await user.click(saveButton);
+
+    expect(mockSaveAppointment).toHaveBeenCalledTimes(1);
+    expect(mockSaveAppointment).toHaveBeenCalledWith(
+      {
+        appointmentKind: 'Scheduled',
+        comments: '',
+        dateAppointmentScheduled: expect.stringMatching(dateTimeRegex),
+        endDateTime: expect.stringMatching(dateTimeRegex),
+        locationUuid: 'b1a8b05e-3542-4037-bbd3-998ee9c40574',
+        patientUuid: mockPatient.id,
+        providers: [{ uuid: 'f9badd80-ab76-11e2-9e96-0800200c9a66' }],
+        serviceUuid: 'e2ec9cf0-ec38-4d2b-af6c-59c82fa30b90',
+        startDateTime: expect.stringMatching(dateTimeRegex),
+        status: '',
+        uuid: undefined,
+      },
+      new AbortController(),
+    );
+
+    expect(mockShowSnackbar).toHaveBeenCalledTimes(1);
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
+      isLowContrast: false,
+      kind: 'error',
+      subtitle: 'Internal Server Error',
+      title: 'Error scheduling appointment',
+    });
   });
 });

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

@@ -1,13 +1,11 @@
 import React, { useCallback, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import { Layer, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
 import { launchWorkspace, showModal, useLayoutType } from '@openmrs/esm-framework';
 import type { Appointment } from '../types';
-import styles from './patient-appointments-action-menu.scss';
-
 import PatientAppointmentContext, { PatientAppointmentContextTypes } from '../hooks/patientAppointmentContext';
+import styles from './patient-appointments-action-menu.scss';
 
 interface appointmentsActionMenuProps {
   appointment: Appointment;
@@ -32,7 +30,7 @@ export const PatientAppointmentsActionMenu = ({ appointment, patientUuid }: appo
         appointment,
       });
     }
-  }, [appointment, t]);
+  }, [appointment, patientAppointmentContext, t]);
 
   const launchCancelAppointmentDialog = () => {
     const dispose = showModal('patient-appointment-cancel-confirmation-dialog', {

package/src/patient-appointments/patient-appointments-base.test.tsx

@@ -14,7 +14,7 @@ const testProps = {
 
 const mockOpenmrsFetch = jest.mocked(openmrsFetch);
 
-describe('AppointmensOverview', () => {
+describe('AppointmentsOverview', () => {
   it('renders an empty state if appointments data is unavailable', async () => {
     mockOpenmrsFetch.mockResolvedValueOnce({
       data: [],

package/src/patient-appointments/patient-appointments-cancel.modal.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
 import { changeAppointmentStatus, usePatientAppointments } from './patient-appointments.resource';
+import styles from './patient-appointments-cancel.scss';
 
 interface PatientCancelAppointmentModalProps {
   closeCancelModal: () => void;
@@ -47,7 +48,11 @@ const PatientCancelAppointmentModal: React.FC<PatientCancelAppointmentModalProps
 
   return (
     <div>
-      <ModalHeader closeModal={closeCancelModal} title={t('cancelAppointment', 'Cancel appointment')} />
+      <ModalHeader
+        className={styles.modalHeader}
+        closeModal={closeCancelModal}
+        title={t('cancelAppointment', 'Cancel appointment')}
+      />
       <ModalBody>
         <p>{t('cancelAppointmentModalConfirmationText', 'Are you sure you want to cancel this appointment?')}</p>
       </ModalBody>

package/src/patient-appointments/patient-appointments-cancel.scss

@@ -0,0 +1,29 @@
+@use '@carbon/layout';
+
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
+  }
+}

package/src/patient-appointments/patient-upcoming-appointments-card.component.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   InlineLoading,
@@ -10,31 +10,84 @@ import {
   StructuredListRow,
   StructuredListWrapper,
 } from '@carbon/react';
-import { formatDate, parseDate } from '@openmrs/esm-framework';
-import { usePatientAppointments } from './patient-appointments.resource';
+import { formatDate, parseDate, showSnackbar, type Visit } from '@openmrs/esm-framework';
+import { changeAppointmentStatus, usePatientAppointments } from './patient-appointments.resource';
 import { ErrorState } from '@openmrs/esm-patient-common-lib';
 import styles from './patient-upcoming-appointments-card.scss';
 import dayjs from 'dayjs';
 import { type Appointment } from '../types';
+import { useMutateAppointments } from '../form/appointments-form.resource';
 
-interface PatientUpcomingAppointmentsProps {
+interface VisitFormCallbacks {
+  onVisitCreatedOrUpdated: (visit: Visit) => Promise<any>;
+}
+
+// See VisitFormExtensionState in esm-patient-chart-app
+export interface PatientUpcomingAppointmentsProps {
+  setVisitFormCallbacks(callbacks: VisitFormCallbacks);
+  visitFormOpenedFrom: string;
+  patientChartConfig?: {
+    showUpcomingAppointments: boolean;
+  };
   patientUuid: string;
-  setUpcomingAppointment: (value: Appointment) => void;
 }
 
+/**
+ * This is an extension that gets slotted into the patient chart start visit form when
+ * the appropriate config values are enabled.
+ * @param param0
+ * @returns
+ */
 const PatientUpcomingAppointmentsCard: React.FC<PatientUpcomingAppointmentsProps> = ({
   patientUuid,
-  setUpcomingAppointment,
+  setVisitFormCallbacks,
+  patientChartConfig,
 }) => {
   const { t } = useTranslation();
   const startDate = dayjs(new Date().toISOString()).subtract(6, 'month').toISOString();
   const headerTitle = t('upcomingAppointments', 'Upcoming appointments');
-  const [selectedAppointment, setSelectedAppointment] = useState(null);
+  const [selectedAppointment, setSelectedAppointment] = useState<Appointment>(null);
+  const { mutateAppointments } = useMutateAppointments();
+  const memoMutateAppointments = useMemo(() => mutateAppointments, [mutateAppointments]);
 
   const ac = useMemo<AbortController>(() => new AbortController(), []);
   useEffect(() => () => ac.abort(), [ac]);
   const { data: appointmentsData, error, isLoading } = usePatientAppointments(patientUuid, startDate, ac);
 
+  const onVisitCreatedOrUpdated = useMemo(
+    () => ({
+      onVisitCreatedOrUpdated: () => {
+        if (selectedAppointment) {
+          return changeAppointmentStatus('CheckedIn', selectedAppointment.uuid)
+            .then(() => {
+              memoMutateAppointments();
+              showSnackbar({
+                isLowContrast: true,
+                kind: 'success',
+                subtitle: t('appointmentMarkedChecked', 'Appointment marked as Checked In'),
+                title: t('appointmentCheckedIn', 'Appointment Checked In'),
+              });
+            })
+            .catch((error) => {
+              showSnackbar({
+                title: t('updateError', 'Error updating upcoming appointment'),
+                kind: 'error',
+                isLowContrast: false,
+                subtitle: error?.message,
+              });
+            });
+        } else {
+          return Promise.resolve();
+        }
+      },
+    }),
+    [selectedAppointment, memoMutateAppointments, t],
+  );
+
+  useEffect(() => {
+    setVisitFormCallbacks(onVisitCreatedOrUpdated);
+  }, [onVisitCreatedOrUpdated, setVisitFormCallbacks]);
+
   const todaysAppointments = appointmentsData?.todaysAppointments?.length ? appointmentsData?.todaysAppointments : [];
   const futureAppointments = appointmentsData?.upcomingAppointments?.length
     ? appointmentsData?.upcomingAppointments
@@ -46,9 +99,12 @@ const PatientUpcomingAppointmentsCard: React.FC<PatientUpcomingAppointmentsProps
 
   const handleRadioChange = (appointment: Appointment) => {
     setSelectedAppointment(appointment);
-    setUpcomingAppointment(appointment);
   };
 
+  if (!patientChartConfig.showUpcomingAppointments) {
+    return <></>;
+  }
+
   if (error) {
     return <ErrorState headerTitle={headerTitle} error={error} />;
   }

package/src/routes.json

@@ -99,7 +99,7 @@
     {
       "name": "patient-upcoming-appointment-widget",
       "component": "patientUpcomingAppointmentsWidget",
-      "slot": "upcoming-appointment-slot"
+      "slot": "visit-form-top-slot"
     },
     {
       "name": "edit-appointments-form",

package/src/types/index.ts

@@ -149,7 +149,7 @@ export interface AppointmentSummary {
 export interface Provider {
   uuid: string;
   display: string;
-  comments: string;
+  comments?: string;
   response?: string;
   person: OpenmrsResource;
   name?: string;

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

@@ -1,11 +1,11 @@
-import dayjs from 'dayjs';
 import React, { useContext } from 'react';
+import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
-import DaysOfWeekCard from '../../calendar/monthly/days-of-week.component';
 import { monthDays } from '../../helpers';
+import DaysOfWeekCard from '../../calendar/monthly/days-of-week.component';
+import MonthlyWorkloadCard from './monthlyWorkCard';
 import SelectedDateContext from '../../hooks/selectedDateContext';
 import styles from './monthly-workload.scss';
-import MonthlyWorkloadCard from './monthlyWorkCard';
 
 interface MonthlyCalendarViewProps {
   calendarWorkload: Array<{ count: number; date: string }>;
@@ -13,22 +13,24 @@ interface MonthlyCalendarViewProps {
   onDateClick?: (pickedDate: Date) => void;
 }
 
-const monthFormat = 'MMMM, YYYY';
 const MonthlyCalendarView: React.FC<MonthlyCalendarViewProps> = ({
   calendarWorkload,
   dateToDisplay = '',
   onDateClick,
 }) => {
+  const monthFormat = 'MMMM, YYYY';
+  const { t } = useTranslation();
   const { selectedDate } = useContext(SelectedDateContext);
   const daysInWeek = ['SUN', 'MON', 'TUE', 'WED', 'THUR', 'FRI', 'SAT'];
   const monthViewDate = dateToDisplay === '' ? selectedDate : dateToDisplay;
+  const daysInWeeks = daysInWeek.map((day) => t(day));
+
   const handleClick = (date: Date) => {
     if (onDateClick) {
       onDateClick(date);
     }
   };
-  const { t } = useTranslation();
-  const daysInWeeks = daysInWeek.map((day) => t(day));
+
   return (
     <div className={styles.calendarViewContainer}>
       <>

package/src/workload/monthly-view-workload/monthlyWorkCard.tsx

@@ -15,6 +15,7 @@ interface MonthlyWorkloadComponentProps {
 const MonthlyWorkloadCard: React.FC<MonthlyWorkloadComponentProps> = ({ date, count, isActive, selectedDate }) => {
   const layout = useLayoutType();
   const isToday = date.isSame(dayjs(), 'day');
+
   return (
     <div
       className={classNames(
@@ -30,7 +31,7 @@ const MonthlyWorkloadCard: React.FC<MonthlyWorkloadComponentProps> = ({ date, co
           [styles.largeDesktop]: layout !== 'small-desktop',
         },
       )}>
-      <p>
+      <div>
         <b className={[styles.calendarDate, isToday ? styles.blue : ''].join(' ')}>{date.format('D')}</b>
         <div className={styles.currentData}>
           <div tabIndex={0} role="button" className={classNames(styles.tileContainer, {})}></div>
@@ -38,7 +39,7 @@ const MonthlyWorkloadCard: React.FC<MonthlyWorkloadComponentProps> = ({ date, co
             <span className={isActive ? styles.blue : ''}>{count}</span>
           </div>
         </div>
-      </p>
+      </div>
     </div>
   );
 };

package/src/workload/workload-card.component.tsx

@@ -2,13 +2,14 @@ import React from 'react';
 import classNames from 'classnames';
 import styles from './workload.scss';
 
-interface WorkloadCardProp {
+interface WorkloadCardProps {
+  count: number;
   day: string;
   date: string;
-  count: number;
   isActive: boolean;
 }
-const WorkloadCard: React.FC<WorkloadCardProp> = ({ day, date, count, isActive }) => {
+
+const WorkloadCard = ({ count, day, date, isActive }: WorkloadCardProps) => {
   return (
     <div
       tabIndex={0}
@@ -28,4 +29,5 @@ const WorkloadCard: React.FC<WorkloadCardProp> = ({ day, date, count, isActive }
     </div>
   );
 };
+
 export default WorkloadCard;