salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

COMPLETED KEYWORDS-LIBRARY-REDESIGN-PLAN.md

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-18 22:05:38 +00:00
parent 05bc433c80
commit 328098a48c
6 changed files with 264 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/src/components/keywords-library/SectorCardsGrid.tsx
View File

@@ -71,62 +71,53 @@ export default function SectorCardsGrid({
key={sector.id}
onClick={() => onSelectSector(sector)}
className={clsx(
'keywords-library-sector-card',
'keywords-library-sector-card relative',
isActive ? 'is-active' : ''
)}
>
<div className="sector-card-accent" />
{/* Active indicator - top right corner */}
{isActive && (
<div className="absolute top-2 right-2 flex items-center gap-2">
<Badge color="success" size="md" variant="light" className="flex items-center gap-1.5">
<span className="w-2.5 h-2.5 rounded-full bg-success-500 animate-pulse" />
Active
</Badge>
</div>
)}
<div className="flex items-start justify-between gap-3">
<div>
<div className="flex items-center gap-2">
<h4 className="text-base font-semibold text-gray-900 dark:text-white">
{sector.name}
</h4>
{isActive && <span className="sector-card-active-dot" />}
</div>
{sector.industry_sector ? (
<span className="text-xs text-gray-500 dark:text-gray-400">Sector keywords</span>
) : (
<span className="text-xs text-gray-500 dark:text-gray-400">Not linked to template</span>
)}
{isActive && (
<div className="mt-2">
<Badge color="info" size="sm" variant="light">
Active
</Badge>
</div>
)}
</div>
<div className="text-right">
<div className="text-xs text-gray-500 dark:text-gray-400">Total</div>
<div className="text-2xl font-semibold text-gray-900 dark:text-white">
{total.toLocaleString()}
</div>
</div>
<h4 className="text-lg font-bold text-gray-900 dark:text-white">
{sector.name}
</h4>
{!sector.industry_sector && (
<span className="text-xs text-gray-500 dark:text-gray-400">Not linked</span>
)}
</div>
<div className="mt-4 grid grid-cols-2 gap-3">
<div>
<div className="text-xs font-semibold text-success-600 dark:text-success-400">Available</div>
<div className="text-sm font-medium text-gray-900 dark:text-white">
<div className="mt-4 grid grid-cols-4 gap-2">
<div className="flex flex-col items-center justify-center p-2 rounded-lg border border-success-200 dark:border-success-800 bg-success-50/50 dark:bg-success-900/10">
<div className="text-sm font-semibold text-success-600 dark:text-success-400">Available</div>
<div className="text-base font-bold text-gray-900 dark:text-white">
{available.toLocaleString()}
</div>
</div>
<div>
<div className="text-xs font-semibold text-brand-600 dark:text-brand-400">In Workflow</div>
<div className="text-sm font-medium text-gray-900 dark:text-white">
<div className="flex flex-col items-center justify-center p-2 rounded-lg border border-brand-200 dark:border-brand-800 bg-brand-50/50 dark:bg-brand-900/10">
<div className="text-sm font-semibold text-brand-600 dark:text-brand-400">Added</div>
<div className="text-base font-bold text-gray-900 dark:text-white">
{inWorkflow.toLocaleString()}
</div>
</div>
<div>
<div className="text-xs font-semibold text-warning-600 dark:text-warning-400">&gt; 10K</div>
<div className="text-sm font-medium text-gray-900 dark:text-white">
<div className="flex flex-col items-center justify-center p-2 rounded-lg border border-warning-200 dark:border-warning-800 bg-warning-50/50 dark:bg-warning-900/10">
<div className="text-sm font-semibold text-warning-600 dark:text-warning-400">&gt; 10K</div>
<div className="text-base font-bold text-gray-900 dark:text-white">
{over10k.toLocaleString()}
</div>
</div>
<div>
<div className="text-xs font-semibold text-purple-600 dark:text-purple-400">5K - 10K</div>
<div className="text-sm font-medium text-gray-900 dark:text-white">
<div className="flex flex-col items-center justify-center p-2 rounded-lg border border-purple-200 dark:border-purple-800 bg-purple-50/50 dark:bg-purple-900/10">
<div className="text-sm font-semibold text-purple-600 dark:text-purple-400">5K - 10K</div>
<div className="text-base font-bold text-gray-900 dark:text-white">
{midVolume.toLocaleString()}
</div>
</div>

45
frontend/src/components/keywords-library/SectorMetricCard.tsx
View File

@@ -223,18 +223,13 @@ export default function SectorMetricCard({
<div className={clsx('p-2 rounded-lg', config.badgeColor, config.textColor)}>
{config.icon}
</div>
<span className={clsx('text-base font-semibold', config.textColor)}>
<h4 className={clsx('text-base font-semibold m-0', config.textColor)}>
{config.label}
</span>
</div>
<div className="flex items-center gap-2">
{isActive && (
<div className={clsx('w-2 h-2 rounded-full animate-pulse', config.dotColor)} />
)}
<div className={clsx('font-bold tabular-nums', compact ? 'text-2xl' : 'text-3xl', config.textColor)}>
{formatCount(statData.count)}
</div>
</h4>
</div>
<h4 className={clsx('font-bold tabular-nums m-0', compact ? 'text-2xl' : 'text-3xl', config.textColor)}>
{formatCount(statData.count)}
</h4>
</div>
{/* Description / Threshold */}
@@ -245,28 +240,32 @@ export default function SectorMetricCard({
{/* Bulk Add Buttons - Always visible */}
{onBulkAdd && statData.count > 0 && statType !== 'total' && (
<div className="mt-3 pt-3 border-t border-gray-100 dark:border-gray-800">
<div className="flex flex-wrap items-center gap-2 text-xs">
<div className="flex flex-wrap items-center gap-1 text-xs">
<span className="inline-flex items-center gap-1 rounded-full bg-success-100 text-success-700 dark:bg-success-900/40 dark:text-success-300 px-2 py-0.5">
<PlusIcon className="w-3 h-3" />
ADD
</span>
<div className="ml-auto flex flex-wrap items-center gap-2 justify-end">
<div className="ml-auto flex flex-wrap items-center gap-1 justify-end">
{bulkAddOptions.map((count) => {
const isAdded = isAddedAction ? isAddedAction(statType, count) : false;
return (
<Button
<span
key={count}
size="xs"
variant={isAdded ? 'outline' : 'primary'}
tone={isAdded ? 'success' : 'brand'}
startIcon={
isAdded ? <CheckCircleIcon className="w-3 h-3" /> : <PlusIcon className="w-3 h-3" />
}
onClick={() => handleAddClick(count)}
disabled={isAdded}
onClick={(e) => e.stopPropagation()}
>
{isAdded ? 'Added' : (count === statData.count ? 'All' : count)}
</Button>
<Button
size="xs"
variant={isAdded ? 'outline' : 'primary'}
tone={isAdded ? 'success' : 'brand'}
startIcon={
isAdded ? <CheckCircleIcon className="w-3 h-3" /> : <PlusIcon className="w-3 h-3" />
}
onClick={() => handleAddClick(count)}
disabled={isAdded}
>
{isAdded ? 'Added' : (count === statData.count ? 'All' : count)}
</Button>
</span>
);
})}
</div>

10
frontend/src/components/keywords-library/SmartSuggestions.tsx
View File

@@ -72,24 +72,24 @@ export default function SmartSuggestions({
>
<div className="flex items-center gap-3">
<div className={clsx(
'w-8 h-8 rounded-lg flex items-center justify-center',
'w-10 h-10 rounded-lg flex items-center justify-center',
'bg-gradient-to-br from-brand-500 to-purple-500',
hasContent && 'animate-pulse'
)}>
<ShootingStarIcon className="w-4 h-4 text-white" />
<ShootingStarIcon className="w-5 h-5 text-white" />
</div>
<div>
<h3 className="font-semibold text-gray-900 dark:text-white text-base flex items-center gap-2">
<h3 className="font-bold text-gray-900 dark:text-white text-lg flex items-center gap-2">
Smart Suggestions
</h3>
<p className="text-xs text-gray-500 dark:text-gray-400">
<p className="text-sm text-gray-500 dark:text-gray-400">
Ready-to-use keywords waiting for you!
</p>
</div>
</div>
<ChevronDownIcon
className={clsx(
'w-5 h-5 text-gray-400 transition-transform duration-200',
'w-6 h-6 text-gray-400 transition-transform duration-200',
isExpanded && 'rotate-180'
)}
/>

99
frontend/src/pages/Setup/IndustriesSectorsKeywords.tsx
View File

@@ -95,7 +95,7 @@ export default function IndustriesSectorsKeywords() {
const [showNotAddedOnly, setShowNotAddedOnly] = useState(false);
const [volumeMin, setVolumeMin] = useState('');
const [volumeMax, setVolumeMax] = useState('');
const [minWords, setMinWords] = useState<number | undefined>(undefined);
// Dynamic filter options (cascading)
const [countryOptions, setCountryOptions] = useState<FilterOption[] | undefined>(undefined);
const [difficultyOptions, setDifficultyOptions] = useState<FilterOption[] | undefined>(undefined);
@@ -199,9 +199,15 @@ export default function IndustriesSectorsKeywords() {
setLoadingSectorStats(true);
try {
// Get the site's sector industry_sector IDs to filter stats
const siteSectorIds = sectors
.filter(s => s.industry_sector)
.map(s => s.industry_sector as number);
const response = await fetchSectorStats({
industry_id: activeSite.industry,
site_id: activeSite.id,
sector_ids: siteSectorIds.length > 0 ? siteSectorIds : undefined,
});
const allSectors = response.sectors || [];
@@ -219,19 +225,36 @@ export default function IndustriesSectorsKeywords() {
const aggregated: SectorStats = {
total: { count: 0 },
available: { count: 0 },
high_volume: { count: 0, threshold: 10000 },
premium_traffic: { count: 0, threshold: 50000 },
long_tail: { count: 0, threshold: 1000 },
quick_wins: { count: 0, threshold: 1000 },
high_volume: { count: 0, available: 0, threshold: 10000 },
mid_volume: { count: 0, available: 0, threshold: 5000 },
premium_traffic: { count: 0, available: 0, threshold: 50000 },
long_tail: { count: 0, available: 0, threshold: 1000 },
quick_wins: { count: 0, available: 0, threshold: 1000 },
};
allSectors.forEach((sector) => {
aggregated.total.count += sector.stats.total.count;
aggregated.available.count += sector.stats.available.count;
// Aggregate counts AND available counts for each stat type
aggregated.high_volume.count += sector.stats.high_volume.count;
aggregated.high_volume.available = (aggregated.high_volume.available || 0) + (sector.stats.high_volume.available || 0);
if (sector.stats.mid_volume) {
aggregated.mid_volume!.count += sector.stats.mid_volume.count;
aggregated.mid_volume!.available = (aggregated.mid_volume!.available || 0) + (sector.stats.mid_volume.available || 0);
}
aggregated.premium_traffic.count += sector.stats.premium_traffic.count;
aggregated.premium_traffic.available = (aggregated.premium_traffic.available || 0) + (sector.stats.premium_traffic.available || 0);
aggregated.long_tail.count += sector.stats.long_tail.count;
aggregated.long_tail.available = (aggregated.long_tail.available || 0) + (sector.stats.long_tail.available || 0);
aggregated.quick_wins.count += sector.stats.quick_wins.count;
aggregated.quick_wins.available = (aggregated.quick_wins.available || 0) + (sector.stats.quick_wins.available || 0);
// Use first non-zero threshold
if (!aggregated.premium_traffic.threshold) {
aggregated.premium_traffic.threshold = sector.stats.premium_traffic.threshold;
}
@@ -252,7 +275,7 @@ export default function IndustriesSectorsKeywords() {
} finally {
setLoadingSectorStats(false);
}
}, [activeSite, activeSector]);
}, [activeSite, activeSector, sectors]);
// Load sector stats when site/sector changes
useEffect(() => {
@@ -268,6 +291,7 @@ export default function IndustriesSectorsKeywords() {
setCountryFilter('');
setDifficultyFilter('');
setShowNotAddedOnly(false);
setMinWords(undefined);
setCurrentPage(1);
setSelectedIds([]);
setAddedStatActions(new Set());
@@ -276,6 +300,7 @@ export default function IndustriesSectorsKeywords() {
// Reset pagination/selection when sector changes
useEffect(() => {
setActiveStatFilter(null);
setMinWords(undefined);
setCurrentPage(1);
setSelectedIds([]);
setAddedStatActions(new Set());
@@ -298,6 +323,9 @@ export default function IndustriesSectorsKeywords() {
volume_min: volumeMin ? Number(volumeMin) : undefined,
volume_max: volumeMax ? Number(volumeMax) : undefined,
search: searchTerm || undefined,
min_words: minWords,
site_id: showNotAddedOnly ? activeSite.id : undefined,
available_only: showNotAddedOnly,
});
setCountryOptions(options.countries || []);
@@ -310,7 +338,7 @@ export default function IndustriesSectorsKeywords() {
} catch (error) {
console.error('Failed to load filter options:', error);
}
}, [activeSite?.industry, activeSector?.industry_sector, countryFilter, difficultyFilter, volumeMin, volumeMax, searchTerm]);
}, [activeSite?.industry, activeSite?.id, activeSector?.industry_sector, countryFilter, difficultyFilter, volumeMin, volumeMax, searchTerm, minWords, showNotAddedOnly]);
useEffect(() => {
loadFilterOptions();
@@ -382,9 +410,17 @@ export default function IndustriesSectorsKeywords() {
page: currentPage,
};
// Add sector filter if active sector is selected
// Add sector filter - if active sector selected, use its ID; otherwise use all site's sector IDs
if (activeSector && activeSector.industry_sector) {
filters.sector = activeSector.industry_sector;
} else {
// Filter by all of the site's sector IDs
const siteSectorIds = sectors
.filter(s => s.industry_sector)
.map(s => s.industry_sector);
if (siteSectorIds.length > 0) {
filters.sector_ids = siteSectorIds.join(',');
}
}
if (searchTerm) filters.search = searchTerm;
@@ -421,6 +457,11 @@ export default function IndustriesSectorsKeywords() {
}
}
// Apply word count filter (for long-tail keywords)
if (minWords !== undefined) {
filters.min_words = minWords;
}
// Add sorting to API request
if (sortBy && sortDirection) {
const sortPrefix = sortDirection === 'desc' ? '-' : '';
@@ -474,7 +515,7 @@ export default function IndustriesSectorsKeywords() {
setAvailableCount(0);
setShowContent(true);
}
}, [activeSite, activeSector, currentPage, pageSize, searchTerm, countryFilter, volumeMin, volumeMax, difficultyFilter, showNotAddedOnly, sortBy, sortDirection, toast]);
}, [activeSite, activeSector, sectors, currentPage, pageSize, searchTerm, countryFilter, volumeMin, volumeMax, difficultyFilter, showNotAddedOnly, minWords, sortBy, sortDirection, toast]);
const getAddedStatStorageKey = useCallback(() => {
if (!activeSite?.id) return null;
@@ -952,9 +993,37 @@ export default function IndustriesSectorsKeywords() {
return `${statType}:${count}`;
}, []);
// Check if a bulk add action should show as "Added"
// This checks actual available counts from backend stats
const isStatActionAdded = useCallback((statType: StatType, count: number) => {
return addedStatActions.has(buildStatActionKey(statType, count));
}, [addedStatActions, buildStatActionKey]);
// First check if it was added in this session (localStorage) - for immediate feedback
if (addedStatActions.has(buildStatActionKey(statType, count))) {
return true;
}
// Check actual available counts from backend stats
// This ensures buttons reflect true state after page reload
if (sectorStats) {
const statData = sectorStats[statType];
if (!statData) return false;
// Get available count - use 'available' field if present, otherwise fallback to count
const availableCount = statData.available !== undefined ? statData.available : statData.count;
// If no keywords available for this stat type, show as Added
if (availableCount === 0) {
return true;
}
// If requesting more than available, mark as added
// (e.g., clicking "+50" when only 30 are available)
if (count > availableCount) {
return true;
}
}
return false;
}, [addedStatActions, buildStatActionKey, sectorStats]);
const fetchBulkKeywords = useCallback(async (options: {
ordering: string;
@@ -1026,6 +1095,7 @@ export default function IndustriesSectorsKeywords() {
setDifficultyFilter('');
setVolumeMin('');
setVolumeMax('');
setMinWords(undefined);
setSelectedIds([]);
return;
}
@@ -1047,12 +1117,14 @@ export default function IndustriesSectorsKeywords() {
setDifficultyFilter('');
setVolumeMin('');
setVolumeMax('');
setMinWords(undefined);
break;
case 'high_volume':
setShowNotAddedOnly(false);
setDifficultyFilter('');
setVolumeMin(String(statThresholds.highVolume));
setVolumeMax('');
setMinWords(undefined);
setSortBy('volume');
setSortDirection('desc');
break;
@@ -1061,6 +1133,7 @@ export default function IndustriesSectorsKeywords() {
setDifficultyFilter('');
setVolumeMin(String(statThresholds.premium));
setVolumeMax('');
setMinWords(undefined);
setSortBy('volume');
setSortDirection('desc');
break;
@@ -1069,6 +1142,7 @@ export default function IndustriesSectorsKeywords() {
setDifficultyFilter('');
setVolumeMin(String(statThresholds.longTail));
setVolumeMax('');
setMinWords(4); // Long-tail = 4+ words
setSortBy('keyword');
setSortDirection('asc');
break;
@@ -1077,6 +1151,7 @@ export default function IndustriesSectorsKeywords() {
setDifficultyFilter('1');
setVolumeMin(String(statThresholds.quickWins));
setVolumeMax('');
setMinWords(undefined);
setSortBy('difficulty');
setSortDirection('asc');
break;
@@ -1085,6 +1160,7 @@ export default function IndustriesSectorsKeywords() {
setDifficultyFilter('');
setVolumeMin('');
setVolumeMax('');
setMinWords(undefined);
}
}, [activeStatFilter, sectorStats]);
@@ -1362,6 +1438,7 @@ export default function IndustriesSectorsKeywords() {
setVolumeMax('');
setDifficultyFilter('');
setShowNotAddedOnly(false);
setMinWords(undefined);
setActiveStatFilter(null);
setCurrentPage(1);
setSelectedIds([]);

22
frontend/src/services/api.ts
View File

@@ -2274,6 +2274,7 @@ export interface SeedKeywordResponse {
export async function fetchKeywordsLibrary(filters?: {
industry?: number;
sector?: number;
sector_ids?: string; // Comma-separated list of sector IDs
country?: string;
search?: string;
page?: number;
@@ -2283,6 +2284,9 @@ export async function fetchKeywordsLibrary(filters?: {
difficulty_max?: number;
volume_min?: number;
volume_max?: number;
min_words?: number;
site_id?: number;
available_only?: boolean;
}): Promise<SeedKeywordResponse> {
const params = new URLSearchParams();
// Use industry_id and sector_id as per backend get_queryset, but also try industry/sector for filterset_fields
@@ -2294,6 +2298,8 @@ export async function fetchKeywordsLibrary(filters?: {
params.append('sector', filters.sector.toString());
params.append('sector_id', filters.sector.toString()); // Also send sector_id for get_queryset
}
// Multiple sector IDs (for site-specific filtering)
if (filters?.sector_ids) params.append('sector_ids', filters.sector_ids);
if (filters?.country) params.append('country', filters.country);
if (filters?.search) params.append('search', filters.search);
if (filters?.page) params.append('page', filters.page.toString());
@@ -2306,6 +2312,11 @@ export async function fetchKeywordsLibrary(filters?: {
// Volume range filtering
if (filters?.volume_min !== undefined) params.append('volume_min', filters.volume_min.toString());
if (filters?.volume_max !== undefined) params.append('volume_max', filters.volume_max.toString());
// Word count filtering (for long-tail keywords)
if (filters?.min_words !== undefined) params.append('min_words', filters.min_words.toString());
// Availability filtering
if (filters?.site_id !== undefined) params.append('site_id', filters.site_id.toString());
if (filters?.available_only) params.append('available_only', 'true');
const queryString = params.toString();
return fetchAPI(`/v1/auth/keywords-library/${queryString ? `?${queryString}` : ''}`);
@@ -2347,6 +2358,7 @@ export async function fetchKeywordStats(): Promise<KeywordStats> {
*/
export interface SectorStatResult {
count: number;
available?: number; // Number of keywords not yet added (for checking "Added" state)
threshold?: number;
}
@@ -2376,11 +2388,15 @@ export interface SectorStatsResponse {
export async function fetchSectorStats(filters: {
industry_id: number;
sector_id?: number;
sector_ids?: number[]; // For filtering by site's sectors
site_id?: number;
}): Promise<SectorStatsResponse> {
const params = new URLSearchParams();
params.append('industry_id', filters.industry_id.toString());
if (filters.sector_id) params.append('sector_id', filters.sector_id.toString());
if (filters.sector_ids && filters.sector_ids.length > 0) {
params.append('sector_ids', filters.sector_ids.join(','));
}
if (filters.site_id) params.append('site_id', filters.site_id.toString());
return fetchAPI(`/v1/auth/keywords-library/sector_stats/?${params.toString()}`);
@@ -2429,6 +2445,9 @@ export interface KeywordsLibraryFilterOptionsRequest {
volume_min?: number;
volume_max?: number;
search?: string;
min_words?: number;
site_id?: number;
available_only?: boolean;
}
export async function fetchKeywordsLibraryFilterOptions(
@@ -2443,6 +2462,9 @@ export async function fetchKeywordsLibraryFilterOptions(
if (filters?.volume_min !== undefined) params.append('volume_min', filters.volume_min.toString());
if (filters?.volume_max !== undefined) params.append('volume_max', filters.volume_max.toString());
if (filters?.search) params.append('search', filters.search);
if (filters?.min_words !== undefined) params.append('min_words', filters.min_words.toString());
if (filters?.site_id) params.append('site_id', filters.site_id.toString());
if (filters?.available_only) params.append('available_only', 'true');
const queryString = params.toString();
return fetchAPI(`/v1/auth/keywords-library/filter_options/${queryString ? `?${queryString}` : ''}`);