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

Filters and badges

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-19 09:25:34 +00:00
parent 29ce8139d9
commit 8c8f2df5dd
19 changed files with 322 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/pages/Planner/Clusters.tsx
View File

@@ -36,7 +36,7 @@ import StandardThreeWidgetFooter from '../../components/dashboard/StandardThreeW
export default function Clusters() {
const toast = useToast();
const { activeSite } = useSiteStore();
const { activeSector } = useSectorStore();
const { activeSector, sectors } = useSectorStore();
const { pageSize } = usePageSizeStore();
// Data state
@@ -429,6 +429,7 @@ export default function Clusters() {
const pageConfig = useMemo(() => {
return createClustersPageConfig({
activeSector,
sectors,
formData,
setFormData,
searchTerm,
@@ -458,6 +459,7 @@ export default function Clusters() {
});
}, [
activeSector,
sectors,
formData,
searchTerm,
statusFilter,

4
frontend/src/pages/Planner/Ideas.tsx
View File

@@ -38,7 +38,7 @@ import StandardThreeWidgetFooter from '../../components/dashboard/StandardThreeW
export default function Ideas() {
const toast = useToast();
const { activeSite } = useSiteStore();
const { activeSector } = useSectorStore();
const { activeSector, sectors } = useSectorStore();
const { pageSize } = usePageSizeStore();
// Data state
@@ -341,6 +341,8 @@ export default function Ideas() {
return createIdeasPageConfig({
clusters,
activeSector,
sectors,
sectors,
formData,
setFormData,
searchTerm,

4
frontend/src/pages/Planner/Keywords.tsx
View File

@@ -42,7 +42,7 @@ import { createKeywordsPageConfig } from '../../config/pages/keywords.config';
export default function Keywords() {
const toast = useToast();
const { activeSite } = useSiteStore();
const { activeSector, loadSectorsForSite } = useSectorStore();
const { activeSector, sectors, loadSectorsForSite } = useSectorStore();
const { pageSize } = usePageSizeStore();
// Data state
@@ -575,6 +575,7 @@ export default function Keywords() {
return createKeywordsPageConfig({
clusters,
activeSector,
sectors,
formData,
setFormData,
// Filter state handlers
@@ -611,6 +612,7 @@ export default function Keywords() {
}, [
clusters,
activeSector,
sectors,
formData,
searchTerm,
statusFilter,

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

@@ -46,6 +46,7 @@ import { SectorMetricGrid, StatType } from '../../components/keywords-library/Se
import SmartSuggestions from '../../components/keywords-library/SmartSuggestions';
import SectorCardsGrid from '../../components/keywords-library/SectorCardsGrid';
import BulkAddConfirmation from '../../components/keywords-library/BulkAddConfirmation';
import { getSectorBadgeColor } from '../../utils/badgeColors';
export default function IndustriesSectorsKeywords() {
const toast = useToast();
@@ -803,11 +804,14 @@ export default function IndustriesSectorsKeywords() {
key: 'sector_name',
label: 'Sector',
sortable: false,
render: (_value: string, row: SeedKeyword) => (
<Badge color="info" size="sm" variant="light">
{row.sector_name || '-'}
</Badge>
),
render: (_value: string, row: SeedKeyword) => {
const color = getSectorBadgeColor(row.sector_id, row.sector_name, sectors);
return (
<Badge color={color} size="sm" variant="light">
{row.sector_name || '-'}
</Badge>
);
},
}] : []),
{
key: 'volume',

9
frontend/src/pages/Writer/Approved.tsx
View File

@@ -37,7 +37,7 @@ import ErrorDetailsModal from '../../components/common/ErrorDetailsModal';
export default function Approved() {
const toast = useToast();
const navigate = useNavigate();
const { activeSector } = useSectorStore();
const { activeSector, sectors } = useSectorStore();
const { activeSite } = useSiteStore();
const { pageSize } = usePageSizeStore();
@@ -670,11 +670,16 @@ export default function Approved() {
setSiteStatusFilter,
setCurrentPage,
activeSector,
sectors,
onRowClick: (row: Content) => {
navigate(`/writer/content/${row.id}`);
},
statusOptions,
siteStatusOptions,
contentTypeOptions,
contentStructureOptions,
});
}, [searchTerm, statusFilter, siteStatusFilter, contentTypeFilter, contentStructureFilter, activeSector, navigate]);
}, [searchTerm, statusFilter, siteStatusFilter, activeSector, sectors, statusOptions, siteStatusOptions, contentTypeOptions, contentStructureOptions, navigate]);
// Calculate header metrics - use totals from API calls (not page data)
// This ensures metrics show correct totals across all pages, not just current page

26
frontend/src/pages/Writer/Content.tsx
View File

@@ -32,7 +32,7 @@ import { PencilSquareIcon } from '@heroicons/react/24/outline';
export default function Content() {
const toast = useToast();
const { activeSite } = useSiteStore();
const { activeSector } = useSectorStore();
const { activeSector, sectors } = useSectorStore();
const { pageSize } = usePageSizeStore();
// Data state
@@ -48,14 +48,13 @@ export default function Content() {
const [totalImagesCount, setTotalImagesCount] = useState(0);
// Dynamic filter options (loaded from backend)
const [statusOptions, setStatusOptions] = useState<Array<{value: string; label: string}> | undefined>(undefined);
const [sourceOptions, setSourceOptions] = useState<Array<{value: string; label: string}> | undefined>(undefined);
const [contentTypeOptions, setContentTypeOptions] = useState<Array<{value: string; label: string}> | undefined>(undefined);
const [contentStructureOptions, setContentStructureOptions] = useState<Array<{value: string; label: string}> | undefined>(undefined);
// Filter state
const [searchTerm, setSearchTerm] = useState('');
const [statusFilter, setStatusFilter] = useState('draft');
const [statusFilter] = useState('draft');
const [sourceFilter, setSourceFilter] = useState('');
const [contentTypeFilter, setContentTypeFilter] = useState('');
const [contentStructureFilter, setContentStructureFilter] = useState('');
@@ -90,7 +89,6 @@ export default function Content() {
try {
const options = await fetchWriterContentFilterOptions(activeSite.id, currentFilters);
setStatusOptions(options.statuses || []);
setSourceOptions(options.sources || []);
setContentTypeOptions(options.content_types || []);
setContentStructureOptions(options.content_structures || []);
@@ -262,14 +260,12 @@ export default function Content() {
const pageConfig = useMemo(() => {
return createContentPageConfig({
activeSector,
sectors,
searchTerm,
setSearchTerm,
statusFilter,
setStatusFilter,
setCurrentPage,
onRowClick: handleRowClick,
// Dynamic filter options
statusOptions,
sourceOptions,
contentTypeOptions,
contentStructureOptions,
@@ -283,10 +279,9 @@ export default function Content() {
});
}, [
activeSector,
sectors,
searchTerm,
statusFilter,
handleRowClick,
statusOptions,
sourceOptions,
contentTypeOptions,
contentStructureOptions,
@@ -297,7 +292,6 @@ export default function Content() {
sourceFilter,
setSourceFilter,
setSearchTerm,
setStatusFilter,
setCurrentPage,
]);
@@ -410,18 +404,22 @@ export default function Content() {
filters={pageConfig.filters}
filterValues={{
search: searchTerm,
status: statusFilter,
source: sourceFilter,
content_type: contentTypeFilter,
content_structure: contentStructureFilter,
}}
onFilterChange={(key: string, value: any) => {
if (key === 'search') {
setSearchTerm(value);
} else if (key === 'status') {
setStatusFilter(value);
setCurrentPage(1);
} else if (key === 'source') {
setSourceFilter(value);
setCurrentPage(1);
} else if (key === 'content_type') {
setContentTypeFilter(value);
setCurrentPage(1);
} else if (key === 'content_structure') {
setContentStructureFilter(value);
setCurrentPage(1);
}
}}
pagination={{

47
frontend/src/pages/Writer/Images.tsx
View File

@@ -10,6 +10,7 @@ import {
fetchContentImages,
fetchImages,
fetchContent,
fetchWriterContentFilterOptions,
ContentImagesGroup,
ContentImagesResponse,
fetchImageGenerationSettings,
@@ -55,6 +56,8 @@ export default function Images() {
// Filter state
const [searchTerm, setSearchTerm] = useState('');
const [statusFilter, setStatusFilter] = useState('');
const [contentStatusFilter, setContentStatusFilter] = useState('');
const [contentStatusOptions, setContentStatusOptions] = useState<Array<{value: string; label: string}> | undefined>(undefined);
const [selectedIds, setSelectedIds] = useState<string[]>([]);
// Pagination state (client-side for now)
@@ -68,6 +71,32 @@ export default function Images() {
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
const [showContent, setShowContent] = useState(false);
// Load dynamic filter options for content status
const loadFilterOptions = useCallback(async (currentFilters?: {
status?: string;
search?: string;
}) => {
if (!activeSite) return;
try {
const options = await fetchWriterContentFilterOptions(activeSite.id, currentFilters);
setContentStatusOptions(options.statuses || []);
} catch (error) {
console.error('Error loading filter options:', error);
}
}, [activeSite]);
useEffect(() => {
loadFilterOptions();
}, [activeSite]);
useEffect(() => {
loadFilterOptions({
status: contentStatusFilter || undefined,
search: searchTerm || undefined,
});
}, [contentStatusFilter, searchTerm, loadFilterOptions]);
// Image queue modal state
const [isQueueModalOpen, setIsQueueModalOpen] = useState(false);
const [imageQueue, setImageQueue] = useState<ImageQueueItem[]>([]);
@@ -130,7 +159,14 @@ export default function Images() {
);
}
// Client-side status filter
// Client-side content status filter
if (contentStatusFilter) {
filteredResults = filteredResults.filter(group =>
group.content_status === contentStatusFilter
);
}
// Client-side image status filter
if (statusFilter) {
filteredResults = filteredResults.filter(group =>
group.overall_status === statusFilter
@@ -479,12 +515,15 @@ export default function Images() {
setSearchTerm,
statusFilter,
setStatusFilter,
contentStatusFilter,
setContentStatusFilter,
contentStatusOptions,
setCurrentPage,
maxInArticleImages,
onGenerateImages: handleGenerateImages,
onImageClick: handleImageClick,
});
}, [searchTerm, statusFilter, maxInArticleImages, handleGenerateImages, handleImageClick]);
}, [searchTerm, statusFilter, contentStatusFilter, contentStatusOptions, maxInArticleImages, handleGenerateImages, handleImageClick]);
// Calculate header metrics - use totals from API calls (not page data)
// This ensures metrics show correct totals across all pages, not just current page
@@ -545,6 +584,7 @@ export default function Images() {
filters={pageConfig.filters}
filterValues={{
search: searchTerm,
content_status: contentStatusFilter,
status: statusFilter,
}}
nextAction={selectedIds.length > 0 ? {
@@ -560,6 +600,8 @@ export default function Images() {
const stringValue = value === null || value === undefined ? '' : String(value);
if (key === 'search') {
setSearchTerm(stringValue);
} else if (key === 'content_status') {
setContentStatusFilter(stringValue);
} else if (key === 'status') {
setStatusFilter(stringValue);
}
@@ -593,6 +635,7 @@ export default function Images() {
headerMetrics={headerMetrics}
onFilterReset={() => {
setSearchTerm('');
setContentStatusFilter('');
setStatusFilter('');
setCurrentPage(1);
}}

32
frontend/src/pages/Writer/Review.tsx
View File

@@ -7,7 +7,7 @@
import { useState, useEffect, useMemo, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import TablePageTemplate from '../../templates/TablePageTemplate';
import {
const { activeSector, sectors } = useSectorStore();
fetchContent,
fetchImages,
fetchWriterContentFilterOptions,
@@ -24,14 +24,12 @@ import { useSectorStore } from '../../store/sectorStore';
import { useSiteStore } from '../../store/siteStore';
import { usePageSizeStore } from '../../store/pageSizeStore';
import PageHeader from '../../components/common/PageHeader';
import StandardThreeWidgetFooter from '../../components/dashboard/StandardThreeWidgetFooter';
export default function Review() {
const toast = useToast();
const navigate = useNavigate();
const { activeSector } = useSectorStore();
const { activeSite } = useSiteStore();
const { pageSize } = usePageSizeStore();
// Data state
const [content, setContent] = useState<Content[]>([]);
@@ -46,21 +44,18 @@ export default function Review() {
const [totalImagesCount, setTotalImagesCount] = useState(0);
// Dynamic filter options (loaded from backend)
const [statusOptions, setStatusOptions] = useState<Array<{value: string; label: string}> | undefined>(undefined);
const [siteStatusOptions, setSiteStatusOptions] = useState<Array<{value: string; label: string}> | undefined>(undefined);
const [contentTypeOptions, setContentTypeOptions] = useState<Array<{value: string; label: string}> | undefined>(undefined);
const [contentStructureOptions, setContentStructureOptions] = useState<Array<{value: string; label: string}> | undefined>(undefined);
// Filter state - default to review status
const [searchTerm, setSearchTerm] = useState('');
const [statusFilter, setStatusFilter] = useState('review'); // Default to review
const [siteStatusFilter, setSiteStatusFilter] = useState('');
const [contentTypeFilter, setContentTypeFilter] = useState('');
const [contentStructureFilter, setContentStructureFilter] = useState('');
const [selectedIds, setSelectedIds] = useState<string[]>([]);
// Pagination state
const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);
const [totalCount, setTotalCount] = useState(0);
@@ -71,7 +66,6 @@ export default function Review() {
// 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;
site_status?: string;
@@ -83,7 +77,6 @@ export default function Review() {
try {
const options = await fetchWriterContentFilterOptions(activeSite.id, currentFilters);
setStatusOptions(options.statuses || []);
setSiteStatusOptions(options.site_statuses || []);
setContentTypeOptions(options.content_types || []);
setContentStructureOptions(options.content_structures || []);
@@ -94,7 +87,7 @@ export default function Review() {
// Load filter options when site changes (initial load with no filters)
useEffect(() => {
loadFilterOptions({ status: 'review' }); // Always pass review status
loadFilterOptions({ status: 'review' });
}, [activeSite]);
// Reload filter options when any filter changes (cascading filters)
@@ -189,8 +182,6 @@ export default function Review() {
window.removeEventListener('sector-changed', handleSiteChange);
};
}, [loadContent]);
// Sorting handler
const handleSort = useCallback((column: string) => {
if (column === sortBy) {
setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
@@ -210,14 +201,12 @@ export default function Review() {
const pageConfig = useMemo(() =>
createReviewPageConfig({
activeSector,
sectors,
searchTerm,
setSearchTerm,
statusFilter,
setStatusFilter,
setCurrentPage,
onRowClick: handleRowClick,
// Dynamic filter options
statusOptions,
siteStatusOptions,
contentTypeOptions,
contentStructureOptions,
@@ -231,10 +220,9 @@ export default function Review() {
}),
[
activeSector,
sectors,
searchTerm,
statusFilter,
handleRowClick,
statusOptions,
siteStatusOptions,
contentTypeOptions,
contentStructureOptions,
@@ -401,6 +389,9 @@ export default function Review() {
filters={pageConfig.filters}
filterValues={{
search: searchTerm,
site_status: siteStatusFilter,
content_type: contentTypeFilter,
content_structure: contentStructureFilter,
}}
primaryAction={{
label: 'Approve Selected',
@@ -412,6 +403,12 @@ export default function Review() {
const stringValue = value === null || value === undefined ? '' : String(value);
if (key === 'search') {
setSearchTerm(stringValue);
} else if (key === 'site_status') {
setSiteStatusFilter(stringValue);
} else if (key === 'content_type') {
setContentTypeFilter(stringValue);
} else if (key === 'content_structure') {
setContentStructureFilter(stringValue);
}
setCurrentPage(1);
}}
@@ -442,6 +439,9 @@ export default function Review() {
headerMetrics={headerMetrics}
onFilterReset={() => {
setSearchTerm('');
setSiteStatusFilter('');
setContentTypeFilter('');
setContentStructureFilter('');
setCurrentPage(1);
}}
onRowAction={handleRowAction}

21
frontend/src/pages/Writer/Tasks.tsx
View File

@@ -40,7 +40,7 @@ import { DocumentTextIcon } from '@heroicons/react/24/outline';
export default function Tasks() {
const toast = useToast();
const { activeSite } = useSiteStore();
const { activeSector } = useSectorStore();
const { activeSector, sectors } = useSectorStore();
const { pageSize } = usePageSizeStore();
// Data state
@@ -66,7 +66,6 @@ export default function Tasks() {
const [contentTypeOptions, setContentTypeOptions] = useState<Array<{value: string; label: string}> | undefined>(undefined);
const [contentStructureOptions, setContentStructureOptions] = useState<Array<{value: string; label: string}> | undefined>(undefined);
const [clusterOptions, setClusterOptions] = useState<Array<{value: string; label: string}> | undefined>(undefined);
const [sourceOptions, setSourceOptions] = useState<Array<{value: string; label: string}> | undefined>(undefined);
// Filter state
const [searchTerm, setSearchTerm] = useState('');
@@ -74,7 +73,6 @@ export default function Tasks() {
const [clusterFilter, setClusterFilter] = useState('');
const [structureFilter, setStructureFilter] = useState('');
const [typeFilter, setTypeFilter] = useState('');
const [sourceFilter, setSourceFilter] = useState('');
const [selectedIds, setSelectedIds] = useState<string[]>([]);
// Pagination state
@@ -115,7 +113,6 @@ export default function Tasks() {
content_type?: string;
content_structure?: string;
cluster?: string;
source?: string;
search?: string;
}) => {
if (!activeSite) return;
@@ -126,7 +123,6 @@ export default function Tasks() {
setContentTypeOptions(options.content_types || []);
setContentStructureOptions(options.content_structures || []);
setClusterOptions(options.clusters || []);
setSourceOptions(options.sources || []);
} catch (error) {
console.error('Error loading filter options:', error);
}
@@ -144,10 +140,9 @@ export default function Tasks() {
content_type: typeFilter || undefined,
content_structure: structureFilter || undefined,
cluster: clusterFilter || undefined,
source: sourceFilter || undefined,
search: searchTerm || undefined,
});
}, [statusFilter, typeFilter, structureFilter, clusterFilter, sourceFilter, searchTerm, loadFilterOptions]);
}, [statusFilter, typeFilter, structureFilter, clusterFilter, searchTerm, loadFilterOptions]);
@@ -413,6 +408,7 @@ export default function Tasks() {
return createTasksPageConfig({
clusters,
activeSector,
sectors,
formData,
setFormData,
searchTerm,
@@ -420,16 +416,18 @@ export default function Tasks() {
statusFilter,
setStatusFilter,
clusterFilter,
sourceFilter,
setSourceFilter,
setClusterFilter,
structureFilter,
setStructureFilter,
typeFilter,
setTypeFilter,
setCurrentPage,
statusOptions,
contentTypeOptions,
contentStructureOptions,
clusterOptions,
});
}, [clusters, activeSector, formData, searchTerm, statusFilter, clusterFilter, structureFilter, typeFilter, sourceFilter]);
}, [clusters, activeSector, sectors, formData, searchTerm, statusFilter, clusterFilter, structureFilter, typeFilter, statusOptions, contentTypeOptions, contentStructureOptions, clusterOptions]);
// Calculate header metrics - use totals from API calls (not page data)
// This ensures metrics show correct totals across all pages, not just current page
@@ -524,7 +522,6 @@ export default function Tasks() {
cluster_id: clusterFilter,
content_structure: structureFilter,
content_type: typeFilter,
source: sourceFilter,
}}
onFilterChange={(key, value) => {
const stringValue = value === null || value === undefined ? '' : String(value);
@@ -538,8 +535,6 @@ export default function Tasks() {
setStructureFilter(stringValue);
} else if (key === 'content_type') {
setTypeFilter(stringValue);
} else if (key === 'source') {
setSourceFilter(stringValue);
}
setCurrentPage(1);
}}