From 8cfc19737896b8784b3c5541195107618ce2f726 Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Wed, 4 Feb 2026 21:32:46 +0100
Subject: [PATCH] feat(18-01): create ProgressPanel component

- Card with Progress heading using CardHeader/CardContent pattern
- Reuses existing ProgressBar for task completion percentage
- Displays phase and task completion counts
- Handles 0/0 gracefully via ProgressBar's built-in guard
---
 packages/web/src/components/ProgressPanel.tsx | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 packages/web/src/components/ProgressPanel.tsx

diff --git a/packages/web/src/components/ProgressPanel.tsx b/packages/web/src/components/ProgressPanel.tsx
new file mode 100644
index 0000000..ee7ebbb
--- /dev/null
+++ b/packages/web/src/components/ProgressPanel.tsx
@@ -0,0 +1,35 @@
+import { Card, CardHeader, CardContent } from "@/components/ui/card";
+import { ProgressBar } from "@/components/ProgressBar";
+
+export interface ProgressPanelProps {
+  phasesComplete: number;
+  phasesTotal: number;
+  tasksComplete: number;
+  tasksTotal: number;
+}
+
+export function ProgressPanel({
+  phasesComplete,
+  phasesTotal,
+  tasksComplete,
+  tasksTotal,
+}: ProgressPanelProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <h2 className="text-lg font-semibold">Progress</h2>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3">
+        <ProgressBar completed={tasksComplete} total={tasksTotal} />
+        <div className="flex flex-col gap-1 text-sm text-muted-foreground">
+          <span>
+            Phases: {phasesComplete}/{phasesTotal} complete
+          </span>
+          <span>
+            Tasks: {tasksComplete}/{tasksTotal} complete
+          </span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}