1367 lines
47 KiB
TypeScript
1367 lines
47 KiB
TypeScript
/**
|
|
* Keyword Library Page (formerly Add Keywords)
|
|
* Browse global seed keywords filtered by site's industry and sectors
|
|
* Add keywords to workflow (creates Keywords records in planner)
|
|
* Features: High Opportunity Keywords section, Browse all keywords, CSV import
|
|
* Coming soon: Ahrefs keyword research integration (March/April 2026)
|
|
*/
|
|
|
|
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';
|
|
import { usePageLoading } from '../../context/PageLoadingContext';
|
|
import WorkflowGuide from '../../components/onboarding/WorkflowGuide';
|
|
import {
|
|
fetchSeedKeywords,
|
|
SeedKeyword,
|
|
SeedKeywordResponse,
|
|
fetchSites,
|
|
Site,
|
|
addSeedKeywordsToWorkflow,
|
|
fetchSiteSectors,
|
|
fetchIndustries,
|
|
fetchKeywords,
|
|
} from '../../services/api';
|
|
import Badge from '../../components/ui/badge/Badge';
|
|
import { BoltIcon, PlusIcon, CheckCircleIcon, ShootingStarIcon, DocsIcon } from '../../icons';
|
|
import TablePageTemplate from '../../templates/TablePageTemplate';
|
|
import { usePageSizeStore } from '../../store/pageSizeStore';
|
|
import { getDifficultyNumber, getDifficultyRange, getDifficultyLabelFromNumber } from '../../utils/difficulty';
|
|
import { useSiteStore } from '../../store/siteStore';
|
|
import { useSectorStore } from '../../store/sectorStore';
|
|
import { useAuthStore } from '../../store/authStore';
|
|
import Button from '../../components/ui/button/Button';
|
|
import { Modal } from '../../components/ui/modal';
|
|
import FileInput from '../../components/form/input/FileInput';
|
|
import Label from '../../components/form/Label';
|
|
import { Card } from '../../components/ui/card';
|
|
import { Spinner } from '../../components/ui/spinner/Spinner';
|
|
|
|
// High Opportunity Keywords types
|
|
interface SectorKeywordOption {
|
|
type: 'high-volume' | 'low-difficulty';
|
|
label: string;
|
|
keywords: SeedKeyword[];
|
|
added: boolean;
|
|
keywordCount: number;
|
|
}
|
|
|
|
interface SectorKeywordData {
|
|
sectorSlug: string;
|
|
sectorName: string;
|
|
sectorId: number;
|
|
options: SectorKeywordOption[];
|
|
}
|
|
|
|
export default function IndustriesSectorsKeywords() {
|
|
const toast = useToast();
|
|
const { startLoading, stopLoading } = usePageLoading();
|
|
const { activeSite } = useSiteStore();
|
|
const { activeSector, loadSectorsForSite } = useSectorStore();
|
|
const { pageSize } = usePageSizeStore();
|
|
const { user } = useAuthStore();
|
|
|
|
// Data state
|
|
const [sites, setSites] = useState<Site[]>([]);
|
|
const [seedKeywords, setSeedKeywords] = useState<(SeedKeyword & { isAdded?: boolean })[]>([]);
|
|
const [showContent, setShowContent] = useState(false);
|
|
const [selectedIds, setSelectedIds] = useState<string[]>([]);
|
|
// Track recently added keywords to preserve their state during reload
|
|
const recentlyAddedRef = useRef<Set<number>>(new Set());
|
|
|
|
// High Opportunity Keywords state
|
|
const [showHighOpportunity, setShowHighOpportunity] = useState(true);
|
|
const [loadingOpportunityKeywords, setLoadingOpportunityKeywords] = useState(false);
|
|
const [highOpportunityLoaded, setHighOpportunityLoaded] = useState(false);
|
|
const [sectorKeywordData, setSectorKeywordData] = useState<SectorKeywordData[]>([]);
|
|
const [addingOption, setAddingOption] = useState<string | null>(null);
|
|
|
|
// Browse table state
|
|
const [showBrowseTable, setShowBrowseTable] = useState(false);
|
|
|
|
// Ahrefs banner state
|
|
const [showAhrefsBanner, setShowAhrefsBanner] = useState(true);
|
|
|
|
// Pagination state
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [totalPages, setTotalPages] = useState(1);
|
|
const [totalCount, setTotalCount] = useState(0);
|
|
|
|
// Sorting state
|
|
const [sortBy, setSortBy] = useState<string>('keyword');
|
|
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
|
|
|
|
// Filter state
|
|
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);
|
|
const [isImporting, setIsImporting] = useState(false);
|
|
const [importFile, setImportFile] = useState<File | null>(null);
|
|
|
|
// Load sites on mount
|
|
useEffect(() => {
|
|
loadInitialData();
|
|
}, []);
|
|
|
|
const loadInitialData = async () => {
|
|
try {
|
|
startLoading('Loading...');
|
|
const response = await fetchSites();
|
|
const activeSites = (response.results || []).filter(site => site.is_active);
|
|
setSites(activeSites);
|
|
// Don't stop loading here - let High Opportunity Keywords loading finish
|
|
} catch (error: any) {
|
|
toast.error(`Failed to load sites: ${error.message}`);
|
|
stopLoading();
|
|
}
|
|
};
|
|
|
|
// Handle site added from WorkflowGuide
|
|
const handleSiteAdded = () => {
|
|
loadInitialData();
|
|
};
|
|
|
|
// Load High Opportunity Keywords for active site
|
|
const loadHighOpportunityKeywords = useCallback(async () => {
|
|
if (!activeSite || !activeSite.industry) {
|
|
setSectorKeywordData([]);
|
|
return;
|
|
}
|
|
|
|
setLoadingOpportunityKeywords(true);
|
|
|
|
try {
|
|
// 1. Get site sectors
|
|
const siteSectors = await fetchSiteSectors(activeSite.id);
|
|
|
|
// 2. Get industry data
|
|
const industriesResponse = await fetchIndustries();
|
|
const industry = industriesResponse.industries?.find(
|
|
i => i.id === activeSite.industry || i.slug === activeSite.industry_slug
|
|
);
|
|
|
|
if (!industry?.id) {
|
|
console.warn('Could not find industry information');
|
|
setSectorKeywordData([]);
|
|
return;
|
|
}
|
|
|
|
// 3. Get already-attached keywords to mark as added
|
|
const attachedSeedKeywordIds = new Set<number>();
|
|
for (const sector of siteSectors) {
|
|
try {
|
|
const keywordsData = await fetchKeywords({
|
|
site_id: activeSite.id,
|
|
sector_id: sector.id,
|
|
page_size: 1000,
|
|
});
|
|
(keywordsData.results || []).forEach((k: any) => {
|
|
const seedKeywordId = k.seed_keyword_id || (k.seed_keyword && k.seed_keyword.id);
|
|
if (seedKeywordId) {
|
|
attachedSeedKeywordIds.add(Number(seedKeywordId));
|
|
}
|
|
});
|
|
} catch (err) {
|
|
console.warn(`Could not fetch attached keywords for sector ${sector.id}:`, err);
|
|
}
|
|
}
|
|
|
|
// 4. Build sector keyword data
|
|
const sectorData: SectorKeywordData[] = [];
|
|
|
|
for (const siteSector of siteSectors) {
|
|
if (!siteSector.is_active) continue;
|
|
|
|
// Fetch all keywords for this sector
|
|
const response = await fetchSeedKeywords({
|
|
industry: industry.id,
|
|
sector: siteSector.industry_sector,
|
|
page_size: 500,
|
|
});
|
|
|
|
const sectorKeywords = response.results;
|
|
|
|
// Top 50 by highest volume
|
|
const highVolumeKeywords = [...sectorKeywords]
|
|
.sort((a, b) => (b.volume || 0) - (a.volume || 0))
|
|
.slice(0, 50);
|
|
|
|
// Top 50 by lowest difficulty - exclude keywords already in high volume to avoid duplicates
|
|
const highVolumeIds = new Set(highVolumeKeywords.map(kw => kw.id));
|
|
const lowDifficultyKeywords = [...sectorKeywords]
|
|
.filter(kw => !highVolumeIds.has(kw.id)) // Exclude duplicates from high volume
|
|
.sort((a, b) => (a.difficulty || 100) - (b.difficulty || 100))
|
|
.slice(0, 50);
|
|
|
|
// Check if all keywords in each option are already added
|
|
const hvAdded = highVolumeKeywords.length > 0 && highVolumeKeywords.every(kw =>
|
|
attachedSeedKeywordIds.has(Number(kw.id))
|
|
);
|
|
const ldAdded = lowDifficultyKeywords.length > 0 && lowDifficultyKeywords.every(kw =>
|
|
attachedSeedKeywordIds.has(Number(kw.id))
|
|
);
|
|
|
|
sectorData.push({
|
|
sectorSlug: siteSector.slug,
|
|
sectorName: siteSector.name,
|
|
sectorId: siteSector.id,
|
|
options: [
|
|
{
|
|
type: 'high-volume',
|
|
label: 'Top 50 High Volume',
|
|
keywords: highVolumeKeywords,
|
|
added: hvAdded,
|
|
keywordCount: highVolumeKeywords.length,
|
|
},
|
|
{
|
|
type: 'low-difficulty',
|
|
label: 'Top 50 Low Difficulty',
|
|
keywords: lowDifficultyKeywords,
|
|
added: ldAdded,
|
|
keywordCount: lowDifficultyKeywords.length,
|
|
},
|
|
],
|
|
});
|
|
}
|
|
|
|
setSectorKeywordData(sectorData);
|
|
setHighOpportunityLoaded(true);
|
|
stopLoading(); // Stop global loading spinner after High Opportunity is ready
|
|
} catch (error: any) {
|
|
console.error('Failed to load high opportunity keywords:', error);
|
|
toast.error(`Failed to load high opportunity keywords: ${error.message}`);
|
|
setHighOpportunityLoaded(true); // Still mark as loaded even on error
|
|
stopLoading(); // Stop spinner even on error
|
|
} finally {
|
|
setLoadingOpportunityKeywords(false);
|
|
}
|
|
}, [activeSite, toast, stopLoading]);
|
|
|
|
// Load sectors for active site
|
|
useEffect(() => {
|
|
if (activeSite?.id) {
|
|
loadSectorsForSite(activeSite.id);
|
|
}
|
|
}, [activeSite?.id, loadSectorsForSite]);
|
|
|
|
// Load High Opportunity Keywords when site changes
|
|
useEffect(() => {
|
|
if (activeSite && activeSite.id && showHighOpportunity) {
|
|
loadHighOpportunityKeywords();
|
|
}
|
|
}, [activeSite?.id, showHighOpportunity, loadHighOpportunityKeywords]);
|
|
|
|
// Load keyword counts for display (lightweight - just get count from API)
|
|
const loadKeywordCounts = useCallback(async () => {
|
|
if (!activeSite || !activeSite.industry) {
|
|
setAddedCount(0);
|
|
setAvailableCount(0);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Get attached keywords count
|
|
const sectors = await fetchSiteSectors(activeSite.id);
|
|
let totalAdded = 0;
|
|
|
|
for (const sector of sectors) {
|
|
try {
|
|
const keywordsData = await fetchKeywords({
|
|
site_id: activeSite.id,
|
|
sector_id: sector.id,
|
|
page_size: 1,
|
|
});
|
|
totalAdded += keywordsData.count || 0;
|
|
} catch (err) {
|
|
console.warn(`Could not fetch keyword count for sector ${sector.id}:`, err);
|
|
}
|
|
}
|
|
|
|
// Get total available keywords from API
|
|
const filters: any = {
|
|
industry: activeSite.industry,
|
|
page_size: 1,
|
|
page: 1,
|
|
};
|
|
|
|
if (activeSector && activeSector.industry_sector) {
|
|
filters.sector = activeSector.industry_sector;
|
|
}
|
|
|
|
const data = await fetchSeedKeywords(filters);
|
|
const totalAvailable = data.count || 0;
|
|
|
|
setAddedCount(totalAdded);
|
|
setAvailableCount(totalAvailable);
|
|
} catch (err) {
|
|
console.warn('Could not fetch keyword counts:', err);
|
|
}
|
|
}, [activeSite, activeSector]);
|
|
|
|
// Load counts on mount and when site/sector changes
|
|
useEffect(() => {
|
|
if (activeSite) {
|
|
loadKeywordCounts();
|
|
}
|
|
}, [activeSite, activeSector, loadKeywordCounts]);
|
|
|
|
// Load seed keywords with optimized API pagination - only load current page
|
|
const loadSeedKeywords = useCallback(async () => {
|
|
if (!activeSite || !activeSite.industry) {
|
|
setSeedKeywords([]);
|
|
setTotalCount(0);
|
|
setTotalPages(1);
|
|
setShowContent(true);
|
|
return;
|
|
}
|
|
|
|
setShowContent(false);
|
|
|
|
try {
|
|
// Get already-attached keywords for marking (lightweight check)
|
|
const attachedSeedKeywordIds = new Set<number>();
|
|
try {
|
|
const sectors = await fetchSiteSectors(activeSite.id);
|
|
|
|
// Check keywords in all sectors (needed for isAdded flag)
|
|
for (const sector of sectors) {
|
|
try {
|
|
const keywordsData = await fetchKeywords({
|
|
site_id: activeSite.id,
|
|
sector_id: sector.id,
|
|
page_size: 1000,
|
|
});
|
|
(keywordsData.results || []).forEach((k: any) => {
|
|
const seedKeywordId = k.seed_keyword_id || (k.seed_keyword && k.seed_keyword.id);
|
|
if (seedKeywordId) {
|
|
attachedSeedKeywordIds.add(Number(seedKeywordId));
|
|
}
|
|
});
|
|
} catch (err) {
|
|
console.warn(`Could not fetch attached keywords for sector ${sector.id}:`, err);
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.warn('Could not fetch sectors or attached keywords:', err);
|
|
}
|
|
|
|
// Build API filters - use server-side pagination
|
|
const pageSizeNum = pageSize || 25;
|
|
const filters: any = {
|
|
industry: activeSite.industry,
|
|
page_size: pageSizeNum,
|
|
page: currentPage,
|
|
};
|
|
|
|
// Add sector filter if active sector is selected
|
|
if (activeSector && activeSector.industry_sector) {
|
|
filters.sector = activeSector.industry_sector;
|
|
}
|
|
|
|
if (searchTerm) filters.search = searchTerm;
|
|
if (countryFilter) filters.country = countryFilter;
|
|
|
|
// Apply difficulty filter (if API supports it, otherwise we'll filter client-side)
|
|
if (difficultyFilter) {
|
|
const difficultyNum = parseInt(difficultyFilter);
|
|
const label = getDifficultyLabelFromNumber(difficultyNum);
|
|
if (label !== null) {
|
|
const range = getDifficultyRange(label);
|
|
if (range) {
|
|
filters.difficulty_min = range.min;
|
|
filters.difficulty_max = range.max;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Add sorting to API request
|
|
if (sortBy && sortDirection) {
|
|
const sortPrefix = sortDirection === 'desc' ? '-' : '';
|
|
filters.ordering = `${sortPrefix}${sortBy}`;
|
|
}
|
|
|
|
// Fetch only current page from API
|
|
const data: SeedKeywordResponse = await fetchSeedKeywords(filters);
|
|
|
|
// Mark already-attached keywords
|
|
const results = (data.results || []).map(sk => {
|
|
const isAdded = attachedSeedKeywordIds.has(Number(sk.id)) || recentlyAddedRef.current.has(Number(sk.id));
|
|
return {
|
|
...sk,
|
|
isAdded: Boolean(isAdded)
|
|
};
|
|
});
|
|
|
|
// Calculate counts from API response
|
|
const apiTotalCount = data.count || 0;
|
|
|
|
// For added count, we need to check all attached keywords
|
|
const totalAdded = attachedSeedKeywordIds.size;
|
|
const actualAvailable = apiTotalCount;
|
|
|
|
setAddedCount(totalAdded);
|
|
setAvailableCount(actualAvailable);
|
|
|
|
// Apply "not yet added" filter client-side (if API doesn't support it)
|
|
let filteredResults = results;
|
|
if (showNotAddedOnly) {
|
|
filteredResults = results.filter(sk => !sk.isAdded);
|
|
}
|
|
|
|
setSeedKeywords(filteredResults);
|
|
setTotalCount(apiTotalCount);
|
|
setTotalPages(Math.ceil(apiTotalCount / pageSizeNum));
|
|
|
|
setShowContent(true);
|
|
} catch (error: any) {
|
|
console.error('Error loading seed keywords:', error);
|
|
toast.error(`Failed to load keywords: ${error.message}`);
|
|
setSeedKeywords([]);
|
|
setTotalCount(0);
|
|
setTotalPages(1);
|
|
setAddedCount(0);
|
|
setAvailableCount(0);
|
|
setShowContent(true);
|
|
}
|
|
}, [activeSite, activeSector, currentPage, pageSize, searchTerm, countryFilter, difficultyFilter, showNotAddedOnly, sortBy, sortDirection, toast]);
|
|
|
|
// Load data only when browse table is shown and filters change
|
|
useEffect(() => {
|
|
if (activeSite && showBrowseTable) {
|
|
loadSeedKeywords();
|
|
}
|
|
}, [loadSeedKeywords, activeSite, showBrowseTable]);
|
|
|
|
// Debounced search
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setCurrentPage(1);
|
|
}, 500);
|
|
return () => clearTimeout(timer);
|
|
}, [searchTerm]);
|
|
|
|
// Reset to page 1 on pageSize change
|
|
useEffect(() => {
|
|
setCurrentPage(1);
|
|
}, [pageSize]);
|
|
|
|
// Handle sorting
|
|
const handleSort = (field: string, direction: 'asc' | 'desc') => {
|
|
setSortBy(field || 'keyword');
|
|
setSortDirection(direction);
|
|
setCurrentPage(1);
|
|
};
|
|
|
|
// Handle adding keywords to workflow
|
|
const handleAddToWorkflow = useCallback(async (seedKeywordIds: number[]) => {
|
|
if (!activeSite) {
|
|
toast.error('Please select an active site first');
|
|
return;
|
|
}
|
|
|
|
// Get sector to use
|
|
let sectorToUse = activeSector;
|
|
if (!sectorToUse) {
|
|
try {
|
|
const { fetchSiteSectors } = await import('../../services/api');
|
|
const sectors = await fetchSiteSectors(activeSite.id);
|
|
if (sectors.length === 0) {
|
|
toast.error('No sectors available for this site. Please create a sector first.');
|
|
return;
|
|
}
|
|
sectorToUse = {
|
|
id: sectors[0].id,
|
|
name: sectors[0].name,
|
|
slug: sectors[0].slug,
|
|
site_id: activeSite.id,
|
|
is_active: sectors[0].is_active !== false,
|
|
industry_sector: sectors[0].industry_sector || null,
|
|
};
|
|
} catch (error: any) {
|
|
toast.error(`Failed to get sectors: ${error.message}`);
|
|
return;
|
|
}
|
|
}
|
|
|
|
try {
|
|
const result = await addSeedKeywordsToWorkflow(
|
|
seedKeywordIds,
|
|
activeSite.id,
|
|
sectorToUse.id
|
|
);
|
|
|
|
if (result.success) {
|
|
// Show success message with created count
|
|
if (result.created > 0) {
|
|
toast.success(`Successfully added ${result.created} keyword(s) to workflow`);
|
|
}
|
|
|
|
// Show skipped count if any
|
|
if (result.skipped > 0) {
|
|
toast.warning(`${result.skipped} keyword(s) were skipped (already exist or validation failed)`);
|
|
}
|
|
|
|
// Show detailed errors if any
|
|
if (result.errors && result.errors.length > 0) {
|
|
result.errors.forEach((error: string) => {
|
|
toast.error(error);
|
|
});
|
|
}
|
|
|
|
// Only track and mark as added if actually created
|
|
if (result.created > 0) {
|
|
// Track as recently added
|
|
seedKeywordIds.forEach(id => {
|
|
recentlyAddedRef.current.add(id);
|
|
});
|
|
|
|
// Update state - mark as added
|
|
setSeedKeywords(prevKeywords =>
|
|
prevKeywords.map(kw =>
|
|
seedKeywordIds.includes(kw.id)
|
|
? { ...kw, isAdded: true }
|
|
: kw
|
|
)
|
|
);
|
|
}
|
|
|
|
// Clear selection
|
|
setSelectedIds([]);
|
|
} else {
|
|
// Show user-friendly error message (errors array already contains clean messages)
|
|
const errorMsg = result.errors?.[0] || 'Unable to add keywords. Please try again.';
|
|
toast.error(errorMsg);
|
|
}
|
|
} catch (error: any) {
|
|
// Show user-friendly error message (error.message is already cleaned)
|
|
toast.error(error.message || 'Unable to add keywords. Please try again.');
|
|
}
|
|
}, [activeSite, activeSector, toast]);
|
|
|
|
// Handle bulk add selected
|
|
const handleBulkAddSelected = useCallback(async (ids: string[]) => {
|
|
if (ids.length === 0) {
|
|
toast.error('Please select at least one keyword');
|
|
return;
|
|
}
|
|
|
|
// Filter out already added keywords
|
|
const availableIds = ids.filter(id => {
|
|
const keyword = seedKeywords.find(sk => String(sk.id) === id);
|
|
return keyword && !keyword.isAdded;
|
|
});
|
|
|
|
if (availableIds.length === 0) {
|
|
toast.error('All selected keywords are already added to workflow');
|
|
return;
|
|
}
|
|
|
|
if (availableIds.length < ids.length) {
|
|
toast.info(`${ids.length - availableIds.length} keyword(s) were already added and were skipped`);
|
|
}
|
|
|
|
const seedKeywordIds = availableIds.map(id => parseInt(id));
|
|
await handleAddToWorkflow(seedKeywordIds);
|
|
}, [handleAddToWorkflow, toast, seedKeywords]);
|
|
|
|
// Handle add all
|
|
const handleAddAll = useCallback(async () => {
|
|
if (!activeSite || !activeSite.industry) {
|
|
toast.error('Please select an active site first');
|
|
return;
|
|
}
|
|
|
|
const availableKeywords = seedKeywords.filter(sk => !sk.isAdded);
|
|
|
|
if (availableKeywords.length === 0) {
|
|
toast.error('All keywords are already added to workflow');
|
|
return;
|
|
}
|
|
|
|
const seedKeywordIds = availableKeywords.map(sk => sk.id);
|
|
await handleAddToWorkflow(seedKeywordIds);
|
|
}, [activeSite, seedKeywords, handleAddToWorkflow, toast]);
|
|
|
|
// Handle import click
|
|
const handleImportClick = useCallback(() => {
|
|
setIsImportModalOpen(true);
|
|
}, []);
|
|
|
|
// Handle adding High Opportunity Keywords for a sector
|
|
const handleAddSectorKeywords = useCallback(async (
|
|
sectorSlug: string,
|
|
optionType: 'high-volume' | 'low-difficulty'
|
|
) => {
|
|
const sector = sectorKeywordData.find(s => s.sectorSlug === sectorSlug);
|
|
if (!sector || !activeSite) return;
|
|
|
|
const option = sector.options.find(o => o.type === optionType);
|
|
if (!option || option.added || option.keywords.length === 0) return;
|
|
|
|
const addingKey = `${sectorSlug}-${optionType}`;
|
|
setAddingOption(addingKey);
|
|
|
|
try {
|
|
// Get currently attached keywords to filter out duplicates
|
|
const attachedSeedKeywordIds = new Set<number>();
|
|
try {
|
|
const sectors = await fetchSiteSectors(activeSite.id);
|
|
for (const s of sectors) {
|
|
try {
|
|
const keywordsData = await fetchKeywords({
|
|
site_id: activeSite.id,
|
|
sector_id: s.id,
|
|
page_size: 1000,
|
|
});
|
|
(keywordsData.results || []).forEach((k: any) => {
|
|
const seedKeywordId = k.seed_keyword_id || (k.seed_keyword && k.seed_keyword.id);
|
|
if (seedKeywordId) {
|
|
attachedSeedKeywordIds.add(Number(seedKeywordId));
|
|
}
|
|
});
|
|
} catch (err) {
|
|
console.warn(`Could not fetch attached keywords for sector ${s.id}:`, err);
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.warn('Could not fetch attached keywords:', err);
|
|
}
|
|
|
|
// Filter out already-added keywords
|
|
const seedKeywordIds = option.keywords
|
|
.filter(kw => !attachedSeedKeywordIds.has(Number(kw.id)))
|
|
.map(kw => kw.id);
|
|
|
|
if (seedKeywordIds.length === 0) {
|
|
toast.warning('All keywords from this set are already in your workflow.');
|
|
// Mark as added since all are already there
|
|
setSectorKeywordData(prev =>
|
|
prev.map(s =>
|
|
s.sectorSlug === sectorSlug
|
|
? {
|
|
...s,
|
|
options: s.options.map(o =>
|
|
o.type === optionType ? { ...o, added: true } : o
|
|
),
|
|
}
|
|
: s
|
|
)
|
|
);
|
|
setAddingOption(null);
|
|
return;
|
|
}
|
|
|
|
const result = await addSeedKeywordsToWorkflow(
|
|
seedKeywordIds,
|
|
activeSite.id,
|
|
sector.sectorId
|
|
);
|
|
|
|
if (result.success && result.created > 0) {
|
|
// Mark option as added
|
|
setSectorKeywordData(prev =>
|
|
prev.map(s =>
|
|
s.sectorSlug === sectorSlug
|
|
? {
|
|
...s,
|
|
options: s.options.map(o =>
|
|
o.type === optionType ? { ...o, added: true } : o
|
|
),
|
|
}
|
|
: s
|
|
)
|
|
);
|
|
|
|
let message = `Added ${result.created} keywords to ${sector.sectorName}`;
|
|
if (result.skipped && result.skipped > 0) {
|
|
message += ` (${result.skipped} already exist)`;
|
|
}
|
|
toast.success(message);
|
|
|
|
// Reload the main table to reflect changes
|
|
loadSeedKeywords();
|
|
} else if (result.errors && result.errors.length > 0) {
|
|
toast.error(result.errors[0]);
|
|
} else {
|
|
toast.warning('No keywords were added. They may already exist in your workflow.');
|
|
}
|
|
} catch (err: any) {
|
|
toast.error(err.message || 'Failed to add keywords to workflow');
|
|
} finally {
|
|
setAddingOption(null);
|
|
}
|
|
}, [sectorKeywordData, activeSite, toast, loadSeedKeywords]);
|
|
|
|
// Handle import file upload
|
|
const handleImportSubmit = useCallback(async () => {
|
|
if (!importFile) {
|
|
toast.error('Please select a file to import');
|
|
return;
|
|
}
|
|
|
|
setIsImporting(true);
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('file', importFile);
|
|
|
|
const response = await fetch('/api/v1/auth/seed-keywords/import_seed_keywords/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Token ${localStorage.getItem('authToken')}`,
|
|
},
|
|
body: formData,
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
throw new Error(errorData.error || 'Import failed');
|
|
}
|
|
|
|
const result = await response.json();
|
|
toast.success(`Successfully imported ${result.created || 0} keywords`);
|
|
|
|
// Reset and close modal
|
|
setImportFile(null);
|
|
setIsImportModalOpen(false);
|
|
|
|
// Reload keywords
|
|
if (activeSite) {
|
|
loadSeedKeywords();
|
|
}
|
|
} catch (error: any) {
|
|
console.error('Import error:', error);
|
|
toast.error(`Import failed: ${error.message}`);
|
|
} finally {
|
|
setIsImporting(false);
|
|
}
|
|
}, [importFile, toast, activeSite, loadSeedKeywords]);
|
|
|
|
// Page config
|
|
const pageConfig = useMemo(() => {
|
|
const showSectorColumn = !activeSector;
|
|
|
|
return {
|
|
columns: [
|
|
{
|
|
key: 'keyword',
|
|
label: 'Keyword',
|
|
sortable: true,
|
|
sortField: 'keyword',
|
|
},
|
|
...(showSectorColumn ? [{
|
|
key: 'sector_name',
|
|
label: 'Sector',
|
|
sortable: false,
|
|
render: (_value: string, row: SeedKeyword) => (
|
|
<Badge color="info" size="sm" variant="light">
|
|
{row.sector_name || '-'}
|
|
</Badge>
|
|
),
|
|
}] : []),
|
|
{
|
|
key: 'volume',
|
|
label: 'Volume',
|
|
sortable: true,
|
|
sortField: 'volume',
|
|
render: (value: number) => value.toLocaleString(),
|
|
},
|
|
{
|
|
key: 'difficulty',
|
|
label: 'Difficulty',
|
|
sortable: true,
|
|
sortField: 'difficulty',
|
|
align: 'center' as const,
|
|
render: (value: number) => {
|
|
const difficultyNum = getDifficultyNumber(value);
|
|
const difficultyBadgeVariant = 'light';
|
|
const difficultyBadgeColor =
|
|
typeof difficultyNum === 'number' && difficultyNum === 1
|
|
? 'success'
|
|
: typeof difficultyNum === 'number' && difficultyNum === 2
|
|
? 'success'
|
|
: typeof difficultyNum === 'number' && difficultyNum === 3
|
|
? 'warning'
|
|
: typeof difficultyNum === 'number' && difficultyNum === 4
|
|
? 'error'
|
|
: typeof difficultyNum === 'number' && difficultyNum === 5
|
|
? 'error'
|
|
: 'light';
|
|
return typeof difficultyNum === 'number' ? (
|
|
<Badge
|
|
color={difficultyBadgeColor}
|
|
variant={difficultyBadgeVariant}
|
|
size="sm"
|
|
>
|
|
{difficultyNum}
|
|
</Badge>
|
|
) : (
|
|
difficultyNum
|
|
);
|
|
},
|
|
},
|
|
{
|
|
key: 'country',
|
|
label: 'Country',
|
|
sortable: true,
|
|
sortField: 'country',
|
|
render: (value: string) => {
|
|
return (
|
|
<Badge
|
|
color="info"
|
|
size="sm"
|
|
variant="light"
|
|
>
|
|
{value || '-'}
|
|
</Badge>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
key: 'actions',
|
|
label: '',
|
|
sortable: false,
|
|
align: 'right' as const,
|
|
render: (_value: any, row: SeedKeyword & { isAdded?: boolean }) => {
|
|
const isDisabled = !activeSector || row.isAdded;
|
|
const buttonText = row.isAdded ? 'Added' : 'Add to Workflow';
|
|
|
|
return (
|
|
<div className="flex items-center justify-end gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant={row.isAdded ? 'ghost' : 'primary'}
|
|
disabled={isDisabled}
|
|
onClick={() => {
|
|
if (!row.isAdded && activeSector) {
|
|
handleAddToWorkflow([row.id]);
|
|
}
|
|
}}
|
|
title={!activeSector ? 'Please select a sector first' : ''}
|
|
>
|
|
{buttonText}
|
|
</Button>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
],
|
|
filters: [
|
|
{
|
|
key: 'search',
|
|
label: 'Search',
|
|
type: 'text' as const,
|
|
placeholder: 'Search keywords...',
|
|
},
|
|
{
|
|
key: 'country',
|
|
label: 'Country',
|
|
type: 'select' as const,
|
|
options: [
|
|
{ value: '', label: 'All Countries' },
|
|
{ value: 'US', label: 'United States' },
|
|
{ value: 'CA', label: 'Canada' },
|
|
{ value: 'GB', label: 'United Kingdom' },
|
|
{ value: 'AE', label: 'United Arab Emirates' },
|
|
{ value: 'AU', label: 'Australia' },
|
|
{ value: 'IN', label: 'India' },
|
|
{ value: 'PK', label: 'Pakistan' },
|
|
],
|
|
},
|
|
{
|
|
key: 'difficulty',
|
|
label: 'Difficulty',
|
|
type: 'select' as const,
|
|
options: [
|
|
{ value: '', label: 'All Difficulty' },
|
|
{ value: '1', label: '1 - Very Easy' },
|
|
{ value: '2', label: '2 - Easy' },
|
|
{ value: '3', label: '3 - Medium' },
|
|
{ value: '4', label: '4 - Hard' },
|
|
{ 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 ? [] : [
|
|
{
|
|
key: 'add_selected_to_workflow',
|
|
label: 'Add Selected to Workflow',
|
|
variant: 'primary' as const,
|
|
},
|
|
],
|
|
};
|
|
}, [activeSector, handleAddToWorkflow]);
|
|
|
|
// High Opportunity Keywords Component
|
|
const HighOpportunityKeywordsSection = () => {
|
|
if (!activeSite || sectorKeywordData.length === 0) return null;
|
|
|
|
const addedCount = sectorKeywordData.reduce(
|
|
(acc, s) =>
|
|
acc +
|
|
s.options
|
|
.filter(o => o.added)
|
|
.reduce((sum, o) => sum + o.keywordCount, 0),
|
|
0
|
|
);
|
|
|
|
const totalKeywordCount = sectorKeywordData.reduce(
|
|
(acc, s) => acc + s.options.reduce((sum, o) => sum + o.keywordCount, 0),
|
|
0
|
|
);
|
|
|
|
const allAdded = totalKeywordCount > 0 && addedCount === totalKeywordCount;
|
|
|
|
// Auto-collapse when all keywords are added
|
|
useEffect(() => {
|
|
if (allAdded && showHighOpportunity) {
|
|
// Keep it open for a moment to show success, then collapse
|
|
const timer = setTimeout(() => {
|
|
setShowHighOpportunity(false);
|
|
}, 2000);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [allAdded]);
|
|
|
|
// Show collapsed state with option to expand
|
|
if (!showHighOpportunity) {
|
|
return (
|
|
<div className="mx-6 mt-6 mb-6">
|
|
<Card className="p-4 bg-success-50 dark:bg-success-900/20 border-success-200 dark:border-success-800">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<CheckCircleIcon className="w-5 h-5 text-success-600 dark:text-success-400" />
|
|
<div>
|
|
<h3 className="text-sm font-medium text-success-900 dark:text-success-200">
|
|
Quick-Start Keywords Added Successfully
|
|
</h3>
|
|
<p className="text-xs text-success-700 dark:text-success-300">
|
|
{addedCount} keywords added to your workflow
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
tone="success"
|
|
size="sm"
|
|
onClick={() => setShowHighOpportunity(true)}
|
|
>
|
|
Show Section
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="mx-6 mt-6 mb-6 p-6 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
|
|
{/* Header */}
|
|
<div className="mb-6">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<div className="flex items-center gap-3">
|
|
<h2 className="text-xl font-bold text-gray-900 dark:text-white">
|
|
Quick-Start Keywords — Complimentary
|
|
</h2>
|
|
<Badge tone="brand" variant="soft" size="sm">
|
|
<BoltIcon className="w-3 h-3 mr-1" />
|
|
Pre-Vetted
|
|
</Badge>
|
|
</div>
|
|
{!allAdded && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setShowHighOpportunity(false)}
|
|
>
|
|
Hide
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
Ready-to-use keywords to jumpstart your content — no research needed. Simply add to your workflow and start creating.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Loading State */}
|
|
{loadingOpportunityKeywords ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Spinner size="lg" />
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Sector Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6 items-start">
|
|
{sectorKeywordData.map((sector) => (
|
|
<div key={sector.sectorSlug} className="flex flex-col gap-3">
|
|
{/* Sector Name */}
|
|
<h4 className="text-base font-semibold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
|
|
{sector.sectorName}
|
|
</h4>
|
|
|
|
{/* Options Cards */}
|
|
{sector.options.map((option) => {
|
|
const addingKey = `${sector.sectorSlug}-${option.type}`;
|
|
const isAdding = addingOption === addingKey;
|
|
|
|
return (
|
|
<Card
|
|
key={option.type}
|
|
className={`p-4 transition-all flex flex-col ${
|
|
option.added
|
|
? 'border-success-300 dark:border-success-700 bg-success-50 dark:bg-success-900/20'
|
|
: 'hover:border-brand-300 dark:hover:border-brand-700'
|
|
}`}
|
|
>
|
|
{/* Option Header */}
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div>
|
|
<h5 className="text-sm font-medium text-gray-900 dark:text-white">
|
|
{option.label}
|
|
</h5>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">
|
|
{option.keywordCount} keywords
|
|
</p>
|
|
</div>
|
|
{option.added ? (
|
|
<Badge tone="success" variant="soft" size="sm">
|
|
<CheckCircleIcon className="w-3 h-3 mr-1" />
|
|
Added
|
|
</Badge>
|
|
) : (
|
|
<Button
|
|
variant="primary"
|
|
tone="brand"
|
|
size="xs"
|
|
onClick={() =>
|
|
handleAddSectorKeywords(sector.sectorSlug, option.type)
|
|
}
|
|
disabled={isAdding}
|
|
>
|
|
{isAdding ? 'Adding...' : 'Add All'}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Sample Keywords */}
|
|
<div className="flex flex-wrap gap-1.5 flex-1">
|
|
{option.keywords.slice(0, 3).map((kw) => (
|
|
<Badge
|
|
key={kw.id}
|
|
tone={option.added ? 'success' : 'neutral'}
|
|
variant="soft"
|
|
size="xs"
|
|
className="text-xs"
|
|
>
|
|
{kw.keyword}
|
|
</Badge>
|
|
))}
|
|
{option.keywordCount > 3 && (
|
|
<Badge
|
|
tone="neutral"
|
|
variant="outline"
|
|
size="xs"
|
|
className="text-xs"
|
|
>
|
|
+{option.keywordCount - 3} more
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Success Summary */}
|
|
{addedCount > 0 && (
|
|
<Card className="p-4 bg-success-50 dark:bg-success-900/20 border-success-200 dark:border-success-800">
|
|
<div className="flex items-center gap-3">
|
|
<CheckCircleIcon className="w-5 h-5 text-success-600 dark:text-success-400" />
|
|
<span className="text-sm text-success-700 dark:text-success-300">
|
|
{addedCount} keywords added to your workflow
|
|
</span>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Show WorkflowGuide if no sites and High Opportunity has loaded (to avoid flashing)
|
|
if (highOpportunityLoaded && sites.length === 0) {
|
|
return (
|
|
<>
|
|
<PageMeta title="Keyword Library" description="Browse and add keywords to your workflow" />
|
|
<PageHeader
|
|
title="Keyword Library"
|
|
badge={{ icon: <BoltIcon />, color: 'blue' }}
|
|
/>
|
|
<div className="p-6">
|
|
<WorkflowGuide onSiteAdded={handleSiteAdded} />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<PageMeta title="Keyword Library" description="Browse curated keywords and add them to your workflow. Ahrefs research coming soon." />
|
|
<PageHeader
|
|
title="Keyword Library"
|
|
badge={{ icon: <BoltIcon />, color: 'blue' }}
|
|
/>
|
|
|
|
{/* High Opportunity Keywords Section - Loads First */}
|
|
<HighOpportunityKeywordsSection />
|
|
|
|
{/* Browse Individual Keywords Section - Shows after High Opportunity is loaded */}
|
|
{highOpportunityLoaded && !showBrowseTable && activeSite && (
|
|
<div className="mx-6 mt-6 mb-6">
|
|
<Card className="p-6">
|
|
<div className="text-center">
|
|
<div className="flex items-center justify-center gap-2 mb-3">
|
|
<DocsIcon className="w-6 h-6 text-gray-400" />
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
Browse Individual Keywords
|
|
</h3>
|
|
</div>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4 max-w-2xl mx-auto">
|
|
💡 <strong>Recommended:</strong> Start with the complimentary Quick-Start Keywords above to accelerate your workflow.
|
|
They're pre-vetted and ready to use immediately. Once added, you can browse our full library below for additional targeted keywords.
|
|
</p>
|
|
<Button
|
|
variant="outline"
|
|
tone="brand"
|
|
size="md"
|
|
onClick={() => setShowBrowseTable(true)}
|
|
startIcon={<DocsIcon className="w-4 h-4" />}
|
|
>
|
|
Browse Full Keyword Library ({availableCount.toLocaleString()} available)
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{/* Show info banner when no sector is selected and table is shown */}
|
|
{showBrowseTable && !activeSector && activeSite && (
|
|
<div className="mx-6 mt-6 mb-4">
|
|
<div className="bg-brand-50 dark:bg-brand-900/20 border border-brand-200 dark:border-brand-800 rounded-lg p-4">
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex-shrink-0">
|
|
<svg className="w-5 h-5 text-brand-600 dark:text-brand-400 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-sm font-medium text-brand-900 dark:text-brand-200">
|
|
Choose a Topic Area First
|
|
</h3>
|
|
<p className="mt-1 text-sm text-brand-700 dark:text-brand-300">
|
|
Pick a topic area first, then add keywords - You need to choose what you're writing about before adding search terms to target
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Keywords Browse Table - Only show when user clicks browse button */}
|
|
{showBrowseTable && (
|
|
<TablePageTemplate
|
|
columns={pageConfig.columns}
|
|
data={seedKeywords}
|
|
loading={!showContent}
|
|
showContent={showContent}
|
|
filters={pageConfig.filters}
|
|
filterValues={{
|
|
search: searchTerm,
|
|
country: countryFilter,
|
|
difficulty: difficultyFilter,
|
|
showNotAddedOnly: showNotAddedOnly ? 'true' : '',
|
|
}}
|
|
customActions={activeSite && activeSector ? (
|
|
<div className="flex items-center gap-3 px-3 py-1.5 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700">
|
|
<span className="text-xs font-medium text-gray-600 dark:text-gray-400">
|
|
<span className="text-success-600 dark:text-success-400 font-bold">{addedCount}</span> in workflow
|
|
</span>
|
|
<div className="w-px h-4 bg-gray-300 dark:bg-gray-600" />
|
|
<span className="text-xs font-medium text-gray-600 dark:text-gray-400">
|
|
<span className="text-brand-600 dark:text-brand-400 font-bold">{availableCount}</span> available
|
|
</span>
|
|
{addedCount > 0 && (
|
|
<>
|
|
<div className="w-px h-4 bg-gray-300 dark:bg-gray-600" />
|
|
<Button
|
|
variant="success"
|
|
size="sm"
|
|
onClick={() => navigate('/planner/keywords')}
|
|
endIcon={
|
|
<svg className="w-3.5 h-3.5" 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>
|
|
) : undefined}
|
|
onFilterChange={(key, value) => {
|
|
const stringValue = value === null || value === undefined ? '' : String(value);
|
|
|
|
if (key === 'search') {
|
|
setSearchTerm(stringValue);
|
|
} else if (key === 'country') {
|
|
setCountryFilter(stringValue);
|
|
setCurrentPage(1);
|
|
} else if (key === 'difficulty') {
|
|
setDifficultyFilter(stringValue);
|
|
setCurrentPage(1);
|
|
} else if (key === 'showNotAddedOnly') {
|
|
setShowNotAddedOnly(stringValue === 'true');
|
|
setCurrentPage(1);
|
|
}
|
|
}}
|
|
onBulkAction={async (actionKey: string, ids: string[]) => {
|
|
if (actionKey === 'add_selected_to_workflow') {
|
|
await handleBulkAddSelected(ids);
|
|
}
|
|
}}
|
|
bulkActions={pageConfig.bulkActions}
|
|
pagination={{
|
|
currentPage,
|
|
totalPages,
|
|
totalCount,
|
|
onPageChange: setCurrentPage,
|
|
}}
|
|
sorting={{
|
|
sortBy,
|
|
sortDirection,
|
|
onSort: handleSort,
|
|
}}
|
|
selection={{
|
|
selectedIds,
|
|
onSelectionChange: setSelectedIds,
|
|
}}
|
|
onEdit={undefined}
|
|
onDelete={undefined}
|
|
/>
|
|
)}
|
|
|
|
{/* Ahrefs Coming Soon Banner - Shows at bottom after High Opportunity is loaded */}
|
|
{highOpportunityLoaded && showAhrefsBanner && (
|
|
<div className="mx-6 mt-6 mb-6">
|
|
<Card className="p-4 bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800">
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex-shrink-0">
|
|
<ShootingStarIcon className="w-5 h-5 text-purple-600 dark:text-purple-400 mt-0.5" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-sm font-medium text-purple-900 dark:text-purple-200 mb-1">
|
|
Ahrefs Keyword Research - Coming March/April 2026
|
|
</h3>
|
|
<p className="text-sm text-purple-700 dark:text-purple-300">
|
|
Soon you'll be able to research keywords directly with Ahrefs API, pulling fresh data with volume, difficulty, and competition metrics. For now, browse our curated keyword library above.
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setShowAhrefsBanner(false)}
|
|
>
|
|
Hide
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{/* Import Modal */}
|
|
<Modal
|
|
isOpen={isImportModalOpen}
|
|
onClose={() => {
|
|
if (!isImporting) {
|
|
setIsImportModalOpen(false);
|
|
setImportFile(null);
|
|
}
|
|
}}
|
|
>
|
|
<div className="p-6 space-y-4">
|
|
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
|
|
Import Seed Keywords
|
|
</h2>
|
|
<div>
|
|
<Label htmlFor="import-file">Upload CSV File</Label>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
|
|
Expected columns: keyword, volume, difficulty, country, industry_name, sector_name
|
|
</p>
|
|
<FileInput
|
|
accept=".csv"
|
|
onChange={(e) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) {
|
|
setImportFile(file);
|
|
}
|
|
}}
|
|
disabled={isImporting}
|
|
/>
|
|
{importFile && (
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mt-2">
|
|
Selected: {importFile.name}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-2 pt-4">
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => {
|
|
setIsImportModalOpen(false);
|
|
setImportFile(null);
|
|
}}
|
|
disabled={isImporting}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
variant="primary"
|
|
onClick={handleImportSubmit}
|
|
disabled={!importFile || isImporting}
|
|
>
|
|
{isImporting ? 'Importing...' : 'Import'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|