From 74d6f5819cb9e027dc897775a1b4c5958761ec3c Mon Sep 17 00:00:00 2001
From: Ryan Kegel <ryan.kegel@gmail.com>
Date: Fri, 23 Jan 2026 19:29:27 -0500
Subject: [PATCH] Refactor forms to use EntityEditForm component; enhance
 styles and improve structure

---
 frontend/vue-app/src/assets/styles.css        |   2 +-
 .../src/components/child/ChildEditView.vue    |  99 +++---
 .../notification/NotificationView.vue         |   5 +
 .../src/components/reward/RewardEditView.vue  | 140 ++++-----
 .../src/components/shared/EntityEditForm.vue  | 169 ++++++++++
 .../src/components/task/TaskEditView.vue      | 297 ++++++++----------
 .../src/components/utils/ImagePicker.vue      |  14 +
 7 files changed, 416 insertions(+), 310 deletions(-)
 create mode 100644 frontend/vue-app/src/components/shared/EntityEditForm.vue

diff --git a/frontend/vue-app/src/assets/styles.css b/frontend/vue-app/src/assets/styles.css
index 1ca0cb3..7b686d4 100644
--- a/frontend/vue-app/src/assets/styles.css
+++ b/frontend/vue-app/src/assets/styles.css
@@ -2,7 +2,7 @@
 .btn {
   font-weight: 600;
   border: none;
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 0.7rem 1.5rem;
   font-size: 1.1rem;
   cursor: pointer;
diff --git a/frontend/vue-app/src/components/child/ChildEditView.vue b/frontend/vue-app/src/components/child/ChildEditView.vue
index 6971a4e..79bf3bf 100644
--- a/frontend/vue-app/src/components/child/ChildEditView.vue
+++ b/frontend/vue-app/src/components/child/ChildEditView.vue
@@ -1,56 +1,35 @@
 <template>
-  <div class="child-edit-view">
-    <h2>{{ isEdit ? 'Edit Child' : 'Create Child' }}</h2>
-    <div v-if="loading" class="loading-message">Loading child...</div>
-    <form v-else @submit.prevent="submit" class="child-edit-form">
-      <div class="group">
-        <label for="child-name">Name</label>
-        <input type="text" id="child-name" ref="nameInput" v-model="name" required maxlength="64" />
-      </div>
-      <div class="group">
-        <label for="child-age">Age</label>
-        <input id="child-age" v-model.number="age" type="number" min="0" max="120" required />
-      </div>
-      <div class="group">
-        <label for="child-image">Image</label>
-        <ImagePicker
-          id="child-image"
-          v-model="selectedImageId"
-          :image-type="1"
-          @add-image="onAddImage"
-        />
-      </div>
-      <div v-if="error" class="error">{{ error }}</div>
-      <div class="actions">
-        <button type="button" class="btn btn-secondary" @click="onCancel" :disabled="loading">
-          Cancel
-        </button>
-        <button type="submit" class="btn btn-primary" :disabled="loading">
-          {{ isEdit ? 'Save' : 'Create' }}
-        </button>
-      </div>
-    </form>
-  </div>
+  <EntityEditForm
+    entityLabel="Child"
+    :fields="fields"
+    :initialData="initialData"
+    :isEdit="isEdit"
+    :loading="loading"
+    :error="error"
+    @submit="handleSubmit"
+    @cancel="handleCancel"
+    @add-image="handleAddImage"
+  />
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, computed, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import ImagePicker from '@/components/utils/ImagePicker.vue'
-import '@/assets/edit-forms.css'
+import EntityEditForm from '../shared/EntityEditForm.vue'
 
 const route = useRoute()
 const router = useRouter()
-
-// Accept id as a prop for edit mode
 const props = defineProps<{ id?: string }>()
-
 const isEdit = computed(() => !!props.id)
-const name = ref('')
-const age = ref<number | null>(null)
-const selectedImageId = ref<string | null>(null)
+
+const fields = [
+  { name: 'name', label: 'Name', type: 'text', required: true, maxlength: 64 },
+  { name: 'age', label: 'Age', type: 'number', required: true, min: 0, max: 120 },
+  { name: 'image_id', label: 'Image', type: 'image', imageType: 1 },
+]
+
+const initialData = ref({ name: '', age: null, image_id: null })
 const localImageFile = ref<File | null>(null)
-const nameInput = ref<HTMLInputElement | null>(null)
 const loading = ref(false)
 const error = ref<string | null>(null)
 
@@ -61,36 +40,34 @@ onMounted(async () => {
       const resp = await fetch(`/api/child/${props.id}`)
       if (!resp.ok) throw new Error('Failed to load child')
       const data = await resp.json()
-      name.value = data.name ?? ''
-      age.value = Number(data.age) ?? null
-      selectedImageId.value = data.image_id ?? null
+      initialData.value = {
+        name: data.name ?? '',
+        age: Number(data.age) ?? null,
+        image_id: data.image_id ?? null,
+      }
     } catch (e) {
       error.value = 'Could not load child.'
     } finally {
       loading.value = false
       await nextTick()
-      nameInput.value?.focus()
     }
-  } else {
-    await nextTick()
-    nameInput.value?.focus()
   }
 })
 
-function onAddImage({ id, file }: { id: string; file: File }) {
+function handleAddImage({ id, file }: { id: string; file: File }) {
   if (id === 'local-upload') {
     localImageFile.value = file
   }
 }
 
-const submit = async () => {
-  let imageId = selectedImageId.value
+async function handleSubmit(form: any) {
+  let imageId = form.image_id
   error.value = null
-  if (!name.value.trim()) {
+  if (!form.name.trim()) {
     error.value = 'Child name is required.'
     return
   }
-  if (age.value === null || age.value < 0) {
+  if (form.age === null || form.age < 0) {
     error.value = 'Age must be a non-negative number.'
     return
   }
@@ -111,7 +88,7 @@ const submit = async () => {
       const data = await resp.json()
       imageId = data.id
     } catch (err) {
-      alert('Failed to upload image.')
+      error.value = 'Failed to upload image.'
       loading.value = false
       return
     }
@@ -125,8 +102,8 @@ const submit = async () => {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          name: name.value,
-          age: age.value,
+          name: form.name,
+          age: form.age,
           image_id: imageId,
         }),
       })
@@ -135,8 +112,8 @@ const submit = async () => {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          name: name.value,
-          age: age.value,
+          name: form.name,
+          age: form.age,
           image_id: imageId,
         }),
       })
@@ -144,14 +121,12 @@ const submit = async () => {
     if (!resp.ok) throw new Error('Failed to save child')
     await router.push({ name: 'ParentChildrenListView' })
   } catch (err) {
-    alert('Failed to save child.')
+    error.value = 'Failed to save child.'
   }
   loading.value = false
 }
 
-function onCancel() {
+function handleCancel() {
   router.back()
 }
 </script>
-
-<style scoped></style>
diff --git a/frontend/vue-app/src/components/notification/NotificationView.vue b/frontend/vue-app/src/components/notification/NotificationView.vue
index 7abd7ae..5d2f9c6 100644
--- a/frontend/vue-app/src/components/notification/NotificationView.vue
+++ b/frontend/vue-app/src/components/notification/NotificationView.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="notification-view">
+    <MessageBlock v-if="notificationListCountRef === 0" message="No new notifications">
+    </MessageBlock>
+
     <ItemList
+      v-else
       :fetchUrl="`/api/pending-rewards`"
       itemKey="rewards"
       :itemFields="PENDING_REWARD_FIELDS"
@@ -29,6 +33,7 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ItemList from '../shared/ItemList.vue'
+import MessageBlock from '../shared/MessageBlock.vue'
 import type { PendingReward } from '@/common/models'
 import { PENDING_REWARD_FIELDS } from '@/common/models'
 
diff --git a/frontend/vue-app/src/components/reward/RewardEditView.vue b/frontend/vue-app/src/components/reward/RewardEditView.vue
index f376bad..6ca82d8 100644
--- a/frontend/vue-app/src/components/reward/RewardEditView.vue
+++ b/frontend/vue-app/src/components/reward/RewardEditView.vue
@@ -1,67 +1,46 @@
 <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">
-      <div class="group">
-        <label>
-          Reward Name
-          <input ref="nameInput" v-model="name" type="text" required maxlength="64" />
-        </label>
-      </div>
-      <div class="group">
-        <label>
-          Description
-          <input v-model="description" type="text" maxlength="128" />
-        </label>
-      </div>
-      <div class="group">
-        <label>
-          Cost
-          <input v-model.number="cost" type="number" min="1" max="1000" required />
-        </label>
-      </div>
-      <div class="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" class="btn btn-secondary">
-          Cancel
-        </button>
-        <button type="submit" :disabled="loading" class="btn btn-primary">
-          {{ isEdit ? 'Save' : 'Create' }}
-        </button>
-      </div>
-    </form>
-  </div>
+  <EntityEditForm
+    entityLabel="Reward"
+    :fields="fields"
+    :initialData="initialData"
+    :isEdit="isEdit"
+    :loading="loading"
+    :error="error"
+    @submit="handleSubmit"
+    @cancel="handleCancel"
+    @add-image="handleAddImage"
+  />
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, computed, nextTick } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import ImagePicker from '@/components/utils/ImagePicker.vue'
-import '@/assets/edit-forms.css'
+import { useRouter } from 'vue-router'
+import EntityEditForm from '../shared/EntityEditForm.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 fields: {
+  name: string
+  label: string
+  type: 'text' | 'number' | 'image'
+  required?: boolean
+  maxlength?: number
+  min?: number
+  max?: number
+  imageType?: number
+}[] = [
+  { name: 'name', label: 'Reward Name', type: 'text', required: true, maxlength: 64 },
+  { name: 'description', label: 'Description', type: 'text', maxlength: 128 },
+  { name: 'cost', label: 'Cost', type: 'number', required: true, min: 1, max: 1000 },
+  { name: 'image_id', label: 'Image', type: 'image', imageType: 2 },
+]
+// removed duplicate defineProps
+const initialData = ref({ name: '', description: '', cost: 1, image_id: 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) {
@@ -70,41 +49,40 @@ onMounted(async () => {
       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) {
+      initialData.value = {
+        name: data.name ?? '',
+        description: data.description ?? '',
+        cost: Number(data.cost) || 1,
+        image_id: data.image_id ?? null,
+      }
+    } catch {
       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 }) {
+function handleAddImage({ id, file }: { id: string; file: File }) {
   if (id === 'local-upload') {
     localImageFile.value = file
   }
 }
 
-function handleCancel() {
-  router.back()
-}
-
-const submit = async () => {
-  let imageId = selectedImageId.value
+async function handleSubmit(form: {
+  name: string
+  description: string
+  cost: number
+  image_id: string | null
+}) {
+  let imageId = form.image_id
   error.value = null
-  if (!name.value.trim()) {
+  if (!form.name.trim()) {
     error.value = 'Reward name is required.'
     return
   }
-  if (cost.value < 1) {
+  if (form.cost < 1) {
     error.value = 'Cost must be at least 1.'
     return
   }
@@ -124,8 +102,8 @@ const submit = async () => {
       if (!resp.ok) throw new Error('Image upload failed')
       const data = await resp.json()
       imageId = data.id
-    } catch (err) {
-      alert('Failed to upload image.')
+    } catch {
+      error.value = 'Failed to upload image.'
       loading.value = false
       return
     }
@@ -139,9 +117,9 @@ const submit = async () => {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          name: name.value,
-          description: description.value,
-          cost: cost.value,
+          name: form.name,
+          description: form.description,
+          cost: form.cost,
           image_id: imageId,
         }),
       })
@@ -150,20 +128,24 @@ const submit = async () => {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          name: name.value,
-          description: description.value,
-          cost: cost.value,
+          name: form.name,
+          description: form.description,
+          cost: form.cost,
           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.')
+  } catch {
+    error.value = 'Failed to save reward.'
   }
   loading.value = false
 }
+
+function handleCancel() {
+  router.back()
+}
 </script>
 
 <style scoped></style>
diff --git a/frontend/vue-app/src/components/shared/EntityEditForm.vue b/frontend/vue-app/src/components/shared/EntityEditForm.vue
new file mode 100644
index 0000000..feb4bb3
--- /dev/null
+++ b/frontend/vue-app/src/components/shared/EntityEditForm.vue
@@ -0,0 +1,169 @@
+<template>
+  <div class="entity-edit-view">
+    <h2>{{ isEdit ? `Edit ${entityLabel}` : `Create ${entityLabel}` }}</h2>
+    <div v-if="loading" class="loading-message">Loading {{ entityLabel.toLowerCase() }}...</div>
+    <form v-else @submit.prevent="submit" class="entity-form">
+      <template v-for="field in fields" :key="field.name">
+        <div class="group">
+          <label :for="field.name">
+            {{ field.label }}
+            <!-- Custom field slot -->
+            <slot
+              :name="`custom-field-${field.name}`"
+              :modelValue="formData[field.name]"
+              :update="(val) => (formData[field.name] = val)"
+            >
+              <!-- Default rendering if no slot provided -->
+              <input
+                v-if="field.type === 'text' || field.type === 'number'"
+                :id="field.name"
+                v-model="formData[field.name]"
+                :type="field.type"
+                :required="field.required"
+                :maxlength="field.maxlength"
+                :min="field.min"
+                :max="field.max"
+              />
+              <ImagePicker
+                v-else-if="field.type === 'image'"
+                :id="field.name"
+                v-model="formData[field.name]"
+                :image-type="field.imageType || 1"
+                @add-image="onAddImage"
+              />
+            </slot>
+          </label>
+        </div>
+      </template>
+      <div v-if="error" class="error">{{ error }}</div>
+      <div class="actions">
+        <button type="button" class="btn btn-secondary" @click="onCancel" :disabled="loading">
+          Cancel
+        </button>
+        <button type="submit" class="btn btn-primary" :disabled="loading">
+          {{ isEdit ? 'Save' : 'Create' }}
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick, watch } from 'vue'
+import ImagePicker from '@/components/utils/ImagePicker.vue'
+import { useRouter } from 'vue-router'
+import '@/assets/colors.css'
+import '@/assets/styles.css'
+
+type Field = {
+  name: string
+  label: string
+  type: 'text' | 'number' | 'image' | 'custom'
+  required?: boolean
+  maxlength?: number
+  min?: number
+  max?: number
+  imageType?: number
+}
+
+const props = defineProps<{
+  entityLabel: string
+  fields: Field[]
+  initialData?: Record<string, any>
+  isEdit?: boolean
+  loading?: boolean
+  error?: string | null
+}>()
+
+const emit = defineEmits(['submit', 'cancel', 'add-image'])
+
+const router = useRouter()
+const formData = ref<Record<string, any>>({ ...props.initialData })
+
+watch(
+  () => props.initialData,
+  (newVal) => {
+    if (newVal) {
+      formData.value = { ...newVal }
+    }
+  },
+  { immediate: true, deep: true },
+)
+
+onMounted(async () => {
+  await nextTick()
+  // Optionally focus first input
+})
+
+function onAddImage({ id, file }: { id: string; file: File }) {
+  emit('add-image', { id, file })
+}
+
+function onCancel() {
+  emit('cancel')
+  router.back()
+}
+
+function submit() {
+  emit('submit', { ...formData.value })
+}
+</script>
+
+<style scoped>
+.entity-edit-view {
+  max-width: 420px;
+  margin: 0 auto;
+  background: var(--edit-view-bg, #fff);
+  border-radius: 14px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  padding: 2.2rem 2.2rem 1.5rem 2.2rem;
+}
+.entity-edit-view h2 {
+  text-align: center;
+  margin-bottom: 1.5rem;
+  color: var(--form-heading);
+}
+.entity-form .group {
+  margin-bottom: 1.2rem;
+}
+.entity-form label {
+  display: block;
+  font-weight: 600;
+  color: var(--form-label, #444);
+  margin-bottom: 0.4rem;
+}
+.entity-form input[type='text'],
+.entity-form input[type='number'] {
+  width: 100%;
+  padding: 0.6rem;
+  border-radius: 7px;
+  border: 1px solid var(--form-input-border, #e6e6e6);
+  font-size: 1rem;
+  background: var(--form-input-bg, #fff);
+  box-sizing: border-box;
+}
+.actions {
+  display: flex;
+  gap: 3rem;
+  justify-content: center;
+  margin-top: 0.5rem;
+  margin-bottom: 0.4rem;
+}
+.actions .btn {
+  padding: 1rem 2.2rem;
+  font-weight: 700;
+  font-size: 1.25rem;
+  min-width: 120px;
+}
+
+.error {
+  color: var(--error-color, #e53e3e);
+  margin-bottom: 1rem;
+  font-size: 1rem;
+}
+.loading-message {
+  color: var(--loading-color, #888);
+  margin-bottom: 1.2rem;
+  font-size: 1rem;
+}
+</style>
diff --git a/frontend/vue-app/src/components/task/TaskEditView.vue b/frontend/vue-app/src/components/task/TaskEditView.vue
index bd8e12f..687eefb 100644
--- a/frontend/vue-app/src/components/task/TaskEditView.vue
+++ b/frontend/vue-app/src/components/task/TaskEditView.vue
@@ -1,66 +1,122 @@
+<style scoped>
+.good-bad-toggle {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 1.2rem;
+  margin-bottom: 1.1rem;
+  justify-content: flex-start;
+}
+
+button.toggle-btn {
+  flex: 1 1 0;
+  padding: 0.5rem 1.2rem;
+  border-width: 2px;
+  border-radius: 7px;
+  font-weight: 600;
+  font-size: 1rem;
+  cursor: pointer;
+  transition:
+    background 0.18s,
+    color 0.18s,
+    border-style 0.18s;
+  outline: none;
+  border-style: outset;
+  background: var(--toggle-btn-bg, #f5f5f5);
+  color: var(--toggle-btn-color, #333);
+  border-color: var(--toggle-btn-border, #ccc);
+}
+
+button.toggle-btn.good-active {
+  background: var(--toggle-btn-good-bg, #e6ffe6);
+  color: var(--toggle-btn-good-color, #1a7f37);
+  box-shadow: 0 2px 8px var(--toggle-btn-good-shadow, #b6f2c2);
+  transform: translateY(2px) scale(0.97);
+  border-style: ridge;
+  border-color: var(--toggle-btn-good-border, #1a7f37);
+}
+
+button.toggle-btn.bad-active {
+  background: var(--toggle-btn-bad-bg, #ffe6e6);
+  color: var(--toggle-btn-bad-color, #b91c1c);
+  box-shadow: 0 2px 8px var(--toggle-btn-bad-shadow, #f2b6b6);
+  transform: translateY(2px) scale(0.97);
+  border-style: ridge;
+  border-color: var(--toggle-btn-bad-border, #b91c1c);
+}
+</style>
 <script setup lang="ts">
-import { ref, onMounted, computed, defineEmits, nextTick } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import ImagePicker from '@/components/utils/ImagePicker.vue'
-import '@/assets/edit-forms.css'
+import { ref, onMounted, computed, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import EntityEditForm from '../shared/EntityEditForm.vue'
 
-const route = useRoute()
+const props = defineProps<{ id?: string }>()
 const router = useRouter()
-const isEdit = computed(() => !!route.params.id)
-const emit = defineEmits<{
-  (e: 'updated'): void
-}>()
-// Define props
-const props = defineProps<{
-  id?: string
-}>()
+const isEdit = computed(() => !!props.id)
 
-const name = ref('')
-const points = ref(0)
+const fields: {
+  name: string
+  label: string
+  type: 'text' | 'number' | 'image' | 'custom'
+  required?: boolean
+  maxlength?: number
+  min?: number
+  max?: number
+  imageType?: number
+}[] = [
+  { name: 'name', label: 'Task Name', type: 'text', required: true, maxlength: 64 },
+  { name: 'points', label: 'Task Points', type: 'number', required: true, min: 1, max: 100 },
+  { name: 'is_good', label: 'Task Type', type: 'custom' },
+  { name: 'image_id', label: 'Image', type: 'image', imageType: 2 },
+]
+
+const initialData = ref({ name: '', points: 1, image_id: null, is_good: true })
 const isGood = ref(true)
-const selectedImageId = ref<string | null>(null)
 const localImageFile = ref<File | null>(null)
-
-const nameInput = ref<HTMLInputElement | null>(null)
-
 const loading = ref(false)
 const error = ref<string | null>(null)
 
-// Load task if editing
 onMounted(async () => {
-  if (isEdit.value) {
+  if (isEdit.value && props.id) {
     loading.value = true
     try {
       const resp = await fetch(`/api/task/${props.id}`)
       if (!resp.ok) throw new Error('Failed to load task')
       const data = await resp.json()
-      name.value = data.name
-      points.value = Number(data.points) || 0
+      initialData.value = {
+        name: data.name ?? '',
+        points: Number(data.points) || 1,
+        image_id: data.image_id ?? null,
+        is_good: data.is_good,
+      }
       isGood.value = data.is_good
-      selectedImageId.value = data.image_id
-    } catch (e) {
+    } catch {
       error.value = 'Could not load task.'
     } finally {
       loading.value = false
-      // Delay focus until after DOM updates and event propagation
       await nextTick()
-      nameInput.value?.focus()
     }
-  } else {
-    // For create, also use nextTick
-    await nextTick()
-    nameInput.value?.focus()
   }
 })
 
-const submit = async () => {
-  let imageId = selectedImageId.value
+function handleAddImage({ id, file }: { id: string; file: File }) {
+  if (id === 'local-upload') {
+    localImageFile.value = file
+  }
+}
+
+async function handleSubmit(form: {
+  name: string
+  points: number
+  image_id: string | null
+  is_good: boolean
+}) {
+  let imageId = form.image_id
   error.value = null
-  if (!name.value.trim()) {
+  if (!form.name.trim()) {
     error.value = 'Task name is required.'
     return
   }
-  if (points.value < 1) {
+  if (form.points < 1) {
     error.value = 'Points must be at least 1.'
     return
   }
@@ -80,8 +136,8 @@ const submit = async () => {
       if (!resp.ok) throw new Error('Image upload failed')
       const data = await resp.json()
       imageId = data.id
-    } catch (err) {
-      alert('Failed to upload image.')
+    } catch {
+      error.value = 'Failed to upload image.'
       loading.value = false
       return
     }
@@ -90,14 +146,14 @@ const submit = async () => {
   // Now update or create the task
   try {
     let resp
-    if (isEdit.value) {
+    if (isEdit.value && props.id) {
       resp = await fetch(`/api/task/${props.id}/edit`, {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          name: name.value,
-          points: points.value,
-          is_good: isGood.value,
+          name: form.name,
+          points: form.points,
+          is_good: form.is_good,
           image_id: imageId,
         }),
       })
@@ -106,18 +162,17 @@ const submit = async () => {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          name: name.value,
-          points: points.value,
-          is_good: isGood.value,
+          name: form.name,
+          points: form.points,
+          is_good: form.is_good,
           image_id: imageId,
         }),
       })
     }
     if (!resp.ok) throw new Error('Failed to save task')
-    emit('updated')
     await router.push({ name: 'TaskView' })
-  } catch (err) {
-    alert('Failed to save task.')
+  } catch {
+    error.value = 'Failed to save task.'
   }
   loading.value = false
 }
@@ -125,131 +180,37 @@ const submit = async () => {
 function handleCancel() {
   router.back()
 }
-
-// Handle new image from ImagePicker
-function onAddImage({ id, file }: { id: string; file: File }) {
-  if (id === 'local-upload') {
-    localImageFile.value = file
-  }
-}
 </script>
 
 <template>
-  <div class="task-edit-view">
-    <h2>{{ isEdit ? 'Edit Task' : 'Create Task' }}</h2>
-    <div v-if="loading" class="loading-message">Loading task...</div>
-    <form v-else @submit.prevent="submit" class="task-form">
-      <div class="group">
-        <label for="task-name">
-          Task Name
-          <input
-            id="task-name"
-            ref="nameInput"
-            v-model="name"
-            type="text"
-            required
-            maxlength="64"
-          />
-        </label>
-      </div>
-      <div class="group">
-        <label for="task-points">
-          Task Points
-          <input
-            id="task-points"
-            v-model.number="points"
-            type="number"
-            min="1"
-            max="100"
-            required
-          />
-        </label>
-      </div>
-      <div class="group">
-        <label for="task-type">
-          Task Type
-          <div class="good-bad-toggle" id="task-type">
-            <button
-              type="button"
-              :class="['toggle-btn', isGood ? 'good-active' : '']"
-              @click="isGood = true"
-            >
-              Good
-            </button>
-            <button
-              type="button"
-              :class="['toggle-btn', !isGood ? 'bad-active' : '']"
-              @click="isGood = false"
-            >
-              Bad
-            </button>
-          </div>
-        </label>
-      </div>
-      <div class="group">
-        <label for="task-image">Image</label>
-        <ImagePicker
-          id="task-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" class="btn btn-secondary">
-          Cancel
+  <EntityEditForm
+    entityLabel="Task"
+    :fields="fields"
+    :initialData="initialData"
+    :isEdit="isEdit"
+    :loading="loading"
+    :error="error"
+    @submit="handleSubmit"
+    @cancel="handleCancel"
+    @add-image="handleAddImage"
+  >
+    <template #custom-field-is_good="{ modelValue, update }">
+      <div class="good-bad-toggle">
+        <button
+          type="button"
+          :class="['toggle-btn', modelValue ? 'good-active' : '']"
+          @click="update(true)"
+        >
+          Good
         </button>
-        <button type="submit" :disabled="loading" class="btn btn-primary">
-          {{ isEdit ? 'Save' : 'Create' }}
+        <button
+          type="button"
+          :class="['toggle-btn', !modelValue ? 'bad-active' : '']"
+          @click="update(false)"
+        >
+          Bad
         </button>
       </div>
-    </form>
-  </div>
+    </template>
+  </EntityEditForm>
 </template>
-
-<style scoped>
-.good-bad-toggle {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1.1rem;
-  justify-content: flex-start;
-}
-
-button.toggle-btn {
-  flex: 1 1 0;
-  padding: 0.5rem 1.2rem;
-  border-width: 2px;
-  border-radius: 7px;
-  font-weight: 600;
-  font-size: 1rem;
-  cursor: pointer;
-  transition:
-    background 0.18s,
-    color 0.18s,
-    border-style 0.18s;
-  outline: none;
-  border-style: outset; /* Default style */
-  background: var(--toggle-btn-bg);
-  color: var(--toggle-btn-color);
-  border-color: var(--toggle-btn-border);
-}
-
-button.toggle-btn.good-active {
-  background: var(--toggle-btn-good-bg);
-  color: var(--toggle-btn-good-color);
-  box-shadow: 0 2px 8px var(--toggle-btn-good-shadow);
-  transform: translateY(2px) scale(0.97);
-  border-style: ridge;
-  border-color: var(--toggle-btn-good-border);
-}
-
-button.toggle-btn.bad-active {
-  background: var(--toggle-btn-bad-bg);
-  color: var(--toggle-btn-bad-color);
-  box-shadow: 0 2px 8px var(--toggle-btn-bad-shadow);
-  transform: translateY(2px) scale(0.97);
-  border-style: ridge;
-  border-color: var(--toggle-btn-bad-border);
-}
-</style>
diff --git a/frontend/vue-app/src/components/utils/ImagePicker.vue b/frontend/vue-app/src/components/utils/ImagePicker.vue
index 861cb0d..655d420 100644
--- a/frontend/vue-app/src/components/utils/ImagePicker.vue
+++ b/frontend/vue-app/src/components/utils/ImagePicker.vue
@@ -369,4 +369,18 @@ function updateLocalImage(url: string, file: File) {
   margin-right: auto;
   object-fit: contain;
 }
+
+.actions {
+  display: flex;
+  gap: 3rem;
+  justify-content: center;
+  margin-top: 0.5rem;
+  margin-bottom: 0.4rem;
+}
+.actions .btn {
+  padding: 1rem 2.2rem;
+  font-weight: 700;
+  font-size: 1.25rem;
+  min-width: 120px;
+}
 </style>