round 5

web/vue-app/src/components/child/ChildView.vue

@@ -246,6 +246,26 @@ async function fetchChildData(id: string | number) {
   }
 }
 
+let inactivityTimer: ReturnType<typeof setTimeout> | null = null
+
+function resetInactivityTimer() {
+  if (inactivityTimer) clearTimeout(inactivityTimer)
+  inactivityTimer = setTimeout(() => {
+    router.push({ name: 'ChildrenListView' })
+  }, 15000) // 15 seconds
+}
+
+function setupInactivityListeners() {
+  const events = ['mousemove', 'mousedown', 'keydown', 'touchstart']
+  events.forEach((evt) => window.addEventListener(evt, resetInactivityTimer))
+}
+
+function removeInactivityListeners() {
+  const events = ['mousemove', 'mousedown', 'keydown', 'touchstart']
+  events.forEach((evt) => window.removeEventListener(evt, resetInactivityTimer))
+  if (inactivityTimer) clearTimeout(inactivityTimer)
+}
+
 onMounted(async () => {
   try {
     eventBus.on('child_task_triggered', handleTaskTriggered)
@@ -269,6 +289,8 @@ onMounted(async () => {
         })
       }
     }
+    setupInactivityListeners()
+    resetInactivityTimer()
   } catch (err) {
     console.error('Error in onMounted:', err)
   }
@@ -283,6 +305,7 @@ onUnmounted(() => {
   eventBus.off('reward_modified', handleRewardModified)
   eventBus.off('child_modified', handleChildModified)
   eventBus.off('child_reward_request', handleRewardRequest)
+  removeInactivityListeners()
 })
 </script>
 

web/vue-app/src/components/child/ParentView.vue

@@ -53,7 +53,6 @@ function handleRewardTriggered(event: Event) {
 }
 
 function handleChildTaskSet(event: Event) {
-  console.log('handleChildTaskSet called')
   const payload = event.payload as ChildTasksSetEventPayload
   if (child.value && payload.child_id == child.value.id) {
     tasks.value = payload.task_ids
@@ -235,7 +234,6 @@ const confirmTriggerTask = async () => {
     })
     if (!resp.ok) return
     const data = await resp.json()
-    console.log('Trigger task response data:', child.value.id, data.id)
     if (child.value && child.value.id === data.id) child.value.points = data.points
   } catch (err) {
     console.error('Failed to trigger task:', err)
@@ -246,7 +244,6 @@ const confirmTriggerTask = async () => {
 }
 
 const triggerReward = (reward: Reward, redeemable: boolean) => {
-  console.log('Handle trigger reward:', reward, redeemable)
   if (!redeemable) return
   selectedReward.value = reward
   showRewardConfirm.value = true

web/vue-app/src/components/child/RewardAssignView.vue

@@ -1,10 +1,24 @@
 <template>
   <div class="reward-assign-view">
     <h2>Assign Rewards</h2>
-    <div class="reward-list-scroll">
-      <RewardList ref="rewardListRef" :child-id="childId" :selectable="true" />
+    <div class="reward-view">
+      <div v-if="rewardCountRef == 0" class="no-rewards-message">
+        <div>No rewards available</div>
+        <div class="sub-message">
+          <button class="create-btn" @click="goToCreateReward">Create</button> a reward
+        </div>
+      </div>
+      <div class="reward-list-scroll">
+        <RewardList
+          v-if="rewardCountRef != 0"
+          ref="rewardListRef"
+          :child-id="childId"
+          :selectable="true"
+          @loading-complete="(count) => (rewardCountRef = count)"
+        />
+      </div>
     </div>
-    <div class="actions">
+    <div class="actions" v-if="rewardCountRef != 0">
       <button class="btn cancel" @click="onCancel">Cancel</button>
       <button class="btn submit" @click="onSubmit">Submit</button>
     </div>
@@ -21,6 +35,11 @@ const router = useRouter()
 const childId = route.params.id
 
 const rewardListRef = ref()
+const rewardCountRef = ref(-1)
+
+function goToCreateReward() {
+  router.push({ name: 'CreateReward' })
+}
 
 async function onSubmit() {
   const selectedIds = rewardListRef.value?.selectedRewards ?? []
@@ -91,4 +110,47 @@ h2 {
 .btn.submit:hover {
   background: #5a67d8;
 }
+.reward-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  min-height: 0;
+}
+
+.no-rewards-message {
+  margin: 2rem 0;
+  font-size: 1.15rem;
+  font-weight: 600;
+  text-align: center;
+  color: #fdfdfd;
+  line-height: 1.5;
+}
+.sub-message {
+  margin-top: 0.3rem;
+  font-size: 1rem;
+  font-weight: 400;
+  color: #b5ccff;
+}
+.create-btn {
+  background: #fff;
+  color: #2563eb;
+  border: 2px solid #2563eb;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  padding: 0.2rem 0.5rem;
+  margin-right: 0.1rem;
+  cursor: pointer;
+  transition:
+    background 0.18s,
+    color 0.18s;
+}
+.create-btn:hover {
+  background: #2563eb;
+  color: #fff;
+}
 </style>

web/vue-app/src/components/child/TaskAssignView.vue

@@ -1,15 +1,25 @@
 <template>
   <div class="task-assign-view">
     <h2>Assign Tasks</h2>
-    <div class="task-list-scroll">
-      <TaskList
-        ref="taskListRef"
-        :child-id="childId"
-        :selectable="true"
-        :type-filter="typeFilter"
-      />
+    <div class="task-view">
+      <div v-if="taskCountRef == 0" class="no-tasks-message">
+        <div>No tasks available</div>
+        <div class="sub-message">
+          <button class="create-btn" @click="goToCreateTask">Create</button> a task
+        </div>
+      </div>
+      <div class="task-list-scroll">
+        <TaskList
+          v-if="taskCountRef != 0"
+          ref="taskListRef"
+          :child-id="childId"
+          :selectable="true"
+          :type-filter="typeFilter"
+          @loading-complete="(count) => (taskCountRef = count)"
+        />
+      </div>
     </div>
-    <div class="actions">
+    <div class="actions" v-if="taskCountRef > 0">
       <button class="btn cancel" @click="onCancel">Cancel</button>
       <button class="btn submit" @click="onSubmit">Submit</button>
     </div>
@@ -26,6 +36,7 @@ const router = useRouter()
 const childId = route.params.id
 
 const taskListRef = ref()
+const taskCountRef = ref(-1)
 
 const typeFilter = computed(() => {
   if (route.params.type === 'good') return 'good'
@@ -33,6 +44,10 @@ const typeFilter = computed(() => {
   return 'all'
 })
 
+function goToCreateTask() {
+  router.push({ name: 'CreateTask' })
+}
+
 async function onSubmit() {
   const selectedIds = taskListRef.value?.selectedTasks ?? []
   try {
@@ -102,4 +117,48 @@ h2 {
 .btn.submit:hover {
   background: #5a67d8;
 }
+
+.task-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  min-height: 0;
+}
+
+.no-tasks-message {
+  margin: 2rem 0;
+  font-size: 1.15rem;
+  font-weight: 600;
+  text-align: center;
+  color: #fdfdfd;
+  line-height: 1.5;
+}
+.sub-message {
+  margin-top: 0.3rem;
+  font-size: 1rem;
+  font-weight: 400;
+  color: #b5ccff;
+}
+.create-btn {
+  background: #fff;
+  color: #2563eb;
+  border: 2px solid #2563eb;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  padding: 0.2rem 0.5rem;
+  margin-right: 0.1rem;
+  cursor: pointer;
+  transition:
+    background 0.18s,
+    color 0.18s;
+}
+.create-btn:hover {
+  background: #2563eb;
+  color: #fff;
+}
 </style>