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

package/src/appointments/scheduled/early-appointments.component.tsx

@@ -3,19 +3,18 @@ import { useTranslation } from 'react-i18next';
 import { filterByServiceType } from '../utils';
 import { useEarlyAppointmentList } from '../../hooks/useAppointmentList';
 import AppointmentsTable from '../common-components/appointments-table.component';
-
-interface EarlyAppointmentsProps {
-  appointmentServiceTypes?: Array<string>;
-  date: string;
-}
+import { useAppointmentsStore } from '../../store';
+import { useSelectedDate } from '../../hooks/useSelectedDate';
 
 /**
  * Component to display early appointments
  * Note that although we define this extension in routes.jsx, we currently don't wire it into the scheduled-appointments-panels-slot by default because it requests a custom endpoint (see useEarlyAppointments) not provided by the standard Bahmni Appointments module
  */
-const EarlyAppointments: React.FC<EarlyAppointmentsProps> = ({ appointmentServiceTypes, date }) => {
+const EarlyAppointments: React.FC = () => {
   const { t } = useTranslation();
-  const { earlyAppointmentList, isLoading } = useEarlyAppointmentList(date);
+  const { appointmentServiceTypes } = useAppointmentsStore();
+  const selectedDate = useSelectedDate();
+  const { earlyAppointmentList, isLoading } = useEarlyAppointmentList(selectedDate);
 
   const appointments = filterByServiceType(earlyAppointmentList, appointmentServiceTypes).map((appointment, index) => {
     return {

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

@@ -1,225 +1,45 @@
-import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react';
+import React from 'react';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
-import { ContentSwitcher, Switch } from '@carbon/react';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
-import {
-  ExtensionSlot,
-  Extension,
-  useConnectedExtensions,
-  type ConnectedExtension,
-  type ConfigObject,
-  useLayoutType,
-  isDesktop,
-  useAssignedExtensions,
-} from '@openmrs/esm-framework';
+import { formatDate, parseDate, useDefineAppContext } from '@openmrs/esm-framework';
 import { useAppointmentsStore } from '../../store';
+import { type AppointmentsAppContext } from '../../types';
+import { useAppointmentList } from '../../hooks/useAppointmentList';
+import AppointmentsTable from '../common-components/appointments-table.component';
+import { useSelectedDate } from '../../hooks/useSelectedDate';
 import styles from './scheduled-appointments.scss';
-import { type AppointmentPanelConfig } from '../../scheduled-appointments-config-schema';
 
 dayjs.extend(isSameOrBefore);
 
-interface ScheduledAppointmentsProps {
-  appointmentServiceTypes?: Array<string>;
-}
-
-type DateType = 'pastDate' | 'today' | 'futureDate';
-
-const scheduledAppointmentsPanelsSlot = 'scheduled-appointments-panels-slot';
-
-const ScheduledAppointments: React.FC<ScheduledAppointmentsProps> = ({ appointmentServiceTypes }) => {
+const ScheduledAppointments: React.FC<{}> = () => {
   const { t } = useTranslation();
-  const { selectedDate } = useAppointmentsStore();
-  const layout = useLayoutType();
-  const responsiveSize = isDesktop(layout) ? 'sm' : 'md';
+  const { appointmentServiceTypes } = useAppointmentsStore();
+  const selectedDate = useSelectedDate();
 
-  // added to prevent auto-removal of translations for dynamic keys
-  // t('checkedIn', 'Checked in');
-  // t('expected', 'Expected');
+  const { appointmentList: appointmentsForSelectedDate, isLoading, error } = useAppointmentList(selectedDate);
 
-  const [currentTab, setCurrentTab] = useState(null);
-  const [dateType, setDateType] = useState<DateType>('today');
-  const scheduledAppointmentPanels = useAssignedExtensions(scheduledAppointmentsPanelsSlot);
-  const { allowedExtensions, showExtension, hideExtension } = useAllowedExtensions();
-  const shouldShowPanel = useCallback(
-    (panel: Omit<ConnectedExtension, 'config'>) => allowedExtensions[panel.name] ?? false,
-    [allowedExtensions],
-  );
+  const appointmentForSelectedDateFilteredByServiceTypes =
+    appointmentServiceTypes.length > 0
+      ? appointmentsForSelectedDate.filter(({ service }) => appointmentServiceTypes.includes(service.uuid))
+      : appointmentsForSelectedDate;
 
-  useEffect(() => {
-    const dayjsDate = dayjs(selectedDate);
-    const now = dayjs();
-    if (dayjsDate.isBefore(now, 'date')) {
-      setDateType('pastDate');
-    } else if (dayjsDate.isAfter(now, 'date')) {
-      setDateType('futureDate');
-    } else {
-      setDateType('today');
-    }
-  }, [selectedDate]);
-
-  useEffect(() => {
-    // This is intended to cover two things:
-    //  1. If no current tab is set, set it to the first allowed tab
-    //  2. If a current tab is set, but the tab is no longer allowed in this context, set it to the
-    //     first allowed tab
-    if (allowedExtensions && (currentTab === null || !allowedExtensions[currentTab])) {
-      for (const extension of Object.getOwnPropertyNames(allowedExtensions)) {
-        if (allowedExtensions[extension]) {
-          setCurrentTab(extension);
-          break;
-        }
-      }
-    }
-  }, [allowedExtensions, currentTab]);
-
-  const panelsToShow = scheduledAppointmentPanels.filter(shouldShowPanel);
+  useDefineAppContext<AppointmentsAppContext>('appointments', {
+    appointmentForSelectedDateFilteredByServiceTypes,
+    isLoading,
+    error,
+  });
+  const formattedDate = formatDate(parseDate(selectedDate), { mode: 'standard', time: false });
 
   return (
-    <>
-      <ContentSwitcher
-        className={styles.switcher}
-        size={responsiveSize}
-        onChange={({ name }) => setCurrentTab(name as string)}
-        selectedIndex={panelsToShow.findIndex((panel) => panel.name == currentTab) ?? 0}
-        selectionMode="manual">
-        {panelsToShow.map((panel) => (
-          <Switch key={`panel-${panel.name}`} name={panel.name}>
-            {t(panel.config.title)}
-          </Switch>
-        ))}
-      </ContentSwitcher>
-
-      <ExtensionSlot name={scheduledAppointmentsPanelsSlot}>
-        {(extension) => {
-          return (
-            <ExtensionWrapper
-              appointmentServiceTypes={appointmentServiceTypes}
-              currentTab={currentTab}
-              date={selectedDate}
-              dateType={dateType}
-              extension={extension}
-              hideExtensionTab={hideExtension}
-              showExtensionTab={showExtension}
-            />
-          );
-        }}
-      </ExtensionSlot>
-    </>
-  );
-};
-
-function useAllowedExtensions() {
-  const [allowedExtensions, dispatch] = useReducer(
-    (state: Record<string, boolean>, action: { type: 'show_extension' | 'hide_extension'; extension: string }) => {
-      let addedState = {} as Record<string, boolean>;
-      switch (action.type) {
-        case 'show_extension':
-          addedState[action.extension] = true;
-          break;
-        case 'hide_extension':
-          addedState[action.extension] = false;
-          break;
-      }
-
-      return { ...state, ...addedState };
-    },
-    {},
-  );
-
-  return {
-    allowedExtensions: allowedExtensions as Readonly<Record<string, boolean>>,
-    showExtension: (extension: string) => dispatch({ type: 'show_extension', extension }),
-    hideExtension: (extension: string) => dispatch({ type: 'hide_extension', extension }),
-  };
-}
-
-function ExtensionWrapper({
-  extension,
-  currentTab,
-  appointmentServiceTypes,
-  date,
-  dateType,
-  showExtensionTab,
-  hideExtensionTab,
-}: {
-  extension: ConnectedExtension;
-  currentTab: string;
-  appointmentServiceTypes: Array<string>;
-  date: string;
-  dateType: DateType;
-  showExtensionTab: (extension: string) => void;
-  hideExtensionTab: (extension: string) => void;
-}) {
-  const currentConfig = useRef(null);
-  const currentDateType = useRef(dateType);
-
-  // This use effect hook controls whether the tab for this extension should render
-  useEffect(() => {
-    if (
-      currentConfig.current === null ||
-      (currentConfig.current !== null && !shallowEqual(currentConfig.current, extension.config)) ||
-      currentDateType.current !== dateType
-    ) {
-      currentConfig.current = extension.config;
-      currentDateType.current = dateType;
-      if (shouldDisplayExtensionTab(extension?.config as AppointmentPanelConfig, dateType)) {
-        showExtensionTab(extension.name);
-      } else {
-        hideExtensionTab(extension.name);
-      }
-    }
-  }, [extension, dateType, showExtensionTab, hideExtensionTab]);
-
-  if (extension.config == null) {
-    return null;
-  }
-
-  return (
-    <div
-      key={extension.name}
-      className={styles.container}
-      style={{ display: currentTab === extension.name ? 'block' : 'none' }}>
-      <Extension
-        state={{
-          date,
-          appointmentServiceTypes,
-          status: extension.config?.status,
-          title: extension.config?.title,
-        }}
+    <div className={styles.container}>
+      <AppointmentsTable
+        appointments={appointmentForSelectedDateFilteredByServiceTypes}
+        isLoading={isLoading}
+        tableHeading={t('appointmentsForDate', 'Appointments for: {{date}}', { date: formattedDate })}
       />
     </div>
   );
-}
-
-function shouldDisplayExtensionTab(config: AppointmentPanelConfig | undefined, dateType: DateType): boolean {
-  if (!config) {
-    return false;
-  }
-
-  switch (dateType) {
-    case 'futureDate':
-      return config.showForFutureDate ?? false;
-    case 'pastDate':
-      return config.showForPastDate ?? false;
-    case 'today':
-      return config.showForToday ?? false;
-  }
-}
-
-function shallowEqual(objA: object, objB: object) {
-  if (Object.is(objA, objB)) {
-    return true;
-  }
-
-  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-    return false;
-  }
-
-  const objAKeys = Object.getOwnPropertyNames(objA);
-  const objBKeys = Object.getOwnPropertyNames(objB);
-
-  return objAKeys.length === objBKeys.length && objAKeys.every((key) => objA[key] === objB[key]);
-}
+};
 
 export default ScheduledAppointments;

package/src/appointments/utils.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { type Appointment } from '../types';
+import { type AppointmentStatus, type Appointment } from '../types';
 
 /**
  * Returns an array of page sizes for the given data and page size.
@@ -46,31 +46,44 @@ export function useSearchResults<T>(data: T[], searchString: string): T[] {
 }
 
 /**
- * Accepts an array of Appointment and a searchString
- * Returns those Appointments that match the search string based on the following:
+ * Performs client-side filtering of appointments based on the selected
+ * statuses and the search string.
+ * The search string matches on the following:
  * case-insensitive partial match on patient name
  * case-insensitive partial match on the primary patient identifier
  * case-insensitive exact match on any of the patient identifiers
  * @param {Appointment[]} data - The array of data to filter
  * @param {string} searchString - The string to search for in the data
+ * @param {Array<AppointmentStatus>} selectedAppointmentStatuses - The array of selected appointment statuses to filter by
  * @returns {Appointment[]} The filtered array of data
  */
-export function useAppointmentSearchResults(data: Appointment[], searchString: string): Appointment[] {
-  return useMemo(() => {
-    if (searchString && searchString.trim() !== '') {
-      const lowerCaseSearch = searchString.toLowerCase();
-      return data.filter((appointment) => {
-        if (appointment.patient.name?.toLowerCase()?.includes(lowerCaseSearch)) {
-          return true;
+export function useAppointmentSearchResults(
+  data: Appointment[],
+  searchString: string,
+  selectedAppointmentStatuses: Array<AppointmentStatus>,
+): Appointment[] {
+  return useMemo(
+    () =>
+      data.filter((appointment) => {
+        if (selectedAppointmentStatuses.length > 0 && !selectedAppointmentStatuses.includes(appointment.status)) {
+          return false;
         }
-        if (appointment.patient.identifier?.toLowerCase()?.includes(lowerCaseSearch)) {
+
+        if (searchString && searchString.trim() !== '') {
+          const lowerCaseSearch = searchString.toLowerCase();
+          if (appointment.patient.name?.toLowerCase()?.includes(lowerCaseSearch)) {
+            return true;
+          }
+          if (appointment.patient.identifier?.toLowerCase()?.includes(lowerCaseSearch)) {
+            return true;
+          }
+          return false;
+        } else {
           return true;
         }
-        return false;
-      });
-    }
-    return data;
-  }, [searchString, data]);
+      }),
+    [searchString, data, selectedAppointmentStatuses],
+  );
 }
 
 export function filterByServiceType(appointmentList: Array<Appointment>, appointmentServiceTypes: Array<string>) {

package/src/appointments.component.tsx

@@ -1,36 +1,28 @@
 import React, { useEffect } from 'react';
-import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
-import { omrsDateFormat } from './constants';
 import AppointmentTabs from './appointments/appointment-tabs.component';
 import AppointmentsHeader from './header/appointments-header.component';
 import AppointmentMetrics from './metrics/metrics-container.component';
-import { useAppointmentsStore, setAppointmentServiceTypes, setSelectedDate } from './store';
+import { useAppointmentsStore } from './store';
 
 const Appointments: React.FC = () => {
   const { t } = useTranslation();
-  const { appointmentServiceTypes } = useAppointmentsStore();
+  const { setAppointmentServiceTypes } = useAppointmentsStore();
 
   const params = useParams();
 
-  useEffect(() => {
-    if (params.date) {
-      setSelectedDate(dayjs(params.date).startOf('day').format(omrsDateFormat));
-    }
-  }, [params.date]);
-
   useEffect(() => {
     if (params.serviceType) {
       setAppointmentServiceTypes([params.serviceType]);
     }
-  }, [params.serviceType]);
+  }, [params.serviceType, setAppointmentServiceTypes]);
 
   return (
     <>
       <AppointmentsHeader title={t('appointments', 'Appointments')} showServiceTypeFilter />
-      <AppointmentMetrics appointmentServiceTypes={appointmentServiceTypes} />
-      <AppointmentTabs appointmentServiceTypes={appointmentServiceTypes} />
+      <AppointmentMetrics />
+      <AppointmentTabs />
     </>
   );
 };

package/src/appointments.test.tsx

@@ -1,13 +1,25 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import { useConfig, getDefaultsFromConfigSchema } from '@openmrs/esm-framework';
 import Appointments from './appointments.component';
+import { type ConfigObject, configSchema } from './config-schema';
+import { BrowserRouter } from 'react-router-dom';
+
+const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 
-// TODO: Tweak the ExtensionSlot stub in the framework to not return a function. Functions are not valid React children.
 describe('Appointments', () => {
-  it('renders the appointments dashboard', async () => {
-    render(<Appointments />);
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+    });
+  });
 
-    await screen.findByRole('combobox');
+  it('renders the appointments dashboard', async () => {
+    render(
+      <BrowserRouter>
+        <Appointments />
+      </BrowserRouter>,
+    );
 
     expect(screen.getByRole('button', { name: /appointments calendar/i })).toBeInTheDocument();
     expect(screen.getByText(/filter appointments by service type/i)).toBeInTheDocument();

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

@@ -1,27 +1,18 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import dayjs from 'dayjs';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { omrsDateFormat } from '../constants';
 import { useAppointmentsCalendar } from '../hooks/useAppointmentsCalendar';
 import AppointmentsHeader from '../header/appointments-header.component';
 import CalendarHeader from './header/calendar-header.component';
 import MonthlyCalendarView from './monthly/monthly-calendar-view.component';
-import { useAppointmentsStore, setSelectedDate } from '../store';
+import { useSelectedDate } from '../hooks/useSelectedDate';
 
 const AppointmentsCalendarView: React.FC = () => {
   const { t } = useTranslation();
-  const { selectedDate } = useAppointmentsStore();
+  const selectedDate = useSelectedDate();
   const { calendarEvents } = useAppointmentsCalendar(dayjs(selectedDate).toISOString(), 'monthly');
 
-  let params = useParams();
-
-  useEffect(() => {
-    if (params.date) {
-      setSelectedDate(dayjs(params.date).startOf('day').format(omrsDateFormat));
-    }
-  }, [params.date]);
-
   return (
     <div data-testid="appointments-calendar">
       <AppointmentsHeader title={t('calendar', 'Calendar')} />

package/src/calendar/appointments-calendar-view.test.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import AppointmentsCalendarView from './appointments-calendar-view.component';
+import { BrowserRouter } from 'react-router-dom';
 
 describe('Appointment calendar view', () => {
   it('renders appointments in calendar view from appointments list', async () => {
-    render(<AppointmentsCalendarView />);
+    render(
+      <BrowserRouter>
+        <AppointmentsCalendarView />
+      </BrowserRouter>,
+    );
 
     const expectedTableRows = [
       /John Wilson 30-Aug-2021 03:35 03:35 Dr James Cook Outpatient Walk in appointments/,

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

@@ -5,12 +5,12 @@ import { Button } from '@carbon/react';
 import { ArrowLeft } from '@carbon/react/icons';
 import { navigate } from '@openmrs/esm-framework';
 import { spaHomePage } from '../../constants';
-import { useAppointmentsStore } from '../../store';
+import { useSelectedDate } from '../../hooks/useSelectedDate';
 import styles from './calendar-header.scss';
 
 const CalendarHeader: React.FC = () => {
   const { t } = useTranslation();
-  const { selectedDate } = useAppointmentsStore();
+  const selectedDate = useSelectedDate();
 
   const handleClick = () => {
     navigate({ to: `${spaHomePage}/appointments/${dayjs(selectedDate).format('YYYY-MM-DD')}` });

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

@@ -2,10 +2,10 @@ import React from 'react';
 import dayjs from 'dayjs';
 import isBetween from 'dayjs/plugin/isBetween';
 import { type DailyAppointmentsCountByService } from '../../types';
-import { useAppointmentsStore } from '../../store';
 import { monthDays } from '../../helpers';
 import MonthlyViewWorkload from './monthly-workload-view.component';
 import MonthlyHeader from './monthly-header.component';
+import { useSelectedDate } from '../../hooks/useSelectedDate';
 import styles from '../appointments-calendar-view-view.scss';
 
 dayjs.extend(isBetween);
@@ -15,7 +15,7 @@ interface MonthlyCalendarViewProps {
 }
 
 const MonthlyCalendarView: React.FC<MonthlyCalendarViewProps> = ({ events }) => {
-  const { selectedDate } = useAppointmentsStore();
+  const selectedDate = useSelectedDate();
 
   return (
     <div className={styles.calendarViewContainer}>

package/src/calendar/monthly/monthly-header.component.tsx

@@ -1,26 +1,27 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@carbon/react';
 import { formatDate } from '@openmrs/esm-framework';
-import { omrsDateFormat } from '../../constants';
-import { useAppointmentsStore, setSelectedDate } from '../../store';
 import DaysOfWeekCard from './days-of-week.component';
 import styles from './monthly-header.scss';
+import { useSelectedDate } from '../../hooks/useSelectedDate';
 
 const DAYS_IN_WEEK = ['SUN', 'MON', 'TUE', 'WED', 'THUR', 'FRI', 'SAT'];
 
 const MonthlyHeader: React.FC = () => {
   const { t } = useTranslation();
-  const { selectedDate } = useAppointmentsStore();
+  const selectedDate = useSelectedDate();
+
+  const [calendarSelectedDate, setCalendarSelectedDate] = useState(dayjs(selectedDate));
 
   const handleSelectPrevMonth = useCallback(() => {
-    setSelectedDate(dayjs(selectedDate).subtract(1, 'month').format(omrsDateFormat));
-  }, [selectedDate]);
+    setCalendarSelectedDate(calendarSelectedDate.subtract(1, 'month'));
+  }, [calendarSelectedDate, setCalendarSelectedDate]);
 
   const handleSelectNextMonth = useCallback(() => {
-    setSelectedDate(dayjs(selectedDate).add(1, 'month').format(omrsDateFormat));
-  }, [selectedDate]);
+    setCalendarSelectedDate(calendarSelectedDate.add(1, 'month'));
+  }, [calendarSelectedDate, setCalendarSelectedDate]);
 
   return (
     <>

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

@@ -6,8 +6,8 @@ import { navigate, useLayoutType } from '@openmrs/esm-framework';
 import { spaHomePage } from '../../constants';
 import { isSameMonth } from '../../helpers';
 import { type DailyAppointmentsCountByService } from '../../types';
-import { useAppointmentsStore } from '../../store';
 import MonthlyWorkloadViewExpanded from './monthly-workload-view-expanded.component';
+import { useSelectedDate } from '../../hooks/useSelectedDate';
 import styles from './monthly-view-workload.scss';
 
 export interface MonthlyWorkloadViewProps {
@@ -18,7 +18,7 @@ export interface MonthlyWorkloadViewProps {
 
 const MonthlyWorkloadView: React.FC<MonthlyWorkloadViewProps> = ({ dateTime, events, showAllServices = false }) => {
   const layout = useLayoutType();
-  const { selectedDate } = useAppointmentsStore();
+  const selectedDate = useSelectedDate();
 
   const currentData = useMemo(
     () =>

package/src/config-schema.ts

@@ -1,8 +1,6 @@
 import { Type, validators } from '@openmrs/esm-framework';
 import { appointmentColumnTypes } from './constants';
 
-type AppointmentColumnType = (typeof appointmentColumnTypes)[number];
-
 export const configSchema = {
   allowAllDayAppointments: {
     _type: Type.Boolean,
@@ -33,11 +31,6 @@ export const configSchema = {
       _default: true,
       _description: 'Whether the check-in button on the "Appointments" list should be enabled',
     },
-    showIfActiveVisit: {
-      _type: Type.Boolean,
-      _default: false,
-      _description: 'Whether to show the check-in button if the patient currently has an active visit',
-    },
     customUrl: {
       _type: Type.String,
       _default: '',
@@ -80,11 +73,26 @@ export const configSchema = {
     _description:
       'Whether to show the Unscheduled Appointments tab. Note that configuring this to true requires a custom unscheduledAppointment endpoint not currently available',
   },
+  showEarlyAppointmentsTab: {
+    _type: Type.Boolean,
+    _default: false,
+    _description:
+      'Whether to show the Early Appointments tab. Note that configuring this to true requires a custom earlyAppointment endpoint not currently available',
+  },
   appointmentsTableColumns: {
     _type: Type.Array,
     _description:
       'Columns to display in the appointment table. Available options: ' + appointmentColumnTypes.join(', '),
-    _default: ['patientName', 'identifier', 'location', 'serviceType', 'status'],
+    _default: [
+      'patientName',
+      'identifier',
+      'location',
+      'serviceType',
+      'dateTime',
+      'visitStartTime',
+      'status',
+      'actions',
+    ],
     _elements: {
       _type: Type.String,
       _validators: [validators.oneOf(appointmentColumnTypes)],
@@ -99,7 +107,6 @@ export interface ConfigObject {
   appointmentsTableColumns: Array<string>;
   checkInButton: {
     enabled: boolean;
-    showIfActiveVisit: boolean;
     customUrl: string;
   };
   checkOutButton: {
@@ -110,4 +117,5 @@ export interface ConfigObject {
   includePhoneNumberInExcelSpreadsheet: boolean;
   patientIdentifierType: string;
   showUnscheduledAppointmentsTab: boolean;
+  showEarlyAppointmentsTab: boolean;
 }

package/src/constants.ts

@@ -65,8 +65,19 @@ export const appointmentColumnTypes = [
   'serviceType',
   // t('status', 'Status')
   'status',
-  // t('dateTime', 'Date & time')
+  // t('dateTime', 'Appointment time')
   'dateTime',
   // t('provider', 'Provider')
   'provider',
+  // t('actions', 'Actions')
+  'actions',
+  // t('visitStartTime', 'Visit start time')
+  'visitStartTime',
 ] as const;
+
+// added to prevent auto-removal of translations for dynamic keys
+// t('Scheduled', 'Scheduled')
+// t('CheckedIn', 'Checked in')
+// t('Cancelled', 'Cancelled')
+// t('Missed', 'Missed')
+// t('Completed', 'Completed')