695 lines
28 KiB
TypeScript
695 lines
28 KiB
TypeScript
/**
|
|
* Post Editor (Advanced)
|
|
* Phase 7: Advanced Site Management
|
|
* Full-featured editing: SEO, metadata, tags, categories, HTML content
|
|
*/
|
|
import React, { useState, useEffect } from 'react';
|
|
import { useParams, useNavigate } from 'react-router-dom';
|
|
import { SaveIcon, XIcon, FileTextIcon, TagIcon, CheckCircleIcon, XCircleIcon, AlertCircleIcon } from 'lucide-react';
|
|
import PageMeta from '../../components/common/PageMeta';
|
|
import { Card } from '../../components/ui/card';
|
|
import Button from '../../components/ui/button/Button';
|
|
import Label from '../../components/form/Label';
|
|
import TextArea from '../../components/form/input/TextArea';
|
|
import SelectDropdown from '../../components/form/SelectDropdown';
|
|
import { useToast } from '../../components/ui/toast/ToastContainer';
|
|
import { fetchAPI, fetchContentValidation, validateContent, ContentValidationResult } from '../../services/api';
|
|
|
|
interface Content {
|
|
id?: number;
|
|
title: string;
|
|
content_html: string;
|
|
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;
|
|
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;
|
|
word_count?: number;
|
|
created_at?: string;
|
|
updated_at?: string;
|
|
}
|
|
|
|
export default function PostEditor() {
|
|
const { id: siteId, postId } = useParams<{ id: string; postId?: string }>();
|
|
const navigate = useNavigate();
|
|
const toast = useToast();
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [activeTab, setActiveTab] = useState<'content' | 'taxonomy' | 'validation'>('content');
|
|
const [validationResult, setValidationResult] = useState<ContentValidationResult | null>(null);
|
|
const [validating, setValidating] = useState(false);
|
|
const [content, setContent] = useState<Content>({
|
|
title: '',
|
|
content_html: '',
|
|
content_type: 'post',
|
|
content_structure: 'article',
|
|
status: 'draft',
|
|
site: Number(siteId),
|
|
source: 'igny8',
|
|
taxonomy_terms: [],
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (siteId) {
|
|
loadSite();
|
|
if (postId && postId !== 'new') {
|
|
loadPost();
|
|
loadValidation();
|
|
} else {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
}, [siteId, postId]);
|
|
|
|
const loadValidation = async () => {
|
|
if (!postId || postId === 'new') return;
|
|
try {
|
|
const result = await fetchContentValidation(Number(postId));
|
|
setValidationResult(result);
|
|
} catch (error: any) {
|
|
console.error('Failed to load validation:', error);
|
|
toast.error(`Failed to load validation: ${error.message || 'Unknown error'}`);
|
|
}
|
|
};
|
|
|
|
const handleValidate = async () => {
|
|
if (!content.id) {
|
|
toast.error('Please save the content first before validating');
|
|
return;
|
|
}
|
|
try {
|
|
setValidating(true);
|
|
const result = await validateContent(content.id);
|
|
await loadValidation();
|
|
if (result.is_valid) {
|
|
toast.success('Content validation passed!');
|
|
} else {
|
|
toast.warning(`Validation found ${result.errors.length} issue(s)`);
|
|
}
|
|
} catch (error: any) {
|
|
toast.error(`Validation failed: ${error.message}`);
|
|
} finally {
|
|
setValidating(false);
|
|
}
|
|
};
|
|
|
|
const loadSite = async () => {
|
|
try {
|
|
const site = await fetchAPI(`/v1/auth/sites/${siteId}/`);
|
|
if (site) {
|
|
setContent((prev) => ({
|
|
...prev,
|
|
sector: site.sector || 0,
|
|
}));
|
|
}
|
|
} catch (error: any) {
|
|
console.error('Failed to load site:', error);
|
|
}
|
|
};
|
|
|
|
const loadPost = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const data = await fetchAPI(`/v1/writer/content/${postId}/`);
|
|
if (data) {
|
|
setContent({
|
|
id: data.id,
|
|
title: data.title || '',
|
|
content_html: data.content_html || '',
|
|
content_type: data.content_type || 'post',
|
|
content_structure: data.content_structure || 'article',
|
|
status: data.status || 'draft',
|
|
site: data.site || Number(siteId),
|
|
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,
|
|
word_count: data.word_count || 0,
|
|
created_at: data.created_at,
|
|
updated_at: data.updated_at,
|
|
});
|
|
}
|
|
} catch (error: any) {
|
|
toast.error(`Failed to load post: ${error.message}`);
|
|
navigate(`/sites/${siteId}/content`);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
if (!content.title.trim()) {
|
|
toast.error('Title is required');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setSaving(true);
|
|
const payload = {
|
|
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) {
|
|
// Update existing
|
|
await fetchAPI(`/v1/writer/content/${content.id}/`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify(payload),
|
|
});
|
|
toast.success('Post updated successfully');
|
|
} else {
|
|
// Create new
|
|
const result = await fetchAPI('/v1/writer/content/', {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
...payload,
|
|
}),
|
|
});
|
|
toast.success('Post created successfully');
|
|
if (result?.id) {
|
|
navigate(`/sites/${siteId}/posts/${result.id}/edit`);
|
|
}
|
|
}
|
|
} catch (error: any) {
|
|
toast.error(`Failed to save post: ${error.message}`);
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const CONTENT_TYPES = [
|
|
{ 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: 'published', label: 'Published' },
|
|
];
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="p-6">
|
|
<PageMeta title="Post Editor" />
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-gray-500">Loading post...</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<PageMeta title={content.id ? 'Edit Post' : 'New Post'} />
|
|
|
|
<div className="flex gap-6">
|
|
{/* Main Content Area */}
|
|
<div className="flex-1">
|
|
|
|
<div className="mb-6 flex justify-between items-center">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
|
{content.id ? 'Edit Post' : 'New Post'}
|
|
</h1>
|
|
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
|
{content.id ? 'Edit your post content' : 'Create a new post'}
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => navigate(`/sites/${siteId}/content`)}
|
|
startIcon={<XIcon className="w-4 h-4" />}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
variant="primary"
|
|
onClick={handleSave}
|
|
disabled={saving || (content.status === 'publish' && validationResult && !validationResult.is_valid)}
|
|
title={content.status === 'publish' && validationResult && !validationResult.is_valid ? 'Please fix validation errors before publishing' : undefined}
|
|
startIcon={<SaveIcon className="w-4 h-4" />}
|
|
>
|
|
{saving ? 'Saving...' : content.status === 'publish' ? 'Publish' : 'Save Post'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="mb-6 border-b border-gray-200 dark:border-gray-700">
|
|
<div className="flex gap-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab('content')}
|
|
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
|
|
activeTab === 'content'
|
|
? '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'
|
|
}`}
|
|
>
|
|
<FileTextIcon className="w-4 h-4 inline mr-2" />
|
|
Content
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab('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 & Cluster
|
|
</button>
|
|
{content.id && (
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setActiveTab('validation');
|
|
loadValidation();
|
|
}}
|
|
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
|
|
activeTab === 'validation'
|
|
? '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'
|
|
}`}
|
|
>
|
|
<CheckCircleIcon className="w-4 h-4 inline mr-2" />
|
|
Validation
|
|
{validationResult && !validationResult.is_valid && (
|
|
<span className="ml-2 px-2 py-0.5 text-xs bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-400 rounded-full">
|
|
{validationResult.validation_errors.length}
|
|
</span>
|
|
)}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
{/* Content Tab */}
|
|
{activeTab === 'content' && (
|
|
<Card className="p-6">
|
|
<div className="space-y-4">
|
|
<div>
|
|
<Label>Title *</Label>
|
|
<input
|
|
type="text"
|
|
value={content.title}
|
|
onChange={(e) => setContent({ ...content, title: e.target.value })}
|
|
placeholder="Enter post title"
|
|
className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<Label>Content Type</Label>
|
|
<SelectDropdown
|
|
options={CONTENT_TYPES}
|
|
value={content.content_type}
|
|
onChange={(value) => setContent({ ...content, content_type: value })}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label>Status</Label>
|
|
<SelectDropdown
|
|
options={STATUS_OPTIONS}
|
|
value={content.status}
|
|
onChange={(value) => setContent({ ...content, status: value })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<Label>Content (HTML)</Label>
|
|
<TextArea
|
|
value={content.content_html || ''}
|
|
onChange={(value) => setContent({ ...content, content_html: value })}
|
|
rows={25}
|
|
placeholder="Write your post content here (HTML supported)..."
|
|
className="mt-1 font-mono text-sm"
|
|
/>
|
|
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
HTML content is supported. Use <p>, <h1>, <h2>, etc. for formatting.
|
|
</p>
|
|
</div>
|
|
|
|
{content.word_count !== undefined && content.word_count > 0 && (
|
|
<div className="text-sm text-gray-600 dark:text-gray-400">
|
|
Word count: {content.word_count.toLocaleString()}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Taxonomy & Cluster Tab */}
|
|
{activeTab === 'taxonomy' && (
|
|
<Card className="p-6">
|
|
<div className="space-y-4">
|
|
<div>
|
|
<Label>Cluster</Label>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
{content.cluster_name || 'No cluster assigned'}
|
|
</p>
|
|
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
Clusters help organize related content. Assign via the Planner module.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<Label>Taxonomies</Label>
|
|
{content.taxonomy_terms && content.taxonomy_terms.length > 0 ? (
|
|
<div className="mt-2 flex flex-wrap gap-2">
|
|
{content.taxonomy_terms.map((term) => (
|
|
<span
|
|
key={term.id}
|
|
className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800 dark:bg-blue-500/20 dark:text-blue-300"
|
|
>
|
|
{term.name} ({term.taxonomy})
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
No taxonomies assigned
|
|
</p>
|
|
)}
|
|
<p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
|
Taxonomies include categories, tags, and custom classifications.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<Label>Content Type</Label>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
{content.content_type}
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<Label>Content Structure</Label>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
{content.content_structure || 'Not specified'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Validation Tab - Stage 3 */}
|
|
{activeTab === 'validation' && content.id && (
|
|
<Card className="p-6">
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
Content Validation
|
|
</h3>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
Check if your content meets all requirements before publishing
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="primary"
|
|
onClick={handleValidate}
|
|
disabled={validating}
|
|
aria-label="Run content validation"
|
|
>
|
|
{validating ? 'Validating...' : 'Run Validation'}
|
|
</Button>
|
|
</div>
|
|
|
|
{validationResult ? (
|
|
<div className="space-y-4">
|
|
{/* Validation Status */}
|
|
<div className={`p-4 rounded-lg ${
|
|
validationResult.is_valid
|
|
? 'bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800'
|
|
: 'bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800'
|
|
}`}>
|
|
<div className="flex items-center gap-2">
|
|
{validationResult.is_valid ? (
|
|
<CheckCircleIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
|
|
) : (
|
|
<XCircleIcon className="w-5 h-5 text-red-600 dark:text-red-400" />
|
|
)}
|
|
<span className={`font-medium ${
|
|
validationResult.is_valid
|
|
? 'text-green-800 dark:text-green-300'
|
|
: 'text-red-800 dark:text-red-300'
|
|
}`}>
|
|
{validationResult.is_valid
|
|
? 'Content is valid and ready to publish'
|
|
: `Content has ${validationResult.validation_errors.length} validation error(s)`}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Metadata Summary */}
|
|
<div className="bg-gray-50 dark:bg-gray-900 rounded-lg p-4" role="region" aria-labelledby="metadata-summary-title">
|
|
<h4 id="metadata-summary-title" className="text-sm font-semibold text-gray-900 dark:text-white mb-3">
|
|
Metadata Summary
|
|
</h4>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<span className="text-gray-600 dark:text-gray-400">Content Type:</span>
|
|
<span className="ml-2 font-medium text-gray-900 dark:text-white">
|
|
{validationResult.metadata.content_type || 'Not set'}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-gray-600 dark:text-gray-400">Cluster Mapping:</span>
|
|
<span className={`ml-2 font-medium ${
|
|
validationResult.metadata.has_cluster_mapping
|
|
? 'text-green-600 dark:text-green-400'
|
|
: 'text-red-600 dark:text-red-400'
|
|
}`}>
|
|
{validationResult.metadata.has_cluster_mapping ? 'Yes' : 'No'}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-gray-600 dark:text-gray-400">Taxonomy Mapping:</span>
|
|
<span className={`ml-2 font-medium ${
|
|
validationResult.metadata.has_taxonomy_mapping
|
|
? 'text-green-600 dark:text-green-400'
|
|
: 'text-red-600 dark:text-red-400'
|
|
}`}>
|
|
{validationResult.metadata.has_taxonomy_mapping ? 'Yes' : 'No'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Validation Errors */}
|
|
{validationResult.validation_errors.length > 0 && (
|
|
<div role="alert" aria-live="polite">
|
|
<h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">
|
|
Validation Errors
|
|
</h4>
|
|
<div className="space-y-2">
|
|
{validationResult.validation_errors.map((error, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-start gap-2 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800"
|
|
>
|
|
<AlertCircleIcon className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
|
|
<div className="flex-1">
|
|
<div className="text-sm font-medium text-red-800 dark:text-red-300">
|
|
{error.field || error.code}
|
|
</div>
|
|
<div className="text-sm text-red-600 dark:text-red-400 mt-1">
|
|
{error.message}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Publish Errors */}
|
|
{validationResult.publish_errors && validationResult.publish_errors.length > 0 && (
|
|
<div role="alert" aria-live="polite">
|
|
<h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">
|
|
Publish Blockers
|
|
</h4>
|
|
<div className="space-y-2">
|
|
{validationResult.publish_errors.map((error, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-start gap-2 p-3 bg-orange-50 dark:bg-orange-900/20 rounded-lg border border-orange-200 dark:border-orange-800"
|
|
>
|
|
<XCircleIcon className="w-5 h-5 text-orange-600 dark:text-orange-400 flex-shrink-0 mt-0.5" />
|
|
<div className="flex-1">
|
|
<div className="text-sm font-medium text-orange-800 dark:text-orange-300">
|
|
{error.field || error.code}
|
|
</div>
|
|
<div className="text-sm text-orange-600 dark:text-orange-400 mt-1">
|
|
{error.message}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8">
|
|
<FileTextIcon className="w-12 h-12 text-gray-400 dark:text-gray-500 mx-auto mb-3 opacity-50" />
|
|
<p className="text-gray-500 dark:text-gray-400 mb-2">No validation results yet</p>
|
|
<p className="text-sm text-gray-400 dark:text-gray-500">Click "Run Validation" to check your content</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stage 3: Sidebar with Metadata Summary */}
|
|
{content.id && (
|
|
<div className="w-full lg:w-80 flex-shrink-0 mt-6 lg:mt-0">
|
|
<Card className="p-4 sticky top-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
|
Content Metadata
|
|
</h3>
|
|
|
|
<div className="space-y-4">
|
|
{/* Entity Type */}
|
|
<div>
|
|
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
|
|
Entity Type
|
|
</div>
|
|
<div className="text-sm text-gray-900 dark:text-white">
|
|
{content.content_type ? (
|
|
content.content_type.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase())
|
|
) : (
|
|
<span className="text-gray-400 dark:text-gray-500 italic">Not set</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Cluster */}
|
|
<div>
|
|
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
|
|
Cluster
|
|
</div>
|
|
<div className="text-sm text-gray-900 dark:text-white">
|
|
{content.cluster_name ? (
|
|
<>
|
|
{content.cluster_name}
|
|
{content.content_structure && (
|
|
<span className="ml-2 text-xs text-gray-500 dark:text-gray-400">
|
|
({content.content_structure})
|
|
</span>
|
|
)}
|
|
</>
|
|
) : (
|
|
<span className="text-gray-400 dark:text-gray-500 italic">Not assigned</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Taxonomy */}
|
|
<div>
|
|
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
|
|
Taxonomy
|
|
</div>
|
|
<div className="text-sm text-gray-900 dark:text-white">
|
|
{content.taxonomy_name ? (
|
|
content.taxonomy_name
|
|
) : (
|
|
<span className="text-gray-400 dark:text-gray-500 italic">Not assigned</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Validation Status */}
|
|
{validationResult && (
|
|
<div>
|
|
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
|
|
Validation Status
|
|
</div>
|
|
<div className={`text-sm font-medium ${
|
|
validationResult.is_valid
|
|
? 'text-green-600 dark:text-green-400'
|
|
: 'text-red-600 dark:text-red-400'
|
|
}`}>
|
|
{validationResult.is_valid ? '✓ Valid' : `✗ ${validationResult.validation_errors.length} error(s)`}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Quick Links */}
|
|
<div className="pt-4 border-t border-gray-200 dark:border-gray-700">
|
|
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">
|
|
Quick Actions
|
|
</div>
|
|
<div className="space-y-1">
|
|
{content.cluster_id ? (
|
|
<button
|
|
onClick={() => navigate(`/planner/clusters/${content.cluster_id}`)}
|
|
className="text-xs text-blue-600 dark:text-blue-400 hover:underline w-full text-left transition-colors focus:outline-none focus:ring-1 focus:ring-blue-500 rounded px-1"
|
|
aria-label="View cluster details"
|
|
>
|
|
View Cluster →
|
|
</button>
|
|
) : (
|
|
<span className="text-xs text-gray-400 dark:text-gray-500 italic">No cluster assigned</span>
|
|
)}
|
|
{content.taxonomy_id ? (
|
|
<button
|
|
onClick={() => navigate(`/sites/builder?taxonomy=${content.taxonomy_id}`)}
|
|
className="text-xs text-blue-600 dark:text-blue-400 hover:underline w-full text-left transition-colors focus:outline-none focus:ring-1 focus:ring-blue-500 rounded px-1"
|
|
aria-label="View taxonomy details"
|
|
>
|
|
View Taxonomy →
|
|
</button>
|
|
) : (
|
|
<span className="text-xs text-gray-400 dark:text-gray-500 italic">No taxonomy assigned</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|