added defaults for now.

reworked tasks and pending rewards

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

@@ -67,7 +67,6 @@ function handleChildRewardSet(event: Event) {
 
 function handleRewardRequest(event: Event) {
   const payload = event.payload as ChildRewardRequestEventPayload
-  console.log('Received child_reward_request event:', payload)
   const childId = payload.child_id
   const rewardId = payload.reward_id
   if (child.value && childId == child.value.id) {

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

@@ -11,6 +11,7 @@ import type {
   Child,
   Event,
   Reward,
+  RewardStatus,
   ChildTaskTriggeredEventPayload,
   ChildRewardTriggeredEventPayload,
   ChildRewardRequestEventPayload,
@@ -36,6 +37,7 @@ const selectedReward = ref<Reward | null>(null)
 const childRewardListRef = ref()
 const childChoreListRef = ref()
 const childHabitListRef = ref()
+const showPendingRewardDialog = ref(false)
 
 function handleTaskTriggered(event: Event) {
   const payload = event.payload as ChildTaskTriggeredEventPayload
@@ -221,9 +223,50 @@ onUnmounted(() => {
 
 const triggerTask = (task: Task) => {
   selectedTask.value = task
+  const pendingRewardIds = childRewardListRef.value?.getPendingRewards()
+  if (pendingRewardIds && pendingRewardIds.length > 0) {
+    showPendingRewardDialog.value = true
+    return
+  }
   showConfirm.value = true
 }
 
+async function cancelRewardById(rewardId: string) {
+  if (!child.value?.id) {
+    return
+  }
+  try {
+    await fetch(`/api/child/${child.value.id}/cancel-request-reward`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ reward_id: rewardId }),
+    })
+  } catch (err) {
+    console.error(`Failed to cancel reward ID ${rewardId}:`, err)
+  }
+}
+
+async function cancelPendingReward() {
+  if (!child.value?.id) {
+    showPendingRewardDialog.value = false
+    return
+  }
+  try {
+    const pendingRewardIds = childRewardListRef.value?.getPendingRewards()
+    await Promise.all(pendingRewardIds?.map((id: string) => cancelRewardById(id)) || [])
+    childRewardListRef.value?.refresh()
+  } catch (err) {
+    console.error('Failed to cancel pending reward:', err)
+  } finally {
+    showPendingRewardDialog.value = false
+    // After cancelling, proceed to trigger the task if one was selected
+    console.log('Proceeding to trigger task after cancelling pending rewards.', selectedTask.value)
+    if (selectedTask.value) {
+      showConfirm.value = true
+    }
+  }
+}
+
 const confirmTriggerTask = async () => {
   if (!child.value?.id || !selectedTask.value) return
   try {
@@ -333,6 +376,22 @@ const childId = computed(() => child.value?.id ?? null)
         Assign Rewards
       </button>
     </div>
+
+    <!-- Pending Reward Dialog -->
+    <div v-if="showPendingRewardDialog" class="modal-backdrop">
+      <div class="modal">
+        <div class="dialog-message" style="margin-bottom: 1.2rem">
+          There is a pending reward request. The reward must be cancelled before triggering a new
+          task.<br />
+          Would you like to cancel the pending reward?
+        </div>
+        <div class="actions">
+          <button @click="cancelPendingReward">Yes, Cancel Reward</button>
+          <button @click="showPendingRewardDialog = false">No</button>
+        </div>
+      </div>
+    </div>
+
     <div v-if="showConfirm && selectedTask" class="modal-backdrop">
       <div class="modal">
         <div class="task-info">

web/vue-app/src/components/reward/ChildRewardList.vue

@@ -127,13 +127,17 @@ watch(
   },
 )
 
+function getPendingRewards(): string[] {
+  return rewards.value.filter((r) => r.redeeming).map((r) => r.id)
+}
+
 // revoke created object URLs when component unmounts to avoid memory leaks
 onBeforeUnmount(() => {
   revokeAllImageUrls()
 })
 
 // expose refresh method for parent component
-defineExpose({ refresh: () => fetchRewards(props.childId) })
+defineExpose({ refresh: () => fetchRewards(props.childId), getPendingRewards })
 
 const isAnyPending = computed(() => rewards.value.some((r) => r.redeeming))
 </script>