round 2

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) */

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>

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>

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>

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;
 }

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>

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;

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,
+      },
     ],
   },
   {