stadardize site slector sector selctor

frontend/src/components/common/PageHeader.tsx

@@ -0,0 +1,80 @@
+/**
+ * Standardized Page Header Component
+ * Used across all Planner and Writer module pages
+ * Includes: Page title, last updated, site/sector info, and selectors
+ */
+import { useSiteStore } from '../../store/siteStore';
+import { useSectorStore } from '../../store/sectorStore';
+import SiteAndSectorSelector from './SiteAndSectorSelector';
+
+interface PageHeaderProps {
+  title: string;
+  lastUpdated?: Date;
+  showRefresh?: boolean;
+  onRefresh?: () => void;
+  className?: string;
+}
+
+export default function PageHeader({
+  title,
+  lastUpdated,
+  showRefresh = false,
+  onRefresh,
+  className = "",
+}: PageHeaderProps) {
+  const { activeSite } = useSiteStore();
+  const { activeSector } = useSectorStore();
+
+  return (
+    <div className={`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 ${className}`}>
+      <div className="flex-1">
+        <h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">{title}</h2>
+        <div className="flex items-center gap-3 mt-1">
+          {lastUpdated && (
+            <>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Last updated: {lastUpdated.toLocaleTimeString()}
+              </p>
+            </>
+          )}
+          {activeSite && (
+            <>
+              {lastUpdated && <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 && 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">
+                Sector: <span className="text-brand-600 dark:text-brand-400">All Sectors</span>
+              </p>
+            </>
+          )}
+        </div>
+      </div>
+      <div className="flex items-center gap-3">
+        <SiteAndSectorSelector />
+        {showRefresh && onRefresh && (
+          <button
+            onClick={onRefresh}
+            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>
+  );
+}
+

frontend/src/layout/AppHeader.tsx

@@ -6,7 +6,6 @@ import { ThemeToggleButton } from "../components/common/ThemeToggleButton";
 import NotificationDropdown from "../components/header/NotificationDropdown";
 import UserDropdown from "../components/header/UserDropdown";
 import { HeaderMetrics } from "../components/header/HeaderMetrics";
-import SiteSwitcher from "../components/header/SiteSwitcher";
 import ResourceDebugToggle from "../components/debug/ResourceDebugToggle";
 
 const AppHeader: React.FC = () => {
@@ -160,8 +159,6 @@ const AppHeader: React.FC = () => {
           } items-center justify-between w-full gap-4 px-5 py-4 lg:flex shadow-theme-md lg:justify-end lg:px-0 lg:shadow-none`}
         >
           <div className="flex items-center gap-2 2xsm:gap-3">
-            {/* <!-- Site Switcher (conditional - only on planner/writer pages) --> */}
-            <SiteSwitcher />
             {/* <!-- Header Metrics (conditional) --> */}
             <HeaderMetrics />
             {/* <!-- Dark Mode Toggler --> */}

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">
+        <PageHeader
-          <div className="flex-1">
+          title="Planner Dashboard"
-            <h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">Planner Dashboard</h2>
+          lastUpdated={lastUpdated}
-            <div className="flex items-center gap-3 mt-1">
+          showRefresh={true}
-              <p className="text-sm text-gray-500 dark:text-gray-400">
+          onRefresh={fetchDashboardData}
-                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>
 
         {/* 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">

frontend/src/pages/Writer/Content.tsx

@@ -18,6 +18,7 @@ import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import ProgressModal from '../../components/common/ProgressModal';
 import { useProgressModal } from '../../hooks/useProgressModal';
+import PageHeader from '../../components/common/PageHeader';
 
 export default function Content() {
   const toast = useToast();
@@ -180,6 +181,7 @@ export default function Content() {
 
   return (
     <>
+      <PageHeader title="Content" />
       <TablePageTemplate
         title="Content"
         titleIcon={<FileIcon className="text-brand-500 size-5" />}

frontend/src/pages/Writer/Dashboard.tsx

@@ -26,7 +26,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 WriterStats {
   tasks: {
@@ -547,49 +547,12 @@ export default function WriterDashboard() {
       
       <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">
+        <PageHeader
-          <div className="flex-1">
+          title="Writer Dashboard"
-            <h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">Writer Dashboard</h2>
+          lastUpdated={lastUpdated}
-            <div className="flex items-center gap-3 mt-1">
+          showRefresh={true}
-              <p className="text-sm text-gray-500 dark:text-gray-400">
+          onRefresh={fetchDashboardData}
-                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>
 
         {/* 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/Writer/Images.tsx

@@ -19,6 +19,7 @@ import { createImagesPageConfig } from '../../config/pages/images.config';
 import ImageQueueModal, { ImageQueueItem } from '../../components/common/ImageQueueModal';
 import SingleRecordStatusUpdateModal from '../../components/common/SingleRecordStatusUpdateModal';
 import { useResourceDebug } from '../../hooks/useResourceDebug';
+import PageHeader from '../../components/common/PageHeader';
 
 export default function Images() {
   const toast = useToast();
@@ -89,7 +90,7 @@ export default function Images() {
     setLoading(true);
     setShowContent(false);
     try {
-      const data: ContentImagesResponse = await fetchContentImages();
+      const data: ContentImagesResponse = await fetchContentImages({});
       let filteredResults = data.results || [];
       
       // Client-side search filter
@@ -384,8 +385,9 @@ export default function Images() {
 
   return (
     <>
-    <TablePageTemplate
+      <PageHeader title="Content Images" />
-      title="Content Images"
+      <TablePageTemplate
+        title="Content Images"
       titleIcon={<FileIcon className="text-purple-500 size-5" />}
       subtitle="Manage images for content articles"
       columns={pageConfig.columns}

frontend/src/pages/Writer/Tasks.tsx

@@ -34,6 +34,7 @@ import { KanbanBoard, TaskList, Task as KanbanTask } from '../../components/task
 import WorkflowPipeline, { WorkflowStep } from '../../components/dashboard/WorkflowPipeline';
 import ComponentCard from '../../components/common/ComponentCard';
 import { useNavigate } from 'react-router';
+import PageHeader from '../../components/common/PageHeader';
 
 export default function Tasks() {
   const navigate = useNavigate();
@@ -698,16 +699,7 @@ export default function Tasks() {
 
       {/* View Toggle - Only show for Kanban/List views */}
       {currentView !== 'table' && (
-        <div className="mb-4 flex items-center justify-between">
+        <div className="mb-4 flex items-center justify-end">
-          <div className="flex items-center gap-4">
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
-              <TaskIcon className="text-brand-500 size-6" />
-              Tasks
-            </h1>
-            <p className="text-sm text-gray-500 dark:text-gray-400 hidden sm:block">
-              Manage content generation queue and tasks
-            </p>
-          </div>
           <ViewToggle currentView={currentView} onViewChange={setCurrentView} />
         </div>
       )}

frontend/src/services/api.ts

@@ -1062,8 +1062,35 @@ export interface ImageFilters {
   page_size?: number;
 }
 
-export async function fetchContentImages(): Promise<ContentImagesResponse> {
+export interface ContentImagesFilters {
-  return fetchAPI('/v1/writer/images/content_images/');
+  site_id?: number;
+  sector_id?: number;
+}
+
+export async function fetchContentImages(filters: ContentImagesFilters = {}): Promise<ContentImagesResponse> {
+  const params = new URLSearchParams();
+  
+  // Automatically add active site filter if not explicitly provided
+  if (!filters.site_id) {
+    const activeSiteId = getActiveSiteId();
+    if (activeSiteId) {
+      filters.site_id = activeSiteId;
+    }
+  }
+
+  // Automatically add active sector filter if not explicitly provided
+  if (filters.sector_id === undefined) {
+    const activeSectorId = getActiveSectorId();
+    if (activeSectorId !== null && activeSectorId !== undefined) {
+      filters.sector_id = activeSectorId;
+    }
+  }
+
+  if (filters.site_id) params.append('site_id', filters.site_id.toString());
+  if (filters.sector_id) params.append('sector_id', filters.sector_id.toString());
+  
+  const queryString = params.toString();
+  return fetchAPI(`/v1/writer/images/content_images/${queryString ? `?${queryString}` : ''}`);
 }
 
 export async function bulkUpdateImagesStatus(contentId: number, status: string): Promise<{ updated_count: number }> {