@openmrs/esm-appointments-app 11.1.1-pre.9033 → 11.1.1-pre.9051

package/.turbo/turbo-build.log

@@ -5,4 +5,4 @@
   │   6973.js (315.022 KiB)
 
 
-Rspack compiled with 1 warning in 37.63 s
+Rspack compiled with 1 warning in 26.16 s

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":">=2.2.0","appointments":">=2.0.0"},"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"},"order":2},{"component":"root","name":"clinical-appointments-dashboard","slot":"clinical-appointments-dashboard-slot"},{"name":"appointments-dashboard","slot":"appointments-dashboard-slot","component":"appointmentsDashboard"},{"name":"appointments-calendar-dashboard-link","slot":"calendar-dashboard-slot","component":"appointmentsCalendarDashboardLink"},{"name":"todays-appointments-dashboard","slot":"todays-appointment-slot","component":"homeAppointments"},{"name":"early-appointments-panel","component":"earlyAppointments"},{"name":"patient-appointments-summary-dashboard","component":"patientAppointmentsSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":11,"meta":{"columns":1,"columnSpan":1,"hideDashboardTitle":true,"path":"appointments","slot":"patient-chart-appointments-dashboard-slot","title":"Appointments"}},{"name":"appointments-details-widget","component":"patientAppointmentsDetailedSummary","slot":"patient-chart-appointments-dashboard-slot","meta":{"columnSpan":1}},{"name":"patient-upcoming-appointment-widget","component":"patientUpcomingAppointmentsWidget","slot":"visit-form-top-slot"},{"name":"home-appointments-tile","slot":"home-metrics-tiles-slot","component":"homeAppointmentsTile"},{"name":"metrics-card-scheduled-appointments","component":"metricsCardScheduledAppointments","slot":"appointments-metrics-slot","order":1},{"name":"metrics-card-highest-volume-service","component":"metricsCardHighestVolumeService","slot":"appointments-metrics-slot","order":2},{"name":"metrics-card-providers-booked","component":"metricsCardProvidersBooked","slot":"appointments-metrics-slot","order":3}],"modals":[{"name":"end-appointment-modal","component":"endAppointmentModal"},{"name":"cancel-appointment-modal","component":"cancelAppointmentModal"},{"name":"batch-change-appointments-statuses-modal","component":"batchChangeAppointmentStatusesModal"}],"workspaceGroups2":[{"name":"appointments-group","scopePattern":"/home/appointments"}],"workspaceWindows2":[{"name":"appointments-window","group":"appointments-group"}],"workspaces2":[{"name":"appointments-form-workspace","component":"appointmentsFormWorkspace","window":"appointments-window"},{"name":"appointments-patient-search-workspace","component":"@openmrs/esm-patient-search-app#patientSearchWorkspace2","window":"appointments-window"},{"name":"appointments-start-visit-workspace","component":"@openmrs/esm-patient-chart-app#exportedVisitForm","window":"appointments-window"}],"version":"11.1.1-pre.9033"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":">=2.2.0","appointments":">=2.0.0"},"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"},"order":2},{"component":"root","name":"clinical-appointments-dashboard","slot":"clinical-appointments-dashboard-slot"},{"name":"appointments-dashboard","slot":"appointments-dashboard-slot","component":"appointmentsDashboard"},{"name":"appointments-calendar-dashboard-link","slot":"calendar-dashboard-slot","component":"appointmentsCalendarDashboardLink"},{"name":"todays-appointments-dashboard","slot":"todays-appointment-slot","component":"homeAppointments"},{"name":"early-appointments-panel","component":"earlyAppointments"},{"name":"patient-appointments-summary-dashboard","component":"patientAppointmentsSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":11,"meta":{"columns":1,"columnSpan":1,"hideDashboardTitle":true,"path":"appointments","slot":"patient-chart-appointments-dashboard-slot","title":"Appointments"}},{"name":"appointments-details-widget","component":"patientAppointmentsDetailedSummary","slot":"patient-chart-appointments-dashboard-slot","meta":{"columnSpan":1}},{"name":"patient-upcoming-appointment-widget","component":"patientUpcomingAppointmentsWidget","slot":"visit-form-top-slot"},{"name":"home-appointments-tile","slot":"home-metrics-tiles-slot","component":"homeAppointmentsTile"},{"name":"metrics-card-scheduled-appointments","component":"metricsCardScheduledAppointments","slot":"appointments-metrics-slot","order":1},{"name":"metrics-card-highest-volume-service","component":"metricsCardHighestVolumeService","slot":"appointments-metrics-slot","order":2},{"name":"metrics-card-providers-booked","component":"metricsCardProvidersBooked","slot":"appointments-metrics-slot","order":3}],"modals":[{"name":"end-appointment-modal","component":"endAppointmentModal"},{"name":"cancel-appointment-modal","component":"cancelAppointmentModal"},{"name":"batch-change-appointments-statuses-modal","component":"batchChangeAppointmentStatusesModal"}],"workspaceGroups2":[{"name":"appointments-group","scopePattern":"/home/appointments"}],"workspaceWindows2":[{"name":"appointments-window","group":"appointments-group"}],"workspaces2":[{"name":"appointments-form-workspace","component":"appointmentsFormWorkspace","window":"appointments-window"},{"name":"appointments-patient-search-workspace","component":"@openmrs/esm-patient-search-app#patientSearchWorkspace2","window":"appointments-window"},{"name":"appointments-start-visit-workspace","component":"@openmrs/esm-patient-chart-app#exportedVisitForm","window":"appointments-window"}],"version":"11.1.1-pre.9051"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-appointments-app",
-  "version": "11.1.1-pre.9033",
+  "version": "11.1.1-pre.9051",
   "description": "Appointments front-end module for O3",
   "browser": "dist/openmrs-esm-appointments-app.js",
   "main": "src/index.ts",

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

@@ -0,0 +1,113 @@
+import React, { useMemo } from 'react';
+import { Tag, InlineLoading } from '@carbon/react';
+import { type Dayjs } from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import { formatAMPM } from '../../helpers/functions';
+import { type Appointment } from '../../types';
+import { useAppointmentsByDate } from '../../hooks/useAppointmentsByDate';
+import {
+  getServiceColor,
+  STATUS_TAG_TYPES,
+  DEFAULT_STATUS_TAG_TYPE,
+  CALENDAR_HOURS,
+  formatHourLabel,
+} from '../utils/calendar-colors';
+import styles from './daily-calendar-view.scss';
+
+const LOCALE_MAP: Record<string, string> = {
+  gregory: 'en-US',
+  ethiopic: 'am-ET',
+  islamic: 'ar-SA',
+  persian: 'fa-IR',
+};
+
+interface DailyCalendarViewProps {
+  calKey: string;
+  calendarSelectedDate: Dayjs;
+}
+
+const DailyCalendarView: React.FC<DailyCalendarViewProps> = ({ calKey, calendarSelectedDate }) => {
+  const { t } = useTranslation();
+  const isoDate = calendarSelectedDate.format('YYYY-MM-DD');
+  const locale = LOCALE_MAP[calKey] ?? 'en-US';
+  const { appointments, isLoading } = useAppointmentsByDate(isoDate);
+
+  const displayDate = useMemo(() => {
+    const d = calendarSelectedDate.toDate();
+    return new Intl.DateTimeFormat(locale, {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      calendar: calKey,
+    }).format(d);
+  }, [calendarSelectedDate, locale, calKey]);
+
+  const hourSlots = useMemo(
+    () =>
+      CALENDAR_HOURS.map((hr) => ({
+        hr,
+        appts: appointments.filter((a) => {
+          if (a.startDateTime == null) return false;
+          return new Date(a.startDateTime).getHours() === hr;
+        }),
+      })).filter((s) => s.appts.length > 0),
+    [appointments],
+  );
+
+  if (isLoading) {
+    return (
+      <div className={styles.container}>
+        <InlineLoading description={t('loadingAppointments', 'Loading appointments…')} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.heading}>
+        <h2 className={styles.title}>{displayDate}</h2>
+        <p className={styles.subtitle}>
+          {appointments.length === 0
+            ? t('noAppointments', 'No appointments scheduled')
+            : t('appointmentCount', '{{count}} appointment(s)', { count: appointments.length })}
+        </p>
+      </div>
+      {hourSlots.map(({ hr, appts }) => (
+        <div key={hr} className={styles.hourRow}>
+          <div className={styles.hourLabel}>{formatHourLabel(hr)}</div>
+          <div className={styles.hourSlot}>
+            {appts.map((a) => (
+              <DailyCard key={a.uuid} appointment={a} />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const DailyCard: React.FC<{ appointment: Appointment }> = ({ appointment }) => {
+  const color = getServiceColor(appointment.service.name);
+  const tagType = STATUS_TAG_TYPES[appointment.status] ?? DEFAULT_STATUS_TAG_TYPE;
+  const time = useMemo(() => {
+    if (appointment.startDateTime == null) return '—';
+    return formatAMPM(new Date(appointment.startDateTime));
+  }, [appointment.startDateTime]);
+
+  return (
+    <div className={styles.card} style={{ borderLeftColor: color }}>
+      <span className={styles.cardTime}>{time}</span>
+      <div className={styles.cardDetails}>
+        <div className={styles.cardName}>{appointment.patient?.name ?? '—'}</div>
+        <div className={styles.cardService} style={{ color }}>
+          {appointment.service.name}
+        </div>
+      </div>
+      <Tag type={tagType} size="sm">
+        {appointment.status}
+      </Tag>
+    </div>
+  );
+};
+
+export default DailyCalendarView;

package/src/calendar/daily/daily-calendar-view.scss

@@ -0,0 +1,96 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  margin: layout.$spacing-05;
+  border: 1px solid colors.$gray-20;
+  background: colors.$white;
+  overflow-x: auto;
+}
+
+.heading {
+  display: flex;
+  align-items: baseline;
+  gap: layout.$spacing-03;
+  padding: layout.$spacing-03 layout.$spacing-05;
+  border-bottom: 1px solid colors.$gray-20;
+  background: colors.$gray-10;
+}
+
+.title {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-100;
+  margin: 0;
+}
+
+.subtitle {
+  @include type.type-style('label-01');
+  color: colors.$gray-50;
+  margin: 0;
+}
+
+.hourRow {
+  display: flex;
+  border-bottom: 1px solid colors.$gray-20;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.hourLabel {
+  @include type.type-style('label-01');
+  color: colors.$gray-60;
+  font-size: 0.6875rem;
+  white-space: nowrap;
+  min-width: 6.5rem;
+  padding: layout.$spacing-02 layout.$spacing-03 0 layout.$spacing-03;
+  text-align: right;
+  border-right: 1px solid colors.$gray-20;
+  background: colors.$white;
+  flex-shrink: 0;
+}
+
+.hourSlot {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-02;
+  padding: layout.$spacing-02 layout.$spacing-04;
+  min-height: 3rem;
+  background: colors.$white;
+}
+
+.card {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-04;
+  padding: layout.$spacing-04 layout.$spacing-04;
+  margin: layout.$spacing-03 0;
+  border-left: 3px solid;
+  border-radius: 0 2px 2px 0;
+  background: colors.$gray-10;
+}
+
+.cardTime {
+  @include type.type-style('label-01');
+  color: colors.$gray-60;
+  min-width: 3.5rem;
+  flex-shrink: 0;
+}
+
+.cardDetails {
+  flex: 1;
+  min-width: 0;
+}
+
+.cardName {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-100;
+}
+
+.cardService {
+  @include type.type-style('label-01');
+  color: colors.$gray-50;
+}

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

@@ -0,0 +1,152 @@
+import React from 'react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { screen, waitFor } from '@testing-library/react';
+import dayjs from 'dayjs';
+import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
+import { renderWithSwr } from 'tools';
+import { type Appointment, AppointmentStatus, AppointmentKind } from '../../types';
+import DailyCalendarView from './daily-calendar-view.component';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string, opts?: { count?: number }) => {
+      if (opts?.count !== undefined) return `${opts.count} appointment(s)`;
+      return fallback ?? key;
+    },
+  }),
+}));
+
+const mockOpenmrsFetch = vi.mocked(openmrsFetch);
+
+const defaultProps = {
+  calKey: 'gregory',
+  calendarSelectedDate: dayjs('2026-06-09'),
+};
+
+const mockAppointment = (overrides: Partial<Appointment> = {}): Appointment => ({
+  uuid: '3b4d4f2a-7c8d-4e1f-9a6b-5c8d2e1f4a7b',
+  appointmentNumber: 'APT-0001',
+  appointmentKind: AppointmentKind.SCHEDULED,
+  comments: '',
+  endDateTime: new Date('2026-06-09T09:15:00').getTime(),
+  location: { uuid: 'b1a8b05e-3542-4037-bbd3-998ee9c40574', name: 'Inpatient Ward' },
+  patient: {
+    identifier: '100GEJ',
+    name: 'John Wilson',
+    uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e',
+  },
+  provider: { uuid: 'f9badd80-ab76-11e2-9e96-0800200c9a66', display: 'doctor - James Cook' },
+  providers: [{ uuid: 'f9badd80-ab76-11e2-9e96-0800200c9a66' }],
+  recurring: false,
+  service: {
+    appointmentServiceId: 1,
+    creatorName: 'Test Creator',
+    description: 'Outpatient service',
+    durationMins: 15,
+    endTime: '17:00',
+    initialAppointmentStatus: 'Scheduled',
+    maxAppointmentsLimit: null,
+    name: 'Outpatient',
+    startTime: '08:00',
+    uuid: 'e2ec9cf0-ec38-4d2b-af6c-59c82fa30b90',
+  },
+  startDateTime: new Date('2026-06-09T09:00:00').getTime(),
+  dateAppointmentScheduled: new Date('2026-06-09T00:00:00.000Z').getTime(),
+  status: AppointmentStatus.SCHEDULED,
+  voided: false,
+  extensions: {},
+  teleconsultationLink: null,
+  ...overrides,
+});
+
+describe('DailyCalendarView', () => {
+  beforeEach(() => {
+    mockOpenmrsFetch.mockReset();
+  });
+
+  it('shows loading spinner while fetching', () => {
+    mockOpenmrsFetch.mockReturnValue(new Promise(() => {}));
+    renderWithSwr(<DailyCalendarView {...defaultProps} />);
+    expect(screen.getByText(/Loading appointments/i)).toBeInTheDocument();
+  });
+
+  it('shows empty state when no appointments', async () => {
+    mockOpenmrsFetch.mockResolvedValue({ data: [] } as FetchResponse);
+    renderWithSwr(<DailyCalendarView {...defaultProps} />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/No appointments scheduled/i)).toBeInTheDocument();
+    });
+  });
+
+  it('renders the date heading and appointment count', async () => {
+    mockOpenmrsFetch.mockResolvedValue({ data: [mockAppointment()] } as FetchResponse);
+    renderWithSwr(<DailyCalendarView {...defaultProps} />);
+
+    await screen.findByText(/June 9, 2026/);
+    await screen.findByText('1 appointment(s)');
+  });
+
+  it('renders date using the given calendar key', async () => {
+    mockOpenmrsFetch.mockResolvedValue({ data: [mockAppointment()] } as FetchResponse);
+    renderWithSwr(<DailyCalendarView {...defaultProps} calKey="ethiopic" />);
+
+    await waitFor(() => expect(screen.getByRole('heading').textContent).toBeTruthy());
+  });
+
+  it('renders hour labels only for hours with appointments', async () => {
+    mockOpenmrsFetch.mockResolvedValue({
+      data: [
+        mockAppointment({
+          uuid: '3b4d4f2a-7c8d-4e1f-9a6b-5c8d2e1f4a7b',
+          startDateTime: new Date('2026-06-09T09:00:00').getTime(),
+        }),
+        mockAppointment({
+          uuid: '5c6e8f1b-9a2d-4c3f-8b7a-1d2e3f4a5b6c',
+          startDateTime: new Date('2026-06-09T14:00:00').getTime(),
+        }),
+      ],
+    } as FetchResponse);
+    renderWithSwr(<DailyCalendarView {...defaultProps} />);
+
+    await screen.findByText('9 AM');
+    await screen.findByText('2 PM');
+    await waitFor(() => expect(screen.queryByText('10 AM')).not.toBeInTheDocument());
+  });
+
+  it('renders appointment card with patient name, service, time, and status', async () => {
+    mockOpenmrsFetch.mockResolvedValue({
+      data: [
+        mockAppointment({
+          service: { ...mockAppointment().service, name: 'HIV Clinic' },
+          startDateTime: new Date('2026-06-09T14:30:00').getTime(),
+        }),
+      ],
+    } as FetchResponse);
+    renderWithSwr(<DailyCalendarView {...defaultProps} />);
+
+    await screen.findByText('John Wilson');
+    await screen.findByText('HIV Clinic');
+    await screen.findByText('2:30 PM');
+    await screen.findByText('Scheduled');
+  });
+
+  it('renders multiple appointments in the same hour slot', async () => {
+    mockOpenmrsFetch.mockResolvedValue({
+      data: [
+        mockAppointment({
+          patient: { identifier: '100GEJ', name: 'John Wilson', uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e' },
+          startDateTime: new Date('2026-06-09T09:00:00').getTime(),
+        }),
+        mockAppointment({
+          patient: { identifier: '100732HE', name: 'Jane Smith', uuid: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890' },
+          startDateTime: new Date('2026-06-09T09:30:00').getTime(),
+        }),
+      ],
+    } as FetchResponse);
+    renderWithSwr(<DailyCalendarView {...defaultProps} />);
+
+    await screen.findByText('John Wilson');
+    await screen.findByText('Jane Smith');
+  });
+});