some fixes

opus_submitter/src/components/AdminPanel.vue

@@ -43,7 +43,7 @@
             <tbody>
               <tr v-for="response in responsesNeedingValidation" :key="response.id">
                 <td>
-                  <div class="font-bold">{{ response.puzzle_name }}</div>
+                  <div class="font-bold">{{ response.puzzle_title }}</div>
                   <div class="text-sm opacity-50">ID: {{ response.id }}</div>
                 </td>
                 <td>
@@ -110,19 +110,43 @@
   
   <!-- Validation Modal -->
   <div v-if="validationModal.show" class="modal modal-open">
-    <div class="modal-box">
+    <div class="modal-box w-11/12 max-w-5xl">
       <h3 class="font-bold text-lg mb-4">Validate Response</h3>
+
+      <div v-for="file in validationModal.response.files">
+        <img :src="file.file_url">
+      </div>
       
       <div v-if="validationModal.response" class="space-y-4">
         <div class="alert alert-info">
           <i class="mdi mdi-information-outline"></i>
           <div>
-            <div class="font-bold">{{ validationModal.response.puzzle_name }}</div>
+            <div class="font-bold">{{ validationModal.response.puzzle_title }}</div>
             <div class="text-sm">Review and correct the OCR data below</div>
           </div>
         </div>
         
-        <div class="grid grid-cols-3 gap-4">
+        <div class="grid grid-cols-4 gap-4">
+
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Puzzle</span>
+            </label>
+            <select 
+              v-model="validationModal.data.puzzle"
+              class="select select-bordered select-sm w-full"
+            >
+              <option value="">Select puzzle...</option>
+              <option 
+                v-for="puzzle in puzzlesStore.puzzles" 
+                :key="puzzle.id" 
+                :value="puzzle.id"
+              >
+              {{ puzzle.title }}
+              </option>
+            </select>
+          </div>
+
           <div class="form-control">
             <label class="label">
               <span class="label-text">Cost</span>
@@ -179,8 +203,10 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { apiService } from '../services/apiService'
-import type { PuzzleResponse } from '../types'
+import { apiService } from '@/services/apiService'
+import type { PuzzleResponse } from '@/types'
+import {usePuzzlesStore} from '@/stores/puzzles'
+const puzzlesStore = usePuzzlesStore()
 
 // Reactive data
 const stats = ref({
@@ -199,6 +225,7 @@ const validationModal = ref({
   show: false,
   response: null as PuzzleResponse | null,
   data: {
+    puzzle_title: '',
     validated_cost: '',
     validated_cycles: '',
     validated_area: ''
@@ -244,6 +271,7 @@ const loadData = async () => {
 const openValidationModal = (response: PuzzleResponse) => {
   validationModal.value.response = response
   validationModal.value.data = {
+    puzzle: response.puzzle || '',
     validated_cost: response.cost || '',
     validated_cycles: response.cycles || '',
     validated_area: response.area || ''
@@ -255,6 +283,7 @@ const closeValidationModal = () => {
   validationModal.value.show = false
   validationModal.value.response = null
   validationModal.value.data = {
+    puzzle: '',
     validated_cost: '',
     validated_cycles: '',
     validated_area: ''