feat: add chore, kindness, and penalty management components

- Implemented ChoreAssignView for assigning chores to children.
- Created ChoreConfirmDialog for confirming chore completion.
- Developed KindnessAssignView for assigning kindness acts.
- Added PenaltyAssignView for assigning penalties.
- Introduced ChoreEditView and ChoreView for editing and viewing chores.
- Created KindnessEditView and KindnessView for managing kindness acts.
- Developed PenaltyEditView and PenaltyView for managing penalties.
- Added TaskSubNav for navigation between chores, kindness acts, and penalties.

frontend/vue-app/src/components/task/ChoreEditView.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="view">
+    <EntityEditForm
+      entityLabel="Chore"
+      :fields="fields"
+      :initialData="initialData"
+      :isEdit="isEdit"
+      :loading="loading"
+      :error="error"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+      @add-image="handleAddImage"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import EntityEditForm from '../shared/EntityEditForm.vue'
+import '@/assets/styles.css'
+
+const props = defineProps<{ id?: string }>()
+const router = useRouter()
+const isEdit = computed(() => !!props.id)
+
+const fields = [
+  { name: 'name', label: 'Chore Name', type: 'text' as const, required: true, maxlength: 64 },
+  { name: 'points', label: 'Points', type: 'number' as const, required: true, min: 1, max: 1000 },
+  { name: 'image_id', label: 'Image', type: 'image' as const, imageType: 2 },
+]
+
+const initialData = ref({ name: '', points: 1, image_id: null })
+const localImageFile = ref<File | null>(null)
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+onMounted(async () => {
+  if (isEdit.value && props.id) {
+    loading.value = true
+    try {
+      const resp = await fetch(`/api/chore/${props.id}`)
+      if (!resp.ok) throw new Error('Failed to load chore')
+      const data = await resp.json()
+      initialData.value = {
+        name: data.name ?? '',
+        points: Number(data.points) || 1,
+        image_id: data.image_id ?? null,
+      }
+    } catch {
+      error.value = 'Could not load chore.'
+    } finally {
+      loading.value = false
+      await nextTick()
+    }
+  }
+})
+
+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 }) {
+  let imageId = form.image_id
+  error.value = null
+  if (!form.name.trim()) {
+    error.value = 'Chore name is required.'
+    return
+  }
+  if (form.points < 1) {
+    error.value = 'Points must be at least 1.'
+    return
+  }
+  loading.value = true
+
+  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 {
+      error.value = 'Failed to upload image.'
+      loading.value = false
+      return
+    }
+  }
+
+  try {
+    const url = isEdit.value && props.id ? `/api/chore/${props.id}/edit` : '/api/chore/add'
+    const resp = await fetch(url, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name: form.name, points: form.points, image_id: imageId }),
+    })
+    if (!resp.ok) throw new Error('Failed to save chore')
+    await router.push({ name: 'ChoreView' })
+  } catch {
+    error.value = 'Failed to save chore.'
+  }
+  loading.value = false
+}
+
+function handleCancel() {
+  router.back()
+}
+</script>
+
+<style scoped>
+.view {
+  max-width: 400px;
+  margin: 0 auto;
+  background: var(--form-bg);
+  border-radius: 12px;
+  box-shadow: 0 4px 24px var(--form-shadow);
+  padding: 2rem 2.2rem 1.5rem 2.2rem;
+}
+</style>

frontend/vue-app/src/components/task/ChoreView.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="chore-view">
+    <MessageBlock v-if="countRef === 0" message="No chores">
+      <span> <button class="round-btn" @click="create">Create</button> a chore </span>
+    </MessageBlock>
+
+    <ItemList
+      v-else
+      ref="listRef"
+      fetchUrl="/api/chore/list"
+      itemKey="tasks"
+      :itemFields="TASK_FIELDS"
+      imageField="image_id"
+      deletable
+      @clicked="(item: Task) => $router.push({ name: 'EditChore', params: { id: item.id } })"
+      @delete="confirmDelete"
+      @loading-complete="(count) => (countRef = count)"
+      :getItemClass="() => ({ good: true })"
+    >
+      <template #item="{ item }">
+        <img v-if="item.image_url" :src="item.image_url" />
+        <span class="name">{{ item.name }}</span>
+        <span class="value">{{ item.points }} pts</span>
+      </template>
+    </ItemList>
+
+    <FloatingActionButton aria-label="Create Chore" @click="create" />
+
+    <DeleteModal
+      :show="showConfirm"
+      message="Are you sure you want to delete this chore?"
+      @confirm="deleteItem"
+      @cancel="showConfirm = false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import ItemList from '../shared/ItemList.vue'
+import MessageBlock from '@/components/shared/MessageBlock.vue'
+import FloatingActionButton from '../shared/FloatingActionButton.vue'
+import DeleteModal from '../shared/DeleteModal.vue'
+import type { Task } from '@/common/models'
+import { TASK_FIELDS } from '@/common/models'
+import { eventBus } from '@/common/eventBus'
+
+const $router = useRouter()
+const showConfirm = ref(false)
+const itemToDelete = ref<string | null>(null)
+const listRef = ref()
+const countRef = ref<number>(-1)
+
+function handleModified() {
+  listRef.value?.refresh()
+}
+
+onMounted(() => {
+  eventBus.on('task_modified', handleModified)
+})
+
+onUnmounted(() => {
+  eventBus.off('task_modified', handleModified)
+})
+
+function confirmDelete(id: string) {
+  itemToDelete.value = id
+  showConfirm.value = true
+}
+
+const deleteItem = async () => {
+  const id =
+    typeof itemToDelete.value === 'object' && itemToDelete.value !== null
+      ? (itemToDelete.value as any).id
+      : itemToDelete.value
+  if (!id) return
+  try {
+    const resp = await fetch(`/api/chore/${id}`, { method: 'DELETE' })
+    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+  } catch (err) {
+    console.error('Failed to delete chore:', err)
+  } finally {
+    showConfirm.value = false
+    itemToDelete.value = null
+  }
+}
+
+const create = () => {
+  $router.push({ name: 'CreateChore' })
+}
+</script>
+
+<style scoped>
+.chore-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  min-height: 0;
+}
+.name {
+  flex: 1;
+  text-align: left;
+  font-weight: 600;
+}
+.value {
+  min-width: 60px;
+  text-align: right;
+  font-weight: 600;
+}
+:deep(.good) {
+  border-color: var(--list-item-border-good);
+  background: var(--list-item-bg-good);
+}
+</style>

frontend/vue-app/src/components/task/KindnessEditView.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="view">
+    <EntityEditForm
+      entityLabel="Kindness Act"
+      :fields="fields"
+      :initialData="initialData"
+      :isEdit="isEdit"
+      :loading="loading"
+      :error="error"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+      @add-image="handleAddImage"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import EntityEditForm from '../shared/EntityEditForm.vue'
+import '@/assets/styles.css'
+
+const props = defineProps<{ id?: string }>()
+const router = useRouter()
+const isEdit = computed(() => !!props.id)
+
+const fields = [
+  { name: 'name', label: 'Name', type: 'text' as const, required: true, maxlength: 64 },
+  { name: 'points', label: 'Points', type: 'number' as const, required: true, min: 1, max: 1000 },
+  { name: 'image_id', label: 'Image', type: 'image' as const, imageType: 2 },
+]
+
+const initialData = ref({ name: '', points: 1, image_id: null })
+const localImageFile = ref<File | null>(null)
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+onMounted(async () => {
+  if (isEdit.value && props.id) {
+    loading.value = true
+    try {
+      const resp = await fetch(`/api/kindness/${props.id}`)
+      if (!resp.ok) throw new Error('Failed to load kindness act')
+      const data = await resp.json()
+      initialData.value = {
+        name: data.name ?? '',
+        points: Number(data.points) || 1,
+        image_id: data.image_id ?? null,
+      }
+    } catch {
+      error.value = 'Could not load kindness act.'
+    } finally {
+      loading.value = false
+      await nextTick()
+    }
+  }
+})
+
+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 }) {
+  let imageId = form.image_id
+  error.value = null
+  if (!form.name.trim()) {
+    error.value = 'Name is required.'
+    return
+  }
+  if (form.points < 1) {
+    error.value = 'Points must be at least 1.'
+    return
+  }
+  loading.value = true
+
+  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 {
+      error.value = 'Failed to upload image.'
+      loading.value = false
+      return
+    }
+  }
+
+  try {
+    const url = isEdit.value && props.id ? `/api/kindness/${props.id}/edit` : '/api/kindness/add'
+    const resp = await fetch(url, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name: form.name, points: form.points, image_id: imageId }),
+    })
+    if (!resp.ok) throw new Error('Failed to save kindness act')
+    await router.push({ name: 'KindnessView' })
+  } catch {
+    error.value = 'Failed to save kindness act.'
+  }
+  loading.value = false
+}
+
+function handleCancel() {
+  router.back()
+}
+</script>
+
+<style scoped>
+.view {
+  max-width: 400px;
+  margin: 0 auto;
+  background: var(--form-bg);
+  border-radius: 12px;
+  box-shadow: 0 4px 24px var(--form-shadow);
+  padding: 2rem 2.2rem 1.5rem 2.2rem;
+}
+</style>

frontend/vue-app/src/components/task/KindnessView.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="kindness-view">
+    <MessageBlock v-if="countRef === 0" message="No kindness acts">
+      <span> <button class="round-btn" @click="create">Create</button> a kindness act </span>
+    </MessageBlock>
+
+    <ItemList
+      v-else
+      ref="listRef"
+      fetchUrl="/api/kindness/list"
+      itemKey="tasks"
+      :itemFields="TASK_FIELDS"
+      imageField="image_id"
+      deletable
+      @clicked="(item: Task) => $router.push({ name: 'EditKindness', params: { id: item.id } })"
+      @delete="confirmDelete"
+      @loading-complete="(count) => (countRef = count)"
+      :getItemClass="() => ({ good: true })"
+    >
+      <template #item="{ item }">
+        <img v-if="item.image_url" :src="item.image_url" />
+        <span class="name">{{ item.name }}</span>
+        <span class="value">{{ item.points }} pts</span>
+      </template>
+    </ItemList>
+
+    <FloatingActionButton aria-label="Create Kindness Act" @click="create" />
+
+    <DeleteModal
+      :show="showConfirm"
+      message="Are you sure you want to delete this kindness act?"
+      @confirm="deleteItem"
+      @cancel="showConfirm = false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import ItemList from '../shared/ItemList.vue'
+import MessageBlock from '@/components/shared/MessageBlock.vue'
+import FloatingActionButton from '../shared/FloatingActionButton.vue'
+import DeleteModal from '../shared/DeleteModal.vue'
+import type { Task } from '@/common/models'
+import { TASK_FIELDS } from '@/common/models'
+import { eventBus } from '@/common/eventBus'
+
+const $router = useRouter()
+const showConfirm = ref(false)
+const itemToDelete = ref<string | null>(null)
+const listRef = ref()
+const countRef = ref<number>(-1)
+
+function handleModified() {
+  listRef.value?.refresh()
+}
+
+onMounted(() => {
+  eventBus.on('task_modified', handleModified)
+})
+
+onUnmounted(() => {
+  eventBus.off('task_modified', handleModified)
+})
+
+function confirmDelete(id: string) {
+  itemToDelete.value = id
+  showConfirm.value = true
+}
+
+const deleteItem = async () => {
+  const id =
+    typeof itemToDelete.value === 'object' && itemToDelete.value !== null
+      ? (itemToDelete.value as any).id
+      : itemToDelete.value
+  if (!id) return
+  try {
+    const resp = await fetch(`/api/kindness/${id}`, { method: 'DELETE' })
+    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+  } catch (err) {
+    console.error('Failed to delete kindness act:', err)
+  } finally {
+    showConfirm.value = false
+    itemToDelete.value = null
+  }
+}
+
+const create = () => {
+  $router.push({ name: 'CreateKindness' })
+}
+</script>
+
+<style scoped>
+.kindness-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  min-height: 0;
+}
+.name {
+  flex: 1;
+  text-align: left;
+  font-weight: 600;
+}
+.value {
+  min-width: 60px;
+  text-align: right;
+  font-weight: 600;
+}
+:deep(.good) {
+  border-color: var(--list-item-border-good);
+  background: var(--list-item-bg-good);
+}
+</style>

frontend/vue-app/src/components/task/PenaltyEditView.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="view">
+    <EntityEditForm
+      entityLabel="Penalty"
+      :fields="fields"
+      :initialData="initialData"
+      :isEdit="isEdit"
+      :loading="loading"
+      :error="error"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+      @add-image="handleAddImage"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import EntityEditForm from '../shared/EntityEditForm.vue'
+import '@/assets/styles.css'
+
+const props = defineProps<{ id?: string }>()
+const router = useRouter()
+const isEdit = computed(() => !!props.id)
+
+const fields = [
+  { name: 'name', label: 'Penalty Name', type: 'text' as const, required: true, maxlength: 64 },
+  { name: 'points', label: 'Points', type: 'number' as const, required: true, min: 1, max: 1000 },
+  { name: 'image_id', label: 'Image', type: 'image' as const, imageType: 2 },
+]
+
+const initialData = ref({ name: '', points: 1, image_id: null })
+const localImageFile = ref<File | null>(null)
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+onMounted(async () => {
+  if (isEdit.value && props.id) {
+    loading.value = true
+    try {
+      const resp = await fetch(`/api/penalty/${props.id}`)
+      if (!resp.ok) throw new Error('Failed to load penalty')
+      const data = await resp.json()
+      initialData.value = {
+        name: data.name ?? '',
+        points: Number(data.points) || 1,
+        image_id: data.image_id ?? null,
+      }
+    } catch {
+      error.value = 'Could not load penalty.'
+    } finally {
+      loading.value = false
+      await nextTick()
+    }
+  }
+})
+
+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 }) {
+  let imageId = form.image_id
+  error.value = null
+  if (!form.name.trim()) {
+    error.value = 'Penalty name is required.'
+    return
+  }
+  if (form.points < 1) {
+    error.value = 'Points must be at least 1.'
+    return
+  }
+  loading.value = true
+
+  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 {
+      error.value = 'Failed to upload image.'
+      loading.value = false
+      return
+    }
+  }
+
+  try {
+    const url = isEdit.value && props.id ? `/api/penalty/${props.id}/edit` : '/api/penalty/add'
+    const resp = await fetch(url, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name: form.name, points: form.points, image_id: imageId }),
+    })
+    if (!resp.ok) throw new Error('Failed to save penalty')
+    await router.push({ name: 'PenaltyView' })
+  } catch {
+    error.value = 'Failed to save penalty.'
+  }
+  loading.value = false
+}
+
+function handleCancel() {
+  router.back()
+}
+</script>
+
+<style scoped>
+.view {
+  max-width: 400px;
+  margin: 0 auto;
+  background: var(--form-bg);
+  border-radius: 12px;
+  box-shadow: 0 4px 24px var(--form-shadow);
+  padding: 2rem 2.2rem 1.5rem 2.2rem;
+}
+</style>

frontend/vue-app/src/components/task/PenaltyView.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="penalty-view">
+    <MessageBlock v-if="countRef === 0" message="No penalties">
+      <span> <button class="round-btn" @click="create">Create</button> a penalty </span>
+    </MessageBlock>
+
+    <ItemList
+      v-else
+      ref="listRef"
+      fetchUrl="/api/penalty/list"
+      itemKey="tasks"
+      :itemFields="TASK_FIELDS"
+      imageField="image_id"
+      deletable
+      @clicked="(item: Task) => $router.push({ name: 'EditPenalty', params: { id: item.id } })"
+      @delete="confirmDelete"
+      @loading-complete="(count) => (countRef = count)"
+      :getItemClass="() => ({ bad: true })"
+    >
+      <template #item="{ item }">
+        <img v-if="item.image_url" :src="item.image_url" />
+        <span class="name">{{ item.name }}</span>
+        <span class="value">{{ item.points }} pts</span>
+      </template>
+    </ItemList>
+
+    <FloatingActionButton aria-label="Create Penalty" @click="create" />
+
+    <DeleteModal
+      :show="showConfirm"
+      message="Are you sure you want to delete this penalty?"
+      @confirm="deleteItem"
+      @cancel="showConfirm = false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import ItemList from '../shared/ItemList.vue'
+import MessageBlock from '@/components/shared/MessageBlock.vue'
+import FloatingActionButton from '../shared/FloatingActionButton.vue'
+import DeleteModal from '../shared/DeleteModal.vue'
+import type { Task } from '@/common/models'
+import { TASK_FIELDS } from '@/common/models'
+import { eventBus } from '@/common/eventBus'
+
+const $router = useRouter()
+const showConfirm = ref(false)
+const itemToDelete = ref<string | null>(null)
+const listRef = ref()
+const countRef = ref<number>(-1)
+
+function handleModified() {
+  listRef.value?.refresh()
+}
+
+onMounted(() => {
+  eventBus.on('task_modified', handleModified)
+})
+
+onUnmounted(() => {
+  eventBus.off('task_modified', handleModified)
+})
+
+function confirmDelete(id: string) {
+  itemToDelete.value = id
+  showConfirm.value = true
+}
+
+const deleteItem = async () => {
+  const id =
+    typeof itemToDelete.value === 'object' && itemToDelete.value !== null
+      ? (itemToDelete.value as any).id
+      : itemToDelete.value
+  if (!id) return
+  try {
+    const resp = await fetch(`/api/penalty/${id}`, { method: 'DELETE' })
+    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+  } catch (err) {
+    console.error('Failed to delete penalty:', err)
+  } finally {
+    showConfirm.value = false
+    itemToDelete.value = null
+  }
+}
+
+const create = () => {
+  $router.push({ name: 'CreatePenalty' })
+}
+</script>
+
+<style scoped>
+.penalty-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  min-height: 0;
+}
+.name {
+  flex: 1;
+  text-align: left;
+  font-weight: 600;
+}
+.value {
+  min-width: 60px;
+  text-align: right;
+  font-weight: 600;
+}
+:deep(.bad) {
+  border-color: var(--list-item-border-bad);
+  background: var(--list-item-bg-bad);
+}
+</style>

frontend/vue-app/src/components/task/TaskEditView.vue

@@ -1,227 +0,0 @@
-<style scoped>
-.view {
-  max-width: 400px;
-  margin: 0 auto;
-  background: var(--form-bg);
-  border-radius: 12px;
-  box-shadow: 0 4px 24px var(--form-shadow);
-  padding: 2rem 2.2rem 1.5rem 2.2rem;
-}
-.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, nextTick } from 'vue'
-import { useRouter } from 'vue-router'
-import EntityEditForm from '../shared/EntityEditForm.vue'
-import '@/assets/styles.css'
-
-const props = defineProps<{ id?: string }>()
-const router = useRouter()
-const isEdit = computed(() => !!props.id)
-
-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: 1000 },
-  { 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 localImageFile = ref<File | null>(null)
-const loading = ref(false)
-const error = ref<string | null>(null)
-
-onMounted(async () => {
-  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()
-      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
-    } catch {
-      error.value = 'Could not load task.'
-    } finally {
-      loading.value = false
-      await nextTick()
-    }
-  }
-})
-
-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 (!form.name.trim()) {
-    error.value = 'Task name is required.'
-    return
-  }
-  if (form.points < 1) {
-    error.value = 'Points 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 {
-      error.value = 'Failed to upload image.'
-      loading.value = false
-      return
-    }
-  }
-
-  // Now update or create the task
-  try {
-    let resp
-    if (isEdit.value && props.id) {
-      resp = await fetch(`/api/task/${props.id}/edit`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          name: form.name,
-          points: form.points,
-          is_good: form.is_good,
-          image_id: imageId,
-        }),
-      })
-    } else {
-      resp = await fetch('/api/task/add', {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          name: form.name,
-          points: form.points,
-          is_good: form.is_good,
-          image_id: imageId,
-        }),
-      })
-    }
-    if (!resp.ok) throw new Error('Failed to save task')
-    await router.push({ name: 'TaskView' })
-  } catch {
-    error.value = 'Failed to save task.'
-  }
-  loading.value = false
-}
-
-function handleCancel() {
-  router.back()
-}
-</script>
-
-<template>
-  <div class="view">
-    <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="button"
-            :class="['toggle-btn', !modelValue ? 'bad-active' : '']"
-            @click="update(false)"
-          >
-            Bad
-          </button>
-        </div>
-      </template>
-    </EntityEditForm>
-  </div>
-</template>

frontend/vue-app/src/components/task/TaskSubNav.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="task-sub-nav">
+    <nav class="sub-tabs">
+      <button
+        :class="{ active: activeTab === 'chores' }"
+        @click="$router.push({ name: 'ChoreView' })"
+      >
+        Chores
+      </button>
+      <button
+        :class="{ active: activeTab === 'kindness' }"
+        @click="$router.push({ name: 'KindnessView' })"
+      >
+        Kindness Acts
+      </button>
+      <button
+        :class="{ active: activeTab === 'penalties' }"
+        @click="$router.push({ name: 'PenaltyView' })"
+      >
+        Penalties
+      </button>
+    </nav>
+    <div class="sub-content">
+      <router-view :key="$route.fullPath" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const activeTab = computed(() => {
+  const name = String(route.name)
+  if (name.startsWith('Kindness') || name === 'CreateKindness' || name === 'EditKindness')
+    return 'kindness'
+  if (name.startsWith('Penalty') || name === 'CreatePenalty' || name === 'EditPenalty')
+    return 'penalties'
+  return 'chores'
+})
+</script>
+
+<style scoped>
+.task-sub-nav {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.sub-tabs {
+  display: flex;
+  justify-content: center;
+  gap: 0.25rem;
+  margin-bottom: 0.75rem;
+}
+
+.sub-tabs button {
+  padding: 0.4rem 1.2rem;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  background: var(--btn-secondary);
+  color: var(--btn-secondary-text);
+  font-weight: 600;
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition:
+    background 0.18s,
+    color 0.18s,
+    border-color 0.18s;
+}
+
+.sub-tabs button.active {
+  background: var(--btn-primary);
+  color: #fff;
+  border-color: var(--btn-primary);
+}
+
+.sub-tabs button:hover:not(.active) {
+  background: var(--btn-secondary-hover);
+}
+
+.sub-content {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+</style>

frontend/vue-app/src/components/task/TaskView.vue

@@ -1,136 +0,0 @@
-<template>
-  <div class="task-view">
-    <MessageBlock v-if="taskCountRef === 0" message="No tasks">
-      <span> <button class="round-btn" @click="createTask">Create</button> a task </span>
-    </MessageBlock>
-
-    <ItemList
-      v-else
-      ref="taskListRef"
-      fetchUrl="/api/task/list"
-      itemKey="tasks"
-      :itemFields="TASK_FIELDS"
-      imageField="image_id"
-      deletable
-      @clicked="(task: Task) => $router.push({ name: 'EditTask', params: { id: task.id } })"
-      @delete="confirmDeleteTask"
-      @loading-complete="(count) => (taskCountRef = count)"
-      :getItemClass="(item) => ({ bad: !item.is_good, good: item.is_good })"
-    >
-      <template #item="{ item }">
-        <img v-if="item.image_url" :src="item.image_url" />
-        <span class="name">{{ item.name }}</span>
-        <span class="value">{{ item.points }} pts</span>
-      </template>
-    </ItemList>
-
-    <FloatingActionButton aria-label="Create Task" @click="createTask" />
-
-    <DeleteModal
-      :show="showConfirm"
-      message="Are you sure you want to delete this task?"
-      @confirm="deleteTask"
-      @cancel="showConfirm = false"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import { useRouter } from 'vue-router'
-import ItemList from '../shared/ItemList.vue'
-import MessageBlock from '@/components/shared/MessageBlock.vue'
-//import '@/assets/button-shared.css'
-import FloatingActionButton from '../shared/FloatingActionButton.vue'
-import DeleteModal from '../shared/DeleteModal.vue'
-import type { Task } from '@/common/models'
-import { TASK_FIELDS } from '@/common/models'
-
-import { eventBus } from '@/common/eventBus'
-
-const $router = useRouter()
-
-const showConfirm = ref(false)
-const taskToDelete = ref<string | null>(null)
-const taskListRef = ref()
-const taskCountRef = ref<number>(-1)
-
-function handleTaskModified(event: any) {
-  // Always refresh the task list on any add, edit, or delete
-  if (taskListRef.value && typeof taskListRef.value.refresh === 'function') {
-    taskListRef.value.refresh()
-  }
-}
-
-onMounted(() => {
-  eventBus.on('task_modified', handleTaskModified)
-})
-
-onUnmounted(() => {
-  eventBus.off('task_modified', handleTaskModified)
-})
-
-function confirmDeleteTask(taskId: string) {
-  taskToDelete.value = taskId
-  showConfirm.value = true
-}
-
-const deleteTask = async () => {
-  // Ensure we use the string ID, not an object
-  const id =
-    typeof taskToDelete.value === 'object' && taskToDelete.value !== null
-      ? taskToDelete.value.id
-      : taskToDelete.value
-  if (!id) return
-  try {
-    const resp = await fetch(`/api/task/${id}`, {
-      method: 'DELETE',
-    })
-    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
-    // No need to refresh here; SSE will trigger refresh
-  } catch (err) {
-    console.error('Failed to delete task:', err)
-  } finally {
-    showConfirm.value = false
-    taskToDelete.value = null
-  }
-}
-
-// New function to handle task creation
-const createTask = () => {
-  $router.push({ name: 'CreateTask' })
-}
-</script>
-
-<style scoped>
-.task-view {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1 1 auto;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  min-height: 0;
-}
-.name {
-  flex: 1;
-  text-align: left;
-  font-weight: 600;
-}
-
-.value {
-  min-width: 60px;
-  text-align: right;
-  font-weight: 600;
-}
-
-:deep(.good) {
-  border-color: var(--list-item-border-good);
-  background: var(--list-item-bg-good);
-}
-:deep(.bad) {
-  border-color: var(--list-item-border-bad);
-  background: var(--list-item-bg-bad);
-}
-</style>