refactor phase 7-8

frontend/src/pages/Planner/Keywords.tsx

@@ -28,6 +28,7 @@ import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import PageHeader from '../../components/common/PageHeader';
 import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';
+import ModuleMetricsFooter, { MetricItem, ProgressMetric } from '../../components/dashboard/ModuleMetricsFooter';
 import { getDifficultyLabelFromNumber, getDifficultyRange } from '../../utils/difficulty';
 import FormModal from '../../components/common/FormModal';
 import ProgressModal from '../../components/common/ProgressModal';
@@ -881,6 +882,40 @@ export default function Keywords() {
         }}
       />
 
+      {/* Module Metrics Footer */}
+      <ModuleMetricsFooter
+        metrics={[
+          {
+            title: 'Total Keywords',
+            value: totalCount.toLocaleString(),
+            subtitle: `${clusters.length} clusters`,
+            icon: <ListIcon className="w-5 h-5" />,
+            accentColor: 'blue',
+            href: '/planner/keywords',
+          },
+          {
+            title: 'Clustered',
+            value: keywords.filter(k => k.cluster_id).length.toLocaleString(),
+            subtitle: `${Math.round((keywords.filter(k => k.cluster_id).length / Math.max(totalCount, 1)) * 100)}% coverage`,
+            icon: <GroupIcon className="w-5 h-5" />,
+            accentColor: 'purple',
+            href: '/planner/clusters',
+          },
+          {
+            title: 'Active',
+            value: keywords.filter(k => k.status === 'active').length.toLocaleString(),
+            subtitle: `${keywords.filter(k => k.status === 'pending').length} pending`,
+            icon: <BoltIcon className="w-5 h-5" />,
+            accentColor: 'green',
+          },
+        ]}
+        progress={{
+          label: 'Keyword Clustering Progress',
+          value: totalCount > 0 ? Math.round((keywords.filter(k => k.cluster_id).length / totalCount) * 100) : 0,
+          color: 'primary',
+        }}
+      />
+
       {/* Create/Edit Modal */}
       <FormModal
         key={`keyword-form-${isEditMode ? editingKeyword?.id : 'new'}-${formData.seed_keyword_id}-${formData.status}`}