From 831b179c4959f3f1521683e1ec938be616b5c61b Mon Sep 17 00:00:00 2001
From: alorig <220087330+alorig@users.noreply.github.com>
Date: Fri, 28 Nov 2025 16:19:16 +0500
Subject: [PATCH] 12

---
 frontend/src/config/pages/content.config.tsx | 144 ++++++++-----------
 1 file changed, 63 insertions(+), 81 deletions(-)

diff --git a/frontend/src/config/pages/content.config.tsx b/frontend/src/config/pages/content.config.tsx
index 1354650b..ec60b83f 100644
--- a/frontend/src/config/pages/content.config.tsx
+++ b/frontend/src/config/pages/content.config.tsx
@@ -207,65 +207,7 @@ export const createContentPageConfig = (
           );
         },
       },
-      {
-        key: 'content_status_indicators',
-        label: 'Status',
-        sortable: false,
-        width: '100px',
-        align: 'center' as const,
-        render: (_value: any, row: Content) => {
-          const hasPrompts = row.has_image_prompts || false;
-          const hasImages = row.has_generated_images || false;
-          
-          return (
-            <div className="flex items-center justify-center gap-2">
-              {/* Prompts Icon */}
-              <div
-                className={`w-5 h-5 flex items-center justify-center flex-shrink-0 ${
-                  hasPrompts ? 'text-purple-500 dark:text-purple-400' : 'text-gray-300 dark:text-gray-600'
-                }`}
-                title={hasPrompts ? 'Prompts ready' : 'No prompts'}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className="w-4 h-4"
-                >
-                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
-                </svg>
-              </div>
-              
-              {/* Images Icon */}
-              <div
-                className={`w-5 h-5 flex items-center justify-center flex-shrink-0 ${
-                  hasImages ? 'text-green-500 dark:text-green-400' : 'text-gray-300 dark:text-gray-600'
-                }`}
-                title={hasImages ? 'Images generated' : 'No images'}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className="w-4 h-4"
-                >
-                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-                  <circle cx="8.5" cy="8.5" r="1.5" />
-                  <polyline points="21 15 16 10 5 21" />
-                </svg>
-              </div>
-            </div>
-          );
-        },
-      },
+      // Removed the separate Status icon column. Both icons will be shown in the Created column below.
       {
         key: 'source',
         label: 'Source',
@@ -318,34 +260,74 @@ export const createContentPageConfig = (
         label: 'Created',
         align: 'right',
         render: (value: string, row: Content) => {
-          const hasImages = row.has_generated_images || false;
-          
+          // Prompt icon logic (unchanged)
+          const hasPrompts = row.has_image_prompts || false;
+
+          // Image icon logic (status-aware)
+          let imageStatus: 'pending' | 'generated' | 'failed' | null = null;
+          if (row.image_status === 'failed') {
+            imageStatus = 'failed';
+          } else if (row.image_status === 'generated' || row.has_generated_images) {
+            imageStatus = 'generated';
+          } else if (row.has_image_prompts) {
+            imageStatus = 'pending';
+          }
+          const imageStatusColors: Record<string, string> = {
+            'pending': 'text-amber-500 dark:text-amber-400',
+            'generated': 'text-green-500 dark:text-green-400',
+            'failed': 'text-red-500 dark:text-red-400',
+          };
+          const imageStatusTitles: Record<string, string> = {
+            'pending': 'Images pending',
+            'generated': 'Images generated',
+            'failed': 'Image generation failed',
+          };
+
           return (
             <div className="flex items-center justify-end gap-3 pr-10">
               <span className="text-gray-700 dark:text-gray-300 whitespace-nowrap">
                 {formatRelativeDate(value)}
               </span>
-              {hasImages && (
-                <div
-                  className="w-5 h-5 flex items-center justify-center flex-shrink-0 text-green-500 dark:text-green-400"
-                  title="Images generated"
+              {/* Prompts Icon */}
+              <div
+                className={`w-5 h-5 flex items-center justify-center flex-shrink-0 ${
+                  hasPrompts ? 'text-purple-500 dark:text-purple-400' : 'text-gray-300 dark:text-gray-600'
+                }`}
+                title={hasPrompts ? 'Prompts ready' : 'No prompts'}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="w-4 h-4"
                 >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    className="w-4 h-4"
-                  >
-                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-                    <circle cx="8.5" cy="8.5" r="1.5" />
-                    <polyline points="21 15 16 10 5 21" />
-                  </svg>
-                </div>
-              )}
+                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+                </svg>
+              </div>
+              {/* Images Icon (status-aware) */}
+              <div
+                className={`w-5 h-5 flex items-center justify-center flex-shrink-0 ${imageStatus ? imageStatusColors[imageStatus] : 'text-gray-300 dark:text-gray-600'}`}
+                title={imageStatus ? imageStatusTitles[imageStatus] : 'No images'}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="w-4 h-4"
+                >
+                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+                  <circle cx="8.5" cy="8.5" r="1.5" />
+                  <polyline points="21 15 16 10 5 21" />
+                </svg>
+              </div>
             </div>
           );
         },