372 lines
13 KiB
TypeScript
372 lines
13 KiB
TypeScript
/**
|
|
* 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 (
|
|
<>
|
|
<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>
|
|
</>
|
|
);
|
|
}
|
|
|
|
if (!cluster) {
|
|
return (
|
|
<>
|
|
<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>
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<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')}
|
|
startIcon={<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
|
|
variant="ghost"
|
|
onClick={() => handleTabChange('articles')}
|
|
className={`px-4 py-2 font-medium border-b-2 rounded-none 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'
|
|
}`}
|
|
startIcon={<FileIcon className="w-4 h-4" />}
|
|
>
|
|
Articles
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => handleTabChange('pages')}
|
|
className={`px-4 py-2 font-medium border-b-2 rounded-none 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'
|
|
}`}
|
|
startIcon={<PageIcon className="w-4 h-4" />}
|
|
>
|
|
Pages
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => handleTabChange('products')}
|
|
className={`px-4 py-2 font-medium border-b-2 rounded-none 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'
|
|
}`}
|
|
startIcon={<GridIcon className="w-4 h-4" />}
|
|
>
|
|
Products
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => handleTabChange('taxonomy')}
|
|
className={`px-4 py-2 font-medium border-b-2 rounded-none 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'
|
|
}`}
|
|
startIcon={<TagIcon className="w-4 h-4" />}
|
|
>
|
|
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>
|
|
)}
|
|
</>
|
|
);
|
|
}
|