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

- Percentage-based horizontal bar with completed/total props
- Gray track (bg-muted), blue fill for partial, green fill for 100%
- Text label showing percentage
- Handles 0/0 total gracefully (empty bar)
---
 packages/web/src/components/ProgressBar.tsx | 34 +++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 packages/web/src/components/ProgressBar.tsx

diff --git a/packages/web/src/components/ProgressBar.tsx b/packages/web/src/components/ProgressBar.tsx
new file mode 100644
index 0000000..9d4e40d
--- /dev/null
+++ b/packages/web/src/components/ProgressBar.tsx
@@ -0,0 +1,34 @@
+import { cn } from "@/lib/utils";
+
+interface ProgressBarProps {
+  completed: number;
+  total: number;
+  className?: string;
+}
+
+export function ProgressBar({ completed, total, className }: ProgressBarProps) {
+  const percentage = total > 0 ? Math.round((completed / total) * 100) : 0;
+
+  const fillColor =
+    percentage === 0
+      ? ""
+      : percentage === 100
+        ? "bg-green-500"
+        : "bg-primary";
+
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <div className="h-2 flex-1 rounded-full bg-muted">
+        {percentage > 0 && (
+          <div
+            className={cn("h-2 rounded-full transition-all", fillColor)}
+            style={{ width: `${percentage}%` }}
+          />
+        )}
+      </div>
+      <span className="text-xs font-medium text-muted-foreground">
+        {percentage}%
+      </span>
+    </div>
+  );
+}