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

package/src/index.ts

@@ -0,0 +1,111 @@
+import {
+  defineConfigSchema,
+  defineExtensionConfigSchema,
+  getAsyncLifecycle,
+  getSyncLifecycle,
+  registerBreadcrumbs,
+} from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import { createDashboardLink } from './createDashboardLink.component';
+import { createDashboardLink as createPatientChartDashboardLink } from '@openmrs/esm-patient-common-lib';
+import { dashboardMeta, appointmentCalendarDashboardMeta, patientChartDashboardMeta } from './dashboard.meta';
+import {
+  cancelledAppointmentsPanelConfigSchema,
+  checkedInAppointmentsPanelConfigSchema,
+  completedAppointmentsPanelConfigSchema,
+  earlyAppointmentsPanelConfigSchema,
+  expectedAppointmentsPanelConfigSchema,
+  missedAppointmentsPanelConfigSchema,
+} from './scheduled-appointments-config-schema';
+import rootComponent from './root.component';
+import appointmentsDashboardComponent from './appointments.component';
+import homeAppointmentsComponent from './home/home-appointments.component';
+import appointmentsListComponent from './appointments/scheduled/appointments-list.component';
+import earlyAppointmentsComponent from './appointments/scheduled/early-appointments.component';
+import patientAppointmentsDetailedSummaryComponent from './patient-appointments/patient-appointments-detailed-summary.component';
+import patientAppointmentsOverviewComponent from './patient-appointments/patient-appointments-overview.component';
+import patientUpcomingAppointmentsComponent from './patient-appointments/patient-upcoming-appointments-card.component';
+import appointementsForm from './form/appointments-form.component';
+import patientSearch from './patient-search/patient-search.component';
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+const moduleName = '@openmrs/esm-appointments-app';
+
+const options = {
+  featureName: 'appointments',
+  moduleName,
+};
+
+export function startupApp() {
+  const appointmentsBasePath = `${window.spaBase}/home/appointments`;
+
+  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',
+      path: appointmentsBasePath,
+      parent: `${window.spaBase}/home`,
+    },
+    {
+      path: `${window.spaBase}/patient-list/:forDate/:serviceName`,
+      title: ([_, serviceName]) => `Patient Lists / ${decodeURI(serviceName)}`,
+      parent: `${window.spaBase}`,
+    },
+  ]);
+}
+
+export const root = getSyncLifecycle(rootComponent, options);
+
+export const appointmentsDashboardLink = getSyncLifecycle(createDashboardLink(dashboardMeta), options);
+
+export const appointmentsCalendarDashboardLink = getSyncLifecycle(
+  createDashboardLink(appointmentCalendarDashboardMeta),
+  options,
+);
+
+export const appointmentsDashboard = getSyncLifecycle(appointmentsDashboardComponent, options);
+
+export const homeAppointments = getSyncLifecycle(homeAppointmentsComponent, options);
+
+export const appointmentsList = getSyncLifecycle(appointmentsListComponent, options);
+
+export const earlyAppointments = getSyncLifecycle(earlyAppointmentsComponent, options);
+
+export const appointementForm = getSyncLifecycle(appointementsForm, options);
+
+export const searchPatient = getSyncLifecycle(patientSearch, options);
+
+// t('Appointments', 'Appointments')
+export const patientAppointmentsSummaryDashboardLink = getSyncLifecycle(
+  createPatientChartDashboardLink({ ...patientChartDashboardMeta, moduleName }),
+  options,
+);
+
+export const patientAppointmentsDetailedSummary = getSyncLifecycle(
+  patientAppointmentsDetailedSummaryComponent,
+  options,
+);
+
+export const patientAppointmentsOverview = getSyncLifecycle(patientAppointmentsOverviewComponent, options);
+
+export const patientUpcomingAppointmentsWidget = getSyncLifecycle(patientUpcomingAppointmentsComponent, options);
+
+export const patientAppointmentsCancelConfirmationDialog = getAsyncLifecycle(
+  () => import('./patient-appointments/patient-appointments-cancel-modal.component'),
+  options,
+);
+
+export const appointmentsFormWorkspace = getAsyncLifecycle(() => import('./form/appointments-form.component'), options);
+
+export const endAppointmentModal = getAsyncLifecycle(
+  () => import('./appointments/common-components/end-appointment-modal.component'),
+  options,
+);

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

@@ -0,0 +1,71 @@
+import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ErrorState, formatDate, parseDate } from '@openmrs/esm-framework';
+import { useClinicalMetrics, useAllAppointmentsByDate, useScheduledAppointment } from '../hooks/useClinicalMetrics';
+import { useAppointmentList } from '../hooks/useAppointmentList';
+import MetricsCard from './metrics-card.component';
+import MetricsHeader from './metrics-header.component';
+import styles from './appointments-metrics.scss';
+import SelectedDateContext from '../hooks/selectedDateContext';
+
+interface AppointmentMetricsProps {
+  appointmentServiceType: string;
+}
+
+const AppointmentsMetrics: React.FC<AppointmentMetricsProps> = ({ appointmentServiceType }) => {
+  const { t } = useTranslation();
+
+  const { highestServiceLoad, error } = useClinicalMetrics();
+  const { totalProviders } = useAllAppointmentsByDate();
+  const { totalScheduledAppointments } = useScheduledAppointment(appointmentServiceType);
+
+  const { selectedDate } = useContext(SelectedDateContext);
+  const formattedStartDate = formatDate(parseDate(selectedDate), { mode: 'standard', time: false });
+
+  // TODO we will need rework these after we discuss the logic we want to use
+  const { appointmentList: arrivedAppointments } = useAppointmentList('CheckedIn');
+  const { appointmentList: pendingAppointments } = useAppointmentList('Scheduled');
+
+  const filteredArrivedAppointments = appointmentServiceType
+    ? arrivedAppointments.filter(({ service }) => service.uuid === appointmentServiceType)
+    : arrivedAppointments;
+  const filteredPendingAppointments = appointmentServiceType
+    ? pendingAppointments.filter(({ service }) => service.uuid === appointmentServiceType)
+    : pendingAppointments;
+
+  if (error) {
+    return (
+      <div className={styles.errorContainer}>
+        <ErrorState headerTitle={t('appointmentMetricsLoadError', 'Metrics load error')} error={error} />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <MetricsHeader />
+      <section className={styles.cardContainer}>
+        <MetricsCard
+          label={t('patients', 'Patients')}
+          value={totalScheduledAppointments}
+          headerLabel={t('scheduledAppointments', 'Scheduled appointments')}
+          count={{ pendingAppointments: filteredPendingAppointments, arrivedAppointments: filteredArrivedAppointments }}
+        />
+        <MetricsCard
+          label={
+            highestServiceLoad?.count !== 0 ? t(highestServiceLoad?.serviceName) : t('serviceName', 'Service name')
+          }
+          value={highestServiceLoad?.count ?? '--'}
+          headerLabel={t('highestServiceVolume', 'Highest volume service: {{time}}', { time: formattedStartDate })}
+        />
+        <MetricsCard
+          label={t('providers', 'Providers')}
+          value={totalProviders}
+          headerLabel={t('providersBooked', 'Providers booked: {{time}}', { time: formattedStartDate })}
+        />
+      </section>
+    </>
+  );
+};
+
+export default AppointmentsMetrics;

package/src/metrics/appointments-metrics.scss

@@ -0,0 +1,15 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.cardContainer {
+  background-color: colors.$white;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
+  gap: layout.$spacing-05;
+  margin: layout.$spacing-05;
+}
+
+.errorContainer {
+  margin: layout.$spacing-05;
+}

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { mockAppointmentMetrics, mockProvidersCount, mockStartTime } from '__mocks__';
+import AppointmentsMetrics from './appointments-metrics.component';
+
+const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
+
+jest.mock('../hooks/useClinicalMetrics', () => {
+  const originalModule = jest.requireActual('../hooks/useClinicalMetrics');
+
+  return {
+    ...originalModule,
+    useClinicalMetrics: jest.fn().mockImplementation(() => ({
+      highestServiceLoad: mockAppointmentMetrics.highestServiceLoad,
+      isLoading: mockAppointmentMetrics.isLoading,
+      error: mockAppointmentMetrics.error,
+    })),
+    useAllAppointmentsByDate: jest.fn().mockImplementation(() => ({
+      totalProviders: mockProvidersCount.totalProviders,
+      isLoading: mockProvidersCount.isLoading,
+      error: mockProvidersCount.error,
+    })),
+    useScheduledAppointment: jest.fn().mockImplementation(() => ({
+      totalScheduledAppointments: mockAppointmentMetrics.totalAppointments,
+    })),
+    useAppointmentDate: jest.fn().mockImplementation(() => ({
+      startDate: mockStartTime.startTime,
+    })),
+  };
+});
+
+describe('Appointment metrics', () => {
+  it('renders metrics from the appointments list', async () => {
+    mockedOpenmrsFetch.mockResolvedValue({ data: [] });
+
+    renderAppointmentMetrics();
+
+    await screen.findByText(/appointment metrics/i);
+    expect(screen.getByText(/scheduled appointments/i)).toBeInTheDocument();
+    expect(screen.getByText(/patients/i)).toBeInTheDocument();
+    expect(screen.getByText(/16/i)).toBeInTheDocument();
+    expect(screen.getByText(/4/i)).toBeInTheDocument();
+  });
+});
+
+function renderAppointmentMetrics() {
+  render(<AppointmentsMetrics appointmentServiceType="consultation-service-uuid" />);
+}

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

@@ -0,0 +1,76 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
+dayjs.extend(isSameOrBefore);
+import isEmpty from 'lodash-es/isEmpty';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+import { ArrowRight } from '@carbon/react/icons';
+import { basePath, spaHomePage } from '../constants';
+import styles from './metrics-card.scss';
+
+interface MetricsCardProps {
+  label: string;
+  value: number;
+  headerLabel: string;
+  children?: React.ReactNode;
+  view?: string;
+  count?: { pendingAppointments: Array<any>; arrivedAppointments: Array<any> };
+  appointmentDate?: string;
+}
+
+const MetricsCard: React.FC<MetricsCardProps> = ({
+  label,
+  value,
+  headerLabel,
+  children,
+  view,
+  count,
+  appointmentDate,
+}) => {
+  const { t } = useTranslation();
+  const isDateInPast = useMemo(() => !dayjs(appointmentDate).isBefore(dayjs(), 'date'), [appointmentDate]);
+
+  const metricsLink = {
+    patients: 'appointments-list/scheduled',
+    highVolume: 'appointments-list/high-volume-service',
+    providers: 'appointments-list/providers-link',
+  };
+
+  return (
+    <article className={styles.container}>
+      <div className={styles.tileContainer}>
+        <div className={styles.tileHeader}>
+          <div className={styles.headerLabelContainer}>
+            <label className={styles.headerLabel}>{headerLabel}</label>
+            {children}
+          </div>
+          {view && (
+            <div className={styles.link}>
+              <ConfigurableLink className={styles.link} to={`${spaHomePage}${basePath}/${metricsLink[view]}`}>
+                <span style={{ fontSize: '0.825rem', marginRight: '0.325rem' }}>{t('view', 'View')}</span>{' '}
+                <ArrowRight size={16} className={styles.viewListBtn} />
+              </ConfigurableLink>
+            </div>
+          )}
+        </div>
+        <div className={styles.metricsGrid}>
+          <div>
+            <label className={styles.totalsLabel}>{label}</label>
+            <p className={styles.totalsValue}>{value}</p>
+          </div>
+          {!isEmpty(count) && (
+            <div className={styles.countGrid}>
+              <span>{t('checkedIn', 'Checked in')}</span>
+              <span>{isDateInPast ? t('notArrived', 'Not arrived') : t('missed', 'Missed')}</span>
+              <p style={{ color: '#319227' }}>{count.arrivedAppointments?.length}</p>
+              <p style={{ color: '#da1e28' }}>{count.pendingAppointments?.length}</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </article>
+  );
+};
+
+export default MetricsCard;

package/src/metrics/metrics-card.scss

@@ -0,0 +1,77 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  flex-grow: 1;
+}
+
+.tileContainer {
+  border: 1px solid $ui-03;
+  height: 7.875rem;
+  padding: spacing.$spacing-05;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+}
+
+.tileHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.headerLabel {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+}
+
+.totalsLabel {
+  @include type.type-style('label-01');
+  color: $text-02;
+}
+
+.totalsValue {
+  @include type.type-style('heading-04');
+  color: $ui-05;
+}
+
+.headerLabelContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.link {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  color: $interactive-01;
+}
+
+.metricsGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.countGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  justify-self: flex-end;
+  column-gap: spacing.$spacing-03;
+  row-gap: spacing.$spacing-03;
+  margin: spacing.$spacing-03;
+
+  & > span {
+    font-size: 0.625rem !important;
+    margin: 0;
+    color: colors.$gray-70;
+  }
+
+  & > p {
+    margin: 0;
+  }
+}

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

@@ -0,0 +1,62 @@
+import React, { useContext } from 'react';
+import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
+import { launchWorkspace } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { Calendar, Hospital } from '@carbon/react/icons';
+import { Button } from '@carbon/react';
+import { ExtensionSlot, isDesktop, navigate, useLayoutType } from '@openmrs/esm-framework';
+import { spaHomePage } from '../constants';
+import styles from './metrics-header.scss';
+import SelectedDateContext from '../hooks/selectedDateContext';
+
+dayjs.extend(isToday);
+
+const MetricsHeader: React.FC = () => {
+  const { t } = useTranslation();
+  const { selectedDate } = useContext(SelectedDateContext);
+  const layout = useLayoutType();
+  const responsiveSize = isDesktop(layout) ? 'sm' : 'md';
+
+  const launchCreateAppointmentForm = (patientUuid) => {
+    const props = {
+      patientUuid: patientUuid,
+      context: 'creating',
+      mutate: () => {}, // TODO get this to mutate properly
+    };
+
+    launchWorkspace('create-appointment', { ...props });
+  };
+
+  return (
+    <div className={styles.metricsContainer}>
+      <span className={styles.metricsTitle}>{t('appointmentMetrics', 'Appointment metrics')}</span>
+      <div className={styles.metricsContent}>
+        <Button
+          kind="tertiary"
+          renderIcon={Calendar}
+          size={responsiveSize}
+          onClick={() =>
+            navigate({ to: `${spaHomePage}/appointments/calendar/${dayjs(selectedDate).format('YYYY-MM-DD')}` })
+          }>
+          {t('appointmentsCalendar', 'Appointments Calendar')}
+        </Button>
+        <ExtensionSlot
+          name="patient-search-button-slot"
+          state={{
+            selectPatientAction: launchCreateAppointmentForm,
+            buttonText: t('createNewAppointment', 'Create new appointment'),
+            overlayHeader: t('createNewAppointment', 'Create new appointment'),
+            buttonProps: {
+              kind: 'primary',
+              renderIcon: (props) => <Hospital size={32} {...props} />,
+              size: responsiveSize,
+            },
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MetricsHeader;

package/src/metrics/metrics-header.scss

@@ -0,0 +1,33 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.metricsContainer {
+  display: flex;
+  justify-content: space-between;
+  background-color: $ui-02;
+  height: layout.$spacing-10;
+  align-items: center;
+  padding: 0 layout.$spacing-05;
+}
+
+.metricsTitle {
+  @include type.type-style('heading-03');
+  color: $ui-05;
+}
+
+.link {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+}
+
+.viewListBtn {
+  margin: 0 0 0 layout.$spacing-03;
+}
+
+.metricsContent {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-05;
+}

package/src/past-visit/encounter-list.component.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import classNames from 'classnames';
+import {
+  StructuredListHead,
+  StructuredListCell,
+  StructuredListRow,
+  StructuredListBody,
+  StructuredListWrapper,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { formatDatetime, parseDate } from '@openmrs/esm-framework';
+import { type FormattedEncounter } from './past-visit.component';
+import styles from './past-visit.scss';
+
+interface EncounterListProps {
+  encounters: Array<FormattedEncounter>;
+}
+
+const EncounterList: React.FC<EncounterListProps> = ({ encounters }) => {
+  const { t } = useTranslation();
+
+  const structuredListBodyRowGenerator = () => {
+    return encounters.map((encounter, i) => (
+      <StructuredListRow label key={`row-${i}`}>
+        <StructuredListCell>{formatDatetime(parseDate(encounter.datetime), { mode: 'wide' })}</StructuredListCell>
+        <StructuredListCell className={styles.textColor}>{encounter.encounterType}</StructuredListCell>
+        <StructuredListCell>{encounter.provider}</StructuredListCell>
+      </StructuredListRow>
+    ));
+  };
+
+  if (encounters?.length) {
+    return (
+      <div className={styles.encounterListContainer}>
+        <StructuredListWrapper>
+          <StructuredListHead>
+            <StructuredListRow head>
+              <StructuredListCell head>{t('date&Time', 'Date & time')}</StructuredListCell>
+              <StructuredListCell head>{t('encounterType', 'Encounter type')}</StructuredListCell>
+              <StructuredListCell head>{t('provider', 'Provider')}</StructuredListCell>
+            </StructuredListRow>
+          </StructuredListHead>
+          <StructuredListBody>{structuredListBodyRowGenerator()}</StructuredListBody>
+        </StructuredListWrapper>
+      </div>
+    );
+  }
+
+  return (
+    <p className={classNames(styles.bodyLong01, styles.text02)}>{t('noEncountersFound', 'No encounters found')}</p>
+  );
+};
+
+export default EncounterList;

package/src/past-visit/past-visit.component.tsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { StructuredListSkeleton, Tab, Tabs } from '@carbon/react';
+import { formatDate, type OpenmrsResource, parseDate, useLayoutType } from '@openmrs/esm-framework';
+import { type Observation } from '../types';
+import { usePastVisits } from './past-visit.resource';
+import EncounterList from './encounter-list.component';
+import styles from './past-visit.scss';
+
+interface PastVisitProps {
+  patientUuid: string;
+}
+
+export interface FormattedEncounter {
+  id: string;
+  datetime: string;
+  encounterType: string;
+  form: OpenmrsResource;
+  obs: Array<Observation>;
+  provider: string;
+  visitType: string;
+  visitUuid: string;
+}
+
+const PastVisit: React.FC<PastVisitProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const { data: pastVisits, isError, isLoading } = usePastVisits(patientUuid);
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+  const isTablet = useLayoutType() === 'tablet';
+
+  if (isLoading) {
+    return <StructuredListSkeleton role="progressbar" />;
+  }
+
+  if (pastVisits?.length) {
+    const encounters = mapEncounters(pastVisits[0]);
+
+    const tabsClasses = classNames(styles.verticalTabs, {
+      [styles.tabletTabs]: isTablet,
+      [styles.desktopTabs]: !isTablet,
+    });
+
+    const tabClass = (index) =>
+      classNames(styles.tab, styles.bodyLong01, {
+        [styles.selectedTab]: selectedTabIndex === index,
+      });
+
+    return (
+      <div className={styles.wrapper}>
+        <div className={styles.visitType}>
+          <span> {pastVisits?.length ? pastVisits[0]?.visitType.display : '--'}</span>
+          <p className={styles.date}>
+            {pastVisits?.length ? formatDate(parseDate(pastVisits[0]?.startDatetime)) : '--'}
+          </p>
+        </div>
+        <div className={styles.visitContainer}>
+          <Tabs className={tabsClasses}>
+            <Tab
+              className={tabClass[0]}
+              id="vitals-tab"
+              onClick={() => setSelectedTabIndex(0)}
+              label={t('vitals', 'Vitals')}></Tab>
+
+            <Tab
+              className={tabClass[1]}
+              id="notes-tab"
+              onClick={() => setSelectedTabIndex(1)}
+              label={t('notes', 'Notes')}></Tab>
+
+            <Tab
+              className={tabClass[2]}
+              id="medications-tab"
+              onClick={() => setSelectedTabIndex(2)}
+              label={t('medications', 'Medications')}></Tab>
+
+            <Tab
+              className={tabClass[3]}
+              id="encounters-tab"
+              onClick={() => setSelectedTabIndex(3)}
+              label={t('encounters', 'Encounters')}>
+              <EncounterList encounters={encounters} />
+            </Tab>
+          </Tabs>
+        </div>
+      </div>
+    );
+  }
+  return <p className={styles.bodyLong01}>{t('noPreviousVisitFound', 'No previous visit found')}</p>;
+};
+
+export function mapEncounters(visit) {
+  return visit?.encounters?.map((encounter) => ({
+    id: encounter?.uuid,
+    datetime: encounter?.encounterDatetime,
+    encounterType: encounter?.encounterType?.display,
+    form: encounter?.form,
+    obs: encounter?.obs,
+    provider:
+      encounter?.encounterProviders?.length > 0 ? encounter.encounterProviders[0].provider?.person?.display : '--',
+    visitUuid: visit?.visitType.uuid,
+    visitType: visit?.visitType?.name,
+  }));
+}
+
+export default PastVisit;

package/src/past-visit/past-visit.resource.ts

@@ -0,0 +1,25 @@
+import useSWR from 'swr';
+import { openmrsFetch, restBaseUrl, type Visit } from '@openmrs/esm-framework';
+
+export function usePastVisits(patientUuid: string) {
+  const customRepresentation =
+    'custom:(uuid,encounters:(uuid,encounterDatetime,' +
+    'form:(uuid,name),location:ref,' +
+    'encounterType:ref,encounterProviders:(uuid,display,' +
+    'provider:(uuid,display))),patient:(uuid,uuid),' +
+    'visitType:(uuid,name,display),attributes:(uuid,display,value),location:(uuid,name,display),startDatetime,' +
+    'stopDatetime)';
+
+  const apiUrl = `${restBaseUrl}/visit?patient=${patientUuid}&v=${customRepresentation}`;
+  const { data, error, isLoading, isValidating } = useSWR<{ data: { results: Array<Visit> } }, Error>(
+    patientUuid ? apiUrl : null,
+    openmrsFetch,
+  );
+
+  return {
+    data: data ? data.data.results : null,
+    isError: error,
+    isLoading,
+    isValidating,
+  };
+}