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.

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>

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 */

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('')
+  })
+})