From f82ba251608ffa2124d722f2d748f74c06196fbe Mon Sep 17 00:00:00 2001
From: Ryan Kegel <ryan.kegel@gmail.com>
Date: Tue, 25 Nov 2025 21:22:30 -0500
Subject: [PATCH] round 2

---
 api/child_api.py                              |  46 ++++
 api/child_rewards.py                          |  15 ++
 api/reward_api.py                             |  44 +++-
 models/base.py                                |  32 +++
 models/child.py                               |  20 +-
 models/image.py                               |  24 +-
 models/reward.py                              |  20 +-
 models/task.py                                |  20 +-
 .../src/components/ChildrenListView.vue       |  16 +-
 .../src/components/reward/RewardEditView.vue  | 244 ++++++++++++++++++
 .../src/components/reward/RewardList.vue      | 212 +++++++++++++++
 .../src/components/reward/RewardView.vue      | 143 +++++++++-
 .../src/components/task/TaskEditView.vue      |   1 -
 web/vue-app/src/layout/ChildLayout.vue        | 105 +++++---
 web/vue-app/src/layout/ParentLayout.vue       |   6 +-
 web/vue-app/src/router/index.ts               |  12 +
 16 files changed, 860 insertions(+), 100 deletions(-)
 create mode 100644 api/child_rewards.py
 create mode 100644 models/base.py
 create mode 100644 web/vue-app/src/components/reward/RewardEditView.vue
 create mode 100644 web/vue-app/src/components/reward/RewardList.vue

diff --git a/api/child_api.py b/api/child_api.py
index a81e8f9..f36a2ba 100644
--- a/api/child_api.py
+++ b/api/child_api.py
@@ -3,6 +3,7 @@ from tinydb import Query
 from db.db import child_db, task_db, reward_db
 from api.reward_status import RewardStatus
 from api.child_tasks import ChildTask
+from api.child_rewards import ChildReward
 
 from models.child import Child
 from models.task import Task
@@ -227,6 +228,51 @@ def remove_reward_from_child(id):
         return jsonify({'message': f'Reward {reward_id} removed from {child["name"]}.'}), 200
     return jsonify({'error': 'Reward not assigned to child'}), 400
 
+@child_api.route('/child/<id>/list-rewards', methods=['GET'])
+def list_child_rewards(id):
+    ChildQuery = Query()
+    result = child_db.search(ChildQuery.id == id)
+    if not result:
+        return jsonify({'error': 'Child not found'}), 404
+
+    child = result[0]
+    reward_ids = child.get('rewards', [])
+
+    RewardQuery = Query()
+    child_rewards = []
+    for rid in reward_ids:
+        reward = reward_db.get(RewardQuery.id == rid)
+        if not reward:
+            continue
+        cr = ChildReward(reward.get('name'), reward.get('cost'), reward.get('image_id'), reward.get('id'))
+        child_rewards.append(cr.to_dict())
+
+    return jsonify({'rewards': child_rewards}), 200
+
+@child_api.route('/child/<id>/list-assignable-rewards', methods=['GET'])
+def list_assignable_rewards(id):
+    ChildQuery = Query()
+    result = child_db.search(ChildQuery.id == id)
+    if not result:
+        return jsonify({'error': 'Child not found'}), 404
+
+    child = result[0]
+    assigned_ids = set(child.get('rewards', []))
+
+    all_reward_ids = [r.get('id') for r in reward_db.all() if r and r.get('id')]
+    assignable_ids = [rid for rid in all_reward_ids if rid not in assigned_ids]
+
+    RewardQuery = Query()
+    assignable_rewards = []
+    for rid in assignable_ids:
+        reward = reward_db.get(RewardQuery.id == rid)
+        if not reward:
+            continue
+        cr = ChildReward(reward.get('name'), reward.get('cost'), reward.get('image_id'), reward.get('id'))
+        assignable_rewards.append(cr.to_dict())
+
+    return jsonify({'rewards': assignable_rewards, 'count': len(assignable_rewards)}), 200
+
 @child_api.route('/child/<id>/trigger-reward', methods=['POST'])
 def trigger_child_reward(id):
     data = request.get_json()
diff --git a/api/child_rewards.py b/api/child_rewards.py
new file mode 100644
index 0000000..97c8b09
--- /dev/null
+++ b/api/child_rewards.py
@@ -0,0 +1,15 @@
+# api/child_rewards.py
+class ChildReward:
+    def __init__(self, name: str, cost: int, image_id: str, reward_id: str):
+        self.name = name
+        self.cost = cost
+        self.image_id = image_id
+        self.id = reward_id
+
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'name': self.name,
+            'cost': self.cost,
+            'image_id': self.image_id
+        }
diff --git a/api/reward_api.py b/api/reward_api.py
index 212f2f9..8c372a4 100644
--- a/api/reward_api.py
+++ b/api/reward_api.py
@@ -19,6 +19,8 @@ def add_reward():
     reward_db.insert(reward.to_dict())
     return jsonify({'message': f'Reward {name} added.'}), 201
 
+
+
 @reward_api.route('/reward/<id>', methods=['GET'])
 def get_reward(id):
     RewardQuery = Query()
@@ -45,4 +47,44 @@ def delete_reward(id):
                 rewards.remove(id)
                 child_db.update({'rewards': rewards}, ChildQuery.id == child.get('id'))
         return jsonify({'message': f'Reward {id} deleted.'}), 200
-    return jsonify({'error': 'Reward not found'}), 404
\ No newline at end of file
+    return jsonify({'error': 'Reward not found'}), 404
+
+@reward_api.route('/reward/<id>/edit', methods=['PUT'])
+def edit_reward(id):
+    RewardQuery = Query()
+    existing = reward_db.get(RewardQuery.id == id)
+    if not existing:
+        return jsonify({'error': 'Reward not found'}), 404
+
+    data = request.get_json(force=True) or {}
+    updates = {}
+
+    if 'name' in data:
+        name = (data.get('name') or '').strip()
+        if not name:
+            return jsonify({'error': 'Name cannot be empty'}), 400
+        updates['name'] = name
+
+    if 'description' in data:
+        desc = (data.get('description') or '').strip()
+        if not desc:
+            return jsonify({'error': 'Description cannot be empty'}), 400
+        updates['description'] = desc
+
+    if 'cost' in data:
+        cost = data.get('cost')
+        if not isinstance(cost, int):
+            return jsonify({'error': 'Cost must be an integer'}), 400
+        if cost <= 0:
+            return jsonify({'error': 'Cost must be a positive integer'}), 400
+        updates['cost'] = cost
+
+    if 'image_id' in data:
+        updates['image_id'] = data.get('image_id', '')
+
+    if not updates:
+        return jsonify({'error': 'No valid fields to update'}), 400
+
+    reward_db.update(updates, RewardQuery.id == id)
+    updated = reward_db.get(RewardQuery.id == id)
+    return jsonify(updated), 200
diff --git a/models/base.py b/models/base.py
new file mode 100644
index 0000000..79b9878
--- /dev/null
+++ b/models/base.py
@@ -0,0 +1,32 @@
+from dataclasses import dataclass, field
+import uuid
+import time
+
+@dataclass
+class BaseModel:
+    id: str = field(init=False)
+    created_at: float = field(init=False)
+    updated_at: float = field(init=False)
+
+    def __post_init__(self):
+        self.id = str(uuid.uuid4())
+        now = time.time()
+        self.created_at = now
+        self.updated_at = now
+
+    def touch(self):
+        self.updated_at = time.time()
+
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'created_at': self.created_at,
+            'updated_at': self.updated_at
+        }
+
+    @classmethod
+    def _apply_base_fields(cls, obj, d: dict):
+        obj.id = d.get('id', obj.id)
+        obj.created_at = d.get('created_at', obj.created_at)
+        obj.updated_at = d.get('updated_at', obj.updated_at)
+        return obj
diff --git a/models/child.py b/models/child.py
index bae131f..33331f2 100644
--- a/models/child.py
+++ b/models/child.py
@@ -1,24 +1,18 @@
 from dataclasses import dataclass, field
-import uuid
+from models.base import BaseModel
 
 @dataclass
-class Child:
+class Child(BaseModel):
     name: str
     age: int | None = None
     tasks: list[str] = field(default_factory=list)
     rewards: list[str] = field(default_factory=list)
     points: int = 0
     image_id: str | None = None
-    id: str | None = None
-
-    def __post_init__(self):
-        if self.id is None:
-            self.id = str(uuid.uuid4())
 
     @classmethod
     def from_dict(cls, d: dict):
-        return cls(
-            id=d.get('id'),
+        obj = cls(
             name=d.get('name'),
             age=d.get('age'),
             tasks=d.get('tasks', []),
@@ -26,14 +20,16 @@ class Child:
             points=d.get('points', 0),
             image_id=d.get('image_id')
         )
+        return cls._apply_base_fields(obj, d)
 
     def to_dict(self):
-        return {
-            'id': self.id,
+        base = super().to_dict()
+        base.update({
             'name': self.name,
             'age': self.age,
             'tasks': self.tasks,
             'rewards': self.rewards,
             'points': self.points,
             'image_id': self.image_id
-        }
+        })
+        return base
diff --git a/models/image.py b/models/image.py
index a7816d5..046cf67 100644
--- a/models/image.py
+++ b/models/image.py
@@ -1,30 +1,26 @@
 from dataclasses import dataclass
-import uuid
+from models.base import BaseModel
 
 @dataclass
-class Image:
+class Image(BaseModel):
     type: int
     extension: str
     permanent: bool = False
-    id: str | None = None
-
-    def __post_init__(self):
-        if self.id is None:
-            self.id = str(uuid.uuid4())
 
     @classmethod
     def from_dict(cls, d: dict):
-        return cls(
-            id=d.get('id'),
+        obj = cls(
             type=d.get('type'),
-            permanent=d.get('permanent', False),
-            extension=d.get('extension')
+            extension=d.get('extension'),
+            permanent=d.get('permanent', False)
         )
+        return cls._apply_base_fields(obj, d)
 
     def to_dict(self):
-        return {
-            'id': self.id,
+        base = super().to_dict()
+        base.update({
             'type': self.type,
             'permanent': self.permanent,
             'extension': self.extension
-        }
+        })
+        return base
diff --git a/models/reward.py b/models/reward.py
index 6c8f697..c8ae1ac 100644
--- a/models/reward.py
+++ b/models/reward.py
@@ -1,33 +1,29 @@
 from dataclasses import dataclass
-import uuid
+from models.base import BaseModel
 
 @dataclass
-class Reward:
+class Reward(BaseModel):
     name: str
     description: str
     cost: int
     image_id: str | None = None
-    id: str | None = None
-
-    def __post_init__(self):
-        if self.id is None:
-            self.id = str(uuid.uuid4())
 
     @classmethod
     def from_dict(cls, d: dict):
-        return cls(
-            id=d.get('id'),
+        obj = cls(
             name=d.get('name'),
             description=d.get('description'),
             cost=d.get('cost', 0),
             image_id=d.get('image_id')
         )
+        return cls._apply_base_fields(obj, d)
 
     def to_dict(self):
-        return {
-            'id': self.id,
+        base = super().to_dict()
+        base.update({
             'name': self.name,
             'description': self.description,
             'cost': self.cost,
             'image_id': self.image_id
-        }
+        })
+        return base
diff --git a/models/task.py b/models/task.py
index fae0ea9..0a22bc1 100644
--- a/models/task.py
+++ b/models/task.py
@@ -1,33 +1,29 @@
 from dataclasses import dataclass
-import uuid
+from models.base import BaseModel
 
 @dataclass
-class Task:
+class Task(BaseModel):
     name: str
     points: int
     is_good: bool
     image_id: str | None = None
-    id: str | None = None
-
-    def __post_init__(self):
-        if self.id is None:
-            self.id = str(uuid.uuid4())
 
     @classmethod
     def from_dict(cls, d: dict):
-        return cls(
-            id=d.get('id'),
+        obj = cls(
             name=d.get('name'),
             points=d.get('points', 0),
             is_good=d.get('is_good', True),
             image_id=d.get('image_id')
         )
+        return cls._apply_base_fields(obj, d)
 
     def to_dict(self):
-        return {
-            'id': self.id,
+        base = super().to_dict()
+        base.update({
             'name': self.name,
             'points': self.points,
             'is_good': self.is_good,
             'image_id': self.image_id
-        }
+        })
+        return base
diff --git a/web/vue-app/src/components/ChildrenListView.vue b/web/vue-app/src/components/ChildrenListView.vue
index c316e6a..1be1194 100644
--- a/web/vue-app/src/components/ChildrenListView.vue
+++ b/web/vue-app/src/components/ChildrenListView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { getCachedImageUrl, revokeAllImageUrls } from '../common/imageCache'
 import { isParentAuthenticated } from '../stores/auth'
@@ -194,6 +194,11 @@ const deletePoints = async (childId: string | number, evt?: Event) => {
   }
 }
 
+const gridColumns = computed(() => {
+  const n = Math.min(children.value.length, 3)
+  return `repeat(${n || 1}, minmax(var(--card-width, 289px), 1fr))`
+})
+
 onBeforeUnmount(() => {
   document.removeEventListener('click', onDocClick, true)
   revokeAllImageUrls()
@@ -314,8 +319,6 @@ onBeforeUnmount(() => {
 }
 
 .container {
-  width: 100%;
-  max-width: 1200px;
   display: flex;
   flex-direction: column;
 }
@@ -348,9 +351,9 @@ h1 {
 
 .grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 1.5rem;
-  flex: 1;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1.2rem 1.2rem;
+  justify-items: center;
 }
 
 .card {
@@ -363,6 +366,7 @@ h1 {
   flex-direction: column;
   cursor: pointer;
   position: relative; /* for kebab positioning */
+  width: 250px;
 }
 
 /* kebab button / menu (fixed-size button, absolutely positioned menu) */
diff --git a/web/vue-app/src/components/reward/RewardEditView.vue b/web/vue-app/src/components/reward/RewardEditView.vue
new file mode 100644
index 0000000..2bce50b
--- /dev/null
+++ b/web/vue-app/src/components/reward/RewardEditView.vue
@@ -0,0 +1,244 @@
+<template>
+  <div class="reward-edit-view">
+    <h2>{{ isEdit ? 'Edit Reward' : 'Create Reward' }}</h2>
+    <div v-if="loading" class="loading-message">Loading reward...</div>
+    <form v-else @submit.prevent="submit" class="reward-form">
+      <label>
+        Reward Name
+        <input ref="nameInput" v-model="name" type="text" required maxlength="64" />
+      </label>
+      <label>
+        Description
+        <input v-model="description" type="text" maxlength="128" />
+      </label>
+      <label>
+        Cost
+        <input v-model.number="cost" type="number" min="1" max="1000" required />
+      </label>
+      <div class="form-group image-picker-group">
+        <label for="reward-image">Image</label>
+        <ImagePicker
+          id="reward-image"
+          v-model="selectedImageId"
+          :image-type="2"
+          @add-image="onAddImage"
+        />
+      </div>
+      <div v-if="error" class="error">{{ error }}</div>
+      <div class="actions">
+        <button type="button" @click="handleCancel" :disabled="loading">Cancel</button>
+        <button type="submit" :disabled="loading">
+          {{ isEdit ? 'Save' : 'Create' }}
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed, nextTick } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import ImagePicker from '../ImagePicker.vue'
+
+const props = defineProps<{ id?: string }>()
+const route = useRoute()
+const router = useRouter()
+const isEdit = computed(() => !!props.id)
+
+const name = ref('')
+const description = ref('')
+const cost = ref(1)
+const selectedImageId = ref<string | null>(null)
+const localImageFile = ref<File | null>(null)
+const loading = ref(false)
+const error = ref<string | null>(null)
+const nameInput = ref<HTMLInputElement | null>(null)
+
+onMounted(async () => {
+  if (isEdit.value && props.id) {
+    loading.value = true
+    try {
+      const resp = await fetch(`/api/reward/${props.id}`)
+      if (!resp.ok) throw new Error('Failed to load reward')
+      const data = await resp.json()
+      name.value = data.name
+      description.value = data.description ?? ''
+      cost.value = Number(data.cost) || 1
+      selectedImageId.value = data.image_id ?? null
+    } catch (e) {
+      error.value = 'Could not load reward.'
+    } finally {
+      loading.value = false
+      await nextTick()
+      nameInput.value?.focus()
+    }
+  } else {
+    await nextTick()
+    nameInput.value?.focus()
+  }
+})
+
+function onAddImage({ id, file }: { id: string; file: File }) {
+  if (id === 'local-upload') {
+    localImageFile.value = file
+  }
+}
+
+function handleCancel() {
+  router.back()
+}
+
+const submit = async () => {
+  let imageId = selectedImageId.value
+  error.value = null
+  if (!name.value.trim()) {
+    error.value = 'Reward name is required.'
+    return
+  }
+  if (cost.value < 1) {
+    error.value = 'Cost must be at least 1.'
+    return
+  }
+  loading.value = true
+
+  // If the selected image is a local upload, upload it first
+  if (imageId === 'local-upload' && localImageFile.value) {
+    const formData = new FormData()
+    formData.append('file', localImageFile.value)
+    formData.append('type', '2')
+    formData.append('permanent', 'false')
+    try {
+      const resp = await fetch('/api/image/upload', {
+        method: 'POST',
+        body: formData,
+      })
+      if (!resp.ok) throw new Error('Image upload failed')
+      const data = await resp.json()
+      imageId = data.id
+    } catch (err) {
+      alert('Failed to upload image.')
+      loading.value = false
+      return
+    }
+  }
+
+  // Now update or create the reward
+  try {
+    let resp
+    if (isEdit.value && props.id) {
+      resp = await fetch(`/api/reward/${props.id}/edit`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: name.value,
+          description: description.value,
+          cost: cost.value,
+          image_id: imageId,
+        }),
+      })
+    } else {
+      resp = await fetch('/api/reward/add', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: name.value,
+          description: description.value,
+          cost: cost.value,
+          image_id: imageId,
+        }),
+      })
+    }
+    if (!resp.ok) throw new Error('Failed to save reward')
+    await router.push({ name: 'RewardView' })
+  } catch (err) {
+    alert('Failed to save reward.')
+  }
+  loading.value = false
+}
+</script>
+
+<style scoped>
+.reward-edit-view {
+  max-width: 400px;
+  width: 100%;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 4px 24px #667eea22;
+  padding: 2rem 2.2rem 1.5rem 2.2rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+h2 {
+  text-align: center;
+  margin-bottom: 1.5rem;
+  color: #667eea;
+}
+.reward-form label {
+  display: block;
+  margin-bottom: 1.1rem;
+  font-weight: 500;
+  color: #444;
+  width: 100%;
+}
+.reward-form input[type='text'],
+.reward-form input[type='number'] {
+  display: block;
+  width: 100%;
+  margin-top: 0.4rem;
+  padding: 0.5rem;
+  border-radius: 7px;
+  border: 1px solid #cbd5e1;
+  font-size: 1rem;
+  background: #f8fafc;
+  box-sizing: border-box;
+}
+button[type='submit'] {
+  background: #667eea;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 0.6rem 1.4rem;
+  font-weight: 600;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background 0.18s;
+}
+
+button[type='submit']:hover:not(:disabled) {
+  background: #5a67d8;
+}
+
+button[type='button'] {
+  background: #f3f3f3;
+  color: #666;
+  border: none;
+  border-radius: 8px;
+  padding: 0.6rem 1.4rem;
+  font-weight: 600;
+  font-size: 1rem;
+  cursor: pointer;
+}
+.form-group.image-picker-group {
+  width: 100%;
+}
+.actions {
+  margin-top: 1.2rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+  width: 100%;
+}
+.error {
+  color: #e53e3e;
+  margin-bottom: 1rem;
+}
+.loading-message {
+  text-align: center;
+  color: #667eea;
+  font-size: 1.1rem;
+  margin: 2rem 0;
+}
+</style>
diff --git a/web/vue-app/src/components/reward/RewardList.vue b/web/vue-app/src/components/reward/RewardList.vue
new file mode 100644
index 0000000..90052d3
--- /dev/null
+++ b/web/vue-app/src/components/reward/RewardList.vue
@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, computed } from 'vue'
+import { getCachedImageUrl } from '../../common/imageCache'
+const props = defineProps<{
+  childId?: string | number
+  assignable?: boolean
+  deletable?: boolean
+}>()
+const emit = defineEmits(['edit-reward', 'delete-reward'])
+
+const rewards = ref<
+  {
+    id: string
+    name: string
+    description?: string
+    cost: number
+    image_id?: string | null
+    image_url?: string | null
+  }[]
+>([])
+
+const loading = ref(true)
+const error = ref<string | null>(null)
+
+const fetchRewards = async () => {
+  loading.value = true
+  error.value = null
+  let url = ''
+  if (props.childId) {
+    if (props.assignable) {
+      url = `/api/child/${props.childId}/list-assignable-rewards`
+    } else {
+      url = `/api/child/${props.childId}/list-rewards`
+    }
+  } else {
+    url = '/api/reward/list'
+  }
+
+  try {
+    const resp = await fetch(url)
+    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+    const data = await resp.json()
+    const rewardList = data.rewards || []
+    // Fetch images for each reward if image_id is present
+    await Promise.all(
+      rewardList.map(async (reward: any) => {
+        if (reward.image_id) {
+          try {
+            reward.image_url = await getCachedImageUrl(reward.image_id)
+          } catch (e) {
+            reward.image_url = null
+          }
+        }
+      }),
+    )
+    rewards.value = rewardList
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to fetch rewards'
+    rewards.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(fetchRewards)
+watch(() => [props.childId, props.assignable], fetchRewards)
+
+const handleEdit = (rewardId: string) => {
+  emit('edit-reward', rewardId)
+}
+
+const handleDelete = (rewardId: string) => {
+  emit('delete-reward', rewardId)
+}
+
+defineExpose({ refresh: fetchRewards })
+
+const ITEM_HEIGHT = 52 // px, adjust to match your .reward-list-item + margin
+const listHeight = computed(() => {
+  // Add a little for padding, separators, etc.
+  const n = rewards.value.length
+  return `${Math.min(n * ITEM_HEIGHT + 8, window.innerHeight - 80)}px`
+})
+</script>
+
+<template>
+  <div class="reward-listbox" :style="{ maxHeight: `min(${listHeight}, calc(100vh - 4.5rem))` }">
+    <div v-if="loading" class="loading">Loading rewards...</div>
+    <div v-else-if="error" class="error">{{ error }}</div>
+    <div v-else-if="rewards.length === 0" class="empty">No rewards found.</div>
+    <div v-else>
+      <div v-for="(reward, idx) in rewards" :key="reward.id">
+        <div class="reward-list-item" @click="handleEdit(reward.id)">
+          <img v-if="reward.image_url" :src="reward.image_url" alt="Reward" class="reward-image" />
+          <span class="reward-name">{{ reward.name }}</span>
+          <span class="reward-cost"> {{ reward.cost }} pts </span>
+          <button
+            v-if="props.deletable"
+            class="delete-btn"
+            @click.stop="handleDelete(reward.id)"
+            aria-label="Delete reward"
+            type="button"
+          >
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+              <circle cx="10" cy="10" r="9" fill="#fff" stroke="#ef4444" stroke-width="2" />
+              <path
+                d="M7 7l6 6M13 7l-6 6"
+                stroke="#ef4444"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+            </svg>
+          </button>
+        </div>
+        <div v-if="idx < rewards.length - 1" class="reward-separator"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.reward-listbox {
+  flex: 1 1 auto;
+  width: 100%;
+  max-width: 480px;
+  max-height: calc(100vh - 4.5rem);
+  overflow-y: auto;
+  margin: 0.2rem 0 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+  background: #fff5;
+  padding: 0.2rem 0.2rem 0.2rem;
+  border-radius: 12px;
+}
+.reward-list-item {
+  display: flex;
+  align-items: center;
+  border: 2px outset #38c172;
+  border-radius: 8px;
+  padding: 0.2rem 1rem;
+  background: #f8fafc;
+  font-size: 1.05rem;
+  font-weight: 500;
+  transition: border 0.18s;
+  margin-bottom: 0.2rem;
+  margin-left: 0.2rem;
+  margin-right: 0.2rem;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
+  box-sizing: border-box;
+}
+.reward-image {
+  width: 36px;
+  height: 36px;
+  object-fit: cover;
+  border-radius: 8px;
+  margin-right: 0.7rem;
+  background: #eee;
+  flex-shrink: 0;
+}
+.reward-name {
+  flex: 1;
+  text-align: left;
+}
+.reward-cost {
+  min-width: 60px;
+  text-align: right;
+  font-weight: 600;
+}
+.loading,
+.error,
+.empty {
+  margin: 1.2rem 0;
+  color: #888;
+}
+.error {
+  color: #e53e3e;
+}
+.reward-list-item:last-child {
+  margin-bottom: 0;
+}
+.reward-separator {
+  height: 0px;
+  background: #0000;
+  margin: 0rem 0.2rem;
+  border-radius: 0px;
+}
+.delete-btn {
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  padding: 0.15rem;
+  margin-left: 0.7rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  transition:
+    background 0.15s,
+    box-shadow 0.15s;
+  width: 2rem;
+  height: 2rem;
+  opacity: 0.92;
+}
+.delete-btn:hover {
+  background: #ffeaea;
+  box-shadow: 0 0 0 2px #ef444422;
+  opacity: 1;
+}
+.delete-btn svg {
+  display: block;
+}
+</style>
diff --git a/web/vue-app/src/components/reward/RewardView.vue b/web/vue-app/src/components/reward/RewardView.vue
index c67e168..6b5dd88 100644
--- a/web/vue-app/src/components/reward/RewardView.vue
+++ b/web/vue-app/src/components/reward/RewardView.vue
@@ -1,14 +1,145 @@
 <template>
-  <div class="reward-view-stub">
-    <h2>Reward View</h2>
-    <p>This is a stub for the Reward View.</p>
+  <div class="reward-view">
+    <RewardList
+      ref="rewardListRef"
+      :deletable="true"
+      @edit-reward="(rewardId) => $router.push({ name: 'EditReward', params: { id: rewardId } })"
+      @delete-reward="confirmDeleteReward"
+    />
+
+    <!-- Floating Action Button -->
+    <button class="fab" @click="createReward" aria-label="Create Reward">
+      <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
+        <circle cx="14" cy="14" r="14" fill="#667eea" />
+        <path d="M14 8v12M8 14h12" stroke="#fff" stroke-width="2" stroke-linecap="round" />
+      </svg>
+    </button>
+
+    <div v-if="showConfirm" class="modal-backdrop">
+      <div class="modal">
+        <p>Are you sure you want to delete this reward?</p>
+        <div class="actions">
+          <button @click="deleteReward">Yes, Delete</button>
+          <button @click="showConfirm = false">Cancel</button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import RewardList from './RewardList.vue'
+
+const $router = useRouter()
+
+const showConfirm = ref(false)
+const rewardToDelete = ref<string | null>(null)
+const rewardListRef = ref()
+
+function confirmDeleteReward(rewardId: string) {
+  rewardToDelete.value = rewardId
+  showConfirm.value = true
+}
+
+const deleteReward = async () => {
+  if (!rewardToDelete.value) return
+  try {
+    const resp = await fetch(`/api/reward/${rewardToDelete.value}`, {
+      method: 'DELETE',
+    })
+    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+    // Refresh the reward list after successful delete
+    rewardListRef.value?.refresh()
+    console.log(`Reward ${rewardToDelete.value} deleted successfully`)
+  } catch (err) {
+    console.error('Failed to delete reward:', err)
+  } finally {
+    showConfirm.value = false
+    rewardToDelete.value = null
+  }
+}
+
+const createReward = () => {
+  $router.push({ name: 'CreateReward' })
+}
+</script>
+
 <style scoped>
-.reward-view-stub {
-  padding: 2rem;
+.reward-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  min-height: 0;
+}
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1200;
+}
+.modal {
+  background: #fff;
+  color: #222;
+  padding: 1.5rem 2rem;
+  border-radius: 12px;
+  min-width: 240px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
   text-align: center;
-  color: #764ba2;
+}
+.actions {
+  margin-top: 1.2rem;
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+}
+.actions button {
+  padding: 0.5rem 1.2rem;
+  border-radius: 8px;
+  border: none;
+  font-weight: 600;
+  cursor: pointer;
+}
+.actions button:first-child {
+  background: #ef4444;
+  color: #fff;
+}
+.actions button:last-child {
+  background: #f3f3f3;
+  color: #666;
+}
+.actions button:last-child:hover {
+  background: #e2e8f0;
+}
+
+/* Floating Action Button styles */
+.fab {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  background: #667eea;
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  font-size: 24px;
+  z-index: 1300;
+}
+.fab:hover {
+  background: #5a67d8;
 }
 </style>
diff --git a/web/vue-app/src/components/task/TaskEditView.vue b/web/vue-app/src/components/task/TaskEditView.vue
index 514a062..2c1d977 100644
--- a/web/vue-app/src/components/task/TaskEditView.vue
+++ b/web/vue-app/src/components/task/TaskEditView.vue
@@ -195,7 +195,6 @@ function onAddImage({ id, file }: { id: string; file: File }) {
   margin: 0 auto;
   display: flex;
   flex-direction: column;
-  height: 100vh;
   overflow-y: auto;
   box-sizing: border-box;
 }
diff --git a/web/vue-app/src/layout/ChildLayout.vue b/web/vue-app/src/layout/ChildLayout.vue
index 0b38ebe..33ab538 100644
--- a/web/vue-app/src/layout/ChildLayout.vue
+++ b/web/vue-app/src/layout/ChildLayout.vue
@@ -20,9 +20,11 @@ const showBack = computed(() => route.path !== '/child')
 <template>
   <div class="layout-root">
     <header class="topbar">
-      <div class="topbar-inner">
-        <button v-if="showBack" class="back-btn" @click="handleBack">← Back</button>
-        <div class="spacer"></div>
+      <div style="height: 100%; display: flex; align-items: center">
+        <button v-show="showBack" class="back-btn" @click="handleBack" tabindex="0">← Back</button>
+      </div>
+      <div></div>
+      <div class="login-btn">
         <LoginButton />
       </div>
     </header>
@@ -35,71 +37,106 @@ const showBack = computed(() => route.path !== '/child')
 <style scoped>
 .layout-root {
   width: 100%;
-  box-sizing: border-box;
   min-height: 100vh;
+  height: 100vh;
   display: flex;
   flex-direction: column;
-
-  /* Reduce top padding */
-  padding: 0.5rem 2rem 2rem 2rem;
+  padding: 0; /* Remove bottom padding */
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
 
-/* top bar holds login button at top-right */
+/* top bar holds title and logout button */
 .topbar {
-  width: 100%;
-  padding: 12px 20px;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-}
-
-.topbar-inner {
-  width: 100%;
-  max-width: 1200px;
-  display: flex;
+  display: grid;
+  grid-template-columns: 76px 1fr 76px;
   align-items: center;
+  padding: 5px 5px;
 }
 
-/* spacer pushes button to the right */
-.spacer {
-  flex: 1;
+.title {
+  font-size: 1.5rem;
+  color: white;
+  margin: 0;
+}
+
+/* View Selector styles */
+.view-selector {
+  justify-self: center;
+}
+
+.view-selector button {
+  background: #fff;
+  color: #667eea;
+  border: none;
+  border-radius: 8px 8px 0 0;
+  padding: 0.6rem 1.2rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background 0.18s,
+    color 0.18s;
+  font-size: 1rem;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
+}
+
+.view-selector button.active {
+  background: #7257b3;
+  color: #fff;
+}
+
+.view-selector button.active svg {
+  stroke: #fff;
+}
+
+.view-selector button:hover:not(.active) {
+  background: #e6eaff;
 }
 
 /* main content remains centered */
 .main-content {
+  flex: 1 1 auto;
   width: 100%;
-  display: flex;
   justify-content: center;
-  align-items: flex-start; /* content starts higher */
+  align-items: flex-start;
   box-sizing: border-box;
-
-  /* Reduce top padding */
-  padding: 4px 20px 40px;
+  min-height: 0;
+  height: 0; /* Ensures children can use 100% height */
+  overflow: hidden; /* Prevents parent from scrolling */
+  overflow-y: visible;
 }
 
-/* back button style */
+/* back button specific styles */
 .back-btn {
   background: white;
   border: 0;
   padding: 0.6rem 1rem;
-  border-radius: 8px;
+  border-radius: 8px 8px 0 0;
   cursor: pointer;
-  margin-bottom: 0;
   color: #667eea;
   font-weight: 600;
-  margin-top: 0;
+  align-self: end;
 }
 
-.back-btn:hover {
-  background-color: #764ba2;
+.login-btn {
+  align-self: end;
 }
 
 @media (max-width: 480px) {
   .back-btn {
     padding: 0.45rem 0.75rem;
     font-size: 0.95rem;
-    margin-bottom: 0.7rem;
   }
 }
 </style>
+
+<style>
+.login-btn button {
+  background: white;
+  border: 0;
+  padding: 0.6rem 1rem;
+  border-radius: 8px 8px 0 0;
+  cursor: pointer;
+  color: #667eea;
+  font-weight: 600;
+}
+</style>
diff --git a/web/vue-app/src/layout/ParentLayout.vue b/web/vue-app/src/layout/ParentLayout.vue
index f352904..22ddf2e 100644
--- a/web/vue-app/src/layout/ParentLayout.vue
+++ b/web/vue-app/src/layout/ParentLayout.vue
@@ -72,7 +72,9 @@ const showBack = computed(
           </svg>
         </button>
         <button
-          :class="{ active: route.name === 'RewardView' }"
+          :class="{
+            active: ['RewardView', 'EditReward', 'CreateReward'].includes(String(route.name)),
+          }"
           @click="router.push({ name: 'RewardView' })"
           aria-label="Rewards"
           title="Rewards"
@@ -121,6 +123,7 @@ const showBack = computed(
   display: grid;
   grid-template-columns: 76px 1fr 76px;
   align-items: center;
+  padding: 5px 5px;
 }
 
 .title {
@@ -166,7 +169,6 @@ const showBack = computed(
 .main-content {
   flex: 1 1 auto;
   width: 100%;
-  display: flex;
   justify-content: center;
   align-items: flex-start;
   box-sizing: border-box;
diff --git a/web/vue-app/src/router/index.ts b/web/vue-app/src/router/index.ts
index b547d6c..e6d71de 100644
--- a/web/vue-app/src/router/index.ts
+++ b/web/vue-app/src/router/index.ts
@@ -7,6 +7,7 @@ import ParentView from '../components/child/ParentView.vue'
 import TaskView from '../components/task/TaskView.vue'
 import RewardView from '../components/reward/RewardView.vue'
 import TaskEditView from '@/components/task/TaskEditView.vue'
+import RewardEditView from '@/components/reward/RewardEditView.vue'
 
 const routes = [
   {
@@ -65,6 +66,17 @@ const routes = [
         component: RewardView,
         props: false,
       },
+      {
+        path: 'rewards/create',
+        name: 'CreateReward',
+        component: RewardEditView,
+      },
+      {
+        path: 'rewards/:id/edit',
+        name: 'EditReward',
+        component: RewardEditView,
+        props: true,
+      },
     ],
   },
   {