io

app/(user)/quiz/history/page.tsx

@@ -0,0 +1,115 @@
+import { requireAuth } from "@/lib/session";
+import { db } from "@/lib/db";
+import { formatPersianDate, formatPersianDateTime } from "@/lib/persianDate";
+
+export default async function QuizHistoryPage() {
+  const session = await requireAuth();
+  const userId = (session.user as any).id;
+
+  const submissions = await db.quizSubmission.findMany({
+    where: { userId },
+    include: {
+      quiz: {
+        include: { questions: { orderBy: { order: "asc" } } },
+      },
+    },
+    orderBy: { submittedAt: "desc" },
+  });
+
+  return (
+    <div className="min-h-screen bg-gray-950 text-white py-10 px-4">
+      <div className="max-w-3xl mx-auto">
+        <h1 className="text-2xl font-bold mb-6">تاریخچه کوییزها</h1>
+
+        {submissions.length === 0 && (
+          <div className="text-center py-20 text-gray-500">
+            <div className="text-5xl mb-4">📋</div>
+            <p>هنوز در هیچ کوییزی شرکت نکرده‌اید</p>
+          </div>
+        )}
+
+        <div className="flex flex-col gap-4">
+          {submissions.map((sub) => {
+            const correct = sub.answers.filter((ans, i) => ans === sub.quiz.questions[i]?.correctAnswer).length;
+            const total = sub.quiz.questions.length;
+
+            return (
+              <div
+                key={sub.id}
+                className={`bg-white/5 backdrop-blur border rounded-2xl p-5 ${
+                  sub.score === 100 ? "border-yellow-400/30" : "border-white/10"
+                }`}
+              >
+                <div className="flex justify-between items-start mb-3">
+                  <div>
+                    <p className="font-bold text-lg">
+                      {formatPersianDate(new Date(sub.quiz.date))}
+                    </p>
+                    <p className="text-xs text-gray-400">
+                      {formatPersianDateTime(new Date(sub.submittedAt))}
+                    </p>
+                  </div>
+                  <div className="text-left">
+                    <div
+                      className={`text-2xl font-black ${
+                        sub.score === 100
+                          ? "text-yellow-400"
+                          : sub.score >= 50
+                          ? "text-green-400"
+                          : "text-red-400"
+                      }`}
+                    >
+                      {sub.score}%
+                    </div>
+                    <p className="text-xs text-gray-400">
+                      {correct} از {total}
+                    </p>
+                  </div>
+                </div>
+
+                {sub.score === 100 && (
+                  <div className="bg-yellow-400/10 border border-yellow-400/30 rounded-lg px-3 py-2 text-xs text-yellow-300 flex items-center gap-2">
+                    <span>🏆</span>
+                    <span>واجد شرایط قرعه‌کشی Golden Card</span>
+                  </div>
+                )}
+
+                {/* Show answers */}
+                <details className="mt-4">
+                  <summary className="cursor-pointer text-sm text-gray-400 hover:text-white transition">
+                    مشاهده جزئیات
+                  </summary>
+                  <div className="mt-3 flex flex-col gap-3">
+                    {sub.quiz.questions.map((q, i) => {
+                      const userAnswer = sub.answers[i];
+                      const isCorrect = userAnswer === q.correctAnswer;
+
+                      return (
+                        <div
+                          key={q.id}
+                          className={`border rounded-lg p-3 text-sm ${
+                            isCorrect ? "border-green-500/30 bg-green-500/5" : "border-red-500/30 bg-red-500/5"
+                          }`}
+                        >
+                          <p className="font-medium mb-2">{q.questionText}</p>
+                          <div className="flex flex-col gap-1 text-xs">
+                            <p className={isCorrect ? "text-green-400" : "text-red-400"}>
+                              پاسخ شما: {q.options[userAnswer ?? 0]} {isCorrect ? "✓" : "✗"}
+                            </p>
+                            {!isCorrect && (
+                              <p className="text-green-400">پاسخ صحیح: {q.options[q.correctAnswer]}</p>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </details>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}