other fixes

frontend/src/config/pages/content.config.tsx

@@ -449,7 +449,7 @@ export const createContentPageConfig = (
         value: 0,
         accentColor: 'blue' as const,
         calculate: (data) => 0,
-        tooltip: 'Generated images / Total images. Tracks visual asset coverage.',,
+        tooltip: 'Generated images / Total images. Tracks visual asset coverage.',
       },
     ],
   };

frontend/src/config/pages/images.config.tsx

@@ -104,7 +104,6 @@ export const createImagesPageConfig = (
       key: 'featured_image',
       label: 'Featured',
       sortable: false,
-      width: '100px',
       render: (_value: any, row: ContentImagesGroup) => (
         <ContentImageCell 
           image={row.featured_image} 
@@ -124,7 +123,6 @@ export const createImagesPageConfig = (
       key: `in_article_${displayIndex}`,
       label: `Art ${displayIndex}`,
       sortable: false,
-      width: '100px',
       render: (_value: any, row: ContentImagesGroup) => {
         const image = row.in_article_images.find(img => img.position === i);  // 0-indexed position
         return (

frontend/src/config/pages/tasks.config.tsx

@@ -474,7 +474,7 @@ export const createTasksPageConfig = (
         value: 0,
         accentColor: 'blue' as const,
         calculate: (data) => 0,
-        tooltip: 'Generated images / Total images. Tracks visual asset coverage.',,
+        tooltip: 'Generated images / Total images. Tracks visual asset coverage.',
       },
     ],
   };

frontend/src/pages/Planner/Clusters.tsx

@@ -155,7 +155,7 @@ export default function Clusters() {
   const loadTotalMetrics = useCallback(async () => {
     try {
       // Batch all API calls in parallel for better performance
-      const [allRes, mappedRes, newRes, imagesRes] = await Promise.all([
+      const [allRes, mappedRes, newRes, imagesRes, summaryRes] = await Promise.all([
         // Fetch all clusters (site-wide)
         fetchClusters({
           page_size: 1,
@@ -175,12 +175,16 @@ export default function Clusters() {
         }),
         // Fetch images count
         fetchImages({ page_size: 1 }),
+        // Fetch clusters summary for keywords count and volume
+        fetchClustersSummary(),
       ]);
 
       setActualTotalClusters(allRes.count || 0); // Store actual total (unfiltered) for header metrics
       setTotalWithIdeas(mappedRes.count || 0);
       setTotalReady(newRes.count || 0);
       setTotalImagesCount(imagesRes.count || 0);
+      setTotalKeywords(summaryRes.total_keywords || 0);
+      setTotalVolume(summaryRes.total_volume || 0);
     } catch (error) {
       console.error('Error loading total metrics:', error);
     }

frontend/src/pages/Writer/Images.tsx

@@ -554,7 +554,7 @@ export default function Images() {
         case 'Published':
           value = totalPublished;
           break;
-        case 'Total Images':
+        case 'Images':
           value = totalImagesCount;
           return {
             label: metric.label,

frontend/src/pages/Writer/Review.tsx

@@ -57,6 +57,7 @@ export default function Review() {
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
   
   // Pagination state
+  const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
   const [totalCount, setTotalCount] = useState(0);
   

frontend/src/templates/TablePageTemplate.tsx

@@ -974,20 +974,24 @@ export default function TablePageTemplate({
                             }
                           }
                           
+                          // Determine if we need wrapper divs (for toggle or alignment)
+                          const needsWrapper = column.toggleable && hasToggleContent;
+                          const alignClass = column.align === 'center' ? 'justify-center' : column.align === 'end' ? 'justify-end' : '';
+                          
                           return (
                             <TableCell 
                               key={column.key} 
                               className={`text-${column.align || 'start'} text-gray-800 dark:text-white/90 ${hasActionsInColumn ? 'relative pr-16' : ''}`}
                             >
-                              <div className={`flex items-center ${column.align === 'center' ? 'justify-center' : column.align === 'end' ? 'justify-end' : ''} ${column.toggleable && hasToggleContent ? 'justify-between w-full' : ''} gap-2`}>
+                              {needsWrapper ? (
-                                <div className={column.toggleable && hasToggleContent ? 'flex-1' : ''}>
+                                <div className={`flex items-center ${alignClass} justify-between w-full gap-2`}>
-                                  {column.render ? (
+                                  <div className="flex-1">
-                                    column.render(row[column.key], row)
+                                    {column.render ? (
-                                  ) : (
+                                      column.render(row[column.key], row)
-                                    <span>{row[column.key]?.toString() || '-'}</span>
+                                    ) : (
-                                  )}
+                                      <span>{row[column.key]?.toString() || '-'}</span>
-                                </div>
+                                    )}
-                                {column.toggleable && hasToggleContent && (
+                                  </div>
                                   <div onClick={(e) => e.stopPropagation()}>
                                     <ToggleButton
                                       isExpanded={isRowExpanded}
@@ -997,8 +1001,14 @@ export default function TablePageTemplate({
                                       hasContent={hasToggleContent}
                                     />
                                   </div>
-                                )}
+                                </div>
-                              </div>
+                              ) : (
+                                column.render ? (
+                                  column.render(row[column.key], row)
+                                ) : (
+                                  <span>{row[column.key]?.toString() || '-'}</span>
+                                )
+                              )}
                               
                               {/* Actions button - absolutely positioned in column with hasActions flag */}
                               {hasActionsInColumn && (() => {