frontend-refactor-1

frontend/src/pages/Planner/Keywords.tsx

@@ -27,13 +27,14 @@ import { useSiteStore } from '../../store/siteStore';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import PageHeader from '../../components/common/PageHeader';
+import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';
 import { getDifficultyLabelFromNumber, getDifficultyRange } from '../../utils/difficulty';
 import FormModal from '../../components/common/FormModal';
 import ProgressModal from '../../components/common/ProgressModal';
 import { useProgressModal } from '../../hooks/useProgressModal';
 import { useResourceDebug } from '../../hooks/useResourceDebug';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { ArrowUpIcon, PlusIcon, ListIcon, DownloadIcon } from '../../icons';
+import { ArrowUpIcon, PlusIcon, ListIcon, DownloadIcon, GroupIcon, BoltIcon } from '../../icons';
 import { useKeywordsImportExport } from '../../config/import-export.config';
 import { createKeywordsPageConfig } from '../../config/pages/keywords.config';
 
@@ -750,12 +751,20 @@ export default function Keywords() {
     setIsModalOpen(true);
   }, []);
 
+  // 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="Keywords" 
         badge={{ icon: <ListIcon />, color: 'green' }}
       />
+      <ModuleNavigationTabs tabs={plannerTabs} />
       <TablePageTemplate
         columns={pageConfig.columns}
         data={keywords}