mpre ui fixes

frontend/src/pages/Writer/Content.tsx

@@ -25,6 +25,7 @@ import { useProgressModal } from '../../hooks/useProgressModal';
 import PageHeader from '../../components/common/PageHeader';
 import ModuleMetricsFooter, { MetricItem, ProgressMetric } from '../../components/dashboard/ModuleMetricsFooter';
 import { PencilSquareIcon } from '@heroicons/react/24/outline';
+import StatusMetricsCard from '../../components/common/StatusMetricsCard';
 
 export default function Content() {
   const toast = useToast();
@@ -55,6 +56,22 @@ export default function Content() {
   const progressModal = useProgressModal();
   const hasReloadedRef = useRef(false);
 
+  // Review count state
+  const [reviewCount, setReviewCount] = useState(0);
+
+  // 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 content - wrapped in useCallback
   const loadContent = useCallback(async () => {
     setLoading(true);
@@ -227,7 +244,7 @@ export default function Content() {
   return (
     <>
       <PageHeader 
-        title="Drafts" 
+        title="Content Drafts" 
         badge={{ icon: <PencilSquareIcon />, color: 'orange' }}
         parent="Writer"
       />
@@ -274,26 +291,22 @@ export default function Content() {
         onBulkDelete={handleBulkDelete}
         getItemDisplayName={(row: ContentType) => row.title || `Content #${row.id}`}
         statusExplainer={
-          <div className="text-xs text-gray-600 dark:text-gray-400 space-y-1">
-            <div className="font-medium text-gray-700 dark:text-gray-300">
-              Currently Generated (Draft): {content.filter(c => c.status === 'draft').length}
-            </div>
-            <div>
-              Image Prompts: {content.filter(c => c.has_image_prompts).length}/{content.length}
-            </div>
-            <div>
-              Images Generated: {content.filter(c => c.has_generated_images).length}/{content.length}
-            </div>
-            <div className="pt-2 border-t border-gray-200 dark:border-gray-700 mt-2">
-              <Link 
-                to="/writer/review" 
-                className="text-brand-500 hover:text-brand-600 flex items-center gap-1"
-              >
-                <span>Review ({content.filter(c => c.status === 'review').length})</span>
-                <ArrowRightIcon className="w-3 h-3" />
-              </Link>
-            </div>
-          </div>
+          <StatusMetricsCard
+            title="Content Drafts"
+            color="orange"
+            icon={<PencilSquareIcon className="w-5 h-5" />}
+            count={totalCount}
+            subtitle="draft content items"
+            metrics={[
+              { label: 'Image Prompts', value: `${content.filter(c => c.has_image_prompts).length}/${content.length}` },
+              { label: 'Images Generated', value: `${content.filter(c => c.has_generated_images).length}/${content.length}` },
+            ]}
+            reviewCount={reviewCount}
+            actionButton={{
+              label: 'Review',
+              href: '/writer/review',
+            }}
+          />
         }
       />