wp plugin and app fixes adn automation page update

frontend/src/pages/Automation/AutomationPage.tsx

@@ -72,28 +72,78 @@ const AutomationPage: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [estimate, setEstimate] = useState<{ estimated_credits: number; current_balance: number; sufficient: boolean } | null>(null);
   
+  // Eligibility check - site must have data to use automation
+  const [isEligible, setIsEligible] = useState<boolean | null>(null);
+  const [eligibilityMessage, setEligibilityMessage] = useState<string | null>(null);
+  const [eligibilityChecked, setEligibilityChecked] = useState(false);
+  
   // New state for unified progress data
   const [globalProgress, setGlobalProgress] = useState<GlobalProgress | null>(null);
   const [stageProgress, setStageProgress] = useState<StageProgress[]>([]);
   const [initialSnapshot, setInitialSnapshot] = useState<InitialSnapshot | null>(null);
 
+  // Track site ID to avoid duplicate calls when activeSite object reference changes
+  const siteId = activeSite?.id;
+
   useEffect(() => {
+    if (!siteId) return;
+    // Reset state when site changes
+    setConfig(null);
+    setCurrentRun(null);
+    setEstimate(null);
+    setPipelineOverview([]);
+    setMetrics(null);
+    setIsEligible(null);
+    setEligibilityMessage(null);
+    setEligibilityChecked(false);
+    // First check eligibility, then load data only if eligible
+    checkEligibilityAndLoad();
+  }, [siteId]);
+
+  const checkEligibilityAndLoad = async () => {
     if (!activeSite) return;
-    loadData();
-    
-    const interval = setInterval(() => {
-      if (currentRun && (currentRun.status === 'running' || currentRun.status === 'paused')) {
-        // When automation is running, refresh both run and metrics
-        loadCurrentRun();
-        loadPipelineOverview();
-        loadMetrics(); // Add metrics refresh during run
+    try {
+      setLoading(true);
+      const eligibility = await automationService.checkEligibility(activeSite.id);
+      setIsEligible(eligibility.is_eligible);
+      setEligibilityMessage(eligibility.message);
+      setEligibilityChecked(true);
+      
+      // Only load full data if site is eligible
+      if (eligibility.is_eligible) {
+        await loadData();
       } else {
-        loadPipelineOverview();
+        setLoading(false);
       }
+    } catch (error) {
+      console.error('Failed to check eligibility:', error);
+      // On error, fall back to loading data anyway
+      setIsEligible(true);
+      setEligibilityChecked(true);
+      await loadData();
+    }
+  };
+
+  // Separate polling effect - only run if eligible
+  useEffect(() => {
+    if (!siteId || !isEligible) return;
+    if (!currentRun || (currentRun.status !== 'running' && currentRun.status !== 'paused')) {
+      // Only poll pipeline overview when not running
+      const interval = setInterval(() => {
+        loadPipelineOverview();
+      }, 5000);
+      return () => clearInterval(interval);
+    }
+
+    // When automation is running, refresh both run and metrics
+    const interval = setInterval(() => {
+      loadCurrentRun();
+      loadPipelineOverview();
+      loadMetrics();
     }, 5000);
     
     return () => clearInterval(interval);
-  }, [activeSite, currentRun?.status]);
+  }, [siteId, isEligible, currentRun?.status]);
 
   const loadData = async () => {
     if (!activeSite) return;
@@ -172,8 +222,8 @@ const AutomationPage: React.FC = () => {
         setShowProcessingCard(true);
       }
     } catch (error: any) {
+      console.error('Failed to load automation data:', error);
       toast.error('Failed to load automation data');
-      console.error(error);
     } finally {
       setLoading(false);
     }
@@ -434,6 +484,39 @@ const AutomationPage: React.FC = () => {
         parent="Automation"
       />
       
+      {/* Show eligibility notice when site has no data */}
+      {eligibilityChecked && !isEligible && (
+        <div className="flex flex-col items-center justify-center min-h-[60vh] p-8">
+          <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-2xl p-8 max-w-2xl text-center">
+            <div className="size-16 mx-auto mb-4 rounded-full bg-amber-100 dark:bg-amber-900/50 flex items-center justify-center">
+              <BoltIcon className="size-8 text-amber-600 dark:text-amber-400" />
+            </div>
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">
+              Site Not Eligible for Automation Yet
+            </h2>
+            <p className="text-gray-600 dark:text-gray-400 mb-6">
+              {eligibilityMessage || 'This site doesn\'t have any data yet. Start by adding keywords in the Planner module to enable automation.'}
+            </p>
+            <Button
+              variant="primary"
+              tone="brand"
+              onClick={() => window.location.href = '/planner/keywords'}
+            >
+              Go to Keyword Planner
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* Show loading state */}
+      {loading && !eligibilityChecked && (
+        <div className="flex items-center justify-center min-h-[60vh]">
+          <div className="text-gray-500 dark:text-gray-400">Loading automation data...</div>
+        </div>
+      )}
+
+      {/* Main content - only show when eligible */}
+      {eligibilityChecked && isEligible && (
       <div className="space-y-6">
         {/* Compact Ready-to-Run card (header) - absolutely centered in header */}
        
@@ -1143,6 +1226,7 @@ const AutomationPage: React.FC = () => {
           <ConfigModal config={config} onSave={handleSaveConfig} onCancel={() => setShowConfigModal(false)} />
         )}
       </div>
+      )}
     </>
   );
 };