@openmrs/esm-appointments-app 4.3.1-pre.1410 → 4.3.1-pre.1413

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import { navigate, useLayoutType } from '@openmrs/esm-framework';
+import { isSameMonth } from '../../helpers';
+import { spaBasePath } from '../../constants';
+import styles from './monthly-view-workload.scss';
+
+const colorCoding = { HIV: 'red', 'Lab testing': 'purple', Refill: 'blue' };
+
+const MonthlyWorkload = ({ type, dateTime, currentDate, events }) => {
+  const layout = useLayoutType();
+  const { t } = useTranslation();
+
+  const currentData = events?.find(
+    (event) => dayjs(event.appointmentDate)?.format('YYYY-MM-DD') === dayjs(dateTime)?.format('YYYY-MM-DD'),
+  );
+
+  const serviceAreaOnClick = (serviceName) => {
+    navigate({ to: `${spaBasePath}/appointments/list/${dateTime}/${serviceName}` });
+  };
+
+  return (
+    <div
+      className={`${styles[isSameMonth(dateTime, currentDate) ? 'monthly-cell' : 'monthly-cell-disabled']} ${
+        currentData?.service ? styles.greyBackground : ''
+      } ${layout === 'small-desktop' ? styles.smallDesktop : styles.largeDesktop}`}>
+      {type === 'monthly' && isSameMonth(dateTime, currentDate) && (
+        <p>
+          <b>{dateTime.format('D')}</b>
+          {currentData?.service && (
+            <div className={styles.currentData}>
+              {currentData.service.map(({ serviceName, count }) => (
+                <div
+                  key={serviceName}
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => serviceAreaOnClick(serviceName)}
+                  className={`${styles.serviceArea} ${styles[colorCoding[serviceName]]}`}>
+                  <span>{serviceName}</span>
+                  <span>{count}</span>
+                </div>
+              ))}
+              <div
+                role="button"
+                tabIndex={0}
+                onClick={() => serviceAreaOnClick('Total')}
+                className={`${styles.serviceArea} ${styles.green}`}>
+                <span>{t('total', 'Total')}</span>
+                <span>{currentData?.service.reduce((sum, { count = 0 }) => sum + count, 0)}</span>
+              </div>
+            </div>
+          )}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default MonthlyWorkload;

package/src/appointments-calendar/{calendar-patient-list → patient-list}/calendar-patient-list.component.tsx

@@ -52,20 +52,13 @@ const CalendarPatientList: React.FC<CalendarPatientListProps> = () => {
     },
   ];
 
-  const rowData =
-    serviceName !== 'Total'
-      ? appointments
-          ?.map((appointment) => ({
-            id: `${appointment.identifier}`,
-            ...appointment,
-            dateTime: formatDatetime(new Date(appointment.dateTime)),
-          }))
-          .filter(({ serviceType }) => serviceName === serviceType)
-      : appointments?.map((appointment) => ({
-          id: `${appointment.identifier}`,
-          ...appointment,
-          dateTime: formatDatetime(new Date(appointment.dateTime)),
-        }));
+  const rowData = appointments
+    ?.filter(({ serviceType }) => serviceName === 'Total' || serviceName === serviceType)
+    .map((appointment) => ({
+      id: `${appointment.identifier}`,
+      ...appointment,
+      dateTime: formatDatetime(new Date(appointment.dateTime)),
+    }));
 
   if (isLoading) {
     return (

package/src/appointments-calendar/{weekly-calendar-view.component.tsx → weekly/weekly-calendar-view.component.tsx}

@@ -2,8 +2,8 @@ import React from 'react';
 import dayjs, { Dayjs } from 'dayjs';
 import isBetween from 'dayjs/plugin/isBetween';
 import styles from './weekly-calendar.scss';
-import { CalendarType } from '../types';
-import { isSameMonth, weekAllDays, weekDays } from '../helpers';
+import { CalendarType } from '../../types';
+import { isSameMonth, weekAllDays, weekDays } from '../../helpers';
 import WeeklyWorkloadView from './weekly-view-workload.component';
 import WeeklyHeader from './weekly-header.component';
 dayjs.extend(isBetween);

package/src/appointments-calendar/{weekly-header.component.tsx → weekly/weekly-header.component.tsx}

@@ -2,9 +2,9 @@ import { Button } from '@carbon/react';
 import { Dayjs } from 'dayjs';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { weekDays } from '../helpers';
-import { CalendarType } from '../types';
 import styles from './weekly-header.scss';
+import { weekDays } from '../../helpers';
+import { CalendarType } from '../../types';
 
 const Format = {
   monthly: 'month',

package/src/appointments-calendar/{weekly-view-workload.component.tsx → weekly/weekly-view-workload.component.tsx}

@@ -1,11 +1,12 @@
-import dayjs, { Dayjs } from 'dayjs';
-import styles from './weekly-workload-module.scss';
 import React from 'react';
-import { CalendarType } from '../types';
-import { isSameMonth } from '../helpers';
+import dayjs, { Dayjs } from 'dayjs';
 import { navigate, useLayoutType } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
-import { spaBasePath } from '../constants';
+
+import styles from './weekly-workload-module.scss';
+import { spaBasePath } from '../../constants';
+import { isSameMonth } from '../../helpers';
+import { CalendarType } from '../../types';
 
 interface WeeklyCellProps {
   type: CalendarType;

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

@@ -10,23 +10,28 @@ import styles from './appointments-metrics.scss';
 
 const AppointmentsMetrics: React.FC<{ serviceUuid: string }> = ({ serviceUuid }) => {
   const { t } = useTranslation();
-  const { highestServiceLoad, error } = useClinicalMetrics();
-  const { totalProviders, isLoading: loading } = useAllAppointmentsByDate();
+
+  const { highestServiceLoad, error: clinicalMetricsError } = useClinicalMetrics();
+  const { totalProviders, isLoading: allAppointmentsLoading } = useAllAppointmentsByDate();
   const { totalScheduledAppointments } = useScheduledAppointment(serviceUuid);
+
   const startDate = useAppointmentDate();
   const formattedStartDate = formatDate(parseDate(startDate), { mode: 'standard', time: false });
+
   const { appointmentList: arrivedAppointments } = useAppointmentList('Honoured');
   const { appointmentList: pendingAppointments } = useAppointmentList('Pending');
-  const filteredArrivedAppointment = serviceUuid
-    ? arrivedAppointments.filter((arrivedAppt) => arrivedAppt.serviceTypeUuid === serviceUuid)
-    : arrivedAppointments;
 
-  const filteredPendingAppointment = serviceUuid
-    ? pendingAppointments.filter((arrivedAppt) => arrivedAppt.serviceTypeUuid === serviceUuid)
+  const filteredArrivedAppointments = serviceUuid
+    ? arrivedAppointments.filter(({ serviceTypeUuid }) => serviceTypeUuid === serviceUuid)
+    : arrivedAppointments;
+  const filteredPendingAppointments = serviceUuid
+    ? pendingAppointments.filter(({ serviceTypeUuid }) => serviceTypeUuid === serviceUuid)
     : pendingAppointments;
 
-  if (error) {
-    <ErrorState headerTitle={t('appointmentMetricsLoadError')} error={error} />;
+  if (clinicalMetricsError) {
+    return (
+      <ErrorState headerTitle={t('appointmentMetricsLoadError', 'Metrics load error')} error={clinicalMetricsError} />
+    );
   }
 
   return (
@@ -37,8 +42,7 @@ const AppointmentsMetrics: React.FC<{ serviceUuid: string }> = ({ serviceUuid })
           label={t('patients', 'Patients')}
           value={totalScheduledAppointments}
           headerLabel={t('scheduledAppointments', 'Scheduled appointments')}
-          view=""
-          count={{ pendingAppointments: filteredPendingAppointment, arrivedAppointments: filteredArrivedAppointment }}
+          count={{ pendingAppointments: filteredPendingAppointments, arrivedAppointments: filteredArrivedAppointments }}
           appointmentDate={startDate}
         />
         <MetricsCard
@@ -47,13 +51,11 @@ const AppointmentsMetrics: React.FC<{ serviceUuid: string }> = ({ serviceUuid })
           }
           value={highestServiceLoad?.count ?? '--'}
           headerLabel={t('highestServiceVolume', 'High volume service: {time}', { time: formattedStartDate })}
-          view=""
         />
         <MetricsCard
           label={t('providers', 'Providers')}
           value={totalProviders}
           headerLabel={t('providersAvailableToday', 'Providers available: {time}', { time: formattedStartDate })}
-          view=""
         />
       </div>
     </>

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

@@ -15,7 +15,7 @@ interface MetricsCardProps {
   value: number;
   headerLabel: string;
   children?: React.ReactNode;
-  view: string;
+  view?: string;
   count?: { pendingAppointments: Array<any>; arrivedAppointments: Array<any> };
   appointmentDate?: string;
 }

package/src/appointments.component.tsx

@@ -4,8 +4,8 @@ import AppointmentList from './appointments/appointment-tabs.component';
 import ClinicMetrics from './appointments-metrics/appointments-metrics.component';
 import AppointmentsHeader from './appointments-header/appointments-header.component';
 import Overlay from './overlay.component';
-import AppointmentsCalendarListView from './appointments-calendar/appointments-calendar-list-view.component';
-import CalendarPatientList from './appointments-calendar/calendar-patient-list/calendar-patient-list.component';
+import AppointmentsCalendarListView from './appointments-calendar/appointments-calendar-view.component';
+import CalendarPatientList from './appointments-calendar/patient-list/calendar-patient-list.component';
 
 const ClinicalAppointments: React.FC = () => {
   const { t } = useTranslation();

package/src/hooks/useAppointmentList.tsx

@@ -28,6 +28,7 @@ export const useAppointmentList = (appointmentStatus: string, startDate?: string
   const { data, error, isLoading } = useSWR<{ data: Array<AppointmentPatientList> }>(
     appointmentStatus ? url : null,
     openmrsFetch,
+    { errorRetryCount: 2 },
   );
   const appointments = data?.data?.map((appointment) => ({
     name: appointment.patient.name,
@@ -49,7 +50,9 @@ export const useEarlyAppointmentList = (startDate?: string) => {
   const forDate = startDate ? startDate : appointmentDate;
   const url = `/ws/rest/v1/appointment/earlyAppointment?forDate=${forDate}`;
 
-  const { data, error, isLoading } = useSWR<{ data: Array<AppointmentPatientList> }>(url, openmrsFetch);
+  const { data, error, isLoading } = useSWR<{ data: Array<AppointmentPatientList> }>(url, openmrsFetch, {
+    errorRetryCount: 2,
+  });
   const appointments = data?.data?.map((appointment) => ({
     name: appointment.patient.name,
     patientUuid: appointment.patient.uuid,

package/src/hooks/useAppointmentsCalendar.tsx

@@ -23,6 +23,7 @@ export const useAppointmentsCalendar = (forDate: string, period: string) => {
   const { data, error, isLoading } = useSWR<{ data: Array<CalendarEvent> }>(
     startDate && endDate ? url : null,
     openmrsFetch,
+    { errorRetryCount: 2 },
   );
   const results =
     data?.data.map((event) => ({

package/src/hooks/useOverlay.tsx

@@ -1,25 +1,24 @@
 import { getGlobalStore } from '@openmrs/esm-framework';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
-interface OverlayStore {
+export interface OverlayStore {
   isOverlayOpen: boolean;
-  // TODO: Fix this more conclusively
   component?: any;
   header: string;
 }
 
-const initialState = { isOverlayOpen: false, component: Function, header: '' };
+const initialState: OverlayStore = { isOverlayOpen: false, header: '' };
 
 const getOverlayStore = () => {
   return getGlobalStore('appointment-store', initialState);
 };
 
-export const launchOverlay = (headerTitle: string, componentToRender) => {
+export const launchOverlay = (headerTitle: string, componentToRender: any) => {
   const store = getOverlayStore();
   store.setState({ isOverlayOpen: true, component: componentToRender, header: headerTitle });
 };
 
-export const closeOverlay = () => {
+export const closeOverlay = (): void => {
   const store = getOverlayStore();
   store.setState({ component: null, isOverlayOpen: false });
 };
@@ -27,17 +26,20 @@ export const closeOverlay = () => {
 export const useOverlay = () => {
   const [overlay, setOverlay] = useState<OverlayStore>();
 
+  const update = useCallback((state: OverlayStore) => {
+    setOverlay(state);
+  }, []);
+
   useEffect(() => {
-    function update(state: OverlayStore) {
-      setOverlay(state);
-    }
     update(getOverlayStore().getState());
     getOverlayStore().subscribe(update);
-  }, []);
+  }, [update]);
+
+  const { isOverlayOpen, component, header } = overlay ?? {};
 
   return {
-    isOverlayOpen: overlay?.isOverlayOpen,
-    component: overlay?.component,
-    header: overlay?.header,
+    isOverlayOpen,
+    component,
+    header,
   };
 };

package/src/hooks/useUnscheduledAppointments.tsx

@@ -15,6 +15,6 @@ export interface Response {
 export function useUnscheduledAppointments() {
   const fromData = useAppointmentDate();
   const url = `/ws/rest/v1/appointment/unScheduledAppointment?forDate=${fromData}`;
-  const { data, error, isLoading } = useSWR<{ data: Array<Response> }>(url, openmrsFetch);
+  const { data, error, isLoading } = useSWR<{ data: Array<Response> }>(url, openmrsFetch, { errorRetryCount: 2 });
   return { isLoading, data: data?.data ?? [], error };
 }

package/src/overlay.component.tsx

@@ -8,19 +8,12 @@ import styles from './overlay.scss';
 const Overlay: React.FC = () => {
   const { header, component, isOverlayOpen } = useOverlay();
   const layout = useLayoutType();
-
+  const overlayClass = layout !== 'tablet' ? styles.desktopOverlay : styles.tabletOverlay;
   return (
     <>
       {isOverlayOpen && (
-        <div className={layout !== 'tablet' ? styles.desktopOverlay : styles.tabletOverlay}>
-          {layout !== 'tablet' ? (
-            <div className={styles.desktopHeader}>
-              <div className={styles.headerContent}>{header}</div>
-              <Button className={styles.closePanelButton} onClick={() => closeOverlay()} kind="ghost" hasIconOnly>
-                <Close size={16} />
-              </Button>
-            </div>
-          ) : (
+        <div className={overlayClass}>
+          {layout === 'tablet' && (
             <Header onClick={() => closeOverlay()} aria-label="Tablet overlay" className={styles.tabletOverlayHeader}>
               <Button hasIconOnly>
                 <ArrowLeft size={16} />
@@ -28,7 +21,16 @@ const Overlay: React.FC = () => {
               <div className={styles.headerContent}>{header}</div>
             </Header>
           )}
-          <div>{component}</div>
+
+          {layout !== 'tablet' && (
+            <div className={styles.desktopHeader}>
+              <div className={styles.headerContent}>{header}</div>
+              <Button className={styles.closePanelButton} onClick={() => closeOverlay()} kind="ghost" hasIconOnly>
+                <Close size={16} />
+              </Button>
+            </div>
+          )}
+          {component}
         </div>
       )}
     </>

package/translations/en.json

@@ -5,7 +5,6 @@
   "addPatientToQueue": "Add patient to queue",
   "age": "Age",
   "all": "All",
-  "anotherVisitType": "Start another visit type",
   "appointmentCancelError": "Error cancelling appointment",
   "appointmentCancelled": "Appointment Cancelled",
   "appointmentColor": "Appointment color",
@@ -27,7 +26,6 @@
   "appointmentServiceCreate": "Appointment service created successfully",
   "appointmentServiceName": "Appointment service name",
   "back": "Back",
-  "backToSearchResults": "Back to search results",
   "calendar": "Calendar",
   "cameEarly": "Came Early",
   "cancel": "Cancel",
@@ -57,7 +55,6 @@
   "durationMins": "Duration min",
   "editAppointment": "Edit Appointment",
   "editAppointments": "Edit Appointment",
-  "emergency": "Emergency",
   "emptyStateText": "There are no {displayText} to display",
   "encounters": "Encounters",
   "encounterType": "Encounter type",
@@ -65,8 +62,6 @@
   "errorMessage": "Error canceling the appointment",
   "facility": "Facility",
   "filter": "Filter",
-  "futureScheduledVisits": " {count, plural, one{{count} visit} other{{count} visits}} scheduled for dates in the future",
-  "futureScheduledVisits_plural": "",
   "gender": "Gender",
   "getAppointmentReminder": "Would you like to get a reminder about this appointment?",
   "highestServiceVolume": "High volume service: {time}",
@@ -89,7 +84,6 @@
   "noPreviousVisitFound": "No previous visit found",
   "notArrived": "Not arrived",
   "notes": "Notes",
-  "notUrgent": "Not Urgent",
   "or": "or",
   "patientDetails": "Patient Details",
   "patientName": "Patient name",
@@ -97,15 +91,12 @@
   "patientSearch": "Patient search",
   "phoneNumber": "Phone number",
   "prev": "Prev",
-  "priority": "Priority",
   "provider": "Provider",
   "providers": "Providers",
   "providersAvailableToday": "Providers available: {time}",
   "queueAddedSuccessfully": "",
   "queueEntryError": "Error adding patient to the queue",
   "reasonForChanges": "Reason For Changes",
-  "recentScheduledVisits": "{count, plural, one{{count} visit} other{{count} visits}} scheduled for +/- 7 days",
-  "recentScheduledVisits_plural": "",
   "rescheduled": "Rescheduled",
   "save": "Save",
   "scheduled": "Scheduled",