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

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { filterByServiceType } from '../utils';
+import { useAppointmentList } from '../../hooks/useAppointmentList';
+import AppointmentsTable from '../common-components/appointments-table.component';
+
+interface AppointmentsListProps {
+  appointmentServiceType?: string;
+  status?: string;
+  title: string;
+  date: string;
+  filterCancelled?: boolean;
+}
+const AppointmentsList: React.FC<AppointmentsListProps> = ({
+  appointmentServiceType,
+  status,
+  title,
+  date,
+  filterCancelled = false,
+}) => {
+  const { appointmentList, isLoading } = useAppointmentList(status, date);
+
+  const appointments = filterByServiceType(appointmentList, appointmentServiceType).map((appointment) => ({
+    id: appointment.uuid,
+    ...appointment,
+  }));
+
+  const activeAppointments = filterCancelled
+    ? appointments.filter((appointment) => appointment.status !== 'Cancelled')
+    : appointments;
+  return <AppointmentsTable appointments={activeAppointments} isLoading={isLoading} tableHeading={title} />;
+};
+
+export default AppointmentsList;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useEarlyAppointmentList } from '../../hooks/useAppointmentList';
+import { filterByServiceType } from '../utils';
+import AppointmentsTable from '../common-components/appointments-table.component';
+import { useTranslation } from 'react-i18next';
+
+interface EarlyAppointmentsProps {
+  appointmentServiceType?: string;
+  date: string;
+}
+
+/**
+ * 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> = ({ appointmentServiceType, date }) => {
+  const { t } = useTranslation();
+  const { earlyAppointmentList, isLoading } = useEarlyAppointmentList(date);
+
+  const appointments = filterByServiceType(earlyAppointmentList, appointmentServiceType).map((appointment, index) => {
+    return {
+      id: `${index}`,
+      ...appointment,
+    };
+  });
+
+  return (
+    <AppointmentsTable appointments={appointments} isLoading={isLoading} tableHeading={t('cameEarly', 'Came Early')} />
+  );
+};
+
+export default EarlyAppointments;

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

@@ -0,0 +1,215 @@
+import React, { useCallback, useContext, useEffect, useReducer, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ContentSwitcher, Switch } from '@carbon/react';
+import dayjs from 'dayjs';
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
+import {
+  ExtensionSlot,
+  Extension,
+  useConnectedExtensions,
+  type ConnectedExtension,
+  type ConfigObject,
+  useLayoutType,
+  isDesktop,
+} from '@openmrs/esm-framework';
+import styles from './scheduled-appointments.scss';
+import SelectedDateContext from '../../hooks/selectedDateContext';
+
+dayjs.extend(isSameOrBefore);
+
+interface ScheduledAppointmentsProps {
+  appointmentServiceType?: string;
+}
+
+type DateType = 'pastDate' | 'today' | 'futureDate';
+
+const scheduledAppointmentsPanelsSlot = 'scheduled-appointments-panels-slot';
+
+const ScheduledAppointments: React.FC<ScheduledAppointmentsProps> = ({ appointmentServiceType }) => {
+  const { t } = useTranslation();
+  const { selectedDate } = useContext(SelectedDateContext);
+  const layout = useLayoutType();
+  const responsiveSize = isDesktop(layout) ? 'sm' : 'md';
+
+  // added to prevent auto-removal of translations for dynamic keys
+  // t('checkedIn', 'Checked in');
+  // t('expected', 'Expected');
+
+  const [currentTab, setCurrentTab] = useState<string>(null);
+  const [dateType, setDateType] = useState<DateType>('today');
+  const scheduledAppointmentPanels = useConnectedExtensions(scheduledAppointmentsPanelsSlot);
+  const { allowedExtensions, showExtension, hideExtension } = useAllowedExtensions();
+  const shouldShowPanel = useCallback(
+    (panel: Omit<ConnectedExtension, 'config'>) => allowedExtensions[panel.name] ?? false,
+    [allowedExtensions],
+  );
+
+  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);
+
+  return (
+    <>
+      <ContentSwitcher
+        className={styles.switcher}
+        size={responsiveSize}
+        onChange={({ name }) => setCurrentTab(name)}
+        selectedIndex={panelsToShow.findIndex((panel) => panel.name == currentTab) ?? 0}
+        selectionMode="manual">
+        {panelsToShow.map((panel) => {
+          return <Switch key={`panel-${panel.name}`} name={panel.name} text={t(panel.config.title)} />;
+        })}
+      </ContentSwitcher>
+
+      <ExtensionSlot name={scheduledAppointmentsPanelsSlot}>
+        {(extension) => {
+          return (
+            <ExtensionWrapper
+              extension={extension}
+              currentTab={currentTab}
+              appointmentServiceType={appointmentServiceType}
+              date={selectedDate}
+              dateType={dateType}
+              showExtensionTab={showExtension}
+              hideExtensionTab={hideExtension}
+            />
+          );
+        }}
+      </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,
+  appointmentServiceType,
+  date,
+  dateType,
+  showExtensionTab,
+  hideExtensionTab,
+}: {
+  extension: ConnectedExtension;
+  currentTab: string;
+  appointmentServiceType: 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;
+      shouldDisplayExtensionTab(extension?.config, dateType)
+        ? showExtensionTab(extension.name)
+        : hideExtensionTab(extension.name);
+    }
+  }, [extension, dateType, showExtensionTab, hideExtensionTab]);
+
+  return (
+    <div
+      key={extension.name}
+      className={styles.container}
+      style={{ display: currentTab === extension.name ? 'block' : 'none' }}>
+      <Extension
+        state={{
+          date,
+          appointmentServiceType,
+          status: extension.config?.status,
+          title: extension.config?.title,
+        }}
+      />
+    </div>
+  );
+}
+
+function shouldDisplayExtensionTab(config: ConfigObject | 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/scheduled/scheduled-appointments.scss

@@ -0,0 +1,4 @@
+.switcher {
+  margin: 1rem 0;
+  max-width: 70%;
+}

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

@@ -0,0 +1,146 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  TableContainer,
+  Table,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableBody,
+  TableCell,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Pagination,
+  DataTableSkeleton,
+  Button,
+} from '@carbon/react';
+import { Download } from '@carbon/react/icons';
+import { ConfigurableLink, useConfig, usePagination } from '@openmrs/esm-framework';
+import { useUnscheduledAppointments } from '../../hooks/useUnscheduledAppointments';
+import { downloadUnscheduledAppointments } from '../../helpers/excel';
+import { EmptyState } from '../../empty-state/empty-state.component';
+import { getPageSizes, useSearchResults } from '../utils';
+import { type ConfigObject } from '../../config-schema';
+
+const UnscheduledAppointments: React.FC = () => {
+  const { t } = useTranslation();
+  const [pageSize, setPageSize] = useState(25);
+
+  const [searchString, setSearchString] = useState('');
+  const { data: unscheduledAppointments, isLoading, error } = useUnscheduledAppointments();
+  const searchResults = useSearchResults(unscheduledAppointments, searchString);
+  const { customPatientChartUrl } = useConfig<ConfigObject>();
+
+  const headerData = [
+    {
+      header: 'Patient Name',
+      key: 'name',
+    },
+    {
+      header: 'Identifier',
+      key: 'identifier',
+    },
+    {
+      header: 'Gender',
+      key: 'gender',
+    },
+    {
+      header: 'Phone Number',
+      key: 'phoneNumber',
+    },
+  ];
+
+  const { results, currentPage, goTo } = usePagination(searchResults, pageSize);
+  const rowData = results?.map((visit) => ({
+    id: `${visit.uuid}`,
+    name: (
+      <ConfigurableLink
+        style={{ textDecoration: 'none' }}
+        to={customPatientChartUrl}
+        templateParams={{ patientUuid: visit.uuid }}>
+        {visit.name}
+      </ConfigurableLink>
+    ),
+    gender: visit.gender === 'F' ? 'Female' : 'Male',
+    phoneNumber: visit.phoneNumber === '' ? '--' : visit.phoneNumber,
+    identifier: visit?.identifier,
+  }));
+
+  if (isLoading) {
+    return <DataTableSkeleton />;
+  }
+
+  if (!unscheduledAppointments?.length) {
+    return (
+      <EmptyState
+        displayText={t('unscheduledAppointments_lower', 'unscheduled appointments')}
+        headerTitle={t('unscheduledAppointments', 'Unscheduled appointments')}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <DataTable rows={rowData} headers={headerData} isSortable>
+        {({ rows, headers, getHeaderProps, getTableProps }) => (
+          <TableContainer
+            title={`${t('unscheduledAppointments', 'Unscheduled appointments')} ${unscheduledAppointments.length}`}
+            description={`${t(`Total ${unscheduledAppointments.length ?? 0}`)}`}>
+            <TableToolbar>
+              <TableToolbarContent>
+                <TableToolbarSearch
+                  style={{ backgroundColor: '#f4f4f4' }}
+                  tabIndex={0}
+                  onChange={(event) => setSearchString(event.target.value)}
+                />
+                <Button
+                  size="lg"
+                  kind="tertiary"
+                  renderIcon={Download}
+                  onClick={() => downloadUnscheduledAppointments(unscheduledAppointments)}>
+                  {t('download', 'Download')}
+                </Button>
+              </TableToolbarContent>
+            </TableToolbar>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow key={row.id}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+
+      <Pagination
+        backwardText="Previous page"
+        forwardText="Next page"
+        page={currentPage}
+        pageNumberText="Page Number"
+        pageSize={pageSize}
+        onChange={({ page, pageSize }) => {
+          goTo(page);
+          setPageSize(pageSize);
+        }}
+        pageSizes={getPageSizes(unscheduledAppointments, pageSize) ?? []}
+        totalItems={unscheduledAppointments.length ?? 0}
+      />
+    </div>
+  );
+};
+
+export default UnscheduledAppointments;

package/src/appointments/unscheduled/unscheduled-appointments.test.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { getByTextWithMarkup } from '../../../../../tools/test-utils';
+import { useUnscheduledAppointments } from '../../hooks/useUnscheduledAppointments';
+import { downloadUnscheduledAppointments } from '../../helpers/excel';
+import UnscheduledAppointments from './unscheduled-appointments.component';
+
+const mockDownloadAppointmentsAsExcel = downloadUnscheduledAppointments as jest.Mock;
+const mockUseUnscheduledAppointments = useUnscheduledAppointments as jest.Mock;
+
+jest.mock('../../helpers/excel');
+jest.mock('../../hooks/useOverlay');
+jest.mock('../../hooks/useUnscheduledAppointments');
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+  return {
+    ...originalModule,
+    useConfig: jest.fn(() => ({
+      customPatientChartUrl: 'someUrl',
+    })),
+  };
+});
+
+describe('UnscheduledAppointments component', () => {
+  const mockUnscheduledAppointments = [
+    {
+      uuid: '1234',
+      name: 'Test Patient',
+      identifier: '1234-56-78',
+      gender: 'M',
+      phoneNumber: '123-456-7890',
+      age: 20,
+      dob: 1262304000,
+    },
+    {
+      uuid: '5678',
+      name: 'Another Patient',
+      identifier: '2345-67-89',
+      gender: 'F',
+      phoneNumber: '',
+      age: 30,
+      dob: 1262304000,
+    },
+  ];
+
+  it('renders the component correctly', async () => {
+    mockUseUnscheduledAppointments.mockReturnValue({
+      isLoading: false,
+      data: mockUnscheduledAppointments,
+      error: null,
+    });
+
+    render(<UnscheduledAppointments />);
+
+    const header = screen.getByText('Unscheduled appointments 2');
+    expect(header).toBeInTheDocument();
+
+    const patientName = await screen.findByText('Test Patient');
+    expect(patientName).toBeInTheDocument();
+    expect(patientName).toHaveAttribute('href', 'someUrl');
+
+    const identifier = screen.getByText('1234-56-78');
+    expect(identifier).toBeInTheDocument();
+
+    const gender = screen.getByText('Male');
+    expect(gender).toBeInTheDocument();
+
+    const phoneNumber = screen.getByText('123-456-7890');
+    expect(phoneNumber).toBeInTheDocument();
+  });
+
+  it('allows the user to search for appointments', async () => {
+    const user = userEvent.setup();
+
+    mockUseUnscheduledAppointments.mockReturnValue({
+      isLoading: false,
+      data: mockUnscheduledAppointments,
+      error: null,
+    });
+
+    render(<UnscheduledAppointments />);
+
+    const searchInput = await screen.findByRole('searchbox');
+    await user.type(searchInput, 'Another');
+
+    const patientName = screen.getByText('Another Patient');
+    expect(patientName).toBeInTheDocument();
+
+    const identifier = screen.getByText('2345-67-89');
+    expect(identifier).toBeInTheDocument();
+
+    const gender = screen.getByText('Female');
+    expect(gender).toBeInTheDocument();
+
+    const phoneNumber = screen.getByText('--');
+    expect(phoneNumber).toBeInTheDocument();
+  });
+
+  it('allows the user to download a list of unscheduled appointments', async () => {
+    const user = userEvent.setup();
+
+    mockUseUnscheduledAppointments.mockReturnValue({
+      isLoading: false,
+      data: mockUnscheduledAppointments,
+      error: null,
+    });
+
+    render(<UnscheduledAppointments />);
+
+    const downloadButton = await screen.findByText('Download');
+    expect(downloadButton).toBeInTheDocument();
+
+    await user.click(downloadButton);
+
+    expect(mockDownloadAppointmentsAsExcel).toHaveBeenCalledWith(mockUnscheduledAppointments);
+  });
+
+  it('renders a message if there are no unscheduled appointments', async () => {
+    mockUseUnscheduledAppointments.mockReturnValue({
+      isLoading: false,
+      data: [],
+      error: null,
+    });
+
+    render(<UnscheduledAppointments />);
+
+    expect(getByTextWithMarkup('There are no unscheduled appointments to display')).toBeInTheDocument();
+  });
+});

package/src/appointments/utils.tsx

@@ -0,0 +1,80 @@
+import { useMemo } from 'react';
+import { type Appointment } from '../types';
+
+/**
+ * Returns an array of page sizes for the given data and page size.
+ * If the page size is not specified, the default value is 10.
+ *
+ * @template T The type of the data array.
+ * @param {Array<T>} data The data array.
+ * @param {number} [pageSize=10] The page size.
+ * @returns {Array<number>} An array of page sizes.
+ */
+export function getPageSizes<T>(data: Array<T>, pageSize: number = 10): Array<number> {
+  if (!data) {
+    return [];
+  }
+  const numberOfPages = Math.ceil(data.length / pageSize);
+  return Array.from({ length: numberOfPages }, (_, i) => (i + 1) * pageSize);
+}
+
+/**
+ Returns an array of filtered data that contains search string
+ @template T
+ @param {T[]} data - The array of data to filter
+ @param {string} searchString - The string to search for in the data
+ @returns {T[]} The filtered array of data
+ */
+export function useSearchResults<T>(data: T[], searchString: string): T[] {
+  const searchResults = useMemo(() => {
+    if (searchString && searchString.trim() !== '') {
+      const search = searchString.toLowerCase();
+      return data.filter((appointment) =>
+        Object.entries(appointment).some(([header, value]) => {
+          if (header === 'patientUuid') {
+            return false;
+          }
+          return `${value}`.toLowerCase().includes(search);
+        }),
+      );
+    }
+
+    return data;
+  }, [searchString, data]);
+
+  return searchResults;
+}
+
+/**
+ * Accepts an array of Appointment and a searchString
+ * Returns those Appointments that match the search string based 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
+ * @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;
+        }
+        if (appointment.patient.identifier?.toLowerCase()?.includes(lowerCaseSearch)) {
+          return true;
+        }
+        return false;
+      });
+    }
+    return data;
+  }, [searchString, data]);
+}
+
+export function filterByServiceType(appointmentList: any[], appointmentServiceType: string) {
+  return appointmentServiceType
+    ? appointmentList.filter(({ service }) => service?.uuid === appointmentServiceType)
+    : appointmentList;
+}

package/src/appointments.component.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
+import AppointmentTabs from './appointments/appointment-tabs.component';
+import AppointmentsHeader from './header/appointments-header.component';
+import AppointmentMetrics from './metrics/appointments-metrics.component';
+import { WorkspaceOverlay } from '@openmrs/esm-framework';
+import { useParams } from 'react-router-dom';
+import SelectedDateContext from './hooks/selectedDateContext';
+import { omrsDateFormat } from './constants';
+
+const Appointments: React.FC = () => {
+  const { t } = useTranslation();
+  const [appointmentServiceType, setAppointmentServiceType] = useState<string>('');
+  const [selectedDate, setSelectedDate] = useState<string>(dayjs().startOf('day').format(omrsDateFormat));
+
+  let params = useParams();
+
+  useEffect(() => {
+    if (params.date) {
+      setSelectedDate(dayjs(params.date).startOf('day').format(omrsDateFormat));
+    }
+  }, [params.date]);
+
+  useEffect(() => {
+    if (params.serviceType) {
+      setAppointmentServiceType(params.serviceType);
+    }
+  }, [params.serviceType]);
+
+  return (
+    <SelectedDateContext.Provider value={{ selectedDate, setSelectedDate }}>
+      <AppointmentsHeader
+        title={t('home', 'Home')}
+        appointmentServiceType={appointmentServiceType}
+        onChange={setAppointmentServiceType}
+      />
+      <AppointmentMetrics appointmentServiceType={appointmentServiceType} />
+      <AppointmentTabs appointmentServiceType={appointmentServiceType} />
+    </SelectedDateContext.Provider>
+  );
+};
+
+export default Appointments;