From 01d5d66466a7bcf4a0c0f454f7b4d58f7e1e7801 Mon Sep 17 00:00:00 2001
From: Siddharth Kumar Sah <siddharth123sk@gmail.com>
Date: Mon, 23 Mar 2026 01:39:40 +0800
Subject: [PATCH] feat(web): add ProgressCard component

---
 .../src/components/common/progress-card.tsx   | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 apps/web/src/components/common/progress-card.tsx

diff --git a/apps/web/src/components/common/progress-card.tsx b/apps/web/src/components/common/progress-card.tsx
new file mode 100644
index 00000000..2b9d5cbe
--- /dev/null
+++ b/apps/web/src/components/common/progress-card.tsx
@@ -0,0 +1,57 @@
+import { Upload, Loader2 } from "lucide-react";
+
+interface ProgressCardProps {
+  active: boolean;
+  phase: "uploading" | "processing" | "complete";
+  label: string;
+  stage?: string;
+  percent: number;
+  elapsed: number;
+}
+
+export function ProgressCard({
+  active,
+  phase,
+  label,
+  stage,
+  percent,
+  elapsed,
+}: ProgressCardProps) {
+  if (!active) return null;
+
+  const icon =
+    phase === "uploading" ? (
+      <Upload className="h-4 w-4 text-primary" />
+    ) : (
+      <Loader2 className="h-4 w-4 text-primary animate-spin" />
+    );
+
+  const sublabel = [stage, `${elapsed}s`].filter(Boolean).join(" \u00b7 ");
+
+  return (
+    <div className="bg-muted/80 border border-border rounded-xl p-3 space-y-2.5">
+      <div className="flex items-center gap-2.5">
+        <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
+          {icon}
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="text-sm font-medium text-foreground truncate">
+            {label}
+          </div>
+          <div className="text-[11px] text-muted-foreground truncate">
+            {sublabel}
+          </div>
+        </div>
+        <span className="text-sm font-semibold text-primary font-mono tabular-nums">
+          {Math.round(percent)}%
+        </span>
+      </div>
+      <div className="w-full h-1 bg-muted rounded-full overflow-hidden">
+        <div
+          className="h-full bg-primary rounded-full transition-all duration-500 ease-out"
+          style={{ width: `${Math.min(100, percent)}%` }}
+        />
+      </div>
+    </div>
+  );
+}