(feat) Improve appointments calendar with monthly, weekly, and daily drill-down views

packages/esm-appointments-app/src/calendar/appointments-calendar-view.component.tsx

@@ -7,12 +7,14 @@ 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 WeeklyCalendarView from './weekly/weekly-calendar-view.component';
+import DailyCalendarView from './daily/daily-calendar-view.component';
 import { useAppointmentsStore, setSelectedDate } from '../store';
 
 const AppointmentsCalendarView: React.FC = () => {
   const { t } = useTranslation();
-  const { selectedDate } = useAppointmentsStore();
-  const { calendarEvents } = useAppointmentsCalendar(dayjs(selectedDate).toISOString(), 'monthly');
+  const { selectedDate, calendarView } = useAppointmentsStore();
+  const { calendarEvents } = useAppointmentsCalendar(dayjs(selectedDate).toISOString(), calendarView);
 
   let params = useParams();
 
@@ -26,7 +28,9 @@ const AppointmentsCalendarView: React.FC = () => {
     <div data-testid="appointments-calendar">
       <AppointmentsHeader title={t('calendar', 'Calendar')} />
       <CalendarHeader />
-      <MonthlyCalendarView events={calendarEvents} />
+      {calendarView === 'monthly' && <MonthlyCalendarView events={calendarEvents} />}
+      {calendarView === 'weekly' && <WeeklyCalendarView events={calendarEvents} />}
+      {calendarView === 'daily' && <DailyCalendarView events={calendarEvents} />}
     </div>
   );
 };

packages/esm-appointments-app/src/calendar/daily/daily-calendar-view.component.test.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import dayjs from 'dayjs';
+import { appointmentsStore } from '../../store';
+import { omrsDateFormat } from '../../constants';
+import { type DailyAppointmentsCountByService } from '../../types';
+import DailyCalendarView from './daily-calendar-view.component';
+
+const SELECTED_DATE = '2024-01-15'; // Monday
+
+const mockEvents: Array<DailyAppointmentsCountByService> = [
+  {
+    appointmentDate: SELECTED_DATE,
+    services: [
+      { serviceName: 'HIV Clinic', serviceUuid: 'uuid-hiv', count: 4 },
+      { serviceName: 'TB Clinic', serviceUuid: 'uuid-tb', count: 1 },
+    ],
+  },
+];
+
+function setupStore(date = SELECTED_DATE) {
+  appointmentsStore.setState({
+    selectedDate: dayjs(date).format(omrsDateFormat),
+    calendarView: 'daily',
+    appointmentServiceTypes: [],
+  });
+}
+
+describe('DailyCalendarView', () => {
+  beforeEach(() => setupStore());
+
+  it('renders Prev and Next day navigation buttons', () => {
+    render(<DailyCalendarView events={[]} />);
+
+    expect(screen.getByRole('button', { name: /previous day/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /next day/i })).toBeInTheDocument();
+  });
+
+  it('shows no appointments message when there are no events for the selected day', () => {
+    render(<DailyCalendarView events={[]} />);
+
+    expect(screen.getByText(/no appointments scheduled for this day/i)).toBeInTheDocument();
+  });
+
+  it('shows the service table when events exist for the selected date', () => {
+    render(<DailyCalendarView events={mockEvents} />);
+
+    expect(screen.getByText('HIV Clinic')).toBeInTheDocument();
+    expect(screen.getByText('TB Clinic')).toBeInTheDocument();
+    expect(screen.getByText('4')).toBeInTheDocument();
+    expect(screen.getByText('1')).toBeInTheDocument();
+  });
+
+  it('shows total appointment count', () => {
+    render(<DailyCalendarView events={mockEvents} />);
+
+    expect(screen.getByText(/total appointments/i)).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument(); // 4 + 1
+  });
+
+  it('shows Today badge when the selected date is today', () => {
+    setupStore(dayjs().format('YYYY-MM-DD'));
+    render(<DailyCalendarView events={[]} />);
+
+    expect(screen.getByText('Today')).toBeInTheDocument();
+  });
+
+  it('does not show Today badge for a past date', () => {
+    render(<DailyCalendarView events={[]} />);
+
+    expect(screen.queryByText('Today')).not.toBeInTheDocument();
+  });
+
+  it('opens a modal when a service row is clicked', async () => {
+    const user = userEvent.setup();
+    render(<DailyCalendarView events={mockEvents} />);
+
+    await user.click(screen.getByText('HIV Clinic'));
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('modal contains service details', async () => {
+    const user = userEvent.setup();
+    render(<DailyCalendarView events={mockEvents} />);
+
+    await user.click(screen.getByText('HIV Clinic'));
+
+    const dialog = screen.getByRole('dialog');
+    expect(dialog).toHaveTextContent('HIV Clinic');
+    expect(dialog).toHaveTextContent('TB Clinic');
+  });
+
+  it('navigates to the previous day when Prev is clicked', async () => {
+    const user = userEvent.setup();
+    render(<DailyCalendarView events={[]} />);
+
+    await user.click(screen.getByRole('button', { name: /previous day/i }));
+
+    const newDate = dayjs(appointmentsStore.getState().selectedDate);
+    expect(newDate.format('YYYY-MM-DD')).toBe('2024-01-14');
+  });
+
+  it('navigates to the next day when Next is clicked', async () => {
+    const user = userEvent.setup();
+    render(<DailyCalendarView events={[]} />);
+
+    await user.click(screen.getByRole('button', { name: /next day/i }));
+
+    const newDate = dayjs(appointmentsStore.getState().selectedDate);
+    expect(newDate.format('YYYY-MM-DD')).toBe('2024-01-16');
+  });
+});

packages/esm-appointments-app/src/calendar/daily/daily-calendar-view.component.tsx

@@ -0,0 +1,126 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import { Button, Modal } from '@carbon/react';
+import { User } from '@carbon/react/icons';
+import { formatDate } from '@openmrs/esm-framework';
+import { omrsDateFormat } from '../../constants';
+import { useAppointmentsStore, setSelectedDate } from '../../store';
+import { type DailyAppointmentsCountByService } from '../../types';
+import styles from './daily-calendar-view.scss';
+
+interface DailyCalendarViewProps {
+  events: Array<DailyAppointmentsCountByService>;
+}
+
+const DailyCalendarView: React.FC<DailyCalendarViewProps> = ({ events }) => {
+  const { t } = useTranslation();
+  const { selectedDate } = useAppointmentsStore();
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const handlePrevDay = useCallback(() => {
+    setSelectedDate(dayjs(selectedDate).subtract(1, 'day').format(omrsDateFormat));
+  }, [selectedDate]);
+
+  const handleNextDay = useCallback(() => {
+    setSelectedDate(dayjs(selectedDate).add(1, 'day').format(omrsDateFormat));
+  }, [selectedDate]);
+
+  const currentData = useMemo(
+    () =>
+      events?.find((e) => dayjs(e.appointmentDate).format('YYYY-MM-DD') === dayjs(selectedDate).format('YYYY-MM-DD')),
+    [events, selectedDate],
+  );
+
+  const totalCount = currentData?.services?.reduce((sum, { count = 0 }) => sum + count, 0) ?? 0;
+  const isToday = dayjs(selectedDate).isSame(dayjs(), 'day');
+
+  return (
+    <div className={styles.dailyContainer}>
+      <div className={styles.dailyHeader}>
+        <Button kind="tertiary" size="sm" onClick={handlePrevDay} aria-label={t('previousDay', 'Previous day')}>
+          {t('prev', 'Prev')}
+        </Button>
+        <div className={styles.dateDisplay}>
+          <span className={styles.dayName}>{dayjs(selectedDate).format('dddd')}</span>
+          <span className={styles.fullDate}>
+            {formatDate(new Date(selectedDate), { day: true, time: false, noToday: true })}
+          </span>
+          {isToday && <span className={styles.todayBadge}>{t('today', 'Today')}</span>}
+        </div>
+        <Button kind="tertiary" size="sm" onClick={handleNextDay} aria-label={t('nextDay', 'Next day')}>
+          {t('next', 'Next')}
+        </Button>
+      </div>
+
+      <div className={styles.dailyBody}>
+        <div className={styles.summaryCard}>
+          <div className={styles.summaryHeader}>
+            <User size={20} />
+            <span className={styles.totalLabel}>
+              {t('totalAppointments', 'Total appointments')}: <strong>{totalCount}</strong>
+            </span>
+          </div>
+
+          {currentData?.services?.length ? (
+            <table className={styles.serviceTable}>
+              <thead>
+                <tr>
+                  <th>{t('service', 'Service')}</th>
+                  <th>{t('appointments', 'Appointments')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {currentData.services.map(({ serviceName, serviceUuid, count }) => (
+                  <tr
+                    key={serviceUuid}
+                    role="button"
+                    tabIndex={0}
+                    className={styles.serviceRow}
+                    onClick={() => setModalOpen(true)}
+                    onKeyDown={(e) => e.key === 'Enter' && setModalOpen(true)}>
+                    <td>{serviceName}</td>
+                    <td>{count}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          ) : (
+            <p className={styles.noData}>{t('noAppointmentsForDay', 'No appointments scheduled for this day.')}</p>
+          )}
+        </div>
+      </div>
+
+      {modalOpen && (
+        <Modal
+          open={modalOpen}
+          modalHeading={`${t('appointments', 'Appointments')} — ${dayjs(selectedDate).format('dddd, MMMM D YYYY')}`}
+          passiveModal
+          onRequestClose={() => setModalOpen(false)}>
+          {currentData?.services?.length ? (
+            <table className={styles.serviceTable}>
+              <thead>
+                <tr>
+                  <th>{t('service', 'Service')}</th>
+                  <th>{t('count', 'Count')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {currentData.services.map(({ serviceName, serviceUuid, count }) => (
+                  <tr key={serviceUuid}>
+                    <td>{serviceName}</td>
+                    <td>{count}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          ) : (
+            <p>{t('noAppointmentsForDay', 'No appointments scheduled for this day.')}</p>
+          )}
+        </Modal>
+      )}
+    </div>
+  );
+};
+
+export default DailyCalendarView;

packages/esm-appointments-app/src/calendar/daily/daily-calendar-view.scss

@@ -0,0 +1,103 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.dailyContainer {
+  margin: layout.$spacing-05;
+}
+
+.dailyHeader {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-05;
+  margin-bottom: layout.$spacing-06;
+}
+
+.dateDisplay {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: layout.$spacing-01;
+}
+
+.dayName {
+  @include type.type-style('heading-04');
+  color: colors.$gray-100;
+}
+
+.fullDate {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-60;
+}
+
+.todayBadge {
+  @include type.type-style('label-01');
+  background-color: colors.$blue-60;
+  color: colors.$white;
+  border-radius: 1rem;
+  padding: layout.$spacing-01 layout.$spacing-03;
+  font-weight: 600;
+}
+
+.dailyBody {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+}
+
+.summaryCard {
+  background: colors.$white;
+  border: 1px solid colors.$gray-20;
+  border-radius: 4px;
+  padding: layout.$spacing-05;
+}
+
+.summaryHeader {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  margin-bottom: layout.$spacing-05;
+  padding-bottom: layout.$spacing-04;
+  border-bottom: 1px solid colors.$gray-20;
+}
+
+.totalLabel {
+  @include type.type-style('heading-02');
+  color: colors.$gray-100;
+}
+
+.serviceTable {
+  width: 100%;
+  border-collapse: collapse;
+
+  th,
+  td {
+    text-align: left;
+    padding: layout.$spacing-03 layout.$spacing-04;
+    border-bottom: 1px solid colors.$gray-20;
+    @include type.type-style('body-compact-01');
+  }
+
+  th {
+    @include type.type-style('label-02');
+    font-weight: 600;
+    background: colors.$gray-10;
+  }
+}
+
+.serviceRow {
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: colors.$blue-10;
+  }
+}
+
+.noData {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-60;
+  font-style: italic;
+  padding: layout.$spacing-05 0;
+}