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/RoutineAssignView.vue

@@ -36,6 +36,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { setChildRoutines } from '@/common/api'
 import MessageBlock from '../shared/MessageBlock.vue'
 import '@/assets/styles.css'
 import type { Routine } from '@/common/models'
@@ -86,11 +87,7 @@ function goToCreate() {
 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 }),
-    })
+    const resp = await setChildRoutines(childId, selectedIds.value)
     if (!resp.ok) throw new Error('Failed to update routines')
     router.back()
   } catch (error) {
@@ -114,27 +111,35 @@ function onCancel() {
   flex: 1 1 auto;
   width: 100%;
   height: 100%;
-  padding: 1rem;
-  gap: 1rem;
+  padding: 0;
+  min-height: 0;
 }
 
-h2 {
-  margin: 0;
-  color: var(--text-primary);
-  font-size: 1.5rem;
+.assign-view h2 {
+  font-size: 1.15rem;
+  color: var(--assign-heading-color);
+  font-weight: 700;
+  text-align: center;
+  margin: 0.2rem;
 }
 
 .list-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   flex: 1 1 auto;
   width: 100%;
-  max-width: 500px;
-  overflow-y: auto;
+  height: 100%;
+  padding: 0;
+  min-height: 0;
 }
 
 .routine-selection {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  width: 100%;
+  max-width: 500px;
 }
 
 .routine-item {
@@ -171,42 +176,32 @@ h2 {
 
 .routine-item .name {
   flex: 1;
+  text-align: left;
   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;
+  gap: 3rem;
+  justify-content: center;
+  margin-top: 0.5rem;
 }
 
-.btn {
-  padding: 0.5rem 1.5rem;
-  border: none;
-  border-radius: 6px;
-  font-weight: 600;
+.actions button {
+  padding: 1rem 2.2rem;
+  border-radius: 12px;
+  border: 0;
   cursor: pointer;
-  transition: all 0.2s;
-}
-
-.btn-primary {
-  background: var(--btn-primary);
-  color: #fff;
-}
-
-.btn-primary:hover:not(:disabled) {
-  opacity: 0.9;
+  font-weight: 700;
+  font-size: 1.25rem;
+  transition: background 0.18s;
+  min-width: 120px;
 }
 
 .btn-primary:disabled {
@@ -214,15 +209,6 @@ h2 {
   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;