sync: Auto-sync from Mikes-MacBook-Air.local at 2026-03-09 08:14:13

Synced files:
- Session logs updated
- Latest context and credentials
- Command/directive updates

Machine: Mikes-MacBook-Air.local
Timestamp: 2026-03-09 08:14:13

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

projects/msp-tools/quote-wizard/frontend/src/components/ui/ProgressBar.tsx

@@ -0,0 +1,56 @@
+import { motion } from 'framer-motion';
+import { cn } from '@/lib/utils';
+
+export interface ProgressBarProps {
+  progress: number;
+  showLabel?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'accent';
+  className?: string;
+}
+
+export function ProgressBar({
+  progress,
+  showLabel = false,
+  size = 'md',
+  variant = 'accent',
+  className,
+}: ProgressBarProps) {
+  const clampedProgress = Math.min(100, Math.max(0, progress));
+
+  const sizes = {
+    sm: 'h-1.5',
+    md: 'h-2.5',
+    lg: 'h-4',
+  };
+
+  const variants = {
+    default: 'bg-[#333d49]',
+    accent: 'bg-[#fe7400]',
+  };
+
+  return (
+    <div className={cn('w-full', className)}>
+      {showLabel && (
+        <div className="flex justify-between items-center mb-1.5">
+          <span className="text-sm font-medium text-[#333d49]">Progress</span>
+          <span className="text-sm font-medium text-[#333d49]">{clampedProgress}%</span>
+        </div>
+      )}
+      <div
+        className={cn('w-full bg-gray-200 rounded-full overflow-hidden', sizes[size])}
+        role="progressbar"
+        aria-valuenow={clampedProgress}
+        aria-valuemin={0}
+        aria-valuemax={100}
+      >
+        <motion.div
+          className={cn('h-full rounded-full', variants[variant])}
+          initial={{ width: 0 }}
+          animate={{ width: `${clampedProgress}%` }}
+          transition={{ duration: 0.5, ease: 'easeOut' }}
+        />
+      </div>
+    </div>
+  );
+}