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

package/dist/routes.json

@@ -0,0 +1 @@
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0"},"modals":[{"name":"end-appointment-modal","component":"endAppointmentModal"}],"extensions":[{"name":"home-appointments","slot":"homepage-widgets-slot","component":"homeAppointments","order":1},{"name":"clinical-appointments-dashboard-link","slot":"homepage-dashboard-slot","component":"appointmentsDashboardLink","meta":{"name":"appointments","slot":"clinical-appointments-dashboard-slot","title":"Appointments"}},{"component":"root","name":"clinical-appointments-dashboard","slot":"clinical-appointments-dashboard-slot"},{"name":"appointments-calendar-dashboard-link","slot":"calendar-dashboard-slot","component":"appointmentsCalendarDashboardLink"},{"name":"check-in-appointment-modal","slot":"todays-appointment-slot","component":"checkInModal"},{"name":"todays-appointments-dashboard","slot":"todays-appointment-slot","component":"homeAppointments"},{"name":"expected-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"checked-in-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"completed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"missed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"cancelled-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"early-appointments-panel","component":"earlyAppointments"},{"name":"appointments-form-workspace","component":"appointmentsFormWorkspace","meta":{"title":{"key":"createNewAppointment","default":"Create new appointment"}}},{"name":"patient-appointments-summary-dashboard","component":"patientAppointmentsSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-appointments-dashboard-slot","title":"Appointments","path":"Appointments"}},{"name":"patientAppointments-details-widget","component":"patientAppointmentsDetailedSummary","slot":"patient-chart-appointments-dashboard-slot","meta":{"columnSpan":1}},{"name":"patient-upcoming-appointment-widget","component":"patientUpcomingAppointmentsWidget","slot":"upcoming-appointment-slot"},{"name":"patient-appointment-cancel-confirmation-dialog","component":"patientAppointmentsCancelConfirmationDialog"},{"name":"edit-appointments-form","component":"appointementForm","meta":{"title":{"key":"editAppointment","default":"Edit Appointment"}}},{"name":"search-patient","component":"searchPatient"},{"name":"create-appointment","component":"appointementForm","meta":{"title":{"key":"appointmentForm","default":"Appointment Form"}}},{"name":"add-appointment","component":"appointementForm","meta":{"title":{"key":"createNewAppointment","default":"Create new appointment"}}}],"version":"7.0.2-pre.65"}

package/jest.config.js

@@ -0,0 +1,3 @@
+const rootConfig = require('../../jest.config.js');
+
+module.exports = rootConfig;

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@kenyaemr/esm-appointments-app",
+  "version": "7.0.2-pre.65",
+  "description": "Appointments front-end module for the OpenMRS SPA",
+  "browser": "dist/kenyaemr-esm-appointments-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/openmrs/openmrs-esm-patient-management#readme",
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
+    "debug": "npm run serve",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "lint": "eslint src --ext tsx",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests --color",
+    "test-watch": "cross-env TZ=UTC jest --watch --config jest.config.js",
+    "coverage": "yarn test --coverage",
+    "typescript": "tsc",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.extension.tsx' 'src/**/*.workspace.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openmrs/openmrs-esm-patient-management.git"
+  },
+  "bugs": {
+    "url": "https://github.com/openmrs/openmrs-esm-patient-management/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "~1.37.0",
+    "formik": "^2.2.9",
+    "lodash-es": "^4.17.15",
+    "yup": "^0.32.11"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "5.x",
+    "@openmrs/esm-patient-common-lib": "7.x",
+    "react": "18.x",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x",
+    "swr": "2.x"
+  },
+  "devDependencies": {
+    "webpack": "^5.74.0"
+  },
+  "stableVersion": "7.0.1"
+}

package/src/admin/appointment-services/appointment-services-hook.ts

@@ -0,0 +1,31 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type AppointmentService } from '../../types';
+
+const appointmentServiceInitialValue: AppointmentService = {
+  appointmentServiceId: 0,
+  creatorName: '',
+  description: '',
+  durationMins: 0,
+  endTime: '',
+  initialAppointmentStatus: '',
+  location: { uuid: '', display: '' },
+  maxAppointmentsLimit: 0,
+  name: '',
+  startTime: '',
+  uuid: '',
+  color: '',
+  startTimeTimeFormat: new Date().getHours() >= 12 ? 'PM' : 'AM',
+  endTimeTimeFormat: new Date().getHours() >= 12 ? 'PM' : 'AM',
+};
+
+const addNewAppointmentService = (payload) => {
+  return openmrsFetch(`${restBaseUrl}/appointmentService`, {
+    method: 'POST',
+    body: payload,
+    headers: { 'Content-Type': 'application/json' },
+  });
+};
+
+export const useAppointmentServices = () => {
+  return { appointmentServiceInitialValue, addNewAppointmentService };
+};

package/src/admin/appointment-services/appointment-services-validation.ts

@@ -0,0 +1,17 @@
+import * as Yup from 'yup';
+import { OpenmrsResource } from '@openmrs/esm-framework';
+
+export const validationSchema = Yup.object({
+  description: Yup.string().optional(),
+  durationMins: Yup.number().required('durationMinsRequired'),
+  endTime: Yup.string().required('endTimeRequired'),
+  initialAppointmentStatus: Yup.string().optional(),
+  location: Yup.object({ uuid: Yup.string(), display: Yup.string() }).required('locationRequired'),
+  maxAppointmentsLimit: Yup.number().required('maxAppointmentLimitRequired'),
+  name: Yup.string().required('appointmentServiceNameRequired'),
+  specialityUuid: Yup.string().optional(),
+  startTime: Yup.string().required('startTimeRequired'),
+  color: Yup.string().required('colorRequired'),
+  startTimeTimeFormat: Yup.string().required('startTimeFormatRequired'),
+  endTimeTimeFormat: Yup.string().required('endTimeFormatRequired'),
+});

package/src/admin/appointment-services/appointment-services.component.tsx

@@ -0,0 +1,182 @@
+import React from 'react';
+import { Button, ButtonSet, Dropdown, Layer, SelectItem, TextInput, TimePicker, TimePickerSelect } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { Form, Formik, type FormikHelpers } from 'formik';
+import { validationSchema } from './appointment-services-validation';
+import { useAppointmentServices } from './appointment-services-hook';
+import { showSnackbar, useLocations } from '@openmrs/esm-framework';
+import type { AppointmentService } from '../../types';
+import { closeOverlay } from '../../hooks/useOverlay';
+import styles from './appointment-services.scss';
+import { appointmentLocationTagName } from '../../constants';
+
+interface AppointmentServicesProps {}
+
+const AppointmentServices: React.FC<AppointmentServicesProps> = () => {
+  const { t } = useTranslation();
+  const { appointmentServiceInitialValue, addNewAppointmentService } = useAppointmentServices();
+
+  const locations = useLocations(appointmentLocationTagName);
+  const handleSubmit = async (values: AppointmentService, helpers: FormikHelpers<AppointmentService>) => {
+    const payload = {
+      name: values.name,
+      startTime: values.startTime.concat(':00'),
+      endTime: values.endTime.concat(':00'),
+      durationMins: values.durationMins,
+      color: values.color,
+      locationUuid: values.location.uuid,
+    };
+    addNewAppointmentService(payload).then(
+      ({ status }) => {
+        if (status === 200) {
+          showSnackbar({
+            isLowContrast: true,
+            kind: 'success',
+            subtitle: t('appointmentServiceCreate', 'Appointment service created successfully'),
+            title: t('appointmentService', 'Appointment service'),
+          });
+          closeOverlay();
+        }
+      },
+      (error) => {
+        showSnackbar({
+          title: t('errorCreatingAppointmentService', 'Error creating appointment service'),
+          kind: 'error',
+          subtitle: error?.message,
+        });
+      },
+    );
+  };
+  return (
+    <Formik
+      onSubmit={handleSubmit}
+      isInitialValid={false}
+      validationSchema={validationSchema}
+      initialValues={appointmentServiceInitialValue}>
+      {(props) => {
+        return (
+          <Form onSubmit={props.handleSubmit} className={styles.appointmentServiceContainer}>
+            <p className={styles.formTitle}>{t('createAppointmentService', 'Create appointment service')}</p>
+            <Layer>
+              <TextInput
+                id="name"
+                invalidText={t(props.errors.name)}
+                labelText={t('appointmentServiceName', 'Appointment service name')}
+                placeholder={t('appointmentServiceName', 'Appointment service name')}
+                invalid={!!(props.touched && props.errors.name)}
+                onChange={props.handleChange}
+                value={props.values.name}
+                name="name"
+                onBlue={props.handleBlur}
+              />
+            </Layer>
+            <Layer>
+              <TimePicker
+                className={styles.timePickerInput}
+                invalid={!!(props.touched && props.errors.startTime)}
+                pattern="([\d]+:[\d]{2})"
+                name="startTime"
+                value={props.values.startTime}
+                onChange={props.handleChange}
+                labelText={t('startTime', 'Start Time')}
+                id="start-time-picker">
+                <TimePickerSelect
+                  name="startTimeTimeFormat"
+                  onChange={props.handleChange}
+                  value={props.values.startTimeTimeFormat}
+                  invalid={!!(props.touched && props.errors.startTimeTimeFormat)}
+                  id="start-time-picker"
+                  labelText={t('time', 'Time')}
+                  aria-label={t('time', 'Time')}>
+                  <SelectItem value="AM" text="AM" />
+                  <SelectItem value="PM" text="PM" />
+                </TimePickerSelect>
+              </TimePicker>
+            </Layer>
+
+            <Layer>
+              <TimePicker
+                invalid={!!(props.touched && props.errors.endTime)}
+                className={styles.timePickerInput}
+                pattern="([\d]+:[\d]{2})"
+                value={props.values.endTime}
+                name="endTime"
+                onChange={props.handleChange}
+                labelText={t('endTime', 'End Time')}
+                id="end-time-picker">
+                <TimePickerSelect
+                  name="endTimeTimeFormat"
+                  onChange={props.handleChange}
+                  id="end-time-picker"
+                  value={props.values.endTimeTimeFormat}
+                  labelText={t('time', 'Time')}
+                  aria-label={t('time', 'Time')}>
+                  <SelectItem value="AM" text="AM" />
+                  <SelectItem value="PM" text="PM" />
+                </TimePickerSelect>
+              </TimePicker>
+            </Layer>
+
+            <Layer>
+              <TextInput
+                id="durationMins"
+                invalidText={props.errors.durationMins}
+                labelText={t('durationMins', 'Duration min')}
+                placeholder={t('durationMins', 'Duration min')}
+                invalid={!!(props.touched && props.errors.durationMins)}
+                onChange={props.handleChange}
+                value={props.values.durationMins}
+                name="durationMins"
+              />
+            </Layer>
+
+            <Layer>
+              <Dropdown
+                id="default"
+                titleText={t('selectLocation', 'Select location')}
+                label={t('selectLocation', 'Select location')}
+                items={locations}
+                itemToString={(item) => (item ? item.display : '')}
+                selectedItem={props.values.location}
+                invalid={!!(props.touched && props.errors.location?.uuid)}
+                name="location"
+                onChange={({ selectedItem }) => props.setValues({ ...props.values, location: selectedItem })}
+              />
+            </Layer>
+
+            <Layer>
+              <TextInput
+                invalid={!!(props.touched && props.errors.color)}
+                onChange={props.handleChange}
+                invalidText={props.errors.color}
+                labelText={t('appointmentColor', 'Appointment color')}
+                type="color"
+                name="color"
+              />
+            </Layer>
+
+            <ButtonSet className={styles.buttonSet}>
+              <Button
+                onClick={closeOverlay}
+                style={{ maxWidth: 'none', width: '50%' }}
+                className={styles.button}
+                kind="secondary">
+                {t('discard', 'Discard')}
+              </Button>
+              <Button
+                disabled={!props.isValid}
+                style={{ maxWidth: 'none', width: '50%' }}
+                className={styles.button}
+                kind="primary"
+                type="submit">
+                {t('save', 'Save')}
+              </Button>
+            </ButtonSet>
+          </Form>
+        );
+      }}
+    </Formik>
+  );
+};
+
+export default AppointmentServices;

package/src/admin/appointment-services/appointment-services.scss

@@ -0,0 +1,25 @@
+@use '@carbon/styles/scss/spacing';
+
+.appointmentServiceContainer {
+  margin: spacing.$spacing-05 spacing.$spacing-05;
+
+  & > div {
+    padding: spacing.$spacing-03 0;
+  }
+}
+
+.buttonSet {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: 0 spacing.$spacing-05;
+}
+
+.button {
+  height: spacing.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  width: auto;
+}

package/src/appointments/appointment-tabs.component.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tab, TabList, Tabs, TabPanel, TabPanels } from '@carbon/react';
+
+import { type ConfigObject } from '../config-schema';
+import { useConfig } from '@openmrs/esm-framework';
+import ScheduledAppointments from './scheduled/scheduled-appointments.component';
+import UnscheduledAppointments from './unscheduled/unscheduled-appointments.component';
+import styles from './appointment-tabs.scss';
+
+interface AppointmentTabsProps {
+  appointmentServiceType: string;
+}
+
+const AppointmentTabs: React.FC<AppointmentTabsProps> = ({ appointmentServiceType }) => {
+  const { t } = useTranslation();
+  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);
+  const { showUnscheduledAppointmentsTab } = useConfig<ConfigObject>();
+
+  const handleTabChange = ({ selectedIndex }: { selectedIndex: number }) => {
+    setActiveTabIndex(selectedIndex);
+  };
+
+  return (
+    <div className={styles.appointmentList} data-testid="appointment-list">
+      {showUnscheduledAppointmentsTab ? (
+        <Tabs selectedIndex={activeTabIndex} onChange={handleTabChange} className={styles.tabs}>
+          <TabList style={{ paddingLeft: '1rem' }} aria-label="Appointment tabs" contained>
+            <Tab className={styles.tab}>{t('scheduled', 'Scheduled')}</Tab>
+            <Tab className={styles.tab}>{t('unscheduled', 'Unscheduled')}</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel className={styles.tabPanel}>
+              <ScheduledAppointments appointmentServiceType={appointmentServiceType} />
+            </TabPanel>
+            <TabPanel className={styles.tabPanel}>
+              <UnscheduledAppointments />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      ) : (
+        <ScheduledAppointments appointmentServiceType={appointmentServiceType} />
+      )}
+    </div>
+  );
+};
+
+export default AppointmentTabs;

package/src/appointments/appointment-tabs.scss

@@ -0,0 +1,53 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+@import '../root.scss';
+
+.appointmentList {
+  margin: 1rem;
+
+  & > div {
+    background-color: $ui-02;
+  }
+}
+
+.tabs {
+  grid-column: span 2;
+}
+
+.tab {
+  min-width: 12rem;
+
+  &:active,
+  &:focus {
+    outline: 2px solid var(--brand-03) !important;
+  }
+
+  &[aria-selected='true'] {
+    box-shadow: inset 0 2px 0 0 var(--brand-03) !important;
+  }
+}
+
+.tabPanel {
+  padding: 0;
+  margin: 1rem;
+}
+
+.calendarButton {
+  float: right;
+  position: absolute;
+  right: 0;
+  height: spacing.$spacing-09;
+  min-height: 0;
+}
+
+.downloadButton {
+  margin: spacing.$spacing-05;
+  & > button {
+    border: 1px solid colors.$blue-60;
+  }
+}
+.downloadLink {
+  text-decoration: none;
+  color: inherit;
+}

package/src/appointments/appointment-tabs.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { renderWithSwr, waitForLoadingToFinish } from 'tools';
+import { mockAppointmentsData } from '__mocks__';
+import AppointmentTabs from './appointment-tabs.component';
+
+const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+
+describe('AppointmentTabs', () => {
+  xit(`renders tabs showing different appointment lists`, async () => {
+    const user = userEvent.setup();
+
+    mockOpenmrsFetch.mockReturnValueOnce({ data: mockAppointmentsData.data });
+
+    renderAppointmentTabs();
+
+    await waitForLoadingToFinish();
+
+    const scheduledAppointmentsTab = screen.getByRole('tab', { name: /^scheduled$/i });
+    const unsheduledAppointment = screen.getByRole('tab', { name: /^unscheduled$/i });
+    const pendingAppointments = screen.getByRole('tab', { name: /^unscheduled$/i });
+
+    expect(scheduledAppointmentsTab).toBeInTheDocument();
+    expect(unsheduledAppointment).toBeInTheDocument();
+    expect(pendingAppointments).toBeInTheDocument();
+
+    expect(scheduledAppointmentsTab).toHaveAttribute('aria-selected', 'true');
+    expect(unsheduledAppointment).toHaveAttribute('aria-selected', 'false');
+    expect(pendingAppointments).toHaveAttribute('aria-selected', 'false');
+
+    expect(screen.getByRole('button', { name: /add new appointment/i })).toBeInTheDocument();
+    expect(screen.getByText(/view calendar/i)).toBeInTheDocument();
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    const expectedColumnHeaders = [/name/, /date & time/, /service type/, /provider/, /location/, /actions/];
+    expectedColumnHeaders.forEach((header) => {
+      expect(screen.getByRole('columnheader', { name: new RegExp(header, 'i') })).toBeInTheDocument();
+    });
+
+    const expectedTableRows = [
+      /John Wilson 30-Aug-2021, 12:35 PM Outpatient HIV Clinic/,
+      /Elon Musketeer 14-Sept-2021, 07:50 AM Outpatient HIV Clinic/,
+      /Hopkins Derrick 14-Sept-2021, 12:50 PM Outpatient TB Clinic/,
+      /Amos Strong 15-Sept-2021, 01:32 PM Outpatient TB Clinic/,
+    ];
+    expectedTableRows.forEach((row) => {
+      expect(screen.getByRole('row', { name: new RegExp(row, 'i') })).toBeInTheDocument();
+    });
+  });
+});
+
+function renderAppointmentTabs() {
+  renderWithSwr(<AppointmentTabs appointmentServiceType="" />);
+}

package/src/appointments/common-components/appointments-actions.component.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
+import utc from 'dayjs/plugin/utc';
+import { Button } from '@carbon/react';
+import { TaskComplete } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { navigate, showModal, useConfig } from '@openmrs/esm-framework';
+import { type Appointment, AppointmentStatus } from '../../types';
+import { type ConfigObject } from '../../config-schema';
+import { useTodaysVisits } from '../../hooks/useTodaysVisits';
+import CheckInButton from './checkin-button.component';
+import styles from './appointments-actions.scss';
+
+dayjs.extend(utc);
+dayjs.extend(isToday);
+
+interface AppointmentsActionsProps {
+  appointment: Appointment;
+}
+
+const AppointmentsActions: React.FC<AppointmentsActionsProps> = ({ appointment }) => {
+  const { t } = useTranslation();
+  const { checkInButton, checkOutButton } = useConfig<ConfigObject>();
+  const { visits, mutateVisit } = useTodaysVisits(); // TODO doesn't work if visit didn't start today?  what about inpatient?
+  const patientUuid = appointment.patient.uuid;
+  const visitDate = dayjs(appointment.startDateTime);
+  const hasActiveVisitToday = visits?.some(
+    (visit) => visit?.patient?.uuid === patientUuid && visit?.startDatetime && !visit?.stopDatetime,
+  );
+  const isTodaysAppointment = visitDate.isToday();
+  const isCheckedIn = appointment.status === AppointmentStatus.CHECKEDIN;
+  const isCompleted = appointment.status === AppointmentStatus.COMPLETED;
+  const isCancelled = appointment.status === AppointmentStatus.CANCELLED;
+
+  const handleCheckout = () => {
+    if (checkOutButton.customUrl) {
+      navigate({ to: checkOutButton.customUrl, templateParams: { patientUuid, appointmentUuid: appointment.uuid } });
+    } else {
+      const dispose = showModal('end-appointment-modal', {
+        closeModal: () => {
+          mutateVisit();
+          dispose();
+        },
+        patientUuid,
+        appointmentUuid: appointment.uuid,
+      });
+    }
+  };
+
+  const renderVisitStatus = () => {
+    switch (true) {
+      case isCancelled:
+        return (
+          <Button kind="danger--ghost" iconDescription={t('cancelled', 'Cancelled')} size="sm">
+            {t('cancelled', 'Cancelled')}
+          </Button>
+        );
+      case isCompleted:
+        return (
+          <Button kind="ghost" renderIcon={TaskComplete} iconDescription={t('checkedOut', 'Checked out')} size="sm">
+            {t('checkedOut', 'Checked out')}
+          </Button>
+        );
+      case checkOutButton.enabled && isCheckedIn:
+        return (
+          <Button onClick={handleCheckout} kind="danger--tertiary" size="sm">
+            {t('checkOut', 'Check out')}
+          </Button>
+        );
+      case checkInButton.enabled && (!hasActiveVisitToday || checkInButton.showIfActiveVisit) && isTodaysAppointment: {
+        return <CheckInButton patientUuid={patientUuid} appointment={appointment} />;
+      }
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <>{renderVisitStatus()}</>
+    </div>
+  );
+};
+
+export default AppointmentsActions;

package/src/appointments/common-components/appointments-actions.scss

@@ -0,0 +1,4 @@
+.container {
+  display: flex;
+  align-items: center;
+}