Refactored frontend directory

frontend/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>