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

autoamtiona nd other pages udpates,

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-01 01:40:34 +00:00
parent a02e485f7d
commit 0d3e25e50f
11 changed files with 701 additions and 434 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
frontend/src/components/Automation/CurrentProcessingCardV2.tsx
View File

@@ -191,7 +191,7 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
};
return (
<div className={`rounded-xl p-5 mb-6 border-2 transition-all ${
<div className={`rounded-2xl p-5 mb-6 border-2 transition-all ${
isPaused
? 'bg-gradient-to-r from-warning-50 to-warning-100 dark:from-warning-900/20 dark:to-warning-800/20 border-warning-400'
: 'bg-gradient-to-r from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/20 border-brand-400'
@@ -199,24 +199,26 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
{/* Header Row */}
<div className="flex items-start justify-between mb-4">
<div className="flex items-center gap-3">
<div className={`size-10 rounded-lg flex items-center justify-center shadow-md ${
<div className={`size-12 rounded-xl flex items-center justify-center shadow-lg ${
isPaused
? 'bg-gradient-to-br from-warning-500 to-warning-600'
: 'bg-gradient-to-br from-brand-500 to-brand-600'
}`}>
{isPaused ? (
<PauseIcon className="w-5 h-5 text-white" />
<PauseIcon className="w-6 h-6 text-white" />
) : (
<BoltIcon className="w-5 h-5 text-white animate-pulse" />
<BoltIcon className="w-6 h-6 text-white animate-pulse" />
)}
</div>
<div>
<h2 className="text-lg font-bold text-gray-900 dark:text-white">
<h2 className="text-xl font-bold text-gray-900 dark:text-white">
{isPaused ? 'Automation Paused' : 'Automation In Progress'}
</h2>
<div className="text-sm text-gray-600 dark:text-gray-400">
Stage {currentRun.current_stage}: {stageName}
<span className={`ml-2 px-1.5 py-0.5 rounded text-xs ${
<div className="flex items-center gap-2 text-sm">
<span className={`font-semibold ${isPaused ? 'text-warning-700' : 'text-brand-700'}`}>
Stage {currentRun.current_stage}: {stageName}
</span>
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
isPaused ? 'bg-warning-200 text-warning-800' : 'bg-brand-200 text-brand-800'
}`}>
{stageOverview?.type || 'AI'}
@@ -225,13 +227,14 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
</div>
</div>
{/* Close and Actions */}
<div className="flex items-center gap-2">
<Button variant="ghost" size="sm" onClick={onClose}>
<XMarkIcon className="w-4 h-4" />
<span className="ml-1">Close</span>
</Button>
</div>
{/* Close Button - Top Right */}
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors p-1"
title="Close"
>
<XMarkIcon className="w-5 h-5" />
</button>
</div>
{/* Progress Section */}
@@ -241,37 +244,38 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
{/* Progress Text */}
<div className="flex items-baseline justify-between mb-2">
<div className="flex items-baseline gap-3">
<span className={`text-4xl font-bold ${isPaused ? 'text-warning-600' : 'text-brand-600'}`}>
<span className={`text-5xl font-bold ${isPaused ? 'text-warning-600' : 'text-brand-600'}`}>
{displayPercent}%
</span>
<span className="text-sm text-gray-500">
<span className="text-base font-medium text-gray-600">
{realProcessed}/{realTotal} {outputLabel}
</span>
</div>
<span className="text-xs text-gray-400">
<span className="text-sm font-medium text-gray-500">
{realTotal - realProcessed} remaining
</span>
</div>
{/* Progress Bar */}
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 overflow-hidden">
{/* Progress Bar - Vibrant */}
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 overflow-hidden shadow-inner">
<div
className={`h-3 rounded-full transition-all duration-300 ${
className={`h-4 rounded-full transition-all duration-300 shadow-sm ${
isPaused
? 'bg-gradient-to-r from-warning-400 to-warning-600'
: 'bg-gradient-to-r from-brand-400 to-brand-600'
? 'bg-gradient-to-r from-warning-400 via-warning-500 to-warning-600'
: 'bg-gradient-to-r from-brand-400 via-brand-500 to-brand-600'
} ${!isPaused && displayPercent < 100 ? 'animate-pulse' : ''}`}
style={{ width: `${Math.min(displayPercent, 100)}%` }}
/>
</div>
{/* Control Buttons */}
{/* Control Buttons - Clean Design */}
<div className="flex items-center gap-3 mt-4">
{currentRun.status === 'running' ? (
<Button
onClick={handlePause}
disabled={isPausing}
variant="secondary"
variant="outline"
tone="warning"
size="sm"
startIcon={<PauseIcon className="w-4 h-4" />}
>
@@ -282,6 +286,7 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
onClick={handleResume}
disabled={isResuming}
variant="primary"
tone="success"
size="sm"
startIcon={<PlayIcon className="w-4 h-4" />}
>
@@ -289,43 +294,44 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
</Button>
) : null}
<button
<Button
onClick={handleCancel}
disabled={isCancelling}
className="text-sm text-gray-500 hover:text-error-600 transition-colors"
variant="ghost"
tone="neutral"
size="sm"
>
<XMarkIcon className="w-4 h-4 inline mr-1" />
{isCancelling ? 'Cancelling...' : 'Cancel'}
</button>
</Button>
</div>
</div>
{/* Metrics - 30% width */}
<div className="w-44 space-y-2">
<div className="bg-white dark:bg-gray-800 rounded-lg px-3 py-2 border border-gray-200 dark:border-gray-700 flex items-center justify-between">
<div className="bg-white dark:bg-gray-800 rounded-xl px-3 py-2.5 border border-gray-200 dark:border-gray-700 flex items-center justify-between">
<div className="flex items-center gap-1.5">
<ClockIcon className="w-4 h-4 text-gray-400" />
<span className="text-xs text-gray-500 uppercase">Duration</span>
<span className="text-xs font-medium text-gray-500 uppercase">Duration</span>
</div>
<span className="text-sm font-bold text-gray-900 dark:text-white">{formatDuration(currentRun.started_at)}</span>
<span className="text-base font-bold text-gray-900 dark:text-white">{formatDuration(currentRun.started_at)}</span>
</div>
<div className="bg-white dark:bg-gray-800 rounded-lg px-3 py-2 border border-gray-200 dark:border-gray-700 flex items-center justify-between">
<div className="bg-white dark:bg-gray-800 rounded-xl px-3 py-2.5 border border-gray-200 dark:border-gray-700 flex items-center justify-between">
<div className="flex items-center gap-1.5">
<BoltIcon className="w-4 h-4 text-warning-500" />
<span className="text-xs text-gray-500 uppercase">Credits</span>
<span className="text-xs font-medium text-gray-500 uppercase">Credits</span>
</div>
<span className="text-sm font-bold text-warning-600">{currentRun.total_credits_used}</span>
<span className="text-base font-bold text-warning-600">{currentRun.total_credits_used}</span>
</div>
<div className="bg-white dark:bg-gray-800 rounded-lg px-3 py-2 border border-gray-200 dark:border-gray-700 flex items-center justify-between">
<span className="text-xs text-gray-500 uppercase">Stage</span>
<span className="text-sm font-bold text-gray-900 dark:text-white">{currentRun.current_stage} of 7</span>
<div className="bg-white dark:bg-gray-800 rounded-xl px-3 py-2.5 border border-gray-200 dark:border-gray-700 flex items-center justify-between">
<span className="text-xs font-medium text-gray-500 uppercase">Stage</span>
<span className="text-base font-bold text-gray-900 dark:text-white">{currentRun.current_stage} of 7</span>
</div>
<div className="bg-white dark:bg-gray-800 rounded-lg px-3 py-2 border border-gray-200 dark:border-gray-700 flex items-center justify-between">
<span className="text-xs text-gray-500 uppercase">Status</span>
<span className={`text-sm font-bold ${isPaused ? 'text-warning-600' : 'text-success-600'}`}>
<div className="bg-white dark:bg-gray-800 rounded-xl px-3 py-2.5 border border-gray-200 dark:border-gray-700 flex items-center justify-between">
<span className="text-xs font-medium text-gray-500 uppercase">Status</span>
<span className={`text-base font-bold ${isPaused ? 'text-warning-600' : 'text-success-600'}`}>
{isPaused ? 'Paused' : 'Running'}
</span>
</div>

88
frontend/src/components/Automation/GlobalProgressBar.tsx
View File

@@ -7,15 +7,15 @@ import React from 'react';
import { AutomationRun, InitialSnapshot, StageProgress, GlobalProgress } from '../../services/automationService';
import { BoltIcon, CheckCircleIcon, PauseIcon } from '../../icons';
// Stage colors matching AutomationPage STAGE_CONFIG
// Stage colors matching AutomationPage STAGE_CONFIG exactly
const STAGE_COLORS = [
'from-brand-500 to-brand-600', // Stage 1: Keywords → Clusters
'from-purple-500 to-purple-600', // Stage 2: Clusters → Ideas
'from-purple-500 to-purple-600', // Stage 3: Ideas → Tasks
'from-success-500 to-success-600', // Stage 4: Tasks → Content
'from-warning-500 to-warning-600', // Stage 5: Content → Image Prompts
'from-purple-500 to-purple-600', // Stage 6: Image Prompts → Images
'from-success-500 to-success-600', // Stage 7: Manual Review Gate
'from-brand-500 to-brand-600', // Stage 1: Keywords → Clusters (brand/teal)
'from-purple-500 to-purple-600', // Stage 2: Clusters → Ideas (purple)
'from-warning-500 to-warning-600', // Stage 3: Ideas → Tasks (amber)
'from-brand-500 to-brand-600', // Stage 4: Tasks → Content (brand/teal)
'from-success-500 to-success-600', // Stage 5: Content → Image Prompts (green)
'from-purple-500 to-purple-600', // Stage 6: Image Prompts → Images (purple)
'from-success-500 to-success-600', // Stage 7: Review Gate (green)
];
const STAGE_NAMES = [
@@ -25,7 +25,7 @@ const STAGE_NAMES = [
'Tasks',
'Content',
'Prompts',
'Review',
'Publish',
];
// Helper to get processed count from stage result using correct key
@@ -76,13 +76,9 @@ const GlobalProgressBar: React.FC<GlobalProgressBarProps> = ({
// Fallback: Calculate from currentRun and initialSnapshot
const snapshot = initialSnapshot || (currentRun as any)?.initial_snapshot;
if (!snapshot) {
return { percentage: 0, completed: 0, total: 0 };
}
const totalInitial = snapshot.total_initial_items || 0;
// Calculate total completed from all stage results
let totalCompleted = 0;
for (let i = 1; i <= 7; i++) {
const result = (currentRun as any)[`stage_${i}_result`];
if (result) {
@@ -90,12 +86,26 @@ const GlobalProgressBar: React.FC<GlobalProgressBarProps> = ({
}
}
const percentage = totalInitial > 0 ? Math.round((totalCompleted / totalInitial) * 100) : 0;
// Calculate total items - sum of ALL stage initials from snapshot (updated after each stage)
// This accounts for items created during the run (e.g., keywords create clusters, clusters create ideas)
let totalItems = 0;
if (snapshot) {
for (let i = 1; i <= 7; i++) {
const stageInitial = snapshot[`stage_${i}_initial`] || 0;
totalItems += stageInitial;
}
}
// Use the updated total from snapshot, or fallback to total_initial_items
const finalTotal = totalItems > 0 ? totalItems : (snapshot?.total_initial_items || 0);
// Ensure completed never exceeds total (clamp percentage to 100%)
const percentage = finalTotal > 0 ? Math.round((totalCompleted / finalTotal) * 100) : 0;
return {
percentage: Math.min(percentage, 100),
completed: totalCompleted,
total: totalInitial,
total: finalTotal,
};
};
@@ -139,46 +149,46 @@ const GlobalProgressBar: React.FC<GlobalProgressBarProps> = ({
return (
<div className={`
rounded-xl p-4 mb-6 border-2 transition-all
rounded-2xl p-5 mb-6 border-2 transition-all
${isPaused
? 'bg-gradient-to-r from-warning-50 to-warning-100 dark:from-warning-900/20 dark:to-warning-800/20 border-warning-300 dark:border-warning-700'
: 'bg-gradient-to-r from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/20 border-brand-300 dark:border-brand-700'
}
`}>
{/* Header Row */}
<div className="flex justify-between items-center mb-3">
<div className="flex justify-between items-center mb-4">
<div className="flex items-center gap-3">
<div className={`
size-10 rounded-lg flex items-center justify-center shadow-md
size-12 rounded-xl flex items-center justify-center shadow-lg
${isPaused
? 'bg-gradient-to-br from-warning-500 to-warning-600'
: 'bg-gradient-to-br from-brand-500 to-brand-600'
}
`}>
{isPaused ? (
<PauseIcon className="w-5 h-5 text-white" />
<PauseIcon className="w-6 h-6 text-white" />
) : percentage >= 100 ? (
<CheckCircleIcon className="w-5 h-5 text-white" />
<CheckCircleIcon className="w-6 h-6 text-white" />
) : (
<BoltIcon className="w-5 h-5 text-white animate-pulse" />
<BoltIcon className="w-6 h-6 text-white animate-pulse" />
)}
</div>
<div>
<div className={`font-bold ${isPaused ? 'text-warning-800 dark:text-warning-200' : 'text-brand-800 dark:text-brand-200'}`}>
<div className={`text-lg font-bold ${isPaused ? 'text-warning-800 dark:text-warning-200' : 'text-brand-800 dark:text-brand-200'}`}>
{isPaused ? 'Pipeline Paused' : 'Full Pipeline Progress'}
</div>
<div className="text-xs text-gray-600 dark:text-gray-400">
<div className="text-sm text-gray-600 dark:text-gray-400">
Stage {currentStage} of 7 • {formatDuration()}
</div>
</div>
</div>
<div className={`text-3xl font-bold ${isPaused ? 'text-warning-600 dark:text-warning-400' : 'text-brand-600 dark:text-brand-400'}`}>
<div className={`text-4xl font-bold ${isPaused ? 'text-warning-600 dark:text-warning-400' : 'text-brand-600 dark:text-brand-400'}`}>
{percentage}%
</div>
</div>
{/* Segmented Progress Bar */}
<div className="flex h-4 rounded-full overflow-hidden bg-gray-200 dark:bg-gray-700 gap-0.5 mb-2">
{/* Segmented Progress Bar - Taller & More Vibrant */}
<div className="flex h-5 rounded-full overflow-hidden bg-gray-200 dark:bg-gray-700 gap-0.5 mb-3 shadow-inner">
{[1, 2, 3, 4, 5, 6, 7].map(stageNum => {
const status = getStageStatus(stageNum);
const stageColor = STAGE_COLORS[stageNum - 1];
@@ -188,9 +198,9 @@ const GlobalProgressBar: React.FC<GlobalProgressBarProps> = ({
key={stageNum}
className={`flex-1 transition-all duration-500 relative group ${
status === 'completed'
? `bg-gradient-to-r ${stageColor}`
? `bg-gradient-to-r ${stageColor} shadow-sm`
: status === 'active'
? `bg-gradient-to-r ${stageColor} opacity-60 ${!isPaused ? 'animate-pulse' : ''}`
? `bg-gradient-to-r ${stageColor} opacity-70 ${!isPaused ? 'animate-pulse' : ''} shadow-sm`
: 'bg-gray-300 dark:bg-gray-600'
}`}
title={`Stage ${stageNum}: ${STAGE_NAMES[stageNum - 1]}`}
@@ -206,20 +216,22 @@ const GlobalProgressBar: React.FC<GlobalProgressBarProps> = ({
})}
</div>
{/* Footer Row */}
<div className="flex justify-between text-xs text-gray-600 dark:text-gray-400">
<span>{completed} / {total} items processed</span>
<div className="flex gap-4">
{/* Footer Row - Larger Font for Stage Numbers */}
<div className="flex justify-between items-center text-sm text-gray-700 dark:text-gray-300">
<span className="font-medium">{completed} / {total} items processed</span>
<div className="flex gap-3">
{[1, 2, 3, 4, 5, 6, 7].map(stageNum => {
const status = getStageStatus(stageNum);
return (
<span
key={stageNum}
className={`
${status === 'completed' ? 'text-success-600 dark:text-success-400 font-medium' : ''}
${status === 'active' ? `${isPaused ? 'text-warning-600 dark:text-warning-400' : 'text-brand-600 dark:text-brand-400'} font-bold` : ''}
${status === 'pending' ? 'text-gray-400 dark:text-gray-500' : ''}
`}
className={`text-base font-semibold ${
status === 'completed' ? 'text-success-600 dark:text-success-400' : ''
} ${
status === 'active' ? `${isPaused ? 'text-warning-600 dark:text-warning-400' : 'text-brand-600 dark:text-brand-400'}` : ''
} ${
status === 'pending' ? 'text-gray-400 dark:text-gray-500' : ''
}`}
>
{stageNum}
{status === 'completed' && '✓'}

7
frontend/src/components/common/PageHeader.tsx
View File

@@ -116,11 +116,8 @@ export default function PageHeader({
return (
<div className={`${className}`}>
{/* Title now shown in AppHeader - this component only triggers the context update */}
{/* Show description if provided - can be used for additional context */}
{description && (
<p className="text-sm text-gray-500 dark:text-gray-400 mb-2">{description}</p>
)}
{/* Title and description now shown in AppHeader - this component only triggers the context update */}
{/* Description rendering removed - visible in AppHeader tooltip or not needed */}
</div>
);
}

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

@@ -55,7 +55,7 @@ const STAGE_CONFIG = [
{ icon: CheckCircleIcon, color: 'from-brand-500 to-brand-600', textColor: 'text-brand-600 dark:text-brand-400', bgColor: 'bg-brand-100 dark:bg-brand-900/30', hoverColor: 'hover:border-brand-500', name: 'Tasks → Content' },
{ icon: PencilIcon, color: 'from-success-500 to-success-600', textColor: 'text-success-600 dark:text-success-400', bgColor: 'bg-success-100 dark:bg-success-900/30', hoverColor: 'hover:border-success-500', name: 'Content → Image Prompts' },
{ icon: FileIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-100 dark:bg-purple-900/30', hoverColor: 'hover:border-purple-500', name: 'Image Prompts → Images' },
{ icon: PaperPlaneIcon, color: 'from-success-500 to-success-600', textColor: 'text-success-600 dark:text-success-400', bgColor: 'bg-success-100 dark:bg-success-900/30', hoverColor: 'hover:border-success-500', name: 'Review Gate' },
{ icon: PaperPlaneIcon, color: 'from-success-500 to-success-600', textColor: 'text-success-600 dark:text-success-400', bgColor: 'bg-success-100 dark:bg-success-900/30', hoverColor: 'hover:border-success-500', name: 'Review → Published' },
];
const AutomationPage: React.FC = () => {
@@ -292,7 +292,22 @@ const AutomationPage: React.FC = () => {
toast.success('Automation started successfully');
loadCurrentRun();
} catch (error: any) {
toast.error(error.response?.data?.error || 'Failed to start automation');
const errorMsg = error.response?.data?.error || 'Failed to start automation';
// Use informational messages for "no work to do" cases, errors for system/account issues
const isInfoMessage =
errorMsg.toLowerCase().includes('no keywords') ||
errorMsg.toLowerCase().includes('no pending') ||
errorMsg.toLowerCase().includes('nothing to process') ||
errorMsg.toLowerCase().includes('no items') ||
errorMsg.toLowerCase().includes('all stages') ||
errorMsg.toLowerCase().includes('minimum') ||
errorMsg.toLowerCase().includes('at least');
if (isInfoMessage) {
toast.info(errorMsg);
} else {
toast.error(errorMsg);
}
}
};
@@ -382,7 +397,7 @@ const AutomationPage: React.FC = () => {
const visible = items.filter(i => i && (i.value !== undefined && i.value !== null));
if (visible.length === 0) {
return (
<div className="flex text-xs mt-1">
<div className="flex text-sm mt-2">
<div className="flex-1 text-center"></div>
<div className="flex-1 text-center"></div>
<div className="flex-1 text-center"></div>
@@ -392,11 +407,11 @@ const AutomationPage: React.FC = () => {
if (visible.length === 2) {
return (
<div className="flex text-xs mt-1 justify-center gap-6">
<div className="flex text-sm mt-2 justify-center gap-6">
{visible.map((it, idx) => (
<div key={idx} className="w-1/3 text-center">
<span className={`${it.colorCls ?? ''} block`}>{it.label}</span>
<div className="font-bold text-gray-900 dark:text-white">{Number(it.value) || 0}</div>
<span className={`${it.colorCls ?? ''} block font-medium`}>{it.label}</span>
<div className="text-base font-bold text-gray-900 dark:text-white">{Number(it.value) || 0}</div>
</div>
))}
</div>
@@ -405,11 +420,11 @@ const AutomationPage: React.FC = () => {
// default to 3 columns (equally spaced)
return (
<div className="flex text-xs mt-1">
<div className="flex text-sm mt-2">
{items.concat(Array(Math.max(0, 3 - items.length)).fill({ label: '', value: '' })).slice(0,3).map((it, idx) => (
<div key={idx} className="flex-1 text-center">
<span className={`${it.colorCls ?? ''} block`}>{it.label}</span>
<div className="font-bold text-gray-900 dark:text-white">{it.value !== undefined && it.value !== null ? Number(it.value) : ''}</div>
<span className={`${it.colorCls ?? ''} block font-medium`}>{it.label}</span>
<div className="text-base font-bold text-gray-900 dark:text-white">{it.value !== undefined && it.value !== null ? Number(it.value) : ''}</div>
</div>
))}
</div>
@@ -431,7 +446,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-1.5 [&>div]:!px-4">
<ComponentCard className="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">
@@ -539,11 +554,11 @@ const AutomationPage: React.FC = () => {
{/* 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="flex items-center justify-between mb-3">
<div className="flex items-center gap-3">
<div className="size-10 rounded-lg bg-gradient-to-br from-brand-500 to-brand-600 flex items-center justify-center">
<ListIcon className="size-5 text-white" />
<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>
<div className="text-sm font-bold text-brand-900 dark:text-brand-100">Keywords</div>
<div className="text-base font-bold text-brand-900 dark:text-brand-100">Keywords</div>
</div>
{(() => {
const res = getStageResult(1);
@@ -571,11 +586,11 @@ const AutomationPage: React.FC = () => {
{/* 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="flex items-center justify-between mb-3">
<div className="flex items-center gap-3">
<div className="size-10 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center">
<GroupIcon className="size-5 text-white" />
<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>
<div className="text-sm font-bold text-purple-900 dark:text-purple-100">Clusters</div>
<div className="text-base font-bold text-purple-900 dark:text-purple-100">Clusters</div>
</div>
{(() => {
const res = getStageResult(2);
@@ -603,11 +618,11 @@ const AutomationPage: React.FC = () => {
{/* 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="flex items-center justify-between mb-3">
<div className="flex items-center gap-3">
<div className="size-10 rounded-lg bg-gradient-to-br from-warning-500 to-warning-600 flex items-center justify-center">
<BoltIcon className="size-5 text-white" />
<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>
<div className="text-sm font-bold text-warning-900 dark:text-warning-100">Ideas</div>
<div className="text-base font-bold text-warning-900 dark:text-warning-100">Ideas</div>
</div>
{(() => {
const res = getStageResult(3);
@@ -637,11 +652,11 @@ const AutomationPage: React.FC = () => {
{/* 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="flex items-center justify-between mb-3">
<div className="flex items-center gap-3">
<div className="size-10 rounded-lg bg-gradient-to-br from-success-500 to-success-600 flex items-center justify-center">
<FileTextIcon className="size-5 text-white" />
<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>
<div className="text-sm font-bold text-success-900 dark:text-success-100">Content</div>
<div className="text-base font-bold text-success-900 dark:text-success-100">Content</div>
</div>
{(() => {
const res = getStageResult(4);
@@ -671,11 +686,11 @@ const AutomationPage: React.FC = () => {
{/* 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="flex items-center justify-between mb-3">
<div className="flex items-center gap-3">
<div className="size-10 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center">
<FileIcon className="size-5 text-white" />
<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>
<div className="text-sm font-bold text-purple-900 dark:text-purple-100">Images</div>
<div className="text-base font-bold text-purple-900 dark:text-purple-100">Images</div>
</div>
{(() => {
const res = getStageResult(6);
@@ -782,7 +797,7 @@ const AutomationPage: React.FC = () => {
<div
key={stage.number}
className={`
relative rounded-xl border-2 p-5 transition-all
relative rounded-2xl border-2 p-4 transition-all
${isActive
? 'border-brand-500 bg-brand-50 dark:bg-brand-500/10 shadow-lg'
: isComplete
@@ -793,62 +808,73 @@ const AutomationPage: React.FC = () => {
}
`}
>
{/* Compact Header */}
<div className="flex items-start justify-between mb-3">
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<div className="text-sm font-bold text-gray-900 dark:text-white">Stage {stage.number}</div>
{isActive && <span className="text-xs px-2 py-0.5 bg-brand-500 text-white rounded-full">● Active</span>}
{isComplete && <span className="text-xs px-2 py-0.5 bg-success-500 text-white rounded-full">✓</span>}
{!isActive && !isComplete && stage.pending > 0 && <span className="text-xs px-2 py-0.5 bg-gray-400 text-white rounded-full">Ready</span>}
{/* Header Row - Icon, Stage Number, Status on left; Function Name on right */}
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2">
<div className={`size-8 rounded-lg bg-gradient-to-br ${stageConfig.color} flex items-center justify-center shadow-md flex-shrink-0`}>
<StageIcon className="size-4 text-white" />
</div>
<div className="text-xs font-medium text-gray-600 dark:text-gray-400">{stageConfig.name}</div>
{stageConfig.description && (
<div className="text-xs text-gray-500 dark:text-gray-500 mt-1">{stageConfig.description}</div>
)}
<span className="text-base font-bold text-gray-900 dark:text-white">Stage {stage.number}</span>
{isActive && <span className="text-xs px-2 py-0.5 bg-brand-500 text-white rounded-full font-medium">● Active</span>}
{isComplete && <span className="text-xs px-2 py-0.5 bg-success-500 text-white rounded-full font-medium">✓</span>}
{!isActive && !isComplete && stage.pending > 0 && <span className="text-xs px-2 py-0.5 bg-gray-400 text-white rounded-full font-medium">Ready</span>}
</div>
<div className={`size-8 rounded-lg bg-gradient-to-br ${stageConfig.color} flex items-center justify-center shadow-md flex-shrink-0`}>
<StageIcon className="size-4 text-white" />
{/* Stage Function Name - Right side, larger font */}
<div className={`text-sm font-bold ${stageConfig.textColor}`}>{stageConfig.name}</div>
</div>
{/* Single Row: Pending & Processed - Larger Font */}
<div className="flex justify-between items-center mb-3">
<div className="text-center">
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase mb-0.5">Pending</div>
<div className={`text-xl font-bold ${pending > 0 ? stageConfig.textColor : 'text-gray-400 dark:text-gray-500'}`}>
{pending}
</div>
</div>
<div className="h-8 w-px bg-gray-200 dark:bg-gray-700"></div>
<div className="text-center">
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase mb-0.5">Processed</div>
<div className={`text-xl font-bold ${processed > 0 ? 'text-success-600 dark:text-success-400' : 'text-gray-400 dark:text-gray-500'}`}>
{processed}
</div>
</div>
</div>
{/* Simplified Queue Metrics: Only Pending & Processed */}
<div className="space-y-1.5 text-xs mb-3">
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Pending:</span>
<span className={`font-bold ${pending > 0 ? stageConfig.textColor : 'text-gray-400 dark:text-gray-500'}`}>
{pending}
</span>
{/* Credits and Duration - only show during/after run */}
{result && (result.credits_used > 0 || result.time_elapsed) && (
<div className="flex justify-between items-center py-2 border-t border-gray-200 dark:border-gray-700 text-xs">
{result.credits_used > 0 && (
<span className="font-semibold text-warning-600 dark:text-warning-400">{result.credits_used} credits</span>
)}
{result.time_elapsed && (
<span className="text-gray-500 dark:text-gray-400">{result.time_elapsed}</span>
)}
</div>
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Processed:</span>
<span className={`font-bold ${processed > 0 ? 'text-success-600 dark:text-success-400' : 'text-gray-400 dark:text-gray-500'}`}>
{processed}
</span>
</div>
{/* Credits and Duration - only show during/after run */}
{result && (result.credits_used > 0 || result.time_elapsed) && (
<div className="flex justify-between pt-1.5 border-t border-gray-200 dark:border-gray-700 text-[10px]">
{result.credits_used > 0 && (
<span className="text-warning-600 dark:text-warning-400">{result.credits_used} credits</span>
)}
{result.time_elapsed && (
<span className="text-gray-500 dark:text-gray-400">{result.time_elapsed}</span>
)}
</div>
)}
</div>
)}
{/* Progress Bar */}
{/* Progress Bar with breathing circle indicator */}
{(isActive || isComplete || processed > 0) && (
<div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
<div className="flex justify-between text-xs text-gray-600 dark:text-gray-400 mb-1.5">
<span>Progress</span>
<div className="pt-3 border-t border-gray-200 dark:border-gray-700">
<div className="flex justify-between items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">
<div className="flex items-center gap-2">
<span>Progress</span>
{isActive && (
<span className="relative flex h-3 w-3">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-3 w-3 bg-brand-500"></span>
</span>
)}
{isComplete && (
<span className="relative flex h-3 w-3">
<span className="relative inline-flex rounded-full h-3 w-3 bg-success-500"></span>
</span>
)}
</div>
<span>{isComplete ? '100' : progressPercent}%</span>
</div>
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 overflow-hidden shadow-inner">
<div
className={`bg-gradient-to-r ${stageConfig.color} h-2 rounded-full transition-all duration-500 ${isActive ? 'animate-pulse' : ''}`}
className={`bg-gradient-to-r ${isComplete ? 'from-success-400 to-success-600' : stageConfig.color} h-2.5 rounded-full transition-all duration-500`}
style={{ width: `${isComplete ? 100 : progressPercent}%` }}
></div>
</div>
@@ -895,7 +921,7 @@ const AutomationPage: React.FC = () => {
<div
key={stage.number}
className={`
relative rounded-xl border-2 p-5 transition-all
relative rounded-2xl border-2 p-4 transition-all
${isActive
? 'border-brand-500 bg-brand-50 dark:bg-brand-500/10 shadow-lg'
: isComplete
@@ -906,60 +932,73 @@ const AutomationPage: React.FC = () => {
}
`}
>
<div className="flex items-start justify-between mb-3">
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<div className="text-sm font-bold text-gray-900 dark:text-white">Stage {stage.number}</div>
{isActive && <span className="text-xs px-2 py-0.5 bg-brand-500 text-white rounded-full">● Active</span>}
{isComplete && <span className="text-xs px-2 py-0.5 bg-success-500 text-white rounded-full">✓</span>}
{!isActive && !isComplete && stage.pending > 0 && <span className="text-xs px-2 py-0.5 bg-gray-400 text-white rounded-full">Ready</span>}
{/* Header Row - Icon, Stage Number, Status on left; Function Name on right */}
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2">
<div className={`size-8 rounded-lg bg-gradient-to-br ${stageConfig.color} flex items-center justify-center shadow-md flex-shrink-0`}>
<StageIcon className="size-4 text-white" />
</div>
<div className="text-xs font-medium text-gray-600 dark:text-gray-400">{stageConfig.name}</div>
{stageConfig.description && (
<div className="text-xs text-gray-500 dark:text-gray-500 mt-1">{stageConfig.description}</div>
)}
<span className="text-base font-bold text-gray-900 dark:text-white">Stage {stage.number}</span>
{isActive && <span className="text-xs px-2 py-0.5 bg-brand-500 text-white rounded-full font-medium">● Active</span>}
{isComplete && <span className="text-xs px-2 py-0.5 bg-success-500 text-white rounded-full font-medium">✓</span>}
{!isActive && !isComplete && stage.pending > 0 && <span className="text-xs px-2 py-0.5 bg-gray-400 text-white rounded-full font-medium">Ready</span>}
</div>
<div className={`size-8 rounded-lg bg-gradient-to-br ${stageConfig.color} flex items-center justify-center shadow-md flex-shrink-0`}>
<StageIcon className="size-4 text-white" />
{/* Stage Function Name - Right side, larger font */}
<div className={`text-sm font-bold ${stageConfig.textColor}`}>{stageConfig.name}</div>
</div>
{/* Single Row: Pending & Processed - Larger Font */}
<div className="flex justify-between items-center mb-3">
<div className="text-center">
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase mb-0.5">Pending</div>
<div className={`text-xl font-bold ${pending > 0 ? stageConfig.textColor : 'text-gray-400 dark:text-gray-500'}`}>
{pending}
</div>
</div>
<div className="h-8 w-px bg-gray-200 dark:bg-gray-700"></div>
<div className="text-center">
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase mb-0.5">Processed</div>
<div className={`text-xl font-bold ${processed > 0 ? 'text-success-600 dark:text-success-400' : 'text-gray-400 dark:text-gray-500'}`}>
{processed}
</div>
</div>
</div>
{/* Simplified Queue Metrics: Only Pending & Processed */}
<div className="space-y-1.5 text-xs mb-3">
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Pending:</span>
<span className={`font-bold ${pending > 0 ? stageConfig.textColor : 'text-gray-400 dark:text-gray-500'}`}>
{pending}
</span>
{/* Credits and Duration - only show during/after run */}
{result && (result.credits_used > 0 || result.time_elapsed) && (
<div className="flex justify-between items-center py-2 border-t border-gray-200 dark:border-gray-700 text-xs">
{result.credits_used > 0 && (
<span className="font-semibold text-warning-600 dark:text-warning-400">{result.credits_used} credits</span>
)}
{result.time_elapsed && (
<span className="text-gray-500 dark:text-gray-400">{result.time_elapsed}</span>
)}
</div>
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Processed:</span>
<span className={`font-bold ${processed > 0 ? 'text-success-600 dark:text-success-400' : 'text-gray-400 dark:text-gray-500'}`}>
{processed}
</span>
</div>
{/* Credits and Duration - only show during/after run */}
{result && (result.credits_used > 0 || result.time_elapsed) && (
<div className="flex justify-between pt-1.5 border-t border-gray-200 dark:border-gray-700 text-[10px]">
{result.credits_used > 0 && (
<span className="text-warning-600 dark:text-warning-400">{result.credits_used} credits</span>
)}
{result.time_elapsed && (
<span className="text-gray-500 dark:text-gray-400">{result.time_elapsed}</span>
)}
</div>
)}
</div>
)}
{/* Progress Bar with breathing circle indicator */}
{(isActive || isComplete || processed > 0) && (
<div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
<div className="flex justify-between text-xs text-gray-600 dark:text-gray-400 mb-1.5">
<span>Progress</span>
<div className="pt-3 border-t border-gray-200 dark:border-gray-700">
<div className="flex justify-between items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">
<div className="flex items-center gap-2">
<span>Progress</span>
{isActive && (
<span className="relative flex h-3 w-3">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-3 w-3 bg-brand-500"></span>
</span>
)}
{isComplete && (
<span className="relative flex h-3 w-3">
<span className="relative inline-flex rounded-full h-3 w-3 bg-success-500"></span>
</span>
)}
</div>
<span>{isComplete ? '100' : progressPercent}%</span>
</div>
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 overflow-hidden shadow-inner">
<div
className={`bg-gradient-to-r ${stageConfig.color} h-2 rounded-full transition-all duration-500 ${isActive ? 'animate-pulse' : ''}`}
className={`bg-gradient-to-r ${isComplete ? 'from-success-400 to-success-600' : stageConfig.color} h-2.5 rounded-full transition-all duration-500`}
style={{ width: `${isComplete ? 100 : progressPercent}%` }}
></div>
</div>
@@ -969,62 +1008,119 @@ const AutomationPage: React.FC = () => {
);
})}
{/* Stage 7 - Manual Review Gate */}
{/* Stage 7 - Review → Published (Auto-approve) */}
{pipelineOverview[6] && (() => {
const stage7 = pipelineOverview[6];
const stageConfig = STAGE_CONFIG[6];
const isActive = currentRun?.current_stage === 7;
const isComplete = currentRun && currentRun.current_stage > 7;
const isComplete = currentRun && currentRun.status === 'completed';
const result = currentRun ? (currentRun[`stage_7_result` as keyof AutomationRun] as any) : null;
// For stage 7: pending = items in review, processed = items approved
const approvedCount = result?.approved_count ?? 0;
const totalReview = result?.review_total ?? result?.ready_for_review ?? stage7.pending ?? 0;
const pendingReview = isActive || isComplete
? Math.max(0, totalReview - approvedCount)
: stage7.pending ?? 0;
const progressPercent = totalReview > 0 ? Math.min(Math.round((approvedCount / totalReview) * 100), 100) : 0;
return (
<div
className={`
relative rounded-xl border-3 p-5 transition-all
relative rounded-2xl border-2 p-4 transition-all
${isActive
? 'border-warning-500 bg-warning-50 dark:bg-warning-500/10 shadow-lg'
? 'border-success-500 bg-success-50 dark:bg-success-500/10 shadow-lg'
: isComplete
? 'border-success-500 bg-success-50 dark:bg-success-500/10'
: stage7.pending > 0
? 'border-warning-300 bg-warning-50 dark:bg-warning-900/20 dark:border-warning-700'
: 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'
}
`}
>
<div className="flex items-start justify-between mb-3">
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<div className="text-sm font-bold text-gray-900 dark:text-white">Stage 7</div>
<span className="text-xs px-2 py-0.5 bg-warning-500 text-white rounded-full">🚫 Stop</span>
{/* Header Row - Icon, Stage Number, Status on left; Function Name on right */}
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2">
<div className={`size-8 rounded-lg bg-gradient-to-br ${stageConfig.color} flex items-center justify-center shadow-md flex-shrink-0`}>
<PaperPlaneIcon className="size-4 text-white" />
</div>
<div className="text-xs font-medium text-warning-700 dark:text-warning-300">Manual Review Gate</div>
<span className="text-base font-bold text-gray-900 dark:text-white">Stage 7</span>
{isActive && <span className="text-xs px-2 py-0.5 bg-success-500 text-white rounded-full font-medium">● Active</span>}
{isComplete && <span className="text-xs px-2 py-0.5 bg-success-500 text-white rounded-full font-medium">✓</span>}
{!isActive && !isComplete && pendingReview > 0 && <span className="text-xs px-2 py-0.5 bg-gray-400 text-white rounded-full font-medium">Ready</span>}
</div>
<div className="size-8 rounded-lg bg-gradient-to-br from-warning-500 to-warning-600 flex items-center justify-center shadow-md">
<PaperPlaneIcon className="size-4 text-white" />
{/* Stage Function Name - Right side, larger font */}
<div className={`text-sm font-bold ${stageConfig.textColor}`}>{stageConfig.name}</div>
</div>
{/* Single Row: Pending & Approved */}
<div className="flex justify-between items-center mb-3">
<div className="text-center">
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase mb-0.5">Pending</div>
<div className={`text-xl font-bold ${pendingReview > 0 ? stageConfig.textColor : 'text-gray-400 dark:text-gray-500'}`}>
{pendingReview}
</div>
</div>
<div className="h-8 w-px bg-gray-200 dark:bg-gray-700"></div>
<div className="text-center">
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase mb-0.5">Approved</div>
<div className={`text-xl font-bold ${approvedCount > 0 ? 'text-success-600 dark:text-success-400' : 'text-gray-400 dark:text-gray-500'}`}>
{approvedCount}
</div>
</div>
</div>
{/* Simplified: Just show the count, no buttons */}
<div className="text-center py-4">
<div className="text-3xl font-bold text-warning-600 dark:text-warning-400">{stage7.pending}</div>
<div className="text-xs text-warning-700 dark:text-warning-300 mt-1">ready for review</div>
</div>
{/* Progress Bar with breathing circle indicator */}
{(isActive || isComplete || approvedCount > 0) && (
<div className="pt-3 border-t border-gray-200 dark:border-gray-700">
<div className="flex justify-between items-center text-xs font-medium text-gray-600 dark:text-gray-400 mb-1.5">
<div className="flex items-center gap-2">
<span>Progress</span>
{isActive && (
<span className="relative flex h-3 w-3">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-success-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-3 w-3 bg-success-500"></span>
</span>
)}
{isComplete && (
<span className="relative flex h-3 w-3">
<span className="relative inline-flex rounded-full h-3 w-3 bg-success-500"></span>
</span>
)}
</div>
<span>{isComplete ? '100' : progressPercent}%</span>
</div>
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 overflow-hidden shadow-inner">
<div
className={`bg-gradient-to-r ${stageConfig.color} h-2.5 rounded-full transition-all duration-500`}
style={{ width: `${isComplete ? 100 : progressPercent}%` }}
></div>
</div>
</div>
)}
</div>
);
})()}
{/* Approved summary card (placed after Stage 7 in the same row) */}
<div className="rounded-xl p-5 border-2 border-success-200 bg-gradient-to-br from-success-50 to-success-100 dark:from-success-900/10 dark:to-success-800/10 flex flex-col h-full">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-3">
<div className="size-10 rounded-lg bg-gradient-to-br from-success-500 to-success-600 flex items-center justify-center">
<FileTextIcon className="size-5 text-white" />
{/* Approved summary card - Same layout as Stage 7 */}
<div className="rounded-2xl p-4 border-2 border-success-200 bg-gradient-to-br from-success-50 to-success-100 dark:from-success-900/10 dark:to-success-800/10 flex flex-col h-full">
{/* Header Row - Icon and Label on left, Big Count on right */}
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2">
<div className="size-8 rounded-lg bg-gradient-to-br from-success-400 to-success-600 flex items-center justify-center shadow-md flex-shrink-0">
<CheckCircleIcon className="size-4 text-white" />
</div>
<div className="text-sm font-bold text-success-900 dark:text-success-100">Approved</div>
<span className="text-base font-bold text-success-900 dark:text-success-100">Approved</span>
</div>
{/* Big count on right */}
<div className="text-3xl font-bold text-success-600 dark:text-success-400">
{metrics?.content?.published ?? pipelineOverview[3]?.counts?.published ?? getStageResult(4)?.published ?? 0}
</div>
<div className="text-right">&nbsp;</div>
</div>
<div className="flex-1 flex items-center justify-center">
<div className="text-4xl md:text-5xl font-extrabold text-success-800 dark:text-success-300">{metrics?.content?.published ?? pipelineOverview[3]?.counts?.published ?? getStageResult(4)?.published ?? 0}</div>
</div>
{/* Status Label - Right aligned */}
<div className="text-sm font-bold text-success-600 dark:text-success-400 mb-4 text-right">Published Content</div>
</div>
</div>
@@ -1045,5 +1141,4 @@ const AutomationPage: React.FC = () => {
);
};
export default AutomationPage;
export default AutomationPage;

19
frontend/src/pages/Help/Help.tsx
View File

@@ -1,5 +1,6 @@
import { useState, useRef, useEffect } from "react";
import PageMeta from "../../components/common/PageMeta";
import PageHeader from "../../components/common/PageHeader";
import { Accordion, AccordionItem } from "../../components/ui/accordion";
import { Card } from "../../components/ui/card";
import Badge from "../../components/ui/badge/Badge";
@@ -9,7 +10,8 @@ import {
CheckCircleIcon,
ArrowRightIcon,
FileIcon,
GroupIcon
GroupIcon,
HelpCircleIcon
} from "../../icons";
interface TableOfContentsItem {
@@ -188,18 +190,13 @@ export default function Help() {
return (
<>
<PageMeta title="Help Center - IGNY8" description="Guides and tutorials to help you create great content" />
<PageHeader
title="Help Center"
description="Learn how to use IGNY8 to create and publish amazing content"
badge={{ icon: <HelpCircleIcon className="w-4 h-4" />, color: 'blue' }}
/>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Header */}
<div className="mb-8">
<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
Help Center
</h1>
<p className="text-lg text-gray-600 dark:text-gray-400">
Learn how to use IGNY8 to create and publish amazing content
</p>
</div>
{/* Table of Contents */}
<Card className="p-6 mb-8 bg-gradient-to-r from-brand-50 to-purple-50 dark:from-brand-900/10 dark:to-purple-900/10 border-brand-200 dark:border-brand-800">
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">

80
frontend/src/pages/account/AccountSettingsPage.tsx
View File

@@ -13,6 +13,7 @@ import { Card } from '../../components/ui/card';
import Button from '../../components/ui/button/Button';
import Badge from '../../components/ui/badge/Badge';
import PageMeta from '../../components/common/PageMeta';
import PageHeader from '../../components/common/PageHeader';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { useAuthStore } from '../../store/authStore';
import {
@@ -265,47 +266,42 @@ export default function AccountSettingsPage() {
if (loading) {
return (
<div className="p-6">
<>
<PageMeta title="Account Settings" description="Manage your account, profile, and team" />
<div className="flex items-center justify-center h-64">
<div className="flex flex-col items-center gap-3">
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
<div className="text-gray-500 dark:text-gray-400">Loading settings...</div>
<PageHeader
title="Account Settings"
badge={{ icon: <Settings className="w-4 h-4" />, color: 'blue' }}
/>
<div className="p-6">
<div className="flex items-center justify-center h-64">
<div className="flex flex-col items-center gap-3">
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
<div className="text-gray-500 dark:text-gray-400">Loading settings...</div>
</div>
</div>
</div>
</div>
</>
);
}
return (
<div className="p-6">
<PageMeta title="Account Settings" description="Manage your account, profile, and team" />
{/* Page Header with Breadcrumb */}
<div className="mb-6">
<div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-2">
<span>Account Settings</span>
<span>›</span>
<span className="text-gray-900 dark:text-white font-medium">
{activeTab === 'account' && 'Account'}
{activeTab === 'profile' && 'Profile'}
{activeTab === 'team' && 'Team'}
</span>
</div>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
{activeTab === 'account' && 'Account Information'}
{activeTab === 'profile' && 'Profile Settings'}
{activeTab === 'team' && 'Team Management'}
</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
{activeTab === 'account' && 'Manage your organization and billing information'}
{activeTab === 'profile' && 'Update your personal information and preferences'}
{activeTab === 'team' && 'Invite and manage team members'}
</p>
</div>
// Page titles based on active tab
const pageTitles = {
account: { title: 'Account Information', description: 'Manage your organization and billing information' },
profile: { title: 'Profile Settings', description: 'Update your personal information and preferences' },
team: { title: 'Team Management', description: 'Invite and manage team members' },
};
{/* Tab Content */}
<div className="mt-6">
return (
<>
<PageMeta title="Account Settings" description="Manage your account, profile, and team" />
<PageHeader
title={pageTitles[activeTab].title}
description={pageTitles[activeTab].description}
badge={{ icon: <Settings className="w-4 h-4" />, color: 'blue' }}
parent="Account Settings"
/>
<div className="p-6">
{/* Tab Content */}
{/* Account Tab */}
{activeTab === 'account' && (
<div className="space-y-6 max-w-4xl">
@@ -762,15 +758,14 @@ export default function AccountSettingsPage() {
</Card>
</div>
)}
</div>
{/* Invite Modal */}
{showInviteModal && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<Card className="p-6 w-full max-w-md mx-4">
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
Invite Team Member
</h2>
{/* Invite Modal */}
{showInviteModal && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<Card className="p-6 w-full max-w-md mx-4">
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
Invite Team Member
</h2>
<div className="space-y-4">
<div>
@@ -921,5 +916,6 @@ export default function AccountSettingsPage() {
</div>
)}
</div>
</>
);
}

42
frontend/src/pages/account/NotificationsPage.tsx
View File

@@ -15,6 +15,8 @@ import {
} from 'lucide-react';
import { Card } from '../../components/ui/card';
import Button from '../../components/ui/button/Button';
import PageMeta from '../../components/common/PageMeta';
import PageHeader from '../../components/common/PageHeader';
import { useNotificationStore } from '../../store/notificationStore';
import type { NotificationAPI } from '../../services/notifications.api';
import { deleteNotification as deleteNotificationAPI } from '../../services/notifications.api';
@@ -177,28 +179,30 @@ export default function NotificationsPage() {
return (
<>
<Helmet>
<title>Notifications - IGNY8</title>
</Helmet>
<PageMeta title="Notifications" description="View and manage your notifications" />
<PageHeader
title="Notifications"
description="View and manage your notifications"
badge={{ icon: <Bell className="w-4 h-4" />, color: 'blue' }}
/>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
Notifications
</h1>
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
{unreadCount > 0 ? (
<span className="font-medium text-brand-600 dark:text-brand-400">
{unreadCount} unread notification{unreadCount !== 1 ? 's' : ''}
<div className="p-6 space-y-6">
{/* Action Buttons */}
<div className="flex items-center justify-between gap-3">
{/* Unread count indicator */}
<div className="text-sm text-gray-600 dark:text-gray-400">
{unreadCount > 0 ? (
<span className="flex items-center gap-2">
<span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-brand-500 text-white text-xs font-semibold">
{unreadCount}
</span>
) : (
'All caught up!'
)}
</p>
unread notification{unreadCount !== 1 ? 's' : ''}
</span>
) : (
<span className="text-success-600 dark:text-success-400">✓ All caught up!</span>
)}
</div>
<div className="flex items-center gap-3">
<Button
variant="outline"

67
frontend/src/pages/account/PlansAndBillingPage.tsx
View File

@@ -15,6 +15,8 @@ import {
import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';
import Button from '../../components/ui/button/Button';
import PageMeta from '../../components/common/PageMeta';
import PageHeader from '../../components/common/PageHeader';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { PricingPlan } from '../../components/ui/pricing-table';
import PricingTable1 from '../../components/ui/pricing-table/pricing-table-1';
@@ -340,9 +342,18 @@ export default function PlansAndBillingPage() {
if (loading) {
return (
<div className="flex items-center justify-center min-h-screen">
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
</div>
<>
<PageMeta title="Plans & Billing" description="Manage your subscription and billing" />
<PageHeader
title="Plans & Billing"
badge={{ icon: <CreditCard className="w-4 h-4" />, color: 'blue' }}
/>
<div className="p-6">
<div className="flex items-center justify-center h-64">
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
</div>
</div>
</>
);
}
@@ -365,28 +376,23 @@ export default function PlansAndBillingPage() {
};
return (
<div className="p-6">
{/* Page Header with Breadcrumb */}
<div className="mb-6">
<div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-2">
<span>Plans & Billing</span>
<span>›</span>
<span className="text-gray-900 dark:text-white font-medium">{pageTitles[activeTab].title}</span>
</div>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">{pageTitles[activeTab].title}</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
{pageTitles[activeTab].description}
</p>
</div>
{/* Activation / pending payment notice */}
{!hasActivePlan && (
<div className="mb-4 p-4 rounded-lg border border-warning-200 bg-warning-50 text-warning-800 dark:border-warning-800 dark:bg-warning-900/20 dark:text-warning-200">
No active plan. Choose a plan below to activate your account.
</div>
)}
{hasPendingManualPayment && (
<div className="mb-4 p-4 rounded-lg border border-[var(--color-info-200)] bg-[var(--color-info-50)] text-[var(--color-info-800)] dark:border-[var(--color-info-800)] dark:bg-[var(--color-info-900)]/20 dark:text-[var(--color-info-100)]">
<>
<PageMeta title="Plans & Billing" description="Manage your subscription and billing" />
<PageHeader
title={pageTitles[activeTab].title}
description={pageTitles[activeTab].description}
badge={{ icon: <CreditCard className="w-4 h-4" />, color: 'blue' }}
parent="Plans & Billing"
/>
<div className="p-6">
{/* Activation / pending payment notice */}
{!hasActivePlan && (
<div className="mb-4 p-4 rounded-lg border border-warning-200 bg-warning-50 text-warning-800 dark:border-warning-800 dark:bg-warning-900/20 dark:text-warning-200">
No active plan. Choose a plan below to activate your account.
</div>
)}
{hasPendingManualPayment && (
<div className="mb-4 p-4 rounded-lg border border-[var(--color-info-200)] bg-[var(--color-info-50)] text-[var(--color-info-800)] dark:border-[var(--color-info-800)] dark:bg-[var(--color-info-900)]/20 dark:text-[var(--color-info-100)]">
We received your manual payment. It’s pending admin approval; activation will complete once approved.
</div>
)}
@@ -587,14 +593,6 @@ export default function PlansAndBillingPage() {
<div className="space-y-6">
{/* Upgrade Plans Section */}
<div>
<div className="mb-6">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
{hasActivePlan ? 'Upgrade or Change Your Plan' : 'Choose Your Plan'}
</h2>
<p className="text-gray-600 dark:text-gray-400 mt-1">
Select the plan that best fits your needs
</p>
</div>
<div className="mx-auto" style={{ maxWidth: '1560px' }}>
<PricingTable1
title=""
@@ -895,6 +893,7 @@ export default function PlansAndBillingPage() {
</div>
</div>
)}
</div>
</div>
</>
);
}

116
frontend/src/pages/account/PurchaseCreditsPage.tsx
View File

@@ -4,8 +4,10 @@
*/
import { useState, useEffect } from 'react';
import { AlertCircle, Check, CreditCard, Building2, Wallet, Loader2 } from 'lucide-react';
import { AlertCircle, Check, CreditCard, Building2, Wallet, Loader2, Zap } from 'lucide-react';
import Button from '../../components/ui/button/Button';
import PageMeta from '../../components/common/PageMeta';
import PageHeader from '../../components/common/PageHeader';
import {
getCreditPackages,
getAvailablePaymentMethods,
@@ -142,9 +144,18 @@ export default function PurchaseCreditsPage() {
if (loading) {
return (
<div className="flex items-center justify-center min-h-screen">
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
</div>
<>
<PageMeta title="Purchase Credits" description="Top up your account with credit packages" />
<PageHeader
title="Purchase Credits"
badge={{ icon: <Zap className="w-4 h-4" />, color: 'blue' }}
/>
<div className="p-6">
<div className="flex items-center justify-center h-64">
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
</div>
</div>
</>
);
}
@@ -152,25 +163,30 @@ export default function PurchaseCreditsPage() {
const selectedMethod = paymentMethods.find((m) => m.type === selectedPaymentMethod);
return (
<div className="container mx-auto px-4 py-8 max-w-2xl">
<h1 className="text-3xl font-bold mb-6">Complete Payment</h1>
{/* Invoice Details */}
<div className="bg-white rounded-lg shadow p-6 mb-6">
<h2 className="text-xl font-semibold mb-4">Invoice Details</h2>
<div className="space-y-2">
<div className="flex justify-between">
<span className="text-gray-600">Invoice Number:</span>
<span className="font-mono">{invoiceData.invoice_number}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Package:</span>
<span>{selectedPackage?.name}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Credits:</span>
<span>{selectedPackage?.credits.toLocaleString()}</span>
</div>
<>
<PageMeta title="Complete Payment" description="Complete your credit purchase" />
<PageHeader
title="Complete Payment"
badge={{ icon: <Zap className="w-4 h-4" />, color: 'blue' }}
parent="Purchase Credits"
/>
<div className="p-6 max-w-2xl">
{/* Invoice Details */}
<div className="bg-white rounded-lg shadow p-6 mb-6">
<h2 className="text-xl font-semibold mb-4">Invoice Details</h2>
<div className="space-y-2">
<div className="flex justify-between">
<span className="text-gray-600">Invoice Number:</span>
<span className="font-mono">{invoiceData.invoice_number}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Package:</span>
<span>{selectedPackage?.name}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Credits:</span>
<span>{selectedPackage?.credits.toLocaleString()}</span>
</div>
<div className="flex justify-between text-lg font-bold border-t pt-2 mt-2">
<span>Total Amount:</span>
<span>${invoiceData.total_amount}</span>
@@ -285,35 +301,38 @@ export default function PurchaseCreditsPage() {
</div>
</div>
</form>
</div>
</div>
</>
);
}
return (
<div className="container mx-auto px-4 py-8">
<div className="max-w-6xl mx-auto">
<h1 className="text-3xl font-bold mb-2">Purchase Credits</h1>
<p className="text-gray-600 mb-8">
Choose a credit package and payment method to top up your account balance.
</p>
<>
<PageMeta title="Purchase Credits" description="Top up your account with credit packages" />
<PageHeader
title="Purchase Credits"
description="Choose a credit package and payment method to top up your account balance."
badge={{ icon: <Zap className="w-4 h-4" />, color: 'blue' }}
/>
<div className="p-6">
<div className="max-w-6xl mx-auto">
{error && (
<div className="bg-error-50 border border-error-200 rounded-lg p-4 mb-6 flex items-start gap-2">
<AlertCircle className="w-5 h-5 text-error-600 flex-shrink-0 mt-0.5" />
<p className="text-error-800">{error}</p>
</div>
)}
{error && (
<div className="bg-error-50 border border-error-200 rounded-lg p-4 mb-6 flex items-start gap-2">
<AlertCircle className="w-5 h-5 text-error-600 flex-shrink-0 mt-0.5" />
<p className="text-error-800">{error}</p>
</div>
)}
{/* Credit Packages */}
<div className="mb-8">
<h2 className="text-xl font-semibold mb-4">Select Credit Package</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{packages.map((pkg) => (
<div
key={pkg.id}
onClick={() => setSelectedPackage(pkg)}
className={`relative cursor-pointer rounded-lg border-2 p-6 transition-all ${
selectedPackage?.id === pkg.id
{/* Credit Packages */}
<div className="mb-8">
<h2 className="text-xl font-semibold mb-4">Select Credit Package</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{packages.map((pkg) => (
<div
key={pkg.id}
onClick={() => setSelectedPackage(pkg)}
className={`relative cursor-pointer rounded-lg border-2 p-6 transition-all ${
selectedPackage?.id === pkg.id
? 'border-[var(--color-brand-500)] bg-[var(--color-brand-50)]'
: 'border-gray-200 hover:border-[var(--color-brand-300)] bg-white'
} ${pkg.is_featured ? 'ring-2 ring-warning-400' : ''}`}
@@ -424,7 +443,8 @@ export default function PurchaseCreditsPage() {
</Button>
</div>
)}
</div>
</div>
</div>
</>
);
}

61
frontend/src/pages/account/UsageAnalyticsPage.tsx
View File

@@ -8,6 +8,7 @@ import { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { TrendingUp, Activity, BarChart3, Zap, Calendar } from 'lucide-react';
import PageMeta from '../../components/common/PageMeta';
import PageHeader from '../../components/common/PageHeader';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { getUsageAnalytics, UsageAnalytics, getCreditBalance, type CreditBalance } from '../../services/billing.api';
import { Card } from '../../components/ui/card';
@@ -57,15 +58,21 @@ export default function UsageAnalyticsPage() {
if (loading) {
return (
<div className="p-6">
<>
<PageMeta title="Usage & Analytics" description="Monitor your plan limits and usage" />
<div className="flex items-center justify-center h-64">
<div className="flex flex-col items-center gap-3">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-500"></div>
<div className="text-gray-500 dark:text-gray-400">Loading usage data...</div>
<PageHeader
title="Usage & Analytics"
badge={{ icon: <TrendingUp className="w-4 h-4" />, color: 'blue' }}
/>
<div className="p-6">
<div className="flex items-center justify-center h-64">
<div className="flex flex-col items-center gap-3">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-500"></div>
<div className="text-gray-500 dark:text-gray-400">Loading usage data...</div>
</div>
</div>
</div>
</div>
</>
);
}
@@ -75,28 +82,27 @@ export default function UsageAnalyticsPage() {
api: 'Activity Log',
};
return (
<div className="p-6">
<PageMeta title="Usage & Analytics" description="Monitor your plan limits and usage" />
{/* Page Header */}
<div className="mb-6">
<div className="text-sm text-gray-500 dark:text-gray-400 mb-1">
Usage & Analytics / {tabTitles[activeTab]}
</div>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">{tabTitles[activeTab]}</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
{activeTab === 'limits' && 'See how much you\'re using - Track your credits and content limits'}
{activeTab === 'activity' && 'See where your credits go - Track credit usage history'}
{activeTab === 'api' && 'Technical requests - Monitor API activity and usage'}
</p>
</div>
const tabDescriptions: Record<TabType, string> = {
limits: 'See how much you\'re using - Track your credits and content limits',
activity: 'See where your credits go - Track credit usage history',
api: 'Technical requests - Monitor API activity and usage',
};
{/* Quick Stats Overview */}
{creditBalance && (
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<Card className="p-4 bg-gradient-to-br from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/10 border-brand-200 dark:border-brand-700">
<div className="flex items-center gap-3">
return (
<>
<PageMeta title="Usage & Analytics" description="Monitor your plan limits and usage" />
<PageHeader
title={tabTitles[activeTab]}
description={tabDescriptions[activeTab]}
badge={{ icon: <TrendingUp className="w-4 h-4" />, color: 'blue' }}
parent="Usage & Analytics"
/>
<div className="p-6">
{/* Quick Stats Overview */}
{creditBalance && (
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<Card className="p-4 bg-gradient-to-br from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/10 border-brand-200 dark:border-brand-700">
<div className="flex items-center gap-3">
<div className="p-2 bg-brand-500 rounded-lg">
<Zap className="w-5 h-5 text-white" />
</div>
@@ -276,5 +282,6 @@ export default function UsageAnalyticsPage() {
)}
</div>
</div>
</>
);
}