stadardize site slector sector selctor

frontend/src/pages/Planner/Clusters.tsx

@@ -26,6 +26,7 @@ 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';
 
 export default function Clusters() {
   const toast = useToast();
@@ -384,6 +385,7 @@ export default function Clusters() {
 
   return (
     <>
+      <PageHeader title="Keyword Clusters" />
       <TablePageTemplate
         title="Keyword Clusters"
         titleIcon={<GroupIcon className="text-success-500 size-5" />}

frontend/src/pages/Planner/Dashboard.tsx

@@ -27,7 +27,7 @@ import {
 } from "../../services/api";
 import { useSiteStore } from "../../store/siteStore";
 import { useSectorStore } from "../../store/sectorStore";
-import SiteAndSectorSelector from "../../components/common/SiteAndSectorSelector";
+import PageHeader from "../../components/common/PageHeader";
 
 interface DashboardStats {
   keywords: {
@@ -468,49 +468,12 @@ export default function PlannerDashboard() {
       
       <div className="space-y-5 sm:space-y-6">
         {/* Header with site/sector info and controls */}
-        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
-          <div className="flex-1">
-            <h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">Planner Dashboard</h2>
-            <div className="flex items-center gap-3 mt-1">
-              <p className="text-sm text-gray-500 dark:text-gray-400">
-                Last updated: {lastUpdated.toLocaleTimeString()}
-              </p>
-              {activeSite && (
-                <>
-                  <span className="text-sm text-gray-400 dark:text-gray-600">•</span>
-                  <p className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                    Site: <span className="text-brand-600 dark:text-brand-400">{activeSite.name}</span>
-                  </p>
-                </>
-              )}
-              {activeSector && (
-                <>
-                  <span className="text-sm text-gray-400 dark:text-gray-600">•</span>
-                  <p className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                    Sector: <span className="text-brand-600 dark:text-brand-400">{activeSector.name}</span>
-                  </p>
-                </>
-              )}
-              {!activeSector && (
-                <>
-                  <span className="text-sm text-gray-400 dark:text-gray-600">•</span>
-                  <p className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                    Sector: <span className="text-brand-600 dark:text-brand-400">All Sectors</span>
-                  </p>
-                </>
-              )}
-            </div>
-          </div>
-          <div className="flex items-center gap-3">
-            <SiteAndSectorSelector />
-            <button
-              onClick={fetchDashboardData}
-              className="px-4 py-2 text-sm font-medium text-brand-500 hover:text-brand-600 border border-brand-200 rounded-lg hover:bg-brand-50 dark:border-brand-800 dark:hover:bg-brand-500/10 transition-colors"
-            >
-              Refresh
-            </button>
-          </div>
-        </div>
+        <PageHeader
+          title="Planner Dashboard"
+          lastUpdated={lastUpdated}
+          showRefresh={true}
+          onRefresh={fetchDashboardData}
+        />
 
         {/* Hero Section - Key Metric */}
         <div className="rounded-2xl border border-gray-200 bg-gradient-to-br from-brand-50 to-white dark:from-brand-500/10 dark:to-gray-800/50 dark:border-gray-800 p-6 md:p-8">

frontend/src/pages/Planner/Ideas.tsx

@@ -27,6 +27,7 @@ import { BoltIcon, PlusIcon, DownloadIcon } from '../../icons';
 import { createIdeasPageConfig } from '../../config/pages/ideas.config';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
+import PageHeader from '../../components/common/PageHeader';
 
 export default function Ideas() {
   const toast = useToast();
@@ -294,6 +295,7 @@ export default function Ideas() {
 
   return (
     <>
+      <PageHeader title="Content Ideas" />
       <TablePageTemplate
         title="Content Ideas"
         titleIcon={<BoltIcon className="text-warning-500 size-5" />}

frontend/src/pages/Planner/Keywords.tsx

@@ -26,6 +26,7 @@ import {
 import { useSiteStore } from '../../store/siteStore';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
+import PageHeader from '../../components/common/PageHeader';
 import { getDifficultyLabelFromNumber, getDifficultyRange } from '../../utils/difficulty';
 import FormModal from '../../components/common/FormModal';
 import ProgressModal from '../../components/common/ProgressModal';
@@ -751,6 +752,7 @@ export default function Keywords() {
 
   return (
     <>
+      <PageHeader title="Keywords" />
       <TablePageTemplate
         title="Keywords"
         titleIcon={<ListIcon className="text-brand-500 size-5" />}

frontend/src/pages/Planner/Mapping.tsx

@@ -1,11 +1,12 @@
 import PageMeta from "../../components/common/PageMeta";
 import ComponentCard from "../../components/common/ComponentCard";
+import PageHeader from "../../components/common/PageHeader";
 
 export default function Mapping() {
   return (
     <>
       <PageMeta title="Content Mapping - IGNY8" description="Keyword to content mapping" />
-      
+      <PageHeader title="Content Mapping" />
       <ComponentCard title="Coming Soon" desc="Keyword to content mapping">
         <div className="text-center py-8">
           <p className="text-gray-600 dark:text-gray-400">