mpre ui fixes

frontend/src/pages/Writer/Images.tsx

@@ -17,6 +17,7 @@ import {
   fetchAPI,
   deleteContent,
   bulkDeleteContent,
+  fetchContent,
 } from '../../services/api';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { FileIcon, DownloadIcon, ArrowRightIcon } from '../../icons';
@@ -26,6 +27,7 @@ import ImageQueueModal, { ImageQueueItem } from '../../components/common/ImageQu
 import SingleRecordStatusUpdateModal from '../../components/common/SingleRecordStatusUpdateModal';
 import PageHeader from '../../components/common/PageHeader';
 import { Modal } from '../../components/ui/modal';
+import StatusMetricsCard from '../../components/common/StatusMetricsCard';
 
 export default function Images() {
   const toast = useToast();
@@ -68,6 +70,22 @@ export default function Images() {
   const [isImageModalOpen, setIsImageModalOpen] = useState(false);
   const [modalImageUrl, setModalImageUrl] = useState<string | null>(null);
 
+  // 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 images - wrapped in useCallback
   const loadImages = useCallback(async () => {
     setLoading(true);
@@ -451,7 +469,7 @@ export default function Images() {
   return (
     <>
       <PageHeader 
-        title="Images" 
+        title="Content Images" 
         badge={{ icon: <PhotoIcon />, color: 'pink' }}
         parent="Writer"
       />
@@ -516,26 +534,22 @@ export default function Images() {
       }}
       onRowAction={handleRowAction}
       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">
-            Content Images Status
-          </div>
-          <div>
-            Need Images: {images.filter(i => i.overall_status === 'pending').length}
-          </div>
-          <div>
-            Images Complete: {images.filter(i => i.overall_status === 'complete').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>Go to Review</span>
-              <ArrowRightIcon className="w-3 h-3" />
-            </Link>
-          </div>
-        </div>
+        <StatusMetricsCard
+          title="Content Images"
+          color="pink"
+          icon={<PhotoIcon className="w-5 h-5" />}
+          count={totalCount}
+          subtitle="content items with images"
+          metrics={[
+            { label: 'Need Images', value: images.filter(i => i.overall_status === 'pending').length },
+            { label: 'Images Complete', value: images.filter(i => i.overall_status === 'complete').length },
+          ]}
+          reviewCount={reviewCount}
+          actionButton={{
+            label: 'Review',
+            href: '/writer/review',
+          }}
+        />
       }
     />
       <ImageQueueModal