metricsa dn backedn fixes

frontend/src/pages/Planner/Keywords.tsx

@@ -8,6 +8,7 @@ import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import TablePageTemplate from '../../templates/TablePageTemplate';
 import {
   fetchKeywords,
+  fetchImages,
   createKeyword,
   updateKeyword,
   deleteKeyword,
@@ -50,6 +51,7 @@ export default function Keywords() {
   const [totalClustered, setTotalClustered] = useState(0);
   const [totalUnmapped, setTotalUnmapped] = useState(0);
   const [totalVolume, setTotalVolume] = useState(0);
+  const [totalImagesCount, setTotalImagesCount] = useState(0);
 
   // Filter state - match Keywords.tsx
   const [searchTerm, setSearchTerm] = useState('');
@@ -141,6 +143,10 @@ export default function Keywords() {
       // For now, we'll just calculate from current data or set to 0
       // TODO: Backend should provide total volume as an aggregated metric
       setTotalVolume(0);
+
+      // Get actual total images count
+      const imagesRes = await fetchImages({ page_size: 1 });
+      setTotalImagesCount(imagesRes.count || 0);
     } catch (error) {
       console.error('Error loading total metrics:', error);
     }
@@ -524,16 +530,43 @@ export default function Keywords() {
     activeSite,
   ]);
 
-  // Calculate header metrics from config (matching reference plugin KPIs from kpi-config.php)
+  // Calculate header metrics - use totalClustered/totalUnmapped from API calls (not page data)
+  // This ensures metrics show correct totals across all pages, not just current page
   const headerMetrics = useMemo(() => {
     if (!pageConfig?.headerMetrics) return [];
-    return pageConfig.headerMetrics.map((metric) => ({
-      label: metric.label,
-      value: metric.calculate({ keywords, totalCount, clusters }),
-      accentColor: metric.accentColor,
-      tooltip: (metric as any).tooltip, // Add tooltip support
-    }));
-  }, [pageConfig?.headerMetrics, keywords, totalCount, clusters]);
+
+    // Override the calculate function to use pre-loaded totals instead of filtering page data
+    return pageConfig.headerMetrics.map((metric) => {
+      let value: number;
+
+      switch (metric.label) {
+        case 'Keywords':
+          value = totalCount || 0;
+          break;
+        case 'Clustered':
+          // Use totalClustered from loadTotalMetrics() instead of filtering page data
+          value = totalClustered;
+          break;
+        case 'Unmapped':
+          // Use totalUnmapped from loadTotalMetrics() instead of filtering page data
+          value = totalUnmapped;
+          break;
+        case 'Volume':
+          // Use totalVolume from loadTotalMetrics() (if implemented) or keep original
+          value = totalVolume || keywords.reduce((sum: number, k) => sum + (k.volume || 0), 0);
+          break;
+        default:
+          value = metric.calculate({ keywords, totalCount, clusters });
+      }
+
+      return {
+        label: metric.label,
+        value,
+        accentColor: metric.accentColor,
+        tooltip: (metric as any).tooltip,
+      };
+    });
+  }, [pageConfig?.headerMetrics, keywords, totalCount, clusters, totalClustered, totalUnmapped, totalVolume]);
 
   // Calculate workflow insights based on UX doc principles
   const workflowStats = useMemo(() => {
@@ -819,7 +852,7 @@ export default function Keywords() {
           ],
           writerItems: [
             { label: 'Content Generated', value: 0, color: 'blue' },
-            { label: 'Images Created', value: 0, color: 'purple' },
+            { label: 'Images Created', value: totalImagesCount, color: 'purple' },
             { label: 'Published', value: 0, color: 'green' },
           ],
           creditsUsed: 0,