metricsa dn backedn fixes

frontend/src/pages/Planner/Clusters.tsx

@@ -7,6 +7,7 @@ import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import TablePageTemplate from '../../templates/TablePageTemplate';
 import {
   fetchClusters,
+  fetchImages,
   createCluster,
   updateCluster,
   deleteCluster,
@@ -41,6 +42,7 @@ export default function Clusters() {
   // Total counts for footer widget (not page-filtered)
   const [totalWithIdeas, setTotalWithIdeas] = useState(0);
   const [totalReady, setTotalReady] = useState(0);
+  const [totalImagesCount, setTotalImagesCount] = useState(0);
 
   // Filter state
   const [searchTerm, setSearchTerm] = useState('');
@@ -97,6 +99,10 @@ export default function Clusters() {
         status: 'new',
       });
       setTotalReady(newRes.count || 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);
     }
@@ -184,18 +190,17 @@ export default function Clusters() {
     };
   }, [loadClusters]);
 
-  // Debounced search
+  // Debounced search - reset to page 1 when search term changes
+  // Only depend on searchTerm to avoid pagination reset on page navigation
   useEffect(() => {
     const timer = setTimeout(() => {
-      if (currentPage === 1) {
-        loadClusters();
-      } else {
-        setCurrentPage(1);
-      }
+      // Always reset to page 1 when search changes
+      // The main useEffect will handle reloading when currentPage changes
+      setCurrentPage(1);
     }, 500);
 
     return () => clearTimeout(timer);
-  }, [searchTerm, currentPage, loadClusters]);
+  }, [searchTerm]);
 
   // Reset to page 1 when pageSize changes
   useEffect(() => {
@@ -380,16 +385,43 @@ export default function Clusters() {
     handleRowAction,
   ]);
 
-  // Calculate header metrics
+  // Calculate header metrics - use totalWithIdeas/totalReady 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({ clusters, totalCount }),
-      accentColor: metric.accentColor,
-      tooltip: (metric as any).tooltip,
-    }));
-  }, [pageConfig?.headerMetrics, clusters, totalCount]);
+
+    // 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 'Clusters':
+          value = totalCount || 0;
+          break;
+        case 'New':
+          // Use totalReady from loadTotalMetrics() (clusters without ideas)
+          value = totalReady;
+          break;
+        case 'Keywords':
+          // Sum of keywords across all clusters on current page (this is acceptable for display)
+          value = clusters.reduce((sum: number, c) => sum + (c.keywords_count || 0), 0);
+          break;
+        case 'Volume':
+          // Sum of volume across all clusters on current page (this is acceptable for display)
+          value = clusters.reduce((sum: number, c) => sum + (c.total_volume || 0), 0);
+          break;
+        default:
+          value = metric.calculate({ clusters, totalCount });
+      }
+
+      return {
+        label: metric.label,
+        value,
+        accentColor: metric.accentColor,
+        tooltip: (metric as any).tooltip,
+      };
+    });
+  }, [pageConfig?.headerMetrics, clusters, totalCount, totalReady, totalWithIdeas]);
 
   const resetForm = useCallback(() => {
     setFormData({
@@ -589,7 +621,7 @@ export default function Clusters() {
           ],
           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' },
           ],
           analyticsHref: '/account/usage',