round 1

web/vue-app/src/components/child/ChildDetailCard.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { defineProps, toRefs, ref, onMounted, onBeforeUnmount } from 'vue'
+import { getCachedImageUrl, revokeAllImageUrls } from '../../common/imageCache'
+
+interface Child {
+  id: string | number
+  name: string
+  age: number
+  points?: number
+  image_id: string | null
+}
+
+const props = defineProps<{
+  child: Child | null
+}>()
+
+const { child } = toRefs(props)
+const imageUrl = ref<string | null>(null)
+
+const imageCacheName = 'images-v1'
+
+const fetchImage = async (imageId: string) => {
+  try {
+    const url = await getCachedImageUrl(imageId, imageCacheName)
+    imageUrl.value = url
+  } catch (err) {
+    console.error('Error fetching child image:', err)
+  }
+}
+
+onMounted(() => {
+  if (child.value && child.value.image_id) {
+    fetchImage(child.value.image_id)
+  }
+})
+
+// Revoke created object URLs when component unmounts to avoid memory leaks
+onBeforeUnmount(() => {
+  revokeAllImageUrls()
+})
+</script>
+
+<template>
+  <div v-if="child" class="detail-card">
+    <h1>{{ child.name }}</h1>
+    <img v-if="imageUrl" :src="imageUrl" alt="Child Image" class="child-image" />
+    <div class="info">
+      <div class="info-item">
+        <span class="label">Age:</span>
+        <span class="value">{{ child.age }}</span>
+      </div>
+      <div class="info-item">
+        <span class="label">Points:</span>
+        <span class="value">{{ child.points ?? '—' }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.detail-card {
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
+  padding: 1.2rem 1rem;
+  max-width: 420px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.detail-card h1 {
+  font-size: 1.3rem;
+  color: #333;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.child-image {
+  width: 64px;
+  height: 64px;
+  object-fit: cover;
+  border-radius: 50%;
+  display: block;
+  margin: 0 auto 0.7rem auto;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0.7rem;
+  background: #f5f5f5;
+  border-radius: 7px;
+  font-size: 0.98rem;
+}
+
+/* Even more compact on small screens */
+@media (max-width: 480px) {
+  .detail-card {
+    padding: 0.7rem 0.4rem;
+    max-width: 98vw;
+  }
+  .detail-card h1 {
+    font-size: 1.05rem;
+    margin-bottom: 0.7rem;
+  }
+  .child-image {
+    width: 48px;
+    height: 48px;
+    margin-bottom: 0.5rem;
+  }
+  .info-item {
+    padding: 0.38rem 0.5rem;
+    font-size: 0.93rem;
+  }
+}
+</style>

web/vue-app/src/components/child/ChildForm.vue

@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import { defineProps, defineEmits, ref, watch } from 'vue'
+import ImagePicker from '../ImagePicker.vue'
+
+const props = defineProps<{
+  child: { id: string | number; name: string; age: number; image_id?: string | null } | null
+}>()
+const emit = defineEmits(['close', 'updated'])
+
+const name = ref(props.child?.name ?? '')
+const age = ref(props.child?.age ?? '')
+const selectedImageId = ref<string | null>(props.child?.image_id ?? null)
+const localImageFile = ref<File | null>(null)
+
+watch(
+  () => props.child,
+  (c) => {
+    name.value = c?.name ?? ''
+    age.value = c?.age ?? ''
+    selectedImageId.value = c?.image_id ?? null
+    localImageFile.value = null
+  },
+  { immediate: true },
+)
+
+// Handle new image from ImagePicker
+function onAddImage({ id, file }: { id: string; file: File }) {
+  if (id === 'local-upload') {
+    localImageFile.value = file
+  }
+}
+
+const submit = async () => {
+  let imageId = selectedImageId.value
+
+  // 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', '1')
+    formData.append('permanent', 'false')
+    try {
+      const resp = await fetch('/api/image/upload', {
+        method: 'POST',
+        body: formData,
+      })
+      if (!resp.ok) throw new Error('Image upload failed')
+      const data = await resp.json()
+      imageId = data.id
+    } catch (err) {
+      alert('Failed to upload image.')
+      return
+    }
+  }
+
+  // Now update the child
+  try {
+    const resp = await fetch(`/api/child/${props.child?.id}/edit`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        name: name.value,
+        age: age.value,
+        image_id: imageId,
+      }),
+    })
+    if (!resp.ok) throw new Error('Failed to update child')
+    emit('updated')
+  } catch (err) {
+    alert('Failed to update child.')
+  }
+}
+</script>
+
+<template>
+  <div class="modal-backdrop">
+    <div class="modal">
+      <h3>Edit Child</h3>
+      <form @submit.prevent="submit" class="form">
+        <div class="form-group">
+          <label for="child-name">Name</label>
+          <input id="child-name" v-model="name" required />
+        </div>
+        <div class="form-group">
+          <label for="child-age">Age</label>
+          <input id="child-age" v-model="age" type="number" min="0" required />
+        </div>
+        <div class="form-group image-picker-group">
+          <label for="child-image">Image</label>
+          <ImagePicker
+            id="child-image"
+            v-model="selectedImageId"
+            :image-type="1"
+            @add-image="onAddImage"
+          />
+        </div>
+        <div class="actions">
+          <button type="button" class="btn cancel" @click="emit('close')">Cancel</button>
+          <button type="submit" class="btn save">Save</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  z-index: 1200;
+  overflow-y: auto;
+  padding-top: max(3vh, env(safe-area-inset-top, 24px));
+  padding-bottom: max(3vh, env(safe-area-inset-bottom, 24px));
+}
+
+.modal {
+  background: #fff;
+  color: #222;
+  padding: 1.2rem 2rem 1.2rem 2rem;
+  border-radius: 12px;
+  width: 360px;
+  max-width: 100vw;
+  max-height: 100vh;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+  text-align: center;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+@media (max-width: 600px), (max-height: 480px) {
+  .modal {
+    width: 90vw;
+    max-width: 98vw;
+    max-height: 94vh;
+    padding: 0.7rem 0.7rem 0.7rem 0.7rem;
+    font-size: 0.97rem;
+  }
+}
+
+@media (orientation: landscape) and (min-width: 601px) {
+  .modal {
+    width: 75vw;
+    max-width: 600px;
+    max-height: 94vh;
+  }
+}
+
+h3 {
+  margin-bottom: 1.2rem;
+  font-size: 1.15rem;
+  color: #667eea;
+  font-weight: 700;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.1rem;
+}
+
+.form-group {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.35rem;
+  box-sizing: border-box;
+}
+
+label {
+  font-weight: 600;
+  color: #333;
+  font-size: 1rem;
+}
+
+input[type='text'],
+input[type='number'] {
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 0.5rem 0.7rem;
+  border-radius: 8px;
+  border: 1px solid #e6e6e6;
+  font-size: 1rem;
+  background: #fafbff;
+  color: #222;
+  transition: border 0.2s;
+}
+input:focus {
+  outline: none;
+  border: 1.5px solid #667eea;
+}
+
+.actions {
+  display: flex;
+  gap: 0.7rem;
+  justify-content: center;
+  margin-top: 0.5rem;
+}
+.btn {
+  padding: 0.5rem 1.1rem;
+  border-radius: 8px;
+  border: 0;
+  cursor: pointer;
+  font-weight: 700;
+  font-size: 1rem;
+  transition: background 0.18s;
+}
+.btn.cancel {
+  background: #f3f3f3;
+  color: #666;
+}
+.btn.save {
+  background: #667eea;
+  color: white;
+}
+.btn.save:hover {
+  background: #5a67d8;
+}
+
+.form-group.image-picker-group {
+  display: block;
+  text-align: left;
+}
+</style>

web/vue-app/src/components/child/ChildView.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import ChildDetailCard from './ChildDetailCard.vue'
+import ChildTaskList from '../task/ChildTaskList.vue'
+import ChildRewardList from '../reward/ChildRewardList.vue'
+
+interface Child {
+  id: string | number
+  name: string
+  age: number
+  points?: number
+}
+
+const route = useRoute()
+
+const child = ref<Child | null>(null)
+const tasks = ref<string[]>([])
+const loading = ref(true)
+const error = ref<string | null>(null)
+
+onMounted(async () => {
+  try {
+    const resp = await fetch(`/api/child/${route.params.id}`)
+    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+    const data = await resp.json()
+    child.value = data.children ? data.children : data
+    tasks.value = data.tasks || []
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to fetch child'
+    console.error(err)
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<template>
+  <div class="container">
+    <div v-if="loading" class="loading">Loading...</div>
+    <div v-else-if="error" class="error">Error: {{ error }}</div>
+
+    <div v-else class="layout">
+      <div class="main">
+        <ChildDetailCard :child="child" />
+        <ChildTaskList
+          :task-ids="tasks"
+          :child-id="child ? child.id : null"
+          :is-parent-authenticated="false"
+        />
+        <ChildRewardList
+          :child-id="child ? child.id : null"
+          :is-parent-authenticated="false"
+          @points-updated="
+            ({ id, points }) => {
+              if (child && child.id === id) child.points = points
+            }
+          "
+        />
+        <!-- removed placeholder -->
+      </div>
+      <!-- Remove this aside block:
+      <aside class="side">
+        <div class="placeholder">Additional components go here</div>
+      </aside>
+      -->
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  min-height: 100vh;
+  padding: 2rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  box-sizing: border-box;
+}
+.back-btn {
+  background: white;
+  border: 0;
+  padding: 0.6rem 1rem;
+  border-radius: 8px;
+  cursor: pointer;
+  margin-bottom: 1.5rem;
+  color: #667eea;
+  font-weight: 600;
+}
+.loading,
+.error {
+  color: white;
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+.error {
+  color: #ff6b6b;
+  background: rgba(255, 107, 107, 0.1);
+  border-radius: 8px;
+  padding: 1rem;
+}
+.layout {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  /* Remove grid styles */
+  /* grid-template-columns: 1fr 320px; */
+  /* gap: 1.5rem; */
+}
+.main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  width: 100%;
+  max-width: 600px; /* or whatever width fits your content best */
+}
+.side {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.placeholder {
+  background: rgba(255, 255, 255, 0.08);
+  color: white;
+  padding: 1rem;
+  border-radius: 8px;
+  min-height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+/* Mobile adjustments */
+@media (max-width: 900px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 480px) {
+  .container {
+    padding: 1rem;
+  }
+  .back-btn {
+    padding: 0.45rem 0.75rem;
+    font-size: 0.95rem;
+    margin-bottom: 1rem;
+  }
+  .main {
+    gap: 1rem;
+  }
+  .placeholder {
+    padding: 0.75rem;
+    min-height: 80px;
+  }
+}
+</style>

web/vue-app/src/components/child/ParentView.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { isParentAuthenticated } from '../../stores/auth'
+import ChildDetailCard from './ChildDetailCard.vue'
+import ChildTaskList from '../task/ChildTaskList.vue'
+import ChildRewardList from '../reward/ChildRewardList.vue'
+import AssignTaskButton from '../AssignTaskButton.vue'
+
+interface Child {
+  id: string | number
+  name: string
+  age: number
+  points?: number
+}
+
+const route = useRoute()
+
+const child = ref<Child | null>(null)
+const tasks = ref<string[]>([])
+const loading = ref(true)
+const error = ref<string | null>(null)
+const rewardListRef = ref()
+
+onMounted(async () => {
+  try {
+    const resp = await fetch(`/api/child/${route.params.id}`)
+    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+    const data = await resp.json()
+    child.value = data.children ? data.children : data
+    tasks.value = data.tasks || []
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to fetch child'
+    console.error(err)
+  } finally {
+    loading.value = false
+  }
+})
+
+const refreshRewards = () => {
+  rewardListRef.value?.refresh()
+}
+</script>
+
+<template>
+  <div class="container">
+    <div v-if="loading" class="loading">Loading...</div>
+    <div v-else-if="error" class="error">Error: {{ error }}</div>
+
+    <div v-else class="layout">
+      <div class="main">
+        <ChildDetailCard :child="child" />
+        <ChildTaskList
+          :task-ids="tasks"
+          :child-id="child ? child.id : null"
+          :is-parent-authenticated="isParentAuthenticated"
+          @points-updated="
+            ({ id, points }) => {
+              if (child && child.id === id) child.points = points
+              refreshRewards()
+            }
+          "
+        />
+        <ChildRewardList
+          ref="rewardListRef"
+          :child-id="child ? child.id : null"
+          :is-parent-authenticated="isParentAuthenticated"
+          @points-updated="
+            ({ id, points }) => {
+              if (child && child.id === id) child.points = points
+              refreshRewards()
+            }
+          "
+        />
+      </div>
+    </div>
+    <!-- Place the AssignTaskButton here, outside .main but inside .container -->
+    <AssignTaskButton :child-id="child ? child.id : null" />
+  </div>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  min-height: 100vh;
+  padding: 2rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  box-sizing: border-box;
+}
+.back-btn {
+  background: white;
+  border: 0;
+  padding: 0.6rem 1rem;
+  border-radius: 8px;
+  cursor: pointer;
+  margin-bottom: 1.5rem;
+  color: #667eea;
+  font-weight: 600;
+}
+.loading,
+.error {
+  color: white;
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+.error {
+  color: #ff6b6b;
+  background: rgba(255, 107, 107, 0.1);
+  border-radius: 8px;
+  padding: 1rem;
+}
+.layout {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  /* Remove grid styles */
+  /* grid-template-columns: 1fr 320px; */
+  /* gap: 1.5rem; */
+}
+.main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  width: 100%;
+  max-width: 600px; /* or whatever width fits your content best */
+}
+.side {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.placeholder {
+  background: rgba(255, 255, 255, 0.08);
+  color: white;
+  padding: 1rem;
+  border-radius: 8px;
+  min-height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+/* Mobile adjustments */
+@media (max-width: 900px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 480px) {
+  .container {
+    padding: 1rem;
+  }
+  .back-btn {
+    padding: 0.45rem 0.75rem;
+    font-size: 0.95rem;
+    margin-bottom: 1rem;
+  }
+  .main {
+    gap: 1rem;
+  }
+  .placeholder {
+    padding: 0.75rem;
+    min-height: 80px;
+  }
+}
+</style>