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.
2026-02-28 11:25:56 -05:00
parent 65e987ceb6
commit d7316bb00a
61 changed files with 7364 additions and 647 deletions
--- a/frontend/vue-app/src/tests/ScheduleModal.spec.ts
+++ b/frontend/vue-app/src/tests/ScheduleModal.spec.ts
@@ -36,7 +36,7 @@ const DateInputFieldStub = {
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
-const TASK: ChildTask = { id: 'task-1', name: 'Clean Room', is_good: true, points: 5, image_id: '' }
+const TASK: ChildTask = { id: 'task-1', name: 'Clean Room', type: 'chore', points: 5, image_id: '' }
 const CHILD_ID = 'child-1'

 function mountModal(schedule: ChoreSchedule | null = null) {
--- a/frontend/vue-app/src/common/api.ts
+++ b/frontend/vue-app/src/common/api.ts
@@ -61,8 +61,16 @@ export function isPasswordStrong(password: string): boolean {
 */
 export async function getTrackingEventsForChild(params: {
  childId: string
-  entityType?: 'task' | 'reward' | 'penalty'
-  action?: 'activated' | 'requested' | 'redeemed' | 'cancelled'
+  entityType?: 'task' | 'reward' | 'penalty' | 'chore' | 'kindness'
+  action?:
+    | 'activated'
+    | 'requested'
+    | 'redeemed'
+    | 'cancelled'
+    | 'confirmed'
+    | 'approved'
+    | 'rejected'
+    | 'reset'
  limit?: number
  offset?: number
 }): Promise<Response> {
@@ -160,3 +168,67 @@ export async function extendChoreTime(
    body: JSON.stringify({ date: localDate }),
  })
 }
+
+// ── Chore Confirmation API ──────────────────────────────────────────────────
+
+/**
+ * Child confirms they completed a chore.
+ */
+export async function confirmChore(childId: string, taskId: string): Promise<Response> {
+  return fetch(`/api/child/${childId}/confirm-chore`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ task_id: taskId }),
+  })
+}
+
+/**
+ * Child cancels a pending chore confirmation.
+ */
+export async function cancelConfirmChore(childId: string, taskId: string): Promise<Response> {
+  return fetch(`/api/child/${childId}/cancel-confirm-chore`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ task_id: taskId }),
+  })
+}
+
+/**
+ * Parent approves a pending chore confirmation (awards points).
+ */
+export async function approveChore(childId: string, taskId: string): Promise<Response> {
+  return fetch(`/api/child/${childId}/approve-chore`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ task_id: taskId }),
+  })
+}
+
+/**
+ * Parent rejects a pending chore confirmation (no points, resets to available).
+ */
+export async function rejectChore(childId: string, taskId: string): Promise<Response> {
+  return fetch(`/api/child/${childId}/reject-chore`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ task_id: taskId }),
+  })
+}
+
+/**
+ * Parent resets a completed chore (points kept, chore can be confirmed again).
+ */
+export async function resetChore(childId: string, taskId: string): Promise<Response> {
+  return fetch(`/api/child/${childId}/reset-chore`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ task_id: taskId }),
+  })
+}
+
+/**
+ * Fetch all pending confirmations (both chores and rewards) for the current user.
+ */
+export async function fetchPendingConfirmations(): Promise<Response> {
+  return fetch('/api/pending-confirmations')
+}
--- a/frontend/vue-app/src/common/models.ts
+++ b/frontend/vue-app/src/common/models.ts
@@ -1,12 +1,14 @@
+export type TaskType = 'chore' | 'kindness' | 'penalty'
+
 export interface Task {
  id: string
  name: string
  points: number
-  is_good: boolean
+  type: TaskType
  image_id: string | null
  image_url?: string | null // optional, for resolved URLs
 }
-export const TASK_FIELDS = ['id', 'name', 'points', 'is_good', 'image_id'] as const
+export const TASK_FIELDS = ['id', 'name', 'points', 'type', 'image_id'] as const

 export interface DayConfig {
  day: number // 0=Sun, 1=Mon, ..., 6=Sat
@@ -37,13 +39,15 @@ export interface ChoreSchedule {
 export interface ChildTask {
  id: string
  name: string
-  is_good: boolean
+  type: TaskType
  points: number
  image_id: string | null
  image_url?: string | null
  custom_value?: number | null
  schedule?: ChoreSchedule | null
  extension_date?: string | null // ISO date of today's extension, if any
+  pending_status?: 'pending' | 'approved' | null
+  approved_at?: string | null
 }

 export interface User {
@@ -100,25 +104,31 @@ export const REWARD_STATUS_FIELDS = [
  'image_id',
 ] as const

-export interface PendingReward {
+export interface PendingConfirmation {
  id: string
  child_id: string
  child_name: string
  child_image_id: string | null
-  child_image_url?: string | null // optional, for resolved URLs
-  reward_id: string
-  reward_name: string
-  reward_image_id: string | null
-  reward_image_url?: string | null // optional, for resolved URLs
+  child_image_url?: string | null
+  entity_id: string
+  entity_type: 'chore' | 'reward'
+  entity_name: string
+  entity_image_id: string | null
+  entity_image_url?: string | null
+  status: 'pending' | 'approved' | 'rejected'
+  approved_at: string | null
 }
-export const PENDING_REWARD_FIELDS = [
+export const PENDING_CONFIRMATION_FIELDS = [
  'id',
  'child_id',
  'child_name',
  'child_image_id',
-  'reward_id',
-  'reward_name',
-  'reward_image_id',
+  'entity_id',
+  'entity_type',
+  'entity_name',
+  'entity_image_id',
+  'status',
+  'approved_at',
 ] as const

 export interface Event {
@@ -137,6 +147,7 @@ export interface Event {
    | ChildOverrideDeletedPayload
    | ChoreScheduleModifiedPayload
    | ChoreTimeExtendedPayload
+    | ChildChoreConfirmationPayload
 }

 export interface ChildModifiedEventPayload {
@@ -197,8 +208,16 @@ export interface ChildOverrideDeletedPayload {
  entity_type: string
 }

-export type EntityType = 'task' | 'reward' | 'penalty'
-export type ActionType = 'activated' | 'requested' | 'redeemed' | 'cancelled'
+export type EntityType = 'task' | 'reward' | 'penalty' | 'chore' | 'kindness'
+export type ActionType =
+  | 'activated'
+  | 'requested'
+  | 'redeemed'
+  | 'cancelled'
+  | 'confirmed'
+  | 'approved'
+  | 'rejected'
+  | 'reset'

 export interface TrackingEvent {
  id: string
@@ -232,7 +251,7 @@ export const TRACKING_EVENT_FIELDS = [
  'metadata',
 ] as const

-export type OverrideEntityType = 'task' | 'reward'
+export type OverrideEntityType = 'task' | 'reward' | 'chore' | 'kindness' | 'penalty'

 export interface ChildOverride {
  id: string
@@ -264,3 +283,9 @@ export interface ChoreTimeExtendedPayload {
  child_id: string
  task_id: string
 }
+
+export interface ChildChoreConfirmationPayload {
+  child_id: string
+  task_id: string
+  operation: 'CONFIRMED' | 'APPROVED' | 'REJECTED' | 'CANCELLED' | 'RESET'
+}
--- a/frontend/vue-app/src/components/child/ChildView.vue
+++ b/frontend/vue-app/src/components/child/ChildView.vue
@@ -5,6 +5,7 @@ import ChildDetailCard from './ChildDetailCard.vue'
 import ScrollingList from '../shared/ScrollingList.vue'
 import StatusMessage from '../shared/StatusMessage.vue'
 import RewardConfirmDialog from './RewardConfirmDialog.vue'
+import ChoreConfirmDialog from './ChoreConfirmDialog.vue'
 import ModalDialog from '../shared/ModalDialog.vue'
 import { eventBus } from '@/common/eventBus'
 //import '@/assets/view-shared.css'
@@ -25,7 +26,9 @@ import type {
  ChildModifiedEventPayload,
  ChoreScheduleModifiedPayload,
  ChoreTimeExtendedPayload,
+  ChildChoreConfirmationPayload,
 } from '@/common/models'
+import { confirmChore, cancelConfirmChore } from '@/common/api'
 import {
  isScheduledToday,
  isPastTime,
@@ -48,6 +51,9 @@ const childRewardListRef = ref()
 const showRewardDialog = ref(false)
 const showCancelDialog = ref(false)
 const dialogReward = ref<RewardStatus | null>(null)
+const showChoreConfirmDialog = ref(false)
+const showChoreCancelDialog = ref(false)
+const dialogChore = ref<ChildTask | null>(null)

 function handleTaskTriggered(event: Event) {
  const payload = event.payload as ChildTaskTriggeredEventPayload
@@ -177,7 +183,7 @@ function handleRewardModified(event: Event) {
  }
 }

-const triggerTask = async (task: Task) => {
+const triggerTask = async (task: ChildTask) => {
  // Cancel any pending speech to avoid conflicts
  if ('speechSynthesis' in window) {
    window.speechSynthesis.cancel()
@@ -191,7 +197,74 @@ const triggerTask = async (task: Task) => {
    }
  }

-  // Child mode is speech-only; point changes are handled in parent mode.
+  // For chores, handle confirmation flow
+  if (task.type === 'chore') {
+    if (isChoreExpired(task)) return // Expired — no action
+    if (isChoreCompletedToday(task)) return // Already completed — no action
+    if (task.pending_status === 'pending') {
+      // Show cancel dialog
+      dialogChore.value = task
+      setTimeout(() => {
+        showChoreCancelDialog.value = true
+      }, 150)
+      return
+    }
+    // Available — show confirm dialog
+    dialogChore.value = task
+    setTimeout(() => {
+      showChoreConfirmDialog.value = true
+    }, 150)
+    return
+  }
+
+  // Kindness / Penalty: speech-only in child mode; point changes are handled in parent mode.
+}
+
+function isChoreCompletedToday(item: ChildTask): boolean {
+  if (item.pending_status !== 'approved' || !item.approved_at) return false
+  const approvedDate = item.approved_at.substring(0, 10)
+  const today = toLocalISODate(new Date())
+  return approvedDate === today
+}
+
+async function doConfirmChore() {
+  if (!child.value?.id || !dialogChore.value) return
+  try {
+    const resp = await confirmChore(child.value.id, dialogChore.value.id)
+    if (!resp.ok) {
+      console.error('Failed to confirm chore')
+    }
+  } catch (err) {
+    console.error('Failed to confirm chore:', err)
+  } finally {
+    showChoreConfirmDialog.value = false
+    dialogChore.value = null
+  }
+}
+
+function cancelChoreConfirmDialog() {
+  showChoreConfirmDialog.value = false
+  dialogChore.value = null
+}
+
+async function doCancelConfirmChore() {
+  if (!child.value?.id || !dialogChore.value) return
+  try {
+    const resp = await cancelConfirmChore(child.value.id, dialogChore.value.id)
+    if (!resp.ok) {
+      console.error('Failed to cancel chore confirmation')
+    }
+  } catch (err) {
+    console.error('Failed to cancel chore confirmation:', err)
+  } finally {
+    showChoreCancelDialog.value = false
+    dialogChore.value = null
+  }
+}
+
+function closeChoreCancelDialog() {
+  showChoreCancelDialog.value = false
+  dialogChore.value = null
 }

 const triggerReward = (reward: RewardStatus) => {
@@ -331,6 +404,13 @@ function handleChoreTimeExtended(event: Event) {
  }
 }

+function handleChoreConfirmation(event: Event) {
+  const payload = event.payload as ChildChoreConfirmationPayload
+  if (child.value && payload.child_id === child.value.id) {
+    childChoreListRef.value?.refresh()
+  }
+}
+
 function isChoreScheduledToday(item: ChildTask): boolean {
  if (!item.schedule) return true
  const today = new Date()
@@ -406,6 +486,7 @@ onMounted(async () => {
    eventBus.on('child_reward_request', handleRewardRequest)
    eventBus.on('chore_schedule_modified', handleChoreScheduleModified)
    eventBus.on('chore_time_extended', handleChoreTimeExtended)
+    eventBus.on('child_chore_confirmation', handleChoreConfirmation)
    document.addEventListener('visibilitychange', onVisibilityChange)
    if (route.params.id) {
      const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
@@ -440,6 +521,7 @@ onUnmounted(() => {
  eventBus.off('child_reward_request', handleRewardRequest)
  eventBus.off('chore_schedule_modified', handleChoreScheduleModified)
  eventBus.off('chore_time_extended', handleChoreTimeExtended)
+  eventBus.off('child_chore_confirmation', handleChoreConfirmation)
  document.removeEventListener('visibilitychange', onVisibilityChange)
  clearExpiryTimers()
  removeInactivityListeners()
@@ -466,21 +548,25 @@ onUnmounted(() => {
          @trigger-item="triggerTask"
          :getItemClass="
            (item: ChildTask) => ({
-              bad: !item.is_good,
-              good: item.is_good,
-              'chore-inactive': isChoreExpired(item),
+              bad: item.type === 'penalty',
+              good: item.type !== 'penalty',
+              'chore-inactive':
+                item.type === 'chore' && (isChoreExpired(item) || isChoreCompletedToday(item)),
            })
          "
-          :filter-fn="(item: ChildTask) => item.is_good && isChoreScheduledToday(item)"
+          :filter-fn="(item: ChildTask) => item.type === 'chore' && isChoreScheduledToday(item)"
        >
          <template #item="{ item }: { item: ChildTask }">
            <span v-if="isChoreExpired(item)" class="chore-stamp">TOO LATE</span>
+            <span v-else-if="isChoreCompletedToday(item)" class="chore-stamp completed-stamp"
+              >COMPLETED</span
+            >
+            <span v-else-if="item.pending_status === 'pending'" class="chore-stamp pending-stamp"
+              >PENDING</span
+            >
            <div class="item-name">{{ item.name }}</div>
            <img v-if="item.image_url" :src="item.image_url" alt="Task Image" class="item-image" />
-            <div
-              class="item-points"
-              :class="{ 'good-points': item.is_good, 'bad-points': !item.is_good }"
-            >
+            <div class="item-points good-points">
              {{
                item.custom_value !== undefined && item.custom_value !== null
                  ? item.custom_value
@@ -491,6 +577,33 @@ onUnmounted(() => {
            <div v-if="choreDueLabel(item)" class="due-label">{{ choreDueLabel(item) }}</div>
          </template>
        </ScrollingList>
+        <ScrollingList
+          title="Kindness Acts"
+          ref="childKindnessListRef"
+          :fetchBaseUrl="`/api/child/${child?.id}/list-tasks`"
+          :ids="tasks"
+          itemKey="tasks"
+          imageField="image_id"
+          :isParentAuthenticated="false"
+          :readyItemId="readyItemId"
+          @item-ready="handleItemReady"
+          @trigger-item="triggerTask"
+          :getItemClass="() => ({ good: true })"
+          :filter-fn="(item: ChildTask) => item.type === 'kindness'"
+        >
+          <template #item="{ item }">
+            <div class="item-name">{{ item.name }}</div>
+            <img v-if="item.image_url" :src="item.image_url" alt="Task Image" class="item-image" />
+            <div class="item-points good-points">
+              {{
+                item.custom_value !== undefined && item.custom_value !== null
+                  ? item.custom_value
+                  : item.points
+              }}
+              Points
+            </div>
+          </template>
+        </ScrollingList>
        <ScrollingList
          title="Penalties"
          ref="childPenaltyListRef"
@@ -502,20 +615,13 @@ onUnmounted(() => {
          :readyItemId="readyItemId"
          @item-ready="handleItemReady"
          @trigger-item="triggerTask"
-          :getItemClass="(item) => ({ bad: !item.is_good, good: item.is_good })"
-          :filter-fn="
-            (item) => {
-              return !item.is_good
-            }
-          "
+          :getItemClass="() => ({ bad: true })"
+          :filter-fn="(item: ChildTask) => item.type === 'penalty'"
        >
          <template #item="{ item }">
            <div class="item-name">{{ item.name }}</div>
            <img v-if="item.image_url" :src="item.image_url" alt="Task Image" class="item-image" />
-            <div
-              class="item-points"
-              :class="{ 'good-points': item.is_good, 'bad-points': !item.is_good }"
-            >
+            <div class="item-points bad-points">
              {{
                item.custom_value !== undefined && item.custom_value !== null
                  ? -item.custom_value
@@ -583,6 +689,31 @@ onUnmounted(() => {
      <button @click="closeCancelDialog" class="btn btn-secondary">No</button>
    </div>
  </ModalDialog>
+
+  <!-- Chore confirm dialog -->
+  <ChoreConfirmDialog
+    :show="showChoreConfirmDialog"
+    :choreName="dialogChore?.name ?? ''"
+    :imageUrl="dialogChore?.image_url"
+    @confirm="doConfirmChore"
+    @cancel="cancelChoreConfirmDialog"
+  />
+
+  <!-- Cancel chore confirmation dialog -->
+  <ModalDialog
+    v-if="showChoreCancelDialog && dialogChore"
+    :title="dialogChore.name"
+    subtitle="Chore Pending"
+    @backdrop-click="closeChoreCancelDialog"
+  >
+    <div class="modal-message">
+      This chore is pending confirmation.<br />Would you like to cancel?
+    </div>
+    <div class="modal-actions">
+      <button @click="doCancelConfirmChore" class="btn btn-primary">Yes</button>
+      <button @click="closeChoreCancelDialog" class="btn btn-secondary">No</button>
+    </div>
+  </ModalDialog>
 </template>

 <style scoped>
@@ -708,6 +839,14 @@ onUnmounted(() => {
  pointer-events: none;
 }

+.pending-stamp {
+  color: #fbbf24;
+}
+
+.completed-stamp {
+  color: #22c55e;
+}
+
 .due-label {
  font-size: 0.85rem;
  font-weight: 600;
--- a/frontend/vue-app/src/components/child/ChoreApproveDialog.vue
+++ b/frontend/vue-app/src/components/child/ChoreApproveDialog.vue
@@ -0,0 +1,78 @@
+<template>
+  <ModalDialog v-if="show" @backdrop-click="$emit('cancel')">
+    <template #default>
+      <div class="approve-dialog">
+        <img v-if="imageUrl" :src="imageUrl" alt="Chore" class="chore-image" />
+        <p class="child-label">{{ childName }}</p>
+        <p class="message">completed <strong>{{ choreName }}</strong></p>
+        <p class="message">Will be awarded <strong>{{ points }} points</strong></p>
+        <div class="actions">
+          <button class="btn btn-primary" @click="$emit('approve')">Approve</button>
+          <button class="btn btn-secondary" @click="$emit('reject')">Reject</button>
+        </div>
+      </div>
+    </template>
+  </ModalDialog>
+</template>
+
+<script setup lang="ts">
+import ModalDialog from '../shared/ModalDialog.vue'
+
+defineProps<{
+  show: boolean
+  childName: string
+  choreName: string
+  points: number
+  imageUrl?: string | null
+}>()
+
+defineEmits<{
+  approve: []
+  reject: []
+  cancel: []
+}>()
+</script>
+
+<style scoped>
+.approve-dialog {
+  text-align: center;
+  padding: 0.5rem;
+}
+.chore-image {
+  width: 72px;
+  height: 72px;
+  object-fit: cover;
+  border-radius: 8px;
+  background: var(--info-image-bg);
+  margin-bottom: 0.75rem;
+}
+.child-label {
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: var(--dialog-child-name);
+  margin-bottom: 0.15rem;
+}
+.message {
+  font-size: 1rem;
+  color: var(--dialog-message);
+  margin-bottom: 0.15rem;
+}
+.message:last-of-type {
+  margin-bottom: 1.5rem;
+}
+.actions {
+  display: flex;
+  gap: 1.5rem;
+  justify-content: center;
+}
+.actions button {
+  padding: 0.7rem 1.8rem;
+  border-radius: 10px;
+  border: 0;
+  cursor: pointer;
+  font-weight: 700;
+  font-size: 1.05rem;
+  transition: background 0.18s;
+  min-width: 100px;
+}
+</style>
--- a/frontend/vue-app/src/components/child/ChoreAssignView.vue
+++ b/frontend/vue-app/src/components/child/ChoreAssignView.vue
@@ -1,20 +1,20 @@
 <template>
-  <div class="task-assign-view">
+  <div class="assign-view">
    <h2>Assign Chores</h2>
-    <div class="task-view">
-      <MessageBlock v-if="taskCountRef === 0" message="No chores">
-        <span> <button class="round-btn" @click="goToCreateTask">Create</button> a chore </span>
+    <div class="list-container">
+      <MessageBlock v-if="countRef === 0" message="No chores">
+        <span> <button class="round-btn" @click="goToCreate">Create</button> a chore </span>
      </MessageBlock>
      <ItemList
        v-else
-        ref="taskListRef"
-        :fetchUrl="`/api/child/${childId}/list-all-tasks?type=${typeFilter}`"
+        ref="listRef"
+        :fetchUrl="`/api/child/${childId}/list-all-tasks?type=chore`"
        itemKey="tasks"
        :itemFields="TASK_FIELDS"
        imageField="image_id"
        selectable
-        @loading-complete="(count) => (taskCountRef = count)"
-        :getItemClass="(item) => ({ bad: !item.is_good, good: item.is_good })"
+        @loading-complete="(count) => (countRef = count)"
+        :getItemClass="() => ({ good: true })"
      >
        <template #item="{ item }">
          <img v-if="item.image_url" :src="item.image_url" />
@@ -23,7 +23,7 @@
        </template>
      </ItemList>
    </div>
-    <div class="actions" v-if="taskCountRef > 0">
+    <div class="actions" v-if="countRef > 0">
      <button class="btn btn-secondary" @click="onCancel">Cancel</button>
      <button class="btn btn-primary" @click="onSubmit">Submit</button>
    </div>
@@ -31,7 +31,7 @@
 </template>

 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import ItemList from '../shared/ItemList.vue'
 import MessageBlock from '../shared/MessageBlock.vue'
@@ -41,32 +41,25 @@ import { TASK_FIELDS } from '@/common/models'
 const route = useRoute()
 const router = useRouter()
 const childId = route.params.id
+const listRef = ref()
+const countRef = ref(-1)

-const taskListRef = ref()
-const taskCountRef = ref(-1)
-
-const typeFilter = computed(() => {
-  if (route.params.type === 'good') return 'good'
-  if (route.params.type === 'bad') return 'bad'
-  return 'all'
-})
-
-function goToCreateTask() {
-  router.push({ name: 'CreateTask' })
+function goToCreate() {
+  router.push({ name: 'CreateChore' })
 }

 async function onSubmit() {
-  const selectedIds = taskListRef.value?.selectedItems ?? []
+  const selectedIds = listRef.value?.selectedItems ?? []
  try {
    const resp = await fetch(`/api/child/${childId}/set-tasks`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ type: typeFilter.value, task_ids: selectedIds }),
+      body: JSON.stringify({ type: 'chore', task_ids: selectedIds }),
    })
-    if (!resp.ok) throw new Error('Failed to update tasks')
+    if (!resp.ok) throw new Error('Failed to update chores')
    router.back()
-  } catch (err) {
-    alert('Failed to update tasks.')
+  } catch {
+    alert('Failed to update chores.')
  }
 }

@@ -76,7 +69,7 @@ function onCancel() {
 </script>

 <style scoped>
-.task-assign-view {
+.assign-view {
  display: flex;
  flex-direction: column;
  align-items: center;
@@ -86,15 +79,14 @@ function onCancel() {
  padding: 0;
  min-height: 0;
 }
-.task-assign-view h2 {
+.assign-view h2 {
  font-size: 1.15rem;
  color: var(--assign-heading-color);
  font-weight: 700;
  text-align: center;
  margin: 0.2rem;
 }
-
-.task-view {
+.list-container {
  display: flex;
  flex-direction: column;
  align-items: center;
@@ -104,28 +96,20 @@ function onCancel() {
  padding: 0;
  min-height: 0;
 }
-
 :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);
-}
-
 .name {
  flex: 1;
  text-align: left;
  font-weight: 600;
 }
-
 .value {
  min-width: 60px;
  text-align: right;
  font-weight: 600;
 }
-
 .actions {
  display: flex;
  gap: 3rem;
--- a/frontend/vue-app/src/components/child/ChoreConfirmDialog.vue
+++ b/frontend/vue-app/src/components/child/ChoreConfirmDialog.vue
@@ -0,0 +1,71 @@
+<template>
+  <ModalDialog v-if="show" @backdrop-click="$emit('cancel')">
+    <template #default>
+      <div class="confirm-dialog">
+        <img v-if="imageUrl" :src="imageUrl" alt="Chore" class="chore-image" />
+        <p class="message">Did you finish</p>
+        <p class="chore-name">{{ choreName }}?</p>
+        <div class="actions">
+          <button class="btn btn-primary" @click="$emit('confirm')">Yes!</button>
+          <button class="btn btn-secondary" @click="$emit('cancel')">No</button>
+        </div>
+      </div>
+    </template>
+  </ModalDialog>
+</template>
+
+<script setup lang="ts">
+import ModalDialog from '../shared/ModalDialog.vue'
+
+defineProps<{
+  show: boolean
+  choreName: string
+  imageUrl?: string | null
+}>()
+
+defineEmits<{
+  confirm: []
+  cancel: []
+}>()
+</script>
+
+<style scoped>
+.confirm-dialog {
+  text-align: center;
+  padding: 0.5rem;
+}
+.chore-image {
+  width: 72px;
+  height: 72px;
+  object-fit: cover;
+  border-radius: 8px;
+  background: var(--info-image-bg);
+  margin-bottom: 0.75rem;
+}
+.message {
+  font-size: 1.1rem;
+  color: var(--dialog-message);
+  margin-bottom: 0.25rem;
+}
+.chore-name {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--dialog-child-name);
+  margin-bottom: 1.5rem;
+}
+.actions {
+  display: flex;
+  gap: 1.5rem;
+  justify-content: center;
+}
+.actions button {
+  padding: 0.7rem 1.8rem;
+  border-radius: 10px;
+  border: 0;
+  cursor: pointer;
+  font-weight: 700;
+  font-size: 1.05rem;
+  transition: background 0.18s;
+  min-width: 100px;
+}
+</style>
--- a/frontend/vue-app/src/components/child/KindnessAssignView.vue
+++ b/frontend/vue-app/src/components/child/KindnessAssignView.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="assign-view">
+    <h2>Assign Kindness Acts</h2>
+    <div class="list-container">
+      <MessageBlock v-if="countRef === 0" message="No kindness acts">
+        <span> <button class="round-btn" @click="goToCreate">Create</button> a kindness act </span>
+      </MessageBlock>
+      <ItemList
+        v-else
+        ref="listRef"
+        :fetchUrl="`/api/child/${childId}/list-all-tasks?type=kindness`"
+        itemKey="tasks"
+        :itemFields="TASK_FIELDS"
+        imageField="image_id"
+        selectable
+        @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>
+    </div>
+    <div class="actions" v-if="countRef > 0">
+      <button class="btn btn-secondary" @click="onCancel">Cancel</button>
+      <button class="btn btn-primary" @click="onSubmit">Submit</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import ItemList from '../shared/ItemList.vue'
+import MessageBlock from '../shared/MessageBlock.vue'
+import '@/assets/styles.css'
+import { TASK_FIELDS } from '@/common/models'
+
+const route = useRoute()
+const router = useRouter()
+const childId = route.params.id
+const listRef = ref()
+const countRef = ref(-1)
+
+function goToCreate() {
+  router.push({ name: 'CreateKindness' })
+}
+
+async function onSubmit() {
+  const selectedIds = listRef.value?.selectedItems ?? []
+  try {
+    const resp = await fetch(`/api/child/${childId}/set-tasks`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ type: 'kindness', task_ids: selectedIds }),
+    })
+    if (!resp.ok) throw new Error('Failed to update kindness acts')
+    router.back()
+  } catch {
+    alert('Failed to update kindness acts.')
+  }
+}
+
+function onCancel() {
+  router.back()
+}
+</script>
+
+<style scoped>
+.assign-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  min-height: 0;
+}
+.assign-view h2 {
+  font-size: 1.15rem;
+  color: var(--assign-heading-color);
+  font-weight: 700;
+  text-align: center;
+  margin: 0.2rem;
+}
+.list-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  min-height: 0;
+}
+:deep(.good) {
+  border-color: var(--list-item-border-good);
+  background: var(--list-item-bg-good);
+}
+.name {
+  flex: 1;
+  text-align: left;
+  font-weight: 600;
+}
+.value {
+  min-width: 60px;
+  text-align: right;
+  font-weight: 600;
+}
+.actions {
+  display: flex;
+  gap: 3rem;
+  justify-content: center;
+  margin-top: 0.5rem;
+}
+.actions button {
+  padding: 1rem 2.2rem;
+  border-radius: 12px;
+  border: 0;
+  cursor: pointer;
+  font-weight: 700;
+  font-size: 1.25rem;
+  transition: background 0.18s;
+  min-width: 120px;
+}
+</style>
--- a/frontend/vue-app/src/components/child/ParentView.vue
+++ b/frontend/vue-app/src/components/child/ParentView.vue
@@ -5,11 +5,19 @@ import ScheduleModal from '../shared/ScheduleModal.vue'
 import PendingRewardDialog from './PendingRewardDialog.vue'
 import TaskConfirmDialog from './TaskConfirmDialog.vue'
 import RewardConfirmDialog from './RewardConfirmDialog.vue'
+import ChoreApproveDialog from './ChoreApproveDialog.vue'
 import { useRoute, useRouter } from 'vue-router'
 import ChildDetailCard from './ChildDetailCard.vue'
 import ScrollingList from '../shared/ScrollingList.vue'
 import StatusMessage from '../shared/StatusMessage.vue'
-import { setChildOverride, parseErrorResponse, extendChoreTime } from '@/common/api'
+import {
+  setChildOverride,
+  parseErrorResponse,
+  extendChoreTime,
+  approveChore,
+  rejectChore,
+  resetChore,
+} from '@/common/api'
 import { eventBus } from '@/common/eventBus'
 import '@/assets/styles.css'
 import type {
@@ -31,6 +39,7 @@ import type {
  ChildOverrideDeletedPayload,
  ChoreScheduleModifiedPayload,
  ChoreTimeExtendedPayload,
+  ChildChoreConfirmationPayload,
 } from '@/common/models'
 import {
  isScheduledToday,
@@ -57,8 +66,13 @@ const selectedReward = ref<Reward | null>(null)
 const childChoreListRef = ref()
 const childPenaltyListRef = ref()
 const childRewardListRef = ref()
+const childKindnessListRef = ref()
 const showPendingRewardDialog = ref(false)

+// Chore approve/reject
+const showChoreApproveDialog = ref(false)
+const approveDialogChore = ref<ChildTask | null>(null)
+
 // Override editing
 const showOverrideModal = ref(false)
 const overrideEditTarget = ref<{ entity: Task | Reward; type: 'task' | 'reward' } | null>(null)
@@ -268,6 +282,78 @@ function handleChoreTimeExtended(event: Event) {
  }
 }

+function handleChoreConfirmation(event: Event) {
+  const payload = event.payload as ChildChoreConfirmationPayload
+  if (child.value && payload.child_id === child.value.id) {
+    childChoreListRef.value?.refresh()
+  }
+}
+
+function isChoreCompletedToday(item: ChildTask): boolean {
+  if (item.pending_status !== 'approved' || !item.approved_at) return false
+  const today = new Date().toISOString().slice(0, 10)
+  return item.approved_at.slice(0, 10) === today
+}
+
+function isChorePending(item: ChildTask): boolean {
+  return item.pending_status === 'pending'
+}
+
+async function doApproveChore() {
+  if (!child.value || !approveDialogChore.value) return
+  try {
+    const resp = await approveChore(child.value.id, approveDialogChore.value.id)
+    if (resp.ok) {
+      const data = await resp.json()
+      if (child.value) child.value.points = data.points
+    } else {
+      const { msg } = await parseErrorResponse(resp)
+      alert(`Error: ${msg}`)
+    }
+  } catch (err) {
+    console.error('Failed to approve chore:', err)
+  } finally {
+    showChoreApproveDialog.value = false
+    approveDialogChore.value = null
+  }
+}
+
+async function doRejectChore() {
+  if (!child.value || !approveDialogChore.value) return
+  try {
+    const resp = await rejectChore(child.value.id, approveDialogChore.value.id)
+    if (!resp.ok) {
+      const { msg } = await parseErrorResponse(resp)
+      alert(`Error: ${msg}`)
+    }
+  } catch (err) {
+    console.error('Failed to reject chore:', err)
+  } finally {
+    showChoreApproveDialog.value = false
+    approveDialogChore.value = null
+  }
+}
+
+function cancelChoreApproveDialog() {
+  showChoreApproveDialog.value = false
+  approveDialogChore.value = null
+}
+
+async function doResetChore(item: ChildTask, e: MouseEvent) {
+  e.stopPropagation()
+  closeChoreMenu()
+  if (!child.value) return
+  try {
+    const resp = await resetChore(child.value.id, item.id)
+    if (!resp.ok) {
+      const { msg } = await parseErrorResponse(resp)
+      alert(`Error: ${msg}`)
+    }
+  } catch (err) {
+    console.error('Failed to reset chore:', err)
+  }
+}
+
 // ── Kebab menu ───────────────────────────────────────────────────────────────

 const onDocClick = (e: MouseEvent) => {
@@ -383,7 +469,7 @@ function resetExpiryTimers() {
  const items: ChildTask[] = childChoreListRef.value?.items ?? []
  const now = new Date()
  for (const item of items) {
-    if (!item.schedule || !item.is_good) continue
+    if (!item.schedule || item.type !== 'chore') continue
    if (!isScheduledToday(item.schedule, now)) continue
    const due = getDueTimeToday(item.schedule, now)
    if (!due) continue
@@ -505,6 +591,7 @@ onMounted(async () => {
    eventBus.on('child_override_deleted', handleOverrideDeleted)
    eventBus.on('chore_schedule_modified', handleChoreScheduleModified)
    eventBus.on('chore_time_extended', handleChoreTimeExtended)
+    eventBus.on('child_chore_confirmation', handleChoreConfirmation)

    document.addEventListener('click', onDocClick, true)
    document.addEventListener('visibilitychange', onVisibilityChange)
@@ -541,6 +628,7 @@ onUnmounted(() => {
  eventBus.off('child_override_deleted', handleOverrideDeleted)
  eventBus.off('chore_schedule_modified', handleChoreScheduleModified)
  eventBus.off('chore_time_extended', handleChoreTimeExtended)
+  eventBus.off('child_chore_confirmation', handleChoreConfirmation)

  document.removeEventListener('click', onDocClick, true)
  document.removeEventListener('visibilitychange', onVisibilityChange)
@@ -552,11 +640,29 @@ function getPendingRewardIds(): string[] {
  return items.filter((item: RewardStatus) => item.redeeming).map((item: RewardStatus) => item.id)
 }

-const triggerTask = (task: Task) => {
+const triggerTask = (task: ChildTask) => {
  if (shouldIgnoreNextCardClick.value) {
    shouldIgnoreNextCardClick.value = false
    return
  }
+
+  // For chores, handle pending/completed states
+  if (task.type === 'chore') {
+    // Completed chore — no tap action (use kebab menu "Reset" instead)
+    if (isChoreCompletedToday(task)) return
+    // Expired chore — no tap action
+    if (isChoreExpired(task)) return
+    // Pending chore — open approve/reject dialog
+    if (isChorePending(task)) {
+      approveDialogChore.value = task
+      setTimeout(() => {
+        showChoreApproveDialog.value = true
+      }, 150)
+      return
+    }
+  }
+
+  // Available chore / kindness / penalty — existing trigger flow
  selectedTask.value = task
  const pendingRewardIds = getPendingRewardIds()
  if (pendingRewardIds.length > 0) {
@@ -657,13 +763,19 @@ const confirmTriggerReward = async () => {

 function goToAssignTasks() {
  if (child.value?.id) {
-    router.push({ name: 'TaskAssignView', params: { id: child.value.id, type: 'good' } })
+    router.push({ name: 'ChoreAssignView', params: { id: child.value.id } })
  }
 }

 function goToAssignBadHabits() {
  if (child.value?.id) {
-    router.push({ name: 'TaskAssignView', params: { id: child.value.id, type: 'bad' } })
+    router.push({ name: 'PenaltyAssignView', params: { id: child.value.id } })
+  }
+}
+
+function goToAssignKindness() {
+  if (child.value?.id) {
+    router.push({ name: 'KindnessAssignView', params: { id: child.value.id } })
  }
 }

@@ -696,12 +808,12 @@ function goToAssignRewards() {
          @item-ready="handleChoreItemReady"
          :getItemClass="
            (item) => ({
-              bad: !item.is_good,
-              good: item.is_good,
-              'chore-inactive': isChoreInactive(item),
+              bad: item.type === 'penalty',
+              good: item.type !== 'penalty',
+              'chore-inactive': isChoreInactive(item) || isChoreCompletedToday(item),
            })
          "
-          :filter-fn="(item) => item.is_good"
+          :filter-fn="(item) => item.type === 'chore'"
        >
          <template #item="{ item }: { item: ChildTask }">
            <!-- Kebab menu -->
@@ -748,12 +860,26 @@ function goToAssignRewards() {
                  >
                    Extend Time
                  </button>
+                  <button
+                    v-if="isChoreCompletedToday(item)"
+                    class="menu-item"
+                    @mousedown.stop.prevent
+                    @click="doResetChore(item, $event)"
+                  >
+                    Reset
+                  </button>
                </div>
              </Teleport>
            </div>

            <!-- TOO LATE badge -->
            <span v-if="isChoreExpired(item)" class="chore-stamp">TOO LATE</span>
+            <!-- PENDING badge -->
+            <span v-else-if="isChorePending(item)" class="chore-stamp pending-stamp">PENDING</span>
+            <!-- COMPLETED badge -->
+            <span v-else-if="isChoreCompletedToday(item)" class="chore-stamp completed-stamp"
+              >COMPLETED</span
+            >

            <div class="item-name">{{ item.name }}</div>
            <img v-if="item.image_url" :src="item.image_url" alt="Task Image" class="item-image" />
@@ -768,6 +894,36 @@ function goToAssignRewards() {
            <div v-if="choreDueLabel(item)" class="due-label">{{ choreDueLabel(item) }}</div>
          </template>
        </ScrollingList>
+        <ScrollingList
+          title="Kindness Acts"
+          ref="childKindnessListRef"
+          :fetchBaseUrl="`/api/child/${child?.id}/list-tasks`"
+          :ids="tasks"
+          itemKey="tasks"
+          imageField="image_id"
+          :enableEdit="true"
+          :childId="child?.id"
+          :readyItemId="readyItemId"
+          :isParentAuthenticated="true"
+          @trigger-item="triggerTask"
+          @edit-item="(item) => handleEditItem(item, 'task')"
+          @item-ready="handleItemReady"
+          :getItemClass="() => ({ good: true })"
+          :filter-fn="(item) => item.type === 'kindness'"
+        >
+          <template #item="{ item }">
+            <div class="item-name">{{ item.name }}</div>
+            <img v-if="item.image_url" :src="item.image_url" alt="Task Image" class="item-image" />
+            <div class="item-points good-points">
+              {{
+                item.custom_value !== undefined && item.custom_value !== null
+                  ? item.custom_value
+                  : item.points
+              }}
+              Points
+            </div>
+          </template>
+        </ScrollingList>
        <ScrollingList
          title="Penalties"
          ref="childPenaltyListRef"
@@ -782,10 +938,12 @@ function goToAssignRewards() {
          @trigger-item="triggerTask"
          @edit-item="(item) => handleEditItem(item, 'task')"
          @item-ready="handleItemReady"
-          :getItemClass="(item) => ({ bad: !item.is_good, good: item.is_good })"
+          :getItemClass="
+            (item) => ({ bad: item.type === 'penalty', good: item.type !== 'penalty' })
+          "
          :filter-fn="
            (item) => {
-              return !item.is_good
+              return item.type === 'penalty'
            }
          "
        >
@@ -794,7 +952,10 @@ function goToAssignRewards() {
            <img v-if="item.image_url" :src="item.image_url" alt="Task Image" class="item-image" />
            <div
              class="item-points"
-              :class="{ 'good-points': item.is_good, 'bad-points': !item.is_good }"
+              :class="{
+                'good-points': item.type !== 'penalty',
+                'bad-points': item.type === 'penalty',
+              }"
            >
              {{
                item.custom_value !== undefined && item.custom_value !== null
@@ -840,6 +1001,9 @@ function goToAssignRewards() {
    </div>
    <div class="assign-buttons">
      <button v-if="child" class="btn btn-primary" @click="goToAssignTasks">Assign Chores</button>
+      <button v-if="child" class="btn btn-primary" @click="goToAssignKindness">
+        Assign Kindness Acts
+      </button>
      <button v-if="child" class="btn btn-danger" @click="goToAssignBadHabits">
        Assign Penalties
      </button>
@@ -929,6 +1093,19 @@ function goToAssignRewards() {
        }
      "
    />
+
+    <!-- Chore Approve/Reject Dialog -->
+    <ChoreApproveDialog
+      v-if="showChoreApproveDialog && approveDialogChore"
+      :show="showChoreApproveDialog"
+      :childName="child?.name ?? ''"
+      :choreName="approveDialogChore.name"
+      :points="approveDialogChore.custom_value ?? approveDialogChore.points"
+      :imageUrl="approveDialogChore.image_url"
+      @approve="doApproveChore"
+      @reject="doRejectChore"
+      @cancel="cancelChoreApproveDialog"
+    />
  </div>
 </template>

@@ -1106,6 +1283,14 @@ function goToAssignRewards() {
  pointer-events: none;
 }

+.pending-stamp {
+  color: #fbbf24;
+}
+
+.completed-stamp {
+  color: #22c55e;
+}
+
 /* Due time sub-text */
 .due-label {
  font-size: 0.85rem;
--- a/frontend/vue-app/src/components/child/PenaltyAssignView.vue
+++ b/frontend/vue-app/src/components/child/PenaltyAssignView.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="assign-view">
+    <h2>Assign Penalties</h2>
+    <div class="list-container">
+      <MessageBlock v-if="countRef === 0" message="No penalties">
+        <span> <button class="round-btn" @click="goToCreate">Create</button> a penalty </span>
+      </MessageBlock>
+      <ItemList
+        v-else
+        ref="listRef"
+        :fetchUrl="`/api/child/${childId}/list-all-tasks?type=penalty`"
+        itemKey="tasks"
+        :itemFields="TASK_FIELDS"
+        imageField="image_id"
+        selectable
+        @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>
+    </div>
+    <div class="actions" v-if="countRef > 0">
+      <button class="btn btn-secondary" @click="onCancel">Cancel</button>
+      <button class="btn btn-primary" @click="onSubmit">Submit</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import ItemList from '../shared/ItemList.vue'
+import MessageBlock from '../shared/MessageBlock.vue'
+import '@/assets/styles.css'
+import { TASK_FIELDS } from '@/common/models'
+
+const route = useRoute()
+const router = useRouter()
+const childId = route.params.id
+const listRef = ref()
+const countRef = ref(-1)
+
+function goToCreate() {
+  router.push({ name: 'CreatePenalty' })
+}
+
+async function onSubmit() {
+  const selectedIds = listRef.value?.selectedItems ?? []
+  try {
+    const resp = await fetch(`/api/child/${childId}/set-tasks`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ type: 'penalty', task_ids: selectedIds }),
+    })
+    if (!resp.ok) throw new Error('Failed to update penalties')
+    router.back()
+  } catch {
+    alert('Failed to update penalties.')
+  }
+}
+
+function onCancel() {
+  router.back()
+}
+</script>
+
+<style scoped>
+.assign-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  min-height: 0;
+}
+.assign-view h2 {
+  font-size: 1.15rem;
+  color: var(--assign-heading-color);
+  font-weight: 700;
+  text-align: center;
+  margin: 0.2rem;
+}
+.list-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  min-height: 0;
+}
+:deep(.bad) {
+  border-color: var(--list-item-border-bad);
+  background: var(--list-item-bg-bad);
+}
+.name {
+  flex: 1;
+  text-align: left;
+  font-weight: 600;
+}
+.value {
+  min-width: 60px;
+  text-align: right;
+  font-weight: 600;
+}
+.actions {
+  display: flex;
+  gap: 3rem;
+  justify-content: center;
+  margin-top: 0.5rem;
+}
+.actions button {
+  padding: 1rem 2.2rem;
+  border-radius: 12px;
+  border: 0;
+  cursor: pointer;
+  font-weight: 700;
+  font-size: 1.25rem;
+  transition: background 0.18s;
+  min-width: 120px;
+}
+</style>
--- a/frontend/vue-app/src/components/child/TaskConfirmDialog.vue
+++ b/frontend/vue-app/src/components/child/TaskConfirmDialog.vue
@@ -7,8 +7,8 @@
    @backdrop-click="$emit('cancel')"
  >
    <div class="modal-message">
-      {{ task.is_good ? 'Add' : 'Subtract' }} these points
-      {{ task.is_good ? 'to' : 'from' }}
+      {{ task.type === 'penalty' ? 'Subtract' : 'Add' }} these points
+      {{ task.type === 'penalty' ? 'from' : 'to' }}
      <span class="child-name">{{ childName }}</span>
    </div>
    <div class="modal-actions">
--- a/frontend/vue-app/src/components/child/tests/ChildView.spec.ts
+++ b/frontend/vue-app/src/components/child/tests/ChildView.spec.ts
@@ -33,7 +33,7 @@ describe('ChildView', () => {
    id: 'task-1',
    name: 'Clean Room',
    points: 10,
-    is_good: true,
+    type: 'chore' as const,
    image_url: '/images/task.png',
    custom_value: null,
  }
@@ -42,7 +42,7 @@ describe('ChildView', () => {
    id: 'task-1',
    name: 'Clean Room',
    points: 10,
-    is_good: true,
+    type: 'chore' as const,
    image_url: '/images/task.png',
    custom_value: 15,
  }
@@ -51,7 +51,7 @@ describe('ChildView', () => {
    id: 'task-2',
    name: 'Hit Sibling',
    points: 5,
-    is_good: false,
+    type: 'penalty' as const,
    image_url: '/images/penalty.png',
    custom_value: null,
  }
@@ -60,7 +60,7 @@ describe('ChildView', () => {
    id: 'task-2',
    name: 'Hit Sibling',
    points: 5,
-    is_good: false,
+    type: 'penalty' as const,
    image_url: '/images/penalty.png',
    custom_value: 8,
  }
@@ -248,7 +248,8 @@ describe('ChildView', () => {
      expect(requestCalls.length).toBe(0)
    })

-    it('opens redeem dialog when reward is ready and not pending', () => {
+    it('opens redeem dialog when reward is ready and not pending', async () => {
+      vi.useFakeTimers()
      wrapper.vm.triggerReward({
        id: 'reward-1',
        name: 'Ice Cream',
@@ -256,10 +257,13 @@ describe('ChildView', () => {
        points_needed: 0,
        redeeming: false,
      })
+      vi.advanceTimersByTime(200)
+      await nextTick()

      expect(wrapper.vm.showRewardDialog).toBe(true)
      expect(wrapper.vm.showCancelDialog).toBe(false)
      expect(wrapper.vm.dialogReward?.id).toBe('reward-1')
+      vi.useRealTimers()
    })

    it('does not open redeem dialog when reward is not yet ready', () => {
@@ -275,7 +279,8 @@ describe('ChildView', () => {
      expect(wrapper.vm.showCancelDialog).toBe(false)
    })

-    it('opens cancel dialog when reward is already pending', () => {
+    it('opens cancel dialog when reward is already pending', async () => {
+      vi.useFakeTimers()
      wrapper.vm.triggerReward({
        id: 'reward-1',
        name: 'Ice Cream',
@@ -283,10 +288,13 @@ describe('ChildView', () => {
        points_needed: 0,
        redeeming: true,
      })
+      vi.advanceTimersByTime(200)
+      await nextTick()

      expect(wrapper.vm.showCancelDialog).toBe(true)
      expect(wrapper.vm.showRewardDialog).toBe(false)
      expect(wrapper.vm.dialogReward?.id).toBe('reward-1')
+      vi.useRealTimers()
    })
  })

@@ -300,11 +308,15 @@ describe('ChildView', () => {
    }

    beforeEach(async () => {
+      vi.useFakeTimers()
      wrapper = mount(ChildView)
      await nextTick()
-      await new Promise((resolve) => setTimeout(resolve, 50))
-      wrapper.vm.triggerReward(readyReward)
+      vi.advanceTimersByTime(100)
      await nextTick()
+      wrapper.vm.triggerReward(readyReward)
+      vi.advanceTimersByTime(200)
+      await nextTick()
+      vi.useRealTimers()
    })

    it('closes redeem dialog on cancelRedeemReward', async () => {
@@ -349,11 +361,15 @@ describe('ChildView', () => {
    }

    beforeEach(async () => {
+      vi.useFakeTimers()
      wrapper = mount(ChildView)
      await nextTick()
-      await new Promise((resolve) => setTimeout(resolve, 50))
-      wrapper.vm.triggerReward(pendingReward)
+      vi.advanceTimersByTime(100)
      await nextTick()
+      wrapper.vm.triggerReward(pendingReward)
+      vi.advanceTimersByTime(200)
+      await nextTick()
+      vi.useRealTimers()
    })

    it('closes cancel dialog on closeCancelDialog', async () => {
@@ -605,7 +621,7 @@ describe('ChildView', () => {
        id: 'task-1',
        name: 'Test',
        points: 5,
-        is_good: true,
+        type: 'chore' as const,
        schedule: null,
      })
      expect(result).toBe(null)
@@ -620,7 +636,7 @@ describe('ChildView', () => {
          id: 'task-1',
          name: 'Test',
          points: 5,
-          is_good: true,
+          type: 'chore' as const,
          schedule: {
            mode: 'days' as const,
            day_configs: [{ day: 2, hour: 14, minute: 30 }], // Tuesday 2:30pm — future
--- a/frontend/vue-app/src/components/child/tests/ParentView.spec.ts
+++ b/frontend/vue-app/src/components/child/tests/ParentView.spec.ts
@@ -41,7 +41,7 @@ describe('ParentView', () => {
    id: 'task-1',
    name: 'Clean Room',
    points: 10,
-    is_good: true,
+    type: 'chore' as const,
    image_url: '/images/task.png',
    custom_value: null,
  }
@@ -50,7 +50,7 @@ describe('ParentView', () => {
    id: 'task-2',
    name: 'Hit Sibling',
    points: 5,
-    is_good: false,
+    type: 'penalty' as const,
    image_url: '/images/penalty.png',
    custom_value: null,
  }
@@ -344,7 +344,7 @@ describe('ParentView', () => {

      // The template should show -custom_value or -points for penalties
      // This is tested through the template logic, which we've verified manually
-      // The key is that penalties (is_good: false) show negative values
+      // The key is that penalties (type: 'penalty') show negative values
      expect(true).toBe(true) // Placeholder - template logic verified
    })
  })
--- a/frontend/vue-app/src/components/notification/NotificationView.vue
+++ b/frontend/vue-app/src/components/notification/NotificationView.vue
@@ -6,10 +6,10 @@
    <ItemList
      v-else
      :key="refreshKey"
-      :fetchUrl="`/api/pending-rewards`"
-      itemKey="rewards"
-      :itemFields="PENDING_REWARD_FIELDS"
-      :imageFields="['child_image_id', 'reward_image_id']"
+      :fetchUrl="`/api/pending-confirmations`"
+      itemKey="confirmations"
+      :itemFields="PENDING_CONFIRMATION_FIELDS"
+      :imageFields="['child_image_id', 'entity_image_id']"
      @clicked="handleNotificationClick"
      @loading-complete="(count) => (notificationListCountRef = count)"
    >
@@ -19,10 +19,12 @@
            <img v-if="item.child_image_url" :src="item.child_image_url" alt="Child" />
            <span>{{ item.child_name }}</span>
          </div>
-          <span class="requested-text">requested</span>
+          <span class="requested-text">{{
+            item.entity_type === 'chore' ? 'completed' : 'requested'
+          }}</span>
          <div class="reward-info">
-            <span>{{ item.reward_name }}</span>
-            <img v-if="item.reward_image_url" :src="item.reward_image_url" alt="Reward" />
+            <span>{{ item.entity_name }}</span>
+            <img v-if="item.entity_image_url" :src="item.entity_image_url" alt="" />
          </div>
        </div>
      </template>
@@ -35,8 +37,13 @@ import { ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import ItemList from '../shared/ItemList.vue'
 import MessageBlock from '../shared/MessageBlock.vue'
-import type { PendingReward, Event, ChildRewardRequestEventPayload } from '@/common/models'
-import { PENDING_REWARD_FIELDS } from '@/common/models'
+import type {
+  PendingConfirmation,
+  Event,
+  ChildRewardRequestEventPayload,
+  ChildChoreConfirmationPayload,
+} from '@/common/models'
+import { PENDING_CONFIRMATION_FIELDS } from '@/common/models'
 import { eventBus } from '@/common/eventBus'

 const router = useRouter()
@@ -44,7 +51,7 @@ const router = useRouter()
 const notificationListCountRef = ref(-1)
 const refreshKey = ref(0)

-function handleNotificationClick(item: PendingReward) {
+function handleNotificationClick(item: PendingConfirmation) {
  router.push({ name: 'ParentView', params: { id: item.child_id } })
 }

@@ -55,7 +62,19 @@ function handleRewardRequest(event: Event) {
    payload.operation === 'CANCELLED' ||
    payload.operation === 'GRANTED'
  ) {
-    // Reset count and bump key to force ItemList to re-mount and refetch
+    notificationListCountRef.value = -1
+    refreshKey.value++
+  }
+}
+
+function handleChoreConfirmation(event: Event) {
+  const payload = event.payload as ChildChoreConfirmationPayload
+  if (
+    payload.operation === 'CONFIRMED' ||
+    payload.operation === 'APPROVED' ||
+    payload.operation === 'REJECTED' ||
+    payload.operation === 'CANCELLED'
+  ) {
    notificationListCountRef.value = -1
    refreshKey.value++
  }
@@ -63,10 +82,12 @@ function handleRewardRequest(event: Event) {

 onMounted(() => {
  eventBus.on('child_reward_request', handleRewardRequest)
+  eventBus.on('child_chore_confirmation', handleChoreConfirmation)
 })

 onUnmounted(() => {
  eventBus.off('child_reward_request', handleRewardRequest)
+  eventBus.off('child_chore_confirmation', handleChoreConfirmation)
 })
 </script>

--- a/frontend/vue-app/src/components/shared/EntityEditForm.vue
+++ b/frontend/vue-app/src/components/shared/EntityEditForm.vue
@@ -146,7 +146,7 @@ function submit() {

 // Editable field names (exclude custom fields that are not editable)
 const editableFieldNames = props.fields
-  .filter((f) => f.type !== 'custom' || f.name === 'is_good')
+  .filter((f) => f.type !== 'custom' || f.name === 'type')
  .map((f) => f.name)

 const isDirty = ref(false)
--- a/frontend/vue-app/src/components/task/ChoreEditView.vue
+++ b/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>
--- a/frontend/vue-app/src/components/task/ChoreView.vue
+++ b/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>
--- a/frontend/vue-app/src/components/task/KindnessEditView.vue
+++ b/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>
--- a/frontend/vue-app/src/components/task/KindnessView.vue
+++ b/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>
--- a/frontend/vue-app/src/components/task/PenaltyEditView.vue
+++ b/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>
--- a/frontend/vue-app/src/components/task/PenaltyView.vue
+++ b/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>
--- a/frontend/vue-app/src/components/task/TaskEditView.vue
+++ b/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>
--- a/frontend/vue-app/src/components/task/TaskSubNav.vue
+++ b/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>
--- a/frontend/vue-app/src/components/task/TaskView.vue
+++ b/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>
--- a/frontend/vue-app/src/layout/ParentLayout.vue
+++ b/frontend/vue-app/src/layout/ParentLayout.vue
@@ -22,6 +22,9 @@ const showBack = computed(
    !(
      route.path === '/parent' ||
      route.name === 'TaskView' ||
+      route.name === 'ChoreView' ||
+      route.name === 'KindnessView' ||
+      route.name === 'PenaltyView' ||
      route.name === 'RewardView' ||
      route.name === 'NotificationView'
    ),
@@ -56,7 +59,9 @@ onMounted(async () => {
              'ParentView',
              'ChildEditView',
              'CreateChild',
-              'TaskAssignView',
+              'ChoreAssignView',
+              'KindnessAssignView',
+              'PenaltyAssignView',
              'RewardAssignView',
            ].includes(String(route.name)),
          }"
@@ -82,8 +87,21 @@ onMounted(async () => {
          </svg>
        </button>
        <button
-          :class="{ active: ['TaskView', 'EditTask', 'CreateTask'].includes(String(route.name)) }"
-          @click="router.push({ name: 'TaskView' })"
+          :class="{
+            active: [
+              'TaskView',
+              'ChoreView',
+              'KindnessView',
+              'PenaltyView',
+              'EditChore',
+              'CreateChore',
+              'EditKindness',
+              'CreateKindness',
+              'EditPenalty',
+              'CreatePenalty',
+            ].includes(String(route.name)),
+          }"
+          @click="router.push({ name: 'ChoreView' })"
          aria-label="Tasks"
          title="Tasks"
        >
--- a/frontend/vue-app/src/router/index.ts
+++ b/frontend/vue-app/src/router/index.ts
@@ -5,12 +5,19 @@ import ParentLayout from '../layout/ParentLayout.vue'
 import ChildrenListView from '../components/shared/ChildrenListView.vue'
 import ChildView from '../components/child/ChildView.vue'
 import ParentView from '../components/child/ParentView.vue'
-import TaskView from '../components/task/TaskView.vue'
+import TaskSubNav from '../components/task/TaskSubNav.vue'
+import ChoreView from '../components/task/ChoreView.vue'
+import KindnessView from '../components/task/KindnessView.vue'
+import PenaltyView from '../components/task/PenaltyView.vue'
+import ChoreEditView from '@/components/task/ChoreEditView.vue'
+import KindnessEditView from '@/components/task/KindnessEditView.vue'
+import PenaltyEditView from '@/components/task/PenaltyEditView.vue'
 import RewardView from '../components/reward/RewardView.vue'
-import TaskEditView from '@/components/task/TaskEditView.vue'
 import RewardEditView from '@/components/reward/RewardEditView.vue'
 import ChildEditView from '@/components/child/ChildEditView.vue'
-import TaskAssignView from '@/components/child/TaskAssignView.vue'
+import ChoreAssignView from '@/components/child/ChoreAssignView.vue'
+import KindnessAssignView from '@/components/child/KindnessAssignView.vue'
+import PenaltyAssignView from '@/components/child/PenaltyAssignView.vue'
 import RewardAssignView from '@/components/child/RewardAssignView.vue'
 import NotificationView from '@/components/notification/NotificationView.vue'
 import AuthLayout from '@/layout/AuthLayout.vue'
@@ -109,19 +116,61 @@ const routes = [
      },
      {
        path: 'tasks',
-        name: 'TaskView',
-        component: TaskView,
-        props: false,
+        component: TaskSubNav,
+        children: [
+          {
+            path: '',
+            name: 'TaskView',
+            redirect: { name: 'ChoreView' },
+          },
+          {
+            path: 'chores',
+            name: 'ChoreView',
+            component: ChoreView,
+          },
+          {
+            path: 'kindness',
+            name: 'KindnessView',
+            component: KindnessView,
+          },
+          {
+            path: 'penalties',
+            name: 'PenaltyView',
+            component: PenaltyView,
+          },
+        ],
      },
      {
-        path: 'tasks/create',
-        name: 'CreateTask',
-        component: TaskEditView,
+        path: 'tasks/chores/create',
+        name: 'CreateChore',
+        component: ChoreEditView,
      },
      {
-        path: 'tasks/:id/edit',
-        name: 'EditTask',
-        component: TaskEditView,
+        path: 'tasks/chores/:id/edit',
+        name: 'EditChore',
+        component: ChoreEditView,
+        props: true,
+      },
+      {
+        path: 'tasks/kindness/create',
+        name: 'CreateKindness',
+        component: KindnessEditView,
+      },
+      {
+        path: 'tasks/kindness/:id/edit',
+        name: 'EditKindness',
+        component: KindnessEditView,
+        props: true,
+      },
+      {
+        path: 'tasks/penalties/create',
+        name: 'CreatePenalty',
+        component: PenaltyEditView,
+      },
+      {
+        path: 'tasks/penalties/:id/edit',
+        name: 'EditPenalty',
+        component: PenaltyEditView,
        props: true,
      },
      {
@@ -142,9 +191,21 @@ const routes = [
        props: true,
      },
      {
-        path: ':id/assign-tasks/:type?',
-        name: 'TaskAssignView',
-        component: TaskAssignView,
+        path: ':id/assign-chores',
+        name: 'ChoreAssignView',
+        component: ChoreAssignView,
+        props: true,
+      },
+      {
+        path: ':id/assign-kindness',
+        name: 'KindnessAssignView',
+        component: KindnessAssignView,
+        props: true,
+      },
+      {
+        path: ':id/assign-penalties',
+        name: 'PenaltyAssignView',
+        component: PenaltyAssignView,
        props: true,
      },
      {