From f9584cae3c3785c9648d2b554a0ed7ce7c11e3c8 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 27 May 2025 02:51:30 +0100
Subject: [PATCH] User progress component

---
 .../RoadmapAIChat/UserProgressList.tsx        | 37 ++++++++++++++-----
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/components/RoadmapAIChat/UserProgressList.tsx b/src/components/RoadmapAIChat/UserProgressList.tsx
index 410c4046f..2b0b1c287 100644
--- a/src/components/RoadmapAIChat/UserProgressList.tsx
+++ b/src/components/RoadmapAIChat/UserProgressList.tsx
@@ -23,19 +23,36 @@ export function UserProgressList(props: UserProgressListProps) {
   const progressPercentage = getPercentage(totalFinished, totalTopicCount);
 
   return (
-    <div className="relative my-6 flex flex-col gap-2 rounded-lg border border-gray-200 bg-white p-2 first:mt-0 last:mb-0">
-      <div className="flex items-center gap-4">
-        <div className="relative h-1.5 grow overflow-hidden rounded-md bg-gray-200">
-          <div
-            className="absolute inset-0 bg-gray-400"
-            style={{ width: `${progressPercentage}%` }}
-          />
+    <div className="relative my-6 flex flex-col gap-3 rounded-xl border border-gray-200 bg-white p-4 first:mt-0 last:mb-0">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium text-gray-600">Progress</span>
+          <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700">
+            {progressPercentage}%
+          </span>
         </div>
-
-        <span className="text-sm font-medium text-gray-500">
-          {totalFinished} / {totalTopicCount}
+        <span className="text-sm hidden md:block font-medium text-gray-600">
+          {totalFinished} / {totalTopicCount} topics
         </span>
       </div>
+
+      <div className="relative h-2 w-full overflow-hidden rounded-full bg-gray-100">
+        <div
+          className="absolute inset-0 bg-gradient-to-r from-green-500 to-green-600 transition-all duration-300"
+          style={{ width: `${progressPercentage}%` }}
+        />
+      </div>
+
+      <div className="flex items-center gap-4 text-xs text-gray-500">
+        <div className="flex items-center gap-1">
+          <div className="h-2 w-2 rounded-full bg-green-500" />
+          <span>Completed: {doneCount}</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <div className="h-2 w-2 rounded-full bg-gray-400" />
+          <span>Skipped: {skippedCount}</span>
+        </div>
+      </div>
     </div>
   );
 }