@kenyaemr/esm-appointments-app 8.1.1-pre.111 → 8.1.1-pre.116

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

@@ -2,13 +2,11 @@ import React, { useContext } from 'react';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { DatePicker, DatePickerInput, Dropdown } from '@carbon/react';
-import { Location } from '@carbon/react/icons';
-import { useSession } from '@openmrs/esm-framework';
+import { PageHeader, PageHeaderContent, AppointmentsPictogram } from '@openmrs/esm-framework';
+import { omrsDateFormat } from '../constants';
 import { useAppointmentServices } from '../hooks/useAppointmentService';
-import AppointmentsIllustration from './appointments-illustration.component';
-import styles from './appointments-header.scss';
 import SelectedDateContext from '../hooks/selectedDateContext';
-import { omrsDateFormat } from '../constants';
+import styles from './appointments-header.scss';
 
 interface AppointmentHeaderProps {
   title: string;
@@ -18,61 +16,46 @@ interface AppointmentHeaderProps {
 
 const AppointmentsHeader: React.FC<AppointmentHeaderProps> = ({ title, appointmentServiceType, onChange }) => {
   const { t } = useTranslation();
-  const session = useSession();
   const { selectedDate, setSelectedDate } = useContext(SelectedDateContext);
-  const location = session?.sessionLocation?.display;
   const { serviceTypes } = useAppointmentServices();
 
   return (
-    <div className={styles.header} data-testid="appointments-header">
-      <div className={styles['left-justified-items']}>
-        <AppointmentsIllustration />
-        <div className={styles['page-labels']}>
-          <p>{t('appointments', 'Appointments')}</p>
-          <p className={styles['page-name']}>{title}</p>
-        </div>
-      </div>
-      <div className={styles['right-justified-items']}>
-        <div className={styles['date-and-location']}>
-          <Location size={16} />
-          <span className={styles.value}>{location}</span>
-          <span className={styles.middot}>&middot;</span>
-          <DatePicker
-            onChange={([date]) => setSelectedDate(dayjs(date).startOf('day').format(omrsDateFormat))}
-            value={dayjs(selectedDate).format('DD MMM YYYY')}
-            dateFormat="d-M-Y"
-            datePickerType="single">
-            <DatePickerInput
-              style={{ cursor: 'pointer', backgroundColor: 'transparent', border: 'none', maxWidth: '10rem' }}
-              id="appointment-date-picker"
-              placeholder="DD-MMM-YYYY"
-              labelText=""
-              type="text"
-            />
-          </DatePicker>
-        </div>
-        <div className={styles.dropdownContainer}>
-          {typeof onChange === 'function' && (
-            <Dropdown
-              className={styles.dropdown}
-              aria-label="Select service type"
-              id="serviceDropdown"
-              selectedItem={
-                serviceTypes.find((service) => service.uuid === appointmentServiceType) || { name: 'All', uuid: '' }
-              }
-              items={[{ name: 'All', uuid: '' }, ...serviceTypes]}
-              itemToString={(item) => (item ? item.name : '')}
-              label={t('selectServiceType', 'Select service type')}
-              type="inline"
-              size="sm"
-              direction="bottom"
-              titleText={t('view', 'View')}
-              onChange={({ selectedItem }) => onChange(selectedItem?.uuid)}
-            />
-          )}
-        </div>
+    <PageHeader className={styles.header} data-testid="appointments-header">
+      <PageHeaderContent illustration={<AppointmentsPictogram />} title={title} />
+      <div className={styles.rightJustifiedItems}>
+        <DatePicker
+          dateFormat="d-M-Y"
+          datePickerType="single"
+          onChange={([date]) => setSelectedDate(dayjs(date).startOf('day').format(omrsDateFormat))}
+          value={dayjs(selectedDate).format('DD MMM YYYY')}>
+          <DatePickerInput
+            style={{ cursor: 'pointer', backgroundColor: 'transparent', border: 'none', maxWidth: '10rem' }}
+            id="appointment-date-picker"
+            labelText=""
+            placeholder="DD-MMM-YYYY"
+            type="text"
+          />
+        </DatePicker>
+        {typeof onChange === 'function' && (
+          <Dropdown
+            aria-label={t('selectServiceType', 'Select service type')}
+            className={styles.dropdown}
+            direction="bottom"
+            id="serviceDropdown"
+            items={[{ name: 'All', uuid: '' }, ...serviceTypes]}
+            itemToString={(item) => (item ? item.name : '')}
+            label={t('selectServiceType', 'Select service type')}
+            onChange={({ selectedItem }) => onChange(selectedItem?.uuid)}
+            selectedItem={
+              serviceTypes.find((service) => service.uuid === appointmentServiceType) || { name: 'All', uuid: '' }
+            }
+            size="sm"
+            titleText={t('view', 'View')}
+            type="inline"
+          />
+        )}
       </div>
-    </div>
+    </PageHeader>
   );
 };
 

package/src/header/appointments-header.scss

@@ -4,71 +4,22 @@
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
 .header {
-  @include type.type-style('body-compact-02');
-  color: $text-02;
-  height: layout.$spacing-12;
   background-color: $ui-02;
-  border-bottom: 1px solid $ui-03;
+  border: 1px solid $ui-03;
+  border-left: 0;
   display: flex;
   justify-content: space-between;
-}
-
-.left-justified-items {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.right-justified-items {
-  @include type.type-style('body-compact-02');
-  color: $text-02;
-  margin: layout.$spacing-03;
-}
-
-.page-name {
-  @include type.type-style('heading-04');
-}
-
-.page-labels {
-  margin: layout.$spacing-05 0;
-
-  p:first-of-type {
-    margin-bottom: layout.$spacing-02;
-  }
-}
-
-.date-and-location {
-  display: flex;
-  justify-content: flex-end;
   align-items: center;
+  padding-right: layout.$spacing-03;
 }
 
-.dropdownContainer {
+.rightJustifiedItems {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-end;
   justify-content: flex-end;
-  margin-top: layout.$spacing-02;
-}
-
-.value {
-  margin-left: layout.$spacing-02;
-}
-
-.middot {
   margin: 0 layout.$spacing-03;
-}
-
-.view {
-  @include type.type-style('label-01');
-}
-
-.datePicker {
-  background-color: transparent;
-  width: layout.$spacing-13;
-  border: none;
-  & > input {
-    color: colors.$blue-10;
-  }
+  row-gap: layout.$spacing-01;
 }
 
 .dropdown {

package/src/helpers/excel.ts

@@ -1,21 +1,37 @@
-import { formatDate } from '@openmrs/esm-framework';
 import * as XLSX from 'xlsx';
+import { fetchCurrentPatient, formatDate, getConfig } from '@openmrs/esm-framework';
 import { type Appointment } from '../types';
+import { type ConfigObject } from '../config-schema';
+import { moduleName } from '../constants';
 
 /**
- * Downloads the provided appointments as an Excel file.
- * @param {Array<Appointment>} appointments - The list of appointments to download.
+ * Exports the provided appointments as an Excel spreadsheet.
+ * @param {Array<Appointment>} appointments - The list of appointments to export.
  * @param {string} [fileName] - The name of the downloaded file
  */
-export function downloadAppointmentsAsExcel(appointments: Array<Appointment>, fileName = 'Appointments') {
-  const appointmentsJSON = appointments?.map((appointment: Appointment) => ({
-    'Patient name': appointment.patient.name,
-    Gender: appointment.patient.gender === 'F' ? 'Female' : 'Male',
-    Age: appointment.patient.age,
-    Identifier: appointment.patient.identifier ?? '--',
-    'Appointment type': appointment.service?.name,
-    Date: formatDate(new Date(appointment.startDateTime), { mode: 'wide' }),
-  }));
+export async function exportAppointmentsToSpreadsheet(appointments: Array<Appointment>, fileName = 'Appointments') {
+  const config = await getConfig<ConfigObject>(moduleName);
+  const includePhoneNumbers = config.includePhoneNumberInExcelSpreadsheet ?? false;
+
+  const appointmentsJSON = await Promise.all(
+    appointments.map(async (appointment: Appointment) => {
+      const patientInfo = await fetchCurrentPatient(appointment.patient.uuid);
+      const phoneNumber =
+        includePhoneNumbers && patientInfo?.telecom
+          ? patientInfo.telecom.map((telecomObj) => telecomObj?.value).join(', ')
+          : '';
+
+      return {
+        'Patient name': appointment.patient.name,
+        Gender: appointment.patient.gender === 'F' ? 'Female' : 'Male',
+        Age: appointment.patient.age,
+        Identifier: appointment.patient.identifier ?? '--',
+        'Appointment type': appointment.service?.name,
+        Date: formatDate(new Date(appointment.startDateTime), { mode: 'wide' }),
+        ...(includePhoneNumbers ? { 'Telephone number': phoneNumber } : {}),
+      };
+    }),
+  );
 
   const worksheet = createWorksheet(appointmentsJSON);
   const workbook = createWorkbook(worksheet, 'Appointment list');
@@ -23,11 +39,11 @@ export function downloadAppointmentsAsExcel(appointments: Array<Appointment>, fi
 }
 
 /**
-Downloads unscheduled appointments as an Excel file.
-@param {Array<Object>} unscheduledAppointments - The list of unscheduled appointments to download.
+Exports unscheduled appointments as an Excel spreadsheet.
+@param {Array<Object>} unscheduledAppointments - The list of unscheduled appointments to export.
 @param {string} fileName - The name of the file to download. Defaults to 'Unscheduled appointments {current date and time}'.
 */
-export function downloadUnscheduledAppointments(
+export function exportUnscheduledAppointmentsToSpreadsheet(
   unscheduledAppointments: Array<any>,
   fileName = `Unscheduled appointments ${formatDate(new Date(), { year: true, time: true })}`,
 ) {

package/src/hooks/useClinicalMetrics.ts

@@ -45,11 +45,13 @@ export function useAllAppointmentsByDate() {
     openmrsFetch,
   );
 
-  const providersArray = data?.data?.filter(({ providers }) => providers !== null) ?? [];
-  const providersCount = uniqBy(
-    providersArray.map(({ providers }) => providers).flat(),
-    (provider) => provider.uuid,
-  ).length;
+  const providersArray = data?.data?.flatMap(({ providers }) => providers ?? []) ?? [];
+
+  const validProviders = providersArray.filter((provider) => provider.response === 'ACCEPTED');
+
+  const uniqueProviders = uniqBy(validProviders, (provider) => provider.uuid);
+  const providersCount = uniqueProviders.length;
+
   return {
     totalProviders: providersCount ? providersCount : 0,
     isLoading,

package/src/index.ts

@@ -7,7 +7,6 @@ import {
 } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
 import { createDashboardLink } from './createDashboardLink.component';
-import { createDashboardLink as createPatientChartDashboardLink } from '@openmrs/esm-patient-common-lib';
 import { dashboardMeta, appointmentCalendarDashboardMeta, patientChartDashboardMeta } from './dashboard.meta';
 import {
   cancelledAppointmentsPanelConfigSchema,
@@ -22,10 +21,7 @@ import appointmentsDashboardComponent from './appointments.component';
 import homeAppointmentsComponent from './home/home-appointments.component';
 import appointmentsListComponent from './appointments/scheduled/appointments-list.component';
 import earlyAppointmentsComponent from './appointments/scheduled/early-appointments.component';
-import patientAppointmentsDetailedSummaryComponent from './patient-appointments/patient-appointments-detailed-summary.component';
-import patientAppointmentsOverviewComponent from './patient-appointments/patient-appointments-overview.component';
-import patientUpcomingAppointmentsComponent from './patient-appointments/patient-upcoming-appointments-card.component';
-import appointementsForm from './form/appointments-form.component';
+import appointmentsFormComponent from './form/appointments-form.component';
 import patientSearch from './patient-search/patient-search.component';
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -79,24 +75,30 @@ export const appointmentsList = getSyncLifecycle(appointmentsListComponent, opti
 
 export const earlyAppointments = getSyncLifecycle(earlyAppointmentsComponent, options);
 
-export const appointementForm = getSyncLifecycle(appointementsForm, options);
+export const appointmentsForm = getSyncLifecycle(appointmentsFormComponent, options);
 
 export const searchPatient = getSyncLifecycle(patientSearch, options);
 
 // t('Appointments', 'Appointments')
-export const patientAppointmentsSummaryDashboardLink = getSyncLifecycle(
-  createPatientChartDashboardLink({ ...patientChartDashboardMeta, moduleName }),
+export const patientAppointmentsSummaryDashboardLink = getAsyncLifecycle(async () => {
+  const commonLib = await import('@openmrs/esm-patient-common-lib');
+  return { default: commonLib.createDashboardLink({ ...patientChartDashboardMeta, moduleName }) };
+}, options);
+
+export const patientAppointmentsDetailedSummary = getAsyncLifecycle(
+  () => import('./patient-appointments/patient-appointments-detailed-summary.component'),
   options,
 );
 
-export const patientAppointmentsDetailedSummary = getSyncLifecycle(
-  patientAppointmentsDetailedSummaryComponent,
+export const patientAppointmentsOverview = getAsyncLifecycle(
+  () => import('./patient-appointments/patient-appointments-overview.component'),
   options,
 );
 
-export const patientAppointmentsOverview = getSyncLifecycle(patientAppointmentsOverviewComponent, options);
-
-export const patientUpcomingAppointmentsWidget = getSyncLifecycle(patientUpcomingAppointmentsComponent, options);
+export const patientUpcomingAppointmentsWidget = getAsyncLifecycle(
+  () => import('./patient-appointments/patient-upcoming-appointments-card.component'),
+  options,
+);
 
 export const patientAppointmentsCancelConfirmationDialog = getAsyncLifecycle(
   () => import('./patient-appointments/patient-appointments-cancel.modal'),

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

@@ -1,14 +1,13 @@
 import React, { useContext } from 'react';
 import dayjs from 'dayjs';
 import isToday from 'dayjs/plugin/isToday';
-import { launchWorkspace } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { Calendar, Hospital } from '@carbon/react/icons';
 import { Button } from '@carbon/react';
-import { ExtensionSlot, isDesktop, navigate, useLayoutType } from '@openmrs/esm-framework';
+import { ExtensionSlot, isDesktop, launchWorkspace, navigate, useLayoutType } from '@openmrs/esm-framework';
 import { spaHomePage } from '../constants';
-import styles from './metrics-header.scss';
 import SelectedDateContext from '../hooks/selectedDateContext';
+import styles from './metrics-header.scss';
 
 dayjs.extend(isToday);
 
@@ -39,7 +38,7 @@ const MetricsHeader: React.FC = () => {
           onClick={() =>
             navigate({ to: `${spaHomePage}/appointments/calendar/${dayjs(selectedDate).format('YYYY-MM-DD')}` })
           }>
-          {t('appointmentsCalendar', 'Appointments Calendar')}
+          {t('appointmentsCalendar', 'Appointments calendar')}
         </Button>
         <ExtensionSlot
           name="patient-search-button-slot"

package/src/routes.json

@@ -117,7 +117,7 @@
     },
     {
       "name": "edit-appointments-form",
-      "component": "appointementForm",
+      "component": "appointmentsForm",
       "meta": {
         "title":{
           "key":"editAppointment",
@@ -131,7 +131,7 @@
    },
     {
       "name": "create-appointment",
-      "component": "appointementForm",
+      "component": "appointmentsForm",
       "meta": {
         "title": {
           "key":"appointmentForm",
@@ -141,7 +141,7 @@
     },
     {
       "name": "add-appointment",
-      "component": "appointementForm",
+      "component": "appointmentsForm",
       "meta": {
         "title": {
           "key": "createNewAppointment",

package/src/types/index.ts

@@ -27,7 +27,6 @@ export enum AppointmentKind {
   WALKIN = 'WalkIn',
   VIRTUAL = 'Virtual',
 }
-
 // TODO: remove interface elements that aren't actually present on the Appointment object returned from the Appointment API
 export interface Appointment {
   appointmentKind: AppointmentKind;

package/translations/am.json

@@ -27,7 +27,7 @@
   "appointments": "Appointments",
   "Appointments": "Appointments",
   "appointments_lower": "appointments",
-  "appointmentsCalendar": "Appointments Calendar",
+  "appointmentsCalendar": "Appointments calendar",
   "appointmentScheduled": "Appointment scheduled",
   "appointmentService": "Appointment service",
   "appointmentServiceCreate": "Appointment service created successfully",
@@ -62,6 +62,7 @@
   "createNewAppointment": "Create new appointment",
   "date": "Date",
   "date&Time": "Date & time",
+  "dateAppointmentIssuedCannotBeAfterAppointmentDate": "Date appointment issued cannot be after the appointment date",
   "dateOfBirth": "Date of birth",
   "dateScheduled": "Date appointment issued",
   "dateScheduledDetail": "Date appointment issued",
@@ -89,7 +90,6 @@
   "filterTable": "Filter table",
   "gender": "Gender",
   "highestServiceVolume": "Highest volume service: {{time}}",
-  "home": "Home",
   "identifier": "Identifier",
   "invalidNumber": "Number is not valid",
   "invalidTime": "Invalid time",
@@ -99,6 +99,8 @@
   "location": "Location",
   "medications": "Medications",
   "missed": "Missed",
+  "next": "Next",
+  "nextMonth": "Next month",
   "nextPage": "Next page",
   "no": "No",
   "noAppointmentsToDisplay": "No appointments to display",
@@ -119,11 +121,14 @@
   "patientName": "Patient name",
   "patients": "Patients",
   "period": "Period",
+  "prev": "Prev",
+  "previousMonth": "Previous month",
   "previousPage": "Previous page",
   "provider": "Provider",
   "providers": "Providers",
   "providersBooked": "Providers booked: {{time}}",
   "recurringAppointment": "Recurring Appointment",
+  "recurringAppointmentShouldHaveEndDate": "A recurring appointment should have an end date",
   "repeatEvery": "Repeat every",
   "save": "Save",
   "saveAndClose": "Save and close",

package/translations/ar.json

@@ -27,7 +27,7 @@
   "appointments": "موعد",
   "Appointments": "Appointments",
   "appointments_lower": "appointments",
-  "appointmentsCalendar": "تقويم المواعيد",
+  "appointmentsCalendar": "Appointments calendar",
   "appointmentScheduled": "تم جدولة الموعد",
   "appointmentService": "خدمة الموعد",
   "appointmentServiceCreate": "تم إنشاء خدمة الموعد بنجاح",
@@ -62,6 +62,7 @@
   "createNewAppointment": "إنشاء موعد جديد",
   "date": "تاريخ",
   "date&Time": "Date & time",
+  "dateAppointmentIssuedCannotBeAfterAppointmentDate": "Date appointment issued cannot be after the appointment date",
   "dateOfBirth": "Date of birth",
   "dateScheduled": "Date appointment issued",
   "dateScheduledDetail": "Date appointment issued",
@@ -89,7 +90,6 @@
   "filterTable": "Filter table",
   "gender": "الجنس",
   "highestServiceVolume": "Highest volume service: {{time}}",
-  "home": "الرئيسية",
   "identifier": "معرف",
   "invalidNumber": "Number is not valid",
   "invalidTime": "Invalid time",
@@ -99,6 +99,8 @@
   "location": "الموقع",
   "medications": "الأدوية",
   "missed": "فائت",
+  "next": "Next",
+  "nextMonth": "Next month",
   "nextPage": "Next page",
   "no": "لا",
   "noAppointmentsToDisplay": "No appointments to display",
@@ -119,11 +121,14 @@
   "patientName": "اسم المريض",
   "patients": "المرضى",
   "period": "Period",
+  "prev": "Prev",
+  "previousMonth": "Previous month",
   "previousPage": "Previous page",
   "provider": "مقدم الخدمة",
   "providers": "مقدمي الخدمة",
   "providersBooked": "Providers booked: {{time}}",
   "recurringAppointment": "Recurring Appointment",
+  "recurringAppointmentShouldHaveEndDate": "A recurring appointment should have an end date",
   "repeatEvery": "Repeat every",
   "save": "حفظ",
   "saveAndClose": "Save and close",

package/translations/en.json

@@ -27,7 +27,7 @@
   "appointments": "Appointments",
   "Appointments": "Appointments",
   "appointments_lower": "appointments",
-  "appointmentsCalendar": "Appointments Calendar",
+  "appointmentsCalendar": "Appointments calendar",
   "appointmentScheduled": "Appointment scheduled",
   "appointmentService": "Appointment service",
   "appointmentServiceCreate": "Appointment service created successfully",
@@ -62,6 +62,7 @@
   "createNewAppointment": "Create new appointment",
   "date": "Date",
   "date&Time": "Date & time",
+  "dateAppointmentIssuedCannotBeAfterAppointmentDate": "Date appointment issued cannot be after the appointment date",
   "dateOfBirth": "Date of birth",
   "dateScheduled": "Date appointment issued",
   "dateScheduledDetail": "Date appointment issued",
@@ -89,7 +90,6 @@
   "filterTable": "Filter table",
   "gender": "Gender",
   "highestServiceVolume": "Highest volume service: {{time}}",
-  "home": "Home",
   "identifier": "Identifier",
   "invalidNumber": "Number is not valid",
   "invalidTime": "Invalid time",
@@ -99,6 +99,8 @@
   "location": "Location",
   "medications": "Medications",
   "missed": "Missed",
+  "next": "Next",
+  "nextMonth": "Next month",
   "nextPage": "Next page",
   "no": "No",
   "noAppointmentsToDisplay": "No appointments to display",
@@ -119,11 +121,14 @@
   "patientName": "Patient name",
   "patients": "Patients",
   "period": "Period",
+  "prev": "Prev",
+  "previousMonth": "Previous month",
   "previousPage": "Previous page",
   "provider": "Provider",
   "providers": "Providers",
   "providersBooked": "Providers booked: {{time}}",
   "recurringAppointment": "Recurring Appointment",
+  "recurringAppointmentShouldHaveEndDate": "A recurring appointment should have an end date",
   "repeatEvery": "Repeat every",
   "save": "Save",
   "saveAndClose": "Save and close",