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

text udpates ux

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-25 11:51:44 +00:00
parent d21b5b1363
commit e736697d6d
23 changed files with 199 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/common/SiteCard.tsx
View File

@@ -92,6 +92,7 @@ export default function SiteCard({
variant="outline"
size="md"
onClick={() => onSettings(site)}
title="Configure Site - Update connection details and publishing settings"
className="shadow-theme-xs inline-flex h-11 w-11 items-center justify-center rounded-lg border border-gray-300 text-gray-700 dark:border-gray-700 dark:text-gray-400"
>
<svg
@@ -121,9 +122,10 @@ export default function SiteCard({
variant="outline"
size="md"
onClick={() => onDetails(site)}
title="View Site Details - See all information about this website"
className="shadow-theme-xs inline-flex h-11 items-center justify-center rounded-lg border border-gray-300 px-4 py-3 text-sm font-medium text-gray-700 dark:border-gray-700 dark:text-gray-400"
>
Details
View Details
</Button>
</div>
<Switch

9
frontend/src/components/publishing/PublishingRules.tsx
View File

@@ -109,15 +109,18 @@ export default function PublishingRules({ rules, onChange }: PublishingRulesProp
<div className="flex justify-between items-center">
<div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
Publishing Rules
Advanced Publishing Rules
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
Configure how and where content is published
Set specific rules for different types of content
</p>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
Example: Publish blog posts to WordPress but guides to your main site
</p>
</div>
<Button onClick={handleAddRule} variant="primary" size="sm">
<PlusIcon className="w-4 h-4 mr-2" />
Add Rule
+ Add a Publishing Rule
</Button>
</div>

10
frontend/src/config/snippets/columns.snippets.ts
View File

@@ -12,7 +12,7 @@ export const titleColumn = {
export const keywordColumn = {
key: 'keyword',
label: 'Keyword',
label: 'Search Term',
sortable: true,
width: 'auto',
};
@@ -27,7 +27,7 @@ export const statusColumn = {
export const volumeColumn = {
key: 'volume',
label: 'Search 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',
@@ -90,7 +90,7 @@ export const wordCountColumn = {
export const sectorColumn = {
key: 'sector_name',
label: 'Category',
label: 'Topic Area',
sortable: false,
width: '150px',
};

12
frontend/src/layout/AppSidebar.tsx
View File

@@ -84,7 +84,7 @@ const AppSidebar: React.FC = () => {
if (isModuleEnabled('thinker')) {
setupItems.push({
icon: <BoltIcon />,
name: "Content Strategy",
name: "AI Writer Setup",
path: "/thinker/prompts", // Default to prompts, submenus shown as in-page navigation
});
}
@@ -105,7 +105,7 @@ const AppSidebar: React.FC = () => {
if (isModuleEnabled('writer')) {
workflowItems.push({
icon: <TaskIcon />,
name: "Create Content",
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",
});
}
@@ -158,7 +158,7 @@ const AppSidebar: React.FC = () => {
items: workflowItems,
},
{
label: "ACCOUNT",
label: "MANAGE ACCOUNT",
items: [
{
icon: <UserCircleIcon />,
@@ -183,7 +183,7 @@ const AppSidebar: React.FC = () => {
],
},
{
label: "PREFERENCES",
label: "CONFIGURATION",
items: [
{
icon: <UserCircleIcon />,
@@ -208,7 +208,7 @@ const AppSidebar: React.FC = () => {
],
},
{
label: "SUPPORT",
label: "HELP & LEARNING",
items: [
{
icon: <DocsIcon />,

24
frontend/src/pages/Automation/AutomationPage.tsx
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', description: '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', description: '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', description: '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', description: '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', description: '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', description: '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 ⚠️', description: 'Review articles before they go live (manual approval needed)' },
];
const AutomationPage: React.FC = () => {
@@ -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">Content Automation</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,7 +411,7 @@ 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">
@@ -740,6 +740,9 @@ const AutomationPage: React.FC = () => {
{!isActive && !isComplete && stage.pending > 0 && <span className="text-xs px-2 py-0.5 bg-gray-400 text-white rounded-full">Ready</span>}
</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>
)}
</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" />
@@ -835,6 +838,9 @@ const AutomationPage: React.FC = () => {
{!isActive && !isComplete && stage.pending > 0 && <span className="text-xs px-2 py-0.5 bg-gray-400 text-white rounded-full">Ready</span>}
</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>
)}
</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" />

14
frontend/src/pages/Dashboard/Home.tsx
View File

@@ -595,7 +595,7 @@ export default function Home() {
<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>
@@ -626,9 +626,12 @@ export default function Home() {
<h1 className="text-3xl md:text-4xl font-bold mb-2">
AI-Powered Content Creation Workflow
</h1>
<p className="text-lg text-white/90">
<p className="text-lg text-white/90 mb-1">
Transform keywords into published content with intelligent automation.
</p>
<p className="text-sm text-white/80">
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 */}
<div className="flex items-center gap-4">
@@ -636,7 +639,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">
@@ -655,7 +658,7 @@ export default function Home() {
startIcon={<PlusIcon className="w-6 h-6 fill-current" />}
className="!bg-white !text-brand-600 hover:!bg-gray-50 font-bold text-base px-8 py-4 shadow-2xl hover:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.4)] hover:scale-105 active:scale-100 transition-all duration-200"
>
Add Site
+ Add Another Website
</Button>
)}
{!canAddMoreSites && sites.length > 0 && maxSites > 0 && (
@@ -696,6 +699,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 */}

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

@@ -155,7 +155,7 @@ export default function Help() {
<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">
<ListIcon className="size-5 text-brand-600 dark:text-brand-400" />
Table of Contents
What Do You Want to Learn?
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
{tableOfContents.map((item) => (
@@ -178,14 +178,14 @@ export default function Help() {
<div ref={(el) => (sectionRefs.current["getting-started"] = el)} className="mb-12 scroll-mt-24">
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
<BoltIcon className="size-8 text-brand-600 dark:text-brand-400" />
Getting Started
I'm New - Help Me Get Started!
</h2>
<Accordion>
<AccordionItem title="Quick Start Guide" defaultOpen>
<div className="space-y-4">
<p className="text-gray-700 dark:text-gray-300">
Welcome to IGNY8! Follow these steps to get started with content creation:
Let's Get You Creating Content! Follow these simple steps:
</p>
<div className="space-y-3">
@@ -194,9 +194,9 @@ export default function Help() {
1
</div>
<div className="flex-1">
<h4 className="font-semibold text-gray-900 dark:text-white mb-1">Set Up Your Site</h4>
<h4 className="font-semibold text-gray-900 dark:text-white mb-1">Step 1: Connect Your Website</h4>
<p className="text-gray-600 dark:text-gray-400 text-sm">
Go to Settings &gt; Sites and add your WordPress site. Configure the connection details and verify the integration.
Tell IGNY8 which website you want to create content for. Go to Settings &gt; Sites and add your WordPress site.
</p>
</div>
</div>
@@ -206,9 +206,9 @@ export default function Help() {
2
</div>
<div className="flex-1">
<h4 className="font-semibold text-gray-900 dark:text-white mb-1">Discover Keywords</h4>
<h4 className="font-semibold text-gray-900 dark:text-white mb-1">Step 2: Find Search Terms to Target</h4>
<p className="text-gray-600 dark:text-gray-400 text-sm">
Navigate to Planner &gt; Keyword Opportunities. Browse the global keyword database and add relevant keywords to your workflow.
Search for keywords people are looking for in your topic area. Navigate to Planner &gt; Keyword Opportunities and add relevant keywords.
</p>
</div>
</div>
@@ -218,9 +218,9 @@ export default function Help() {
3
</div>
<div className="flex-1">
<h4 className="font-semibold text-gray-900 dark:text-white mb-1">Organize Keywords</h4>
<h4 className="font-semibold text-gray-900 dark:text-white mb-1">Step 3: Organize Keywords by Topic</h4>
<p className="text-gray-600 dark:text-gray-400 text-sm">
Go to Planner &gt; Keywords and use Auto Cluster to group related keywords. This helps create comprehensive content.
Group related keywords together. Go to Planner &gt; Keywords and use Auto Cluster to organize them by theme.
</p>
</div>
</div>
@@ -230,9 +230,9 @@ export default function Help() {
4
</div>
<div className="flex-1">
<h4 className="font-semibold text-gray-900 dark:text-white mb-1">Generate Ideas</h4>
<h4 className="font-semibold text-gray-900 dark:text-white mb-1">Step 4: Create Article Outlines</h4>
<p className="text-gray-600 dark:text-gray-400 text-sm">
Select clusters in Planner &gt; Clusters and click Generate Ideas. AI will create content ideas based on your keywords.
Let AI generate article ideas for each topic. Select clusters in Planner &gt; Clusters and click Generate Ideas.
</p>
</div>
</div>
@@ -242,9 +242,9 @@ export default function Help() {
5
</div>
<div className="flex-1">
<h4 className="font-semibold text-gray-900 dark:text-white mb-1">Create Content</h4>
<h4 className="font-semibold text-gray-900 dark:text-white mb-1">Step 5: Write Your Articles</h4>
<p className="text-gray-600 dark:text-gray-400 text-sm">
Ideas automatically become tasks. Go to Writer &gt; Tasks, select tasks, and generate content. Review and edit as needed.
Turn ideas into full articles. Go to Writer &gt; Tasks, select tasks, and generate content. Review and publish when ready.
</p>
</div>
</div>

4
frontend/src/pages/Planner/Clusters.tsx
View File

@@ -444,8 +444,8 @@ 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 /> },
];

4
frontend/src/pages/Planner/Ideas.tsx
View File

@@ -350,8 +350,8 @@ export default function Ideas() {
// 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 /> },
];

8
frontend/src/pages/Planner/KeywordOpportunities.tsx
View File

@@ -569,7 +569,7 @@ export default function KeywordOpportunities() {
bulkActions: !activeSector ? [] : [
{
key: 'add_selected_to_workflow',
label: 'Add Selected to Workflow',
label: 'Add Selected Keywords',
variant: 'primary' as const,
},
],
@@ -579,7 +579,7 @@ export default function KeywordOpportunities() {
return (
<>
<PageHeader
title="Discover Keywords"
title="Find & Add Keywords to Your Site"
badge={{ icon: <BoltIcon />, color: 'orange' }}
/>
@@ -595,10 +595,10 @@ export default function KeywordOpportunities() {
</div>
<div className="flex-1">
<h3 className="text-sm font-medium text-blue-900 dark:text-blue-200">
Select a Sector to Add Keywords
Choose a Topic Area First
</h3>
<p className="mt-1 text-sm text-blue-700 dark:text-blue-300">
Please select a sector from the dropdown above to enable adding keywords to your workflow. Keywords must be added to a specific sector.
Pick a topic area first, then add keywords - You need to choose what you're writing about before adding search terms to target
</p>
</div>
</div>

4
frontend/src/pages/Planner/Keywords.tsx
View File

@@ -611,8 +611,8 @@ 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 /> },
];

63
frontend/src/pages/Settings/ImportExport.tsx
View File

@@ -1,21 +1,68 @@
import PageMeta from "../../components/common/PageMeta";
import ComponentCard from "../../components/common/ComponentCard";
import { Card } from "../../components/ui/card";
import { Download, Upload, Database, FileArchive, CheckCircle } from 'lucide-react';
export default function ImportExport() {
return (
<>
<PageMeta title="Import/Export - IGNY8" description="Data management" />
<ComponentCard title="Coming Soon" desc="Data management">
<div className="text-center py-8">
<p className="text-gray-600 dark:text-gray-400">
Import/Export - Coming Soon
</p>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
Import and export data, manage backups, and transfer content
<Card className="p-8">
<div className="text-center py-8 max-w-3xl mx-auto">
<div className="mb-6 flex justify-center">
<div className="p-4 bg-brand-100 dark:bg-brand-900/30 rounded-full">
<Database className="w-12 h-12 text-brand-600 dark:text-brand-400" />
</div>
</div>
<h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-3">
Coming Soon: Manage Your Data
</h1>
<p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
Import and Export Your Content - Backup your keywords, articles, and settings. Move your content to other platforms. Download everything safely.
</p>
<div className="bg-gradient-to-br from-brand-50 to-purple-50 dark:from-brand-900/20 dark:to-purple-900/20 rounded-lg p-6 border border-brand-200 dark:border-brand-800">
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
What will be available:
</h2>
<div className="space-y-3 text-left">
<div className="flex items-start gap-3">
<CheckCircle className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<div className="text-gray-700 dark:text-gray-300">
<strong>Export your keywords as a file</strong> (backup or share)
</div>
</div>
<div className="flex items-start gap-3">
<CheckCircle className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<div className="text-gray-700 dark:text-gray-300">
<strong>Export all your articles</strong> in different formats
</div>
</div>
<div className="flex items-start gap-3">
<CheckCircle className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<div className="text-gray-700 dark:text-gray-300">
<strong>Import keywords from other sources</strong>
</div>
</div>
<div className="flex items-start gap-3">
<CheckCircle className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<div className="text-gray-700 dark:text-gray-300">
<strong>Backup and restore</strong> your entire account
</div>
</div>
<div className="flex items-start gap-3">
<CheckCircle className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<div className="text-gray-700 dark:text-gray-300">
<strong>Download your settings</strong> and configurations
</div>
</div>
</div>
</div>
</div>
</ComponentCard>
</Card>
</>
);
}

32
frontend/src/pages/Settings/Publishing.tsx
View File

@@ -68,9 +68,9 @@ export default function Publishing() {
};
const DESTINATIONS = [
{ value: 'sites', label: 'IGNY8 Sites' },
{ value: 'wordpress', label: 'WordPress' },
{ value: 'shopify', label: 'Shopify' },
{ value: 'sites', label: 'Publish to My Sites (using IGNY8)' },
{ value: 'wordpress', label: 'Publish to WordPress (your self-hosted WordPress site)' },
{ value: 'shopify', label: 'Publish to Shopify (your Shopify store)' },
];
if (loading) {
@@ -90,10 +90,10 @@ export default function Publishing() {
<div className="mb-6">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
Publishing Settings
Where to Publish
</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
Configure default publishing destinations and rules
Set up automatic publishing - Tell us where your content should go
</p>
</div>
@@ -103,10 +103,13 @@ export default function Publishing() {
<div className="space-y-4">
<div>
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
Default Publishing Destinations
Where Should Articles Go?
</h2>
<p className="text-sm text-gray-600 dark:text-gray-400">
Select default platforms where content will be published
Choose which platforms get your articles - You can pick multiple
</p>
<p className="text-sm text-gray-600 dark:text-gray-400 mt-2">
When you publish an article, it will go to all the platforms you check here
</p>
</div>
@@ -129,10 +132,10 @@ export default function Publishing() {
<div className="space-y-4">
<div>
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
Auto-Publish Settings
Automatic Publishing
</h2>
<p className="text-sm text-gray-600 dark:text-gray-400">
Automatically publish content when it's ready
Publish articles without asking me
</p>
</div>
@@ -140,15 +143,14 @@ export default function Publishing() {
<Checkbox
checked={autoPublishEnabled}
onChange={(e) => setAutoPublishEnabled(e.target.checked)}
label="Enable auto-publish"
label="Automatically publish articles when they're finished and reviewed"
/>
</div>
{autoPublishEnabled && (
<div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
<p className="text-sm text-blue-800 dark:text-blue-200">
When enabled, content will be automatically published to selected destinations
when generation is complete.
When you turn this on, articles will publish to your site right away. You can still review them first if you want
</p>
</div>
)}
@@ -160,10 +162,10 @@ export default function Publishing() {
<div className="space-y-4">
<div>
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
Auto-Sync Settings
Keep Everything Updated
</h2>
<p className="text-sm text-gray-600 dark:text-gray-400">
Configure automatic content synchronization with publishing platforms
Automatically sync articles between platforms
</p>
</div>
@@ -171,7 +173,7 @@ export default function Publishing() {
<Checkbox
checked={autoSyncEnabled}
onChange={(e) => setAutoSyncEnabled(e.target.checked)}
label="Enable auto-sync"
label="Automatically update articles on all my platforms if I make changes"
/>
</div>

12
frontend/src/pages/Settings/Sites.tsx
View File

@@ -386,26 +386,26 @@ export default function Sites() {
return (
<>
<PageMeta title="Sites Management" description="Manage your sites and configure industries and sectors" />
<PageMeta title="Your Websites" description="Manage all your websites here - Add new sites, configure settings, and track content for each one" />
<div className="space-y-8">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Sites Management</h1>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Your Websites</h1>
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
Manage your sites, configure industries, and select sectors. Multiple sites can be active simultaneously.
Manage all your websites here - Add new sites, configure settings, and track content for each one
</p>
</div>
<Button onClick={handleCreateSite} variant="primary">
+ Add Site
+ Add Another Website
</Button>
</div>
{/* Info Alert */}
<Alert
variant="info"
title="Sites Configuration"
message="Each site can have up to 5 sectors selected from 15 major industries. Keywords and clusters are automatically associated with sectors. Multiple sites can be active simultaneously."
title="About Your Sites"
message="Active sites can receive new content. Inactive sites are paused. Each site can have up to 5 sectors selected from 15 major industries."
/>
{/* Sites Grid */}

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

@@ -280,10 +280,10 @@ export default function Content() {
// Writer navigation tabs
const writerTabs = [
{ label: 'Queue', path: '/writer/tasks', icon: <TaskIcon /> },
{ label: 'Drafts', path: '/writer/content', icon: <FileIcon /> },
{ label: 'Images', path: '/writer/images', icon: <ImageIcon /> },
{ label: 'Review', path: '/writer/review', icon: <CheckCircleIcon /> },
{ label: 'Ready to Write', path: '/writer/tasks', icon: <TaskIcon /> },
{ label: 'Finished Drafts', path: '/writer/content', icon: <FileIcon /> },
{ label: 'Article Images', path: '/writer/images', icon: <ImageIcon /> },
{ label: 'Review Before Publishing', path: '/writer/review', icon: <CheckCircleIcon /> },
{ label: 'Published', path: '/writer/published', icon: <CheckCircleIcon /> },
];

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

@@ -449,10 +449,10 @@ export default function Images() {
// Writer navigation tabs
const writerTabs = [
{ label: 'Queue', path: '/writer/tasks', icon: <TaskIcon /> },
{ label: 'Drafts', path: '/writer/content', icon: <FileIcon /> },
{ label: 'Images', path: '/writer/images', icon: <ImageIcon /> },
{ label: 'Review', path: '/writer/review', icon: <CheckCircleIcon /> },
{ label: 'Ready to Write', path: '/writer/tasks', icon: <TaskIcon /> },
{ label: 'Finished Drafts', path: '/writer/content', icon: <FileIcon /> },
{ label: 'Article Images', path: '/writer/images', icon: <ImageIcon /> },
{ label: 'Review Before Publishing', path: '/writer/review', icon: <CheckCircleIcon /> },
{ label: 'Published', path: '/writer/published', icon: <CheckCircleIcon /> },
];

8
frontend/src/pages/Writer/Published.tsx
View File

@@ -307,10 +307,10 @@ export default function Published() {
// Writer navigation tabs
const writerTabs = [
{ label: 'Queue', path: '/writer/tasks', icon: <TaskIcon /> },
{ label: 'Drafts', path: '/writer/content', icon: <FileIcon /> },
{ label: 'Images', path: '/writer/images', icon: <ImageIcon /> },
{ label: 'Review', path: '/writer/review', icon: <CheckCircleIcon /> },
{ label: 'Ready to Write', path: '/writer/tasks', icon: <TaskIcon /> },
{ label: 'Finished Drafts', path: '/writer/content', icon: <FileIcon /> },
{ label: 'Article Images', path: '/writer/images', icon: <ImageIcon /> },
{ label: 'Review Before Publishing', path: '/writer/review', icon: <CheckCircleIcon /> },
{ label: 'Published', path: '/writer/published', icon: <CheckCircleIcon /> },
];

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

@@ -346,10 +346,10 @@ export default function Review() {
// Writer navigation tabs
const writerTabs = [
{ label: 'Queue', path: '/writer/tasks', icon: <TaskIcon /> },
{ label: 'Drafts', path: '/writer/content', icon: <FileIcon /> },
{ label: 'Images', path: '/writer/images', icon: <ImageIcon /> },
{ label: 'Review', path: '/writer/review', icon: <CheckCircleIcon /> },
{ label: 'Ready to Write', path: '/writer/tasks', icon: <TaskIcon /> },
{ label: 'Finished Drafts', path: '/writer/content', icon: <FileIcon /> },
{ label: 'Article Images', path: '/writer/images', icon: <ImageIcon /> },
{ label: 'Review Before Publishing', path: '/writer/review', icon: <CheckCircleIcon /> },
{ label: 'Published', path: '/writer/published', icon: <CheckCircleIcon /> },
];

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

@@ -424,10 +424,10 @@ export default function Tasks() {
// Writer navigation tabs
const writerTabs = [
{ label: 'Queue', path: '/writer/tasks', icon: <TaskIcon /> },
{ label: 'Drafts', path: '/writer/content', icon: <FileIcon /> },
{ label: 'Images', path: '/writer/images', icon: <ImageIcon /> },
{ label: 'Review', path: '/writer/review', icon: <CheckCircleIcon /> },
{ label: 'Ready to Write', path: '/writer/tasks', icon: <TaskIcon /> },
{ label: 'Finished Drafts', path: '/writer/content', icon: <FileIcon /> },
{ label: 'Article Images', path: '/writer/images', icon: <ImageIcon /> },
{ label: 'Review Before Publishing', path: '/writer/review', icon: <CheckCircleIcon /> },
{ label: 'Published', path: '/writer/published', icon: <CheckCircleIcon /> },
];

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

@@ -353,9 +353,9 @@ export default function PlansAndBillingPage() {
return (
<div className="p-6">
<div className="mb-6">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Plans & Billing</h1>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Your Subscription</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
Manage your subscription, credits, and billing information
Manage your plan and payments - View what's included, upgrade, or buy more credits
</p>
</div>

9
frontend/src/pages/account/TeamManagementPage.tsx
View File

@@ -96,12 +96,12 @@ export default function TeamManagementPage() {
return (
<div className="p-6">
<PageMeta title="Team Management" description="Manage your team members" />
<PageMeta title="Your Team" description="Manage who can access your account - Add team members and control what they can do" />
<div className="mb-6">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Team Management</h1>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Your Team</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
Manage team members, invitations, and access control
Manage who can access your account - Add team members and control what they can do
</p>
</div>
@@ -138,8 +138,9 @@ export default function TeamManagementPage() {
size="md"
startIcon={<UserPlus className="w-4 h-4" />}
onClick={() => setShowInviteModal(true)}
title="Send an invitation to someone to join your team"
>
Invite Team Member
+ Invite Someone
</Button>
</div>

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

@@ -59,9 +59,9 @@ export default function UsageAnalyticsPage() {
}
const tabs = [
{ id: 'limits' as TabType, label: 'Plan Limits & Usage', icon: <BarChart3 className="w-4 h-4" /> },
{ id: 'activity' as TabType, label: 'Credit Activity', icon: <TrendingUp className="w-4 h-4" /> },
{ id: 'api' as TabType, label: 'API Usage', icon: <Activity className="w-4 h-4" /> },
{ id: 'limits' as TabType, label: 'Your Limits & Usage (What you\'re using)', icon: <BarChart3 className="w-4 h-4" /> },
{ id: 'activity' as TabType, label: 'Credit History (Where credits go)', icon: <TrendingUp className="w-4 h-4" /> },
{ id: 'api' as TabType, label: 'API Activity (Technical requests)', icon: <Activity className="w-4 h-4" /> },
];
return (
@@ -70,9 +70,9 @@ export default function UsageAnalyticsPage() {
{/* Page Header */}
<div className="mb-6">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Usage & Analytics</h1>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Your Usage</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
Track plan limits, credit consumption, and API usage patterns
See how much you're using - Track your credits, content limits, and API activity
</p>
</div>
@@ -85,10 +85,11 @@ export default function UsageAnalyticsPage() {
<Zap className="w-5 h-5 text-white" />
</div>
<div>
<div className="text-xs text-brand-700 dark:text-brand-300">Current Balance</div>
<div className="text-xs text-brand-700 dark:text-brand-300">Credits Left</div>
<div className="text-2xl font-bold text-brand-600 dark:text-brand-400">
{creditBalance.credits.toLocaleString()}
</div>
<div className="text-xs text-brand-600 dark:text-brand-400 mt-1">available</div>
</div>
</div>
</Card>
@@ -99,10 +100,11 @@ export default function UsageAnalyticsPage() {
<TrendingUp className="w-5 h-5 text-white" />
</div>
<div>
<div className="text-xs text-purple-700 dark:text-purple-300">Used This Month</div>
<div className="text-xs text-purple-700 dark:text-purple-300">Credits Used This Month</div>
<div className="text-2xl font-bold text-purple-600 dark:text-purple-400">
{creditBalance.credits_used_this_month.toLocaleString()}
</div>
<div className="text-xs text-purple-600 dark:text-purple-400 mt-1">spent so far</div>
</div>
</div>
</Card>
@@ -113,10 +115,11 @@ export default function UsageAnalyticsPage() {
<BarChart3 className="w-5 h-5 text-white" />
</div>
<div>
<div className="text-xs text-success-700 dark:text-success-300">Monthly Allocation</div>
<div className="text-xs text-success-700 dark:text-success-300">Your Monthly Limit</div>
<div className="text-2xl font-bold text-success-600 dark:text-success-400">
{creditBalance.plan_credits_per_month.toLocaleString()}
</div>
<div className="text-xs text-success-600 dark:text-success-400 mt-1">total each month</div>
</div>
</div>
</Card>

27
frontend/src/pages/settings/ProfileSettingsPage.tsx
View File

@@ -32,10 +32,10 @@ export default function ProfileSettingsPage() {
<div>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
<User className="w-6 h-6" />
Profile Settings
Your Profile
</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
Manage your personal information and preferences
Update your personal settings - Your name, preferences, and notification choices
</p>
</div>
<button
@@ -44,13 +44,13 @@ export default function ProfileSettingsPage() {
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
>
{saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
{saving ? 'Saving...' : 'Save Changes'}
{saving ? 'Saving...' : '✓ Save My Settings'}
</button>
</div>
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-lg font-semibold mb-4">Personal Information</h2>
<h2 className="text-lg font-semibold mb-4">About You</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
@@ -87,7 +87,7 @@ export default function ProfileSettingsPage() {
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Phone
Phone Number (optional)
</label>
<input
type="tel"
@@ -100,11 +100,11 @@ export default function ProfileSettingsPage() {
</Card>
<Card className="p-6">
<h2 className="text-lg font-semibold mb-4">Preferences</h2>
<h2 className="text-lg font-semibold mb-4">How You Like It</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Timezone
Your Timezone
</label>
<select
value={profile.timezone}
@@ -136,13 +136,16 @@ export default function ProfileSettingsPage() {
</Card>
<Card className="p-6">
<h2 className="text-lg font-semibold mb-4">Notifications</h2>
<h2 className="text-lg font-semibold mb-4">What You Want to Hear About</h2>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
Choose what emails you want to receive:
</p>
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<div className="font-medium">Email Notifications</div>
<div className="font-medium">Important Updates</div>
<div className="text-sm text-gray-600 dark:text-gray-400">
Receive important updates via email
Get notified about important changes to your account
</div>
</div>
<input
@@ -154,9 +157,9 @@ export default function ProfileSettingsPage() {
</div>
<div className="flex items-center justify-between">
<div>
<div className="font-medium">Marketing Emails</div>
<div className="font-medium">Tips & Product Updates (optional)</div>
<div className="text-sm text-gray-600 dark:text-gray-400">
Receive marketing and promotional emails
Hear about new features and content tips
</div>
</div>
<input