feat: implement routines feature for child and parent modes

- Added backend models for routines, routine items, and schedules.
- Created API endpoints for managing routines and their items.
- Implemented frontend components for routine creation, detail view, and assignment.
- Integrated routines into child view with a scrolling list and approval workflow.
- Added push notifications for routine confirmations and pending approvals.
- Refactored existing components to accommodate new routines functionality.
- Updated tests to cover new routines feature and ensure proper functionality.

frontend/src/components/child/ChildView.vue

@@ -622,10 +622,10 @@ onUnmounted(() => {
           :sort-fn="childChoreSort"
         >
           <template #item="{ item }: { item: ChildTask }">
-            <span v-if="isChoreExpired(item)" class="chore-stamp">TOO LATE</span>
-            <span v-else-if="isChoreCompletedToday(item)" class="chore-stamp completed-stamp"
+            <span v-if="isChoreCompletedToday(item)" class="chore-stamp completed-stamp"
               >COMPLETED</span
             >
+            <span v-else-if="isChoreExpired(item)" class="chore-stamp">TOO LATE</span>
             <span v-else-if="item.pending_status === 'pending'" class="chore-stamp pending-stamp"
               >PENDING</span
             >

frontend/src/components/child/ParentView.vue

@@ -987,14 +987,14 @@ function goToAssignRewards() {
               </Teleport>
             </div>
 
-            <!-- TOO LATE badge -->
-            <span v-if="isChoreExpired(item)" class="chore-stamp">TOO LATE</span>
-            <!-- PENDING badge -->
-            <span v-else-if="isChorePending(item)" class="chore-stamp pending-stamp">PENDING</span>
             <!-- COMPLETED badge -->
-            <span v-else-if="isChoreCompletedToday(item)" class="chore-stamp completed-stamp"
+            <span v-if="isChoreCompletedToday(item)" class="chore-stamp completed-stamp"
               >COMPLETED</span
             >
+            <!-- TOO LATE badge -->
+            <span v-else-if="isChoreExpired(item)" class="chore-stamp">TOO LATE</span>
+            <!-- PENDING badge -->
+            <span v-else-if="isChorePending(item)" class="chore-stamp pending-stamp">PENDING</span>
 
             <div class="item-name">{{ item.name }}</div>
             <img v-if="item.image_url" :src="item.image_url" alt="Task Image" class="item-image" />

frontend/src/components/shared/LoginButton.vue

@@ -19,6 +19,7 @@ import {
   subscribeToPushWithResult,
   unsubscribeFromPush,
   isPushOptedOut,
+  ensurePushSubscriptionSynced,
 } from '@/services/pushSubscription'
 
 const router = useRouter()
@@ -66,6 +67,16 @@ async function fetchUserProfile() {
     if (userImageId.value) {
       await loadAvatarImages(userImageId.value)
     }
+
+    // Silent startup self-heal: if user has push enabled, ensure browser + backend
+    // subscription state are synchronized (no permission prompt).
+    if (
+      isParentAuthenticated.value &&
+      data.push_notifications_enabled !== false &&
+      !isPushOptedOut()
+    ) {
+      void ensurePushSubscriptionSynced()
+    }
   } catch (e) {
     console.error('Error fetching user profile:', e)
     profileLoading.value = false

frontend/src/services/pushSubscription.ts

@@ -36,6 +36,31 @@ function urlBase64ToUint8Array(base64String: string): Uint8Array {
   return Uint8Array.from([...rawData].map((c) => c.charCodeAt(0)))
 }
 
+function uint8ArraysEqual(a: Uint8Array, b: Uint8Array): boolean {
+  if (a.length !== b.length) return false
+  for (let i = 0; i < a.length; i += 1) {
+    if (a[i] !== b[i]) return false
+  }
+  return true
+}
+
+async function postSubscriptionToBackend(subscription: PushSubscription): Promise<boolean> {
+  const subJson = subscription.toJSON()
+  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+
+  const res = await fetch('/api/push-subscription', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      endpoint: subJson.endpoint,
+      keys: subJson.keys,
+      timezone,
+    }),
+  })
+
+  return res.ok
+}
+
 /**
  * Request notification permission and subscribe to push notifications.
  * Posts the subscription to the backend, including the user's timezone.
@@ -105,32 +130,79 @@ export async function subscribeToPushWithResult(): Promise<PushSubscribeResult>
     }
   }
 
-  const subJson = subscription.toJSON()
-  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
-
-  let res: Response
   try {
-    res = await fetch('/api/push-subscription', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        endpoint: subJson.endpoint,
-        keys: subJson.keys,
-        timezone,
-      }),
-    })
+    const ok = await postSubscriptionToBackend(subscription)
+    if (!ok) {
+      return { ok: false, reason: 'backend_error', detail: 'HTTP error posting subscription' }
+    }
   } catch (fetchErr) {
     console.warn('[Push] Network error posting subscription:', fetchErr)
     return { ok: false, reason: 'backend_error', detail: String(fetchErr) }
   }
 
-  if (!res.ok) {
-    const body = await res.text().catch(() => '')
-    console.warn(`[Push] Backend rejected subscription: HTTP ${res.status}`, body)
-    return { ok: false, reason: 'backend_error', detail: `HTTP ${res.status}: ${body}` }
+  return { ok: true }
+}
+
+/**
+ * Silent self-heal path used on app startup/login.
+ * - Never prompts for permission.
+ * - If already subscribed with a stale VAPID key, rotates the browser subscription.
+ * - Ensures backend has the current endpoint/keys.
+ */
+export async function ensurePushSubscriptionSynced(): Promise<boolean> {
+  if (!('serviceWorker' in navigator) || !('PushManager' in window)) return false
+  if (Notification.permission !== 'granted') return false
+
+  const vapidKey = await fetchVapidPublicKey()
+  if (!vapidKey) return false
+
+  let registration: ServiceWorkerRegistration
+  try {
+    await navigator.serviceWorker.register('/sw.js')
+    registration = await Promise.race([
+      navigator.serviceWorker.ready,
+      new Promise<never>((_, reject) =>
+        setTimeout(() => reject(new Error('SW ready timeout')), 10_000),
+      ),
+    ])
+  } catch (err) {
+    console.warn('[Push] Service worker not ready for self-heal:', err)
+    return false
   }
 
-  return { ok: true }
+  const desiredServerKey = urlBase64ToUint8Array(vapidKey)
+  let subscription = await registration.pushManager.getSubscription()
+
+  if (subscription) {
+    const existingServerKeyBuffer = subscription.options?.applicationServerKey
+    if (existingServerKeyBuffer) {
+      const existingServerKey = new Uint8Array(existingServerKeyBuffer)
+      const keyMatches = uint8ArraysEqual(existingServerKey, desiredServerKey)
+      if (!keyMatches) {
+        await subscription.unsubscribe()
+        subscription = null
+      }
+    }
+  }
+
+  if (!subscription) {
+    try {
+      subscription = await registration.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: desiredServerKey,
+      })
+    } catch (err) {
+      console.warn('[Push] Failed to create subscription in self-heal:', err)
+      return false
+    }
+  }
+
+  try {
+    return await postSubscriptionToBackend(subscription)
+  } catch (err) {
+    console.warn('[Push] Failed to sync subscription in self-heal:', err)
+    return false
+  }
 }
 
 /**