Add routine management features for child and parent views

- Implemented routine child-mode flow tests to ensure proper functionality of routine assignment and task completion.
- Created notification tests for parent view to verify routine completion notifications for children.
- Developed ChildRoutineOverlay component for displaying routine tasks and handling user interactions.
- Added RoutineApproveDialog component for approving or rejecting completed routines.
- Created unit tests for ChildRoutineOverlay and RoutineEditView components to ensure correct behavior and rendering.
- Enhanced RoutineEditView with proper handling of task addition and form submission.

Co-authored-by: Copilot <copilot@github.com>

frontend/src/components/child/__tests__/ChildRoutineOverlay.spec.ts

@@ -0,0 +1,68 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ChildRoutineOverlay from '../ChildRoutineOverlay.vue'
+
+// Mock getCachedImageUrl to return a simple data URL
+vi.mock('@/common/imageCache', () => ({
+  getCachedImageUrl: vi.fn(() => Promise.resolve('data:image/svg+xml,%3Csvg%3E%3C/svg%3E')),
+}))
+
+describe('ChildRoutineOverlay', () => {
+  const routine = {
+    id: 'routine-1',
+    name: 'Morning Routine',
+    points: 12,
+    image_id: 'routine-image',
+    image_url: '/images/routine.png',
+    items: [
+      {
+        id: 'item-1',
+        routine_id: 'routine-1',
+        name: 'Brush Teeth',
+        image_id: null,
+        order: 0,
+      },
+      {
+        id: 'item-2',
+        routine_id: 'routine-1',
+        name: 'Make Bed',
+        image_id: null,
+        order: 1,
+      },
+    ],
+  }
+
+  it('emits close when the backdrop is clicked', async () => {
+    const wrapper = mount(ChildRoutineOverlay, {
+      props: {
+        show: true,
+        routine,
+        canComplete: true,
+      },
+    })
+
+    await wrapper.find('.overlay-backdrop').trigger('click')
+
+    expect(wrapper.emitted('close')).toHaveLength(1)
+  })
+
+  it('emits task-click and complete from the appropriate controls', async () => {
+    const wrapper = mount(ChildRoutineOverlay, {
+      props: {
+        show: true,
+        routine,
+        canComplete: true,
+      },
+    })
+
+    // Wait for async image resolution to complete
+    await wrapper.vm.$nextTick()
+    await new Promise((resolve) => setTimeout(resolve, 50))
+
+    await wrapper.find('.task-card').trigger('click')
+    await wrapper.find('.btn-primary').trigger('click')
+
+    expect(wrapper.emitted('task-click')).toEqual([[routine.items[0]]])
+    expect(wrapper.emitted('complete')).toHaveLength(1)
+  })
+})

frontend/src/components/child/__tests__/ChildView.spec.ts

@@ -65,6 +65,23 @@ describe('ChildView', () => {
     custom_value: 8,
   }
 
+  const mockRoutine = {
+    id: 'routine-1',
+    name: 'Morning Routine',
+    points: 12,
+    image_id: 'routine-image',
+    image_url: '/images/routine.png',
+    items: [
+      {
+        id: 'routine-item-1',
+        routine_id: 'routine-1',
+        name: 'Make Bed',
+        image_id: null,
+        order: 0,
+      },
+    ],
+  }
+
   beforeEach(() => {
     vi.clearAllMocks()
 
@@ -212,6 +229,34 @@ describe('ChildView', () => {
     })
   })
 
+  describe('Routine Overlay', () => {
+    beforeEach(async () => {
+      wrapper = mount(ChildView)
+      await nextTick()
+      await new Promise((resolve) => setTimeout(resolve, 50))
+    })
+
+    it('opens the routine overlay when a routine is clicked', async () => {
+      vi.useFakeTimers()
+
+      wrapper.vm.handleRoutineClick(mockRoutine)
+      vi.advanceTimersByTime(200)
+      await nextTick()
+
+      expect(wrapper.vm.showRoutineOverlay).toBe(true)
+      expect(wrapper.vm.dialogRoutine?.id).toBe('routine-1')
+
+      vi.useRealTimers()
+    })
+
+    it('speaks the routine task name when a routine task is clicked', () => {
+      wrapper.vm.handleRoutineTaskClick(mockRoutine.items[0])
+
+      expect(window.speechSynthesis.cancel).toHaveBeenCalled()
+      expect(window.speechSynthesis.speak).toHaveBeenCalled()
+    })
+  })
+
   describe('Reward Triggering', () => {
     beforeEach(async () => {
       wrapper = mount(ChildView)