Filters and badges

frontend/src/pages/Writer/Images.tsx

@@ -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);
       }}