mpre ui fixes

frontend/src/pages/Writer/Tasks.tsx

@@ -4,6 +4,7 @@
  */
 
 import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { Link } from 'react-router-dom';
 import TablePageTemplate from '../../templates/TablePageTemplate';
 import {
   fetchTasks,
@@ -19,6 +20,7 @@ import {
   TaskCreateData,
   fetchClusters,
   Cluster,
+  fetchContent,
 } from '../../services/api';
 import FormModal from '../../components/common/FormModal';
 import ProgressModal from '../../components/common/ProgressModal';
@@ -31,6 +33,7 @@ import { usePageSizeStore } from '../../store/pageSizeStore';
 import PageHeader from '../../components/common/PageHeader';
 import ModuleMetricsFooter, { MetricItem, ProgressMetric } from '../../components/dashboard/ModuleMetricsFooter';
 import { DocumentTextIcon } from '@heroicons/react/24/outline';
+import StatusMetricsCard from '../../components/common/StatusMetricsCard';
 
 export default function Tasks() {
   const toast = useToast();
@@ -79,11 +82,27 @@ export default function Tasks() {
   // Progress modal for AI functions
   const progressModal = useProgressModal();
 
+  // Review count state
+  const [reviewCount, setReviewCount] = useState(0);
+
   // AI Function Logs state
 
   
   const hasReloadedRef = useRef<boolean>(false);
 
+  // Load review count
+  useEffect(() => {
+    const loadReviewCount = async () => {
+      try {
+        const data = await fetchContent({ status: 'review', page_size: 1 });
+        setReviewCount(data.count || 0);
+      } catch (error) {
+        console.error('Error fetching review count:', error);
+      }
+    };
+    loadReviewCount();
+  }, []);
+
 
 
   // Load clusters for filter dropdown
@@ -367,7 +386,7 @@ export default function Tasks() {
   return (
     <>
       <PageHeader 
-        title="Queue" 
+        title="Content Queue" 
         badge={{ icon: <DocumentTextIcon />, color: 'blue' }}
         parent="Writer"
       />
@@ -417,12 +436,6 @@ export default function Tasks() {
             setIsEditMode(true);
             setIsModalOpen(true);
           }}
-          onCreate={() => {
-            resetForm();
-            setIsModalOpen(true);
-          }}
-          createLabel="Add Task"
-          onCreateIcon={<PlusIcon />}
           onDelete={async (id: number) => {
             await deleteTask(id);
             loadTasks();
@@ -473,6 +486,24 @@ export default function Tasks() {
             setTypeFilter('');
             setCurrentPage(1);
           }}
+          statusExplainer={
+            <StatusMetricsCard
+              title="In Queue"
+              color="blue"
+              icon={<DocumentTextIcon className="w-5 h-5" />}
+              count={totalCount}
+              subtitle="content items queued"
+              metrics={[
+                { label: 'Queued', value: tasks.filter(t => t.status === 'queued').length },
+                { label: 'Processing', value: tasks.filter(t => t.status === 'in_progress').length },
+              ]}
+              reviewCount={reviewCount}
+              actionButton={{
+                label: 'Review',
+                href: '/writer/review',
+              }}
+            />
+          }
         />
 
       {/* Module Metrics Footer - Pipeline Style with Cross-Module Links */}