Merge branch 'master' of gitlab.prodcontest.ru:team-15/project

services/frontend/src/pages/Competition/components/CompetitionResultModal/index.tsx

@@ -1,3 +1,4 @@
+// src/components/competition/CompetitionResultsModal.tsx
 import React from 'react';
 import {
   Dialog,
@@ -33,13 +34,58 @@ export const CompetitionResultsModal: React.FC<CompetitionResultsModalProps> = (
 }) => {
   const renderResultValue = (result: number, maxPoints: number) => {
     if (result === -1) {
-      return <span className="text-yellow-600">На проверке</span>;
+      return (
+        <span className="font-semibold" style={{ 
+          color: 'var(--color-task-text-checking)',
+          backgroundColor: 'var(--color-task-checking)',
+          padding: '4px 8px',
+          borderRadius: '4px'
+        }}>
+          На проверке
+        </span>
+      );
     } else if (result === -2) {
-      return <span className="text-gray-500">Нет ответа</span>;
+      return (
+        <span className="font-semibold" style={{ 
+          color: 'var(--color-task-text-uncleared)',
+          backgroundColor: 'var(--color-task-uncleared)',
+          padding: '4px 8px',
+          borderRadius: '4px'
+        }}>
+          Нет ответа
+        </span>
+      );
+    } else if (result === 0) {
+      return (
+        <span className="font-semibold" style={{ 
+          color: 'var(--color-task-text-wrong)',
+          backgroundColor: 'var(--color-task-wrong)',
+          padding: '4px 8px',
+          borderRadius: '4px'
+        }}>
+          Неверно (0/{maxPoints})
+        </span>
+      );
+    } else if (result < maxPoints) {
+      return (
+        <span className="font-semibold" style={{ 
+          color: 'var(--color-task-text-partial)',
+          backgroundColor: 'var(--color-task-partial)',
+          padding: '4px 8px',
+          borderRadius: '4px'
+        }}>
+          Частично верно ({result}/{maxPoints})
+        </span>
+      );
     } else {
       return (
-        <span className="text-green-600">
+        <span className="font-semibold" style={{ 
-          Зачтено {result}/{maxPoints} баллов
+          color: 'var(--color-task-text-correct)',
+          backgroundColor: 'var(--color-task-correct)',
+          padding: '4px 8px',
+          borderRadius: '4px'
+        }}>
+          Верно ({result}/{maxPoints})
         </span>
       );
     }
@@ -71,7 +117,7 @@ export const CompetitionResultsModal: React.FC<CompetitionResultsModalProps> = (
                 className="flex flex-col md:flex-row justify-between items-start md:items-center p-4 bg-gray-50 rounded-lg border"
               >
                 <div className="font-medium mb-2 md:mb-0">{result.task_name}</div>
-                <div className="text-right font-semibold">
+                <div className="text-right">
                   {renderResultValue(result.result, result.max_points)}
                 </div>
               </div>

services/frontend/src/pages/Competition/index.tsx

@@ -93,7 +93,6 @@ const CompetitionPage = () => {
     return now < startDate;
   };
   
-  // Check if competition has ended
   const isCompetitionEnded = () => {
     if (!competition?.end_date) return false;
     
@@ -212,7 +211,6 @@ const CompetitionPage = () => {
               <Button 
                 size={"lg"} 
                 onClick={() => setIsResultsModalOpen(true)}
-                className="bg-indigo-600 hover:bg-indigo-700"
               >
                 <BarChart2 size={18} className="mr-2" />
                 Посмотреть результаты
@@ -221,7 +219,7 @@ const CompetitionPage = () => {
             
             {competitionEnded && !hasResults && competition.type === CompetitionType.COMPETITIVE && !resultsQuery.isLoading && (
               <div className="text-center p-4 border rounded-md bg-gray-50">
-                <p className="text-gray-600">Соревнование завершено. Результаты пока не доступны.</p>
+                <p className="text-gray-600">Соревнование завершено. Увы</p>
               </div>
             )}
           </div>

services/frontend/src/pages/Profile/components/user-stat-block.tsx

@@ -0,0 +1,14 @@
+export const UserStatBlock = ({
+  value,
+  description,
+}: {
+  value: number;
+  description: string;
+}) => {
+  return (
+    <div className="bg-card flex flex-col items-center gap-4 rounded-xl px-5 py-8 text-center">
+      <h2 className="text-5xl font-bold">{value}</h2>
+      <p className="text-muted-foreground font-semibold">{description}</p>
+    </div>
+  );
+};

services/frontend/src/pages/Profile/index.tsx

@@ -1,6 +1,6 @@
 import { UserInfo } from "./widgets/user-info";
 import { UserAchievements } from "./widgets/user-achievements";
-import { UserStats } from "./widgets/user-stats";
+import { UserStatsSections } from "./widgets/user-stats";
 import { useQuery } from "@tanstack/react-query";
 import { getCurrentUser } from "@/shared/api/user";
 import { Loading } from "@/components/ui/loading";
@@ -25,11 +25,11 @@ const ProfilePage = () => {
 
   return (
     <div className="flex flex-col items-stretch gap-14">
-      <div className="flex">
+      <div className="flex flex-col gap-5 md:flex-row md:gap-0">
         <UserInfo user={user} />
         <UserAchievements achievements={user.achievements} />
       </div>
-      <UserStats />
+      <UserStatsSections />
     </div>
   );
 };

services/frontend/src/pages/Profile/widgets/user-achievements.tsx

@@ -11,7 +11,7 @@ export const UserAchievements = ({
     <section className="flex flex-1 flex-col gap-5">
       <h2 className="text-3xl font-semibold">Достижения</h2>
       {achievements && (
-        <div className="grid grid-cols-2 gap-6">
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
           {achievements.map((a) => (
             <AchievementDialog key={a.name} achievement={a}>
               <AchievementCard achievement={a} />

services/frontend/src/pages/Profile/widgets/user-info.tsx

@@ -2,7 +2,7 @@ import { User } from "@/shared/types/user";
 
 export const UserInfo = ({ user }: { user: User }) => {
   return (
-    <section className="flex max-w-[420px] flex-1 flex-col gap-6">
+    <section className="flex flex-1 flex-col items-center gap-6 text-center md:max-w-[420px] md:items-start md:text-ellipsis">
       {user.avatar && (
         <div className="aspect-square h-auto w-full max-w-[300px] overflow-hidden rounded-full border">
           <img

services/frontend/src/pages/Profile/widgets/user-stats.tsx

@@ -1,7 +1,39 @@
-export const UserStats = () => {
+import { Loading } from "@/components/ui/loading";
+import { UserStatBlock } from "../components/user-stat-block";
+import { getCurrentUserStats } from "@/shared/api/user";
+import { useQuery } from "@tanstack/react-query";
+
+export const UserStatsSections = () => {
+  const { data: stats, isLoading } = useQuery({
+    queryKey: ["user-stats"],
+    queryFn: getCurrentUserStats,
+  });
+
   return (
-    <div>
+    <section className="flex flex-col gap-6">
       <h2 className="text-3xl font-semibold">Аналитика</h2>
-    </div>
+      {isLoading ? (
+        <div className="relative h-20 w-full">
+          <Loading />
+        </div>
+      ) : stats ? (
+        <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
+          <UserStatBlock
+            value={stats.solved_tasks}
+            description="Задач решено"
+          />
+          <UserStatBlock
+            value={stats.total_attempts}
+            description="Попыток выполнено"
+          />
+        </div>
+      ) : (
+        <div className="text-center">
+          <h3 className="w-full text-2xl font-semibold">
+            Что-то пошло не так 😔
+          </h3>
+        </div>
+      )}
+    </section>
   );
 };

services/frontend/src/shared/api/user.ts

@@ -1,6 +1,10 @@
 import { userFetch } from ".";
-import { User } from "../types/user";
+import { User, UserStats } from "../types/user";
 
 export const getCurrentUser = async () => {
   return await userFetch<User>("/me");
 };
+
+export const getCurrentUserStats = async () => {
+  return await userFetch<UserStats>("/me/stat");
+};

services/frontend/src/shared/types/user.ts

@@ -12,3 +12,8 @@ export interface Achievement {
   received_at: Date;
   icon?: string;
 }
+
+export interface UserStats {
+  total_attempts: number;
+  solved_tasks: number;
+}