Update frontend/src/components/ocr/ProcessingStatus.jsx

frontend/src/components/ocr/ProcessingStatus.jsx

@@ -10,10 +10,10 @@ import {
 import { cn } from "@/lib/utils";
 
 const steps = [
-  { id: "upload", label: "Document Received", icon: FileSearch },
-  { id: "analyze", label: "AI Analysis", icon: Cpu },
-  { id: "extract", label: "Data Extraction", icon: TableProperties },
-  { id: "complete", label: "Complete", icon: CheckCircle2 },
+  { id: "upload", label: "Received", icon: FileSearch },
+  { id: "analyze", label: "Analysis", icon: Cpu },
+  { id: "extract", label: "Extraction", icon: TableProperties },
+  { id: "complete", label: "Done", icon: CheckCircle2 },
 ];
 
 export default function ProcessingStatus({ isProcessing, isComplete }) {
@@ -31,67 +31,56 @@ export default function ProcessingStatus({ isProcessing, isComplete }) {
     <motion.div
       initial={{ opacity: 0, y: -10 }}
       animate={{ opacity: 1, y: 0 }}
-      className="bg-white rounded-2xl border border-slate-200 p-6"
+      className="bg-white rounded-xl border border-slate-200 px-4 py-3"
     >
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between gap-2">
         {steps.map((step, index) => {
           const isActive = index + 1 === currentStep;
-          const isCompleted = index + 1 < currentStep;
+          const isCompleted = index + 1 < currentStep || isComplete;
           const Icon = step.icon;
 
           return (
             <React.Fragment key={step.id}>
-              <div className="flex flex-col items-center">
+              <div className="flex items-center gap-2">
                 <motion.div
                   initial={false}
                   animate={{
-                    scale: isActive ? 1.1 : 1,
+                    scale: (isActive && !isComplete) ? 1.05 : 1,
                     backgroundColor: isCompleted
                       ? "rgb(16 185 129)"
-                      : isActive
+                      : (isActive && !isComplete)
                       ? "rgb(99 102 241)"
                       : "rgb(241 245 249)",
                   }}
                   className={cn(
-                    "h-12 w-12 rounded-xl flex items-center justify-center mb-2 transition-colors",
-                    (isCompleted || isActive) && "shadow-lg"
+                    "h-8 w-8 rounded-lg flex items-center justify-center transition-colors",
+                    (isCompleted || isActive) && "shadow-md"
                   )}
                   style={{
-                    boxShadow: isActive
-                      ? "0 8px 16px -4px rgba(99, 102, 241, 0.3)"
+                    boxShadow: (isActive && !isComplete)
+                      ? "0 4px 8px -2px rgba(99, 102, 241, 0.3)"
                       : isCompleted
-                      ? "0 8px 16px -4px rgba(16, 185, 129, 0.3)"
+                      ? "0 4px 8px -2px rgba(16, 185, 129, 0.3)"
                       : "none",
                   }}
                 >
-                  {isActive && !isComplete ? (
+                  {(isActive && !isComplete) ? (
                     <motion.div
                       animate={{ rotate: 360 }}
-                      transition={{
-                        duration: 1.5,
-                        repeat: Infinity,
-                        ease: "linear",
-                      }}
+                      transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
                     >
-                      <Loader2 className="h-5 w-5 text-white" />
+                      <Loader2 className="h-4 w-4 text-white" />
                     </motion.div>
+                  ) : isCompleted ? (
+                    <CheckCircle2 className="h-4 w-4 text-white" />
                   ) : (
-                    <Icon
-                      className={cn(
-                        "h-5 w-5",
-                        isCompleted || (isActive && isComplete) ? "text-white" : "text-slate-400"
-                      )}
-                    />
+                    <Icon className={cn("h-4 w-4 text-slate-400")} />
                   )}
                 </motion.div>
                 <span
                   className={cn(
-                    "text-xs font-medium text-center",
-                    isActive
-                      ? "text-indigo-600"
-                      : isCompleted
-                      ? "text-emerald-600"
-                      : "text-slate-400"
+                    "text-xs font-medium hidden sm:inline",
+                    isActive ? "text-indigo-600" : isCompleted ? "text-emerald-600" : "text-slate-400"
                   )}
                 >
                   {step.label}
@@ -99,7 +88,7 @@ export default function ProcessingStatus({ isProcessing, isComplete }) {
               </div>
 
               {index < steps.length - 1 && (
-                <div className="flex-1 h-0.5 mx-4 mb-6 relative overflow-hidden rounded-full bg-slate-100">
+                <div className="flex-1 h-0.5 mx-1 relative overflow-hidden rounded-full bg-slate-100">
                   <motion.div
                     initial={{ width: 0 }}
                     animate={{