feat: review

services/frontend/src/pages/Review/components/review-card.tsx

@@ -1,3 +1,4 @@
+import { cn } from "@/shared/lib/utils";
 import { Review, ReviewStatus } from "@/shared/types/review";
 import dayjs from "dayjs";
 
@@ -8,28 +9,52 @@ interface ReviewCardProps {
 export const ReviewCard = ({ review }: ReviewCardProps) => {
   const id = review.id.split("-").at(-1)?.slice(0, 6);
 
+  const score = review.evaluation?.reduce((acc, e) => acc + e.mark, 0);
+  const maxPoints = review.criteries?.reduce((acc, c) => acc + c.max_value, 0);
+
+  const styles = review.review_status === ReviewStatus.CHECKED && {
+    "bg-correct text-correct-foreground": (score ?? 0) === (maxPoints ?? 0),
+    "bg-partial text-partial-foreground":
+      (score ?? 0) > 0 && (score ?? 0) < (maxPoints ?? 0),
+    "bg-wrong text-wrong-foreground": (score ?? 0) === 0,
+  };
+
   return (
-    <div className="bg-card flex items-center justify-between gap-8 rounded-lg px-8 py-5">
-      <div className="flex flex-col gap-1">
-        <p className="text-muted-foreground font-semibold">
+    <div
+      className={cn(
+        "bg-card flex cursor-pointer flex-col justify-between gap-2 rounded-lg px-8 py-5 sm:flex-row sm:items-center sm:gap-8",
+        styles,
+      )}
+    >
+      <div className="flex flex-1 flex-col gap-1 text-left">
+        <p className={cn("text-muted-foreground font-semibold", styles)}>
           {review.competition_name}
         </p>
         <h1 className="text-2xl font-semibold">{review.task_title}</h1>
       </div>
-      <div className="flex flex-col items-end gap-1 text-right">
-        <div className="text-muted-foreground flex gap-1.5 font-semibold">
+      <div className="flex flex-col-reverse items-end gap-1 text-right sm:flex-col">
+        <div
+          className={cn(
+            "text-muted-foreground flex flex-wrap justify-end gap-1.5 font-semibold",
+            styles,
+          )}
+        >
           <p>{id}</p>
           <p>•</p>
           <p>
-            {review.review_status === ReviewStatus.NOT_CHECKED
+            {review.review_status === ReviewStatus.NOT_CHECKED ||
+            review.review_status === ReviewStatus.CHECKING
               ? `Дата посылки: ${dayjs(review.submitted_at).format("D MMMM, HH:mm")}`
-              : `Дата проверки: ${review.checked_at}`}
+              : `Дата проверки: ${dayjs(review.checked_at).format("D MMMM, HH:mm")}`}
           </p>
         </div>
         <h1 className="text-2xl font-semibold">
-          {review.review_status === ReviewStatus.NOT_CHECKED
+          {review.review_status === ReviewStatus.NOT_CHECKED ||
+          review.review_status === ReviewStatus.CHECKING
             ? "Не проверено"
-            : ""}
+            : score === 0
+              ? "Неверный ответ"
+              : `Зачтено ${score}/${maxPoints}`}
         </h1>
       </div>
     </div>