feat: add chore, kindness, and penalty management components

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

frontend/vue-app/src/components/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>