mpre ui fixes

frontend/src/pages/Writer/Review.tsx

@@ -21,6 +21,7 @@ import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import PageHeader from '../../components/common/PageHeader';
 import ModuleMetricsFooter from '../../components/dashboard/ModuleMetricsFooter';
+import StatusMetricsCard from '../../components/common/StatusMetricsCard';
 
 export default function Review() {
   const toast = useToast();
@@ -397,7 +398,7 @@ export default function Review() {
   return (
     <>
       <PageHeader 
-        title="Review" 
+        title="Content Review" 
         badge={{ icon: <ClipboardDocumentCheckIcon />, color: 'emerald' }}
         parent="Writer"
       />
@@ -454,11 +455,17 @@ export default function Review() {
         }}
         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">
-              Approve {totalCount} content pages/articles awaiting approval
-            </div>
-          </div>
+          <StatusMetricsCard
+            title="In Review"
+            color="emerald"
+            icon={<ClipboardDocumentCheckIcon className="w-5 h-5" />}
+            count={totalCount}
+            subtitle="awaiting approval"
+            actionButton={{
+              label: 'Approved',
+              href: '/writer/approved',
+            }}
+          />
         }
       />
       <ModuleMetricsFooter