update

frontend/src/components/ui/ProgressBar.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useTheme } from '../../contexts/ThemeContext';
+
+interface ProgressBarProps {
+  percent: number;
+  color?: 'accent' | 'green' | 'orange' | 'red';
+  showLabel?: boolean;
+}
+
+export const ProgressBar: React.FC<ProgressBarProps> = ({
+  percent,
+  color = 'accent',
+  showLabel = false,
+}) => {
+  const { theme } = useTheme();
+
+  const colorStyles = {
+    accent: theme.gradientAccent,
+    green: `linear-gradient(90deg, ${theme.green}, #00ff88)`,
+    orange: `linear-gradient(90deg, ${theme.orange}, #ffaa00)`,
+    red: '#ff4444',
+  };
+
+  return (
+    <div className="flex items-center gap-3">
+      <div
+        className="h-2 rounded-full flex-1"
+        style={{ backgroundColor: theme.bgHover }}
+      >
+        <div
+          className="h-full rounded-full transition-all duration-300"
+          style={{
+            width: `${percent}%`,
+            background: colorStyles[color],
+          }}
+        />
+      </div>
+      {showLabel && (
+        <span className="font-mono text-xs text-t-accent">{percent}%</span>
+      )}
+    </div>
+  );
+};