From 4beddaf25d5decff58674341e99b720bb693f9fc Mon Sep 17 00:00:00 2001
From: Desktop <desktop@igny8.com>
Date: Tue, 11 Nov 2025 00:43:39 +0500
Subject: [PATCH] Update ProgressModal.tsx

---
 .../src/components/common/ProgressModal.tsx   | 95 +++++++++----------
 1 file changed, 43 insertions(+), 52 deletions(-)

diff --git a/frontend/src/components/common/ProgressModal.tsx b/frontend/src/components/common/ProgressModal.tsx
index 6eda9fbd..ffde5bb7 100644
--- a/frontend/src/components/common/ProgressModal.tsx
+++ b/frontend/src/components/common/ProgressModal.tsx
@@ -283,7 +283,8 @@ export default function ProgressModal({
   const checklistItems = steps.map((step) => {
     const actuallyCompleted = isStepCompleted(step.phase, currentPhase, stepLogs);
     const visuallyCompleted = visuallyCompletedSteps.has(step.phase);
-    const inProgress = isStepInProgress(step.phase, currentPhase) && !visuallyCompleted;
+    // Only show as in progress if it's the current phase AND not visually completed yet
+    const inProgress = step.phase === currentPhase && !visuallyCompleted && !actuallyCompleted;
     
     // Get step log and format message
     const stepLog = stepLogs.find(log => log.stepName === step.phase);
@@ -358,20 +359,7 @@ export default function ProgressModal({
     };
   }, [isOpen, currentPhase, stepLogs, steps, visuallyCompletedSteps]);
   
-  // Auto-close on completion after all steps are visually completed + 3 seconds
-  useEffect(() => {
-    if (status === 'completed' && allStepsVisuallyCompleted && onClose && !hasAutoClosedRef.current) {
-      hasAutoClosedRef.current = true;
-      // Wait 3 seconds after success alert appears
-      const timer = setTimeout(() => {
-        onClose();
-      }, 3000);
-      return () => clearTimeout(timer);
-    }
-    if (status !== 'completed' || !allStepsVisuallyCompleted) {
-      hasAutoClosedRef.current = false;
-    }
-  }, [status, allStepsVisuallyCompleted, onClose]);
+  // Don't auto-close - user must click close button
   
   // Show success alert only when all steps are visually completed AND status is completed
   const showSuccess = status === 'completed' && allStepsVisuallyCompleted;
@@ -386,34 +374,26 @@ export default function ProgressModal({
     >
       <div className="p-6 min-h-[200px]">
         {/* Header */}
-        <div className="flex items-start gap-4 mb-6">
-          <div className="flex-shrink-0 mt-1">
-            {status === 'error' ? (
-              <svg className="w-6 h-6 text-error-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            ) : showSuccess ? (
-              <svg className="w-6 h-6 text-success-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-              </svg>
-            ) : (
-              <svg className="w-6 h-6 text-brand-500 animate-spin" fill="none" viewBox="0 0 24 24">
+        <div className="mb-6">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1 text-center">
+            {title}
+          </h3>
+          {!showSuccess && status !== 'completed' && (
+            <p className="text-sm text-gray-600 dark:text-gray-400 text-center">{message}</p>
+          )}
+          {status === 'completed' && !allStepsVisuallyCompleted && (
+            <p className="text-sm text-gray-600 dark:text-gray-400 text-center">Processing...</p>
+          )}
+          
+          {/* Spinner below heading - only show when processing and not completed */}
+          {!showSuccess && status !== 'completed' && status !== 'error' && (
+            <div className="flex justify-center mt-4">
+              <svg className="w-8 h-8 text-brand-500 animate-spin" fill="none" viewBox="0 0 24 24">
                 <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                 <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
               </svg>
-            )}
-          </div>
-          <div className="flex-1">
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
-              {title}
-            </h3>
-            {!showSuccess && status !== 'completed' && (
-              <p className="text-sm text-gray-600 dark:text-gray-400">{message}</p>
-            )}
-            {status === 'completed' && !allStepsVisuallyCompleted && (
-              <p className="text-sm text-gray-600 dark:text-gray-400">Processing...</p>
-            )}
-          </div>
+            </div>
+          )}
         </div>
 
         {/* Success Alert (shown when all steps are visually completed) */}
@@ -450,17 +430,14 @@ export default function ProgressModal({
                   : 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 opacity-60'
               }`}
             >
-              {/* Icon */}
+              {/* Icon - no spinner in steps, only checkmark or circle */}
               <div className="flex-shrink-0">
                 {item.completed ? (
                   <svg className="w-5 h-5 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20">
                     <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                   </svg>
                 ) : item.inProgress ? (
-                  <svg className="w-5 h-5 text-blue-600 dark:text-blue-400 animate-spin" fill="none" viewBox="0 0 24 24">
-                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-                  </svg>
+                  <div className="w-5 h-5 rounded-full border-2 border-blue-500 dark:border-blue-400 bg-blue-50 dark:bg-blue-900/20" />
                 ) : (
                   <div className="w-5 h-5 rounded-full border-2 border-gray-300 dark:border-gray-600" />
                 )}
@@ -483,8 +460,20 @@ export default function ProgressModal({
         </div>
 
         {/* Footer */}
-        <div className="flex justify-end gap-3">
-          {onCancel && status !== 'completed' && status !== 'error' && (
+        {showSuccess && onClose && (
+          <div className="flex justify-center mt-6">
+            <Button 
+              variant="primary" 
+              size="lg" 
+              onClick={onClose}
+              className="bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 text-white px-8 py-3 text-base font-semibold"
+            >
+              Close
+            </Button>
+          </div>
+        )}
+        {onCancel && !showSuccess && status !== 'error' && (
+          <div className="flex justify-end gap-3 mt-6">
             <Button
               variant="secondary"
               size="sm"
@@ -493,13 +482,15 @@ export default function ProgressModal({
             >
               Cancel
             </Button>
-          )}
-          {(status === 'completed' || status === 'error') && onClose && (
+          </div>
+        )}
+        {status === 'error' && onClose && (
+          <div className="flex justify-end gap-3 mt-6">
             <Button variant="primary" size="sm" onClick={onClose}>
-              {status === 'completed' ? 'Close' : 'Dismiss'}
+              Dismiss
             </Button>
-          )}
-        </div>
+          </div>
+        )}
       </div>
     </Modal>
   );