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

Section 2 Part 3

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-03 08:11:41 +00:00
parent 935c7234b1
commit 4d6ee21408
15 changed files with 1209 additions and 895 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
frontend/src/pages/Automation/AutomationPage.tsx
View File

@@ -448,7 +448,7 @@ const AutomationPage: React.FC = () => {
{/* Compact Schedule & Controls Panel */}
{config && (
<ComponentCard className="border-0 overflow-hidden rounded-2xl bg-gradient-to-br from-brand-600 to-brand-700 [&>div]:!py-3 [&>div]:!px-4">
<ComponentCard className="mt-[10px] border-0 overflow-hidden rounded-2xl bg-gradient-to-br from-brand-600 to-brand-700 [&>div]:!py-3 [&>div]:!px-4">
<div className="flex items-center justify-between gap-4">
<div className="flex items-center gap-4 flex-wrap">
<div className="flex items-center gap-2">
@@ -554,20 +554,20 @@ const AutomationPage: React.FC = () => {
{/* Metrics Summary Cards */}
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
{/* Keywords */}
<div className="bg-gradient-to-br from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/20 rounded-xl p-4 border-2 border-brand-200 dark:border-brand-800">
<div className="bg-white dark:bg-gray-900 rounded-xl p-4">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<div className="size-8 rounded-lg bg-gradient-to-br from-brand-500 to-brand-600 flex items-center justify-center">
<ListIcon className="size-4 text-white" />
<div className="size-8 rounded-lg bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
<ListIcon className="size-4 text-brand-600 dark:text-brand-400" />
</div>
<div className="text-base font-bold text-brand-900 dark:text-brand-100">Keywords</div>
<div className="text-base font-bold text-gray-900 dark:text-white">Keywords</div>
</div>
{(() => {
const res = getStageResult(1);
const total = res?.total ?? pipelineOverview[0]?.counts?.total ?? metrics?.keywords?.total ?? pipelineOverview[0]?.pending ?? 0;
return (
<div className="text-right">
<div className="text-3xl font-bold text-brand-900">{total}</div>
<div className="text-3xl font-bold text-brand-600">{total}</div>
</div>
);
})()}
@@ -578,28 +578,28 @@ const AutomationPage: React.FC = () => {
const mapped = res?.mapped ?? pipelineOverview[0]?.counts?.mapped ?? metrics?.keywords?.mapped ?? 0;
return (
renderMetricRow([
{ label: 'New:', value: newCount, colorCls: 'text-brand-700' },
{ label: 'Mapped:', value: mapped, colorCls: 'text-brand-700' },
{ label: 'New:', value: newCount, colorCls: 'text-brand-600' },
{ label: 'Mapped:', value: mapped, colorCls: 'text-brand-600' },
])
);
})()}
</div>
{/* Clusters */}
<div className="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-xl p-4 border-2 border-purple-200 dark:border-purple-800">
<div className="bg-white dark:bg-gray-900 rounded-xl p-4">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<div className="size-8 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center">
<GroupIcon className="size-4 text-white" />
<div className="size-8 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
<GroupIcon className="size-4 text-purple-600 dark:text-purple-400" />
</div>
<div className="text-base font-bold text-purple-900 dark:text-purple-100">Clusters</div>
<div className="text-base font-bold text-gray-900 dark:text-white">Clusters</div>
</div>
{(() => {
const res = getStageResult(2);
const total = res?.total ?? pipelineOverview[1]?.counts?.total ?? metrics?.clusters?.total ?? pipelineOverview[1]?.pending ?? 0;
return (
<div className="text-right">
<div className="text-3xl font-bold text-purple-900">{total}</div>
<div className="text-3xl font-bold text-purple-600">{total}</div>
</div>
);
})()}
@@ -610,28 +610,28 @@ const AutomationPage: React.FC = () => {
const mapped = res?.mapped ?? pipelineOverview[1]?.counts?.mapped ?? metrics?.clusters?.mapped ?? 0;
return (
renderMetricRow([
{ label: 'New:', value: newCount, colorCls: 'text-purple-700' },
{ label: 'Mapped:', value: mapped, colorCls: 'text-purple-700' },
{ label: 'New:', value: newCount, colorCls: 'text-purple-600' },
{ label: 'Mapped:', value: mapped, colorCls: 'text-purple-600' },
])
);
})()}
</div>
{/* Ideas */}
<div className="bg-gradient-to-br from-warning-50 to-warning-100 dark:from-warning-900/20 dark:to-warning-800/20 rounded-xl p-4 border-2 border-warning-200 dark:border-warning-800">
<div className="bg-white dark:bg-gray-900 rounded-xl p-4">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<div className="size-8 rounded-lg bg-gradient-to-br from-warning-500 to-warning-600 flex items-center justify-center">
<BoltIcon className="size-4 text-white" />
<div className="size-8 rounded-lg bg-warning-100 dark:bg-warning-900/30 flex items-center justify-center">
<BoltIcon className="size-4 text-warning-600 dark:text-warning-400" />
</div>
<div className="text-base font-bold text-warning-900 dark:text-warning-100">Ideas</div>
<div className="text-base font-bold text-gray-900 dark:text-white">Ideas</div>
</div>
{(() => {
const res = getStageResult(3);
const total = res?.total ?? pipelineOverview[2]?.counts?.total ?? metrics?.ideas?.total ?? pipelineOverview[2]?.pending ?? 0;
return (
<div className="text-right">
<div className="text-3xl font-bold text-warning-900">{total}</div>
<div className="text-3xl font-bold text-warning-600">{total}</div>
</div>
);
})()}
@@ -643,29 +643,29 @@ const AutomationPage: React.FC = () => {
const completed = res?.completed ?? pipelineOverview[2]?.counts?.completed ?? metrics?.ideas?.completed ?? 0;
return (
renderMetricRow([
{ label: 'New:', value: newCount, colorCls: 'text-warning-700' },
{ label: 'Queued:', value: queued, colorCls: 'text-warning-700' },
{ label: 'Completed:', value: completed, colorCls: 'text-warning-700' },
{ label: 'New:', value: newCount, colorCls: 'text-warning-600' },
{ label: 'Queued:', value: queued, colorCls: 'text-warning-600' },
{ label: 'Completed:', value: completed, colorCls: 'text-warning-600' },
])
);
})()}
</div>
{/* Content */}
<div className="bg-gradient-to-br from-success-50 to-success-100 dark:from-success-900/20 dark:to-success-800/20 rounded-xl p-4 border-2 border-success-200 dark:border-success-800">
<div className="bg-white dark:bg-gray-900 rounded-xl p-4">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<div className="size-8 rounded-lg bg-gradient-to-br from-success-500 to-success-600 flex items-center justify-center">
<FileTextIcon className="size-4 text-white" />
<div className="size-8 rounded-lg bg-success-100 dark:bg-success-900/30 flex items-center justify-center">
<FileTextIcon className="size-4 text-success-600 dark:text-success-400" />
</div>
<div className="text-base font-bold text-success-900 dark:text-success-100">Content</div>
<div className="text-base font-bold text-gray-900 dark:text-white">Content</div>
</div>
{(() => {
const res = getStageResult(4);
const total = res?.total ?? pipelineOverview[3]?.counts?.total ?? metrics?.content?.total ?? pipelineOverview[3]?.pending ?? 0;
return (
<div className="text-right">
<div className="text-3xl font-bold text-success-900">{total}</div>
<div className="text-3xl font-bold text-success-600">{total}</div>
</div>
);
})()}
@@ -677,29 +677,29 @@ const AutomationPage: React.FC = () => {
const publish = res?.published ?? res?.publish ?? pipelineOverview[3]?.counts?.published ?? metrics?.content?.published ?? 0;
return (
renderMetricRow([
{ label: 'Draft:', value: draft, colorCls: 'text-success-700' },
{ label: 'Review:', value: review, colorCls: 'text-success-700' },
{ label: 'Publish:', value: publish, colorCls: 'text-success-700' },
{ label: 'Draft:', value: draft, colorCls: 'text-success-600' },
{ label: 'Review:', value: review, colorCls: 'text-success-600' },
{ label: 'Publish:', value: publish, colorCls: 'text-success-600' },
])
);
})()}
</div>
{/* Images */}
<div className="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-xl p-4 border-2 border-purple-200 dark:border-purple-800">
<div className="bg-white dark:bg-gray-900 rounded-xl p-4">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<div className="size-8 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center">
<FileIcon className="size-4 text-white" />
<div className="size-8 rounded-lg bg-info-100 dark:bg-info-900/30 flex items-center justify-center">
<FileIcon className="size-4 text-info-600 dark:text-info-400" />
</div>
<div className="text-base font-bold text-purple-900 dark:text-purple-100">Images</div>
<div className="text-base font-bold text-gray-900 dark:text-white">Images</div>
</div>
{(() => {
const res = getStageResult(6);
const total = res?.total ?? pipelineOverview[5]?.counts?.total ?? metrics?.images?.total ?? pipelineOverview[5]?.pending ?? 0;
return (
<div className="text-right">
<div className="text-3xl font-bold text-purple-900">{total}</div>
<div className="text-3xl font-bold text-info-600">{total}</div>
</div>
);
})()}
@@ -708,17 +708,17 @@ const AutomationPage: React.FC = () => {
const res = getStageResult(6); // stage 6 is Image Prompts -> Images
if (res && typeof res === 'object') {
const entries = Object.entries(res);
const items = entries.slice(0,3).map(([k, v]) => ({ label: `${k.replace(/_/g, ' ')}:`, value: Number(v) || 0, colorCls: 'text-purple-700' }));
const items = entries.slice(0,3).map(([k, v]) => ({ label: `${k.replace(/_/g, ' ')}:`, value: Number(v) || 0, colorCls: 'text-info-600' }));
return renderMetricRow(items);
}
const counts = pipelineOverview[5]?.counts ?? metrics?.images ?? null;
if (counts && typeof counts === 'object') {
const entries = Object.entries(counts);
const items = entries.slice(0,3).map(([k, v]) => ({ label: `${k.replace(/_/g, ' ')}:`, value: Number(v) || 0, colorCls: 'text-purple-700' }));
const items = entries.slice(0,3).map(([k, v]) => ({ label: `${k.replace(/_/g, ' ')}:`, value: Number(v) || 0, colorCls: 'text-info-600' }));
return renderMetricRow(items);
}
return renderMetricRow([
{ label: 'Pending:', value: pipelineOverview[5]?.pending ?? metrics?.images?.pending ?? 0, colorCls: 'text-purple-700' },
{ label: 'Pending:', value: pipelineOverview[5]?.pending ?? metrics?.images?.pending ?? 0, colorCls: 'text-info-600' },
]);
})()}
</div>
@@ -794,19 +794,25 @@ const AutomationPage: React.FC = () => {
: dbPending;
const progressPercent = total > 0 ? Math.min(Math.round((processed / total) * 100), 100) : 0;
// Determine the left border color based on stage
const stageBorderColors = ['border-l-brand-500', 'border-l-purple-500', 'border-l-warning-500', 'border-l-gray-600'];
const stageBorderColor = stageBorderColors[index] || 'border-l-brand-500';
return (
<div
key={stage.number}
className={`
relative rounded-2xl border-2 p-4 transition-all
relative rounded-xl border border-gray-200 dark:border-gray-800 p-4 transition-all bg-white dark:bg-gray-900
border-l-[5px] ${stageBorderColor}
${isActive
? 'border-brand-500 bg-brand-50 dark:bg-brand-500/10 shadow-lg'
? 'shadow-lg ring-2 ring-brand-200 dark:ring-brand-800'
: isComplete
? 'border-success-500 bg-success-50 dark:bg-success-500/10'
? ''
: stage.pending > 0
? `border-gray-200 bg-white dark:bg-white/[0.03] dark:border-gray-800 ${stageConfig.hoverColor} hover:shadow-lg`
: 'border-gray-200 bg-gray-50 dark:bg-white/[0.02] dark:border-gray-800'
? `${stageConfig.hoverColor} hover:shadow-lg`
: ''
}
}
`}
>
@@ -918,19 +924,24 @@ const AutomationPage: React.FC = () => {
: dbPending;
const progressPercent = total > 0 ? Math.min(Math.round((processed / total) * 100), 100) : 0;
// Determine the left border color based on stage (5=brand, 6=purple)
const stageBorderColors56 = ['border-l-brand-500', 'border-l-purple-500'];
const stageBorderColor = stageBorderColors56[index] || 'border-l-brand-500';
return (
<div
key={stage.number}
className={`
relative rounded-2xl border-2 p-4 transition-all
relative rounded-xl border border-gray-200 dark:border-gray-800 p-4 transition-all bg-white dark:bg-gray-900
border-l-[5px] ${stageBorderColor}
${isActive
? 'border-brand-500 bg-brand-50 dark:bg-brand-500/10 shadow-lg'
? 'shadow-lg ring-2 ring-brand-200 dark:ring-brand-800'
: isComplete
? 'border-success-500 bg-success-50 dark:bg-success-500/10'
? ''
: stage.pending > 0
? `border-gray-200 bg-white dark:bg-white/[0.03] dark:border-gray-800 ${stageConfig.hoverColor} hover:shadow-lg`
: 'border-gray-200 bg-gray-50 dark:bg-white/[0.02] dark:border-gray-800'
? `${stageConfig.hoverColor} hover:shadow-lg`
: ''
}
`}
>
@@ -1030,14 +1041,15 @@ const AutomationPage: React.FC = () => {
return (
<div
className={`
relative rounded-2xl border-2 p-4 transition-all
relative rounded-xl border border-gray-200 dark:border-gray-800 p-4 transition-all bg-white dark:bg-gray-900
border-l-[5px] border-l-success-500
${isActive
? 'border-success-500 bg-success-50 dark:bg-success-500/10 shadow-lg'
? 'shadow-lg ring-2 ring-success-200 dark:ring-success-800'
: isComplete
? 'border-success-500 bg-success-50 dark:bg-success-500/10'
? ''
: pendingReview > 0
? 'border-success-300 bg-success-50 dark:bg-success-900/20 dark:border-success-700'
: 'border-gray-200 bg-gray-50 dark:bg-white/[0.02] dark:border-gray-800'
? 'hover:border-success-500 hover:shadow-lg'
: ''
}
`}
>