feat: Refactor ScheduleModal to support interval scheduling with date input and deadline toggle

- Updated ChoreSchedule model to include anchor_date and interval_has_deadline. - Refactored interval scheduling logic in scheduleUtils to use anchor_date. - Introduced DateInputField component for selecting anchor dates in ScheduleModal. - Enhanced ScheduleModal to include a stepper for interval days and a toggle for deadline. - Updated tests for ScheduleModal and scheduleUtils to reflect new interval scheduling logic. - Added DateInputField tests to ensure proper functionality and prop handling.
2026-02-26 15:16:46 -05:00
parent 2403daa3f7
commit a197f8e206
12 changed files with 797 additions and 172 deletions
--- a/frontend/vue-app/src/tests/ScheduleModal.spec.ts
+++ b/frontend/vue-app/src/tests/ScheduleModal.spec.ts
@@ -8,9 +8,11 @@ import type { ChildTask, ChoreSchedule } from '../common/models'
 // Mocks
 // ---------------------------------------------------------------------------
 const mockSetChoreSchedule = vi.fn()
+const mockDeleteChoreSchedule = vi.fn()

 vi.mock('@/common/api', () => ({
  setChoreSchedule: (...args: unknown[]) => mockSetChoreSchedule(...args),
+  deleteChoreSchedule: (...args: unknown[]) => mockDeleteChoreSchedule(...args),
  parseErrorResponse: vi.fn().mockResolvedValue({ msg: 'error', code: 'ERR' }),
 }))

@@ -19,11 +21,17 @@ const ModalDialogStub = {
  template: '<div><slot /></div>',
  props: ['imageUrl', 'title', 'subtitle'],
 }
-const TimeSelectorStub = {
-  template: '<div class="time-selector-stub" />',
+const TimePickerPopoverStub = {
+  template: '<div class="time-picker-popover-stub" />',
  props: ['modelValue'],
  emits: ['update:modelValue'],
 }
+const DateInputFieldStub = {
+  template:
+    '<input class="date-input-field-stub" type="date" :value="modelValue" :min="min" @change="$emit(\'update:modelValue\', $event.target.value)" />',
+  props: ['modelValue', 'min'],
+  emits: ['update:modelValue'],
+}

 // ---------------------------------------------------------------------------
 // Helpers
@@ -35,16 +43,21 @@ function mountModal(schedule: ChoreSchedule | null = null) {
  return mount(ScheduleModal, {
    props: { task: TASK, childId: CHILD_ID, schedule },
    global: {
-      stubs: { ModalDialog: ModalDialogStub, TimeSelector: TimeSelectorStub },
+      stubs: {
+        ModalDialog: ModalDialogStub,
+        TimePickerPopover: TimePickerPopoverStub,
+        DateInputField: DateInputFieldStub,
+      },
    },
  })
 }

 beforeEach(() => {
  mockSetChoreSchedule.mockReset()
+  mockDeleteChoreSchedule.mockReset()
  mockSetChoreSchedule.mockResolvedValue({ ok: true })
+  mockDeleteChoreSchedule.mockResolvedValue({ ok: true })
 })
-
 // ---------------------------------------------------------------------------
 // Mode toggle
 // ---------------------------------------------------------------------------
@@ -89,57 +102,59 @@ describe('ScheduleModal mode toggle', () => {
 })

 // ---------------------------------------------------------------------------
-// Specific Days form — check/uncheck days
+// Specific Days form — chip toggles
 // ---------------------------------------------------------------------------
 describe('ScheduleModal Specific Days form', () => {
-  it('renders 7 day rows', () => {
+  it('renders 7 day chips', () => {
    const w = mountModal()
-    expect(w.findAll('.day-row').length).toBe(7)
+    expect(w.findAll('.chip').length).toBe(7)
  })

-  it('no days are checked by default (no existing schedule)', () => {
+  it('no chips are active by default (no existing schedule)', () => {
    const w = mountModal()
-    const checkboxes = w.findAll<HTMLInputElement>('input[type="checkbox"]')
-    expect(checkboxes.every((cb) => !(cb.element as HTMLInputElement).checked)).toBe(true)
+    const chips = w.findAll('.chip')
+    expect(chips.every((c) => !c.classes().includes('active'))).toBe(true)
  })

-  it('checking a day reveals a TimeSelector for that day', async () => {
+  it('clicking a chip makes it active', async () => {
    const w = mountModal()
-    expect(w.findAll('.time-selector-stub').length).toBe(0)
-    const checkboxes = w.findAll('input[type="checkbox"]')
-    await checkboxes[1].trigger('change') // Monday (idx 1)
-    await nextTick()
-    expect(w.findAll('.time-selector-stub').length).toBe(1)
+    const chips = w.findAll('.chip')
+    await chips[1].trigger('click') // Monday
+    expect(chips[1].classes()).toContain('active')
  })

-  it('unchecking a day removes its TimeSelector', async () => {
+  it('clicking an active chip deactivates it', async () => {
    const w = mountModal()
-    const checkboxes = w.findAll('input[type="checkbox"]')
-    await checkboxes[0].trigger('change') // check Sunday
-    await nextTick()
-    expect(w.findAll('.time-selector-stub').length).toBe(1)
-    await checkboxes[0].trigger('change') // uncheck Sunday
-    await nextTick()
-    expect(w.findAll('.time-selector-stub').length).toBe(0)
+    const chips = w.findAll('.chip')
+    await chips[1].trigger('click') // activate
+    await chips[1].trigger('click') // deactivate
+    expect(chips[1].classes()).not.toContain('active')
  })

-  it('Save is disabled when no days checked (days mode)', () => {
+  it('selecting a chip shows the default-deadline-row', async () => {
+    const w = mountModal()
+    expect(w.find('.default-deadline-row').exists()).toBe(false)
+    await w.findAll('.chip')[0].trigger('click')
+    expect(w.find('.default-deadline-row').exists()).toBe(true)
+  })
+
+  it('Save is disabled when no days selected (isDirty is false)', () => {
    const w = mountModal()
    const saveBtn = w.find('.btn-primary')
    expect((saveBtn.element as HTMLButtonElement).disabled).toBe(true)
  })

-  it('Save is enabled after checking at least one day', async () => {
+  it('Save is enabled after selecting at least one day', async () => {
    const w = mountModal()
-    const checkboxes = w.findAll('input[type="checkbox"]')
-    await checkboxes[2].trigger('change') // Tuesday
+    await w.findAll('.chip')[2].trigger('click') // Tuesday
    await nextTick()
    const saveBtn = w.find('.btn-primary')
    expect((saveBtn.element as HTMLButtonElement).disabled).toBe(false)
  })

-  it('pre-populates checked days from an existing schedule', () => {
+  it('pre-populates active chips from an existing schedule', () => {
    const existing: ChoreSchedule = {
+      id: 's1',
      child_id: CHILD_ID,
      task_id: TASK.id,
      mode: 'days',
@@ -147,14 +162,20 @@ describe('ScheduleModal Specific Days form', () => {
        { day: 1, hour: 8, minute: 0 },
        { day: 4, hour: 9, minute: 30 },
      ],
-      interval_days: 2,
-      anchor_weekday: 0,
+      default_hour: 8,
+      default_minute: 0,
+      interval_days: 1,
+      anchor_date: '',
+      interval_has_deadline: true,
      interval_hour: 0,
      interval_minute: 0,
+      created_at: 0,
+      updated_at: 0,
    }
    const w = mountModal(existing)
-    // Two TimeSelectorStubs should already be visible
-    expect(w.findAll('.time-selector-stub').length).toBe(2)
+    const chips = w.findAll('.chip')
+    expect(chips[1].classes()).toContain('active') // Monday idx 1
+    expect(chips[4].classes()).toContain('active') // Thursday idx 4
  })
 })

@@ -164,9 +185,8 @@ describe('ScheduleModal Specific Days form', () => {
 describe('ScheduleModal save — days mode', () => {
  it('calls setChoreSchedule with correct days payload', async () => {
    const w = mountModal()
-    // Check Monday (idx 1)
-    const checkboxes = w.findAll('input[type="checkbox"]')
-    await checkboxes[1].trigger('change')
+    // Select Monday (chip idx 1)
+    await w.findAll('.chip')[1].trigger('click')
    await nextTick()

    await w.find('.btn-primary').trigger('click')
@@ -177,20 +197,45 @@ describe('ScheduleModal save — days mode', () => {
      TASK.id,
      expect.objectContaining({
        mode: 'days',
-        day_configs: [{ day: 1, hour: 8, minute: 0 }],
+        day_configs: [{ day: 1, hour: expect.any(Number), minute: expect.any(Number) }],
      }),
    )
  })

+  it('calls deleteChoreSchedule when 0 days selected on an existing schedule', async () => {
+    const existing: ChoreSchedule = {
+      id: 's1',
+      child_id: CHILD_ID,
+      task_id: TASK.id,
+      mode: 'days',
+      day_configs: [{ day: 2, hour: 8, minute: 0 }],
+      default_hour: 8,
+      default_minute: 0,
+      interval_days: 1,
+      anchor_date: '',
+      interval_has_deadline: true,
+      interval_hour: 0,
+      interval_minute: 0,
+      created_at: 0,
+      updated_at: 0,
+    }
+    const w = mountModal(existing)
+    await w.findAll('.chip')[2].trigger('click') // deselect Wednesday
+    await nextTick()
+    await w.find('.btn-primary').trigger('click')
+    await nextTick()
+    await nextTick()
+    expect(mockDeleteChoreSchedule).toHaveBeenCalledWith(CHILD_ID, TASK.id)
+  })
+
  it('emits "saved" after successful save', async () => {
    const w = mountModal()
-    const checkboxes = w.findAll('input[type="checkbox"]')
-    await checkboxes[0].trigger('change') // check Sunday
+    await w.findAll('.chip')[0].trigger('click') // Sunday
    await nextTick()

    await w.find('.btn-primary').trigger('click')
    await nextTick()
-    await nextTick() // await the async save()
+    await nextTick()

    expect(w.emitted('saved')).toBeTruthy()
  })
@@ -198,8 +243,7 @@ describe('ScheduleModal save — days mode', () => {
  it('does not emit "saved" on API error', async () => {
    mockSetChoreSchedule.mockResolvedValue({ ok: false })
    const w = mountModal()
-    const checkboxes = w.findAll('input[type="checkbox"]')
-    await checkboxes[0].trigger('change')
+    await w.findAll('.chip')[0].trigger('click')
    await nextTick()

    await w.find('.btn-primary').trigger('click')
@@ -210,22 +254,138 @@ describe('ScheduleModal save — days mode', () => {
  })
 })

+// ---------------------------------------------------------------------------
+// Interval form — stepper
+// ---------------------------------------------------------------------------
+describe('ScheduleModal interval form — stepper', () => {
+  async function openInterval(schedule: ChoreSchedule | null = null) {
+    const w = mountModal(schedule)
+    await w.findAll('.mode-btn')[1].trigger('click')
+    return w
+  }
+
+  it('default stepper value is 1', async () => {
+    const w = await openInterval()
+    expect(w.find('.stepper-value').text()).toBe('1')
+  })
+
+  it('increment button increases the value', async () => {
+    const w = await openInterval()
+    await w.findAll('.stepper-btn')[1].trigger('click')
+    expect(w.find('.stepper-value').text()).toBe('2')
+  })
+
+  it('decrement button is disabled when value is 1', async () => {
+    const w = await openInterval()
+    const decrementBtn = w.findAll('.stepper-btn')[0]
+    expect((decrementBtn.element as HTMLButtonElement).disabled).toBe(true)
+  })
+
+  it('increment button is disabled when value is 7', async () => {
+    const w = await openInterval()
+    const plusBtn = w.findAll('.stepper-btn')[1]
+    for (let i = 0; i < 6; i++) await plusBtn.trigger('click')
+    expect((plusBtn.element as HTMLButtonElement).disabled).toBe(true)
+  })
+
+  it('value does not go above 7', async () => {
+    const w = await openInterval()
+    const plusBtn = w.findAll('.stepper-btn')[1]
+    for (let i = 0; i < 10; i++) await plusBtn.trigger('click')
+    expect(w.find('.stepper-value').text()).toBe('7')
+  })
+
+  it('pre-populates interval_days from existing schedule', async () => {
+    const existing: ChoreSchedule = {
+      id: 's2',
+      child_id: CHILD_ID,
+      task_id: TASK.id,
+      mode: 'interval',
+      day_configs: [],
+      interval_days: 4,
+      anchor_date: '2026-03-10',
+      interval_has_deadline: true,
+      interval_hour: 0,
+      interval_minute: 0,
+      created_at: 0,
+      updated_at: 0,
+    }
+    const w = await openInterval(existing)
+    expect(w.find('.stepper-value').text()).toBe('4')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Interval form — Anytime toggle
+// ---------------------------------------------------------------------------
+describe('ScheduleModal interval form — Anytime toggle', () => {
+  async function openInterval() {
+    const w = mountModal()
+    await w.findAll('.mode-btn')[1].trigger('click')
+    return w
+  }
+
+  it('shows TimePickerPopover by default (hasDeadline=true)', async () => {
+    const w = await openInterval()
+    expect(w.find('.time-picker-popover-stub').exists()).toBe(true)
+    expect(w.find('.anytime-label').exists()).toBe(false)
+  })
+
+  it('shows "Clear (Anytime)" link by default', async () => {
+    const w = await openInterval()
+    const link = w.find('.interval-time-row .link-btn')
+    expect(link.text()).toContain('Clear')
+  })
+
+  it('clicking "Clear (Anytime)" hides TimePickerPopover and shows anytime label', async () => {
+    const w = await openInterval()
+    await w.find('.interval-time-row .link-btn').trigger('click')
+    await nextTick()
+    expect(w.find('.time-picker-popover-stub').exists()).toBe(false)
+    expect(w.find('.anytime-label').exists()).toBe(true)
+  })
+
+  it('clicking "Set deadline" after clearing restores TimePickerPopover', async () => {
+    const w = await openInterval()
+    await w.find('.interval-time-row .link-btn').trigger('click')
+    await nextTick()
+    await w.find('.interval-time-row .link-btn').trigger('click')
+    await nextTick()
+    expect(w.find('.time-picker-popover-stub').exists()).toBe(true)
+    expect(w.find('.anytime-label').exists()).toBe(false)
+  })
+
+  it('pre-populates interval_has_deadline=false from existing schedule', () => {
+    const existing: ChoreSchedule = {
+      id: 's3',
+      child_id: CHILD_ID,
+      task_id: TASK.id,
+      mode: 'interval',
+      day_configs: [],
+      interval_days: 2,
+      anchor_date: '',
+      interval_has_deadline: false,
+      interval_hour: 0,
+      interval_minute: 0,
+      created_at: 0,
+      updated_at: 0,
+    }
+    const w = mountModal(existing)
+    expect(w.find('.anytime-label').exists()).toBe(true)
+    expect(w.find('.time-picker-popover-stub').exists()).toBe(false)
+  })
+})
+
 // ---------------------------------------------------------------------------
 // Save emits correct ChoreSchedule shape — interval mode
 // ---------------------------------------------------------------------------
 describe('ScheduleModal save — interval mode', () => {
-  it('calls setChoreSchedule with correct interval payload', async () => {
+  it('calls setChoreSchedule with anchor_date and interval_has_deadline in payload', async () => {
    const w = mountModal()
-    // Switch to interval mode
    await w.findAll('.mode-btn')[1].trigger('click')
-
-    // Set interval_days input to 3
-    const intervalInput = w.find<HTMLInputElement>('.interval-input')
-    await intervalInput.setValue(3)
-
-    // Set anchor_weekday to 2 (Tuesday)
-    const anchorSelect = w.find<HTMLSelectElement>('.anchor-select')
-    await anchorSelect.setValue(2)
+    const plusBtn = w.findAll('.stepper-btn')[1]
+    await plusBtn.trigger('click') // interval_days = 2
+    await plusBtn.trigger('click') // interval_days = 3

    await w.find('.btn-primary').trigger('click')
    await nextTick()
@@ -236,38 +396,72 @@ describe('ScheduleModal save — interval mode', () => {
      expect.objectContaining({
        mode: 'interval',
        interval_days: 3,
-        anchor_weekday: 2,
+        anchor_date: expect.any(String),
+        interval_has_deadline: true,
        interval_hour: expect.any(Number),
        interval_minute: expect.any(Number),
      }),
    )
  })

-  it('Save enabled by default in interval mode (interval_days defaults to 2)', async () => {
+  it('payload has interval_has_deadline=false when Anytime toggle is active', async () => {
+    const w = mountModal()
+    await w.findAll('.mode-btn')[1].trigger('click')
+    await w.find('.interval-time-row .link-btn').trigger('click') // Clear
+    await nextTick()
+    await w.find('.btn-primary').trigger('click')
+    await nextTick()
+    expect(mockSetChoreSchedule).toHaveBeenCalledWith(
+      CHILD_ID,
+      TASK.id,
+      expect.objectContaining({ interval_has_deadline: false }),
+    )
+  })
+
+  it('Save enabled by default in interval mode', async () => {
    const w = mountModal()
    await w.findAll('.mode-btn')[1].trigger('click')
    const saveBtn = w.find('.btn-primary')
    expect((saveBtn.element as HTMLButtonElement).disabled).toBe(false)
  })

-  it('pre-populates interval fields from existing interval schedule', () => {
+  it('pre-populates anchor_date in the DateInputField stub', () => {
    const existing: ChoreSchedule = {
+      id: 's4',
      child_id: CHILD_ID,
      task_id: TASK.id,
      mode: 'interval',
      day_configs: [],
-      interval_days: 4,
-      anchor_weekday: 3,
-      interval_hour: 14,
-      interval_minute: 30,
+      interval_days: 2,
+      anchor_date: '2026-04-01',
+      interval_has_deadline: true,
+      interval_hour: 8,
+      interval_minute: 0,
+      created_at: 0,
+      updated_at: 0,
    }
    const w = mountModal(existing)
-    // Should default to interval mode
-    expect(w.find('.interval-form').exists()).toBe(true)
-    const input = w.find<HTMLInputElement>('.interval-input')
-    expect(Number((input.element as HTMLInputElement).value)).toBe(4)
-    const select = w.find<HTMLSelectElement>('.anchor-select')
-    expect(Number((select.element as HTMLSelectElement).value)).toBe(3)
+    const dateInput = w.find('.date-input-field-stub')
+    expect((dateInput.element as HTMLInputElement).value).toBe('2026-04-01')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Interval form — next occurrence label
+// ---------------------------------------------------------------------------
+describe('ScheduleModal interval form — next occurrence', () => {
+  it('shows next occurrences label in interval mode', async () => {
+    const w = mountModal()
+    await w.findAll('.mode-btn')[1].trigger('click')
+    await nextTick()
+    expect(w.find('.next-occurrence-label').exists()).toBe(true)
+  })
+
+  it('next occurrences label contains "Next occurrences:"', async () => {
+    const w = mountModal()
+    await w.findAll('.mode-btn')[1].trigger('click')
+    await nextTick()
+    expect(w.find('.next-occurrence-label').text()).toContain('Next occurrences:')
  })
 })

--- a/frontend/vue-app/src/tests/scheduleUtils.spec.ts
+++ b/frontend/vue-app/src/tests/scheduleUtils.spec.ts
@@ -31,26 +31,35 @@ describe('toLocalISODate', () => {
 // ---------------------------------------------------------------------------
 describe('intervalHitsToday', () => {
  it('anchor day hits on itself', () => {
-    // Wednesday = weekday 3
    const wednesday = new Date(2025, 0, 8) // Jan 8, 2025 is a Wednesday
-    expect(intervalHitsToday(3, 2, wednesday)).toBe(true)
+    expect(intervalHitsToday('2025-01-08', 2, wednesday)).toBe(true)
  })

-  it('anchor=Wednesday, interval=2, Thursday does NOT hit', () => {
-    const thursday = new Date(2025, 0, 9)
-    expect(intervalHitsToday(3, 2, thursday)).toBe(false)
+  it('anchor=Wednesday(2025-01-08), interval=2, Thursday does NOT hit', () => {
+    const thursday = new Date(2025, 0, 9) // 1 day after anchor, 1 % 2 !== 0
+    expect(intervalHitsToday('2025-01-08', 2, thursday)).toBe(false)
  })

-  it('anchor=Wednesday, interval=2, Friday hits (2 days after anchor)', () => {
-    const friday = new Date(2025, 0, 10)
-    expect(intervalHitsToday(3, 2, friday)).toBe(true)
+  it('anchor=Wednesday(2025-01-08), interval=2, Friday hits (2 days after anchor)', () => {
+    const friday = new Date(2025, 0, 10) // 2 days after anchor, 2 % 2 === 0
+    expect(intervalHitsToday('2025-01-08', 2, friday)).toBe(true)
  })

  it('interval=1 hits every day', () => {
-    // interval of 1 means every day; diffDays % 1 === 0 always
-    // Note: interval_days=1 is disallowed in UI (min 2) but logic should still work
-    const monday = new Date(2025, 0, 6)
-    expect(intervalHitsToday(1, 1, monday)).toBe(true)
+    const monday = new Date(2025, 0, 6) // anchor is that same Monday
+    expect(intervalHitsToday('2025-01-06', 1, monday)).toBe(true)
+    const tuesday = new Date(2025, 0, 7)
+    expect(intervalHitsToday('2025-01-06', 1, tuesday)).toBe(true)
+  })
+
+  it('returns false for a date before the anchor', () => {
+    const beforeAnchor = new Date(2025, 0, 7) // Jan 7 is before Jan 8 anchor
+    expect(intervalHitsToday('2025-01-08', 2, beforeAnchor)).toBe(false)
+  })
+
+  it('empty anchor string treats localDate as the anchor (always hits)', () => {
+    const today = new Date(2025, 0, 8)
+    expect(intervalHitsToday('', 2, today)).toBe(true)
  })
 })

@@ -67,7 +76,8 @@ describe('isScheduledToday', () => {
      { day: 3, hour: 9, minute: 30 }, // Wednesday
    ],
    interval_days: 2,
-    anchor_weekday: 0,
+    anchor_date: '',
+    interval_has_deadline: true,
    interval_hour: 0,
    interval_minute: 0,
  }
@@ -89,7 +99,8 @@ describe('isScheduledToday', () => {
      mode: 'interval',
      day_configs: [],
      interval_days: 2,
-      anchor_weekday: 3, // Wednesday
+      anchor_date: '2025-01-08', // Wednesday
+      interval_has_deadline: true,
      interval_hour: 8,
      interval_minute: 0,
    }
@@ -110,7 +121,8 @@ describe('getDueTimeToday', () => {
    mode: 'days',
    day_configs: [{ day: 1, hour: 8, minute: 30 }],
    interval_days: 2,
-    anchor_weekday: 0,
+    anchor_date: '',
+    interval_has_deadline: true,
    interval_hour: 0,
    interval_minute: 0,
  }
@@ -132,7 +144,8 @@ describe('getDueTimeToday', () => {
      mode: 'interval',
      day_configs: [],
      interval_days: 2,
-      anchor_weekday: 3,
+      anchor_date: '2025-01-08',
+      interval_has_deadline: true,
      interval_hour: 14,
      interval_minute: 45,
    }
@@ -147,13 +160,31 @@ describe('getDueTimeToday', () => {
      mode: 'interval',
      day_configs: [],
      interval_days: 2,
-      anchor_weekday: 3,
+      anchor_date: '2025-01-08',
+      interval_has_deadline: true,
      interval_hour: 14,
      interval_minute: 45,
    }
    const thursday = new Date(2025, 0, 9)
    expect(getDueTimeToday(intervalSchedule, thursday)).toBeNull()
  })
+
+  it('interval mode with interval_has_deadline=false returns null (Anytime)', () => {
+    const intervalSchedule: ChoreSchedule = {
+      child_id: 'c1',
+      task_id: 't1',
+      mode: 'interval',
+      day_configs: [],
+      interval_days: 2,
+      anchor_date: '2025-01-08',
+      interval_has_deadline: false,
+      interval_hour: 14,
+      interval_minute: 45,
+    }
+    const wednesday = new Date(2025, 0, 8)
+    // Even on a hit day, Anytime means no deadline → null
+    expect(getDueTimeToday(intervalSchedule, wednesday)).toBeNull()
+  })
 })

 // ---------------------------------------------------------------------------
--- a/frontend/vue-app/src/common/models.ts
+++ b/frontend/vue-app/src/common/models.ts
@@ -24,8 +24,9 @@ export interface ChoreSchedule {
  default_hour?: number // master deadline hour; present when mode='days'
  default_minute?: number // master deadline minute; present when mode='days'
  // mode='interval'
-  interval_days: number // 2–7
-  anchor_weekday: number // 0=Sun–6=Sat
+  interval_days: number // 1–7
+  anchor_date: string // ISO date string e.g. "2026-02-25"; "" means use today
+  interval_has_deadline: boolean // false = "Anytime" (no deadline)
  interval_hour: number
  interval_minute: number
  created_at: number
--- a/frontend/vue-app/src/common/scheduleUtils.ts
+++ b/frontend/vue-app/src/common/scheduleUtils.ts
@@ -11,27 +11,32 @@ function getLocalWeekday(d: Date): number {
 /**
 * Returns true if the interval schedule hits on the given localDate.
 *
- * Anchor: the most recent occurrence of `anchorWeekday` on or before today (this week).
- * Pattern: every `intervalDays` days starting from that anchor.
+ * Anchor: the ISO date string from `anchor_date` (e.g. "2026-02-26").
+ * An empty string means "use localDate as anchor" (backward compat) which
+ * hits on today (diffDays=0) and every intervalDays days after.
+ *
+ * Dates before the anchor always return false (scheduling hasn't started yet).
 */
 export function intervalHitsToday(
-  anchorWeekday: number,
+  anchorDate: string,
  intervalDays: number,
  localDate: Date,
 ): boolean {
-  const todayWeekday = getLocalWeekday(localDate)
+  // Parse anchor: use localDate itself when anchor is empty (backward compat)
+  let anchor: Date
+  if (anchorDate) {
+    const [y, m, d] = anchorDate.split('-').map(Number)
+    anchor = new Date(y, m - 1, d, 0, 0, 0, 0)
+  } else {
+    anchor = new Date(localDate)
+    anchor.setHours(0, 0, 0, 0)
+  }

-  // Find the most recent anchorWeekday on or before today within the current week.
-  // We calculate the anchor as: (today - daysSinceAnchor)
-  const daysSinceAnchor = (todayWeekday - anchorWeekday + 7) % 7
-  const anchor = new Date(localDate)
-  anchor.setDate(anchor.getDate() - daysSinceAnchor)
-  anchor.setHours(0, 0, 0, 0)
+  const target = new Date(localDate)
+  target.setHours(0, 0, 0, 0)

-  const today = new Date(localDate)
-  today.setHours(0, 0, 0, 0)
-
-  const diffDays = Math.round((today.getTime() - anchor.getTime()) / 86400000)
+  const diffDays = Math.round((target.getTime() - anchor.getTime()) / 86_400_000)
+  if (diffDays < 0) return false // before anchor — not started yet
  return diffDays % intervalDays === 0
 }

@@ -45,13 +50,16 @@ export function isScheduledToday(schedule: ChoreSchedule, localDate: Date): bool
    const todayWeekday = getLocalWeekday(localDate)
    return schedule.day_configs.some((dc: DayConfig) => dc.day === todayWeekday)
  } else {
-    return intervalHitsToday(schedule.anchor_weekday, schedule.interval_days, localDate)
+    return intervalHitsToday(schedule.anchor_date ?? '', schedule.interval_days, localDate)
  }
 }

 /**
- * Returns the due time {hour, minute} for today, or null if no due time is configured
- * for today (e.g. the day is not scheduled).
+ * Returns the due time {hour, minute} for today, or null if:
+ * - the day is not scheduled, OR
+ * - the schedule has no deadline (interval_has_deadline === false → "Anytime")
+ *
+ * Callers treat null as "active all day with no expiry".
 */
 export function getDueTimeToday(
  schedule: ChoreSchedule,
@@ -63,7 +71,10 @@ export function getDueTimeToday(
    if (!dayConfig) return null
    return { hour: dayConfig.hour, minute: dayConfig.minute }
  } else {
-    if (!intervalHitsToday(schedule.anchor_weekday, schedule.interval_days, localDate)) return null
+    if (!intervalHitsToday(schedule.anchor_date ?? '', schedule.interval_days, localDate))
+      return null
+    // interval_has_deadline === false means "Anytime" — no expiry time
+    if (schedule.interval_has_deadline === false) return null
    return { hour: schedule.interval_hour, minute: schedule.interval_minute }
  }
 }
--- a/frontend/vue-app/src/components/shared/DateInputField.vue
+++ b/frontend/vue-app/src/components/shared/DateInputField.vue
@@ -0,0 +1,39 @@
+<template>
+  <input class="date-input-field" type="date" :value="modelValue" :min="min" @change="onChanged" />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: string
+  min?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+function onChanged(event: Event) {
+  emit('update:modelValue', (event.target as HTMLInputElement).value)
+}
+</script>
+
+<style scoped>
+.date-input-field {
+  padding: 0.4rem 0.6rem;
+  border: 1.5px solid var(--kebab-menu-border, #bcc1c9);
+  border-radius: 6px;
+  background: var(--modal-bg, #fff);
+  color: var(--secondary, #7257b3);
+  font-size: 0.95rem;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.date-input-field:hover,
+.date-input-field:focus {
+  border-color: var(--btn-primary, #667eea);
+}
+</style>
--- a/frontend/vue-app/src/components/shared/ScheduleModal.vue
+++ b/frontend/vue-app/src/components/shared/ScheduleModal.vue
@@ -56,17 +56,59 @@

    <!-- Interval form -->
    <div v-else class="interval-form">
-      <div class="interval-row">
-        <label class="field-label">Every</label>
-        <input v-model.number="intervalDays" type="number" min="2" max="7" class="interval-input" />
-        <span class="field-label">days, starting on</span>
-        <select v-model.number="anchorWeekday" class="anchor-select">
-          <option v-for="(label, idx) in DAY_LABELS" :key="idx" :value="idx">{{ label }}</option>
-        </select>
+      <!-- Frequency stepper + anchor date -->
+      <div class="interval-group">
+        <div class="interval-row">
+          <label class="field-label">Every</label>
+          <div class="stepper">
+            <button
+              type="button"
+              class="stepper-btn"
+              @click="decrementInterval"
+              :disabled="intervalDays <= 1"
+            >
+              −
+            </button>
+            <span class="stepper-value">{{ intervalDays }}</span>
+            <button
+              type="button"
+              class="stepper-btn"
+              @click="incrementInterval"
+              :disabled="intervalDays >= 7"
+            >
+              +
+            </button>
+          </div>
+          <span class="field-label">{{ intervalDays === 1 ? 'day' : 'days' }}</span>
+        </div>
+        <div class="interval-row">
+          <label class="field-label">Starting on</label>
+          <DateInputField
+            :modelValue="anchorDate"
+            :min="todayISO"
+            @update:modelValue="anchorDate = $event"
+          />
+        </div>
      </div>
+
+      <!-- Deadline row -->
      <div class="interval-time-row">
-        <label class="field-label">Due by</label>
-        <TimeSelector :modelValue="intervalTime" @update:modelValue="intervalTime = $event" />
+        <label class="field-label">Deadline</label>
+        <TimePickerPopover
+          v-if="hasDeadline"
+          :modelValue="intervalTime"
+          @update:modelValue="intervalTime = $event"
+        />
+        <span v-else class="anytime-label">Anytime</span>
+        <button type="button" class="link-btn" @click="toggleDeadline">
+          {{ hasDeadline ? 'Clear (Anytime)' : 'Set deadline' }}
+        </button>
+      </div>
+
+      <!-- Next occurrences preview -->
+      <div v-if="nextOccurrences.length" class="next-occurrence-row">
+        <span class="next-occurrence-label">Next occurrences:</span>
+        <span v-for="(d, i) in nextOccurrences" :key="i" class="next-occurrence-date">{{ d }}</span>
      </div>
    </div>

@@ -87,8 +129,8 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import ModalDialog from './ModalDialog.vue'
-import TimeSelector from './TimeSelector.vue'
 import TimePickerPopover from './TimePickerPopover.vue'
+import DateInputField from './DateInputField.vue'
 import { setChoreSchedule, deleteChoreSchedule, parseErrorResponse } from '@/common/api'
 import type { ChildTask, ChoreSchedule, DayConfig } from '@/common/models'

@@ -144,9 +186,17 @@ const selectedDays = ref<Set<number>>(_days)
 const defaultTime = ref<TimeValue>(_base)
 const exceptions = ref<Map<number, TimeValue>>(_exMap)

+// ── helpers (date) ───────────────────────────────────────────────────────────
+
+function getTodayISO(): string {
+  const d = new Date()
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
 // interval mode
-const intervalDays = ref<number>(props.schedule?.interval_days ?? 2)
-const anchorWeekday = ref<number>(props.schedule?.anchor_weekday ?? 0)
+const intervalDays = ref<number>(Math.max(1, props.schedule?.interval_days ?? 1))
+const anchorDate = ref<string>(props.schedule?.anchor_date || getTodayISO())
+const hasDeadline = ref<boolean>(props.schedule?.interval_has_deadline ?? true)
 const intervalTime = ref<TimeValue>({
  hour: props.schedule?.interval_hour ?? 8,
  minute: props.schedule?.interval_minute ?? 0,
@@ -163,8 +213,9 @@ const origDefaultTime: TimeValue = { ..._base }
 const origExceptions = new Map<number, TimeValue>(
  Array.from(_exMap.entries()).map(([k, v]) => [k, { ...v }]),
 )
-const origIntervalDays = props.schedule?.interval_days ?? 2
-const origAnchorWeekday = props.schedule?.anchor_weekday ?? 0
+const origIntervalDays = Math.max(1, props.schedule?.interval_days ?? 1)
+const origAnchorDate = props.schedule?.anchor_date || getTodayISO()
+const origHasDeadline = props.schedule?.interval_has_deadline ?? true
 const origIntervalTime: TimeValue = {
  hour: props.schedule?.interval_hour ?? 8,
  minute: props.schedule?.interval_minute ?? 0,
@@ -174,6 +225,36 @@ const origIntervalTime: TimeValue = {

 const sortedSelectedDays = computed(() => Array.from(selectedDays.value).sort((a, b) => a - b))

+const todayISO = getTodayISO()
+
+const nextOccurrences = computed((): string[] => {
+  if (!anchorDate.value) return []
+  const [y, m, d] = anchorDate.value.split('-').map(Number)
+  const anchor = new Date(y, m - 1, d, 0, 0, 0, 0)
+  if (isNaN(anchor.getTime())) return []
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
+
+  const fmt = (dt: Date) =>
+    dt.toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' })
+
+  // Find the first hit date >= today
+  let first: Date | null = null
+  const candidate = new Date(anchor)
+  for (let i = 0; i <= 365; i++) {
+    const cur = new Date(anchor.getTime() + i * 86_400_000)
+    const diffDays = Math.round((cur.getTime() - anchor.getTime()) / 86_400_000)
+    if (diffDays % intervalDays.value === 0 && cur >= today) {
+      first = cur
+      break
+    }
+  }
+  if (!first) return []
+  void candidate // suppress unused warning
+  const second = new Date(first.getTime() + intervalDays.value * 86_400_000)
+  return [fmt(first), fmt(second)]
+})
+
 const formatDefaultTime = computed(() => {
  const h = defaultTime.value.hour % 12 || 12
  const m = String(defaultTime.value.minute).padStart(2, '0')
@@ -200,12 +281,24 @@ function onDefaultTimeChanged(val: TimeValue) {
  defaultTime.value = val
 }

+function decrementInterval() {
+  if (intervalDays.value > 1) intervalDays.value--
+}
+
+function incrementInterval() {
+  if (intervalDays.value < 7) intervalDays.value++
+}
+
+function toggleDeadline() {
+  hasDeadline.value = !hasDeadline.value
+}
+
 // ── validation + dirty ───────────────────────────────────────────────────────

 const isValid = computed(() => {
  // days mode: 0 selections is valid — means "unschedule" (always active)
  if (mode.value === 'interval') {
-    return intervalDays.value >= 2 && intervalDays.value <= 7
+    return intervalDays.value >= 1 && intervalDays.value <= 7
  }
  return true
 })
@@ -234,10 +327,12 @@ const isDirty = computed(() => {
    return false
  } else {
    if (intervalDays.value !== origIntervalDays) return true
-    if (anchorWeekday.value !== origAnchorWeekday) return true
+    if (anchorDate.value !== origAnchorDate) return true
+    if (hasDeadline.value !== origHasDeadline) return true
    if (
-      intervalTime.value.hour !== origIntervalTime.hour ||
-      intervalTime.value.minute !== origIntervalTime.minute
+      hasDeadline.value &&
+      (intervalTime.value.hour !== origIntervalTime.hour ||
+        intervalTime.value.minute !== origIntervalTime.minute)
    )
      return true
    return false
@@ -274,7 +369,8 @@ async function save() {
    res = await setChoreSchedule(props.childId, props.task.id, {
      mode: 'interval',
      interval_days: intervalDays.value,
-      anchor_weekday: anchorWeekday.value,
+      anchor_date: anchorDate.value,
+      interval_has_deadline: hasDeadline.value,
      interval_hour: intervalTime.value.hour,
      interval_minute: intervalTime.value.minute,
    })
@@ -418,6 +514,12 @@ async function save() {
  margin-bottom: 1rem;
 }

+.interval-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
 .interval-row {
  display: flex;
  align-items: center;
@@ -437,25 +539,70 @@ async function save() {
  color: var(--secondary, #7257b3);
 }

-.interval-input {
-  width: 3.5rem;
-  padding: 0.4rem 0.4rem;
-  border: 1.5px solid var(--kebab-menu-border, #bcc1c9);
+.stepper {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  border: 1.5px solid var(--primary, #667eea);
  border-radius: 6px;
-  font-size: 1rem;
-  text-align: center;
-  color: var(--secondary, #7257b3);
-  font-weight: 700;
+  overflow: hidden;
+  flex-shrink: 0;
 }

-.anchor-select {
-  padding: 0.4rem 0.5rem;
-  border: 1.5px solid var(--kebab-menu-border, #bcc1c9);
-  border-radius: 6px;
-  font-size: 0.95rem;
+.stepper-btn {
+  width: 2rem;
+  height: 2rem;
+  background: transparent;
+  border: none;
+  color: var(--primary, #667eea);
+  font-size: 1.1rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.12s;
+  font-family: inherit;
+}
+
+.stepper-btn:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--btn-primary, #667eea) 12%, transparent);
+}
+
+.stepper-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.stepper-value {
+  min-width: 1.6rem;
+  text-align: center;
+  font-size: 1rem;
+  font-weight: 700;
  color: var(--secondary, #7257b3);
-  font-weight: 600;
-  background: var(--modal-bg, #fff);
+  padding: 0 0.25rem;
+}
+
+.anytime-label {
+  font-size: 0.85rem;
+  color: var(--form-label, #888);
+  font-style: italic;
+}
+
+.next-occurrence-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.next-occurrence-label {
+  font-size: 0.8rem;
+  color: var(--form-label, #888);
+  font-weight: 500;
+}
+
+.next-occurrence-date {
+  font-size: 0.85rem;
+  color: var(--form-label, #888);
+  font-style: italic;
+  padding-left: 0.5rem;
 }

 /* Error */
--- a/frontend/vue-app/src/components/shared/tests/DateInputField.spec.ts
+++ b/frontend/vue-app/src/components/shared/tests/DateInputField.spec.ts
@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DateInputField from '../DateInputField.vue'
+
+describe('DateInputField', () => {
+  it('renders a native date input', () => {
+    const w = mount(DateInputField, { props: { modelValue: '2026-03-01' } })
+    const input = w.find('input[type="date"]')
+    expect(input.exists()).toBe(true)
+  })
+
+  it('reflects modelValue as the input value', () => {
+    const w = mount(DateInputField, { props: { modelValue: '2026-04-15' } })
+    const input = w.find<HTMLInputElement>('input[type="date"]')
+    expect((input.element as HTMLInputElement).value).toBe('2026-04-15')
+  })
+
+  it('emits update:modelValue with the new ISO string when changed', async () => {
+    const w = mount(DateInputField, { props: { modelValue: '2026-03-01' } })
+    const input = w.find<HTMLInputElement>('input[type="date"]')
+    await input.setValue('2026-05-20')
+    expect(w.emitted('update:modelValue')).toBeTruthy()
+    expect(w.emitted('update:modelValue')![0]).toEqual(['2026-05-20'])
+  })
+
+  it('does not emit when no change is triggered', () => {
+    const w = mount(DateInputField, { props: { modelValue: '2026-03-01' } })
+    expect(w.emitted('update:modelValue')).toBeFalsy()
+  })
+
+  it('passes min prop to the native input', () => {
+    const w = mount(DateInputField, {
+      props: { modelValue: '2026-03-10', min: '2026-02-26' },
+    })
+    const input = w.find<HTMLInputElement>('input[type="date"]')
+    expect((input.element as HTMLInputElement).min).toBe('2026-02-26')
+  })
+
+  it('renders without min prop when not provided', () => {
+    const w = mount(DateInputField, { props: { modelValue: '2026-03-01' } })
+    const input = w.find<HTMLInputElement>('input[type="date"]')
+    // min attribute should be absent or empty
+    expect((input.element as HTMLInputElement).min).toBe('')
+  })
+})
--- a/frontend/vue-app/vitest.config.ts
+++ b/frontend/vue-app/vitest.config.ts
@@ -1,15 +1,18 @@
-import { fileURLToPath } from 'node:url'
-import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
-import viteConfig from './vite.config'
+import { fileURLToPath, URL } from 'node:url'
+import { defineConfig, configDefaults } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'

-export default mergeConfig(
-  viteConfig,
-  defineConfig({
-    test: {
-      environment: 'jsdom',
-      exclude: [...configDefaults.exclude, 'e2e/**'],
-      root: fileURLToPath(new URL('./', import.meta.url)),
-      setupFiles: ['src/test/setup.ts'],
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
-  }),
-)
+  },
+  test: {
+    environment: 'jsdom',
+    exclude: [...configDefaults.exclude, 'e2e/**'],
+    root: fileURLToPath(new URL('./', import.meta.url)),
+    setupFiles: ['src/test/setup.ts'],
+  },
+})