@openmrs/esm-appointments-app 10.0.2 → 10.0.3-pre.2

package/src/form/appointments-form.resource.ts

@@ -1,102 +1,9 @@
-import { useCallback } from 'react';
 import dayjs from 'dayjs';
 import isToday from 'dayjs/plugin/isToday';
-import useSWR, { useSWRConfig } from 'swr';
 import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
-import {
-  type AppointmentPayload,
-  type AppointmentService,
-  type AppointmentsFetchResponse,
-  type RecurringAppointmentsPayload,
-} from '../types';
+import { type AppointmentPayload, type RecurringAppointmentsPayload } from '../types';
 dayjs.extend(isToday);
 
-const appointmentUrlMatcher = `${restBaseUrl}/appointment`;
-const appointmentsSearchUrl = `${restBaseUrl}/appointments/search`;
-
-export function useMutateAppointments() {
-  const { mutate } = useSWRConfig();
-  // this mutate is intentionally broad because there may be many different keys that need to be invalidated when appointments are updated
-  const mutateAppointments = useCallback(
-    () =>
-      mutate((key) => {
-        return (
-          (typeof key === 'string' && key.startsWith(appointmentUrlMatcher)) ||
-          (Array.isArray(key) && key[0].startsWith(appointmentUrlMatcher))
-        );
-      }),
-    [mutate],
-  );
-
-  return {
-    mutateAppointments,
-  };
-}
-
-export function useAppointments(patientUuid: string, startDate: string, abortController: AbortController) {
-  /*
-    SWR isn't meant to make POST requests for data fetching. This is a consequence of the API only exposing this resource via POST.
-    This works but likely isn't recommended.
-  */
-  const fetcher = () =>
-    openmrsFetch(appointmentsSearchUrl, {
-      method: 'POST',
-      signal: abortController.signal,
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: {
-        patientUuid: patientUuid,
-        startDate: startDate,
-      },
-    });
-
-  const { data, error, isLoading, isValidating, mutate } = useSWR<AppointmentsFetchResponse, Error>(
-    appointmentsSearchUrl,
-    fetcher,
-  );
-
-  const appointments = data?.data?.length ? data.data : null;
-
-  const pastAppointments = appointments
-    ?.sort((a, b) => (b.startDateTime > a.startDateTime ? 1 : -1))
-    ?.filter(({ status }) => status !== 'Cancelled')
-    ?.filter(({ startDateTime }) =>
-      dayjs(new Date(startDateTime).toISOString()).isBefore(new Date().setHours(0, 0, 0, 0)),
-    );
-
-  const upcomingAppointments = appointments
-    ?.sort((a, b) => (a.startDateTime > b.startDateTime ? 1 : -1))
-    ?.filter(({ status }) => status !== 'Cancelled')
-    ?.filter(({ startDateTime }) => dayjs(new Date(startDateTime).toISOString()).isAfter(new Date()));
-
-  const todaysAppointments = appointments
-    ?.sort((a, b) => (a.startDateTime > b.startDateTime ? 1 : -1))
-    ?.filter(({ status }) => status !== 'Cancelled')
-    ?.filter(({ startDateTime }) => dayjs(new Date(startDateTime).toISOString()).isToday());
-
-  return {
-    data: data ? { pastAppointments, upcomingAppointments, todaysAppointments } : null,
-    error,
-    isLoading,
-    isValidating,
-    mutate,
-  };
-}
-
-export function useAppointmentService() {
-  const { data, error, isLoading } = useSWR<{ data: Array<AppointmentService> }, Error>(
-    `${restBaseUrl}/appointmentService/all/full`,
-    openmrsFetch,
-  );
-
-  return {
-    data: data ? data.data : null,
-    error,
-    isLoading,
-  };
-}
-
 export function saveAppointment(appointment: AppointmentPayload, abortController: AbortController) {
   return openmrsFetch(`${restBaseUrl}/appointment`, {
     method: 'POST',
@@ -122,32 +29,6 @@ export function saveRecurringAppointments(
   });
 }
 
-// TODO refactor to use SWR?
-export function getAppointmentsByUuid(appointmentUuid: string, abortController: AbortController) {
-  return openmrsFetch(`${restBaseUrl}/appointments/${appointmentUuid}`, {
-    signal: abortController.signal,
-  });
-}
-
-// TODO refactor to use SWR?
-export function getAppointmentService(abortController: AbortController, uuid) {
-  return openmrsFetch(`${restBaseUrl}/appointmentService?uuid=` + uuid, {
-    signal: abortController.signal,
-  });
-}
-
-export const cancelAppointment = async (toStatus: string, appointmentUuid: string) => {
-  const omrsDateFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZZ';
-  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const statusChangeTime = dayjs(new Date()).format(omrsDateFormat);
-  const url = `${restBaseUrl}/appointments/${appointmentUuid}/status-change`;
-  return await openmrsFetch(url, {
-    body: { toStatus, onDate: statusChangeTime, timeZone: timeZone },
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-  });
-};
-
 export const checkAppointmentConflict = async (appointmentPayload: AppointmentPayload) => {
   return await openmrsFetch(`${restBaseUrl}/appointments/conflicts`, {
     method: 'POST',

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

@@ -40,17 +40,13 @@ import {
 import { z } from 'zod';
 import { type ConfigObject } from '../config-schema';
 import type { Appointment, AppointmentPayload, RecurringPattern } from '../types';
-import {
-  checkAppointmentConflict,
-  saveAppointment,
-  saveRecurringAppointments,
-  useAppointmentService,
-  useMutateAppointments,
-} from './appointments-form.resource';
+import { checkAppointmentConflict, saveAppointment, saveRecurringAppointments } from './appointments-form.resource';
+import { useAppointmentServices } from '../hooks/useAppointmentService';
 import { appointmentLocationTagName, dateFormat, moduleName, weekDays } from '../constants';
-import { useAppointmentsStore } from '../store';
 import { useProviders } from '../hooks/useProviders';
+import { useMutateAppointments } from '../hooks/useMutateAppointments';
 import Workload from '../workload/workload.component';
+import { useSelectedDate } from '../hooks/useSelectedDate';
 import styles from './appointments-form.scss';
 
 interface AppointmentsFormProps {
@@ -84,8 +80,9 @@ const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps
   const locations = useLocations(appointmentLocationTagName);
   const providers = useProviders();
   const session = useSession();
-  const { selectedDate } = useAppointmentsStore();
-  const { data: services, isLoading } = useAppointmentService();
+
+  const selectedDate = useSelectedDate();
+  const { serviceTypes, isLoading } = useAppointmentServices();
   const { appointmentStatuses, appointmentTypes, allowAllDayAppointments } = useConfig<ConfigObject>();
 
   const [isRecurringAppointment, setIsRecurringAppointment] = useState(false);
@@ -243,7 +240,7 @@ const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps
       appointmentNote: appointment?.comments || '',
       appointmentStatus: appointment?.status || '',
       appointmentType: appointment?.appointmentKind || (appointmentTypes?.length === 1 ? appointmentTypes[0] : ''),
-      selectedService: appointment?.service?.name || (services?.length === 1 ? services[0].name : ''),
+      selectedService: appointment?.service?.name || (serviceTypes?.length === 1 ? serviceTypes[0].name : ''),
       recurringPatternType: defaultRecurringPatternType,
       recurringPatternPeriod: defaultRecurringPatternPeriod,
       recurringPatternDaysOfWeek: defaultRecurringPatternDaysOfWeek,
@@ -423,7 +420,7 @@ const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps
       isAllDayAppointment,
     } = data;
 
-    const serviceUuid = services?.find((service) => service.name === selectedService)?.uuid;
+    const serviceUuid = serviceTypes?.find((service) => service.name === selectedService)?.uuid;
     const hoursAndMinutes = startTime.split(':').map((item) => parseInt(item, 10));
     const hours = (hoursAndMinutes[0] % 12) + (timeFormat === 'PM' ? 12 : 0);
     const minutes = hoursAndMinutes[1];
@@ -535,13 +532,13 @@ const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps
                       if (!isEditing) {
                         setValue(
                           'duration',
-                          services?.find((service) => service.name === event.target.value)?.durationMins,
+                          serviceTypes?.find((service) => service.name === event.target.value)?.durationMins,
                         );
                       } else {
-                        const previousServiceDuration = services?.find(
+                        const previousServiceDuration = serviceTypes?.find(
                           (service) => service.name === getValues('selectedService'),
                         )?.durationMins;
-                        const selectedServiceDuration = services?.find(
+                        const selectedServiceDuration = serviceTypes?.find(
                           (service) => service.name === event.target.value,
                         )?.durationMins;
                         if (selectedServiceDuration && previousServiceDuration === getValues('duration')) {
@@ -553,8 +550,8 @@ const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps
                     ref={ref}
                     value={value}>
                     <SelectItem text={t('chooseService', 'Select service')} value="" />
-                    {services?.length > 0 &&
-                      services.map((service) => (
+                    {serviceTypes?.length > 0 &&
+                      serviceTypes.map((service) => (
                         <SelectItem key={service.uuid} text={service.name} value={service.name}>
                           {service.name}
                         </SelectItem>
@@ -605,7 +602,7 @@ const AppointmentsForm: React.FC<Workspace2DefinitionProps<AppointmentsFormProps
             </div>
           </FormGroup>
 
-          <FormGroup className={styles.formGroup} legendText={t('dateTime', 'Date & Time')}>
+          <FormGroup className={styles.formGroup} legendText={t('dateTime', 'Appointment time')}>
             <div className={styles.dateTimeFields}>
               {isRecurringAppointment && (
                 <div className={styles.inputContainer}>

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

@@ -1,11 +1,12 @@
 import React, { useCallback, useMemo } from 'react';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { MultiSelect } from '@carbon/react';
 import { PageHeader, PageHeaderContent, AppointmentsPictogram, OpenmrsDatePicker } from '@openmrs/esm-framework';
-import { omrsDateFormat } from '../constants';
 import { useAppointmentServices } from '../hooks/useAppointmentService';
-import { useAppointmentsStore, setSelectedDate, setAppointmentServiceTypes } from '../store';
+import { useSelectedDate } from '../hooks/useSelectedDate';
+import { useAppointmentsStore } from '../store';
 import styles from './appointments-header.scss';
 
 interface AppointmentHeaderProps {
@@ -15,13 +16,21 @@ interface AppointmentHeaderProps {
 
 const AppointmentsHeader: React.FC<AppointmentHeaderProps> = ({ title, showServiceTypeFilter }) => {
   const { t } = useTranslation();
-  const { selectedDate, appointmentServiceTypes } = useAppointmentsStore();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { appointmentServiceTypes, setAppointmentServiceTypes } = useAppointmentsStore();
   const { serviceTypes } = useAppointmentServices();
+  const selectedDate = useSelectedDate();
 
-  const handleChangeServiceTypeFilter = useCallback(({ selectedItems }) => {
-    const selectedUuids = selectedItems.map((item) => item.id);
-    setAppointmentServiceTypes(selectedUuids);
-  }, []);
+  const selectedDateValue = useMemo(() => dayjs(selectedDate).toDate(), [selectedDate]);
+
+  const handleChangeServiceTypeFilter = useCallback(
+    ({ selectedItems }) => {
+      const selectedUuids = selectedItems.map((item) => item.id);
+      setAppointmentServiceTypes(selectedUuids);
+    },
+    [setAppointmentServiceTypes],
+  );
 
   const serviceTypeOptions = useMemo(
     () => serviceTypes?.map((item) => ({ id: item.uuid, label: item.name })) ?? [],
@@ -36,8 +45,17 @@ const AppointmentsHeader: React.FC<AppointmentHeaderProps> = ({ title, showServi
           data-testid="appointment-date-picker"
           id="appointment-date-picker"
           aria-label={t('appointmentDate', 'Appointment date')}
-          onChange={(date) => setSelectedDate(dayjs(date).startOf('day').format(omrsDateFormat))}
-          value={dayjs(selectedDate).toDate()}
+          onChange={(date) => {
+            if (!date) {
+              return;
+            }
+
+            const target = `/${dayjs(date).format('YYYY-MM-DD')}`;
+            if (!location.pathname.endsWith(target)) {
+              navigate(target);
+            }
+          }}
+          value={selectedDateValue}
         />
         {showServiceTypeFilter && (
           <MultiSelect

package/src/helpers/functions.ts

@@ -1,58 +1,9 @@
 import dayjs, { type Dayjs } from 'dayjs';
 import { type TFunction } from 'i18next';
 import { launchWorkspace2, type Workspace2DefinitionProps } from '@openmrs/esm-framework';
-import { type AppointmentSummary, type AppointmentCountMap, AppointmentStatus } from '../types';
+import { AppointmentStatus } from '../types';
 import { appointmentsFormWorkspace } from '../constants';
 
-interface FlattenedAppointmentSummary {
-  serviceName: string;
-  countMap: AppointmentCountMap[];
-}
-
-interface ServiceLoadSummary {
-  serviceName: string;
-  count: number;
-}
-
-export const getHighestAppointmentServiceLoad = (
-  appointmentSummary: FlattenedAppointmentSummary[] = [],
-): ServiceLoadSummary | undefined => {
-  const groupedAppointments = appointmentSummary.map(({ countMap, serviceName }) => ({
-    serviceName: serviceName,
-    count: countMap.reduce((accumulator, currentValue) => accumulator + currentValue.allAppointmentsCount, 0),
-  }));
-  if (groupedAppointments.length === 0) {
-    return undefined;
-  }
-  return groupedAppointments.find((summary) => summary.count === Math.max(...groupedAppointments.map((x) => x.count)));
-};
-
-export const flattenAppointmentSummary = (
-  appointmentToTransform: AppointmentSummary[],
-): FlattenedAppointmentSummary[] =>
-  appointmentToTransform.flatMap((el) => ({
-    serviceName: el.appointmentService.name,
-    countMap: Object.entries(el.appointmentCountMap).flatMap(([, countMap]) => countMap),
-  }));
-
-export const getServiceCountByAppointmentType = (
-  appointmentSummary: AppointmentSummary[],
-  appointmentType: 'allAppointmentsCount' | 'missedAppointmentsCount',
-): number => {
-  return appointmentSummary
-    .map((el) =>
-      Object.values(el.appointmentCountMap).map((countMap) => {
-        const value = countMap[appointmentType];
-        if (typeof value === 'number') {
-          return value;
-        }
-        return 0;
-      }),
-    )
-    .flat(1)
-    .reduce((count, val) => count + val, 0);
-};
-
 export const formatAMPM = (date: Date): string => {
   const hours24 = date.getHours();
   const minutes = date.getMinutes();

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

@@ -2,17 +2,30 @@ import React from 'react';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { toOmrsIsoString } from '@openmrs/esm-framework';
-import AppointmentsList from '../appointments/scheduled/appointments-list.component';
+import AppointmentsTable from '../appointments/common-components/appointments-table.component';
+import { useAppointmentList } from '../hooks/useAppointmentList';
 import styles from './home-appointments.scss';
+import { AppointmentStatus } from '../types';
 
+/**
+ * A extension that shows today's appointments, originally meant for the home app.
+ */
 const HomeAppointments = () => {
   const { t } = useTranslation();
 
+  const today = toOmrsIsoString(dayjs().startOf('day').toDate());
+  const { appointmentList, isLoading } = useAppointmentList(today);
+
+  const excludeCancelledAppointments = appointmentList.filter(
+    (appointment) => appointment.status !== AppointmentStatus.CANCELLED,
+  );
+
   return (
     <div className={styles.container}>
-      <AppointmentsList
-        date={toOmrsIsoString(dayjs().startOf('day').toDate())}
-        excludeCancelledAppointments
+      <AppointmentsTable
+        appointments={excludeCancelledAppointments}
+        isLoading={isLoading}
+        tableHeading={t('todaysAppointment', "Today's Appointments")}
       />
     </div>
   );

package/src/hooks/useActiveVisits.ts

@@ -0,0 +1,14 @@
+import useSWR from 'swr';
+import { type Visit, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+
+/**
+ * Custom hook to fetch active visits from the OpenMRS REST API.
+ * @returns An object containing the visits, isLoading flag, and error message.
+ */
+export const useActiveVisits = () => {
+  const visitsUrl = `${restBaseUrl}/visit?includeInactive=false&v=custom:(uuid,patient:(uuid),startDatetime,stopDatetime)`;
+  const { data, error, isLoading, mutate } = useSWR<{ data: { results: Visit[] } }>(visitsUrl, openmrsFetch);
+  const visits = data?.data?.results ?? [];
+
+  return { isLoading, visits, error, mutateVisits: mutate };
+};

package/src/hooks/useAppointmentList.ts

@@ -2,40 +2,23 @@ import dayjs from 'dayjs';
 import useSWR from 'swr';
 import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import { type AppointmentsFetchResponse } from '../types';
-import { useAppointmentsStore } from '../store';
+import { useSelectedDate } from './useSelectedDate';
 
-export const useAppointmentList = (appointmentStatus: string, date?: string) => {
-  const { selectedDate } = useAppointmentsStore();
-  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();
+export const useAppointmentList = (date: string) => {
+  const startOfDay = dayjs(date).startOf('day').toISOString();
+  const searchUrl = `${restBaseUrl}/appointments?forDate=${startOfDay}`;
 
-  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 };
+  const { data, ...rest } = useSWR<AppointmentsFetchResponse, Error>(searchUrl, openmrsFetch);
+  return { appointmentList: data?.data ?? [], ...rest };
 };
 
+/**
+ * This is a non-standard API that does not come with the appointments module by default
+ * @param startDate
+ * @returns
+ */
 export const useEarlyAppointmentList = (startDate?: string) => {
-  const { selectedDate } = useAppointmentsStore();
+  const selectedDate = useSelectedDate();
   const forDate = startDate ? startDate : selectedDate;
   const url = `${restBaseUrl}/appointment/earlyAppointment?forDate=${forDate}`;
 

package/src/hooks/useAppointmentService.ts

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import useSWR from 'swr';
 import { type AppointmentService } from '../types';
@@ -7,5 +8,9 @@ export function useAppointmentServices() {
     `${restBaseUrl}/appointmentService/all/default`,
     openmrsFetch,
   );
-  return { serviceTypes: data?.data ?? [], isLoading, error };
+  const sortedServices = useMemo(
+    () => (data?.data ? [...data.data].sort((a, b) => a.name.localeCompare(b.name)) : []),
+    [data?.data],
+  );
+  return { serviceTypes: sortedServices, isLoading, error };
 }

package/src/hooks/useAppointmentsAppContext.ts

@@ -0,0 +1,19 @@
+import { useAppContext } from '@openmrs/esm-framework';
+import { type AppointmentsAppContext, type Appointment } from '../types';
+
+/**
+ * This hook provides a way to reuse fetched appointments data throughout the app.
+ * It assumes that:
+ * - the ScheduledAppointments component, which calls useDefinedAppContext, is mounted.
+ * - It is not used in an extension mounted outside the Appointments app, since it relies
+ *   on data in useAppointmentsStore().
+ */
+export function useAppointmentsAppContext() {
+  return (
+    useAppContext<AppointmentsAppContext>('appointments') ?? {
+      appointmentForSelectedDateFilteredByServiceTypes: [] as Appointment[],
+      error: null,
+      isLoading: true,
+    }
+  );
+}

package/src/hooks/useAppointmentsCalendar.ts

@@ -25,10 +25,11 @@ export const useAppointmentsCalendar = (forDate: string, period: string) => {
     openmrsFetch,
     { errorRetryCount: 2 },
   );
+  // Transform API response into daily appointment counts grouped by service
   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]) => {
+    Object.entries(service.appointmentCountMap).forEach(([key, value]) => {
       const existingEntry = acc.find((entry) => entry.appointmentDate === key);
       if (existingEntry) {
         existingEntry.services.push({ serviceName, serviceUuid, count: value.allAppointmentsCount });

package/src/hooks/useMutateAppointments.ts

@@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+import { useSWRConfig } from 'swr';
+import { restBaseUrl } from '@openmrs/esm-framework';
+
+const appointmentUrlMatcher = `${restBaseUrl}/appointment`;
+
+export function useMutateAppointments() {
+  const { mutate } = useSWRConfig();
+  // this mutate is intentionally broad because there may be many different keys that need to be invalidated when appointments are updated
+  const mutateAppointments = useCallback(
+    () =>
+      mutate((key) => {
+        return (
+          (typeof key === 'string' && key.startsWith(appointmentUrlMatcher)) ||
+          (Array.isArray(key) && key[0].startsWith(appointmentUrlMatcher))
+        );
+      }),
+    [mutate],
+  );
+
+  return {
+    mutateAppointments,
+  };
+}

package/src/hooks/usePatientAppointmentHistory.ts

@@ -2,12 +2,13 @@ import dayjs from 'dayjs';
 import useSWR from 'swr';
 import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import { type AppointmentsFetchResponse } from '../types';
-import { useAppointmentsStore } from '../store';
+import { useSelectedDate } from './useSelectedDate';
 
 export function usePatientAppointmentHistory(patientUuid: string) {
   const abortController = new AbortController();
   const appointmentsSearchUrl = `${restBaseUrl}/appointments/search`;
-  const { selectedDate } = useAppointmentsStore();
+
+  const selectedDate = useSelectedDate();
 
   const fetcher = () =>
     openmrsFetch(appointmentsSearchUrl, {

package/src/hooks/useSelectedDate.ts

@@ -0,0 +1,24 @@
+import dayjs from 'dayjs';
+import { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+
+/**
+ * A custom hook to get the selected date from the URL parameter. Date should be in YYYY-MM-DD format,
+ * although looser strings accepted by dayjs is also fine. If no date is specified, it defaults to the current date.
+ */
+export function useSelectedDate() {
+  const params = useParams();
+  return useMemo(() => {
+    if (params.date) {
+      const parsedDate = dayjs(params.date, 'YYYY-MM-DD').startOf('day');
+      if (!parsedDate.isValid()) {
+        console.warn(
+          `Invalid date format in URL parameter: ${params.date}. Format should be YYYY-MM-DD. Falling back to current date.`,
+        );
+      } else {
+        return parsedDate.format('YYYY-MM-DD');
+      }
+    }
+    return dayjs().startOf('day').format('YYYY-MM-DD');
+  }, [params]);
+}

package/src/hooks/useUnscheduledAppointments.ts

@@ -3,6 +3,7 @@ import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import { type Identifier } from '../types';
 import { configSchema } from '../config-schema';
 import { useAppointmentsStore } from '../store';
+import { useSelectedDate } from './useSelectedDate';
 
 interface UnscheduledAppointment {
   age: number;
@@ -19,8 +20,11 @@ interface UnscheduledAppointment {
   };
 }
 
+/**
+ * This is a non-standard API that does not come with the appointments module by default
+ */
 export function useUnscheduledAppointments() {
-  const { selectedDate } = useAppointmentsStore();
+  const selectedDate = useSelectedDate();
   // 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<UnscheduledAppointment> }>(url, openmrsFetch, {

package/src/index.ts

@@ -1,7 +1,6 @@
 import {
   createDashboard,
   defineConfigSchema,
-  defineExtensionConfigSchema,
   getAsyncLifecycle,
   getSyncLifecycle,
   registerBreadcrumbs,
@@ -9,14 +8,6 @@ import {
 import { configSchema } from './config-schema';
 import { createDashboardLink } from './createDashboardLink';
 import { dashboardMeta, appointmentCalendarDashboardMeta, patientChartDashboardMeta } from './dashboard.meta';
-import {
-  cancelledAppointmentsPanelConfigSchema,
-  checkedInAppointmentsPanelConfigSchema,
-  completedAppointmentsPanelConfigSchema,
-  earlyAppointmentsPanelConfigSchema,
-  expectedAppointmentsPanelConfigSchema,
-  missedAppointmentsPanelConfigSchema,
-} from './scheduled-appointments-config-schema';
 
 const moduleName = '@openmrs/esm-appointments-app';
 
@@ -32,13 +23,6 @@ export function startupApp() {
 
   defineConfigSchema(moduleName, configSchema);
 
-  defineExtensionConfigSchema('expected-appointments-panel', expectedAppointmentsPanelConfigSchema);
-  defineExtensionConfigSchema('checked-in-appointments-panel', checkedInAppointmentsPanelConfigSchema);
-  defineExtensionConfigSchema('completed-appointments-panel', completedAppointmentsPanelConfigSchema);
-  defineExtensionConfigSchema('missed-appointments-panel', missedAppointmentsPanelConfigSchema);
-  defineExtensionConfigSchema('cancelled-appointments-panel', cancelledAppointmentsPanelConfigSchema);
-  defineExtensionConfigSchema('early-appointments-panel', earlyAppointmentsPanelConfigSchema);
-
   registerBreadcrumbs([
     {
       title: 'Appointments',
@@ -68,11 +52,6 @@ export const appointmentsDashboard = getAsyncLifecycle(() => import('./appointme
 
 export const homeAppointments = getAsyncLifecycle(() => import('./home/home-appointments.component'), options);
 
-export const appointmentsList = getAsyncLifecycle(
-  () => import('./appointments/scheduled/appointments-list.component'),
-  options,
-);
-
 export const earlyAppointments = getAsyncLifecycle(
   () => import('./appointments/scheduled/early-appointments.component'),
   options,