feat: Complete Stage 2 frontend refactor

- Removed deprecated fields from Content and Task models, including entity_type, sync_status, and cluster_role.
- Updated Content model to include new fields: content_type, content_structure, taxonomy_terms, source, external_id, and cluster_id.
- Refactored Writer module components (Content, ContentView, Dashboard, Tasks) to align with new schema.
- Enhanced Dashboard metrics and removed unused filters.
- Implemented ClusterDetail page to display cluster information and associated content.
- Updated API service interfaces to reflect changes in data structure.
- Adjusted sorting and filtering logic across various components to accommodate new field names and types.
- Improved user experience by providing loading states and error handling in data fetching.
This commit is contained in:
IGNY8 VPS (Salman)
2025-11-25 18:17:17 +00:00
parent a5ef36016c
commit 807ced7527
19 changed files with 1045 additions and 740 deletions

View File

@@ -159,11 +159,6 @@ export default function LinkerContentList() {
{item.cluster_name ? (
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
{item.cluster_name}
{item.cluster_role && (
<span className="ml-1 text-blue-600 dark:text-blue-400">
({item.cluster_role})
</span>
)}
</span>
) : (
<span className="text-gray-400 dark:text-gray-500">-</span>

View File

@@ -111,9 +111,8 @@ export default function AnalysisPreview() {
{content.title || 'Untitled'}
</h2>
<p className="text-sm text-gray-600 dark:text-gray-400">
Word Count: {content.word_count || 0} |
Source: {content.source} |
Status: {content.sync_status}
Status: {content.status}
</p>
</div>
@@ -263,7 +262,7 @@ export default function AnalysisPreview() {
</div>
</div>
)}
{!scores.has_attributes && (content?.entity_type === 'product' || content?.entity_type === 'service') && (
{!scores.has_attributes && (content?.content_type === 'product' || content?.content_type === 'service') && (
<div className="p-3 bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg">
<div className="flex items-start gap-2">
<span className="text-orange-600 dark:text-orange-400 font-bold">3.</span>

View File

@@ -8,7 +8,6 @@ import { optimizerApi, EntryPoint } from '../../api/optimizer.api';
import { fetchContent, Content as ContentType } from '../../services/api';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { SourceBadge, ContentSource } from '../../components/content/SourceBadge';
import { SyncStatusBadge, SyncStatus } from '../../components/content/SyncStatusBadge';
import { ContentFilter, FilterState } from '../../components/content/ContentFilter';
import { OptimizationScores } from '../../components/optimizer/OptimizationScores';
import { BoltIcon, CheckCircleIcon, FileIcon } from '../../icons';
@@ -28,7 +27,6 @@ export default function OptimizerContentSelector() {
const [selectedIds, setSelectedIds] = useState<number[]>([]);
const [filters, setFilters] = useState<FilterState>({
source: 'all',
syncStatus: 'all',
search: '',
});
const [entryPoint, setEntryPoint] = useState<EntryPoint>('auto');
@@ -77,11 +75,6 @@ export default function OptimizerContentSelector() {
filtered = filtered.filter(item => item.source === filters.source);
}
// Sync status filter
if (filters.syncStatus !== 'all') {
filtered = filtered.filter(item => item.sync_status === filters.syncStatus);
}
setFilteredContent(filtered);
}, [content, filters]);
@@ -223,9 +216,6 @@ export default function OptimizerContentSelector() {
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Source
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Status
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Score
</th>
@@ -264,9 +254,6 @@ export default function OptimizerContentSelector() {
<td className="px-6 py-4 whitespace-nowrap">
<SourceBadge source={(item.source as ContentSource) || 'igny8'} />
</td>
<td className="px-6 py-4 whitespace-nowrap">
<SyncStatusBadge status={(item.sync_status as SyncStatus) || 'native'} />
</td>
<td className="px-6 py-4 whitespace-nowrap">
{scores?.overall_score ? (
<span className="text-sm font-medium text-gray-900 dark:text-white">

View File

@@ -0,0 +1,372 @@
/**
* Cluster Detail Page
* Shows cluster information with tabs for Articles, Pages, Products, and Taxonomy
* Route: /clusters/:id
*/
import { useState, useEffect } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import PageMeta from '../../components/common/PageMeta';
import PageHeader from '../../components/common/PageHeader';
import { Card } from '../../components/ui/card';
import Button from '../../components/ui/button/Button';
import Badge from '../../components/ui/badge/Badge';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { fetchAPI, Cluster, Content } from '../../services/api';
import {
GridIcon,
FileIcon,
PageIcon,
TagIcon,
ChevronLeftIcon,
EyeIcon,
PencilIcon
} from '../../icons';
type TabType = 'articles' | 'pages' | 'products' | 'taxonomy';
export default function ClusterDetail() {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const toast = useToast();
const [cluster, setCluster] = useState<Cluster | null>(null);
const [content, setContent] = useState<Content[]>([]);
const [loading, setLoading] = useState(true);
const [contentLoading, setContentLoading] = useState(false);
const [activeTab, setActiveTab] = useState<TabType>('articles');
useEffect(() => {
if (!id) {
toast.error('Cluster ID is required');
navigate('/planner/clusters');
return;
}
const clusterId = parseInt(id, 10);
if (isNaN(clusterId) || clusterId <= 0) {
toast.error('Invalid cluster ID');
navigate('/planner/clusters');
return;
}
loadCluster(clusterId);
}, [id, navigate, toast]);
useEffect(() => {
if (cluster) {
loadContent(activeTab);
}
}, [cluster, activeTab]);
const loadCluster = async (clusterId: number) => {
try {
setLoading(true);
const data = await fetchAPI(`/v1/planner/clusters/${clusterId}/`);
setCluster(data);
} catch (error: any) {
console.error('Error loading cluster:', error);
toast.error(`Failed to load cluster: ${error.message || 'Unknown error'}`);
navigate('/planner/clusters');
} finally {
setLoading(false);
}
};
const loadContent = async (tab: TabType) => {
if (!cluster) return;
try {
setContentLoading(true);
const params = new URLSearchParams({
cluster_id: cluster.id.toString(),
});
// Filter by content_type based on active tab
switch (tab) {
case 'articles':
params.append('content_type', 'post');
break;
case 'pages':
params.append('content_type', 'page');
break;
case 'products':
params.append('content_type', 'product');
break;
case 'taxonomy':
// Show categories and tags
params.append('content_type', 'category');
break;
}
const response = await fetchAPI(`/v1/writer/content/?${params.toString()}`);
const contentList = Array.isArray(response?.results)
? response.results
: Array.isArray(response)
? response
: [];
setContent(contentList);
} catch (error: any) {
console.error('Error loading content:', error);
toast.error(`Failed to load content: ${error.message}`);
setContent([]);
} finally {
setContentLoading(false);
}
};
const handleTabChange = (tab: TabType) => {
setActiveTab(tab);
};
if (loading) {
return (
<div className="p-6">
<PageMeta title="Cluster Details" description="Loading cluster information" />
<div className="flex items-center justify-center h-64">
<div className="text-gray-500">Loading cluster...</div>
</div>
</div>
);
}
if (!cluster) {
return (
<div className="p-6">
<PageMeta title="Cluster Not Found" description="The requested cluster could not be found" />
<Card className="p-12 text-center">
<p className="text-gray-600 dark:text-gray-400 mb-4">Cluster not found</p>
<Button onClick={() => navigate('/planner/clusters')} variant="solid">
Back to Clusters
</Button>
</Card>
</div>
);
}
return (
<div className="p-6">
<PageMeta
title={`${cluster.name} - Cluster Details - IGNY8`}
description={cluster.description || `View details for cluster: ${cluster.name}`}
/>
{/* Back Button */}
<div className="mb-4">
<Button
variant="ghost"
size="sm"
onClick={() => navigate('/planner/clusters')}
className="flex items-center gap-2"
>
<ChevronLeftIcon className="w-4 h-4" />
Back to Clusters
</Button>
</div>
<PageHeader
title={cluster.name}
badge={{ icon: <GridIcon />, color: 'blue' }}
hideSiteSector
/>
{/* Cluster Summary */}
<Card className="p-6 mb-6">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
<div>
<div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Keywords</div>
<div className="text-2xl font-semibold text-gray-900 dark:text-white">
{cluster.keywords_count}
</div>
</div>
<div>
<div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Total Volume</div>
<div className="text-2xl font-semibold text-gray-900 dark:text-white">
{cluster.volume.toLocaleString()}
</div>
</div>
<div>
<div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Avg Difficulty</div>
<div className="text-2xl font-semibold text-gray-900 dark:text-white">
{cluster.difficulty}
</div>
</div>
<div>
<div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Ideas</div>
<div className="text-2xl font-semibold text-gray-900 dark:text-white">
{cluster.ideas_count}
</div>
</div>
<div>
<div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Content</div>
<div className="text-2xl font-semibold text-gray-900 dark:text-white">
{cluster.content_count}
</div>
</div>
</div>
{cluster.description && (
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
<div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Description</div>
<p className="text-gray-700 dark:text-gray-300">{cluster.description}</p>
</div>
)}
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 flex items-center gap-4">
{cluster.sector_name && (
<Badge variant="light" color="info">
{cluster.sector_name}
</Badge>
)}
<Badge
variant={cluster.status === 'active' ? 'soft' : 'light'}
color={cluster.status === 'active' ? 'success' : 'neutral'}
>
{cluster.status}
</Badge>
<span className="text-xs text-gray-500 dark:text-gray-400">
Created {new Date(cluster.created_at).toLocaleDateString()}
</span>
</div>
</Card>
{/* Tabs */}
<div className="mb-6 border-b border-gray-200 dark:border-gray-700">
<div className="flex gap-4">
<button
type="button"
onClick={() => handleTabChange('articles')}
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
activeTab === 'articles'
? 'border-brand-500 text-brand-600 dark:text-brand-400'
: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
}`}
>
<FileIcon className="w-4 h-4 inline mr-2" />
Articles
</button>
<button
type="button"
onClick={() => handleTabChange('pages')}
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
activeTab === 'pages'
? 'border-brand-500 text-brand-600 dark:text-brand-400'
: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
}`}
>
<PageIcon className="w-4 h-4 inline mr-2" />
Pages
</button>
<button
type="button"
onClick={() => handleTabChange('products')}
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
activeTab === 'products'
? 'border-brand-500 text-brand-600 dark:text-brand-400'
: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
}`}
>
<GridIcon className="w-4 h-4 inline mr-2" />
Products
</button>
<button
type="button"
onClick={() => handleTabChange('taxonomy')}
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
activeTab === 'taxonomy'
? 'border-brand-500 text-brand-600 dark:text-brand-400'
: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
}`}
>
<TagIcon className="w-4 h-4 inline mr-2" />
Taxonomy
</button>
</div>
</div>
{/* Content List */}
{contentLoading ? (
<Card className="p-12 text-center">
<div className="text-gray-500">Loading content...</div>
</Card>
) : content.length === 0 ? (
<Card className="p-12 text-center">
<p className="text-gray-600 dark:text-gray-400 mb-4">
No {activeTab} found for this cluster
</p>
<Button onClick={() => navigate('/writer/tasks')} variant="solid">
Create Content
</Button>
</Card>
) : (
<Card className="p-6">
<div className="space-y-3">
{content.map((item) => (
<div
key={item.id}
className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
>
<div className="flex-1">
<h3 className="font-semibold text-gray-900 dark:text-white mb-1">
{item.title || `Content #${item.id}`}
</h3>
<div className="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-500">
<Badge
variant={item.status === 'published' ? 'soft' : 'light'}
color={item.status === 'published' ? 'success' : 'neutral'}
size="sm"
>
{item.status}
</Badge>
{item.content_type && (
<Badge variant="light" color="info" size="sm">
{item.content_type}
</Badge>
)}
{item.content_structure && (
<Badge variant="light" color="info" size="sm">
{item.content_structure}
</Badge>
)}
<span>{item.source}</span>
{item.external_url && (
<a
href={item.external_url}
target="_blank"
rel="noopener noreferrer"
className="text-brand-600 dark:text-brand-400 hover:underline"
>
View Live
</a>
)}
<span>
{new Date(item.created_at).toLocaleDateString()}
</span>
</div>
</div>
<div className="flex gap-2 ml-4">
<Button
variant="outline"
size="sm"
onClick={() => navigate(`/writer/content/${item.id}`)}
>
<EyeIcon className="w-4 h-4" />
</Button>
{item.external_url && (
<Button
variant="solid"
size="sm"
onClick={() => window.open(item.external_url!, '_blank')}
>
<PencilIcon className="w-4 h-4" />
</Button>
)}
</div>
</div>
))}
</div>
</Card>
)}
</div>
);
}

View File

@@ -46,7 +46,6 @@ export default function Ideas() {
const [clusterFilter, setClusterFilter] = useState('');
const [structureFilter, setStructureFilter] = useState('');
const [typeFilter, setTypeFilter] = useState('');
const [entityTypeFilter, setEntityTypeFilter] = useState(''); // Stage 3: Entity type filter
const [selectedIds, setSelectedIds] = useState<string[]>([]);
// Pagination state
@@ -66,8 +65,8 @@ export default function Ideas() {
const [formData, setFormData] = useState<ContentIdeaCreateData>({
idea_title: '',
description: '',
content_structure: 'blog_post',
content_type: 'blog_post',
content_structure: 'article',
content_type: 'post',
target_keywords: '',
keyword_cluster_id: null,
status: 'new',
@@ -103,7 +102,6 @@ export default function Ideas() {
...(clusterFilter && { keyword_cluster_id: clusterFilter }),
...(structureFilter && { content_structure: structureFilter }),
...(typeFilter && { content_type: typeFilter }),
...(entityTypeFilter && { site_entity_type: entityTypeFilter }), // Stage 3: Entity type filter
page: currentPage,
page_size: pageSize,
ordering,
@@ -124,7 +122,7 @@ export default function Ideas() {
setShowContent(true);
setLoading(false);
}
}, [currentPage, statusFilter, clusterFilter, structureFilter, typeFilter, entityTypeFilter, sortBy, sortDirection, searchTerm, activeSector, pageSize]);
}, [currentPage, statusFilter, clusterFilter, structureFilter, typeFilter, sortBy, sortDirection, searchTerm, activeSector, pageSize]);
useEffect(() => {
loadIdeas();
@@ -322,7 +320,6 @@ export default function Ideas() {
keyword_cluster_id: clusterFilter,
content_structure: structureFilter,
content_type: typeFilter,
site_entity_type: entityTypeFilter, // Stage 3: Entity type filter
}}
onFilterChange={(key, value) => {
const stringValue = value === null || value === undefined ? '' : String(value);
@@ -340,9 +337,6 @@ export default function Ideas() {
} else if (key === 'content_type') {
setTypeFilter(stringValue);
setCurrentPage(1);
} else if (key === 'site_entity_type') { // Stage 3: Entity type filter
setEntityTypeFilter(stringValue);
setCurrentPage(1);
}
setCurrentPage(1);
}}
@@ -351,8 +345,8 @@ export default function Ideas() {
setFormData({
idea_title: row.idea_title || '',
description: row.description || '',
content_structure: row.content_structure || 'blog_post',
content_type: row.content_type || 'blog_post',
content_structure: row.content_structure || 'article',
content_type: row.content_type || 'post',
target_keywords: row.target_keywords || '',
keyword_cluster_id: row.keyword_cluster_id || null,
status: row.status || 'new',

View File

@@ -24,16 +24,14 @@ import {
interface ContentItem {
id: number;
title: string;
meta_title?: string;
meta_description?: string;
status: string;
word_count: number;
generated_at: string;
updated_at: string;
source: string;
sync_status: string;
task_id?: number;
primary_keyword?: string;
content_type?: string;
content_structure?: string;
cluster_name?: string;
external_url?: string;
created_at: string;
}
export default function SiteContentManager() {
@@ -45,7 +43,7 @@ export default function SiteContentManager() {
const [searchTerm, setSearchTerm] = useState('');
const [statusFilter, setStatusFilter] = useState('');
const [sourceFilter, setSourceFilter] = useState('');
const [sortBy, setSortBy] = useState<'generated_at' | 'updated_at' | 'word_count' | 'title'>('generated_at');
const [sortBy, setSortBy] = useState<'created_at' | 'updated_at' | 'title'>('created_at');
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);
@@ -111,8 +109,7 @@ export default function SiteContentManager() {
const STATUS_OPTIONS = [
{ value: '', label: 'All Statuses' },
{ value: 'draft', label: 'Draft' },
{ value: 'review', label: 'Review' },
{ value: 'publish', label: 'Published' },
{ value: 'published', label: 'Published' },
];
const SOURCE_OPTIONS = [
@@ -195,11 +192,9 @@ export default function SiteContentManager() {
}}
className="px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
>
<option value="generated_at-desc">Newest First</option>
<option value="generated_at-asc">Oldest First</option>
<option value="created_at-desc">Newest First</option>
<option value="created_at-asc">Oldest First</option>
<option value="updated_at-desc">Recently Updated</option>
<option value="word_count-desc">Most Words</option>
<option value="word_count-asc">Fewest Words</option>
<option value="title-asc">Title A-Z</option>
<option value="title-desc">Title Z-A</option>
</select>
@@ -231,22 +226,16 @@ export default function SiteContentManager() {
>
<div className="flex-1">
<h3 className="font-semibold text-gray-900 dark:text-white mb-1">
{item.title || item.meta_title || `Content #${item.id}`}
{item.title || `Content #${item.id}`}
</h3>
{item.meta_description && (
<p className="text-sm text-gray-600 dark:text-gray-400 mb-2 line-clamp-2">
{item.meta_description}
</p>
)}
<div className="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-500">
<span className={`px-2 py-1 rounded ${item.status === 'publish' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : item.status === 'review' ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'}`}>
<span className={`px-2 py-1 rounded ${item.status === 'published' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'}`}>
{item.status}
</span>
<span>{item.word_count.toLocaleString()} words</span>
{item.content_type && <span>{item.content_type}</span>}
{item.content_structure && <span>{item.content_structure}</span>}
<span>{item.source}</span>
{item.primary_keyword && (
<span>Keyword: {item.primary_keyword}</span>
)}
{item.cluster_name && <span>Cluster: {item.cluster_name}</span>}
<span>
{new Date(item.updated_at).toLocaleDateString()}
</span>

View File

@@ -18,27 +18,20 @@ import { fetchAPI, fetchContentValidation, validateContent, ContentValidationRes
interface Content {
id?: number;
title: string;
html_content?: string;
content_html?: string;
content?: string;
meta_title?: string;
meta_description?: string;
primary_keyword?: string;
secondary_keywords?: string[];
tags?: string[];
categories?: string[];
content_type: string;
status: string;
site: number;
sector: number;
word_count?: number;
metadata?: Record<string, any>;
// Stage 3: Metadata fields
entity_type?: string | null;
cluster_name?: string | null;
content_type: string; // post, page, product, service, category, tag
content_structure?: string; // article, listicle, guide, comparison, product_page
status: string; // draft, published
site?: number;
cluster_id?: number | null;
taxonomy_name?: string | null;
taxonomy_id?: number | null;
cluster_role?: string | null;
cluster_name?: string | null;
taxonomy_terms?: Array<{ id: number; name: string; taxonomy: string }> | null;
source?: string; // igny8, wordpress
external_id?: string | null;
external_url?: string | null;
created_at?: string;
updated_at?: string;
}
export default function PostEditor() {
@@ -52,21 +45,15 @@ export default function PostEditor() {
const [validating, setValidating] = useState(false);
const [content, setContent] = useState<Content>({
title: '',
html_content: '',
content_html: '',
content: '',
meta_title: '',
meta_description: '',
primary_keyword: '',
secondary_keywords: [],
tags: [],
categories: [],
content_type: 'article',
content_type: 'post',
content_structure: 'article',
status: 'draft',
site: Number(siteId),
sector: 0, // Will be set from site
source: 'igny8',
taxonomy_terms: [],
});
const [tagInput, setTagInput] = useState('');
const [categoryInput, setCategoryInput] = useState('');
useEffect(() => {
if (siteId) {
@@ -134,20 +121,20 @@ export default function PostEditor() {
setContent({
id: data.id,
title: data.title || '',
html_content: data.html_content || '',
content: data.html_content || data.content || '',
meta_title: data.meta_title || '',
meta_description: data.meta_description || '',
primary_keyword: data.primary_keyword || '',
secondary_keywords: Array.isArray(data.secondary_keywords) ? data.secondary_keywords : [],
tags: Array.isArray(data.tags) ? data.tags : [],
categories: Array.isArray(data.categories) ? data.categories : [],
content_type: 'article', // Content model doesn't have content_type
content_html: data.content_html || '',
content: data.content_html || data.content || '',
content_type: data.content_type || 'post',
content_structure: data.content_structure || 'article',
status: data.status || 'draft',
site: data.site || Number(siteId),
sector: data.sector || 0,
word_count: data.word_count || 0,
metadata: data.metadata || {},
cluster_id: data.cluster_id || null,
cluster_name: data.cluster_name || null,
taxonomy_terms: Array.isArray(data.taxonomy_terms) ? data.taxonomy_terms : [],
source: data.source || 'igny8',
external_id: data.external_id || null,
external_url: data.external_url || null,
created_at: data.created_at,
updated_at: data.updated_at,
});
}
} catch (error: any) {
@@ -167,8 +154,17 @@ export default function PostEditor() {
try {
setSaving(true);
const payload = {
...content,
html_content: content.html_content || content.content,
title: content.title,
content_html: content.content_html || content.content,
content_type: content.content_type,
content_structure: content.content_structure,
status: content.status,
site: content.site,
cluster_id: content.cluster_id,
taxonomy_terms: content.taxonomy_terms,
source: content.source || 'igny8',
external_id: content.external_id,
external_url: content.external_url,
};
if (content.id) {
@@ -179,33 +175,16 @@ export default function PostEditor() {
});
toast.success('Post updated successfully');
} else {
// Create new - need to create a task first
const taskData = await fetchAPI('/v1/writer/tasks/', {
// Create new
const result = await fetchAPI('/v1/writer/content/', {
method: 'POST',
body: JSON.stringify({
title: content.title,
description: content.meta_description || '',
keywords: content.primary_keyword || '',
site_id: content.site,
sector_id: content.sector,
content_type: 'article',
content_structure: 'blog_post',
status: 'completed',
...payload,
}),
});
if (taskData?.id) {
const result = await fetchAPI('/v1/writer/content/', {
method: 'POST',
body: JSON.stringify({
...payload,
task_id: taskData.id,
}),
});
toast.success('Post created successfully');
if (result?.id) {
navigate(`/sites/${siteId}/posts/${result.id}/edit`);
}
toast.success('Post created successfully');
if (result?.id) {
navigate(`/sites/${siteId}/posts/${result.id}/edit`);
}
}
} catch (error: any) {
@@ -215,51 +194,26 @@ export default function PostEditor() {
}
};
const handleAddTag = () => {
if (tagInput.trim() && !content.tags?.includes(tagInput.trim())) {
setContent({
...content,
tags: [...(content.tags || []), tagInput.trim()],
});
setTagInput('');
}
};
const handleRemoveTag = (tag: string) => {
setContent({
...content,
tags: content.tags?.filter((t) => t !== tag) || [],
});
};
const handleAddCategory = () => {
if (categoryInput.trim() && !content.categories?.includes(categoryInput.trim())) {
setContent({
...content,
categories: [...(content.categories || []), categoryInput.trim()],
});
setCategoryInput('');
}
};
const handleRemoveCategory = (category: string) => {
setContent({
...content,
categories: content.categories?.filter((c) => c !== category) || [],
});
};
const CONTENT_TYPES = [
{ value: 'article', label: 'Article' },
{ value: 'blog_post', label: 'Blog Post' },
{ value: 'post', label: 'Post' },
{ value: 'page', label: 'Page' },
{ value: 'product', label: 'Product' },
{ value: 'service', label: 'Service' },
{ value: 'category', label: 'Category' },
{ value: 'tag', label: 'Tag' },
];
const CONTENT_STRUCTURES = [
{ value: 'article', label: 'Article' },
{ value: 'listicle', label: 'Listicle' },
{ value: 'guide', label: 'Guide' },
{ value: 'comparison', label: 'Comparison' },
{ value: 'product_page', label: 'Product Page' },
];
const STATUS_OPTIONS = [
{ value: 'draft', label: 'Draft' },
{ value: 'review', label: 'Review' },
{ value: 'publish', label: 'Published' },
{ value: 'published', label: 'Published' },
];
if (loading) {

View File

@@ -37,7 +37,6 @@ export default function Content() {
const [searchTerm, setSearchTerm] = useState('');
const [statusFilter, setStatusFilter] = useState('');
const [sourceFilter, setSourceFilter] = useState('');
const [syncStatusFilter, setSyncStatusFilter] = useState('');
const [selectedIds, setSelectedIds] = useState<string[]>([]);
// Pagination state
@@ -46,7 +45,7 @@ export default function Content() {
const [totalCount, setTotalCount] = useState(0);
// Sorting state
const [sortBy, setSortBy] = useState<string>('generated_at');
const [sortBy, setSortBy] = useState<string>('created_at');
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
const [showContent, setShowContent] = useState(false);
@@ -59,13 +58,12 @@ export default function Content() {
setLoading(true);
setShowContent(false);
try {
const ordering = sortBy ? `${sortDirection === 'desc' ? '-' : ''}${sortBy}` : '-generated_at';
const ordering = sortBy ? `${sortDirection === 'desc' ? '-' : ''}${sortBy}` : '-created_at';
const filters: ContentFilters = {
...(searchTerm && { search: searchTerm }),
...(statusFilter && { status: statusFilter }),
...(sourceFilter && { source: sourceFilter }),
...(syncStatusFilter && { sync_status: syncStatusFilter }),
page: currentPage,
page_size: pageSize,
ordering,
@@ -224,7 +222,6 @@ export default function Content() {
search: searchTerm,
status: statusFilter,
source: sourceFilter,
sync_status: syncStatusFilter,
}}
onFilterChange={(key: string, value: any) => {
if (key === 'search') {
@@ -235,9 +232,6 @@ export default function Content() {
} else if (key === 'source') {
setSourceFilter(value);
setCurrentPage(1);
} else if (key === 'sync_status') {
setSyncStatusFilter(value);
setCurrentPage(1);
}
}}
pagination={{
@@ -257,7 +251,7 @@ export default function Content() {
}}
headerMetrics={headerMetrics}
onRowAction={handleRowAction}
getItemDisplayName={(row: ContentType) => row.meta_title || row.title || `Content #${row.id}`}
getItemDisplayName={(row: ContentType) => row.title || `Content #${row.id}`}
/>
{/* Module Metrics Footer */}
@@ -274,17 +268,10 @@ export default function Content() {
{
title: 'Draft',
value: content.filter(c => c.status === 'draft').length.toLocaleString(),
subtitle: `${content.filter(c => c.status === 'review').length} in review`,
subtitle: `${content.filter(c => c.status === 'published').length} published`,
icon: <TaskIcon className="w-5 h-5" />,
accentColor: 'blue',
},
{
title: 'Synced',
value: content.filter(c => c.sync_status === 'synced').length.toLocaleString(),
subtitle: `${content.filter(c => c.sync_status === 'pending').length} pending`,
icon: <CheckCircleIcon className="w-5 h-5" />,
accentColor: 'purple',
},
]}
progress={{
label: 'Content Publishing Progress',

View File

@@ -57,8 +57,8 @@ export default function ContentView() {
return (
<>
<PageMeta
title={content ? `${content.meta_title || content.title || `Content #${content.id}`} - IGNY8` : 'Content View - IGNY8'}
description={content?.meta_description || 'View content details and metadata'}
title={content ? `${content.title || `Content #${content.id}`} - IGNY8` : 'Content View - IGNY8'}
description='View content details and metadata'
/>
<ContentViewTemplate
content={content}

View File

@@ -20,12 +20,13 @@ import {
PaperPlaneIcon,
PlugInIcon,
} from "../../icons";
import {
import {
fetchTasks,
fetchContent,
fetchContentImages,
fetchTaxonomies,
fetchAttributes
// TODO: Stage 3/4 - Add when taxonomy and attribute endpoints are implemented
// fetchTaxonomies,
// fetchAttributes
} from "../../services/api";
import { useSiteStore } from "../../store/siteStore";
import { useSectorStore } from "../../store/sectorStore";
@@ -43,7 +44,6 @@ interface WriterStats {
content: {
total: number;
drafts: number;
review: number;
published: number;
totalWordCount: number;
avgWordCount: number;
@@ -85,12 +85,11 @@ export default function WriterDashboard() {
try {
setLoading(true);
const [tasksRes, contentRes, imagesRes, taxonomiesRes, attributesRes] = await Promise.all([
// TODO: Stage 3/4 - Re-enable when taxonomy and attribute endpoints are implemented
const [tasksRes, contentRes, imagesRes] = await Promise.all([
fetchTasks({ page_size: 1000, sector_id: activeSector?.id }),
fetchContent({ page_size: 1000, sector_id: activeSector?.id }),
fetchContentImages({ sector_id: activeSector?.id }),
fetchTaxonomies({ sector_id: activeSector?.id }),
fetchAttributes({ sector_id: activeSector?.id }),
]);
const tasks = tasksRes.results || [];
@@ -101,9 +100,8 @@ export default function WriterDashboard() {
let totalWordCount = 0;
tasks.forEach(t => {
tasksByStatus[t.status || 'pending'] = (tasksByStatus[t.status || 'pending'] || 0) + 1;
if (t.status === 'pending') pendingTasks++;
else if (t.status === 'in_progress') inProgressTasks++;
tasksByStatus[t.status || 'queued'] = (tasksByStatus[t.status || 'queued'] || 0) + 1;
if (t.status === 'queued') pendingTasks++;
else if (t.status === 'completed') completedTasks++;
if (t.word_count) totalWordCount += t.word_count;
});
@@ -112,14 +110,12 @@ export default function WriterDashboard() {
const content = contentRes.results || [];
let drafts = 0;
let review = 0;
let published = 0;
let contentTotalWordCount = 0;
const contentByType: Record<string, number> = {};
content.forEach(c => {
if (c.status === 'draft') drafts++;
else if (c.status === 'review') review++;
else if (c.status === 'published') published++;
if (c.word_count) contentTotalWordCount += c.word_count;
});
@@ -149,11 +145,9 @@ export default function WriterDashboard() {
const contentThisMonth = Math.floor(content.length * 0.7);
const publishRate = content.length > 0 ? Math.round((published / content.length) * 100) : 0;
const taxonomies = taxonomiesRes.results || [];
const attributes = attributesRes.results || [];
const taxonomyCount = taxonomies.length;
const attributeCount = attributes.length;
// TODO: Stage 3/4 - Re-enable when taxonomy and attribute endpoints are implemented
const taxonomyCount = 0; // taxonomiesRes.results?.length || 0
const attributeCount = 0; // attributesRes.results?.length || 0
setStats({
tasks: {
@@ -168,7 +162,6 @@ export default function WriterDashboard() {
content: {
total: content.length,
drafts,
review,
published,
totalWordCount: contentTotalWordCount,
avgWordCount: contentAvgWordCount,
@@ -423,7 +416,7 @@ export default function WriterDashboard() {
enabled: true
},
xaxis: {
categories: ['Drafts', 'In Review', 'Published'],
categories: ['Drafts', 'Published'],
labels: {
style: {
fontFamily: 'Outfit'
@@ -444,7 +437,7 @@ export default function WriterDashboard() {
const series = [{
name: 'Content',
data: [stats.content.drafts, stats.content.review, stats.content.published]
data: [stats.content.drafts, stats.content.published]
}];
return { options, series };

View File

@@ -49,7 +49,6 @@ export default function Tasks() {
const [structureFilter, setStructureFilter] = useState('');
const [typeFilter, setTypeFilter] = useState('');
const [sourceFilter, setSourceFilter] = useState('');
const [entityTypeFilter, setEntityTypeFilter] = useState(''); // Stage 3: Entity type filter
const [selectedIds, setSelectedIds] = useState<string[]>([]);
// Pagination state
@@ -71,8 +70,8 @@ export default function Tasks() {
description: '',
keywords: '',
cluster_id: null,
content_structure: 'blog_post',
content_type: 'blog_post',
content_structure: 'article',
content_type: 'post',
status: 'queued',
word_count: 0,
});
@@ -145,7 +144,6 @@ export default function Tasks() {
...(clusterFilter && { cluster_id: clusterFilter }),
...(structureFilter && { content_structure: structureFilter }),
...(typeFilter && { content_type: typeFilter }),
...(entityTypeFilter && { entity_type: entityTypeFilter }), // Stage 3: Entity type filter
page: currentPage,
page_size: pageSize,
ordering,
@@ -533,8 +531,8 @@ export default function Tasks() {
description: '',
keywords: '',
cluster_id: null,
content_structure: 'blog_post',
content_type: 'blog_post',
content_structure: 'article',
content_type: 'post',
status: 'queued',
word_count: 0,
});
@@ -588,7 +586,6 @@ export default function Tasks() {
content_structure: structureFilter,
content_type: typeFilter,
source: sourceFilter,
entity_type: entityTypeFilter, // Stage 3: Entity type filter
}}
onFilterChange={(key, value) => {
const stringValue = value === null || value === undefined ? '' : String(value);
@@ -604,8 +601,6 @@ export default function Tasks() {
setTypeFilter(stringValue);
} else if (key === 'source') {
setSourceFilter(stringValue);
} else if (key === 'entity_type') { // Stage 3: Entity type filter
setEntityTypeFilter(stringValue);
}
setCurrentPage(1);
}}
@@ -616,8 +611,8 @@ export default function Tasks() {
description: row.description || '',
keywords: row.keywords || '',
cluster_id: row.cluster_id || null,
content_structure: row.content_structure || 'blog_post',
content_type: row.content_type || 'blog_post',
content_structure: row.content_structure || 'article',
content_type: row.content_type || 'post',
status: row.status || 'queued',
word_count: row.word_count || 0,
});