master - part 2

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,
+  fetchClustersSummary,
   fetchImages,
   createCluster,
   updateCluster,
@@ -43,6 +44,8 @@ export default function Clusters() {
   const [totalWithIdeas, setTotalWithIdeas] = useState(0);
   const [totalReady, setTotalReady] = useState(0);
   const [totalImagesCount, setTotalImagesCount] = useState(0);
+  const [totalVolume, setTotalVolume] = useState(0);
+  const [totalKeywords, setTotalKeywords] = useState(0);
 
   // Filter state
   const [searchTerm, setSearchTerm] = useState('');
@@ -84,24 +87,31 @@ export default function Clusters() {
   // Load total metrics for footer widget (not affected by pagination)
   const loadTotalMetrics = useCallback(async () => {
     try {
-      // Get clusters with status='mapped' (those that have ideas)
-      const mappedRes = await fetchClusters({
-        page_size: 1,
-        ...(activeSector?.id && { sector_id: activeSector.id }),
-        status: 'mapped',
-      });
+      // Fetch summary metrics in parallel with status counts
+      const [summaryRes, mappedRes, newRes, imagesRes] = await Promise.all([
+        fetchClustersSummary(activeSector?.id),
+        fetchClusters({
+          page_size: 1,
+          ...(activeSector?.id && { sector_id: activeSector.id }),
+          status: 'mapped',
+        }),
+        fetchClusters({
+          page_size: 1,
+          ...(activeSector?.id && { sector_id: activeSector.id }),
+          status: 'new',
+        }),
+        fetchImages({ page_size: 1 }),
+      ]);
+      
+      // Set summary metrics
+      setTotalVolume(summaryRes.total_volume || 0);
+      setTotalKeywords(summaryRes.total_keywords || 0);
+      
+      // Set status counts
       setTotalWithIdeas(mappedRes.count || 0);
-
-      // Get clusters with status='new' (those that are ready for ideas)
-      const newRes = await fetchClusters({
-        page_size: 1,
-        ...(activeSector?.id && { sector_id: activeSector.id }),
-        status: 'new',
-      });
       setTotalReady(newRes.count || 0);
 
-      // Get actual total images count
-      const imagesRes = await fetchImages({ page_size: 1 });
+      // Set images count
       setTotalImagesCount(imagesRes.count || 0);
     } catch (error) {
       console.error('Error loading total metrics:', error);
@@ -403,12 +413,12 @@ export default function Clusters() {
           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);
+          // Use totalKeywords from summary endpoint (aggregate across all clusters)
+          value = totalKeywords;
           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);
+          // Use totalVolume from summary endpoint (aggregate across all clusters)
+          value = totalVolume;
           break;
         default:
           value = metric.calculate({ clusters, totalCount });
@@ -421,7 +431,7 @@ export default function Clusters() {
         tooltip: (metric as any).tooltip,
       };
     });
-  }, [pageConfig?.headerMetrics, clusters, totalCount, totalReady, totalWithIdeas]);
+  }, [pageConfig?.headerMetrics, clusters, totalCount, totalReady, totalWithIdeas, totalVolume, totalKeywords]);
 
   const resetForm = useCallback(() => {
     setFormData({