tasks to published refactor

frontend/src/pages/Writer/Images.tsx

@@ -14,6 +14,8 @@ import {
   bulkUpdateImagesStatus,
   ContentImage,
   fetchAPI,
+  deleteContent,
+  bulkDeleteContent,
 } from '../../services/api';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { FileIcon, DownloadIcon, BoltIcon, TaskIcon, ImageIcon, CheckCircleIcon } from '../../icons';
@@ -135,7 +137,13 @@ export default function Images() {
       const endIndex = startIndex + pageSize;
       const paginatedResults = filteredResults.slice(startIndex, endIndex);
       
-      setImages(paginatedResults);
+      // Transform data to add 'id' field for TablePageTemplate selection
+      const transformedResults = paginatedResults.map(group => ({
+        ...group,
+        id: group.content_id  // Add id field that mirrors content_id
+      }));
+      
+      setImages(transformedResults);
       setTotalCount(filteredResults.length);
       setTotalPages(Math.ceil(filteredResults.length / pageSize));
       
@@ -205,6 +213,31 @@ export default function Images() {
     }
   }, [toast]);
 
+  // Delete handler for single content
+  const handleDelete = useCallback(async (id: number) => {
+    try {
+      await deleteContent(id);
+      toast.success('Content and images deleted successfully');
+      loadImages();
+    } catch (error: any) {
+      toast.error(`Failed to delete: ${error.message}`);
+      throw error;
+    }
+  }, [loadImages, toast]);
+
+  // Bulk delete handler
+  const handleBulkDelete = useCallback(async (ids: number[]) => {
+    try {
+      const result = await bulkDeleteContent(ids);
+      toast.success(`Deleted ${result.deleted_count} content item(s) and their images`);
+      loadImages();
+      return result;
+    } catch (error: any) {
+      toast.error(`Failed to bulk delete: ${error.message}`);
+      throw error;
+    }
+  }, [loadImages, toast]);
+
   // Bulk action handler
   const handleBulkAction = useCallback(async (action: string, ids: string[]) => {
     if (action === 'bulk_publish_wordpress') {
@@ -575,6 +608,8 @@ export default function Images() {
       }}
       onBulkExport={handleBulkExport}
       onBulkAction={handleBulkAction}
+      onDelete={handleDelete}
+      onBulkDelete={handleBulkDelete}
       getItemDisplayName={(row: ContentImagesGroup) => row.content_title || `Content #${row.content_id}`}
       onExport={async () => {
         toast.info('Export functionality coming soon');