salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

many changes for modules widgets and colors and styling

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-31 23:52:43 +00:00
parent b61bd6e64d
commit 89b64cd737
34 changed files with 2450 additions and 1985 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/src/pages/Writer/Approved.tsx
View File

@@ -24,7 +24,7 @@ import { createApprovedPageConfig } from '../../config/pages/approved.config';
import { useSectorStore } from '../../store/sectorStore';
import { usePageSizeStore } from '../../store/pageSizeStore';
import PageHeader from '../../components/common/PageHeader';
import ThreeWidgetFooter from '../../components/dashboard/ThreeWidgetFooter';
import StandardThreeWidgetFooter from '../../components/dashboard/StandardThreeWidgetFooter';
export default function Approved() {
const toast = useToast();
@@ -417,7 +417,7 @@ export default function Approved() {
/>
{/* Three Widget Footer - Section 3 Layout */}
<ThreeWidgetFooter
<StandardThreeWidgetFooter
submoduleColor="green"
pageProgress={{
title: 'Page Progress',
@@ -435,65 +435,13 @@ export default function Approved() {
hint: content.filter(c => !c.external_id).length > 0
? `${content.filter(c => !c.external_id).length} article${content.filter(c => !c.external_id).length !== 1 ? 's' : ''} pending sync to site`
: 'All articles synced to site!',
statusInsight: content.filter(c => !c.external_id).length > 0
? `Select articles and publish to your WordPress site.`
: totalCount > 0
? `All content published! Check your site for live articles.`
: `No approved content. Approve articles from Review page.`,
}}
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: totalImagesCount,
toHref: '/writer/images',
progress: 0,
color: 'purple',
},
{
fromLabel: 'Ready',
fromValue: 0,
fromHref: '/writer/review',
actionLabel: 'Review & Publish',
toLabel: 'Published',
toValue: totalCount,
toHref: '/writer/published',
progress: 100,
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: totalImagesCount, color: 'purple' },
{ label: 'Articles Published', value: totalCount, color: 'green' },
],
analyticsHref: '/account/usage',
}}
module="writer"
/>
</>
);

80
frontend/src/pages/Writer/Content.tsx
View File

@@ -24,7 +24,7 @@ import { usePageSizeStore } from '../../store/pageSizeStore';
import ProgressModal from '../../components/common/ProgressModal';
import { useProgressModal } from '../../hooks/useProgressModal';
import PageHeader from '../../components/common/PageHeader';
import ThreeWidgetFooter from '../../components/dashboard/ThreeWidgetFooter';
import StandardThreeWidgetFooter from '../../components/dashboard/StandardThreeWidgetFooter';
import { PencilSquareIcon } from '@heroicons/react/24/outline';
export default function Content() {
@@ -348,83 +348,35 @@ export default function Content() {
getItemDisplayName={(row: ContentType) => row.title || `Content #${row.id}`}
/>
{/* Three Widget Footer - Section 3 Layout */}
<ThreeWidgetFooter
{/* Three Widget Footer - Section 3 Layout with Standardized Workflow Widget */}
<StandardThreeWidgetFooter
submoduleColor="blue"
pageProgress={{
title: 'Page Progress',
submoduleColor: 'blue',
metrics: [
{ label: 'Drafts', value: content.filter(c => c.status === 'draft').length },
{ label: 'Has Images', value: content.filter(c => c.has_generated_images).length, percentage: `${content.filter(c => c.status === 'draft').length > 0 ? Math.round((content.filter(c => c.has_generated_images).length / content.filter(c => c.status === 'draft').length) * 100) : 0}%` },
{ label: 'In Review', value: content.filter(c => c.status === 'review').length },
{ label: 'Published', value: content.filter(c => c.status === 'published').length },
{ label: 'Drafts', value: totalDraft },
{ label: 'Has Images', value: content.filter(c => c.has_generated_images).length, percentage: `${totalDraft > 0 ? Math.round((content.filter(c => c.has_generated_images).length / totalDraft) * 100) : 0}%` },
{ label: 'In Review', value: totalReview },
{ label: 'Published', value: totalPublished },
],
progress: {
value: content.filter(c => c.status === 'draft').length > 0 ? Math.round((content.filter(c => c.has_generated_images).length / content.filter(c => c.status === 'draft').length) * 100) : 0,
value: totalDraft > 0 ? Math.round((content.filter(c => c.has_generated_images).length / totalDraft) * 100) : 0,
label: 'Have Images',
color: 'blue',
},
hint: content.filter(c => c.status === 'draft' && !c.has_generated_images).length > 0
? `${content.filter(c => c.status === 'draft' && !c.has_generated_images).length} drafts need images before review`
: 'All drafts have images!',
statusInsight: content.filter(c => c.status === 'draft' && !c.has_generated_images).length > 0
? `Generate images for drafts, then submit to Review.`
: totalDraft > 0
? `Select drafts and submit to Review for approval.`
: `No drafts. Generate content from Tasks page.`,
}}
moduleStats={{
title: 'Writer Module',
pipeline: [
{
fromLabel: 'Tasks',
fromValue: totalCount,
fromHref: '/writer/tasks',
actionLabel: 'Generate Content',
toLabel: 'Drafts',
toValue: content.filter(c => c.status === 'draft').length,
progress: 100,
color: 'blue',
},
{
fromLabel: 'Drafts',
fromValue: content.filter(c => c.status === 'draft').length,
actionLabel: 'Generate Images',
toLabel: 'Images',
toValue: content.filter(c => c.has_generated_images).length,
toHref: '/writer/images',
progress: content.filter(c => c.status === 'draft').length > 0 ? Math.round((content.filter(c => c.has_generated_images).length / content.filter(c => c.status === 'draft').length) * 100) : 0,
color: 'purple',
},
{
fromLabel: 'Ready',
fromValue: content.filter(c => c.status === 'review').length,
fromHref: '/writer/review',
actionLabel: 'Review & Publish',
toLabel: 'Published',
toValue: content.filter(c => c.status === 'published').length,
toHref: '/writer/published',
progress: content.filter(c => c.status === 'review').length > 0 ? Math.round((content.filter(c => c.status === 'published').length / (content.filter(c => c.status === 'review').length + content.filter(c => c.status === 'published').length)) * 100) : 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: totalCount, color: 'blue' },
{ label: 'Images Created', value: totalImagesCount, color: 'purple' },
{ label: 'Published', value: content.filter(c => c.status === 'published').length, color: 'green' },
],
analyticsHref: '/account/usage',
}}
module="writer"
showCredits={true}
analyticsHref="/account/usage"
/>
{/* Progress Modal for AI Functions */}

87
frontend/src/pages/Writer/Images.tsx
View File

@@ -27,7 +27,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';
import StandardThreeWidgetFooter from '../../components/dashboard/StandardThreeWidgetFooter';
export default function Images() {
const toast = useToast();
@@ -664,84 +664,35 @@ export default function Images() {
)}
</Modal>
{/* Three Widget Footer - Section 3 Layout */}
<ThreeWidgetFooter
{/* Three Widget Footer - Section 3 Layout with Standardized Workflow Widget */}
<StandardThreeWidgetFooter
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 },
{ label: 'Content Items', value: totalCount },
{ label: 'Complete', value: totalComplete, percentage: `${totalCount > 0 ? Math.round((totalComplete / totalCount) * 100) : 0}%` },
{ label: 'Partial', value: totalPartial },
{ label: 'Pending', value: totalPending },
],
progress: {
value: totalCount > 0 ? Math.round((images.filter(i => i.images?.some(img => img.status === 'generated')).length / totalCount) * 100) : 0,
label: 'Generated',
value: totalCount > 0 ? Math.round((totalComplete / totalCount) * 100) : 0,
label: 'Complete',
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`
hint: totalPending > 0
? `${totalPending} content item${totalPending !== 1 ? 's' : ''} need image generation`
: 'All images generated!',
statusInsight: totalPending > 0
? `Select content items and generate images for articles.`
: totalComplete > 0
? `Images ready. Submit content to Review for publishing.`
: `No content with image prompts. Generate content first.`,
}}
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: totalImagesCount,
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: totalImagesCount, color: 'purple' },
{ label: 'Articles Published', value: 0, color: 'green' },
],
analyticsHref: '/account/usage',
}}
module="writer"
showCredits={true}
analyticsHref="/account/usage"
/>
</>
);

66
frontend/src/pages/Writer/Review.tsx
View File

@@ -21,7 +21,7 @@ import { createReviewPageConfig } from '../../config/pages/review.config';
import { useSectorStore } from '../../store/sectorStore';
import { usePageSizeStore } from '../../store/pageSizeStore';
import PageHeader from '../../components/common/PageHeader';
import ThreeWidgetFooter from '../../components/dashboard/ThreeWidgetFooter';
import StandardThreeWidgetFooter from '../../components/dashboard/StandardThreeWidgetFooter';
export default function Review() {
const toast = useToast();
@@ -487,7 +487,7 @@ export default function Review() {
/>
{/* Three Widget Footer - Section 3 Layout */}
<ThreeWidgetFooter
<StandardThreeWidgetFooter
submoduleColor="amber"
pageProgress={{
title: 'Page Progress',
@@ -504,65 +504,11 @@ export default function Review() {
hint: totalCount > 0
? `${totalCount} article${totalCount !== 1 ? 's' : ''} ready for review and publishing`
: 'No content pending review',
statusInsight: totalCount > 0
? `Review content, edit if needed, then approve for publishing.`
: `No content in review. Submit drafts from Content page.`,
}}
moduleStats={{
title: 'Writer Module',
pipeline: [
{
fromLabel: 'Tasks',
fromValue: totalTasks,
fromHref: '/writer/tasks',
actionLabel: 'Generate Content',
toLabel: 'Drafts',
toValue: totalDrafts,
toHref: '/writer/content',
progress: totalTasks > 0 ? Math.round((totalDrafts / totalTasks) * 100) : 0,
color: 'blue',
},
{
fromLabel: 'Drafts',
fromValue: totalDrafts,
fromHref: '/writer/content',
actionLabel: 'Generate Images',
toLabel: 'Images',
toValue: totalImagesCount,
toHref: '/writer/images',
progress: totalDrafts > 0 ? Math.round((totalImagesCount / totalDrafts) * 100) : 0,
color: 'purple',
},
{
fromLabel: 'Ready',
fromValue: totalCount,
fromHref: '/writer/review',
actionLabel: 'Review & Publish',
toLabel: 'Published',
toValue: totalApproved,
toHref: '/writer/approved',
progress: totalCount > 0 ? Math.round((totalApproved / (totalCount + totalApproved)) * 100) : 0,
color: 'green',
},
],
links: [
{ label: 'Tasks', href: '/writer/tasks' },
{ label: 'Content', href: '/writer/content' },
{ label: 'Images', href: '/writer/images' },
{ label: 'Published', href: '/writer/approved' },
],
}}
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: totalDrafts + totalCount + totalApproved, color: 'blue' },
{ label: 'Images Created', value: totalImagesCount, color: 'purple' },
{ label: 'Articles Published', value: totalApproved, color: 'green' },
],
analyticsHref: '/account/usage',
}}
module="writer"
/>
</>
);

83
frontend/src/pages/Writer/Tasks.tsx
View File

@@ -31,7 +31,7 @@ import { createTasksPageConfig } from '../../config/pages/tasks.config';
import { useSectorStore } from '../../store/sectorStore';
import { usePageSizeStore } from '../../store/pageSizeStore';
import PageHeader from '../../components/common/PageHeader';
import ThreeWidgetFooter from '../../components/dashboard/ThreeWidgetFooter';
import StandardThreeWidgetFooter from '../../components/dashboard/StandardThreeWidgetFooter';
import { DocumentTextIcon } from '@heroicons/react/24/outline';
export default function Tasks() {
@@ -546,84 +546,35 @@ export default function Tasks() {
}}
/>
{/* Three Widget Footer - Section 3 Layout */}
<ThreeWidgetFooter
{/* Three Widget Footer - Section 3 Layout with Standardized Widgets */}
<StandardThreeWidgetFooter
submoduleColor="blue"
module="writer"
pageProgress={{
title: 'Page Progress',
submoduleColor: 'blue',
metrics: [
{ label: 'Total', value: totalCount },
{ label: 'Complete', value: tasks.filter(t => t.status === 'completed').length, percentage: `${totalCount > 0 ? Math.round((tasks.filter(t => t.status === 'completed').length / totalCount) * 100) : 0}%` },
{ label: 'Queue', value: tasks.filter(t => t.status === 'queued').length },
{ label: 'Processing', value: tasks.filter(t => t.status === 'in_progress').length },
{ label: 'Complete', value: totalCompleted, percentage: `${totalCount > 0 ? Math.round((totalCompleted / totalCount) * 100) : 0}%` },
{ label: 'Queue', value: totalQueued },
{ label: 'Processing', value: totalProcessing },
],
progress: {
value: totalCount > 0 ? Math.round((tasks.filter(t => t.status === 'completed').length / totalCount) * 100) : 0,
value: totalCount > 0 ? Math.round((totalCompleted / totalCount) * 100) : 0,
label: 'Generated',
color: 'blue',
},
hint: tasks.filter(t => t.status === 'queued').length > 0
? `${tasks.filter(t => t.status === 'queued').length} tasks in queue for content generation`
hint: totalQueued > 0
? `${totalQueued} tasks in queue for content generation`
: 'All tasks processed!',
statusInsight: totalQueued > 0
? `Select tasks and run content generation to create articles.`
: totalCompleted > 0
? `Content generated. Review drafts on the Content page.`
: `No tasks yet. Queue ideas from the Planner Ideas page.`,
}}
moduleStats={{
title: 'Writer Module',
pipeline: [
{
fromLabel: 'Tasks',
fromValue: totalCount,
actionLabel: 'Generate Content',
toLabel: 'Drafts',
toValue: tasks.filter(t => t.status === 'completed').length,
toHref: '/writer/content',
progress: totalCount > 0 ? Math.round((tasks.filter(t => t.status === 'completed').length / totalCount) * 100) : 0,
color: 'blue',
},
{
fromLabel: 'Drafts',
fromValue: tasks.filter(t => t.status === 'completed').length,
fromHref: '/writer/content',
actionLabel: 'Generate Images',
toLabel: 'Images',
toValue: totalImagesCount,
toHref: '/writer/images',
progress: 0,
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: clusters.reduce((sum, c) => sum + (c.keywords_count || 0), 0), color: 'blue' },
{ label: 'Clusters Created', value: clusters.length, color: 'green' },
{ label: 'Ideas Generated', value: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0), color: 'amber' },
],
writerItems: [
{ label: 'Content Generated', value: tasks.filter(t => t.status === 'completed').length, color: 'blue' },
{ label: 'Images Created', value: totalImagesCount, color: 'purple' },
{ label: 'Published', value: 0, color: 'green' },
],
analyticsHref: '/account/usage',
}}
showCredits={true}
analyticsHref="/account/usage"
/>
{/* Progress Modal for AI Functions */}