fixed ui prompt in quiz page when quiz is completed

components/daily-quiz/daily-quiz-form.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { CheckCircle2 } from "lucide-react";
 import { useEffect, useState } from "react";
 
 import { PixelAvatar } from "@/components/avatar/pixel-avatar";
@@ -108,18 +109,77 @@ export function DailyQuizForm() {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
+      {isCompleted && submission ? (
-        <Badge>Today&apos;s check-in</Badge>
+        <>
-        <Badge variant={isCompleted ? "default" : "outline"}>
+          <Card className="border-primary/40 bg-primary/10">
-          {isCompleted ? "Completed" : "Not completed"}
+            <CardContent className="flex items-start gap-4 pt-6">
-        </Badge>
+              <div className="rounded-full bg-primary/15 p-2.5">
-      </div>
+                <CheckCircle2
+                  aria-hidden="true"
+                  className="h-7 w-7 text-primary"
+                />
+              </div>
+              <div className="space-y-1">
+                <p className="text-lg font-semibold tracking-tight">
+                  Today&apos;s quiz is complete
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  Your wellness check-in and journal are saved for today. You
+                  can review your answers below, and come back tomorrow for
+                  your next quiz.
+                </p>
+              </div>
+            </CardContent>
+          </Card>
 
-      <Card>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Your pet today</CardTitle>
+              <CardDescription>
+                Based on the wellness check-in you already submitted.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-col items-center gap-4">
+              <PixelAvatar mood={submission.condition.mood} size="md" />
+              <div className="grid w-full grid-cols-3 gap-2 text-center text-sm">
+                <div className="rounded-lg border bg-background px-3 py-2">
+                  <p className="text-muted-foreground">Mood</p>
+                  <p className="font-medium capitalize">
+                    {submission.condition.mood}
+                  </p>
+                </div>
+                <div className="rounded-lg border bg-background px-3 py-2">
+                  <p className="text-muted-foreground">Energy</p>
+                  <p className="font-medium">
+                    {submission.condition.energy}/{WELLNESS_SCALE_MAX}
+                  </p>
+                </div>
+                <div className="rounded-lg border bg-background px-3 py-2">
+                  <p className="text-muted-foreground">Health</p>
+                  <p className="font-medium">
+                    {submission.condition.health}/{WELLNESS_SCALE_MAX}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </>
+      ) : (
+        <div className="flex items-center justify-between">
+          <Badge>Today&apos;s check-in</Badge>
+          <Badge variant="outline">Not completed</Badge>
+        </div>
+      )}
+
+      <Card className={isCompleted ? "opacity-90" : undefined}>
         <CardHeader>
-          <CardTitle className="text-base">Wellness</CardTitle>
+          <CardTitle className="text-base">
+            {isCompleted ? "Your answers today" : "Wellness"}
+          </CardTitle>
           <CardDescription>
-            Rate your wellness from 1 to 5. Sleep length uses hours.
+            {isCompleted
+              ? "These fields are locked until tomorrow's quiz."
+              : "Rate your wellness from 1 to 5. Sleep length uses hours."}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-5">
@@ -165,10 +225,14 @@ export function DailyQuizForm() {
         </CardContent>
       </Card>
 
-      <Card>
+      <Card className={isCompleted ? "opacity-90" : undefined}>
         <CardHeader>
           <CardTitle className="text-base">Daily journal</CardTitle>
-          <CardDescription>Write about your day.</CardDescription>
+          <CardDescription>
+            {isCompleted
+              ? "Your journal entry for today."
+              : "Write about your day."}
+          </CardDescription>
         </CardHeader>
         <CardContent className="space-y-3">
           <Label htmlFor="journal" className="sr-only">
@@ -187,37 +251,11 @@ export function DailyQuizForm() {
 
       {error ? <p className="text-sm text-red-500">{error}</p> : null}
 
-      {isCompleted && submission ? (
+      {!isCompleted ? (
-        <Card>
-          <CardContent className="flex flex-col items-center gap-4 pt-6">
-            <PixelAvatar mood={submission.condition.mood} size="md" />
-            <div className="grid w-full grid-cols-3 gap-2 text-center text-sm">
-              <div className="rounded-lg border px-3 py-2">
-                <p className="text-muted-foreground">Mood</p>
-                <p className="font-medium capitalize">
-                  {submission.condition.mood}
-                </p>
-              </div>
-              <div className="rounded-lg border px-3 py-2">
-                <p className="text-muted-foreground">Energy</p>
-                <p className="font-medium">
-                  {submission.condition.energy}/{WELLNESS_SCALE_MAX}
-                </p>
-              </div>
-              <div className="rounded-lg border px-3 py-2">
-                <p className="text-muted-foreground">Health</p>
-                <p className="font-medium">
-                  {submission.condition.health}/{WELLNESS_SCALE_MAX}
-                </p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      ) : (
         <Button className="w-full" disabled={!canSubmit} onClick={handleSubmit}>
           {isSubmitting ? "Saving..." : "Complete daily quiz"}
         </Button>
-      )}
+      ) : null}
     </div>
   );
 }