automation fixes

frontend/src/components/Automation/StageCard.tsx

@@ -3,56 +3,88 @@
  * Shows status and results for each automation stage
  */
 import React from 'react';
-import { StageResult } from '../../services/automationService';
+import { StageResult, PipelineStage } from '../../services/automationService';
 
 interface StageCardProps {
   stageNumber: number;
   stageName: string;
-  currentStage: number;
-  result: StageResult | null;
+  currentStage?: number;
+  result?: StageResult | null;
+  pipelineData?: PipelineStage;
 }
 
 const StageCard: React.FC<StageCardProps> = ({
   stageNumber,
   stageName,
-  currentStage,
-  result,
+  currentStage = 0,
+  result = null,
+  pipelineData,
 }) => {
   const isPending = stageNumber > currentStage;
   const isActive = stageNumber === currentStage;
   const isComplete = stageNumber < currentStage || (result !== null && stageNumber <= 7);
 
   const getStatusColor = () => {
-    if (isActive) return 'border-blue-500 bg-blue-50';
-    if (isComplete) return 'border-green-500 bg-green-50';
-    return 'border-gray-300 bg-gray-50';
+    if (isActive) return 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 dark:border-blue-400';
+    if (isComplete) return 'border-green-500 bg-green-50 dark:bg-green-900/20 dark:border-green-400';
+    if (pipelineData && pipelineData.pending > 0) return 'border-purple-400 bg-purple-50 dark:bg-purple-900/20 dark:border-purple-400';
+    return 'border-gray-300 bg-gray-50 dark:bg-gray-800 dark:border-gray-600';
   };
 
   const getStatusIcon = () => {
     if (isActive) return '🔄';
     if (isComplete) return '✅';
-    return '⏳';
+    if (pipelineData && pipelineData.pending > 0) return '📋';
+    return '⏸';
+  };
+
+  const getStatusText = () => {
+    if (isActive) return 'Processing';
+    if (isComplete) return 'Completed';
+    if (pipelineData && pipelineData.pending > 0) return 'Ready';
+    return 'Waiting';
   };
 
   return (
-    <div className={`border-2 rounded-lg p-3 ${getStatusColor()}`}>
+    <div className={`border-2 rounded-lg p-3 transition-all ${getStatusColor()}`}>
       <div className="flex items-center justify-between mb-2">
-        <div className="text-sm font-bold">Stage {stageNumber}</div>
+        <div className="text-sm font-bold text-gray-700 dark:text-gray-200">Stage {stageNumber}</div>
         <div className="text-xl">{getStatusIcon()}</div>
       </div>
-      <div className="text-xs text-gray-700 mb-2">{stageName}</div>
+      <div className="text-xs text-gray-700 dark:text-gray-300 mb-2 font-medium">{stageName}</div>
+      
+      {/* Show pipeline pending counts when not running */}
+      {!isActive && !isComplete && pipelineData && (
+        <div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-600">
+          <div className="flex justify-between items-center">
+            <span className="text-xs text-gray-600 dark:text-gray-400">Pending:</span>
+            <span className="text-lg font-bold text-purple-600 dark:text-purple-400">{pipelineData.pending}</span>
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-500 mt-1">{getStatusText()}</div>
+        </div>
+      )}
+
+      {/* Show run results when stage has completed */}
       {result && (
-        <div className="text-xs space-y-1">
+        <div className="text-xs space-y-1 mt-2 pt-2 border-t border-gray-200 dark:border-gray-600">
           {Object.entries(result).map(([key, value]) => (
             <div key={key} className="flex justify-between">
-              <span className="text-gray-600">{key.replace(/_/g, ' ')}:</span>
-              <span className="font-semibold">{value}</span>
+              <span className="text-gray-600 dark:text-gray-400">{key.replace(/_/g, ' ')}:</span>
+              <span className="font-semibold text-gray-800 dark:text-gray-200">{value}</span>
             </div>
           ))}
         </div>
       )}
+
+      {/* Show processing indicator when active */}
+      {isActive && !result && (
+        <div className="mt-2 pt-2 border-t border-blue-200 dark:border-blue-600">
+          <div className="text-xs text-blue-600 dark:text-blue-400 animate-pulse">Processing...</div>
+        </div>
+      )}
     </div>
   );
 };
 
 export default StageCard;
+

frontend/src/components/sites/SiteProgressWidget.tsx

@@ -6,7 +6,7 @@ import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Card } from '../ui/card';
 import Badge from '../ui/badge/Badge';
-import { fetchSiteProgress, SiteProgress } from '../../services/api';
+// import { fetchSiteProgress, SiteProgress } from '../../services/api';
 import { CheckCircleIcon, XCircleIcon, AlertCircleIcon, ArrowRightIcon } from 'lucide-react';
 
 interface SiteProgressWidgetProps {