@kenyaemr/esm-appointments-app 7.0.2-pre.65

package/src/helpers/excel.ts

@@ -0,0 +1,61 @@
+import { formatDate } from '@openmrs/esm-framework';
+import * as XLSX from 'xlsx';
+import { type Appointment } from '../types';
+
+/**
+ * Downloads the provided appointments as an Excel file.
+ * @param {Array<Appointment>} appointments - The list of appointments to download.
+ * @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' }),
+  }));
+
+  const worksheet = createWorksheet(appointmentsJSON);
+  const workbook = createWorkbook(worksheet, 'Appointment list');
+  XLSX.writeFile(workbook, `${fileName}.xlsx`, { compression: true });
+}
+
+/**
+Downloads unscheduled appointments as an Excel file.
+@param {Array<Object>} unscheduledAppointments - The list of unscheduled appointments to download.
+@param {string} fileName - The name of the file to download. Defaults to 'Unscheduled appointments {current date and time}'.
+*/
+export function downloadUnscheduledAppointments(
+  unscheduledAppointments: Array<any>,
+  fileName = `Unscheduled appointments ${formatDate(new Date(), { year: true, time: true })}`,
+) {
+  const appointmentsJSON = unscheduledAppointments?.map((appointment) => ({
+    'Patient name': appointment.name,
+    Gender: appointment.gender === 'F' ? 'Female' : 'Male',
+    Age: appointment.age,
+    'Phone Number': appointment.phoneNumber ?? '--',
+    Identifier: appointment.identifier ?? '--',
+  }));
+
+  const worksheet = createWorksheet(appointmentsJSON);
+  const workbook = createWorkbook(worksheet, 'Appointment list');
+
+  XLSX.writeFile(workbook, `${fileName}.xlsx`, {
+    compression: true,
+  });
+}
+
+function createWorksheet(data: any[]) {
+  const max_width = data.reduce((w, r) => Math.max(w, r['Patient name'].length), 30);
+  const worksheet = XLSX.utils.json_to_sheet(data);
+  worksheet['!cols'] = [{ wch: max_width }];
+  return worksheet;
+}
+
+function createWorkbook(worksheet: XLSX.WorkSheet, sheetName: string) {
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
+  return workbook;
+}

package/src/helpers/functions.ts

@@ -0,0 +1,82 @@
+import dayjs, { type Dayjs } from 'dayjs';
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import { type AppointmentSummary, type Appointment } from '../types';
+import { configSchema } from '../config-schema';
+
+export const getHighestAppointmentServiceLoad = (appointmentSummary: Array<any> = []) => {
+  const groupedAppointments = appointmentSummary?.map(({ countMap, serviceName }) => ({
+    serviceName: serviceName,
+    count: countMap.reduce((cummulator, currentValue) => cummulator + currentValue.allAppointmentsCount, 0),
+  }));
+  return groupedAppointments.find((summary) => summary.count === Math.max(...groupedAppointments.map((x) => x.count)));
+};
+
+export const flattenAppointmentSummary = (appointmentToTransfrom: Array<any>) =>
+  appointmentToTransfrom.flatMap((el: any) => ({
+    serviceName: el.appointmentService.name,
+    countMap: Object.entries(el.appointmentCountMap).flatMap((el) => el[1]),
+  }));
+
+export const getServiceCountByAppointmentType = (
+  appointmentSummary: Array<AppointmentSummary>,
+  appointmentType: string,
+) => {
+  return appointmentSummary
+    .map((el) => Object.entries(el.appointmentCountMap).flatMap((el) => el[1][appointmentType]))
+    .flat(1)
+    .reduce((count, val) => count + val, 0);
+};
+
+export const formatAMPM = (date) => {
+  let hours = date.getHours();
+  let minutes = date.getMinutes();
+  let ampm = hours >= 12 ? 'PM' : 'AM';
+  hours = hours % 12;
+  hours = hours ? hours : 12; // the hour '0' should be '12'
+  minutes = minutes < 10 ? '0' + minutes : minutes;
+  const strTime = hours + ':' + minutes + ' ' + ampm;
+  return strTime;
+};
+
+export const isSameMonth = (cellDate: Dayjs, currentDate: Dayjs) => {
+  return cellDate.isSame(currentDate, 'month');
+};
+
+export const monthDays = (currentDate: Dayjs) => {
+  const monthStart = dayjs(currentDate).startOf('month');
+  const monthEnd = dayjs(currentDate).endOf('month');
+  const monthDays = dayjs(currentDate).daysInMonth();
+  const lastMonth = dayjs(currentDate).subtract(1, 'month');
+  const nextMonth = dayjs(currentDate).add(1, 'month');
+  let days: Dayjs[] = [];
+
+  for (let i = lastMonth.daysInMonth() - monthStart.day() + 1; i <= lastMonth.daysInMonth(); i++) {
+    days.push(dayjs().month(lastMonth.month()).date(i));
+  }
+
+  for (let i = 1; i <= monthDays; i++) {
+    days.push(currentDate.date(i));
+  }
+
+  const dayLen = days.length > 30 ? 7 : 14;
+
+  for (let i = 1; i < dayLen - monthEnd.day(); i++) {
+    days.push(dayjs().month(nextMonth.month()).date(i));
+  }
+  return days;
+};
+
+export const getGender = (gender, t) => {
+  switch (gender) {
+    case 'M':
+      return t('male', 'Male');
+    case 'F':
+      return t('female', 'Female');
+    case 'O':
+      return t('other', 'Other');
+    case 'U':
+      return t('unknown', 'Unknown');
+    default:
+      return gender;
+  }
+};

package/src/helpers/index.ts

@@ -0,0 +1,2 @@
+export * from './functions';
+export * from './time';

package/src/helpers/time.tsx

@@ -0,0 +1,15 @@
+export type amPm = 'AM' | 'PM';
+
+export const convertTime12to24 = (time12h, timeFormat: amPm) => {
+  let [hours, minutes] = time12h?.split(':');
+
+  if (hours === '12' && timeFormat === 'AM') {
+    hours = '00';
+  }
+
+  if (timeFormat === 'PM') {
+    hours = hours === '12' ? hours : parseInt(hours, 10) + 12;
+  }
+
+  return [hours, minutes];
+};

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import AppointmentsList from '../appointments/scheduled/appointments-list.component';
+import dayjs from 'dayjs';
+import styles from './home-appointments.scss';
+import { toOmrsIsoString } from '@openmrs/esm-framework';
+
+const HomeAppointments = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.container}>
+      <AppointmentsList
+        date={toOmrsIsoString(dayjs().startOf('day').toDate())}
+        title={t('todays', "Today's")}
+        filterCancelled={true}
+      />
+    </div>
+  );
+};
+
+export default HomeAppointments;

package/src/home/home-appointments.scss

@@ -0,0 +1,10 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.container {
+  width: 100%;
+  margin: 0 auto;
+  max-width: 95vw;
+  margin-top: layout.$spacing-09;
+  margin-bottom: layout.$spacing-12;
+}

package/src/hooks/patientAppointmentContext.ts

@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+
+/**
+ * When rendering the Patient Appointments view, let the view know if this is being rendered in the Patient Chart or the Appointments App
+ * (we need to know this to determine if we open the appointments form as part of the patient chart workspace or as an overlay in the appointments app)
+ */
+export enum PatientAppointmentContextTypes {
+  PATIENT_CHART,
+  APPOINTMENTS_APP,
+}
+const PatientAppointmentContext = createContext<PatientAppointmentContextTypes>(
+  PatientAppointmentContextTypes.PATIENT_CHART,
+);
+
+export default PatientAppointmentContext;

package/src/hooks/selectedDateContext.ts

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+import dayjs from 'dayjs';
+import { omrsDateFormat } from '../constants';
+
+const SelectedDateContext = createContext({
+  selectedDate: dayjs().startOf('day').format(omrsDateFormat),
+  setSelectedDate: (date: string) => {},
+});
+
+export default SelectedDateContext;

package/src/hooks/useAppointmentList.ts

@@ -0,0 +1,48 @@
+import useSWR from 'swr';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type AppointmentsFetchResponse } from '../types';
+import dayjs from 'dayjs';
+import { useContext } from 'react';
+import SelectedDateContext from './selectedDateContext';
+
+export const useAppointmentList = (appointmentStatus: string, date?: string) => {
+  const { selectedDate } = useContext(SelectedDateContext);
+  const startDate = date ? date : selectedDate;
+  const endDate = dayjs(startDate).endOf('day').format('YYYY-MM-DDTHH:mm:ss.SSSZZ'); // TODO: fix? is this correct?
+  const searchUrl = `${restBaseUrl}/appointments/search`;
+  const abortController = new AbortController();
+
+  const fetcher = ([url, startDate, endDate, status]) =>
+    openmrsFetch(url, {
+      method: 'POST',
+      signal: abortController.signal,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: {
+        startDate: startDate,
+        endDate: endDate,
+        status: status,
+      },
+    });
+
+  const { data, error, isLoading, mutate } = useSWR<AppointmentsFetchResponse, Error>(
+    [searchUrl, startDate, endDate, appointmentStatus],
+    fetcher,
+    { errorRetryCount: 2 },
+  );
+
+  return { appointmentList: data?.data ?? [], isLoading, error, mutate };
+};
+
+export const useEarlyAppointmentList = (startDate?: string) => {
+  const { selectedDate } = useContext(SelectedDateContext);
+  const forDate = startDate ? startDate : selectedDate;
+  const url = `${restBaseUrl}/appointment/earlyAppointment?forDate=${forDate}`;
+
+  const { data, error, isLoading } = useSWR<AppointmentsFetchResponse, Error>(url, openmrsFetch, {
+    errorRetryCount: 2,
+  });
+
+  return { earlyAppointmentList: data?.data ?? [], isLoading, error };
+};

package/src/hooks/useAppointmentService.ts

@@ -0,0 +1,11 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { type AppointmentService } from '../types';
+
+export function useAppointmentServices() {
+  const { data, error, isLoading } = useSWR<{ data: Array<AppointmentService> }>(
+    `${restBaseUrl}/appointmentService/all/default`,
+    openmrsFetch,
+  );
+  return { serviceTypes: data?.data ?? [], isLoading, error };
+}

package/src/hooks/useAppointmentsCalendar.ts

@@ -0,0 +1,68 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import useSWR from 'swr';
+import { omrsDateFormat } from '../constants';
+import { type DailyAppointmentsCountByService } from '../types';
+
+interface AppointmentCountMapEntry {
+  allAppointmentsCount: number;
+}
+
+interface AppointmentSummaryResponse {
+  appointmentService: {
+    name: string;
+    uuid: string;
+  };
+  appointmentCountMap: Map<string, AppointmentCountMapEntry>;
+}
+
+export const useAppointmentsCalendar = (forDate: string, period: string) => {
+  const { startDate, endDate } = evaluateAppointmentCalendarDates(forDate, period);
+  const url = `${restBaseUrl}/appointment/appointmentSummary?startDate=${startDate}&endDate=${endDate}`;
+
+  const { data, error, isLoading } = useSWR<{ data: Array<AppointmentSummaryResponse> }>(
+    startDate && endDate ? url : null,
+    openmrsFetch,
+    { errorRetryCount: 2 },
+  );
+  const results: Array<DailyAppointmentsCountByService> = data?.data.reduce((acc, service) => {
+    const serviceName = service.appointmentService.name;
+    const serviceUuid = service.appointmentService.uuid;
+    Object.entries(service.appointmentCountMap).map(([key, value]) => {
+      const existingEntry = acc.find((entry) => entry.appointmentDate === key);
+      if (existingEntry) {
+        existingEntry.services.push({ serviceName, serviceUuid, count: value.allAppointmentsCount });
+      } else {
+        acc.push({
+          appointmentDate: key,
+          services: [{ serviceName, serviceUuid, count: value.allAppointmentsCount }],
+        });
+      }
+    });
+    return acc;
+  }, []);
+  return { isLoading, calendarEvents: results, error };
+};
+
+function evaluateAppointmentCalendarDates(forDate: string, period: string) {
+  if (period === 'daily') {
+    return {
+      startDate: dayjs(forDate).startOf('day').format(omrsDateFormat),
+      endDate: dayjs(forDate).endOf('day').format(omrsDateFormat),
+    };
+  }
+
+  if (period === 'weekly') {
+    return {
+      startDate: dayjs(forDate).startOf('week').format(omrsDateFormat),
+      endDate: dayjs(forDate).endOf('week').format(omrsDateFormat),
+    };
+  }
+
+  if (period === 'monthly') {
+    return {
+      startDate: dayjs(forDate).startOf('month').format(omrsDateFormat),
+      endDate: dayjs(forDate).endOf('month').format(omrsDateFormat),
+    };
+  }
+}

package/src/hooks/useClinicalMetrics.ts

@@ -0,0 +1,79 @@
+import useSWR from 'swr';
+import dayjs from 'dayjs';
+import uniqBy from 'lodash-es/uniqBy';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type Appointment, type AppointmentSummary } from '../types';
+import { omrsDateFormat } from '../constants';
+import {
+  getHighestAppointmentServiceLoad,
+  flattenAppointmentSummary,
+  getServiceCountByAppointmentType,
+} from '../helpers';
+import isEmpty from 'lodash-es/isEmpty';
+import SelectedDateContext from './selectedDateContext';
+import { useContext } from 'react';
+
+export const useClinicalMetrics = () => {
+  const { selectedDate } = useContext(SelectedDateContext);
+  const endDate = dayjs(new Date(selectedDate).setHours(23, 59, 59, 59)).format(omrsDateFormat);
+  const url = `${restBaseUrl}/appointment/appointmentSummary?startDate=${selectedDate}&endDate=${endDate}`;
+  const { data, error, isLoading } = useSWR<{
+    data: Array<AppointmentSummary>;
+  }>(url, openmrsFetch);
+
+  const totalAppointments = getServiceCountByAppointmentType(data?.data ?? [], 'allAppointmentsCount');
+
+  const missedAppointments = getServiceCountByAppointmentType(data?.data ?? [], 'missedAppointmentsCount');
+
+  const transformedAppointments = flattenAppointmentSummary(data?.data ?? []);
+  const highestServiceLoad = getHighestAppointmentServiceLoad(transformedAppointments);
+
+  return {
+    isLoading,
+    error,
+    totalAppointments,
+    missedAppointments,
+    highestServiceLoad,
+  };
+};
+
+export function useAllAppointmentsByDate() {
+  const { selectedDate } = useContext(SelectedDateContext);
+  const apiUrl = `${restBaseUrl}/appointment/all?forDate=${selectedDate}`;
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: Array<Appointment> }, Error>(
+    apiUrl,
+    openmrsFetch,
+  );
+
+  const providersArray = data?.data?.filter(({ providers }) => providers !== null) ?? [];
+  const providersCount = uniqBy(
+    providersArray.map(({ providers }) => providers).flat(),
+    (provider) => provider.uuid,
+  ).length;
+  return {
+    totalProviders: providersCount ? providersCount : 0,
+    isLoading,
+    isError: error,
+    isValidating,
+    mutate,
+  };
+}
+
+export const useScheduledAppointment = (serviceUuid: string) => {
+  const { selectedDate } = useContext(SelectedDateContext);
+  const url = `${restBaseUrl}/appointment/all?forDate=${selectedDate}`;
+
+  const { data, error, isLoading } = useSWR<{
+    data: Array<any>;
+  }>(url, openmrsFetch);
+
+  const totalScheduledAppointments = !isEmpty(serviceUuid)
+    ? data?.data?.filter((appt) => appt?.service?.uuid === serviceUuid)?.length ?? 0
+    : data?.data?.length ?? 0;
+
+  return {
+    isLoading,
+    error,
+    totalScheduledAppointments,
+  };
+};

package/src/hooks/useDefaultLocation.ts

@@ -0,0 +1,14 @@
+import { type FetchResponse, openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+
+export const useDefaultLoginLocation = () => {
+  const config = useConfig();
+  const apiUrl = config.defaultFacilityUrl;
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse>(apiUrl, openmrsFetch);
+
+  return {
+    defaultFacility: data ? data?.data : null,
+    isLoading: isLoading,
+    isError: error,
+  };
+};

package/src/hooks/useOverlay.tsx

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

package/src/hooks/usePatientAppointmentHistory.ts

@@ -0,0 +1,49 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type AppointmentsFetchResponse } from '../types';
+import useSWR from 'swr';
+import dayjs from 'dayjs';
+import SelectedDateContext from './selectedDateContext';
+import { useContext } from 'react';
+
+export function usePatientAppointmentHistory(patientUuid: string) {
+  const abortController = new AbortController();
+  const appointmentsSearchUrl = `${restBaseUrl}/appointments/search`;
+  const { selectedDate } = useContext(SelectedDateContext);
+  const fetcher = () =>
+    openmrsFetch(appointmentsSearchUrl, {
+      method: 'POST',
+      signal: abortController.signal,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: {
+        patientUuid: patientUuid,
+        startDate: selectedDate,
+      },
+    });
+
+  const { data, error, isLoading, isValidating } = useSWR<AppointmentsFetchResponse, Error>(
+    patientUuid ? appointmentsSearchUrl : null,
+    fetcher,
+  );
+
+  const missedAppointments = data?.data?.length
+    ? data.data.filter((appointment) => appointment.status === 'Missed').length
+    : 0;
+  const completedAppointments = data?.data?.length
+    ? data.data.filter((appointment) => appointment.status === 'Completed').length
+    : 0;
+  const cancelledAppointments = data?.data?.length
+    ? data.data.filter((appointment) => appointment.status === 'Cancelled').length
+    : 0;
+  const upcomingAppointments = data?.data?.length
+    ? data.data?.filter((appointment: any) => dayjs((appointment.startDateTime / 1000) * 1000).isAfter(dayjs())).length
+    : 0;
+
+  return {
+    appointmentsCount: { missedAppointments, completedAppointments, cancelledAppointments, upcomingAppointments },
+    isError: error,
+    isLoading,
+    isValidating,
+  };
+}

package/src/hooks/useProviders.ts

@@ -0,0 +1,18 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { type Provider } from '../types';
+
+export function useProviders() {
+  const apiUrl = `${restBaseUrl}/provider`;
+  const { data, error, isLoading, isValidating } = useSWR<{ data: { results: Array<Provider> } }, Error>(
+    apiUrl,
+    openmrsFetch,
+  );
+
+  return {
+    providers: data ? data.data?.results : [],
+    isLoading,
+    isError: error,
+    isValidating,
+  };
+}

package/src/hooks/useTodaysVisits.ts

@@ -0,0 +1,19 @@
+import useSWR from 'swr';
+import { useSession, type Visit, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+
+/**
+ * Custom hook to fetch visits from the OpenMRS REST API.
+ * This fetches all visits that started on today
+ * @returns An object containing the visits, isLoading flag, and error message.
+ */
+export const useTodaysVisits = () => {
+  const session = useSession();
+  const visitsUrl = `${restBaseUrl}/visit?includeInactive=true&includeParentLocations=true&v=custom:(uuid,patient:(uuid,identifiers:(identifier,uuid),person:(age,display,gender,uuid)),visitType:(uuid,name,display),location:(uuid,name,display),startDatetime,stopDatetime)&fromStartDate=${dayjs().format(
+    'YYYY-MM-DD',
+  )}&location=${session?.sessionLocation?.uuid}`;
+  const { data, error, isLoading, mutate } = useSWR<{ data: { results: Visit[] } }>(visitsUrl, openmrsFetch);
+  const visits = data?.data?.results ?? [];
+
+  return { isLoading, visits, error, mutateVisit: mutate };
+};

package/src/hooks/useUnscheduledAppointments.ts

@@ -0,0 +1,45 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { type Identifier } from '../types';
+import { configSchema } from '../config-schema';
+import SelectedDateContext from './selectedDateContext';
+import { useContext } from 'react';
+
+export interface Response {
+  age: number;
+  dob: number;
+  gender: string;
+  identifiers: Array<Identifier>;
+  name: string;
+  uuid: string;
+  phoneNumber: string;
+  visit: {
+    stopDateTime: Date;
+    startDateTime: Date;
+    visitType: string;
+  };
+}
+
+export function useUnscheduledAppointments() {
+  const { selectedDate } = useContext(SelectedDateContext);
+  // TODO/NOTE: this endpoint is not implemented in main Bahmni Appointments backend
+  const url = `${restBaseUrl}/appointment/unScheduledAppointment?forDate=${selectedDate}`;
+  const { data, error, isLoading } = useSWR<{ data: Array<Response> }>(url, openmrsFetch, { errorRetryCount: 2 });
+  const appointments = data?.data?.map((appointment) => toAppointmentObject(appointment));
+
+  return { isLoading, data: appointments ?? [], error };
+}
+
+function toAppointmentObject(appointment: Response) {
+  return {
+    name: appointment.name,
+    identifier: appointment?.identifiers?.find(
+      (identifier) => identifier.identifierName === configSchema.patientIdentifierType._default,
+    ).identifier,
+    dateTime: appointment?.visit.startDateTime,
+    gender: appointment.gender,
+    phoneNumber: appointment.phoneNumber,
+    age: appointment.age,
+    uuid: appointment.uuid,
+  };
+}