header footer metrics update and credits by site fixes

frontend/src/pages/Writer/Images.tsx

@@ -9,6 +9,7 @@ import TablePageTemplate from '../../templates/TablePageTemplate';
 import {
   fetchContentImages,
   fetchImages,
+  fetchContent,
   ContentImagesGroup,
   ContentImagesResponse,
   fetchImageGenerationSettings,
@@ -28,19 +29,28 @@ import SingleRecordStatusUpdateModal from '../../components/common/SingleRecordS
 import PageHeader from '../../components/common/PageHeader';
 import { Modal } from '../../components/ui/modal';
 import StandardThreeWidgetFooter from '../../components/dashboard/StandardThreeWidgetFooter';
+import { useSiteStore } from '../../store/siteStore';
 
 export default function Images() {
   const toast = useToast();
+  const { activeSite } = useSiteStore();
 
   // Data state
   const [images, setImages] = useState<ContentImagesGroup[]>([]);
   const [loading, setLoading] = useState(true);
 
   // Total counts for footer widget and header metrics (not page-filtered)
+  const [totalContent, setTotalContent] = useState(0);
+  const [totalDraft, setTotalDraft] = useState(0);
+  const [totalReview, setTotalReview] = useState(0);
+  const [totalApproved, setTotalApproved] = useState(0);
+  const [totalPublished, setTotalPublished] = useState(0);
+  const [totalImagesCount, setTotalImagesCount] = useState(0);
+  
+  // Footer widget specific counts (image-based)
   const [totalComplete, setTotalComplete] = useState(0);
   const [totalPartial, setTotalPartial] = useState(0);
   const [totalPending, setTotalPending] = useState(0);
-  const [totalImagesCount, setTotalImagesCount] = useState(0); // Actual images count
 
   // Filter state
   const [searchTerm, setSearchTerm] = useState('');
@@ -79,40 +89,26 @@ export default function Images() {
   // Load total metrics for footer widget and header metrics (not affected by pagination)
   const loadTotalMetrics = useCallback(async () => {
     try {
-      // Fetch content-grouped images for status counts
-      const data: ContentImagesResponse = await fetchContentImages({});
-      const allImages = data.results || [];
-
-      // Count by overall_status (content-level status)
-      let complete = 0;
-      let partial = 0;
-      let pending = 0;
-
-      allImages.forEach(img => {
-        switch (img.overall_status) {
-          case 'complete':
-            complete++;
-            break;
-          case 'partial':
-            partial++;
-            break;
-          case 'pending':
-            pending++;
-            break;
-        }
-      });
-
-      setTotalComplete(complete);
-      setTotalPartial(partial);
-      setTotalPending(pending);
-
-      // Fetch ACTUAL total images count from the images endpoint
-      const imagesData = await fetchImages({ page_size: 1 });
-      setTotalImagesCount(imagesData.count || 0);
+      // Fetch counts in parallel for performance
+      const [allRes, draftRes, reviewRes, approvedRes, publishedRes, imagesRes] = await Promise.all([
+        fetchContent({ page_size: 1, site_id: activeSite?.id }),
+        fetchContent({ page_size: 1, status: 'draft', site_id: activeSite?.id }),
+        fetchContent({ page_size: 1, status: 'review', site_id: activeSite?.id }),
+        fetchContent({ page_size: 1, status: 'approved', site_id: activeSite?.id }),
+        fetchContent({ page_size: 1, status: 'published', site_id: activeSite?.id }),
+        fetchImages({ page_size: 1, site_id: activeSite?.id }),
+      ]);
+      
+      setTotalContent(allRes.count || 0);
+      setTotalDraft(draftRes.count || 0);
+      setTotalReview(reviewRes.count || 0);
+      setTotalApproved(approvedRes.count || 0);
+      setTotalPublished(publishedRes.count || 0);
+      setTotalImagesCount(imagesRes.count || 0);
     } catch (error) {
       console.error('Error loading total metrics:', error);
     }
-  }, []);
+  }, [activeSite]);
 
   // Load total metrics on mount
   useEffect(() => {
@@ -502,19 +498,22 @@ export default function Images() {
 
       switch (metric.label) {
         case 'Content':
-          value = totalCount || 0;
+          value = totalContent || 0;
           break;
-        case 'Complete':
-          // Use totalComplete from loadTotalMetrics()
-          value = totalComplete;
+        case 'Draft':
+          value = totalDraft;
           break;
-        case 'Partial':
-          // Use totalPartial from loadTotalMetrics()
-          value = totalPartial;
+        case 'In Review':
+          value = totalReview;
           break;
-        case 'Pending':
-          // Use totalPending from loadTotalMetrics()
-          value = totalPending;
+        case 'Approved':
+          value = totalApproved;
+          break;
+        case 'Published':
+          value = totalPublished;
+          break;
+        case 'Total Images':
+          value = totalImagesCount;
           break;
         default:
           value = metric.calculate({ images, totalCount });
@@ -528,16 +527,8 @@ export default function Images() {
       };
     });
 
-    // Add total images count metric
-    baseMetrics.push({
-      label: 'Total Images',
-      value: totalImagesCount,
-      accentColor: 'purple' as const,
-      tooltip: 'Total number of images across all content',
-    });
-
     return baseMetrics;
-  }, [pageConfig?.headerMetrics, images, totalCount, totalComplete, totalPartial, totalPending, totalImagesCount]);
+  }, [pageConfig?.headerMetrics, images, totalCount, totalContent, totalDraft, totalReview, totalApproved, totalPublished, totalImagesCount]);
 
   return (
     <>