@openmrs/esm-appointments-app 11.1.1-pre.8975 → 11.1.1-pre.8982

package/.turbo/turbo-build.log

@@ -5,4 +5,4 @@
   │   6973.js (315.022 KiB)
 
 
-Rspack compiled with 1 warning in 24.66 s
+Rspack compiled with 1 warning in 38.18 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.8975"}
+{"$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.8982"}

package/package.json

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

package/src/calendar/utils/calendar-colors.ts

@@ -0,0 +1,53 @@
+export type CarbonTagType = 'blue' | 'cyan' | 'green' | 'gray' | 'magenta' | 'purple' | 'red' | 'teal' | 'warm-gray';
+
+export const STATUS_TAG_TYPES: Readonly<Record<string, CarbonTagType>> = {
+  Scheduled: 'blue',
+  CheckedIn: 'teal',
+  Completed: 'green',
+  Missed: 'red',
+  Cancelled: 'warm-gray',
+  Requested: 'magenta',
+} as const;
+
+export const DEFAULT_STATUS_TAG_TYPE: CarbonTagType = 'gray';
+
+const SERVICE_COLOR_PALETTE: ReadonlyArray<string> = [
+  'var(--cds-blue-60)',
+  'var(--cds-purple-60)',
+  'var(--cds-teal-60)',
+  'var(--cds-magenta-60)',
+  'var(--cds-cyan-60)',
+  'var(--cds-green-60)',
+  'var(--cds-orange-60)',
+  'var(--cds-cool-gray-60)',
+] as const;
+
+export function getServiceColor(serviceName: string): string {
+  let hash = 0;
+  for (let i = 0; i < serviceName.length; i++) {
+    hash = (hash << 5) - hash + serviceName.charCodeAt(i);
+    hash |= 0;
+  }
+  return SERVICE_COLOR_PALETTE[Math.abs(hash) % SERVICE_COLOR_PALETTE.length];
+}
+
+export const CALENDAR_HOURS: ReadonlyArray<number> = Array.from({ length: 24 }, (_, i) => i) as ReadonlyArray<number>;
+
+export function formatHourLabel(hour: number): string {
+  const h = hour % 12 || 12;
+  const period = hour < 12 ? 'AM' : 'PM';
+  return `${h} ${period}`;
+}
+
+export interface TimeBlock {
+  label: string;
+  startHour: number;
+  endHour: number;
+}
+
+export const TIME_BLOCKS: ReadonlyArray<TimeBlock> = [
+  { label: '12 AM – 6 AM', startHour: 0, endHour: 6 },
+  { label: '6 AM – 12 PM', startHour: 6, endHour: 12 },
+  { label: '12 PM – 6 PM', startHour: 12, endHour: 18 },
+  { label: '6 PM – 12 AM', startHour: 18, endHour: 24 },
+];

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

@@ -0,0 +1,137 @@
+import React, { useMemo } from 'react';
+import { type Dayjs } from 'dayjs';
+import {
+  parseDate,
+  toCalendar,
+  getDayOfWeek,
+  startOfWeek,
+  today,
+  getLocalTimeZone,
+  GregorianCalendar,
+  EthiopicCalendar,
+  IslamicCivilCalendar,
+  PersianCalendar,
+  type Calendar,
+} from '@internationalized/date';
+import { useAppointmentsByDate } from '../../hooks/useAppointmentsByDate';
+import { TIME_BLOCKS } from '../utils/calendar-colors';
+import WeeklySlotCell from './weekly-slot-cell.component';
+import styles from './weekly-calendar-view.scss';
+
+const LOCALE_MAP: Record<string, string> = {
+  gregory: 'en-US',
+  ethiopic: 'am-ET',
+  islamic: 'ar-SA',
+  persian: 'fa-IR',
+};
+
+const DAY_OF_WEEK_KEY: Record<number, 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'> = {
+  0: 'sun',
+  1: 'mon',
+  2: 'tue',
+  3: 'wed',
+  4: 'thu',
+  5: 'fri',
+  6: 'sat',
+};
+
+function getCalendar(calKey: string): Calendar {
+  switch (calKey) {
+    case 'ethiopic':
+      return new EthiopicCalendar();
+    case 'islamic':
+      return new IslamicCivilCalendar();
+    case 'persian':
+      return new PersianCalendar();
+    default:
+      return new GregorianCalendar();
+  }
+}
+
+interface WeekDay {
+  iso: string;
+  day: number;
+  month: number;
+  year: number;
+  dow: number;
+}
+
+interface WeeklyCalendarViewProps {
+  calKey: string;
+  calendarSelectedDate: Dayjs;
+  onSelectDate: (isoDate: string, startHour: number, endHour: number) => void;
+}
+
+const WeeklyCalendarView: React.FC<WeeklyCalendarViewProps> = ({ calKey, calendarSelectedDate, onSelectDate }) => {
+  const todayISO = today(getLocalTimeZone()).toString();
+  const isoDate = calendarSelectedDate.format('YYYY-MM-DD');
+  const locale = LOCALE_MAP[calKey] ?? 'en-US';
+  const cal = useMemo(() => getCalendar(calKey), [calKey]);
+
+  const weekDays: ReadonlyArray<WeekDay> = useMemo(() => {
+    const pivot = parseDate(isoDate);
+    const firstDay = calKey === 'persian' ? 6 : 0;
+    const weekStart = startOfWeek(pivot, 'en-US', DAY_OF_WEEK_KEY[firstDay]);
+    return Array.from({ length: 7 }, (_, i) => {
+      const gregDay = weekStart.add({ days: i });
+      const calDay = toCalendar(gregDay, cal);
+      return {
+        iso: gregDay.toString(),
+        day: calDay.day,
+        month: calDay.month,
+        year: calDay.year,
+        dow: getDayOfWeek(gregDay, 'en-US', 'sun'),
+      };
+    });
+  }, [isoDate, cal, calKey]);
+
+  const day0 = useAppointmentsByDate(weekDays[0].iso);
+  const day1 = useAppointmentsByDate(weekDays[1].iso);
+  const day2 = useAppointmentsByDate(weekDays[2].iso);
+  const day3 = useAppointmentsByDate(weekDays[3].iso);
+  const day4 = useAppointmentsByDate(weekDays[4].iso);
+  const day5 = useAppointmentsByDate(weekDays[5].iso);
+  const day6 = useAppointmentsByDate(weekDays[6].iso);
+  const dayData = [day0, day1, day2, day3, day4, day5, day6];
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.grid}>
+        <div className={styles.cornerCell} />
+        {weekDays.map((wd) => {
+          const isToday = wd.iso === todayISO;
+          const [y, m, d] = wd.iso.split('-').map(Number);
+          const jsDate = new Date(y, m - 1, d);
+          const dowLabel = new Intl.DateTimeFormat(locale, { weekday: 'short', calendar: calKey }).format(jsDate);
+          const monthName = new Intl.DateTimeFormat('en-US', { month: 'short', calendar: calKey }).format(jsDate);
+          return (
+            <div key={wd.iso} className={`${styles.dayHeader} ${isToday ? styles.dayHeaderToday : ''}`}>
+              <div className={styles.dowLabel}>{dowLabel}</div>
+              <div className={`${styles.dayNum} ${isToday ? styles.dayNumToday : ''}`}>{wd.day}</div>
+              <div className={styles.monthLabel}>{monthName}</div>
+            </div>
+          );
+        })}
+
+        {TIME_BLOCKS.map((block) => (
+          <React.Fragment key={block.label}>
+            <div className={styles.timeLabel}>{block.label}</div>
+            {weekDays.map((wd, dayIdx) => (
+              <WeeklySlotCell
+                key={wd.iso}
+                appointments={dayData[dayIdx].appointments}
+                isoDate={wd.iso}
+                startHour={block.startHour}
+                endHour={block.endHour}
+                isToday={wd.iso === todayISO}
+                onSelectDate={onSelectDate}
+              />
+            ))}
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default WeeklyCalendarView;

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

@@ -0,0 +1,184 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  margin: layout.$spacing-05;
+  padding-bottom: layout.$spacing-10;
+  overflow-x: auto;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 6.5rem repeat(7, 1fr);
+  grid-auto-rows: minmax(6rem, 1fr);
+}
+
+.cornerCell {
+  border-top: 1px solid colors.$gray-20;
+  border-bottom: 1px solid colors.$gray-20;
+  border-right: 1px solid colors.$gray-20;
+  border-left: 1px solid colors.$gray-20;
+  background: colors.$white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: layout.$spacing-02;
+}
+
+.cornerLabel {
+  @include type.type-style('label-01');
+  color: colors.$gray-50;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.dayHeader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: layout.$spacing-02;
+  border-top: 1px solid colors.$gray-20;
+  border-bottom: 1px solid colors.$gray-20;
+  border-right: 1px solid colors.$gray-20;
+  background: colors.$white;
+  min-height: 4rem;
+
+  &:first-of-type {
+    border-left: 1px solid colors.$gray-20;
+  }
+}
+
+.dayHeaderToday {
+  background: colors.$blue-10;
+  border-bottom-color: colors.$blue-50;
+}
+
+.dowLabel {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+}
+
+.dayNum {
+  @include type.type-style('heading-03');
+  color: colors.$gray-100;
+  line-height: 1.2;
+}
+
+.dayNumToday {
+  color: colors.$blue-60;
+  background: colors.$blue-20;
+  border-radius: 50%;
+  width: 1.625rem;
+  height: 1.625rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.monthLabel {
+  @include type.type-style('label-01');
+  color: colors.$gray-50;
+}
+
+.timeLabel {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  padding: layout.$spacing-02 layout.$spacing-03 0 0;
+  border-left: 1px solid colors.$gray-20;
+  border-right: 1px solid colors.$gray-20;
+  border-bottom: 1px solid colors.$gray-20;
+  background: colors.$white;
+  @include type.type-style('label-01');
+  color: colors.$gray-60;
+  font-size: 0.6875rem;
+  white-space: nowrap;
+}
+
+.slotCell {
+  border-left: 1px solid colors.$gray-20;
+  border-bottom: 1px solid colors.$gray-20;
+  padding: layout.$spacing-02;
+  min-height: 2.5rem;
+  overflow: hidden;
+  cursor: default;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  background: colors.$white;
+}
+
+.grid > :nth-child(8n) {
+  border-right: 1px solid colors.$gray-20;
+}
+
+.slotCellToday {
+  background: rgba(colors.$blue-10, 0.4);
+}
+
+.slotCellHasAppts {
+  cursor: pointer;
+
+  &:hover {
+    background: colors.$gray-10;
+  }
+}
+
+.previewList {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-01;
+  overflow: hidden;
+  width: 100%;
+}
+
+.previewRow {
+  display: flex;
+  align-items: baseline;
+  gap: layout.$spacing-02;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.previewTime {
+  @include type.type-style('label-01');
+  color: colors.$gray-60;
+  flex-shrink: 0;
+}
+
+.previewName {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-100;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.moreLink {
+  @include type.type-style('label-01');
+  background: none;
+  border: none;
+  color: colors.$blue-60;
+  cursor: pointer;
+  padding: layout.$spacing-01 0 0;
+  border-top: 1px solid colors.$gray-20;
+  text-align: left;
+  width: 100%;
+
+  &:hover {
+    color: colors.$blue-70;
+    text-decoration: underline;
+  }
+}
+
+.emptyWeek {
+  grid-column: 1 / -1;
+  padding: layout.$spacing-05;
+  text-align: center;
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-50;
+}

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

@@ -0,0 +1,306 @@
+import React from 'react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import dayjs from 'dayjs';
+import { SWRConfig } from 'swr';
+import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
+import { AppointmentKind, AppointmentStatus } from './../../types';
+import WeeklyCalendarView from './weekly-calendar-view.component';
+
+const mockOpenmrsFetch = vi.mocked(openmrsFetch);
+
+const june09WeekStart = dayjs('2026-06-09').startOf('week');
+
+function isoDay(offset: number): string {
+  return june09WeekStart.add(offset, 'day').format('YYYY-MM-DD');
+}
+
+function ts(dayOffset: number, hour: number, minute = 0): number {
+  return june09WeekStart.add(dayOffset, 'day').hour(hour).minute(minute).valueOf();
+}
+
+let apptCounter = 0;
+function nextApptUuid(): string {
+  apptCounter += 1;
+  const hex = apptCounter.toString(16).padStart(4, '0');
+  return `7cd38a6d-377e-491b-8284-b04cf8b8${hex}`;
+}
+
+const mockAppointment = (overrides = {}) => ({
+  uuid: nextApptUuid(),
+  appointmentNumber: '0000',
+  appointmentKind: AppointmentKind.SCHEDULED,
+  comments: '',
+  dateAppointmentScheduled: null,
+  endDateTime: null,
+  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: 'Dr James Cook' },
+  providers: [{ uuid: 'f9badd80-ab76-11e2-9e96-0800200c9a66', display: 'Dr James Cook' }],
+  recurring: false,
+  service: {
+    appointmentServiceId: 1,
+    name: 'Outpatient',
+    uuid: 'e2ec9cf0-ec38-4d2b-af6c-59c82fa30b90',
+    description: 'Outpatient service',
+    creatorName: null,
+    startTime: '08:00',
+    endTime: '17:00',
+    maxAppointmentsLimit: null,
+    initialAppointmentStatus: AppointmentStatus.SCHEDULED,
+    durationMins: 15,
+  },
+  startDateTime: ts(0, 9),
+  status: AppointmentStatus.SCHEDULED,
+  voided: false,
+  extensions: {},
+  teleconsultationLink: null,
+  ...overrides,
+});
+
+function mockAppointmentsForDay(dayOffset: number, appointments: ReturnType<typeof mockAppointment>[]) {
+  mockOpenmrsFetch.mockImplementation(async (url: string) => {
+    const match = (url as string).match(/forDate=(\d{4}-\d{2}-\d{2})/);
+    if (!match) return { data: [] } as FetchResponse;
+    const requestedDate = match[1];
+    if (requestedDate === isoDay(dayOffset)) {
+      return { data: appointments } as FetchResponse;
+    }
+    return { data: [] } as FetchResponse;
+  });
+}
+
+function renderWeekly(props = {}) {
+  return render(
+    <SWRConfig
+      value={{
+        dedupingInterval: 0,
+        provider: () => new Map(),
+        revalidateOnFocus: false,
+        shouldRetryOnError: false,
+      }}>
+      <WeeklyCalendarView
+        calKey="gregory"
+        calendarSelectedDate={dayjs('2026-06-09')}
+        onSelectDate={vi.fn()}
+        {...props}
+      />
+    </SWRConfig>,
+  );
+}
+
+describe('WeeklyCalendarView', () => {
+  beforeEach(() => {
+    apptCounter = 0;
+    mockOpenmrsFetch.mockReset();
+    mockOpenmrsFetch.mockResolvedValue({ data: [] } as FetchResponse);
+  });
+
+  it('renders the 7 day column headers', async () => {
+    renderWeekly();
+    await screen.findByText('Sun');
+    await screen.findByText('Mon');
+    await screen.findByText('Tue');
+    await screen.findByText('Wed');
+    await screen.findByText('Thu');
+    await screen.findByText('Fri');
+    await screen.findByText('Sat');
+  });
+
+  it('renders all 4 time-block labels regardless of appointments', async () => {
+    renderWeekly();
+    await screen.findByText('12 AM – 6 AM');
+    await screen.findByText('6 AM – 12 PM');
+    await screen.findByText('12 PM – 6 PM');
+    await screen.findByText('6 PM – 12 AM');
+  });
+
+  it('renders appointment previews with time and patient name', async () => {
+    mockAppointmentsForDay(1, [
+      mockAppointment({
+        startDateTime: ts(1, 9, 14),
+        patient: { identifier: '100GEJ', name: 'Agnes Adams', uuid: '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7' },
+      }),
+      mockAppointment({
+        startDateTime: ts(1, 10, 42),
+        patient: { identifier: '100GEK', name: 'Kevin Brown', uuid: '5a1c0ab4-9b22-4c6f-84e5-b3e2c3fa5d69' },
+      }),
+    ]);
+
+    renderWeekly();
+
+    await screen.findByText('9:14 AM');
+    await screen.findByText('Agnes Adams');
+    await screen.findByText('10:42 AM');
+    await screen.findByText('Kevin Brown');
+  });
+
+  it('shows +N more link when more than 2 appointments in a block', async () => {
+    mockAppointmentsForDay(1, [
+      mockAppointment({
+        startDateTime: ts(1, 9, 0),
+        patient: { identifier: '100GEJ', name: 'Alice', uuid: '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7' },
+      }),
+      mockAppointment({
+        startDateTime: ts(1, 10, 0),
+        patient: { identifier: '100GEK', name: 'Bob', uuid: '5a1c0ab4-9b22-4c6f-84e5-b3e2c3fa5d69' },
+      }),
+      mockAppointment({
+        startDateTime: ts(1, 11, 0),
+        patient: { identifier: '100GEL', name: 'Carol', uuid: 'c73b920a-4f12-4d8e-91c5-6e7d8f3a2b01' },
+      }),
+      mockAppointment({
+        startDateTime: ts(1, 11, 30),
+        patient: { identifier: '100GEM', name: 'Dave', uuid: 'd94e031b-5023-5e9f-a2d6-7f8e9a4b3c12' },
+      }),
+    ]);
+
+    renderWeekly();
+
+    await screen.findByText('Alice');
+    await screen.findByText('Bob');
+
+    expect(screen.getByText('+2 more')).toBeInTheDocument();
+    expect(screen.queryByText('Carol')).not.toBeInTheDocument();
+    expect(screen.queryByText('Dave')).not.toBeInTheDocument();
+  });
+
+  it('does not show +N more link when exactly 2 or fewer appointments', async () => {
+    mockAppointmentsForDay(1, [
+      mockAppointment({
+        startDateTime: ts(1, 9, 0),
+        patient: { identifier: '100GEJ', name: 'Alice', uuid: '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7' },
+      }),
+      mockAppointment({
+        startDateTime: ts(1, 10, 0),
+        patient: { identifier: '100GEK', name: 'Bob', uuid: '5a1c0ab4-9b22-4c6f-84e5-b3e2c3fa5d69' },
+      }),
+    ]);
+
+    renderWeekly();
+
+    await screen.findByText('Alice');
+    await screen.findByText('Bob');
+
+    expect(screen.queryByText(/\+.*more/)).not.toBeInTheDocument();
+  });
+
+  it('calls onSelectDate with correct args when a cell is clicked', async () => {
+    const user = userEvent.setup();
+    const onSelectDate = vi.fn();
+
+    mockAppointmentsForDay(1, [
+      mockAppointment({
+        startDateTime: ts(1, 9, 0),
+        patient: { identifier: '100GEJ', name: 'Alice', uuid: '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7' },
+      }),
+    ]);
+
+    renderWeekly({ onSelectDate });
+
+    await screen.findByText('Alice');
+
+    await user.click(screen.getByRole('button'));
+    expect(onSelectDate).toHaveBeenCalledWith(isoDay(1), 6, 12);
+  });
+
+  it('handles Enter key on a cell with appointments', async () => {
+    const user = userEvent.setup();
+    const onSelectDate = vi.fn();
+
+    mockAppointmentsForDay(1, [
+      mockAppointment({
+        startDateTime: ts(1, 9, 0),
+        patient: { identifier: '100GEJ', name: 'Alice', uuid: '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7' },
+      }),
+    ]);
+
+    renderWeekly({ onSelectDate });
+
+    await screen.findByText('Alice');
+
+    screen.getByRole('button').focus();
+    await user.keyboard('{Enter}');
+    expect(onSelectDate).toHaveBeenCalledWith(isoDay(1), 6, 12);
+  });
+
+  it('handles Space key on a cell with appointments', async () => {
+    const user = userEvent.setup();
+    const onSelectDate = vi.fn();
+
+    mockAppointmentsForDay(1, [
+      mockAppointment({
+        startDateTime: ts(1, 9, 0),
+        patient: { identifier: '100GEJ', name: 'Alice', uuid: '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7' },
+      }),
+    ]);
+
+    renderWeekly({ onSelectDate });
+
+    await screen.findByText('Alice');
+
+    screen.getByRole('button').focus();
+    await user.keyboard(' ');
+    expect(onSelectDate).toHaveBeenCalledWith(isoDay(1), 6, 12);
+  });
+
+  it('calls onSelectDate when +N more link is clicked', async () => {
+    const user = userEvent.setup();
+    const onSelectDate = vi.fn();
+
+    mockAppointmentsForDay(1, [
+      mockAppointment({ startDateTime: ts(1, 9, 0) }),
+      mockAppointment({ startDateTime: ts(1, 10, 0) }),
+      mockAppointment({ startDateTime: ts(1, 11, 0) }),
+    ]);
+
+    renderWeekly({ onSelectDate });
+
+    await screen.findByText('+1 more');
+
+    await user.click(screen.getByText('+1 more'));
+    expect(onSelectDate).toHaveBeenCalledWith(isoDay(1), 6, 12);
+  });
+
+  it('renders empty cells without content for blocks with no appointments', async () => {
+    mockAppointmentsForDay(1, [
+      mockAppointment({
+        startDateTime: ts(1, 9, 0),
+        patient: { identifier: '100GEJ', name: 'Alice', uuid: '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7' },
+      }),
+    ]);
+
+    renderWeekly();
+
+    await screen.findByText('Alice');
+
+    expect(screen.getAllByText('Alice').length).toBe(1);
+  });
+
+  it('renders without crashing (smoke test)', async () => {
+    mockAppointmentsForDay(0, [
+      mockAppointment({
+        startDateTime: ts(0, 9, 0),
+        patient: { identifier: '100GEJ', name: 'John Wilson', uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e' },
+      }),
+    ]);
+
+    renderWeekly();
+
+    await screen.findByText('John Wilson');
+  });
+
+  it('supports different calendar keys without crashing', async () => {
+    mockAppointmentsForDay(0, [
+      mockAppointment({
+        startDateTime: ts(0, 9, 0),
+        patient: { identifier: '100GEJ', name: 'John Wilson', uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e' },
+      }),
+    ]);
+
+    renderWeekly({ calKey: 'ethiopic' });
+
+    await screen.findByText('John Wilson');
+  });
+});

package/src/calendar/weekly/weekly-slot-cell.component.tsx

@@ -0,0 +1,88 @@
+import React, { useMemo } from 'react';
+import { type Appointment } from './../../types';
+import { formatAMPM } from './../../helpers/functions';
+import styles from './weekly-calendar-view.scss';
+
+interface WeeklySlotCellProps {
+  appointments: ReadonlyArray<Appointment>;
+  isoDate: string;
+  startHour: number;
+  endHour: number;
+  isToday: boolean;
+  onSelectDate: (isoDate: string, startHour: number, endHour: number) => void;
+}
+
+const WeeklySlotCell: React.FC<WeeklySlotCellProps> = ({
+  appointments,
+  isoDate,
+  startHour,
+  endHour,
+  isToday,
+  onSelectDate,
+}) => {
+  const blockAppointments = useMemo(() => {
+    return appointments
+      .filter((a) => {
+        if (a.startDateTime == null) return false;
+        const h = new Date(a.startDateTime).getHours();
+        return h >= startHour && h < endHour;
+      })
+      .sort((a, b) => {
+        if (a.startDateTime == null || b.startDateTime == null) return 0;
+        return new Date(a.startDateTime).getTime() - new Date(b.startDateTime).getTime();
+      });
+  }, [appointments, startHour, endHour]);
+
+  const total = blockAppointments.length;
+  const hasAppts = total > 0;
+
+  if (!hasAppts) {
+    return <div data-testid="slot-cell" className={`${styles.slotCell} ${isToday ? styles.slotCellToday : ''}`} />;
+  }
+
+  const visible = blockAppointments.slice(0, 2);
+  const overflow = total - 2;
+
+  return (
+    <div
+      data-testid="slot-cell"
+      className={`${styles.slotCell} ${isToday ? styles.slotCellToday : ''} ${styles.slotCellHasAppts}`}
+      role="button"
+      tabIndex={0}
+      onClick={() => onSelectDate(isoDate, startHour, endHour)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onSelectDate(isoDate, startHour, endHour);
+        }
+      }}>
+      <div className={styles.previewList}>
+        {visible.map((a) => {
+          const time = a.startDateTime != null ? formatAMPM(new Date(a.startDateTime)) : '—';
+          const name = a.patient?.name ?? '—';
+          return (
+            <div key={a.uuid} className={styles.previewRow}>
+              <span className={styles.previewTime}>{time}</span>
+              <span className={styles.previewName} title={name}>
+                {name}
+              </span>
+            </div>
+          );
+        })}
+        {overflow > 0 && (
+          <button
+            type="button"
+            className={styles.moreLink}
+            onClick={(e) => {
+              e.stopPropagation();
+              onSelectDate(isoDate, startHour, endHour);
+            }}>
+            +{overflow} more
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default WeeklySlotCell;

package/src/calendar/weekly/weekly-slot-cell.test.tsx

@@ -0,0 +1,419 @@
+import React from 'react';
+import { vi, describe, it, expect } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { type Appointment, AppointmentKind, AppointmentStatus } from './../../types';
+import WeeklySlotCell from './weekly-slot-cell.component';
+
+let apptCounter = 0;
+function nextApptUuid(): string {
+  apptCounter += 1;
+  const hex = apptCounter.toString(16).padStart(4, '0');
+  return `7cd38a6d-377e-491b-8284-b04cf8b8${hex}`;
+}
+
+const baseAppointment: Appointment = {
+  uuid: '7cd38a6d-377e-491b-8284-b04cf8b8c6d8',
+  appointmentKind: AppointmentKind.SCHEDULED,
+  appointmentNumber: '0000',
+  comments: '',
+  dateAppointmentScheduled: null,
+  endDateTime: null,
+  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: 'Dr James Cook' },
+  providers: [{ uuid: 'f9badd80-ab76-11e2-9e96-0800200c9a66', display: 'Dr James Cook' }],
+  recurring: false,
+  service: {
+    appointmentServiceId: 1,
+    name: 'Outpatient',
+    uuid: 'e2ec9cf0-ec38-4d2b-af6c-59c82fa30b90',
+    description: 'Outpatient service',
+    creatorName: null,
+    startTime: '08:00',
+    endTime: '17:00',
+    maxAppointmentsLimit: null,
+    initialAppointmentStatus: AppointmentStatus.SCHEDULED,
+    durationMins: 15,
+  },
+  startDateTime: new Date('2026-06-09T09:00:00').getTime(),
+  status: AppointmentStatus.SCHEDULED,
+  voided: false,
+  extensions: {},
+  teleconsultationLink: null,
+};
+
+function makeAppt(overrides: Partial<Appointment> = {}): Appointment {
+  return { ...baseAppointment, uuid: nextApptUuid(), ...overrides };
+}
+
+function renderCell(props: Partial<React.ComponentProps<typeof WeeklySlotCell>> = {}) {
+  return render(
+    <WeeklySlotCell
+      appointments={props.appointments ?? []}
+      isoDate={props.isoDate ?? '2026-06-09'}
+      startHour={props.startHour ?? 6}
+      endHour={props.endHour ?? 12}
+      isToday={props.isToday ?? false}
+      onSelectDate={props.onSelectDate ?? vi.fn()}
+    />,
+  );
+}
+
+describe('WeeklySlotCell — empty states', () => {
+  it('renders an empty cell when appointments array is empty', () => {
+    renderCell({ appointments: [] });
+    const cell = screen.getByTestId('slot-cell');
+    expect(cell).toHaveClass('slotCell');
+    expect(cell).not.toHaveClass('slotCellHasAppts');
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    expect(screen.queryByText(/.+/)).not.toBeInTheDocument();
+  });
+
+  it('renders empty when no appointments fall in the time block', () => {
+    const appt = makeAppt({ startDateTime: new Date('2026-06-09T14:00:00').getTime() });
+    renderCell({ appointments: [appt], startHour: 6, endHour: 12 });
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    expect(screen.queryByText(/.+/)).not.toBeInTheDocument();
+  });
+
+  it('adds today class to empty cell when isToday is true', () => {
+    renderCell({ isToday: true, appointments: [] });
+    expect(screen.getByTestId('slot-cell')).toHaveClass('slotCellToday');
+  });
+
+  it('does not add today class when isToday is false', () => {
+    renderCell({ isToday: false, appointments: [] });
+    expect(screen.getByTestId('slot-cell')).not.toHaveClass('slotCellToday');
+  });
+});
+
+describe('WeeklySlotCell — preview rendering', () => {
+  it('renders time and patient name for a single appointment', () => {
+    const appt = makeAppt({
+      startDateTime: new Date('2026-06-09T09:14:00').getTime(),
+      patient: { identifier: 'P1', name: 'Alice', uuid: '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7' },
+    });
+    renderCell({ appointments: [appt], startHour: 6, endHour: 12 });
+
+    expect(screen.getByText('9:14 AM')).toBeInTheDocument();
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+  });
+
+  it('renders two appointments when exactly 2 fall in the block', () => {
+    const appts = [
+      makeAppt({
+        startDateTime: new Date('2026-06-09T09:00:00').getTime(),
+        patient: { identifier: 'P1', name: 'Alice', uuid: '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7' },
+      }),
+      makeAppt({
+        startDateTime: new Date('2026-06-09T10:00:00').getTime(),
+        patient: { identifier: 'P2', name: 'Bob', uuid: '5a1c0ab4-9b22-4c6f-84e5-b3e2c3fa5d69' },
+      }),
+    ];
+    renderCell({ appointments: appts, startHour: 6, endHour: 12 });
+
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+    expect(screen.queryByText(/\+.*more/)).not.toBeInTheDocument();
+  });
+
+  it('shows only first 2 appointments with +N more for overflow', () => {
+    const appts = [
+      makeAppt({
+        startDateTime: new Date('2026-06-09T09:00:00').getTime(),
+        patient: { identifier: 'P1', name: 'Alice', uuid: '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7' },
+      }),
+      makeAppt({
+        startDateTime: new Date('2026-06-09T10:00:00').getTime(),
+        patient: { identifier: 'P2', name: 'Bob', uuid: '5a1c0ab4-9b22-4c6f-84e5-b3e2c3fa5d69' },
+      }),
+      makeAppt({
+        startDateTime: new Date('2026-06-09T11:00:00').getTime(),
+        patient: { identifier: 'P3', name: 'Carol', uuid: 'c73b920a-4f12-4d8e-91c5-6e7d8f3a2b01' },
+      }),
+      makeAppt({
+        startDateTime: new Date('2026-06-09T11:30:00').getTime(),
+        patient: { identifier: 'P4', name: 'Dave', uuid: 'd94e031b-5023-5e9f-a2d6-7f8e9a4b3c12' },
+      }),
+      makeAppt({
+        startDateTime: new Date('2026-06-09T11:45:00').getTime(),
+        patient: { identifier: 'P5', name: 'Eve', uuid: 'e05f142c-6134-6fa0-b3e7-809fab5c4d23' },
+      }),
+    ];
+    renderCell({ appointments: appts, startHour: 6, endHour: 12 });
+
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+    expect(screen.getByText('+3 more')).toBeInTheDocument();
+    expect(screen.queryByText('Carol')).not.toBeInTheDocument();
+    expect(screen.queryByText('Dave')).not.toBeInTheDocument();
+    expect(screen.queryByText('Eve')).not.toBeInTheDocument();
+  });
+
+  it('renders +1 more when exactly 3 appointments', () => {
+    const appts = [
+      makeAppt({
+        startDateTime: new Date('2026-06-09T09:00:00').getTime(),
+        patient: { identifier: 'P1', name: 'A', uuid: '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7' },
+      }),
+      makeAppt({
+        startDateTime: new Date('2026-06-09T10:00:00').getTime(),
+        patient: { identifier: 'P2', name: 'B', uuid: '5a1c0ab4-9b22-4c6f-84e5-b3e2c3fa5d69' },
+      }),
+      makeAppt({
+        startDateTime: new Date('2026-06-09T11:00:00').getTime(),
+        patient: { identifier: 'P3', name: 'C', uuid: 'c73b920a-4f12-4d8e-91c5-6e7d8f3a2b01' },
+      }),
+    ];
+    renderCell({ appointments: appts, startHour: 6, endHour: 12 });
+
+    expect(screen.getByText('+1 more')).toBeInTheDocument();
+  });
+
+  it('renders +2 more when exactly 4 appointments', () => {
+    const patientUuids = [
+      '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7',
+      '5a1c0ab4-9b22-4c6f-84e5-b3e2c3fa5d69',
+      'c73b920a-4f12-4d8e-91c5-6e7d8f3a2b01',
+      'd94e031b-5023-5e9f-a2d6-7f8e9a4b3c12',
+    ];
+    const appts = Array.from({ length: 4 }, (_, i) =>
+      makeAppt({
+        startDateTime: new Date(`2026-06-09T${String(7 + i).padStart(2, '0')}:00:00`).getTime(),
+        patient: { identifier: `P${i}`, name: `Patient${i}`, uuid: patientUuids[i] },
+      }),
+    );
+    renderCell({ appointments: appts, startHour: 6, endHour: 12 });
+
+    expect(screen.getByText('+2 more')).toBeInTheDocument();
+  });
+
+  it('sorts appointments by startDateTime ascending', () => {
+    const appts = [
+      makeAppt({
+        startDateTime: new Date('2026-06-09T11:00:00').getTime(),
+        patient: { identifier: 'P3', name: 'Third', uuid: 'c73b920a-4f12-4d8e-91c5-6e7d8f3a2b01' },
+      }),
+      makeAppt({
+        startDateTime: new Date('2026-06-09T09:00:00').getTime(),
+        patient: { identifier: 'P1', name: 'First', uuid: '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7' },
+      }),
+      makeAppt({
+        startDateTime: new Date('2026-06-09T10:00:00').getTime(),
+        patient: { identifier: 'P2', name: 'Second', uuid: '5a1c0ab4-9b22-4c6f-84e5-b3e2c3fa5d69' },
+      }),
+    ];
+    renderCell({ appointments: appts, startHour: 6, endHour: 12 });
+
+    const names = screen.getAllByText(/^(First|Second)$/);
+    expect(names.map((el) => el.textContent)).toEqual(['First', 'Second']);
+    expect(screen.getByText('+1 more')).toBeInTheDocument();
+  });
+
+  it('renders "—" for appointment with missing patient name', () => {
+    const appt = makeAppt({
+      startDateTime: new Date('2026-06-09T09:00:00').getTime(),
+      patient: { identifier: 'P1', name: null as unknown as string, uuid: '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7' },
+    });
+    renderCell({ appointments: [appt], startHour: 6, endHour: 12 });
+
+    expect(screen.getByText('9:00 AM')).toBeInTheDocument();
+    expect(screen.getByText('—')).toBeInTheDocument();
+  });
+
+  it('renders PM times correctly', () => {
+    const appt = makeAppt({
+      startDateTime: new Date('2026-06-09T14:30:00').getTime(),
+      patient: { identifier: 'P1', name: 'Alice', uuid: '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7' },
+    });
+    renderCell({ appointments: [appt], startHour: 12, endHour: 18 });
+
+    expect(screen.getByText('2:30 PM')).toBeInTheDocument();
+  });
+
+  it('renders midnight as 12:00 AM', () => {
+    const appt = makeAppt({
+      startDateTime: new Date('2026-06-09T00:30:00').getTime(),
+      patient: { identifier: 'P1', name: 'Late', uuid: '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7' },
+    });
+    renderCell({ appointments: [appt], startHour: 0, endHour: 6 });
+
+    expect(screen.getByText('12:30 AM')).toBeInTheDocument();
+  });
+
+  it('renders noon as 12:00 PM', () => {
+    const appt = makeAppt({
+      startDateTime: new Date('2026-06-09T12:00:00').getTime(),
+      patient: { identifier: 'P1', name: 'Noon', uuid: '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7' },
+    });
+    renderCell({ appointments: [appt], startHour: 12, endHour: 18 });
+
+    expect(screen.getByText('12:00 PM')).toBeInTheDocument();
+  });
+});
+
+describe('WeeklySlotCell — interactions', () => {
+  it('calls onSelectDate with correct args when cell is clicked', () => {
+    const onSelectDate = vi.fn();
+    const appt = makeAppt({
+      startDateTime: new Date('2026-06-09T09:00:00').getTime(),
+      patient: { identifier: 'P1', name: 'Alice', uuid: '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7' },
+    });
+    renderCell({
+      appointments: [appt],
+      isoDate: '2026-06-09',
+      startHour: 6,
+      endHour: 12,
+      onSelectDate,
+    });
+
+    fireEvent.click(screen.getByRole('button'));
+
+    expect(onSelectDate).toHaveBeenCalledTimes(1);
+    expect(onSelectDate).toHaveBeenCalledWith('2026-06-09', 6, 12);
+  });
+
+  it('fires onSelectDate on Enter key', () => {
+    const onSelectDate = vi.fn();
+    const appt = makeAppt({ startDateTime: new Date('2026-06-09T09:00:00').getTime() });
+    renderCell({ appointments: [appt], isoDate: '2026-06-09', startHour: 6, endHour: 12, onSelectDate });
+
+    fireEvent.keyDown(screen.getByRole('button'), { key: 'Enter' });
+
+    expect(onSelectDate).toHaveBeenCalledWith('2026-06-09', 6, 12);
+  });
+
+  it('fires onSelectDate on Space key', () => {
+    const onSelectDate = vi.fn();
+    const appt = makeAppt({ startDateTime: new Date('2026-06-09T09:00:00').getTime() });
+    renderCell({ appointments: [appt], isoDate: '2026-06-09', startHour: 6, endHour: 12, onSelectDate });
+
+    fireEvent.keyDown(screen.getByRole('button'), { key: ' ' });
+
+    expect(onSelectDate).toHaveBeenCalledWith('2026-06-09', 6, 12);
+  });
+
+  it('ignores non-Enter/Space keys', () => {
+    const onSelectDate = vi.fn();
+    const appt = makeAppt({ startDateTime: new Date('2026-06-09T09:00:00').getTime() });
+    renderCell({ appointments: [appt], startHour: 6, endHour: 12, onSelectDate });
+
+    fireEvent.keyDown(screen.getByRole('button'), { key: 'Escape' });
+    fireEvent.keyDown(screen.getByRole('button'), { key: 'Tab' });
+    fireEvent.keyDown(screen.getByRole('button'), { key: 'ArrowDown' });
+
+    expect(onSelectDate).not.toHaveBeenCalled();
+  });
+
+  it('calls onSelectDate when +N more link is clicked', () => {
+    const onSelectDate = vi.fn();
+    const appts = [
+      makeAppt({ startDateTime: new Date('2026-06-09T09:00:00').getTime() }),
+      makeAppt({ startDateTime: new Date('2026-06-09T10:00:00').getTime() }),
+      makeAppt({ startDateTime: new Date('2026-06-09T11:00:00').getTime() }),
+    ];
+    renderCell({ appointments: appts, isoDate: '2026-06-09', startHour: 6, endHour: 12, onSelectDate });
+
+    fireEvent.click(screen.getByText('+1 more'));
+
+    expect(onSelectDate).toHaveBeenCalledWith('2026-06-09', 6, 12);
+  });
+
+  it('+N more click does not trigger parent cell click (stopPropagation)', () => {
+    const onSelectDate = vi.fn();
+    const appts = [
+      makeAppt({ startDateTime: new Date('2026-06-09T09:00:00').getTime() }),
+      makeAppt({ startDateTime: new Date('2026-06-09T10:00:00').getTime() }),
+      makeAppt({ startDateTime: new Date('2026-06-09T11:00:00').getTime() }),
+    ];
+    renderCell({ appointments: appts, startHour: 6, endHour: 12, onSelectDate });
+
+    fireEvent.click(screen.getByText('+1 more'));
+
+    expect(onSelectDate).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('WeeklySlotCell — time-block filtering', () => {
+  it('includes appointment at the start hour boundary (inclusive)', () => {
+    const appt = makeAppt({
+      startDateTime: new Date('2026-06-09T06:00:00').getTime(),
+      patient: { identifier: 'P1', name: 'Edge', uuid: '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7' },
+    });
+    renderCell({ appointments: [appt], startHour: 6, endHour: 12 });
+
+    expect(screen.getByText('Edge')).toBeInTheDocument();
+  });
+
+  it('excludes appointment at the end hour boundary (exclusive)', () => {
+    const appt = makeAppt({
+      startDateTime: new Date('2026-06-09T12:00:00').getTime(),
+      patient: { identifier: 'P1', name: 'Noon', uuid: '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7' },
+    });
+    renderCell({ appointments: [appt], startHour: 6, endHour: 12 });
+
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    expect(screen.queryByText('Noon')).not.toBeInTheDocument();
+  });
+
+  it('excludes appointments with null startDateTime from the block', () => {
+    const appt = makeAppt({
+      startDateTime: null,
+      patient: { identifier: 'P1', name: 'NullTime', uuid: '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7' },
+    });
+    renderCell({ appointments: [appt], startHour: 6, endHour: 12 });
+
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    expect(screen.queryByText('NullTime')).not.toBeInTheDocument();
+  });
+
+  it('filters across all 4 time blocks correctly', () => {
+    const appts = [
+      makeAppt({
+        startDateTime: new Date('2026-06-09T03:00:00').getTime(),
+        patient: { identifier: 'P0', name: '12-6 AM', uuid: 'a16f253d-7241-7fb1-c4f8-91afbc6d5e34' },
+      }),
+      makeAppt({
+        startDateTime: new Date('2026-06-09T09:00:00').getTime(),
+        patient: { identifier: 'P1', name: '6-12 AM', uuid: '3d13f51a-1eaf-4b62-b329-4c21cf95b9a7' },
+      }),
+      makeAppt({
+        startDateTime: new Date('2026-06-09T15:00:00').getTime(),
+        patient: { identifier: 'P2', name: '12-6 PM', uuid: '5a1c0ab4-9b22-4c6f-84e5-b3e2c3fa5d69' },
+      }),
+      makeAppt({
+        startDateTime: new Date('2026-06-09T21:00:00').getTime(),
+        patient: { identifier: 'P3', name: '6-12 PM', uuid: 'c73b920a-4f12-4d8e-91c5-6e7d8f3a2b01' },
+      }),
+    ];
+
+    renderCell({ appointments: appts, startHour: 6, endHour: 12 });
+
+    expect(screen.getByText('6-12 AM')).toBeInTheDocument();
+    expect(screen.queryByText('12-6 AM')).not.toBeInTheDocument();
+    expect(screen.queryByText('12-6 PM')).not.toBeInTheDocument();
+    expect(screen.queryByText('6-12 PM')).not.toBeInTheDocument();
+  });
+});
+
+describe('WeeklySlotCell — accessibility', () => {
+  it('has role="button" when appointments exist', () => {
+    const appt = makeAppt({ startDateTime: new Date('2026-06-09T09:00:00').getTime() });
+    renderCell({ appointments: [appt], startHour: 6, endHour: 12 });
+
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('has tabIndex={0} when appointments exist', () => {
+    const appt = makeAppt({ startDateTime: new Date('2026-06-09T09:00:00').getTime() });
+    renderCell({ appointments: [appt], startHour: 6, endHour: 12 });
+
+    expect(screen.getByRole('button')).toHaveAttribute('tabindex', '0');
+  });
+
+  it('does not have role="button" when empty', () => {
+    renderCell({ appointments: [], startHour: 6, endHour: 12 });
+
+    expect(screen.getByTestId('slot-cell').getAttribute('role')).not.toBe('button');
+  });
+});