feat: user

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;
+}