refactor phase 7-8

frontend/src/pages/Writer/Content.tsx

@@ -22,6 +22,7 @@ import ProgressModal from '../../components/common/ProgressModal';
 import { useProgressModal } from '../../hooks/useProgressModal';
 import PageHeader from '../../components/common/PageHeader';
 import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';
+import ModuleMetricsFooter, { MetricItem, ProgressMetric } from '../../components/dashboard/ModuleMetricsFooter';
 
 export default function Content() {
   const toast = useToast();
@@ -259,6 +260,39 @@ export default function Content() {
         getItemDisplayName={(row: ContentType) => row.meta_title || row.title || `Content #${row.id}`}
       />
 
+      {/* Module Metrics Footer */}
+      <ModuleMetricsFooter
+        metrics={[
+          {
+            title: 'Total Content',
+            value: totalCount.toLocaleString(),
+            subtitle: `${content.filter(c => c.status === 'published').length} published`,
+            icon: <FileIcon className="w-5 h-5" />,
+            accentColor: 'green',
+            href: '/writer/content',
+          },
+          {
+            title: 'Draft',
+            value: content.filter(c => c.status === 'draft').length.toLocaleString(),
+            subtitle: `${content.filter(c => c.status === 'review').length} in review`,
+            icon: <TaskIcon className="w-5 h-5" />,
+            accentColor: 'blue',
+          },
+          {
+            title: 'Synced',
+            value: content.filter(c => c.sync_status === 'synced').length.toLocaleString(),
+            subtitle: `${content.filter(c => c.sync_status === 'pending').length} pending`,
+            icon: <CheckCircleIcon className="w-5 h-5" />,
+            accentColor: 'purple',
+          },
+        ]}
+        progress={{
+          label: 'Content Publishing Progress',
+          value: totalCount > 0 ? Math.round((content.filter(c => c.status === 'published').length / totalCount) * 100) : 0,
+          color: 'success',
+        }}
+      />
+
       {/* Progress Modal for AI Functions */}
       <ProgressModal
         isOpen={progressModal.isOpen}