feat: added templates for user profile + competition constructor (if will be), started working on synchronizing front and back session

2026-05-23 14:27:10 +00:00 · 2025-03-02 19:09:27 +09:00
parent 71736c04aa
commit d892fb2696
25 changed files with 1398 additions and 51 deletions
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Task } from "@/shared/types";
+import { Settings, Plus } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+
+interface ConstructorHeaderProps {
+  title: string;
+  tasks: Task[];
+  competitionId: string;
+  onAddTaskClick: () => void;
+}
+
+const ConstructorHeader: React.FC<ConstructorHeaderProps> = ({ 
+  title,
+  tasks, 
+  competitionId,
+  onAddTaskClick
+}) => {
+  return (
+    <header className="bg-white shadow-sm sticky top-0 z-30 w-full">
+      <div className="mx-auto max-w-6xl px-4">
+        <div className="py-4 text-center">
+          <h1 className="font-hse-sans text-xl font-semibold">
+            {title}
+          </h1>
+        </div>
+        
+        <div className="flex items-center justify-center gap-4 pb-4 overflow-x-auto no-scrollbar">
+          <Link
+            to={`/constructor/${competitionId}/tasks/settings`}
+            className="bg-gray-100 text-gray-700 rounded-lg px-3 py-1.5 font-medium text-sm font-hse-sans cursor-pointer 
+              transition-all hover:bg-gray-200 flex-shrink-0 flex items-center"
+          >
+            <Settings size={16} className="mr-1" />
+          </Link>
+          
+          {tasks.map((task) => (
+            <Link
+              key={task.id}
+              to={`/constructor/${competitionId}/tasks/${task.id}`}
+              className="bg-blue-100 text-blue-700 rounded-lg px-3 py-1.5 font-medium text-sm font-hse-sans cursor-pointer 
+                transition-all hover:bg-blue-200 flex-shrink-0"
+            >
+              {task.number}
+            </Link>
+          ))}
+          
+          <Button
+            variant="ghost"
+            size="sm"
+            className="rounded-lg flex items-center px-2 h-8"
+            onClick={onAddTaskClick}
+          >
+            <Plus size={18} />
+          </Button>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default ConstructorHeader;
@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { useParams, Navigate, useNavigate } from "react-router-dom";
+import { Task, TaskStatus } from "@/shared/types";
+import ConstructorHeader from "./components/ConstructorHeader";
+import TaskCreationModal from "./modules/TaskCreationModal";
+
+const CompetitionConstructor = () => {
+  const { id, taskId } = useParams<{ id: string; taskId?: string }>();
+  const navigate = useNavigate();
+  const [competitionTitle, setCompetitionTitle] = useState("Новая олимпиада");
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
+  
+  const isSettings = taskId === "settings";
+  
+  const handleOpenTaskModal = () => {
+    setIsTaskModalOpen(true);
+  };
+  
+  const handleCloseTaskModal = () => {
+    setIsTaskModalOpen(false);
+  };
+  
+  const handleCreateTask = (taskData: Partial<Task>) => {
+    const newTask: Task = {
+      id: `task-${Date.now()}`,
+      number: taskData.number || `${tasks.length + 1}`,
+      status: TaskStatus.Uncleared,
+      solutionType: taskData.solutionType || "input",
+      description: taskData.description || "",
+      requirements: taskData.requirements,
+      attachments: taskData.attachments || []
+    };
+    
+    setTasks([...tasks, newTask]);
+    setIsTaskModalOpen(false);
+    navigate(`/constructor/${id}/tasks/${newTask.id}`);
+  };
+  
+  if (!taskId) {
+    if (tasks.length > 0) {
+      return <Navigate to={`/constructor/${id}/tasks/${tasks[0].id}`} replace />;
+    } else {
+      return <Navigate to={`/constructor/${id}/tasks/settings`} replace />;
+    }
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <ConstructorHeader 
+        title={competitionTitle}
+        tasks={tasks} 
+        competitionId={id || ""}
+        onAddTaskClick={handleOpenTaskModal}
+      />
+      
+      <TaskCreationModal 
+        isOpen={isTaskModalOpen}
+        onClose={handleCloseTaskModal}
+        onCreateTask={handleCreateTask}
+        taskCount={tasks.length}
+      />
+      
+      <main className="flex-1 bg-[#F8F8F8] pb-8">
+        <div className="max-w-6xl mx-auto px-4 py-6">
+          {isSettings ? (
+            <div className="bg-white rounded-lg p-6 shadow-sm">
+              <h2 className="text-2xl font-semibold mb-6 font-hse-sans">Настройки олимпиады</h2>
+              <p className="text-gray-500 font-hse-sans">
+                Здесь будет форма настроек олимпиады
+              </p>
+            </div>
+          ) : (
+            <div className="bg-white rounded-lg p-6 shadow-sm">
+              <h2 className="text-2xl font-semibold mb-6 font-hse-sans">
+                {`Редактирование задачи ${tasks.find(t => t.id === taskId)?.number || ""}`}
+              </h2>
+              <p className="text-gray-500 font-hse-sans">
+                Здесь будет форма редактирования задачи
+              </p>
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default CompetitionConstructor;
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+
+interface TaskDescriptionFieldProps {
+  description: string;
+  onChange: (value: string) => void;
+}
+
+const TaskDescriptionField: React.FC<TaskDescriptionFieldProps> = ({ description, onChange }) => {
+  return (
+    <div className="grid grid-cols-4 items-start gap-4">
+      <Label htmlFor="description" className="text-right pt-2">
+        Описание
+      </Label>
+      <Textarea
+        id="description"
+        value={description}
+        onChange={(e) => onChange(e.target.value)}
+        className="col-span-3 min-h-[100px]"
+        placeholder="Введите описание задачи"
+      />
+    </div>
+  );
+};
+
+export default TaskDescriptionField;
@@ -0,0 +1,92 @@
+import React from 'react';
+import { FileIcon, X, Upload } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+
+interface TaskFileAttachmentsProps {
+  files: File[];
+  onChange: (files: File[]) => void;
+}
+
+const TaskFileAttachments: React.FC<TaskFileAttachmentsProps> = ({ files, onChange }) => {
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      const newFiles = Array.from(e.target.files);
+      onChange([...files, ...newFiles]);
+    }
+  };
+  
+  const removeFile = (index: number) => {
+    onChange(files.filter((_, i) => i !== index));
+  };
+  
+  return (
+    <div className="grid grid-cols-4 items-start gap-4">
+      <Label className="text-right pt-2">
+        Файлы
+      </Label>
+      <div className="col-span-3">
+        <div className="flex flex-col gap-2">
+          {files.map((file, index) => (
+            <FileListItem 
+              key={index} 
+              file={file} 
+              onRemove={() => removeFile(index)} 
+            />
+          ))}
+          
+          <FileUploadButton onChange={handleFileChange} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface FileListItemProps {
+  file: File;
+  onRemove: () => void;
+}
+
+const FileListItem: React.FC<FileListItemProps> = ({ file, onRemove }) => {
+  return (
+    <div className="flex items-center justify-between p-2 border rounded-md">
+      <div className="flex items-center">
+        <FileIcon size={16} className="mr-2 text-gray-500" />
+        <span className="text-sm">{file.name}</span>
+        <span className="text-xs text-gray-500 ml-2">
+          ({Math.round(file.size / 1024)} KB)
+        </span>
+      </div>
+      <Button 
+        variant="ghost" 
+        size="sm" 
+        onClick={onRemove}
+      >
+        <X size={16} />
+      </Button>
+    </div>
+  );
+};
+
+interface FileUploadButtonProps {
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const FileUploadButton: React.FC<FileUploadButtonProps> = ({ onChange }) => {
+  return (
+    <label className="cursor-pointer">
+      <div className="flex items-center gap-2 p-2 border border-dashed rounded-md hover:bg-gray-50 transition-colors">
+        <Upload size={16} className="text-gray-500" />
+        <span className="text-sm text-gray-700">Добавить файлы</span>
+      </div>
+      <input 
+        type="file" 
+        className="hidden" 
+        onChange={onChange}
+        multiple
+      />
+    </label>
+  );
+};
+
+export default TaskFileAttachments;
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+interface TaskNumberFieldProps {
+  number: string;
+  onChange: (value: string) => void;
+}
+
+const TaskNumberField: React.FC<TaskNumberFieldProps> = ({ number, onChange }) => {
+  return (
+    <div className="grid grid-cols-4 items-center gap-4">
+      <Label htmlFor="task-number" className="text-right">
+        Номер задачи
+      </Label>
+      <Input
+        id="task-number"
+        value={number}
+        onChange={(e) => onChange(e.target.value)}
+        className="col-span-3"
+      />
+    </div>
+  );
+};
+
+export default TaskNumberField;
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+
+interface TaskRequirementsFieldProps {
+  requirements: string;
+  onChange: (value: string) => void;
+}
+
+const TaskRequirementsField: React.FC<TaskRequirementsFieldProps> = ({ requirements, onChange }) => {
+  return (
+    <div className="grid grid-cols-4 items-start gap-4">
+      <Label htmlFor="requirements" className="text-right pt-2">
+        Требования
+      </Label>
+      <Textarea
+        id="requirements"
+        value={requirements}
+        onChange={(e) => onChange(e.target.value)}
+        className="col-span-3"
+        placeholder="Введите требования к решению (необязательно)"
+      />
+    </div>
+  );
+};
+
+export default TaskRequirementsField;
@@ -0,0 +1,41 @@
+import React from 'react';
+import { 
+  RadioGroup, 
+  RadioGroupItem 
+} from "@/components/ui/radio-group";
+import { Label } from "@/components/ui/label";
+
+interface TaskSolutionTypeSelectorProps {
+  solutionType: 'input' | 'file' | 'code';
+  onChange: (value: 'input' | 'file' | 'code') => void;
+}
+
+const TaskSolutionTypeSelector: React.FC<TaskSolutionTypeSelectorProps> = ({ solutionType, onChange }) => {
+  return (
+    <div className="grid grid-cols-4 items-start gap-4">
+      <Label className="text-right pt-2">
+        Тип решения
+      </Label>
+      <RadioGroup 
+        className="col-span-3" 
+        value={solutionType} 
+        onValueChange={(value) => onChange(value as 'input' | 'file' | 'code')}
+      >
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="input" id="input" />
+          <Label htmlFor="input">Ввод ответа</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="file" id="file" />
+          <Label htmlFor="file">Загрузка файла</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="code" id="code" />
+          <Label htmlFor="code">Программный код</Label>
+        </div>
+      </RadioGroup>
+    </div>
+  );
+};
+
+export default TaskSolutionTypeSelector;
@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogHeader, 
+  DialogTitle, 
+  DialogFooter 
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Task } from "@/shared/types";
+import TaskNumberField from './components/TaskNumberField';
+import TaskDescriptionField from './components/TaskDescriptionField';
+import TaskRequirementsField from './components/TaskRequirementsField';
+import TaskSolutionTypeSelector from './components/TaskSolutionTypeSelector';
+import TaskFileAttachments from './components/TaskFileAttachments';
+
+interface TaskCreationModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onCreateTask: (task: Partial<Task>) => void;
+  taskCount: number;
+}
+
+const TaskCreationModal: React.FC<TaskCreationModalProps> = ({
+  isOpen,
+  onClose,
+  onCreateTask,
+  taskCount
+}) => {
+  const [number, setNumber] = useState(`${taskCount + 1}`);
+  const [description, setDescription] = useState('');
+  const [requirements, setRequirements] = useState('');
+  const [solutionType, setSolutionType] = useState<'input' | 'file' | 'code'>('input');
+  const [attachedFiles, setAttachedFiles] = useState<File[]>([]);
+  
+  const handleSubmit = () => {
+    const newTask: Partial<Task> = {
+      number,
+      description,
+      requirements: requirements || undefined,
+      solutionType,
+      attachments: attachedFiles.map(file => file.name)
+    };
+    
+    onCreateTask(newTask);
+    
+    setNumber(`${taskCount + 1}`);
+    setDescription('');
+    setRequirements('');
+    setSolutionType('input');
+    setAttachedFiles([]);
+  };
+  
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[600px] font-hse-sans">
+        <DialogHeader>
+          <DialogTitle className="text-xl">Создание новой задачи</DialogTitle>
+        </DialogHeader>
+        
+        <div className="grid gap-4 py-4">
+          <TaskNumberField 
+            number={number} 
+            onChange={setNumber} 
+          />
+          
+          <TaskDescriptionField 
+            description={description} 
+            onChange={setDescription} 
+          />
+          
+          <TaskRequirementsField 
+            requirements={requirements} 
+            onChange={setRequirements} 
+          />
+          
+          <TaskSolutionTypeSelector 
+            solutionType={solutionType} 
+            onChange={setSolutionType} 
+          />
+          
+          <TaskFileAttachments 
+            files={attachedFiles} 
+            onChange={setAttachedFiles} 
+          />
+        </div>
+        
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={onClose}>
+            Отмена
+          </Button>
+          <Button type="button" onClick={handleSubmit}>
+            Создать задачу
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default TaskCreationModal;
@@ -15,7 +15,7 @@ const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
  competitionId 
 }) => {
  return (
-    <header className="bg-white shadow-sm">
+    <header className="bg-white shadow-sm sticky top-0 z-30 w-full">
      <div className="mx-auto max-w-6xl px-4">
        <div className="py-4 text-center">
          <h1 className="font-hse-sans text-xl font-semibold">
@@ -1,43 +1,88 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useParams, Navigate } from "react-router-dom";
-import { Task } from "@/shared/types";
-import { mockSolutions, mockTasks } from "@/shared/mocks/mocks";
+import { Task, TaskStatus } from "@/shared/types";
+import { mockSolutions } from "@/shared/mocks/mocks"; // Keep mocks for solutions for now
 import CompetitionHeader from "./components/CompetitionHeader";
 import TaskContent from "./components/TaskContent";
 import TaskSolution from "./modules/TaskSolution";
+import { getCompetitionTasks } from "@/shared/api/session";
+import { Loader2 } from "lucide-react";

 const CompetitionSession = () => {
  const { id, taskId } = useParams<{ id: string; taskId?: string }>();
-  const [tasks] = useState<Task[]>(mockTasks);
+  const [tasks, setTasks] = useState<Task[]>([]);
  const [answer, setAnswer] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const competitionId = id || "";
+
+  useEffect(() => {
+    const fetchTasks = async () => {
+      try {
+        setLoading(true);
+        const fetchedTasks = await getCompetitionTasks(competitionId);
+        setTasks(fetchedTasks);
+        setError(null);
+      } catch (err) {
+        console.error("Failed to fetch tasks:", err);
+        setError("Не удалось загрузить задания. Пожалуйста, попробуйте позже.");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (competitionId) {
+      fetchTasks();
+    }
+  }, [competitionId]);

  const currentTask = tasks.find(t => t.id === taskId) || null;

-  if (!taskId && tasks.length > 0) {
-    return <Navigate to={`/competition/${id}/tasks/${tasks[0].id}`} replace />;
+  if (!taskId && tasks.length > 0 && !loading) {
+    return <Navigate to={`/competition/${competitionId}/tasks/${tasks[0].id}`} replace />;
  }

-  const handleSubmit = () => {
-    console.log("Submitting answer:", answer);
+  const handleSubmit = async () => {
+    if (!currentTask || !competitionId) return;
+    
+    try {
+
+      console.log("Solution submitted successfully");
+    } catch (err) {
+      console.error("Failed to submit solution:", err);
+    }
  };
-  

  return (
    <div className="flex flex-col min-h-screen">
      <CompetitionHeader 
        title="Олимпиада DANO 2025. Индивидуальный этап"
        tasks={tasks} 
-        competitionId={id || ""}  
+        competitionId={competitionId}  
      />
      
      <main className="flex-1 bg-[#F8F8F8] pb-8">
        <div className="max-w-6xl mx-auto px-4 py-6">
-          {currentTask ? (
+          {loading ? (
+            <div className="flex flex-col items-center justify-center h-40 bg-white rounded-lg">
+              <Loader2 className="h-8 w-8 animate-spin text-gray-400 mb-2" />
+              <p className="font-hse-sans text-gray-500">
+                Загрузка заданий...
+              </p>
+            </div>
+          ) : error ? (
+            <div className="flex justify-center items-center h-40 bg-white rounded-lg">
+              <p className="font-hse-sans text-red-500">
+                {error}
+              </p>
+            </div>
+          ) : currentTask ? (
            <div className="flex flex-col md:flex-row gap-6 font-hse-sans">
              <TaskContent task={currentTask} />
              <TaskSolution 
                task={currentTask}
-                solutions={mockSolutions}
+                solutions={mockSolutions} // Still using mock solutions
                answer={answer}
                setAnswer={setAnswer}
                onSubmit={handleSubmit}
@@ -46,7 +91,7 @@ const CompetitionSession = () => {
          ) : (
            <div className="flex justify-center items-center h-40 bg-white rounded-lg">
              <p className="font-hse-sans text-gray-500">
-                Загрузка задания...
+                Задание не найдено
              </p>
            </div>
          )}
@@ -1,26 +0,0 @@
-import { cn } from "@/shared/lib/utils";
-import { Badge } from "@/components/ui/badge";
-
-interface CompetitionTagProps {
-  label: string;
-  variant: 'olympics' | 'status';
-  className?: string;
-}
-
-const CompetitionTag = ({ label, variant, className }: CompetitionTagProps) => {
-  return (
-    <Badge 
-      variant="secondary"
-      className={cn(
-        "text-xs font-medium",
-        variant === 'olympics' && "bg-yellow-400 text-yellow-800 hover:bg-yellow-500 font-hse-sans",
-        variant === 'status' && "bg-black text-white hover:bg-gray-800 font-hse-sans",
-        className 
-      )}
-    >
-      {label}
-    </Badge>
-  );
-}
-
-export default CompetitionTag
@@ -0,0 +1,398 @@
+import React from "react";
+import { User } from "lucide-react";
+import { useUserStore } from "@/shared/stores/user";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+const UserProfile = () => {
+  const user = useUserStore((state) => state.user);
+
+  return (
+    <div className="container mx-auto max-w-5xl px-4 py-8">
+      <div className="mb-8 flex items-center gap-6">
+        <div className="flex h-24 w-24 items-center justify-center rounded-full bg-blue-100">
+          {user?.avatar ? (
+            <img
+              src={user.avatar}
+              alt={user.username}
+              className="h-24 w-24 rounded-full object-cover"
+            />
+          ) : (
+            <User size={40} className="text-blue-500" />
+          )}
+        </div>
+        <div>
+          <h1 className="font-hse-sans text-3xl font-bold">{user?.username}</h1>
+          <p className="font-hse-sans text-gray-500">
+            {user?.role || "Участник"} • На платформе с{" "}
+            {new Date(user?.createdAt || Date.now()).toLocaleDateString("ru-RU", {
+              year: "numeric",
+              month: "long",
+            })}
+          </p>
+        </div>
+      </div>
+
+      <Tabs defaultValue="info" className="w-full">
+        <TabsList className="mb-6 w-full justify-start">
+          <TabsTrigger value="info" className="font-hse-sans">
+            Информация
+          </TabsTrigger>
+          <TabsTrigger value="statistics" className="font-hse-sans">
+            Статистика
+          </TabsTrigger>
+          <TabsTrigger value="achievements" className="font-hse-sans">
+            Достижения
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="info">
+          <UserInfo />
+        </TabsContent>
+
+        <TabsContent value="statistics">
+          <UserStatistics />
+        </TabsContent>
+
+        <TabsContent value="achievements">
+          <UserAchievements />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+};
+
+const UserInfo = () => {
+  const user = useUserStore((state) => state.user);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="font-hse-sans">Личная информация</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+          <div>
+            <h3 className="font-hse-sans text-sm font-medium text-gray-500">
+              Полное имя
+            </h3>
+            <p className="font-hse-sans mt-1">
+              {user?.fullName || "Не указано"}
+            </p>
+          </div>
+
+          <div>
+            <h3 className="font-hse-sans text-sm font-medium text-gray-500">
+              Email
+            </h3>
+            <p className="font-hse-sans mt-1">{user?.email || "Не указано"}</p>
+          </div>
+
+          <div>
+            <h3 className="font-hse-sans text-sm font-medium text-gray-500">
+              Учебное заведение
+            </h3>
+            <p className="font-hse-sans mt-1">
+              {user?.university || "Не указано"}
+            </p>
+          </div>
+
+          <div>
+            <h3 className="font-hse-sans text-sm font-medium text-gray-500">
+              Специализация
+            </h3>
+            <p className="font-hse-sans mt-1">
+              {user?.specialization || "Не указано"}
+            </p>
+          </div>
+        </div>
+
+        <div>
+          <h3 className="font-hse-sans text-sm font-medium text-gray-500">
+            О себе
+          </h3>
+          <p className="font-hse-sans mt-1">
+            {user?.bio || "Пользователь пока не добавил информацию о себе."}
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+const UserStatistics = () => {
+  // Mock statistics data
+  const statistics = {
+    totalCompetitions: 12,
+    completedCompetitions: 8,
+    totalScore: 756,
+    averageScore: 94.5,
+    bestResult: {
+      competition: "Олимпиада DANO 2024",
+      place: 3,
+      score: 97,
+    },
+    totalTasks: 86,
+    solvedTasks: 72,
+    tasksByStatus: {
+      correct: 58,
+      partial: 14,
+      wrong: 9,
+      unattempted: 5,
+    },
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <StatCard
+          title="Всего соревнований"
+          value={statistics.totalCompetitions}
+        />
+        <StatCard
+          title="Завершено соревнований"
+          value={statistics.completedCompetitions}
+        />
+        <StatCard title="Всего баллов" value={statistics.totalScore} />
+        <StatCard
+          title="Средний балл"
+          value={statistics.averageScore.toFixed(1)}
+        />
+      </div>
+
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle className="font-hse-sans">Лучший результат</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              <p className="font-hse-sans text-lg font-medium">
+                {statistics.bestResult.competition}
+              </p>
+              <div className="flex items-center justify-between">
+                <span className="font-hse-sans text-gray-500">Место</span>
+                <span className="font-hse-sans font-medium">
+                  {statistics.bestResult.place}
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="font-hse-sans text-gray-500">Баллы</span>
+                <span className="font-hse-sans font-medium">
+                  {statistics.bestResult.score}
+                </span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="font-hse-sans">Решение задач</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="mb-4 space-y-2">
+              <div className="flex items-center justify-between">
+                <span className="font-hse-sans">Всего задач</span>
+                <span className="font-hse-sans font-medium">
+                  {statistics.totalTasks}
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="font-hse-sans">Решено задач</span>
+                <span className="font-hse-sans font-medium">
+                  {statistics.solvedTasks}
+                </span>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <h4 className="font-hse-sans text-sm font-medium">
+                Статусы решений
+              </h4>
+              <div className="h-6 w-full overflow-hidden rounded-full bg-gray-200">
+                <div className="flex h-full">
+                  <div
+                    className="bg-green-500"
+                    style={{
+                      width: `${
+                        (statistics.tasksByStatus.correct /
+                          statistics.totalTasks) *
+                        100
+                      }%`,
+                    }}
+                  ></div>
+                  <div
+                    className="bg-yellow-500"
+                    style={{
+                      width: `${
+                        (statistics.tasksByStatus.partial /
+                          statistics.totalTasks) *
+                        100
+                      }%`,
+                    }}
+                  ></div>
+                  <div
+                    className="bg-red-500"
+                    style={{
+                      width: `${
+                        (statistics.tasksByStatus.wrong /
+                          statistics.totalTasks) *
+                        100
+                      }%`,
+                    }}
+                  ></div>
+                  <div
+                    className="bg-gray-300"
+                    style={{
+                      width: `${
+                        (statistics.tasksByStatus.unattempted /
+                          statistics.totalTasks) *
+                        100
+                      }%`,
+                    }}
+                  ></div>
+                </div>
+              </div>
+              <div className="flex justify-between text-xs">
+                <div className="flex items-center">
+                  <div className="mr-1 h-3 w-3 rounded-full bg-green-500"></div>
+                  <span className="font-hse-sans">
+                    Верно ({statistics.tasksByStatus.correct})
+                  </span>
+                </div>
+                <div className="flex items-center">
+                  <div className="mr-1 h-3 w-3 rounded-full bg-yellow-500"></div>
+                  <span className="font-hse-sans">
+                    Частично ({statistics.tasksByStatus.partial})
+                  </span>
+                </div>
+                <div className="flex items-center">
+                  <div className="mr-1 h-3 w-3 rounded-full bg-red-500"></div>
+                  <span className="font-hse-sans">
+                    Неверно ({statistics.tasksByStatus.wrong})
+                  </span>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+
+const StatCard = ({ title, value }: { title: string; value: number | string }) => (
+  <Card>
+    <CardContent className="pt-6">
+      <p className="font-hse-sans text-sm text-gray-500">{title}</p>
+      <p className="font-hse-sans mt-2 text-3xl font-bold">{value}</p>
+    </CardContent>
+  </Card>
+);
+
+const UserAchievements = () => {
+  const achievements = [
+    {
+      id: 1,
+      name: "Первые шаги",
+      description: "Участие в первом соревновании",
+      imageUrl: "/achievements/first-steps.png",
+      unlocked: true,
+    },
+    {
+      id: 2,
+      name: "Восходящая звезда",
+      description: "Победа в соревновании",
+      imageUrl: "/achievements/rising-star.png",
+      unlocked: true,
+    },
+    {
+      id: 3,
+      name: "Мастер кода",
+      description: "Решите 50 задач на программирование",
+      imageUrl: "/achievements/code-master.png",
+      unlocked: true,
+    },
+    {
+      id: 4,
+      name: "Бронзовый призер",
+      description: "Займите 3 место в соревновании",
+      imageUrl: "/achievements/bronze.png",
+      unlocked: true,
+    },
+    {
+      id: 5,
+      name: "Серебряный призер",
+      description: "Займите 2 место в соревновании",
+      imageUrl: "/achievements/silver.png",
+      unlocked: false,
+    },
+    {
+      id: 6,
+      name: "Золотой призер",
+      description: "Займите 1 место в соревновании",
+      imageUrl: "/achievements/gold.png",
+      unlocked: false,
+    },
+    {
+      id: 7,
+      name: "Марафонец",
+      description: "Участвуйте в 10 соревнованиях",
+      imageUrl: "/achievements/marathon.png",
+      unlocked: false,
+    },
+    {
+      id: 8,
+      name: "Идеальное решение",
+      description: "Получите максимальные баллы за все задачи в соревновании",
+      imageUrl: "/achievements/perfect.png",
+      unlocked: false,
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <h2 className="font-hse-sans text-xl font-semibold">
+        Разблокировано {achievements.filter(a => a.unlocked).length} из {achievements.length}
+      </h2>
+      
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
+        {achievements.map((achievement) => (
+          <div
+            key={achievement.id}
+            className={`flex flex-col items-center justify-center rounded-lg p-4 text-center ${
+              achievement.unlocked ? "" : "opacity-40"
+            }`}
+          >
+            <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-full bg-blue-100">
+              {achievement.imageUrl ? (
+                <div className="relative h-16 w-16 overflow-hidden rounded-full">
+                  <div
+                    className="h-full w-full bg-cover bg-center"
+                    style={{ backgroundImage: `url(${achievement.imageUrl})` }}
+                  ></div>
+                </div>
+              ) : (
+                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-blue-200 text-blue-700">
+                  <span className="font-hse-sans text-xl font-bold">
+                    {achievement.name.substring(0, 1)}
+                  </span>
+                </div>
+              )}
+            </div>
+            <h3 className="font-hse-sans text-sm font-medium">
+              {achievement.name}
+            </h3>
+            <p className="font-hse-sans mt-1 text-xs text-gray-500">
+              {achievement.description}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default UserProfile;
@@ -0,0 +1,45 @@
+const UserAchievements = () => {
+  return (
+    <div className="space-y-6">
+      <h2 className="font-hse-sans text-xl font-semibold">
+        Разблокировано {achievements.filter(a => a.unlocked).length} из {achievements.length}
+      </h2>
+      
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
+        {achievements.map((achievement) => (
+          <div
+            key={achievement.id}
+            className={`flex flex-col items-center justify-center rounded-lg p-4 text-center ${
+              achievement.unlocked ? "" : "opacity-40"
+            }`}
+          >
+            <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-full bg-blue-100">
+              {achievement.imageUrl ? (
+                <div className="relative h-16 w-16 overflow-hidden rounded-full">
+                  <div
+                    className="h-full w-full bg-cover bg-center"
+                    style={{ backgroundImage: `url(${achievement.imageUrl})` }}
+                  ></div>
+                </div>
+              ) : (
+                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-blue-200 text-blue-700">
+                  <span className="font-hse-sans text-xl font-bold">
+                    {achievement.name.substring(0, 1)}
+                  </span>
+                </div>
+              )}
+            </div>
+            <h3 className="font-hse-sans text-sm font-medium">
+              {achievement.name}
+            </h3>
+            <p className="font-hse-sans mt-1 text-xs text-gray-500">
+              {achievement.description}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default UserAchievements