final all done 2nd last plan before goign live

frontend/src/pages/Writer/Images.tsx

@@ -26,6 +26,7 @@ import ImageQueueModal, { ImageQueueItem } from '../../components/common/ImageQu
 import SingleRecordStatusUpdateModal from '../../components/common/SingleRecordStatusUpdateModal';
 import PageHeader from '../../components/common/PageHeader';
 import { Modal } from '../../components/ui/modal';
+import ThreeWidgetFooter from '../../components/dashboard/ThreeWidgetFooter';
 
 export default function Images() {
   const toast = useToast();
@@ -575,6 +576,86 @@ export default function Images() {
           </div>
         )}
       </Modal>
+
+      {/* Three Widget Footer - Section 3 Layout */}
+      <ThreeWidgetFooter
+        submoduleColor="purple"
+        pageProgress={{
+          title: 'Page Progress',
+          submoduleColor: 'purple',
+          metrics: [
+            { label: 'Total', value: totalCount },
+            { label: 'Generated', value: images.filter(i => i.images?.some(img => img.status === 'generated')).length, percentage: `${totalCount > 0 ? Math.round((images.filter(i => i.images?.some(img => img.status === 'generated')).length / totalCount) * 100) : 0}%` },
+            { label: 'Pending', value: images.filter(i => i.images?.some(img => img.status === 'pending')).length },
+          ],
+          progress: {
+            value: totalCount > 0 ? Math.round((images.filter(i => i.images?.some(img => img.status === 'generated')).length / totalCount) * 100) : 0,
+            label: 'Generated',
+            color: 'purple',
+          },
+          hint: images.filter(i => i.images?.some(img => img.status === 'pending')).length > 0
+            ? `${images.filter(i => i.images?.some(img => img.status === 'pending')).length} content item${images.filter(i => i.images?.some(img => img.status === 'pending')).length !== 1 ? 's' : ''} need image generation`
+            : 'All images generated!',
+        }}
+        moduleStats={{
+          title: 'Writer Module',
+          pipeline: [
+            {
+              fromLabel: 'Tasks',
+              fromValue: 0,
+              fromHref: '/writer/tasks',
+              actionLabel: 'Generate Content',
+              toLabel: 'Drafts',
+              toValue: 0,
+              toHref: '/writer/content',
+              progress: 0,
+              color: 'blue',
+            },
+            {
+              fromLabel: 'Drafts',
+              fromValue: 0,
+              fromHref: '/writer/content',
+              actionLabel: 'Generate Images',
+              toLabel: 'Images',
+              toValue: totalCount,
+              toHref: '/writer/images',
+              progress: 100,
+              color: 'purple',
+            },
+            {
+              fromLabel: 'Ready',
+              fromValue: 0,
+              fromHref: '/writer/review',
+              actionLabel: 'Review & Publish',
+              toLabel: 'Published',
+              toValue: 0,
+              toHref: '/writer/published',
+              progress: 0,
+              color: 'green',
+            },
+          ],
+          links: [
+            { label: 'Tasks', href: '/writer/tasks' },
+            { label: 'Content', href: '/writer/content' },
+            { label: 'Images', href: '/writer/images' },
+            { label: 'Published', href: '/writer/published' },
+          ],
+        }}
+        completion={{
+          title: 'Workflow Completion',
+          plannerItems: [
+            { label: 'Keywords Clustered', value: 0, color: 'blue' },
+            { label: 'Clusters Created', value: 0, color: 'green' },
+            { label: 'Ideas Generated', value: 0, color: 'amber' },
+          ],
+          writerItems: [
+            { label: 'Content Generated', value: 0, color: 'blue' },
+            { label: 'Images Created', value: totalCount, color: 'purple' },
+            { label: 'Articles Published', value: 0, color: 'green' },
+          ],
+          analyticsHref: '/account/usage',
+        }}
+      />
     </>
   );
 }