header footer metrics update and credits by site fixes

frontend/src/pages/Writer/Approved.tsx

@@ -22,6 +22,7 @@ import { FileIcon, CheckCircleIcon, BoltIcon } from '../../icons';
 import { RocketLaunchIcon } from '@heroicons/react/24/outline';
 import { createApprovedPageConfig } from '../../config/pages/approved.config';
 import { useSectorStore } from '../../store/sectorStore';
+import { useSiteStore } from '../../store/siteStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import PageHeader from '../../components/common/PageHeader';
 import StandardThreeWidgetFooter from '../../components/dashboard/StandardThreeWidgetFooter';
@@ -30,6 +31,7 @@ export default function Approved() {
   const toast = useToast();
   const navigate = useNavigate();
   const { activeSector } = useSectorStore();
+  const { activeSite } = useSiteStore();
   const { pageSize } = usePageSizeStore();
 
   // Data state
@@ -37,8 +39,11 @@ export default function Approved() {
   const [loading, setLoading] = useState(true);
 
   // Total counts for footer widget and header metrics (not page-filtered)
-  const [totalOnSite, setTotalOnSite] = useState(0);
-  const [totalPendingPublish, setTotalPendingPublish] = useState(0);
+  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);
 
   // Filter state - default to approved status
@@ -59,27 +64,26 @@ export default function Approved() {
   // Load total metrics for footer widget and header metrics (not affected by pagination)
   const loadTotalMetrics = useCallback(async () => {
     try {
-      // Fetch all approved+published content to calculate totals
-      const data = await fetchContent({
-        status__in: 'approved,published', // Both approved and published content
-        page_size: 1000, // Fetch enough to count
-      });
-
-      const allContent = data.results || [];
-      // Count by external_id presence
-      const onSite = allContent.filter(c => c.external_id).length;
-      const pending = allContent.filter(c => !c.external_id).length;
-
-      setTotalOnSite(onSite);
-      setTotalPendingPublish(pending);
-
-      // Get actual total images count
-      const imagesRes = await fetchImages({ page_size: 1 });
+      // 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(() => {
@@ -342,16 +346,23 @@ export default function Approved() {
       let value: number;
 
       switch (metric.label) {
+        case 'Content':
+          value = totalContent || 0;
+          break;
+        case 'Draft':
+          value = totalDraft;
+          break;
+        case 'In Review':
+          value = totalReview;
+          break;
         case 'Approved':
-          value = totalCount || 0;
+          value = totalApproved;
           break;
-        case 'On Site':
-          // Use totalOnSite from loadTotalMetrics()
-          value = totalOnSite;
+        case 'Published':
+          value = totalPublished;
           break;
-        case 'Pending':
-          // Use totalPendingPublish from loadTotalMetrics()
-          value = totalPendingPublish;
+        case 'Total Images':
+          value = totalImagesCount;
           break;
         default:
           value = metric.calculate({ content, totalCount });
@@ -361,9 +372,10 @@ export default function Approved() {
         label: metric.label,
         value,
         accentColor: metric.accentColor,
+        tooltip: (metric as any).tooltip,
       };
     });
-  }, [pageConfig?.headerMetrics, content, totalCount, totalOnSite, totalPendingPublish]);
+  }, [pageConfig?.headerMetrics, content, totalCount, totalContent, totalDraft, totalReview, totalApproved, totalPublished, totalImagesCount]);
 
   return (
     <>