Section 2 COmpleted

frontend/src/pages/Setup/IndustriesSectorsKeywords.tsx

@@ -6,6 +6,7 @@
  */
 
 import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
 import PageMeta from '../../components/common/PageMeta';
 import PageHeader from '../../components/common/PageHeader';
 import { useToast } from '../../components/ui/toast/ToastContainer';
@@ -60,6 +61,14 @@ export default function IndustriesSectorsKeywords() {
   const [searchTerm, setSearchTerm] = useState('');
   const [countryFilter, setCountryFilter] = useState('');
   const [difficultyFilter, setDifficultyFilter] = useState('');
+  const [showNotAddedOnly, setShowNotAddedOnly] = useState(false);
+  
+  // Keyword count tracking
+  const [addedCount, setAddedCount] = useState(0);
+  const [availableCount, setAvailableCount] = useState(0);
+  
+  // Navigation
+  const navigate = useNavigate();
 
   // Import modal state
   const [isImportModalOpen, setIsImportModalOpen] = useState(false);
@@ -183,6 +192,17 @@ export default function IndustriesSectorsKeywords() {
         };
       });
       
+      // Calculate counts before applying filters
+      const totalAdded = filteredResults.filter(sk => sk.isAdded).length;
+      const totalAvailable = filteredResults.filter(sk => !sk.isAdded).length;
+      setAddedCount(totalAdded);
+      setAvailableCount(totalAvailable);
+      
+      // Apply "not yet added" filter
+      if (showNotAddedOnly) {
+        filteredResults = filteredResults.filter(sk => !sk.isAdded);
+      }
+      
       // Apply difficulty filter
       if (difficultyFilter) {
         const difficultyNum = parseInt(difficultyFilter);
@@ -245,8 +265,10 @@ export default function IndustriesSectorsKeywords() {
       setSeedKeywords([]);
       setTotalCount(0);
       setTotalPages(1);
+      setAddedCount(0);
+      setAvailableCount(0);
     }
-  }, [activeSite, activeSector, currentPage, pageSize, searchTerm, countryFilter, difficultyFilter, sortBy, sortDirection, toast]);
+  }, [activeSite, activeSector, currentPage, pageSize, searchTerm, countryFilter, difficultyFilter, showNotAddedOnly, sortBy, sortDirection, toast]);
 
   // Load data on mount and when filters change
   useEffect(() => {
@@ -598,6 +620,15 @@ export default function IndustriesSectorsKeywords() {
             { value: '5', label: '5 - Very Hard' },
           ],
         },
+        {
+          key: 'showNotAddedOnly',
+          label: 'Status',
+          type: 'select' as const,
+          options: [
+            { value: '', label: 'All Keywords' },
+            { value: 'true', label: 'Not Yet Added Only' },
+          ],
+        },
       ],
       bulkActions: !activeSector ? [] : [
         {
@@ -673,6 +704,45 @@ export default function IndustriesSectorsKeywords() {
         </div>
       )}
       
+      {/* Keyword Count Summary & Next Step CTA */}
+      {activeSite && activeSector && (
+        <div className="mx-6 mt-6 mb-4">
+          <div className="flex flex-wrap items-center justify-between gap-4 p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
+            <div className="flex items-center gap-6">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                  <span className="text-green-600 dark:text-green-400 font-bold">{addedCount}</span> keywords in your workflow
+                </span>
+              </div>
+              <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 hidden sm:block" />
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                  <span className="text-blue-600 dark:text-blue-400 font-bold">{availableCount}</span> available to add
+                </span>
+              </div>
+            </div>
+            {addedCount > 0 && (
+              <Button
+                variant="success"
+                size="sm"
+                onClick={() => navigate('/planner/keywords')}
+                endIcon={
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                  </svg>
+                }
+              >
+                Next: Plan Your Content
+              </Button>
+            )}
+          </div>
+          {/* Coming Soon Teaser */}
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-2 text-center">
+            Looking for more keywords? Keyword Research coming soon!
+          </p>
+        </div>
+      )}
+      
       <TablePageTemplate
         columns={pageConfig.columns}
         data={seedKeywords}
@@ -683,6 +753,7 @@ export default function IndustriesSectorsKeywords() {
           search: searchTerm,
           country: countryFilter,
           difficulty: difficultyFilter,
+          showNotAddedOnly: showNotAddedOnly ? 'true' : '',
         }}
         onFilterChange={(key, value) => {
           const stringValue = value === null || value === undefined ? '' : String(value);
@@ -695,6 +766,9 @@ export default function IndustriesSectorsKeywords() {
           } else if (key === 'difficulty') {
             setDifficultyFilter(stringValue);
             setCurrentPage(1);
+          } else if (key === 'showNotAddedOnly') {
+            setShowNotAddedOnly(stringValue === 'true');
+            setCurrentPage(1);
           }
         }}
         onBulkAction={async (actionKey: string, ids: string[]) => {