feat: Implement routines feature with CRUD operations and child assignment

- Add backend routines management with add, get, update, delete, and list functionalities.
- Create models for Routine, RoutineItem, RoutineSchedule, and RoutineExtension.
- Develop event types for routine confirmation and modification.
- Implement frontend components for routine assignment, confirmation dialog, and routine management views.
- Add unit tests for routine API and integration tests for routine CRUD flow.
- Create end-to-end test plan for routines feature covering parent and child interactions.

frontend/src/components/child/ChildView.vue

@@ -6,6 +6,7 @@ import ScrollingList from '../shared/ScrollingList.vue'
 import StatusMessage from '../shared/StatusMessage.vue'
 import RewardConfirmDialog from './RewardConfirmDialog.vue'
 import ChoreConfirmDialog from './ChoreConfirmDialog.vue'
+import RoutineConfirmDialog from './RoutineConfirmDialog.vue'
 import ModalDialog from '../shared/ModalDialog.vue'
 import { eventBus } from '@/common/eventBus'
 //import '@/assets/view-shared.css'
@@ -16,17 +17,22 @@ import type {
   Task,
   RewardStatus,
   ChildTask,
+  ChildRoutine,
   ChildTaskTriggeredEventPayload,
   ChildRewardTriggeredEventPayload,
   ChildRewardRequestEventPayload,
   ChildTasksSetEventPayload,
   ChildRewardsSetEventPayload,
+  ChildRoutinesSetEventPayload,
   TaskModifiedEventPayload,
   RewardModifiedEventPayload,
+  RoutineModifiedEventPayload,
   ChildModifiedEventPayload,
   ChoreScheduleModifiedPayload,
   ChoreTimeExtendedPayload,
+  RoutineScheduleModifiedPayload,
   ChildChoreConfirmationPayload,
+  ChildRoutineConfirmationPayload,
   ChildOverrideSetPayload,
   ChildOverrideDeletedPayload,
 } from '@/common/models'
@@ -46,6 +52,7 @@ const router = useRouter()
 
 const child = ref<Child | null>(null)
 const tasks = ref<string[]>([])
+const routines = ref<string[]>([])
 const rewards = ref<string[]>([])
 const loading = ref(true)
 const error = ref<string | null>(null)
@@ -56,6 +63,9 @@ const dialogReward = ref<RewardStatus | null>(null)
 const showChoreConfirmDialog = ref(false)
 const showChoreCancelDialog = ref(false)
 const dialogChore = ref<ChildTask | null>(null)
+const showRoutineConfirmDialog = ref(false)
+const dialogRoutine = ref<ChildRoutine | null>(null)
+const childRoutineListRef = ref()
 
 function handleTaskTriggered(event: Event) {
   const payload = event.payload as ChildTaskTriggeredEventPayload
@@ -87,6 +97,13 @@ function handleChildRewardSet(event: Event) {
   }
 }
 
+function handleChildRoutineSet(event: Event) {
+  const payload = event.payload as ChildRoutinesSetEventPayload
+  if (child.value && payload.child_id == child.value.id) {
+    routines.value = payload.routine_ids
+  }
+}
+
 function handleRewardRequest(event: Event) {
   const payload = event.payload as ChildRewardRequestEventPayload
   const childId = payload.child_id
@@ -222,6 +239,14 @@ const triggerTask = async (task: ChildTask) => {
   // Kindness / Penalty: speech-only in child mode; point changes are handled in parent mode.
 }
 
+const handleRoutineClick = (routine: ChildRoutine) => {
+  // Show routine confirmation dialog
+  dialogRoutine.value = routine
+  setTimeout(() => {
+    showRoutineConfirmDialog.value = true
+  }, 150)
+}
+
 function isChoreCompletedToday(item: ChildTask): boolean {
   if (item.pending_status !== 'approved' || !item.approved_at) return false
   const approvedDate = new Date(item.approved_at)
@@ -273,6 +298,30 @@ function closeChoreCancelDialog() {
   dialogChore.value = null
 }
 
+async function doConfirmRoutine() {
+  if (!child.value?.id || !dialogRoutine.value) return
+  try {
+    const resp = await fetch(`/api/child/${child.value.id}/confirm-routine`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ routine_id: dialogRoutine.value.id }),
+    })
+    if (!resp.ok) {
+      console.error('Failed to confirm routine')
+    }
+  } catch (err) {
+    console.error('Failed to confirm routine:', err)
+  } finally {
+    showRoutineConfirmDialog.value = false
+    dialogRoutine.value = null
+  }
+}
+
+function closeRoutineConfirmDialog() {
+  showRoutineConfirmDialog.value = false
+  dialogRoutine.value = null
+}
+
 const triggerReward = (reward: RewardStatus) => {
   // Cancel any pending speech to avoid conflicts
   if ('speechSynthesis' in window) {
@@ -545,6 +594,7 @@ onMounted(async () => {
     eventBus.on('child_reward_triggered', handleRewardTriggered)
     eventBus.on('child_tasks_set', handleChildTaskSet)
     eventBus.on('child_rewards_set', handleChildRewardSet)
+    eventBus.on('child_routines_set', handleChildRoutineSet)
     eventBus.on('task_modified', handleTaskModified)
     eventBus.on('reward_modified', handleRewardModified)
     eventBus.on('child_modified', handleChildModified)
@@ -563,6 +613,7 @@ onMounted(async () => {
           if (data) {
             child.value = data
             tasks.value = data.tasks || []
+            routines.value = data.routines || []
             rewards.value = data.rewards || []
           }
           loading.value = false
@@ -582,6 +633,7 @@ onUnmounted(() => {
   eventBus.off('child_reward_triggered', handleRewardTriggered)
   eventBus.off('child_tasks_set', handleChildTaskSet)
   eventBus.off('child_rewards_set', handleChildRewardSet)
+  eventBus.off('child_routines_set', handleChildRoutineSet)
   eventBus.off('task_modified', handleTaskModified)
   eventBus.off('reward_modified', handleRewardModified)
   eventBus.off('child_modified', handleChildModified)
@@ -731,6 +783,49 @@ onUnmounted(() => {
             </div>
           </template>
         </ScrollingList>
+        <ScrollingList
+          title="Routines"
+          ref="childRoutineListRef"
+          :fetchBaseUrl="`/api/child/${child?.id}/list-routines`"
+          :ids="routines"
+          itemKey="routines"
+          imageField="image_id"
+          :isParentAuthenticated="false"
+          :readyItemId="readyItemId"
+          @item-ready="handleItemReady"
+          @trigger-item="handleRoutineClick"
+          :getItemClass="
+            (item: ChildRoutine) => ({
+              good: true,
+              'routine-pending': item.pending_status === 'pending',
+              'routine-approved': item.pending_status === 'approved',
+            })
+          "
+        >
+          <template #item="{ item }: { item: ChildRoutine }">
+            <span v-if="item.pending_status === 'pending'" class="chore-stamp pending-stamp"
+              >PENDING</span
+            >
+            <span v-else-if="item.pending_status === 'approved'" class="chore-stamp completed-stamp"
+              >APPROVED</span
+            >
+            <div class="item-name">{{ item.name }}</div>
+            <img
+              v-if="item.image_url"
+              :src="item.image_url"
+              alt="Routine Image"
+              class="item-image"
+            />
+            <div class="item-points good-points">
+              {{
+                item.custom_value !== undefined && item.custom_value !== null
+                  ? item.custom_value
+                  : item.points
+              }}
+              Points
+            </div>
+          </template>
+        </ScrollingList>
       </div>
     </div>
   </div>
@@ -785,6 +880,16 @@ onUnmounted(() => {
       <button @click="closeChoreCancelDialog" class="btn btn-secondary">No</button>
     </div>
   </ModalDialog>
+
+  <!-- Routine confirm dialog -->
+  <RoutineConfirmDialog
+    :show="showRoutineConfirmDialog"
+    :routineName="dialogRoutine?.name ?? ''"
+    :imageUrl="dialogRoutine?.image_url"
+    :items="dialogRoutine?.items"
+    @confirm="doConfirmRoutine"
+    @cancel="closeRoutineConfirmDialog"
+  />
 </template>
 
 <style scoped>

frontend/src/components/child/ParentView.vue

@@ -937,6 +937,16 @@ function goToAssignRewards() {
     })
   }
 }
+
+function goToAssignRoutines() {
+  if (child.value?.id) {
+    router.push({
+      name: 'RoutineAssignView',
+      params: { id: child.value.id },
+      query: { name: child.value.name },
+    })
+  }
+}
 </script>
 
 <template>
@@ -1162,6 +1172,9 @@ function goToAssignRewards() {
       <button v-if="child" class="btn btn-danger" @click="goToAssignBadHabits">
         Assign Penalties
       </button>
+      <button v-if="child" class="btn btn-primary" @click="goToAssignRoutines">
+        Assign Routines
+      </button>
       <button v-if="child" class="btn btn-green" @click="goToAssignRewards">Assign Rewards</button>
     </div>
 
@@ -1196,7 +1209,8 @@ function goToAssignRewards() {
     <!-- Schedule Modal -->
     <ScheduleModal
       v-if="showScheduleModal && scheduleTarget && child"
-      :task="scheduleTarget"
+      :entity="scheduleTarget"
+      entityType="task"
       :childId="child.id"
       :schedule="scheduleTarget.schedule ?? null"
       @saved="onScheduleSaved"

frontend/src/components/child/RoutineAssignView.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="assign-view">
+    <h2>Assign Routines{{ childName ? ` for ${childName}` : '' }}</h2>
+    <div class="list-container">
+      <MessageBlock v-if="routines.length === 0" message="No routines">
+        <span> <button class="round-btn" @click="goToCreate">Create</button> a routine </span>
+      </MessageBlock>
+      <div v-else class="routine-selection">
+        <div
+          v-for="routine in routines"
+          :key="routine.id"
+          class="routine-item"
+          @click="toggleRoutine(routine.id)"
+        >
+          <input
+            type="checkbox"
+            :checked="selectedIds.includes(routine.id)"
+            @change="toggleRoutine(routine.id)"
+            :aria-label="`Select ${routine.name}`"
+          />
+          <img v-if="routine.image_url" :src="routine.image_url" :alt="routine.name" />
+          <span class="name">{{ routine.name }}</span>
+          <span class="value">{{ routine.points }} pts</span>
+        </div>
+      </div>
+    </div>
+    <div class="actions" v-if="routines.length > 0">
+      <button class="btn btn-secondary" @click="onCancel">Cancel</button>
+      <button class="btn btn-primary" @click="onSubmit" :disabled="isLoading">
+        {{ isLoading ? 'Saving...' : 'Submit' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import MessageBlock from '../shared/MessageBlock.vue'
+import '@/assets/styles.css'
+import type { Routine } from '@/common/models'
+
+const route = useRoute()
+const router = useRouter()
+const childId = route.params.id as string
+const childName = typeof route.query.name === 'string' ? route.query.name : ''
+const routines = ref<Routine[]>([])
+const selectedIds = ref<string[]>([])
+const isLoading = ref(false)
+
+onMounted(async () => {
+  await fetchRoutines()
+})
+
+async function fetchRoutines() {
+  try {
+    // Fetch child to get currently assigned routines
+    const childResp = await fetch(`/api/child/${childId}`)
+    if (!childResp.ok) throw new Error('Failed to fetch child')
+    const childData = await childResp.json()
+    selectedIds.value = childData.routines || []
+
+    // Fetch all routines
+    const routinesResp = await fetch('/api/routine/list')
+    if (!routinesResp.ok) throw new Error('Failed to fetch routines')
+    const routinesData = await routinesResp.json()
+    routines.value = routinesData.routines || []
+  } catch (error) {
+    console.error('Failed to fetch routines:', error)
+  }
+}
+
+function toggleRoutine(routineId: string) {
+  const index = selectedIds.value.indexOf(routineId)
+  if (index > -1) {
+    selectedIds.value.splice(index, 1)
+  } else {
+    selectedIds.value.push(routineId)
+  }
+}
+
+function goToCreate() {
+  router.push({ name: 'CreateRoutine' })
+}
+
+async function onSubmit() {
+  isLoading.value = true
+  try {
+    const resp = await fetch(`/api/child/${childId}/set-routines`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ routine_ids: selectedIds.value }),
+    })
+    if (!resp.ok) throw new Error('Failed to update routines')
+    router.back()
+  } catch (error) {
+    console.error('Failed to update routines:', error)
+    alert('Failed to update routines.')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function onCancel() {
+  router.back()
+}
+</script>
+
+<style scoped>
+.assign-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  padding: 1rem;
+  gap: 1rem;
+}
+
+h2 {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 1.5rem;
+}
+
+.list-container {
+  flex: 1 1 auto;
+  width: 100%;
+  max-width: 500px;
+  overflow-y: auto;
+}
+
+.routine-selection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.routine-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border: 2px solid var(--list-item-border-good);
+  border-radius: 8px;
+  background: var(--list-item-bg-good);
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    border-color 0.2s;
+}
+
+.routine-item:hover {
+  background: var(--list-item-bg-good-hover, var(--list-item-bg-good));
+  border-color: var(--list-item-border-good-hover, var(--list-item-border-good));
+}
+
+.routine-item input[type='checkbox'] {
+  cursor: pointer;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.routine-item img {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 6px;
+  object-fit: cover;
+}
+
+.routine-item .name {
+  flex: 1;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.routine-item .value {
+  min-width: 60px;
+  text-align: right;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.actions {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+  width: 100%;
+  max-width: 500px;
+  justify-content: flex-end;
+}
+
+.btn {
+  padding: 0.5rem 1.5rem;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-primary {
+  background: var(--btn-primary);
+  color: #fff;
+}
+
+.btn-primary:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  background: var(--btn-secondary);
+  color: var(--btn-secondary-text);
+}
+
+.btn-secondary:hover {
+  opacity: 0.8;
+}
+
+.round-btn {
+  background: none;
+  border: none;
+  color: var(--btn-primary);
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.round-btn:hover {
+  opacity: 0.8;
+}
+</style>

frontend/src/components/child/RoutineConfirmDialog.vue

@@ -0,0 +1,126 @@
+<template>
+  <ModalDialog v-if="show" @backdrop-click="$emit('cancel')">
+    <template #default>
+      <div class="confirm-dialog">
+        <img v-if="imageUrl" :src="imageUrl" alt="Routine" class="routine-image" />
+        <p class="message">Confirm routine</p>
+        <p class="routine-name">{{ routineName }}?</p>
+        <div v-if="items && items.length > 0" class="items-preview">
+          <p class="items-label">Items:</p>
+          <ul class="items-list">
+            <li v-for="item in items.slice(0, 3)" :key="item.id">{{ item.name }}</li>
+            <li v-if="items.length > 3" class="more-items">+ {{ items.length - 3 }} more</li>
+          </ul>
+        </div>
+        <div class="actions">
+          <button class="btn btn-primary" @click="$emit('confirm')">Confirm</button>
+          <button class="btn btn-secondary" @click="$emit('cancel')">Cancel</button>
+        </div>
+      </div>
+    </template>
+  </ModalDialog>
+</template>
+
+<script setup lang="ts">
+import ModalDialog from '../shared/ModalDialog.vue'
+import type { RoutineItem } from '@/common/models'
+
+defineProps<{
+  show: boolean
+  routineName: string
+  imageUrl?: string | null
+  items?: RoutineItem[]
+}>()
+
+defineEmits<{
+  confirm: []
+  cancel: []
+}>()
+</script>
+
+<style scoped>
+.confirm-dialog {
+  text-align: center;
+  padding: 0.5rem;
+}
+.routine-image {
+  width: 72px;
+  height: 72px;
+  object-fit: cover;
+  border-radius: 8px;
+  background: var(--info-image-bg);
+  margin-bottom: 0.75rem;
+}
+.message {
+  font-size: 1.1rem;
+  color: var(--dialog-message);
+  margin-bottom: 0.25rem;
+}
+.routine-name {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--dialog-child-name);
+  margin-bottom: 1rem;
+}
+.items-preview {
+  margin-bottom: 1rem;
+  text-align: left;
+  background: var(--form-bg);
+  padding: 0.75rem;
+  border-radius: 6px;
+}
+.items-label {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 0.5rem;
+}
+.items-list {
+  list-style: none;
+  padding-left: 1rem;
+  margin: 0;
+  font-size: 0.95rem;
+  color: var(--text-primary);
+}
+.items-list li {
+  padding: 0.25rem 0;
+}
+.items-list li.more-items {
+  color: var(--text-secondary);
+  font-style: italic;
+}
+.actions {
+  display: flex;
+  gap: 1.5rem;
+  justify-content: center;
+  margin-top: 1.5rem;
+}
+.actions button {
+  padding: 0.7rem 1.8rem;
+  border-radius: 10px;
+  border: 0;
+  cursor: pointer;
+  font-weight: 700;
+  font-size: 1.05rem;
+  transition: background 0.18s;
+  min-width: 100px;
+}
+
+.btn-primary {
+  background: var(--btn-primary);
+  color: #fff;
+}
+
+.btn-primary:hover {
+  opacity: 0.9;
+}
+
+.btn-secondary {
+  background: var(--btn-secondary);
+  color: var(--btn-secondary-text);
+}
+
+.btn-secondary:hover {
+  opacity: 0.8;
+}
+</style>