fixes but still nto fixed

frontend/src/pages/Planner/Ideas.tsx

@@ -19,6 +19,8 @@ import {
   ContentIdeaCreateData,
   fetchClusters,
   Cluster,
+  fetchPlannerIdeasFilterOptions,
+  FilterOption,
 } from '../../services/api';
 import FormModal from '../../components/common/FormModal';
 import ProgressModal from '../../components/common/ProgressModal';
@@ -49,6 +51,12 @@ export default function Ideas() {
   const [totalPending, setTotalPending] = useState(0);
   const [totalImagesCount, setTotalImagesCount] = useState(0);
 
+  // Dynamic filter options
+  const [statusOptions, setStatusOptions] = useState<FilterOption[]>([]);
+  const [contentTypeOptions, setContentTypeOptions] = useState<FilterOption[]>([]);
+  const [contentStructureOptions, setContentStructureOptions] = useState<FilterOption[]>([]);
+  const [clusterOptions, setClusterOptions] = useState<FilterOption[]>([]);
+
   // Filter state
   const [searchTerm, setSearchTerm] = useState('');
   const [statusFilter, setStatusFilter] = useState('');
@@ -85,7 +93,7 @@ export default function Ideas() {
   // Progress modal for AI functions
   const progressModal = useProgressModal();
 
-  // Load clusters for filter dropdown
+  // Load clusters for form dropdown (all clusters)
   useEffect(() => {
     const loadClusters = async () => {
       try {
@@ -98,6 +106,26 @@ export default function Ideas() {
     loadClusters();
   }, []);
 
+  // Load dynamic filter options based on current site's data
+  const loadFilterOptions = useCallback(async () => {
+    if (!activeSite) return;
+    
+    try {
+      const options = await fetchPlannerIdeasFilterOptions(activeSite.id);
+      setStatusOptions(options.statuses || []);
+      setContentTypeOptions(options.content_types || []);
+      setContentStructureOptions(options.content_structures || []);
+      setClusterOptions(options.clusters || []);
+    } catch (error) {
+      console.error('Error loading filter options:', error);
+    }
+  }, [activeSite]);
+
+  // Load filter options when site changes
+  useEffect(() => {
+    loadFilterOptions();
+  }, [loadFilterOptions]);
+
   // Load total metrics for footer widget (site-wide totals, no sector filter)
   const loadTotalMetrics = useCallback(async () => {
     try {
@@ -302,8 +330,13 @@ export default function Ideas() {
       typeFilter,
       setTypeFilter,
       setCurrentPage,
+      // Dynamic filter options
+      statusOptions,
+      contentTypeOptions,
+      contentStructureOptions,
+      clusterOptions,
     });
-  }, [clusters, activeSector, formData, searchTerm, statusFilter, clusterFilter, structureFilter, typeFilter]);
+  }, [clusters, activeSector, formData, searchTerm, statusFilter, clusterFilter, structureFilter, typeFilter, statusOptions, contentTypeOptions, contentStructureOptions, clusterOptions]);
 
   // Calculate header metrics - use totalInTasks/totalPending from API calls (not page data)
   // This ensures metrics show correct totals across all pages, not just current page

frontend/src/pages/Planner/Keywords.tsx

@@ -60,6 +60,7 @@ export default function Keywords() {
   const [countryOptions, setCountryOptions] = useState<FilterOption[]>([]);
   const [statusOptions, setStatusOptions] = useState<FilterOption[]>([]);
   const [clusterOptions, setClusterOptions] = useState<FilterOption[]>([]);
+  const [difficultyOptions, setDifficultyOptions] = useState<FilterOption[]>([]);
 
   // Filter state - match Keywords.tsx
   const [searchTerm, setSearchTerm] = useState('');
@@ -123,24 +124,62 @@ export default function Keywords() {
     loadClusters();
   }, []);
 
-  // Load dynamic filter options based on current site's data
-  const loadFilterOptions = useCallback(async () => {
+  // Load dynamic filter options based on current site's data and applied filters
+  // This implements cascading filters - each filter's options reflect what's available
+  // given the other currently applied filters
+  const loadFilterOptions = useCallback(async (currentFilters?: {
+    status?: string;
+    country?: string;
+    cluster_id?: string;
+    difficulty_min?: number;
+    difficulty_max?: number;
+  }) => {
     if (!activeSite) return;
     
     try {
-      const options = await fetchPlannerKeywordFilterOptions(activeSite.id);
+      const options = await fetchPlannerKeywordFilterOptions(activeSite.id, currentFilters);
       setCountryOptions(options.countries || []);
       setStatusOptions(options.statuses || []);
       setClusterOptions(options.clusters || []);
+      setDifficultyOptions(options.difficulties || []);
     } catch (error) {
       console.error('Error loading filter options:', error);
     }
   }, [activeSite]);
 
-  // Load filter options when site changes
+  // Parse difficulty filter to min/max values
+  // Backend uses: 1=0-10, 2=11-30, 3=31-50, 4=51-70, 5=71-100
+  const getDifficultyRange = useCallback((filter: string): { min?: number; max?: number } => {
+    if (!filter) return {};
+    const level = parseInt(filter, 10);
+    if (isNaN(level)) return {};
+    // Map difficulty level to raw difficulty range matching backend logic
+    const ranges: Record<number, { min: number; max: number }> = {
+      1: { min: 0, max: 10 },
+      2: { min: 11, max: 30 },
+      3: { min: 31, max: 50 },
+      4: { min: 51, max: 70 },
+      5: { min: 71, max: 100 },
+    };
+    return ranges[level] || {};
+  }, []);
+
+  // Load filter options when site changes (initial load with no filters)
   useEffect(() => {
     loadFilterOptions();
-  }, [loadFilterOptions]);
+  }, [activeSite]);
+
+  // Reload filter options when any filter changes (cascading filters)
+  useEffect(() => {
+    const { min: difficultyMin, max: difficultyMax } = getDifficultyRange(difficultyFilter);
+    loadFilterOptions({
+      status: statusFilter || undefined,
+      country: countryFilter || undefined,
+      cluster_id: clusterFilter || undefined,
+      difficulty_min: difficultyMin,
+      difficulty_max: difficultyMax,
+    });
+  }, [statusFilter, countryFilter, clusterFilter, difficultyFilter, loadFilterOptions, getDifficultyRange]);
 
   // Load total metrics for footer widget (site-wide totals, no sector filter)
   const loadTotalMetrics = useCallback(async () => {
@@ -553,6 +592,7 @@ export default function Keywords() {
       countryOptions,
       statusOptions,
       clusterOptions,
+      difficultyOptions,
     });
   }, [
     clusters,
@@ -573,6 +613,7 @@ export default function Keywords() {
     countryOptions,
     statusOptions,
     clusterOptions,
+    difficultyOptions,
   ]);
 
   // Calculate header metrics - use totalClustered/totalUnmapped from API calls (not page data)
@@ -715,7 +756,7 @@ export default function Keywords() {
           status: statusFilter,
           country: countryFilter,
           difficulty: difficultyFilter,
-          cluster_id: clusterFilter,
+          cluster: clusterFilter,
           volumeMin: volumeMin,
           volumeMax: volumeMax,
         }}
@@ -741,7 +782,7 @@ export default function Keywords() {
           } else if (key === 'difficulty') {
             setDifficultyFilter(stringValue);
             setCurrentPage(1);
-          } else if (key === 'cluster_id') {
+          } else if (key === 'cluster') {
             setClusterFilter(stringValue);
             setCurrentPage(1);
           }