add more

src/modules/client/pages/Profile.jsx

@@ -201,6 +201,9 @@ const ProfilePage = () => {
   const [pendingModalOpen,         setPendingModalOpen]         = useState(false);
   const [pendingModalCourse,       setPendingModalCourse]       = useState(null);
 
+  const [completedTotal,   setCompletedTotal]   = useState(0);
+  const [completedLoading, setCompletedLoading] = useState(false);
+
   useEffect(() => {
     getProfile();
     getAchievements();
@@ -217,6 +220,18 @@ const ProfilePage = () => {
         setInProgressCoursesLoading(false);
       }
     })();
+    (async () => {
+      setCompletedLoading(true);
+      try {
+        const { data } = await api.get("/client/courses/completed");
+        const counts = data.data?.counts ?? {};
+        setCompletedTotal((counts.courses ?? 0) + (counts.units ?? 0) + (counts.lessons ?? 0));
+      } catch {
+        // silent — empty state handles it
+      } finally {
+        setCompletedLoading(false);
+      }
+    })();
   }, []);
 
   // ── Derived ────────────────────────────────────────────────────────────────
@@ -727,6 +742,28 @@ const ProfilePage = () => {
               </CardContent>
             </Card>
 
+            {/* Completed — live count, full list at /completed */}
+            <Card>
+              <CardContent
+                className="flex items-center justify-between cursor-pointer hover:bg-accent/40 transition-colors rounded-lg"
+                onClick={() => navigate("/completed")}
+              >
+                <div className="flex items-center gap-2">
+                  <BookOpen className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-sm font-medium">Completed</span>
+                  <Badge><LockIcon className="size-3" /> Only you</Badge>
+                </div>
+                <div className="flex items-center gap-2">
+                  {completedLoading ? (
+                    <Skeleton className="h-5 w-5 rounded-full" />
+                  ) : completedTotal > 0 ? (
+                    <Badge variant="secondary" className="text-xs">{completedTotal}</Badge>
+                  ) : null}
+                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                </div>
+              </CardContent>
+            </Card>
+
           </div>
         </div>
       </div>