frontend-refactor-1

frontend/src/pages/Planner/Clusters.tsx

@@ -21,12 +21,13 @@ import FormModal from '../../components/common/FormModal';
 import ProgressModal from '../../components/common/ProgressModal';
 import { useProgressModal } from '../../hooks/useProgressModal';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { GroupIcon, PlusIcon, DownloadIcon } from '../../icons';
+import { GroupIcon, PlusIcon, DownloadIcon, ListIcon, BoltIcon } from '../../icons';
 import { createClustersPageConfig } from '../../config/pages/clusters.config';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import { getDifficultyLabelFromNumber, getDifficultyRange } from '../../utils/difficulty';
 import PageHeader from '../../components/common/PageHeader';
+import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';
 
 export default function Clusters() {
   const toast = useToast();
@@ -383,12 +384,20 @@ export default function Clusters() {
     }
   };
 
+  // Planner navigation tabs
+  const plannerTabs = [
+    { label: 'Keywords', path: '/planner/keywords', icon: <ListIcon /> },
+    { label: 'Clusters', path: '/planner/clusters', icon: <GroupIcon /> },
+    { label: 'Ideas', path: '/planner/ideas', icon: <BoltIcon /> },
+  ];
+
   return (
     <>
       <PageHeader 
         title="Keyword Clusters" 
         badge={{ icon: <GroupIcon />, color: 'purple' }}
       />
+      <ModuleNavigationTabs tabs={plannerTabs} />
       <TablePageTemplate
         columns={pageConfig.columns}
         data={clusters}