траница курсы поправлено

src/AppRoutes.tsx

@@ -5,7 +5,7 @@ import Login from "./pages/Login";
 import Home from "./pages/Home";
 import ForgotPasword from "./pages/ForgotPassword";
 import { Courses } from "./pages/Courses";
-import CourseExercises from "./pages/CourseExercises";
+import { CourseExercises } from "./pages/CourseExercises";
 import { Exercise } from "./pages/Exercise";
 import Settings from "./pages/Settings";
 import CourseComplete from "./pages/CourseComplete";

src/pages/CourseExercises.tsx

@@ -1,6 +1,5 @@
 "use client"
 
-import type React from "react"
 import { useState } from "react"
 import { useHistory } from "react-router-dom"
 
@@ -8,10 +7,10 @@ import HeaderNav from "../components/HeaderNav"
 import BottomNavigation from "../components/BottomNavigation"
 import video from "../assets/img/video.mov"
 
-
+import { connect } from '../confconnect';
 import { getRouteExercise } from "../shared/consts/router"
 
-const CourseExercises: React.FC = () => {
+export const CourseExercises = () => {
   const history = useHistory()
   // const { id } = useParams<{ id: string }>();
   const [currentSlide, setCurrentSlide] = useState(0)
@@ -220,4 +219,4 @@ const course = {
   )
 }
 
-export default CourseExercises
+

src/pages/Courses.tsx

@@ -2,9 +2,10 @@
 
 import { useState, useEffect } from 'react';
 import BottomNavigation from "../components/BottomNavigation"
-import { useHistory } from "react-router-dom" // для v5
+import { useHistory } from "react-router-dom" 
 import HeaderNav from "../components/HeaderNav"
 import { connect } from '../confconnect';
+import { getRouteCourseExercises } from '../shared/consts/router';
 
 interface Course {
   ID: number;
@@ -13,6 +14,31 @@ interface Course {
   url_file_img: string;
 }
 
+const ProgressLine = () => {
+  return (
+    <div
+      className="h-full bg-gradient-to-r from-orange-300 to-orange-500 transition-all duration-500 absolute left-0 top-0 rounded-l-xl"
+      style={{ width: '85%' }}
+    />
+  );
+}
+
+const AnalitcsCards = () => {
+  return (
+    <div className="px-6 mb-8" >
+      <div className="text-center relative ">
+        <div className="w-full h-10 bg-gray-500 rounded-xl relative flex items-center justify-center mb-4 shadow-xl">
+          {/* Прогрессная часть */}
+          <ProgressLine />
+
+          {/* Текст поверх линии */}
+          <div className="absolute text-white font-semibold text-base">Вы прошли реабилитацию на {85}%</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 export const Courses = () => {
   const history = useHistory();
 
@@ -21,6 +47,7 @@ export const Courses = () => {
   const token = localStorage.getItem('authToken');
 
   useEffect(() => {
+    console.log(token)
     if (!token) {
       setError('Токен не найден');
       return;
@@ -71,27 +98,111 @@ export const Courses = () => {
     });
   }, [token]);
 
+  // Генерируем случайный прогресс для каждого курса
+  const getRandomProgress = () => Math.floor(Math.random() * 100);
+
+  // Цвета для прогресс-баров в оттенках cyan
+  const progressColors = [
+    "from-cyan-400 to-cyan-600",
+    "from-cyan-500 to-cyan-700", 
+    "from-teal-400 to-cyan-500",
+    "from-cyan-300 to-teal-600",
+    "from-sky-400 to-cyan-600"
+  ];
+
   return (
     <div className="my-36 min-h-screen max-w-4xl mx-auto">
       <HeaderNav item='Курсы' text='все назначенные' />
+      <AnalitcsCards />
 
-      {error && <p className="text-red-500">{error}</p>}
+      <div className="px-6 mb-8">
+        {error && (
+          <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
+            <p className="text-red-600 font-medium">{error}</p>
+          </div>
+        )}
+
+        {/* Заголовок секции */}
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-xl font-black text-[#5F5C5C]">Мои курсы</h2>
+          <span className="text-sm text-gray-500">{courses.length} курсов</span>
+        </div>
 
         {/* Выводим список курсов */}
-      <div>
+        <div className='space-y-4'>
           {courses.length > 0 ? (
-          courses.map(course => (
+            courses.map((course, index) => {
-            <div key={course.ID} className="border p-4 mb-4 rounded shadow">
+              const progress = getRandomProgress();
-              <h2 className="text-xl font-bold">{course.title}</h2>
+              const colorClass = progressColors[index % progressColors.length];
-              <p>{course.desc}</p>
+              
+              return (
+                <div 
+                  key={course.ID} 
+                  onClick={() => history.push(getRouteCourseExercises(course.ID.toString()))}
+                  className="bg-white/30 backdrop-blur-2xl rounded-3xl p-6 border border-white/20 shadow-xl cursor-pointer hover:shadow-2xl transition-all duration-300 transform hover:scale-[1.02]"
+                >
+                  <div className="flex items-center space-x-5">
+                    {/* Изображение курса */}
                     {course.url_file_img && (
-                <img src={course.url_file_img} alt={course.title} className="mt-2 w-full h-auto" />
+                      <div className="w-16 h-16 rounded-2xl overflow-hidden flex-shrink-0">
+                        <img 
+                          src={course.url_file_img || "/placeholder.svg"} 
+                          alt={course.title} 
+                          className="w-full h-full object-cover"
+                          onError={(e) => {
+                            e.currentTarget.src = "/placeholder.svg?height=64&width=64&text=Course"
+                          }}
+                        />
+                      </div>
+                    )}
+
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-[#5F5C5C] text-lg mb-2">{course.title}</h3>
+                      
+                      {/* Описание курса */}
+                      {course.desc && (
+                        <p className="text-sm text-[#5F5C5C]/60 mb-3 line-clamp-2">{course.desc}</p>
+                      )}
+
+                      {/* Индикатор прогресса */}
+                      <div className="bg-white/50 rounded-full h-3 mb-2 overflow-hidden">
+                        <div
+                          className={`bg-gradient-to-r ${colorClass} h-3 rounded-full transition-all duration-700 shadow-sm`}
+                          style={{ width: `${progress}%` }}
+                        />
+                      </div>
+
+                      {/* Информация о прогрессе */}
+                      <div className="flex justify-between items-center">
+                        <p className="text-sm text-[#5F5C5C]/70 font-semibold">{progress}% завершено</p>
+                        <p className="text-xs text-[#5F5C5C]/50">{Math.floor(Math.random() * 15) + 5} упражнений</p>
+                      </div>
+                    </div>
+
+                    {/* Иконка стрелки */}
+                    <div className="text-[#2BACBE] transform transition-transform duration-300 hover:translate-x-1">
+                      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              )
+            })
+          ) : (
+            !error && (
+              <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 text-center">
+                <p className="text-gray-600 mb-4">У вас пока нет назначенных курсов</p>
+                <button 
+                  onClick={() => history.push("/courses")}
+                  className="bg-[#2BACBE] text-white px-4 py-2 rounded-lg hover:bg-[#2A9FB8] transition-colors"
+                >
+                  Просмотреть доступные курсы
+                </button>
+              </div>
+            )
           )}
         </div>
-          ))
-        ) : (
-          !error && <p>Нет назначенных курсов</p>
-        )}
       </div>
 
       <BottomNavigation />

ответы сервера

@@ -68,3 +68,8 @@ curl -H "Authorization: Bearer YOUR_TOKEN" http://localhost:8093/pacient/courses
         }
     ],
     "sessionname": "krasnova@mail.ru"
+
+
+    curl -X GET \
+  -H "Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NTYxMTEyNDQsInVzZXJfZW1haWwiOiJrcmFzbm92YUBtYWlsLnJ1IiwidXNlcl9pZCI6MjUsInVzZXJfbmFtZSI6ImtyYXNub3ZhQG1haWwucnUiLCJ1c2VyX3JvbGUiOiIifQ.3UyamwJrLVkdjKgUG16lYyKm1jiZAv6MRQW0Tj2Z3Tc" \
+  http://localhost:8093/pacient/courses/:course_id