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>
This commit is contained in:
Jiayuan Zhang
2026-04-10 18:33:09 +08:00
parent bd9d88d50c
commit ebdda4810b

View File

@@ -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>