Move review to separate model

app/components/admin/Answer.vue

@@ -6,13 +6,16 @@ const props = defineProps<{
     text: string | null;
     updatedAt: string;
     team: { id: number; name: string };
-    score: number | null;
-    review: string | null;
-    reviewer: { name: string; id: number } | null;
+    final: boolean;
+    review: {
+      internalNote: string | null;
+      rankingValue: number | null;
+      showcase: boolean;
+      score: number | null;
+      review: string | null;
+      reviewer: { name: string; id: number } | null;
+    } | null;
     member: { name: string; id: number } | null;
-    internalNote: string | null;
-    rankingValue: number | null;
-    showcase: boolean;
     picture: {
       url: string;
       createdAt: string;
@@ -35,23 +38,26 @@ const header = computed(() => {
     props.answer.picture?.url ? '📸✅' : '📷❌',
     props.answer.text ? '📝✅' : '📝❌',
     props.answer.review ? '🔍✅' : '🔍❌',
-    props.answer.score ?? 'No points',
+    props.answer.review?.score ?? 'No points',
     d(props.answer.updatedAt, {
       dateStyle: 'medium',
       timeStyle: 'medium'
     }),
-    props.answer.rankingValue,
-    props.answer.showcase ? '★' : null
+    props.answer.review?.rankingValue,
+    props.answer.review?.showcase ? '★' : null
   ];
 
   return parts.filter((s) => !!s).join('  –  ');
 });
 
 const style = computed<[string, string]>(() => {
-  if (props.answer.review && props.answer.score !== null) {
+  if (props.answer.review?.review && props.answer.review?.score !== null) {
     return ['success', 'check'];
   }
-  if (props.answer.review || props.answer.score !== null) {
+  if (!props.answer.final) {
+    return ['', ''];
+  }
+  if (props.answer.review?.review || props.answer.review?.score !== null) {
     return ['danger', 'priority_high'];
   }
   if (
@@ -71,6 +77,7 @@ const style = computed<[string, string]>(() => {
         <div
           class="mb-2 grid grid-cols-3 justify-between gap-8 rounded-lg bg-gray-200 p-4 font-bold md:grid-cols-6"
         >
+          <p v-if="!answer.final">NOT FINAL</p>
           <p>
             {{
               answer.picture?.url ? '📸✅ Picture done' : '📷❌ Picture missing'
@@ -80,14 +87,14 @@ const style = computed<[string, string]>(() => {
           <p>
             {{ answer.review ? '🔍✅ Review done' : '🔍❌ Review missing' }}
           </p>
-          <p v-if="answer.rankingValue">
+          <p v-if="answer.review?.rankingValue">
             <VaIcon name="leaderboard" color="primary" />
-            {{ answer.rankingValue }}
+            {{ answer.review?.rankingValue }}
           </p>
-          <p v-if="answer.showcase">
+          <p v-if="answer.review?.showcase">
             <VaIcon name="auto_awesome" color="warning" /> Showcase
           </p>
-          <p>{{ answer.score ?? 'No' }} points</p>
+          <p>{{ answer.review?.score ?? 'No' }} points</p>
         </div>
         <ClickableImage
           v-if="answer.picture?.url"