From ebdda4810b93b91c12381788b46c581c75f4ce9c Mon Sep 17 00:00:00 2001
From: Jiayuan Zhang <forrestchang7@gmail.com>
Date: Fri, 10 Apr 2026 18:33:09 +0800
Subject: [PATCH] feat(projects): show progress on project overview page

Add a progress bar with done/total (percentage) to the project detail
overview tab, computed from the already-loaded project issues.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../projects/components/project-detail.tsx    | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/packages/views/projects/components/project-detail.tsx b/packages/views/projects/components/project-detail.tsx
index bbc1c279a0..2fb7d21b90 100644
--- a/packages/views/projects/components/project-detail.tsx
+++ b/packages/views/projects/components/project-detail.tsx
@@ -478,6 +478,27 @@ export function ProjectDetail({ projectId }: { projectId: string }) {
               </div>
             </div>
 
+            {/* Progress */}
+            {projectIssues.length > 0 && (() => {
+              const doneCount = projectIssues.filter((i) => i.status === "done" || i.status === "cancelled").length;
+              const totalCount = projectIssues.length;
+              const pct = Math.round((doneCount / totalCount) * 100);
+              return (
+                <div className="mt-5 flex items-center gap-4">
+                  <span className="text-xs font-medium text-muted-foreground shrink-0 w-20">Progress</span>
+                  <div className="flex items-center gap-3">
+                    <div className="relative h-2 w-40 rounded-full bg-muted overflow-hidden">
+                      <div
+                        className="absolute inset-y-0 left-0 rounded-full bg-emerald-500 transition-all"
+                        style={{ width: `${pct}%` }}
+                      />
+                    </div>
+                    <span className="text-xs text-muted-foreground tabular-nums">{doneCount}/{totalCount} ({pct}%)</span>
+                  </div>
+                </div>
+              );
+            })()}
+
             {/* Description */}
             <div className="mt-8">
               <h3 className="text-xs font-medium text-muted-foreground mb-2">Description</h3>