From e8f1b9447b2b42389d836277b52f209c51d2de89 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Wed, 16 Apr 2025 23:16:05 +0100
Subject: [PATCH] feat(*): Display feedback after upload

---
 src/lib/components/AssessmentFeedback.svelte | 23 ++++++++++++++++++++
 src/routes/results/+page.svelte              | 19 +++++++++++++---
 src/routes/upload/+page.svelte               |  5 ++++-
 3 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/components/AssessmentFeedback.svelte

diff --git a/src/lib/components/AssessmentFeedback.svelte b/src/lib/components/AssessmentFeedback.svelte
new file mode 100644
index 0000000..4598a12
--- /dev/null
+++ b/src/lib/components/AssessmentFeedback.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  export let grade: string = '';
+  export let strengths: string = '';
+  export let areas_for_improvement: string = '';
+  export let individualized_activity: string = '';
+  export let reflection_question: string = '';
+  export let teacher_suggestion: string = '';
+  export let reasoning: string = '';
+</script>
+
+<section class="max-w-xl mx-auto bg-white rounded shadow p-6 mt-8">
+  <h2 class="text-xl font-bold mb-4 text-blue-700">AI Assessment Feedback</h2>
+  <div class="mb-2"><span class="font-semibold">Grade:</span> {grade}</div>
+  <div class="mb-2"><span class="font-semibold">Strengths:</span> {strengths}</div>
+  <div class="mb-2"><span class="font-semibold">Areas for Improvement:</span> {areas_for_improvement}</div>
+  <div class="mb-2"><span class="font-semibold">Individualized Activity:</span> {individualized_activity}</div>
+  <div class="mb-2"><span class="font-semibold">Reflection Question:</span> {reflection_question}</div>
+  <div class="mb-2"><span class="font-semibold">Teacher Suggestion:</span> {teacher_suggestion}</div>
+  <details class="mt-4">
+    <summary class="cursor-pointer font-semibold text-gray-600">Show AI Reasoning</summary>
+    <div class="mt-2 text-gray-700 whitespace-pre-line">{reasoning}</div>
+  </details>
+</section>
diff --git a/src/routes/results/+page.svelte b/src/routes/results/+page.svelte
index 5da9522..9c7ff5d 100644
--- a/src/routes/results/+page.svelte
+++ b/src/routes/results/+page.svelte
@@ -1,10 +1,23 @@
 <script lang="ts">
-// Results logic will go here
+import AssessmentFeedback from '$lib/components/AssessmentFeedback.svelte';
+import { onMount } from 'svelte';
+
+let feedback: any = null;
+
+onMount(() => {
+  // For hackathon simplicity, get feedback from history state
+  if (window.history.state && window.history.state.feedback) {
+    feedback = window.history.state.feedback;
+  }
+});
 </script>
 
 <section class="max-w-xl mx-auto py-12">
   <h1 class="text-2xl font-bold mb-4">Assessment Results</h1>
   <p class="mb-6">View detailed feedback and recommendations for each student submission.</p>
-  <!-- Results table or cards will go here -->
-  <div class="border rounded p-6 text-gray-500">No results yet. Upload submissions to see feedback here.</div>
+  {#if feedback}
+    <AssessmentFeedback {...feedback} />
+  {:else}
+    <div class="border rounded p-6 text-gray-500">No results yet. Upload submissions to see feedback here.</div>
+  {/if}
 </section>
diff --git a/src/routes/upload/+page.svelte b/src/routes/upload/+page.svelte
index 3c661f9..3f4cf9b 100644
--- a/src/routes/upload/+page.svelte
+++ b/src/routes/upload/+page.svelte
@@ -47,9 +47,12 @@ async function handleSubmit(event: Event) {
     });
     const result = await response.json();
     if (response.ok && result.success) {
-      successMsg = result.feedback;
+      // Redirect to /results with feedback in history state
+      window.history.pushState({ feedback: result }, '', '/results');
+      window.location.assign('/results');
       file = null;
       textInput = '';
+      return;
     } else {
       errorMsg = result.error || 'An error occurred.';
     }