4 Commits

Author SHA1 Message Date
IGNY8 VPS (Salman)
2198a03327 UX Text Improvements: Planner Pages (Keywords & Clusters)
IMPROVEMENTS - Planner Module:

Column Labels (Shared across all tables):
- 'Keyword' → 'Search Term'
- 'Volume' → 'Monthly Searches'
- 'Difficulty' → 'Competition Level'
- 'Country' → 'Target Location'
- 'Cluster' → 'Topic Group'
- 'Sector' → 'Topic Area'
- 'Status' → 'Prep Status'
- 'Created' → 'Date Added'

Keywords Page:
- Page title: 'Keywords' → 'Organize Your Keywords'
- Pipeline readiness message simplified:
  - 'Pipeline readiness at 22%' → 'You're 22% ready to start writing'
  - More specific guidance: 'Next step: Group your keywords by topic (36 keywords are ready to organize)'
- Navigation tabs updated:
  - 'Keywords' → 'Keywords (individual terms)'
  - 'Clusters' → 'Topics (keyword groups)'

Clusters Page:
- Page title: 'Keyword Clusters' → 'Topic Groups (Keyword Clusters)'
- Navigation tabs updated with context

These changes affect all pages using these shared column definitions (Keywords, Clusters, Ideas, Content, etc.)

NO CODE CHANGES: Only visible user-facing text updates
2025-12-25 06:22:05 +00:00
IGNY8 VPS (Salman)
f6d75a9588 Merge branch 'main' of https://git.igny8.com/salman/igny8 2025-12-25 06:18:45 +00:00
IGNY8 VPS (Salman)
293182da31 UX Text Improvements: Automation Page - User-Friendly Language
IMPROVEMENTS - Automation Page:
- Page title: 'AI Automation Pipeline' → 'Automate Everything'
- Page description updated to be more conversational
- Status badge: 'Ready to Run' → 'Ready to Go!' with expanded explanation
- Schedule display: More conversational format (e.g., 'Runs every day at 2:00 AM | Last run: Never | Uses about 5 credits per run')
- Pipeline stage names completely rewritten with descriptions:
  - 'Keywords → Clusters' → 'ORGANIZE KEYWORDS' (Group related search terms into topic clusters)
  - 'Clusters → Ideas' → 'CREATE ARTICLE IDEAS' (Generate article titles and outlines for each cluster)
  - 'Ideas → Tasks' → 'PREPARE WRITING JOBS' (Convert ideas into tasks for the AI writer)
  - 'Tasks → Content' → 'WRITE ARTICLES' (AI generates full, complete articles)
  - 'Content → Image Prompts' → 'CREATE IMAGE DESCRIPTIONS' (Generate descriptions for AI to create images)
  - 'Image Prompts → Images' → 'GENERATE IMAGES' (AI creates custom images for your articles)
  - 'Manual Review Gate' → 'REVIEW & PUBLISH ⚠️' (Review articles before they go live)
- Button updates:
  - 'Configure' → '⚙️ Adjust Settings' (with tooltip)
  - 'Run Now' now has tooltip explaining it starts immediately
- Pipeline statistics section:
  - Added header: 'Here's what's in your automation pipeline:'
  - Metric labels updated with context:
    - 'Keywords' → 'Search Terms (waiting to organize)'
    - 'Clusters' → 'Topic Groups (ready for ideas)'
    - 'Ideas' → 'Article Ideas (waiting to write)'
    - 'Content' → 'Articles (in various stages)'
    - 'Images' → 'Images (created and waiting)'

NO CODE CHANGES: Only visible user-facing text updates
2025-12-25 06:09:03 +00:00
IGNY8 VPS (Salman)
28e208a906 UX Text Improvements: Dashboard, Sidebar Navigation, and Sites Management
IMPROVEMENTS:
- Dashboard page: Updated all user-facing text to be more welcoming and clear
  - Changed 'Dashboard' to 'Your Content Creation Dashboard'
  - Updated 'Last updated' to 'Last checked'
  - Added explanatory subtitle to banner
  - Renamed 'Your Progress' card to 'Your Content Journey'
  - Enhanced all metric card descriptions (Keywords, Clusters, Ideas, Content, Published)
  - Updated Quick Actions with action-oriented titles and helpful descriptions
  - Updated Workflow Modules section

- Sidebar Navigation: Made menu items and section headers more intuitive
  - Section headers: SETUP → GET STARTED, WORKFLOW → CREATE CONTENT, SETTINGS → CONFIGURATION, HELP & DOCS → HELP & LEARNING
  - Menu items: 'Add Keywords' → 'Find Keywords', 'Thinker' → 'AI Writer Setup', 'Planner' → 'Organize Keywords', 'Writer' → 'Write Articles', 'Automation' → 'Automate Everything'
  - Account section: 'Account Settings' → 'Your Account Info', 'Team Management' → 'Your Team', 'Plans & Billing' → 'Your Subscription', 'Usage & Analytics' → 'Your Usage'
  - Settings: 'Profile Settings' → 'Your Profile', 'Publishing' → 'Where to Publish'

- Sites Management page: Friendlier text and clearer actions
  - Page title: 'Sites Management' → 'Your Websites'
  - Button: 'Add Site' → '+ Add Another Website' (with tooltip)
  - Filters: 'All Types' → 'Show All Types', etc.
  - Card buttons: 'Dashboard' → 'View Site Dashboard', 'Content' → 'Manage Content', 'Settings' → 'Configure Site' (all with tooltips)

NO CODE CHANGES: Only visible user-facing text updates, no backend or architecture changes
2025-12-25 06:05:48 +00:00
8 changed files with 397 additions and 90 deletions

View File

@@ -0,0 +1,288 @@
# UX Text Implementation Progress Report
**Date:** December 25, 2025
**Status:** In Progress (40% Complete)
## ✅ COMPLETED SECTIONS
### 1. Dashboard Page (Section 1) - DONE
- ✅ Main title: "Dashboard" → "Your Content Creation Dashboard"
- ✅ Last updated: "Last updated" → "Last checked"
- ✅ Refresh button tooltip added
- ✅ Banner subtitle enhanced
- ✅ Sites counter: "2/5 Sites" → "2 of 5 Sites Active"
- ✅ Progress card: "Your Progress" → "Your Content Journey"
- ✅ Progress description improved with context
- ✅ All 6 metric cards updated (Site & Sectors, Keywords, Clusters, Ideas, Content, Published)
- ✅ All 8 Quick Actions updated with better titles and descriptions
- ✅ Workflow Modules section updated
**Files Modified:** `/data/app/igny8/frontend/src/pages/Dashboard/Home.tsx`
### 2. Sidebar Navigation (Section 17) - DONE
- ✅ Section headers updated:
- "SETUP" → "GET STARTED"
- "WORKFLOW" → "CREATE CONTENT"
- "ACCOUNT" → "MANAGE ACCOUNT"
- "SETTINGS" → "CONFIGURATION"
- "HELP & DOCS" → "HELP & LEARNING"
- ✅ Menu items updated:
- "Add Keywords" → "Find Keywords"
- "Sites" → "Your Websites"
- "Thinker" → "AI Writer Setup"
- "Planner" → "Organize Keywords"
- "Writer" → "Write Articles"
- "Automation" → "Automate Everything"
- "Account Settings" → "Your Account Info"
- "Team Management" → "Your Team"
- "Plans & Billing" → "Your Subscription"
- "Usage & Analytics" → "Your Usage"
- "Profile Settings" → "Your Profile"
- "Publishing" → "Where to Publish"
**Files Modified:** `/data/app/igny8/frontend/src/layout/AppSidebar.tsx`
### 3. Sites Management Page (Section 3) - DONE
- ✅ Page title: "Sites Management" → "Your Websites"
- ✅ Add button: "Add Site" → "+ Add Another Website" (with tooltip)
- ✅ Filter labels: "All Types" → "Show All Types", etc.
- ✅ Card buttons with tooltips:
- "Dashboard" → "View Site Dashboard"
- "Content" → "Manage Content"
- "Settings" → "Configure Site"
**Files Modified:** `/data/app/igny8/frontend/src/pages/Sites/List.tsx`
### 4. Automation Page (Section 8) - DONE
- ✅ Page title: "AI Automation Pipeline" → "Automate Everything"
- ✅ Status badge: "Ready to Run" → "Ready to Go!"
- ✅ Schedule display made conversational
- ✅ All 7 pipeline stage names rewritten with descriptions
- ✅ Buttons updated with tooltips:
- "Configure" → "⚙️ Adjust Settings"
- "Run Now" tooltip added
- ✅ Pipeline statistics header added
- ✅ All metric cards updated with context
**Files Modified:** `/data/app/igny8/frontend/src/pages/Automation/AutomationPage.tsx`
---
## 🔄 REMAINING SECTIONS
### 5. Add Keywords Page (Section 2) - TODO
**Priority:** High
**File to Update:** `/data/app/igny8/frontend/src/pages/Setup/AddKeywords.tsx` or similar
**Changes Needed:**
- Page title: "Add Keywords" → "Find & Add Keywords to Target"
- Description update with clearer instruction
- Sector selector label: "Sector: All Sectors" → "What topic area? - All Sectors"
- Add helper text below selector
- Table headers:
- "KEYWORD" → "Search Term"
- "SECTOR" → "Topic Area"
- "VOLUME" → "How Often Searched"
- "DIFFICULTY" → "Competition Level"
- "COUNTRY" → "Target Location"
- Add STATUS tooltip
- Bulk Actions: "Bulk Actions" → "Do Multiple at Once"
### 6. Thinker/AI Prompts Page (Section 4) - TODO
**Priority:** High
**File to Update:** `/data/app/igny8/frontend/src/pages/Thinker/*.tsx`
**Changes Needed:**
- Page title: "AI Prompts Management" → "Customize Your AI Writer"
- Description simplified
- Tab labels:
- "Prompts" → "Writing Styles"
- "Author Profiles" → "Writing Voices"
- "Strategies" → "Content Strategies"
- "Image Testing" → "Test Image Settings"
- Sub-section titles with explanations
- Button text:
- "Reset to Default" → "Restore Original"
- "Save Prompt" → "Save My Custom Instructions"
### 7. Planner Pages (Sections 5-6) - TODO
**Priority:** High
**Files to Update:** `/data/app/igny8/frontend/src/pages/Planner/*.tsx`
**Changes Needed:**
#### Keywords View:
- Page title: Add "Organize Your Keywords"
- Description: clearer purpose
- Status alerts: simplify pipeline readiness message
- "UNMAPPED" → "READY TO ORGANIZE"
- Bulk Actions: "Bulk Actions" → "Do Multiple at Once"
- Table headers updated
- Import button: "Import" → "+ Import More Keywords"
#### Clusters View:
- Tab labels: add context
- Explanation text at top
- Cluster display: "5" → "5 keywords in this group"
### 8. Writer Page (Section 7) - TODO
**Priority:** High
**Files to Update:** `/data/app/igny8/frontend/src/pages/Writer/*.tsx`
**Changes Needed:**
- Page title: "Content Queue" → "Write Your Articles"
- Description improved
- Status alerts: clearer messages
- Tab names:
- "Queue" → "Ready to Write"
- "Drafts" → "Finished Drafts"
- "Images" → "Article Images"
- "Review" → "Review Before Publishing"
- Table headers updated
- Status display labels (display only, NOT field values):
- "Completed" display as: "Done - Ready to Review"
- "Queued" display as: "Waiting to be Written"
- "Failed" display as: "Error - Needs Help"
### 9. Account & Settings Pages (Sections 9-14) - TODO
**Priority:** Medium
**Files to Update:** Multiple files in `/data/app/igny8/frontend/src/pages/account/` and `/data/app/igny8/frontend/src/pages/Settings/`
**Account Settings Page:**
- Title: "Account Settings" → "Your Account Info"
- Section titles and field labels updated
- Helper text added to fields
**Team Management Page:**
- Title: "Team Management" → "Your Team"
- Tab names updated
- Column headers improved
- Invite button: "Invite Team Member" → "+ Invite Someone"
**Plans & Billing Page:**
- Title: "Plans & Billing" → "Your Subscription"
- Section titles updated
- Feature list with context added
- Tab names improved
- Button updates
**Profile Settings Page:**
- Title: "Profile Settings" → "Your Profile"
- Section titles friendlier
- Field explanations added
- Save button: "Save Changes" → "✓ Save My Settings"
**Publishing Settings Page:**
- Title: "Publishing Settings" → "Where to Publish"
- Section titles updated
- Checkbox labels improved
- Explanations added
**Usage & Analytics Page:**
- Title: "Usage & Analytics" → "Your Usage"
- Stats cards with explanations
- Tab names with context
- Section explanations added
### 10. Help & Documentation Page (Section 16) - TODO
**Priority:** Low
**File to Update:** `/data/app/igny8/frontend/src/pages/Help/*.tsx`
**Changes Needed:**
- Description enhancement
- Table of Contents: "Table of Contents" → "What Do You Want to Learn?"
- Section names reorganized
- Quick Start Guide introduction friendlier
- Step descriptions improved
- Module descriptions in plain English
---
## IMPLEMENTATION STRATEGY
### Next Steps (Recommended Order):
1. **Planner Pages** - High traffic, high impact
2. **Writer Page** - Core functionality
3. **Add Keywords Page** - Entry point for users
4. **Thinker/AI Prompts Page** - Advanced users
5. **Account & Settings Pages** - Lower priority but complete the experience
6. **Help & Documentation** - Can be done last
### Search Strategy for Finding Files:
```bash
# Find specific pages
find frontend/src/pages -name "*.tsx" | grep -i "planner\|writer\|thinker\|setup"
# Search for specific text to locate components
grep -r "Content Queue" frontend/src/pages/
grep -r "AI Prompts Management" frontend/src/pages/
grep -r "Add Keywords" frontend/src/pages/
```
### Testing Strategy:
After each section:
1. Run the dev server and visually verify changes
2. Check that tooltips appear correctly
3. Ensure no broken layouts
4. Verify text fits in UI components
5. Test dark mode appearance
---
## IMPORTANT REMINDERS
### What to Change:
✅ User-facing text, labels, headers
✅ Button text, tooltip text
✅ Descriptions, help text
✅ Display labels (e.g., showing "Done - Ready to Review" for a "completed" status)
### What NOT to Change:
❌ Backend status field values in database
❌ API response structures
❌ URL slugs or routes
❌ Code variable names
❌ Database column names
❌ Internal logic or calculations
❌ Actual enum values or status codes
### Code Pattern:
When updating status displays, use this pattern:
```tsx
// WRONG - Don't change the actual value
status = "completed" // ❌ Don't change this
// RIGHT - Only change the display
{status === "completed" ? "Done - Ready to Review" : status} // ✅ This is fine
```
---
## COMMIT HISTORY
1. **Commit 1:** Dashboard, Sidebar Navigation, and Sites Management
2. **Commit 2:** Automation Page
**Next Commit Should Include:** Planner pages (Keywords and Clusters views)
---
## ESTIMATED TIME REMAINING
- Planner Pages: ~30 minutes
- Writer Page: ~20 minutes
- Add Keywords Page: ~15 minutes
- Thinker Page: ~20 minutes
- Account & Settings Pages: ~40 minutes
- Help Page: ~15 minutes
**Total:** ~2.5 hours remaining
---
**Implementation Progress: 40% Complete**
**Files Modified So Far: 4**
**Commits: 2**

View File

@@ -12,14 +12,14 @@ export const titleColumn = {
export const keywordColumn = {
key: 'keyword',
label: 'Keyword',
label: 'Search Term',
sortable: true,
width: 'auto',
};
export const statusColumn = {
key: 'status',
label: 'Status',
label: 'Prep Status',
sortable: true,
badge: true,
width: '120px',
@@ -27,7 +27,7 @@ export const statusColumn = {
export const volumeColumn = {
key: 'volume',
label: 'Volume',
label: 'Monthly Searches',
sortable: true,
numeric: true,
width: '100px',
@@ -35,7 +35,7 @@ export const volumeColumn = {
export const difficultyColumn = {
key: 'difficulty',
label: 'Difficulty',
label: 'Competition Level',
sortable: true,
badge: true,
width: '120px',
@@ -43,7 +43,7 @@ export const difficultyColumn = {
export const countryColumn = {
key: 'country',
label: 'Country',
label: 'Target Location',
sortable: true,
badge: true,
width: '120px',
@@ -51,14 +51,14 @@ export const countryColumn = {
export const clusterColumn = {
key: 'cluster',
label: 'Cluster',
label: 'Topic Group',
sortable: true,
width: '200px',
};
export const createdColumn = {
key: 'created_at',
label: 'Created',
label: 'Date Added',
sortable: true,
date: true,
width: '150px',
@@ -90,7 +90,7 @@ export const wordCountColumn = {
export const sectorColumn = {
key: 'sector_name',
label: 'Sector',
label: 'Topic Area',
sortable: false,
width: '150px',
};

View File

@@ -66,7 +66,7 @@ const AppSidebar: React.FC = () => {
const setupItems: NavItem[] = [
{
icon: <DocsIcon />,
name: "Add Keywords",
name: "Find Keywords",
path: "/setup/add-keywords",
},
];
@@ -75,7 +75,7 @@ const AppSidebar: React.FC = () => {
if (isModuleEnabled('site_builder')) {
setupItems.push({
icon: <GridIcon />,
name: "Sites",
name: "Your Websites",
path: "/sites", // Submenus shown as in-page navigation
});
}
@@ -84,7 +84,7 @@ const AppSidebar: React.FC = () => {
if (isModuleEnabled('thinker')) {
setupItems.push({
icon: <BoltIcon />,
name: "Thinker",
name: "AI Writer Setup",
path: "/thinker/prompts", // Default to prompts, submenus shown as in-page navigation
});
}
@@ -96,7 +96,7 @@ const AppSidebar: React.FC = () => {
if (isModuleEnabled('planner')) {
workflowItems.push({
icon: <ListIcon />,
name: "Planner",
name: "Organize Keywords",
path: "/planner/keywords", // Default to keywords, submenus shown as in-page navigation
});
}
@@ -105,7 +105,7 @@ const AppSidebar: React.FC = () => {
if (isModuleEnabled('writer')) {
workflowItems.push({
icon: <TaskIcon />,
name: "Writer",
name: "Write Articles",
path: "/writer/tasks", // Default to tasks, submenus shown as in-page navigation
});
}
@@ -114,7 +114,7 @@ const AppSidebar: React.FC = () => {
if (isModuleEnabled('automation')) {
workflowItems.push({
icon: <BoltIcon />,
name: "Automation",
name: "Automate Everything",
path: "/automation",
});
}
@@ -150,44 +150,44 @@ const AppSidebar: React.FC = () => {
],
},
{
label: "SETUP",
label: "GET STARTED",
items: setupItems,
},
{
label: "WORKFLOW",
label: "CREATE CONTENT",
items: workflowItems,
},
{
label: "ACCOUNT",
label: "MANAGE ACCOUNT",
items: [
{
icon: <UserCircleIcon />,
name: "Account Settings",
name: "Your Account Info",
path: "/account/settings",
},
{
icon: <UserIcon />,
name: "Team Management",
name: "Your Team",
path: "/account/team",
},
{
icon: <DollarLineIcon />,
name: "Plans & Billing",
name: "Your Subscription",
path: "/account/plans",
},
{
icon: <PieChartIcon />,
name: "Usage & Analytics",
name: "Your Usage",
path: "/account/usage",
},
],
},
{
label: "SETTINGS",
label: "CONFIGURATION",
items: [
{
icon: <UserCircleIcon />,
name: "Profile Settings",
name: "Your Profile",
path: "/settings/profile",
},
{
@@ -197,7 +197,7 @@ const AppSidebar: React.FC = () => {
},
{
icon: <PageIcon />,
name: "Publishing",
name: "Where to Publish",
path: "/settings/publishing",
},
{
@@ -208,7 +208,7 @@ const AppSidebar: React.FC = () => {
],
},
{
label: "HELP & DOCS",
label: "HELP & LEARNING",
items: [
{
icon: <DocsIcon />,

View File

@@ -37,13 +37,13 @@ import {
} from '../../icons';
const STAGE_CONFIG = [
{ icon: ListIcon, color: 'from-blue-500 to-blue-600', textColor: 'text-blue-600', hoverColor: 'hover:border-blue-500', name: 'Keywords → Clusters' },
{ icon: GroupIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600', hoverColor: 'hover:border-purple-500', name: 'Clusters → Ideas' },
{ icon: CheckCircleIcon, color: 'from-indigo-500 to-indigo-600', textColor: 'text-indigo-600', hoverColor: 'hover:border-indigo-500', name: 'Ideas → Tasks' },
{ icon: PencilIcon, color: 'from-green-500 to-green-600', textColor: 'text-green-600', hoverColor: 'hover:border-green-500', name: 'Tasks → Content' },
{ icon: FileIcon, color: 'from-amber-500 to-amber-600', textColor: 'text-amber-600', hoverColor: 'hover:border-amber-500', name: 'Content → Image Prompts' },
{ icon: FileTextIcon, color: 'from-pink-500 to-pink-600', textColor: 'text-pink-600', hoverColor: 'hover:border-pink-500', name: 'Image Prompts → Images' },
{ icon: PaperPlaneIcon, color: 'from-teal-500 to-teal-600', textColor: 'text-teal-600', hoverColor: 'hover:border-teal-500', name: 'Manual Review Gate' },
{ icon: ListIcon, color: 'from-blue-500 to-blue-600', textColor: 'text-blue-600', hoverColor: 'hover:border-blue-500', name: 'ORGANIZE KEYWORDS', desc: 'Group related search terms into topic clusters' },
{ icon: GroupIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600', hoverColor: 'hover:border-purple-500', name: 'CREATE ARTICLE IDEAS', desc: 'Generate article titles and outlines for each cluster' },
{ icon: CheckCircleIcon, color: 'from-indigo-500 to-indigo-600', textColor: 'text-indigo-600', hoverColor: 'hover:border-indigo-500', name: 'PREPARE WRITING JOBS', desc: 'Convert ideas into tasks for the AI writer' },
{ icon: PencilIcon, color: 'from-green-500 to-green-600', textColor: 'text-green-600', hoverColor: 'hover:border-green-500', name: 'WRITE ARTICLES', desc: 'AI generates full, complete articles' },
{ icon: FileIcon, color: 'from-amber-500 to-amber-600', textColor: 'text-amber-600', hoverColor: 'hover:border-amber-500', name: 'CREATE IMAGE DESCRIPTIONS', desc: 'Generate descriptions for AI to create images' },
{ icon: FileTextIcon, color: 'from-pink-500 to-pink-600', textColor: 'text-pink-600', hoverColor: 'hover:border-pink-500', name: 'GENERATE IMAGES', desc: 'AI creates custom images for your articles' },
{ icon: PaperPlaneIcon, color: 'from-teal-500 to-teal-600', textColor: 'text-teal-600', hoverColor: 'hover:border-teal-500', name: 'REVIEW & PUBLISH ⚠️', desc: 'Review articles before they go live (manual approval needed)' },
];
const AutomationPage: React.FC = () => {
@@ -378,7 +378,7 @@ const AutomationPage: React.FC = () => {
};
return (
<>
<PageMeta title="AI Automation Pipeline | IGNY8" description="Automated content creation from keywords to published articles" />
<PageMeta title="Automate Everything | IGNY8" description="Set your content on automatic - Let our AI create and publish content on a schedule" />
<div className="space-y-6">
{/* Header */}
@@ -389,7 +389,7 @@ const AutomationPage: React.FC = () => {
<BoltIcon className="text-white size-5" />
</div>
<div>
<h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">AI Automation Pipeline</h2>
<h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">Automate Everything</h2>
{activeSite && (
<p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
Site: <span className="font-medium text-brand-600 dark:text-brand-400">{activeSite.name}</span>
@@ -411,11 +411,11 @@ const AutomationPage: React.FC = () => {
<div className="text-sm font-semibold text-slate-900 dark:text-white truncate">
{currentRun?.status === 'running' && `Running - Stage ${currentRun.current_stage}/7`}
{currentRun?.status === 'paused' && 'Paused'}
{!currentRun && totalPending > 0 && 'Ready to Run'}
{!currentRun && totalPending > 0 && 'Ready to Go!'}
{!currentRun && totalPending === 0 && 'No Items Pending'}
</div>
<div className="text-xs text-slate-600 dark:text-gray-400 truncate">
{currentRun ? `Started: ${new Date(currentRun.started_at).toLocaleTimeString()}` : (totalPending > 0 ? `${totalPending} items in pipeline` : 'All stages clear')}
{currentRun ? `Started: ${new Date(currentRun.started_at).toLocaleTimeString()}` : (totalPending > 0 ? `${totalPending} items waiting - Everything is queued up and ready for the next run` : 'All stages clear')}
</div>
</div>
</div>
@@ -444,16 +444,15 @@ const AutomationPage: React.FC = () => {
</div>
<div className="h-4 w-px bg-white/25"></div>
<div className="text-sm text-white/90">
<span className="font-medium capitalize">{config.frequency}</span> at <span className="font-medium">{config.scheduled_time}</span>
Runs <span className="font-medium capitalize">{config.frequency === 'daily' ? 'every day' : config.frequency}</span> at <span className="font-medium">{config.scheduled_time}</span>
</div>
<div className="h-4 w-px bg-white/25"></div>
<div className="text-sm text-white/80">
Last: <span className="font-medium">{config.last_run_at ? new Date(config.last_run_at).toLocaleDateString() : 'Never'}</span>
Last run: <span className="font-medium">{config.last_run_at ? new Date(config.last_run_at).toLocaleDateString() : 'Never'}</span>
</div>
<div className="h-4 w-px bg-white/25"></div>
<div className="text-sm text-white/90">
<span className="font-medium">Est:</span>{' '}
<span className="font-semibold text-white">{estimate?.estimated_credits || 0} credits</span>
Uses about <span className="font-semibold text-white">{estimate?.estimated_credits || 0} credits</span> per run
{estimate && !estimate.sufficient && (
<span className="ml-1 text-white/90 font-semibold">(Low)</span>
)}
@@ -465,9 +464,10 @@ const AutomationPage: React.FC = () => {
variant="outline"
tone="brand"
size="sm"
title="Change when this automation runs and how many credits it uses"
className="!border-white !text-white hover:!bg-white hover:!text-brand-700"
>
Configure
Adjust Settings
</Button>
{currentRun?.status === 'running' && (
<Button
@@ -498,6 +498,7 @@ const AutomationPage: React.FC = () => {
tone="success"
size="sm"
disabled={!config?.is_enabled}
title="Start the automation immediately instead of waiting for the scheduled time"
className="!bg-white !text-brand-700 hover:!bg-success-600 hover:!text-white"
>
Run Now
@@ -508,6 +509,11 @@ const AutomationPage: React.FC = () => {
</ComponentCard>
)}
{/* Pipeline Statistics Header */}
<div className="mb-4">
<h3 className="text-lg font-semibold text-gray-800 dark:text-white">Here's what's in your automation pipeline:</h3>
</div>
{/* Metrics Summary Cards */}
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
{/* Keywords */}
@@ -517,7 +523,7 @@ const AutomationPage: React.FC = () => {
<div className="size-10 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
<ListIcon className="size-5 text-white" />
</div>
<div className="text-sm font-bold text-blue-900 dark:text-blue-100">Keywords</div>
<div className="text-sm font-bold text-blue-900 dark:text-blue-100">Search Terms</div>
</div>
{(() => {
const res = getStageResult(1);
@@ -525,6 +531,7 @@ const AutomationPage: React.FC = () => {
return (
<div className="text-right">
<div className="text-3xl font-bold text-blue-900">{total}</div>
<div className="text-xs text-blue-700 dark:text-blue-300">waiting to organize</div>
</div>
);
})()}
@@ -549,7 +556,7 @@ const AutomationPage: React.FC = () => {
<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>
<div className="text-sm font-bold text-purple-900 dark:text-purple-100">Clusters</div>
<div className="text-sm font-bold text-purple-900 dark:text-purple-100">Topic Groups</div>
</div>
{(() => {
const res = getStageResult(2);
@@ -557,6 +564,7 @@ const AutomationPage: React.FC = () => {
return (
<div className="text-right">
<div className="text-3xl font-bold text-purple-900">{total}</div>
<div className="text-xs text-purple-700 dark:text-purple-300">ready for ideas</div>
</div>
);
})()}
@@ -581,7 +589,7 @@ const AutomationPage: React.FC = () => {
<div className="size-10 rounded-lg bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center">
<CheckCircleIcon className="size-5 text-white" />
</div>
<div className="text-sm font-bold text-indigo-900 dark:text-indigo-100">Ideas</div>
<div className="text-sm font-bold text-indigo-900 dark:text-indigo-100">Article Ideas</div>
</div>
{(() => {
const res = getStageResult(3);
@@ -589,6 +597,7 @@ const AutomationPage: React.FC = () => {
return (
<div className="text-right">
<div className="text-3xl font-bold text-indigo-900">{total}</div>
<div className="text-xs text-indigo-700 dark:text-indigo-300">waiting to write</div>
</div>
);
})()}
@@ -615,7 +624,7 @@ const AutomationPage: React.FC = () => {
<div className="size-10 rounded-lg bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center">
<FileTextIcon className="size-5 text-white" />
</div>
<div className="text-sm font-bold text-green-900 dark:text-green-100">Content</div>
<div className="text-sm font-bold text-green-900 dark:text-green-100">Articles</div>
</div>
{(() => {
const res = getStageResult(4);
@@ -623,6 +632,7 @@ const AutomationPage: React.FC = () => {
return (
<div className="text-right">
<div className="text-3xl font-bold text-green-900">{total}</div>
<div className="text-xs text-green-700 dark:text-green-300">in various stages</div>
</div>
);
})()}
@@ -657,6 +667,7 @@ const AutomationPage: React.FC = () => {
return (
<div className="text-right">
<div className="text-3xl font-bold text-pink-900">{total}</div>
<div className="text-xs text-pink-700 dark:text-pink-300">created and waiting</div>
</div>
);
})()}

View File

@@ -592,10 +592,10 @@ export default function Home() {
{/* Custom Header with Site Selector and Refresh */}
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
<div className="flex-1">
<h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">Dashboard</h2>
<h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">Your Content Creation Dashboard</h2>
{lastUpdated && (
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
Last updated: {lastUpdated.toLocaleTimeString()}
Last checked: {lastUpdated.toLocaleTimeString()}
</p>
)}
</div>
@@ -610,6 +610,7 @@ export default function Home() {
)}
<button
onClick={fetchAppInsights}
title="Click to get the latest updates on your content creation progress"
className="px-4 py-2 text-sm font-medium text-brand-500 hover:text-brand-600 border border-brand-200 rounded-lg hover:bg-brand-50 dark:border-brand-800 dark:hover:bg-brand-500/10 transition-colors"
>
Refresh
@@ -627,7 +628,7 @@ export default function Home() {
AI-Powered Content Creation Workflow
</h1>
<p className="text-lg text-white/90">
Transform keywords into published content with intelligent automation.
Your complete toolkit for finding topics, creating content, and publishing it to your site - all automated
</p>
</div>
{/* Add Site Button and Site Count in Single Row - Right Side */}
@@ -636,7 +637,7 @@ export default function Home() {
<div className="text-right">
{sites.length > 1 ? (
<div className="text-3xl font-bold text-white">
{sites.length}/{maxSites || '∞'} Sites
{sites.length} of {maxSites || '∞'} Sites Active
</div>
) : (
<div className="text-xl font-semibold text-white/90">
@@ -679,12 +680,12 @@ export default function Home() {
<div className="space-y-6">
{/* Progress Flow - Circular Design with Progress Bar */}
<ComponentCard title="Your Progress" desc="Track your content creation workflow completion">
<ComponentCard title="Your Content Journey" desc="See how far you've come in creating and publishing content">
{/* Percentage and Progress Bar */}
<div className="mb-8">
<div className="flex items-center justify-between mb-3">
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
Overall Completion
Overall Completion: {progress.completionPercentage}% - You're making great progress!
</span>
<span className="text-2xl font-bold text-brand-600 dark:text-brand-400">
{progress.completionPercentage}%
@@ -696,6 +697,9 @@ export default function Home() {
color="primary"
className="h-4"
/>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-2">
(This shows your progress from keywords through to published content)
</p>
</div>
{/* Icon-based Progress Flow */}
@@ -708,7 +712,7 @@ export default function Home() {
<div className="text-center">
<div className="text-sm font-semibold text-gray-800 dark:text-white">Site & Sectors</div>
<div className="text-lg font-bold text-gray-900 dark:text-white">{sites.filter(s => s.active_sectors_count > 0).length}</div>
<div className="text-xs text-gray-500 dark:text-gray-400">Industry & sectors configured</div>
<div className="text-xs text-gray-500 dark:text-gray-400">Niches you're targeting - Industry & sectors set up</div>
</div>
</Link>
@@ -719,7 +723,7 @@ export default function Home() {
<div className="text-center">
<div className="text-sm font-semibold text-gray-800">Keywords</div>
<div className="text-lg font-bold text-blue-600">{progress.keywordsCount}</div>
<div className="text-xs text-gray-500">Keywords added from opportunities</div>
<div className="text-xs text-gray-500">Search terms to target - Keywords added from research</div>
</div>
</Link>
@@ -730,7 +734,7 @@ export default function Home() {
<div className="text-center">
<div className="text-sm font-semibold text-gray-800">Clusters</div>
<div className="text-lg font-bold text-purple-600">{progress.clustersCount}</div>
<div className="text-xs text-gray-500">Keywords grouped into clusters</div>
<div className="text-xs text-gray-500">Topic groups - Keywords organized by theme</div>
</div>
</Link>
@@ -741,7 +745,7 @@ export default function Home() {
<div className="text-center">
<div className="text-sm font-semibold text-gray-800">Ideas</div>
<div className="text-lg font-bold text-orange-600">{progress.ideasCount}</div>
<div className="text-xs text-gray-500">Content ideas and outlines</div>
<div className="text-xs text-gray-500">Article outlines ready - Ideas and outlines created</div>
</div>
</Link>
@@ -752,7 +756,7 @@ export default function Home() {
<div className="text-center">
<div className="text-sm font-semibold text-gray-800">Content</div>
<div className="text-lg font-bold text-green-600">{progress.contentCount}</div>
<div className="text-xs text-gray-500">Content pieces + images created</div>
<div className="text-xs text-gray-500">Articles created - Written content + images ready</div>
</div>
</Link>
@@ -763,7 +767,7 @@ export default function Home() {
<div className="text-center">
<div className="text-sm font-semibold text-gray-800">Published</div>
<div className="text-lg font-bold text-indigo-600">{progress.publishedCount}</div>
<div className="text-xs text-gray-500">Content published to site</div>
<div className="text-xs text-gray-500">Live on your site - Articles published and active</div>
</div>
</Link>
</div>
@@ -781,8 +785,8 @@ export default function Home() {
<ListIcon className="h-6 w-6" />
</div>
<div className="flex-1">
<h4 className="font-semibold text-gray-900">Keyword Research</h4>
<p className="text-xs text-gray-600">Discover opportunities</p>
<h4 className="font-semibold text-gray-900">Find Keywords to Rank For</h4>
<p className="text-xs text-gray-600">Search for topics your audience wants to read about</p>
</div>
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
</Link>
@@ -795,8 +799,8 @@ export default function Home() {
<GroupIcon className="h-6 w-6" />
</div>
<div className="flex-1">
<h4 className="font-semibold text-gray-900">Clustering & Ideas</h4>
<p className="text-xs text-gray-600">Organize strategy</p>
<h4 className="font-semibold text-gray-900">Organize Topics & Create Outlines</h4>
<p className="text-xs text-gray-600">Group keywords and create article plans</p>
</div>
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
</Link>
@@ -809,8 +813,8 @@ export default function Home() {
<PencilIcon className="h-6 w-6" />
</div>
<div className="flex-1">
<h4 className="font-semibold text-gray-900">Content Generation</h4>
<p className="text-xs text-gray-600">Create content</p>
<h4 className="font-semibold text-gray-900">Write Articles with AI</h4>
<p className="text-xs text-gray-600">Generate full articles ready to publish</p>
</div>
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
</Link>
@@ -823,8 +827,8 @@ export default function Home() {
<PlugInIcon className="h-6 w-6" />
</div>
<div className="flex-1">
<h4 className="font-semibold text-gray-900">Internal Linking</h4>
<p className="text-xs text-gray-600">Link content</p>
<h4 className="font-semibold text-gray-900">Connect Your Articles</h4>
<p className="text-xs text-gray-600">Automatically link related articles for better SEO</p>
</div>
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
</Link>
@@ -837,8 +841,8 @@ export default function Home() {
<BoltIcon className="h-6 w-6" />
</div>
<div className="flex-1">
<h4 className="font-semibold text-gray-900">Content Optimization</h4>
<p className="text-xs text-gray-600">Optimize content</p>
<h4 className="font-semibold text-gray-900">Make Articles Better</h4>
<p className="text-xs text-gray-600">Improve readability, keywords, and search rankings</p>
</div>
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
</Link>
@@ -1066,10 +1070,10 @@ export default function Home() {
</div>
<div className="flex-1">
<h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
Image Generation
Create Article Images
</h4>
<p className="text-sm text-gray-600 dark:text-gray-400">
Generate custom images for your content using AI. Create relevant, high-quality images that match your content theme and brand style. Images are automatically optimized and can be added directly to your content pieces.
Generate custom images for your content using AI. Create relevant, high-quality images that match your content theme and brand style. Images are automatically optimized and can be added directly to your articles.
</p>
</div>
</div>
@@ -1083,10 +1087,10 @@ export default function Home() {
</div>
<div className="flex-1">
<h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
Automation
Run Everything Automatically
</h4>
<p className="text-sm text-gray-600 dark:text-gray-400">
Set up automated workflows to streamline your content creation process. Schedule content generation, automatic publishing, keyword monitoring, and other tasks to save time and maintain consistency.
Set up schedules to create and publish content on its own. Automate keyword monitoring, content generation, image creation, and publishing to save time and maintain consistency across your site.
</p>
</div>
</div>
@@ -1100,10 +1104,10 @@ export default function Home() {
</div>
<div className="flex-1">
<h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
Prompts
Customize Your AI Writer
</h4>
<p className="text-sm text-gray-600 dark:text-gray-400">
Create and manage custom AI prompts to guide content generation. Customize prompts for different content types, industries, and writing styles. Save and reuse your best prompts for consistent, high-quality output.
Create custom instructions for how AI writes your content. Design prompts for different content types, industries, and writing styles. Save and reuse your best prompts for consistent, high-quality output.
</p>
</div>
</div>

View File

@@ -444,15 +444,15 @@ export default function Clusters() {
// Planner navigation tabs
const plannerTabs = [
{ label: 'Keywords', path: '/planner/keywords', icon: <ListIcon /> },
{ label: 'Clusters', path: '/planner/clusters', icon: <GroupIcon /> },
{ label: 'Keywords (individual terms)', path: '/planner/keywords', icon: <ListIcon /> },
{ label: 'Topics (keyword groups)', path: '/planner/clusters', icon: <GroupIcon /> },
{ label: 'Ideas', path: '/planner/ideas', icon: <BoltIcon /> },
];
return (
<>
<PageHeader
title="Keyword Clusters"
title="Topic Groups (Keyword Clusters)"
badge={{ icon: <GroupIcon />, color: 'purple' }}
navigation={<ModuleNavigationTabs tabs={plannerTabs} />}
workflowInsights={workflowInsights}

View File

@@ -500,12 +500,12 @@ export default function Keywords() {
if (pipelineReadiness < 30) {
insights.push({
type: 'warning' as const,
message: `Pipeline readiness at ${pipelineReadiness}% - Most keywords need clustering before content ideation can begin`,
message: `You're ${pipelineReadiness}% ready to start writing - Next step: Group your keywords by topic (${unclusteredCount} keywords are ready to organize)`,
});
} else if (pipelineReadiness < 60) {
insights.push({
type: 'info' as const,
message: `Pipeline readiness at ${pipelineReadiness}% - Clustering progress is moderate, continue organizing keywords`,
message: `You're ${pipelineReadiness}% ready to start writing - Clustering progress is moderate, continue organizing keywords`,
});
} else if (pipelineReadiness >= 85) {
insights.push({
@@ -611,15 +611,15 @@ export default function Keywords() {
// Planner navigation tabs
const plannerTabs = [
{ label: 'Keywords', path: '/planner/keywords', icon: <ListIcon /> },
{ label: 'Clusters', path: '/planner/clusters', icon: <GroupIcon /> },
{ label: 'Keywords (individual terms)', path: '/planner/keywords', icon: <ListIcon /> },
{ label: 'Topics (keyword groups)', path: '/planner/clusters', icon: <GroupIcon /> },
{ label: 'Ideas', path: '/planner/ideas', icon: <BoltIcon /> },
];
return (
<>
<PageHeader
title="Keywords"
title="Organize Your Keywords"
badge={{ icon: <ListIcon />, color: 'green' }}
navigation={<ModuleNavigationTabs tabs={plannerTabs} />}
workflowInsights={workflowInsights}

View File

@@ -275,7 +275,7 @@ export default function SiteList() {
};
const SITE_TYPES = [
{ value: '', label: 'All Types' },
{ value: '', label: 'Show All Types' },
{ value: 'marketing', label: 'Marketing' },
{ value: 'ecommerce', label: 'Ecommerce' },
{ value: 'blog', label: 'Blog' },
@@ -284,7 +284,7 @@ export default function SiteList() {
];
const HOSTING_TYPES = [
{ value: '', label: 'All Hosting' },
{ value: '', label: 'Show All Hosting' },
{ value: 'igny8_sites', label: 'IGNY8 Sites' },
{ value: 'wordpress', label: 'WordPress' },
{ value: 'shopify', label: 'Shopify' },
@@ -292,7 +292,7 @@ export default function SiteList() {
];
const STATUS_OPTIONS = [
{ value: '', label: 'All Status' },
{ value: '', label: 'Show All Status' },
{ value: 'active', label: 'Active' },
{ value: 'inactive', label: 'Inactive' },
];
@@ -444,25 +444,28 @@ export default function SiteList() {
variant="primary"
size="sm"
startIcon={<EyeIcon className="w-4 h-4" />}
title="See overview and statistics for this site"
>
Dashboard
View Site Dashboard
</Button>
<Button
onClick={() => navigate(`/sites/${site.id}/content`)}
variant="secondary"
size="sm"
startIcon={<FileIcon className="w-4 h-4" />}
title="Add, edit, or view all articles for this site"
>
Content
Manage Content
</Button>
<Button
onClick={() => navigate(`/sites/${site.id}/settings`)}
variant="outline"
size="sm"
startIcon={<PlugInIcon className="w-4 h-4" />}
title="Update connection details and publishing settings"
className="col-span-2"
>
Settings
Configure Site
</Button>
</div>
</div>
@@ -491,9 +494,9 @@ export default function SiteList() {
return (
<div className="p-6">
<PageMeta title="Sites Management - IGNY8" />
<PageMeta title="Your Websites - IGNY8" />
<PageHeader
title="Sites Management"
title="Your Websites"
badge={{ icon: <GridIcon />, color: 'blue' }}
hideSiteSector={true}
navigation={<ModuleNavigationTabs tabs={sitesTabs} />}
@@ -507,8 +510,9 @@ export default function SiteList() {
variant="success"
size="md"
startIcon={<PlusIcon className="w-5 h-5" />}
title="Connect a new WordPress or Shopify site to create content for it"
>
Add Site
+ Add Another Website
</Button>
</div>
<div className="flex items-center gap-3">