reaminig 5-t-9
This commit is contained in:
alorig
307
frontend/src/pages/Sites/Content.tsx
Normal file
307
frontend/src/pages/Sites/Content.tsx
Normal file
@@ -0,0 +1,307 @@
|
||||
/**
|
||||
* Site Content Manager (Advanced)
|
||||
* Phase 7: Advanced Site Management
|
||||
* Features: Search, filters, content listing for a site
|
||||
*/
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { SearchIcon, FilterIcon, EditIcon, EyeIcon, TrashIcon, PlusIcon } from 'lucide-react';
|
||||
import PageMeta from '../../components/common/PageMeta';
|
||||
import { Card } from '../../components/ui/card';
|
||||
import Button from '../../components/ui/button/Button';
|
||||
import { useToast } from '../../components/ui/toast/ToastContainer';
|
||||
import { fetchAPI } from '../../services/api';
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
export default function SiteContentManager() {
|
||||
const { siteId } = useParams<{ siteId: string }>();
|
||||
const navigate = useNavigate();
|
||||
const toast = useToast();
|
||||
const [content, setContent] = useState<ContentItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
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 [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
const pageSize = 20;
|
||||
|
||||
useEffect(() => {
|
||||
if (siteId) {
|
||||
loadContent();
|
||||
}
|
||||
}, [siteId, currentPage, statusFilter, sourceFilter, searchTerm, sortBy, sortDirection]);
|
||||
|
||||
const loadContent = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const params = new URLSearchParams({
|
||||
site_id: siteId!,
|
||||
page: currentPage.toString(),
|
||||
page_size: pageSize.toString(),
|
||||
ordering: sortDirection === 'desc' ? `-${sortBy}` : sortBy,
|
||||
});
|
||||
|
||||
if (searchTerm) {
|
||||
params.append('search', searchTerm);
|
||||
}
|
||||
if (statusFilter) {
|
||||
params.append('status', statusFilter);
|
||||
}
|
||||
if (sourceFilter) {
|
||||
params.append('source', sourceFilter);
|
||||
}
|
||||
|
||||
const data = await fetchAPI(`/v1/writer/content/?${params.toString()}`);
|
||||
const contentList = Array.isArray(data?.results) ? data.results : Array.isArray(data) ? data : [];
|
||||
setContent(contentList);
|
||||
setTotalCount(data?.count || contentList.length);
|
||||
setTotalPages(data?.total_pages || Math.ceil((data?.count || contentList.length) / pageSize));
|
||||
} catch (error: any) {
|
||||
toast.error(`Failed to load content: ${error.message}`);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
if (!confirm('Are you sure you want to delete this content?')) return;
|
||||
|
||||
try {
|
||||
await fetchAPI(`/v1/writer/content/${id}/`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
toast.success('Content deleted successfully');
|
||||
loadContent();
|
||||
} catch (error: any) {
|
||||
toast.error(`Failed to delete content: ${error.message}`);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredContent = useMemo(() => {
|
||||
return content;
|
||||
}, [content]);
|
||||
|
||||
const STATUS_OPTIONS = [
|
||||
{ value: '', label: 'All Statuses' },
|
||||
{ value: 'draft', label: 'Draft' },
|
||||
{ value: 'review', label: 'Review' },
|
||||
{ value: 'publish', label: 'Published' },
|
||||
];
|
||||
|
||||
const SOURCE_OPTIONS = [
|
||||
{ value: '', label: 'All Sources' },
|
||||
{ value: 'igny8', label: 'IGNY8 Generated' },
|
||||
{ value: 'wordpress', label: 'WordPress' },
|
||||
{ value: 'shopify', label: 'Shopify' },
|
||||
{ value: 'custom', label: 'Custom API' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<PageMeta title="Site Content Manager - IGNY8" />
|
||||
|
||||
<div className="mb-6 flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Content Manager
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
Manage and organize your site content ({totalCount} items)
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={() => navigate(`/sites/${siteId}/posts/new`)} variant="primary">
|
||||
<PlusIcon className="w-4 h-4 mr-2" />
|
||||
New Post
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<Card className="p-4 mb-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div className="relative">
|
||||
<SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search content..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => {
|
||||
setSearchTerm(e.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => {
|
||||
setStatusFilter(e.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
|
||||
>
|
||||
{STATUS_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={sourceFilter}
|
||||
onChange={(e) => {
|
||||
setSourceFilter(e.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
|
||||
>
|
||||
{SOURCE_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={`${sortBy}-${sortDirection}`}
|
||||
onChange={(e) => {
|
||||
const [field, direction] = e.target.value.split('-');
|
||||
setSortBy(field as typeof sortBy);
|
||||
setSortDirection(direction as 'asc' | 'desc');
|
||||
}}
|
||||
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="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>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Content List */}
|
||||
{loading ? (
|
||||
<Card className="p-12 text-center">
|
||||
<div className="text-gray-500">Loading content...</div>
|
||||
</Card>
|
||||
) : filteredContent.length === 0 ? (
|
||||
<Card className="p-12 text-center">
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-4">
|
||||
No content found
|
||||
</p>
|
||||
<Button onClick={() => navigate(`/sites/${siteId}/posts/new`)} variant="primary">
|
||||
Create Your First Post
|
||||
</Button>
|
||||
</Card>
|
||||
) : (
|
||||
<>
|
||||
<Card className="p-6">
|
||||
<div className="space-y-3">
|
||||
{filteredContent.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 || item.meta_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'}`}>
|
||||
{item.status}
|
||||
</span>
|
||||
<span>{item.word_count.toLocaleString()} words</span>
|
||||
<span>{item.source}</span>
|
||||
{item.primary_keyword && (
|
||||
<span>Keyword: {item.primary_keyword}</span>
|
||||
)}
|
||||
<span>
|
||||
{new Date(item.updated_at).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 ml-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => navigate(`/sites/${siteId}/posts/${item.id}`)}
|
||||
title="View"
|
||||
>
|
||||
<EyeIcon className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={() => navigate(`/sites/${siteId}/posts/${item.id}/edit`)}
|
||||
title="Edit"
|
||||
>
|
||||
<EditIcon className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleDelete(item.id)}
|
||||
title="Delete"
|
||||
>
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="mt-6 flex justify-center items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||||
Page {currentPage} of {totalPages}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,51 +1,90 @@
|
||||
/**
|
||||
* Site Content Editor
|
||||
* Phase 6: Site Integration & Multi-Destination Publishing
|
||||
* Core CMS features: View all pages/posts, edit page content
|
||||
*/
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { EditIcon, EyeIcon, FileTextIcon } from 'lucide-react';
|
||||
import PageMeta from '../../components/common/PageMeta';
|
||||
import { Card } from '../../components/ui/card';
|
||||
import Button from '../../components/ui/button/Button';
|
||||
import { useToast } from '../../components/ui/toast/ToastContainer';
|
||||
import { fetchAPI } from '../../services/api';
|
||||
|
||||
interface Page {
|
||||
interface PageBlueprint {
|
||||
id: number;
|
||||
slug: string;
|
||||
title: string;
|
||||
type: string;
|
||||
status: string;
|
||||
blocks: any[];
|
||||
order: number;
|
||||
blocks_json: any[];
|
||||
site_blueprint: number;
|
||||
}
|
||||
|
||||
interface SiteBlueprint {
|
||||
id: number;
|
||||
name: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export default function SiteContentEditor() {
|
||||
const { siteId } = useParams<{ siteId: string }>();
|
||||
const navigate = useNavigate();
|
||||
const toast = useToast();
|
||||
const [pages, setPages] = useState<Page[]>([]);
|
||||
const [blueprints, setBlueprints] = useState<SiteBlueprint[]>([]);
|
||||
const [selectedBlueprint, setSelectedBlueprint] = useState<number | null>(null);
|
||||
const [pages, setPages] = useState<PageBlueprint[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedPage, setSelectedPage] = useState<Page | null>(null);
|
||||
const [selectedPage, setSelectedPage] = useState<PageBlueprint | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (siteId) {
|
||||
loadPages();
|
||||
loadBlueprints();
|
||||
}
|
||||
}, [siteId]);
|
||||
|
||||
const loadPages = async () => {
|
||||
useEffect(() => {
|
||||
if (selectedBlueprint) {
|
||||
loadPages(selectedBlueprint);
|
||||
}
|
||||
}, [selectedBlueprint]);
|
||||
|
||||
const loadBlueprints = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// TODO: Load pages from SiteBlueprint API
|
||||
// For now, placeholder
|
||||
setPages([]);
|
||||
const data = await fetchAPI(`/v1/site-builder/blueprints/?site=${siteId}`);
|
||||
const blueprintsList = Array.isArray(data?.results) ? data.results : Array.isArray(data) ? data : [];
|
||||
setBlueprints(blueprintsList);
|
||||
if (blueprintsList.length > 0) {
|
||||
setSelectedBlueprint(blueprintsList[0].id);
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast.error(`Failed to load pages: ${error.message}`);
|
||||
toast.error(`Failed to load blueprints: ${error.message}`);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadPages = async (blueprintId: number) => {
|
||||
try {
|
||||
const data = await fetchAPI(`/v1/site-builder/pages/?site_blueprint=${blueprintId}`);
|
||||
const pagesList = Array.isArray(data?.results) ? data.results : Array.isArray(data) ? data : [];
|
||||
setPages(pagesList.sort((a, b) => a.order - b.order));
|
||||
} catch (error: any) {
|
||||
toast.error(`Failed to load pages: ${error.message}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditPage = (page: PageBlueprint) => {
|
||||
navigate(`/sites/${siteId}/pages/${page.id}/edit`);
|
||||
};
|
||||
|
||||
const handleViewPage = (page: PageBlueprint) => {
|
||||
navigate(`/sites/${siteId}/pages/${page.id}`);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
@@ -66,17 +105,105 @@ export default function SiteContentEditor() {
|
||||
Site Content Editor
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
Edit content for site pages
|
||||
View and edit content for site pages
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="p-6">
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Content editor will be implemented in Phase 7
|
||||
{blueprints.length === 0 ? (
|
||||
<Card className="p-12 text-center">
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-4">
|
||||
No site blueprints found for this site
|
||||
</p>
|
||||
<Button onClick={() => navigate('/site-builder')} variant="primary">
|
||||
Create Site Blueprint
|
||||
</Button>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{blueprints.length > 1 && (
|
||||
<Card className="p-4">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Select Blueprint
|
||||
</label>
|
||||
<select
|
||||
value={selectedBlueprint || ''}
|
||||
onChange={(e) => setSelectedBlueprint(Number(e.target.value))}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
|
||||
>
|
||||
{blueprints.map((bp) => (
|
||||
<option key={bp.id} value={bp.id}>
|
||||
{bp.name} ({bp.status})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{pages.length === 0 ? (
|
||||
<Card className="p-12 text-center">
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-4">
|
||||
No pages found in this blueprint
|
||||
</p>
|
||||
<Button onClick={() => navigate('/site-builder')} variant="primary">
|
||||
Generate Pages
|
||||
</Button>
|
||||
</Card>
|
||||
) : (
|
||||
<Card className="p-6">
|
||||
<div className="mb-4">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Pages ({pages.length})
|
||||
</h2>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{pages.map((page) => (
|
||||
<div
|
||||
key={page.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 items-center gap-4 flex-1">
|
||||
<FileTextIcon className="w-5 h-5 text-gray-400" />
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">
|
||||
{page.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
/{page.slug} • {page.type} • {page.status}
|
||||
</p>
|
||||
{page.blocks_json && page.blocks_json.length > 0 && (
|
||||
<p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
|
||||
{page.blocks_json.length} block{page.blocks_json.length !== 1 ? 's' : ''}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleViewPage(page)}
|
||||
title="View"
|
||||
>
|
||||
<EyeIcon className="w-4 h-4 mr-1" />
|
||||
View
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={() => handleEditPage(page)}
|
||||
title="Edit"
|
||||
>
|
||||
<EditIcon className="w-4 h-4 mr-1" />
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
/**
|
||||
* Page Manager
|
||||
* Phase 6: Site Integration & Multi-Destination Publishing
|
||||
* Page Manager (Advanced)
|
||||
* Phase 7: Advanced Site Management
|
||||
* Features: Drag-drop reorder, bulk actions, selection
|
||||
*/
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { PlusIcon, EditIcon, TrashIcon, ArrowUpIcon, ArrowDownIcon } from 'lucide-react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { DndProvider, useDrag, useDrop } from 'react-dnd';
|
||||
import { HTML5Backend } from 'react-dnd-html5-backend';
|
||||
import { PlusIcon, EditIcon, TrashIcon, GripVerticalIcon, CheckSquareIcon, SquareIcon } from 'lucide-react';
|
||||
import PageMeta from '../../components/common/PageMeta';
|
||||
import { Card } from '../../components/ui/card';
|
||||
import Button from '../../components/ui/button/Button';
|
||||
@@ -21,11 +24,87 @@ interface Page {
|
||||
blocks: any[];
|
||||
}
|
||||
|
||||
// Draggable Page Item Component
|
||||
const DraggablePageItem: React.FC<{
|
||||
page: Page;
|
||||
index: number;
|
||||
isSelected: boolean;
|
||||
onSelect: (id: number) => void;
|
||||
onEdit: (id: number) => void;
|
||||
onDelete: (id: number) => void;
|
||||
movePage: (dragIndex: number, hoverIndex: number) => void;
|
||||
}> = ({ page, index, isSelected, onSelect, onEdit, onDelete, movePage }) => {
|
||||
const [{ isDragging }, drag] = useDrag({
|
||||
type: 'page',
|
||||
item: { id: page.id, index },
|
||||
collect: (monitor) => ({
|
||||
isDragging: monitor.isDragging(),
|
||||
}),
|
||||
});
|
||||
|
||||
const [, drop] = useDrop({
|
||||
accept: 'page',
|
||||
hover: (draggedItem: { id: number; index: number }) => {
|
||||
if (draggedItem.index !== index) {
|
||||
movePage(draggedItem.index, index);
|
||||
draggedItem.index = index;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={(node) => drag(drop(node))}
|
||||
className={`flex items-center justify-between p-4 border rounded-lg transition-all ${
|
||||
isDragging
|
||||
? 'opacity-50 border-brand-500 bg-brand-50 dark:bg-brand-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800'
|
||||
} ${isSelected ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-300 dark:border-blue-700' : ''}`}
|
||||
>
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSelect(page.id);
|
||||
}}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
{isSelected ? (
|
||||
<CheckSquareIcon className="w-5 h-5 text-brand-600 dark:text-brand-400" />
|
||||
) : (
|
||||
<SquareIcon className="w-5 h-5 text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
<GripVerticalIcon className="w-5 h-5 text-gray-400 cursor-move" />
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">{page.title}</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
/{page.slug} • {page.type} • {page.status} • Order: {page.order}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => onEdit(page.id)}>
|
||||
<EditIcon className="w-4 h-4 mr-1" />
|
||||
Edit
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" onClick={() => onDelete(page.id)}>
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function PageManager() {
|
||||
const { siteId } = useParams<{ siteId: string }>();
|
||||
const navigate = useNavigate();
|
||||
const toast = useToast();
|
||||
const [pages, setPages] = useState<Page[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedPages, setSelectedPages] = useState<Set<number>>(new Set());
|
||||
const [isReordering, setIsReordering] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (siteId) {
|
||||
@@ -36,9 +115,20 @@ export default function PageManager() {
|
||||
const loadPages = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// TODO: Load pages from SiteBlueprint API
|
||||
// For now, placeholder
|
||||
setPages([]);
|
||||
// First, get blueprints for this site
|
||||
const blueprintsData = await fetchAPI(`/v1/site-builder/blueprints/?site=${siteId}`);
|
||||
const blueprints = Array.isArray(blueprintsData?.results) ? blueprintsData.results : Array.isArray(blueprintsData) ? blueprintsData : [];
|
||||
|
||||
if (blueprints.length === 0) {
|
||||
setPages([]);
|
||||
return;
|
||||
}
|
||||
|
||||
// Load pages from the first blueprint (or allow selection)
|
||||
const blueprintId = blueprints[0].id;
|
||||
const pagesData = await fetchAPI(`/v1/site-builder/pages/?site_blueprint=${blueprintId}`);
|
||||
const pagesList = Array.isArray(pagesData?.results) ? pagesData.results : Array.isArray(pagesData) ? pagesData : [];
|
||||
setPages(pagesList.sort((a, b) => a.order - b.order));
|
||||
} catch (error: any) {
|
||||
toast.error(`Failed to load pages: ${error.message}`);
|
||||
} finally {
|
||||
@@ -47,24 +137,124 @@ export default function PageManager() {
|
||||
};
|
||||
|
||||
const handleAddPage = () => {
|
||||
// TODO: Navigate to page creation
|
||||
toast.info('Page creation will be implemented in Phase 7');
|
||||
navigate(`/sites/${siteId}/pages/new`);
|
||||
};
|
||||
|
||||
const handleEditPage = (pageId: number) => {
|
||||
// TODO: Navigate to page editor
|
||||
toast.info('Page editor will be implemented in Phase 7');
|
||||
navigate(`/sites/${siteId}/pages/${pageId}/edit`);
|
||||
};
|
||||
|
||||
const handleDeletePage = async (pageId: number) => {
|
||||
if (!confirm('Are you sure you want to delete this page?')) return;
|
||||
// TODO: Delete page
|
||||
toast.info('Page deletion will be implemented in Phase 7');
|
||||
|
||||
try {
|
||||
await fetchAPI(`/v1/site-builder/pages/${pageId}/`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
toast.success('Page deleted successfully');
|
||||
loadPages();
|
||||
} catch (error: any) {
|
||||
toast.error(`Failed to delete page: ${error.message}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMovePage = async (pageId: number, direction: 'up' | 'down') => {
|
||||
// TODO: Update page order
|
||||
toast.info('Page reordering will be implemented in Phase 7');
|
||||
const movePage = (dragIndex: number, hoverIndex: number) => {
|
||||
const draggedPage = pages[dragIndex];
|
||||
const newPages = [...pages];
|
||||
newPages.splice(dragIndex, 1);
|
||||
newPages.splice(hoverIndex, 0, draggedPage);
|
||||
|
||||
// Update order values
|
||||
newPages.forEach((page, index) => {
|
||||
page.order = index;
|
||||
});
|
||||
|
||||
setPages(newPages);
|
||||
setIsReordering(true);
|
||||
};
|
||||
|
||||
const savePageOrder = async () => {
|
||||
try {
|
||||
// Update all pages' order
|
||||
await Promise.all(
|
||||
pages.map((page, index) =>
|
||||
fetchAPI(`/v1/site-builder/pages/${page.id}/`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify({ order: index }),
|
||||
})
|
||||
)
|
||||
);
|
||||
toast.success('Page order saved');
|
||||
setIsReordering(false);
|
||||
} catch (error: any) {
|
||||
toast.error(`Failed to save page order: ${error.message}`);
|
||||
loadPages(); // Reload on error
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectPage = (pageId: number) => {
|
||||
const newSelected = new Set(selectedPages);
|
||||
if (newSelected.has(pageId)) {
|
||||
newSelected.delete(pageId);
|
||||
} else {
|
||||
newSelected.add(pageId);
|
||||
}
|
||||
setSelectedPages(newSelected);
|
||||
};
|
||||
|
||||
const handleSelectAll = () => {
|
||||
if (selectedPages.size === pages.length) {
|
||||
setSelectedPages(new Set());
|
||||
} else {
|
||||
setSelectedPages(new Set(pages.map((p) => p.id)));
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkDelete = async () => {
|
||||
if (selectedPages.size === 0) {
|
||||
toast.error('No pages selected');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm(`Are you sure you want to delete ${selectedPages.size} page(s)?`)) return;
|
||||
|
||||
try {
|
||||
await Promise.all(
|
||||
Array.from(selectedPages).map((id) =>
|
||||
fetchAPI(`/v1/site-builder/pages/${id}/`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
)
|
||||
);
|
||||
toast.success(`${selectedPages.size} page(s) deleted successfully`);
|
||||
setSelectedPages(new Set());
|
||||
loadPages();
|
||||
} catch (error: any) {
|
||||
toast.error(`Failed to delete pages: ${error.message}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkStatusChange = async (newStatus: string) => {
|
||||
if (selectedPages.size === 0) {
|
||||
toast.error('No pages selected');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await Promise.all(
|
||||
Array.from(selectedPages).map((id) =>
|
||||
fetchAPI(`/v1/site-builder/pages/${id}/`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify({ status: newStatus }),
|
||||
})
|
||||
)
|
||||
);
|
||||
toast.success(`${selectedPages.size} page(s) updated`);
|
||||
setSelectedPages(new Set());
|
||||
loadPages();
|
||||
} catch (error: any) {
|
||||
toast.error(`Failed to update pages: ${error.message}`);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
@@ -107,62 +297,104 @@ export default function PageManager() {
|
||||
</Button>
|
||||
</Card>
|
||||
) : (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-3">
|
||||
{pages.map((page, index) => (
|
||||
<div
|
||||
key={page.id}
|
||||
className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg"
|
||||
>
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
<div className="flex flex-col gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleMovePage(page.id, 'up')}
|
||||
disabled={index === 0}
|
||||
>
|
||||
<ArrowUpIcon className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleMovePage(page.id, 'down')}
|
||||
disabled={index === pages.length - 1}
|
||||
>
|
||||
<ArrowDownIcon className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">
|
||||
{page.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
/{page.slug} • {page.type} • {page.status}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<>
|
||||
{/* Bulk Actions Bar */}
|
||||
{selectedPages.size > 0 && (
|
||||
<Card className="p-4 mb-4 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{selectedPages.size} page(s) selected
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleEditPage(page.id)}
|
||||
onClick={() => handleBulkStatusChange('draft')}
|
||||
>
|
||||
<EditIcon className="w-4 h-4 mr-1" />
|
||||
Edit
|
||||
Set to Draft
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleDeletePage(page.id)}
|
||||
onClick={() => handleBulkStatusChange('published')}
|
||||
>
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
Set to Published
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleBulkDelete}
|
||||
className="text-red-600 hover:text-red-700"
|
||||
>
|
||||
<TrashIcon className="w-4 h-4 mr-1" />
|
||||
Delete Selected
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" onClick={() => setSelectedPages(new Set())}>
|
||||
Clear Selection
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Reorder Save Button */}
|
||||
{isReordering && (
|
||||
<Card className="p-4 mb-4 bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Page order changed. Save to apply changes.
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => {
|
||||
loadPages();
|
||||
setIsReordering(false);
|
||||
}}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="primary" size="sm" onClick={savePageOrder}>
|
||||
Save Order
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card className="p-6">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSelectAll}
|
||||
className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
|
||||
>
|
||||
{selectedPages.size === pages.length ? (
|
||||
<CheckSquareIcon className="w-5 h-5 text-brand-600 dark:text-brand-400" />
|
||||
) : (
|
||||
<SquareIcon className="w-5 h-5 text-gray-400" />
|
||||
)}
|
||||
<span>Select All</span>
|
||||
</button>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Drag and drop to reorder pages
|
||||
</p>
|
||||
</div>
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<div className="space-y-3">
|
||||
{pages.map((page, index) => (
|
||||
<DraggablePageItem
|
||||
key={page.id}
|
||||
page={page}
|
||||
index={index}
|
||||
isSelected={selectedPages.has(page.id)}
|
||||
onSelect={handleSelectPage}
|
||||
onEdit={handleEditPage}
|
||||
onDelete={handleDeletePage}
|
||||
movePage={movePage}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</DndProvider>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
521
frontend/src/pages/Sites/PostEditor.tsx
Normal file
521
frontend/src/pages/Sites/PostEditor.tsx
Normal file
@@ -0,0 +1,521 @@
|
||||
/**
|
||||
* 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, EyeIcon, FileTextIcon, SettingsIcon, TagIcon } 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 } from '../../services/api';
|
||||
|
||||
interface Content {
|
||||
id?: number;
|
||||
title: string;
|
||||
html_content?: 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>;
|
||||
}
|
||||
|
||||
export default function PostEditor() {
|
||||
const { siteId, postId } = useParams<{ siteId: string; postId?: string }>();
|
||||
const navigate = useNavigate();
|
||||
const toast = useToast();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState<'content' | 'seo' | 'metadata'>('content');
|
||||
const [content, setContent] = useState<Content>({
|
||||
title: '',
|
||||
html_content: '',
|
||||
content: '',
|
||||
meta_title: '',
|
||||
meta_description: '',
|
||||
primary_keyword: '',
|
||||
secondary_keywords: [],
|
||||
tags: [],
|
||||
categories: [],
|
||||
content_type: 'article',
|
||||
status: 'draft',
|
||||
site: Number(siteId),
|
||||
sector: 0, // Will be set from site
|
||||
});
|
||||
const [tagInput, setTagInput] = useState('');
|
||||
const [categoryInput, setCategoryInput] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (siteId) {
|
||||
loadSite();
|
||||
if (postId && postId !== 'new') {
|
||||
loadPost();
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
}, [siteId, postId]);
|
||||
|
||||
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 || '',
|
||||
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
|
||||
status: data.status || 'draft',
|
||||
site: data.site || Number(siteId),
|
||||
sector: data.sector || 0,
|
||||
word_count: data.word_count || 0,
|
||||
metadata: data.metadata || {},
|
||||
});
|
||||
}
|
||||
} 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 = {
|
||||
...content,
|
||||
html_content: content.html_content || content.content,
|
||||
};
|
||||
|
||||
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 - need to create a task first
|
||||
const taskData = await fetchAPI('/v1/writer/tasks/', {
|
||||
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',
|
||||
}),
|
||||
});
|
||||
|
||||
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`);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast.error(`Failed to save post: ${error.message}`);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
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: 'page', label: 'Page' },
|
||||
{ value: 'product', label: 'Product' },
|
||||
];
|
||||
|
||||
const STATUS_OPTIONS = [
|
||||
{ value: 'draft', label: 'Draft' },
|
||||
{ value: 'review', label: 'Review' },
|
||||
{ value: 'publish', 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="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`)}
|
||||
>
|
||||
<XIcon className="w-4 h-4 mr-2" />
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
>
|
||||
<SaveIcon className="w-4 h-4 mr-2" />
|
||||
{saving ? 'Saving...' : '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('seo')}
|
||||
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'seo'
|
||||
? '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'
|
||||
}`}
|
||||
>
|
||||
<EyeIcon className="w-4 h-4 inline mr-2" />
|
||||
SEO
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab('metadata')}
|
||||
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'metadata'
|
||||
? '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" />
|
||||
Metadata
|
||||
</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={(e) => setContent({ ...content, content_type: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Status</Label>
|
||||
<SelectDropdown
|
||||
options={STATUS_OPTIONS}
|
||||
value={content.status}
|
||||
onChange={(e) => setContent({ ...content, status: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Content (HTML)</Label>
|
||||
<TextArea
|
||||
value={content.html_content || content.content}
|
||||
onChange={(value) => setContent({ ...content, html_content: value, content: 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>
|
||||
)}
|
||||
|
||||
{/* SEO Tab */}
|
||||
{activeTab === 'seo' && (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>Meta Title</Label>
|
||||
<input
|
||||
type="text"
|
||||
value={content.meta_title || ''}
|
||||
onChange={(e) => setContent({ ...content, meta_title: e.target.value })}
|
||||
placeholder="SEO title (recommended: 50-60 characters)"
|
||||
maxLength={60}
|
||||
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"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{content.meta_title?.length || 0}/60 characters
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Meta Description</Label>
|
||||
<TextArea
|
||||
value={content.meta_description || ''}
|
||||
onChange={(value) => setContent({ ...content, meta_description: value })}
|
||||
rows={4}
|
||||
placeholder="SEO description (recommended: 150-160 characters)"
|
||||
maxLength={160}
|
||||
className="mt-1"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{content.meta_description?.length || 0}/160 characters
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Primary Keyword</Label>
|
||||
<input
|
||||
type="text"
|
||||
value={content.primary_keyword || ''}
|
||||
onChange={(e) => setContent({ ...content, primary_keyword: e.target.value })}
|
||||
placeholder="Main keyword for this content"
|
||||
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>
|
||||
<Label>Secondary Keywords (comma-separated)</Label>
|
||||
<input
|
||||
type="text"
|
||||
value={content.secondary_keywords?.join(', ') || ''}
|
||||
onChange={(e) => {
|
||||
const keywords = e.target.value.split(',').map((k) => k.trim()).filter(Boolean);
|
||||
setContent({ ...content, secondary_keywords: keywords });
|
||||
}}
|
||||
placeholder="keyword1, keyword2, keyword3"
|
||||
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>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Metadata Tab */}
|
||||
{activeTab === 'metadata' && (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<Label>Tags</Label>
|
||||
<div className="mt-2 flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={tagInput}
|
||||
onChange={(e) => setTagInput(e.target.value)}
|
||||
onKeyPress={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
handleAddTag();
|
||||
}
|
||||
}}
|
||||
placeholder="Add a tag and press Enter"
|
||||
className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
|
||||
/>
|
||||
<Button type="button" onClick={handleAddTag} variant="outline">
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
{content.tags && content.tags.length > 0 && (
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{content.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="inline-flex items-center gap-1 px-3 py-1 bg-gray-100 dark:bg-gray-800 rounded-full text-sm"
|
||||
>
|
||||
{tag}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveTag(tag)}
|
||||
className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Categories</Label>
|
||||
<div className="mt-2 flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={categoryInput}
|
||||
onChange={(e) => setCategoryInput(e.target.value)}
|
||||
onKeyPress={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
handleAddCategory();
|
||||
}
|
||||
}}
|
||||
placeholder="Add a category and press Enter"
|
||||
className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
|
||||
/>
|
||||
<Button type="button" onClick={handleAddCategory} variant="outline">
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
{content.categories && content.categories.length > 0 && (
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{content.categories.map((category) => (
|
||||
<span
|
||||
key={category}
|
||||
className="inline-flex items-center gap-1 px-3 py-1 bg-blue-100 dark:bg-blue-900 rounded-full text-sm"
|
||||
>
|
||||
{category}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveCategory(category)}
|
||||
className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
185
frontend/src/pages/Sites/Preview.tsx
Normal file
185
frontend/src/pages/Sites/Preview.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
/**
|
||||
* Site Preview
|
||||
* Phase 7: Advanced Site Management
|
||||
* Features: Live iframe preview of deployed site
|
||||
*/
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { RefreshCwIcon, ExternalLinkIcon, Maximize2Icon, Minimize2Icon } from 'lucide-react';
|
||||
import PageMeta from '../../components/common/PageMeta';
|
||||
import { Card } from '../../components/ui/card';
|
||||
import Button from '../../components/ui/button/Button';
|
||||
import { useToast } from '../../components/ui/toast/ToastContainer';
|
||||
import { fetchAPI } from '../../services/api';
|
||||
|
||||
export default function SitePreview() {
|
||||
const { siteId } = useParams<{ siteId: string }>();
|
||||
const toast = useToast();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
const [blueprint, setBlueprint] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (siteId) {
|
||||
loadPreviewData();
|
||||
}
|
||||
}, [siteId]);
|
||||
|
||||
const loadPreviewData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// Get the latest blueprint for this site
|
||||
const blueprintsData = await fetchAPI(`/v1/site-builder/blueprints/?site=${siteId}`);
|
||||
const blueprints = Array.isArray(blueprintsData?.results) ? blueprintsData.results : Array.isArray(blueprintsData) ? blueprintsData : [];
|
||||
|
||||
if (blueprints.length > 0) {
|
||||
const latestBlueprint = blueprints[0];
|
||||
setBlueprint(latestBlueprint);
|
||||
|
||||
// Get publishing status to find preview URL
|
||||
if (latestBlueprint.deployed_version) {
|
||||
// Try to get publishing record
|
||||
try {
|
||||
const publishingData = await fetchAPI(`/v1/publishing/records/?site_blueprint=${latestBlueprint.id}`);
|
||||
const records = Array.isArray(publishingData?.results) ? publishingData.results : Array.isArray(publishingData) ? publishingData : [];
|
||||
|
||||
if (records.length > 0) {
|
||||
const record = records.find((r: any) => r.status === 'published') || records[0];
|
||||
if (record?.published_url) {
|
||||
setPreviewUrl(record.published_url);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
// If no publishing record, construct preview URL from blueprint
|
||||
console.warn('No publishing record found, using fallback URL');
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback: construct preview URL from blueprint
|
||||
if (!previewUrl && latestBlueprint.id) {
|
||||
// Assuming sites are hosted at a subdomain or path
|
||||
const baseUrl = window.location.origin;
|
||||
setPreviewUrl(`${baseUrl}/sites/${siteId}/preview/${latestBlueprint.id}`);
|
||||
}
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast.error(`Failed to load preview: ${error.message}`);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
if (previewUrl) {
|
||||
const iframe = document.getElementById('preview-iframe') as HTMLIFrameElement;
|
||||
if (iframe) {
|
||||
iframe.src = iframe.src;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenInNewTab = () => {
|
||||
if (previewUrl) {
|
||||
window.open(previewUrl, '_blank');
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<PageMeta title="Site Preview" />
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-gray-500">Loading preview...</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!previewUrl) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<PageMeta title="Site Preview - IGNY8" />
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Site Preview
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
Preview your deployed site
|
||||
</p>
|
||||
</div>
|
||||
<Card className="p-12 text-center">
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-4">
|
||||
No preview available. Please deploy your site first.
|
||||
</p>
|
||||
{blueprint && (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-500">
|
||||
Blueprint: {blueprint.name} ({blueprint.status})
|
||||
</p>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`p-6 ${isFullscreen ? 'fixed inset-0 z-50 bg-white dark:bg-gray-900 p-0' : ''}`}>
|
||||
<PageMeta title="Site Preview - IGNY8" />
|
||||
|
||||
{!isFullscreen && (
|
||||
<div className="mb-6 flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Site Preview
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
Live preview of your deployed site
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={handleRefresh}>
|
||||
<RefreshCwIcon className="w-4 h-4 mr-2" />
|
||||
Refresh
|
||||
</Button>
|
||||
<Button variant="outline" onClick={handleOpenInNewTab}>
|
||||
<ExternalLinkIcon className="w-4 h-4 mr-2" />
|
||||
Open in New Tab
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => setIsFullscreen(true)}>
|
||||
<Maximize2Icon className="w-4 h-4 mr-2" />
|
||||
Fullscreen
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isFullscreen && (
|
||||
<div className="absolute top-4 right-4 z-10">
|
||||
<Button variant="outline" onClick={() => setIsFullscreen(false)}>
|
||||
<Minimize2Icon className="w-4 h-4 mr-2" />
|
||||
Exit Fullscreen
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Card className={`${isFullscreen ? 'h-full m-0 rounded-none' : ''} overflow-hidden`}>
|
||||
<div className={`relative ${isFullscreen ? 'h-screen' : 'h-[calc(100vh-300px)]'} min-h-[600px]`}>
|
||||
<iframe
|
||||
id="preview-iframe"
|
||||
src={previewUrl}
|
||||
className="w-full h-full border-0"
|
||||
title="Site Preview"
|
||||
sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-modals"
|
||||
allow="fullscreen"
|
||||
/>
|
||||
{!isFullscreen && (
|
||||
<div className="absolute bottom-4 right-4 bg-black/50 text-white px-3 py-1 rounded text-sm">
|
||||
{previewUrl}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,15 +1,18 @@
|
||||
/**
|
||||
* Site Settings
|
||||
* Phase 6: Site Integration & Multi-Destination Publishing
|
||||
* Site Settings (Advanced)
|
||||
* Phase 7: Advanced Site Management
|
||||
* Features: SEO (meta tags, Open Graph, schema.org)
|
||||
*/
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { SettingsIcon, SearchIcon, Share2Icon, CodeIcon } 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 SelectDropdown from '../../components/form/SelectDropdown';
|
||||
import Checkbox from '../../components/form/input/Checkbox';
|
||||
import TextArea from '../../components/form/input/TextArea';
|
||||
import { useToast } from '../../components/ui/toast/ToastContainer';
|
||||
import { fetchAPI } from '../../services/api';
|
||||
|
||||
@@ -21,12 +24,28 @@ export default function SiteSettings() {
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [site, setSite] = useState<any>(null);
|
||||
|
||||
const [activeTab, setActiveTab] = useState<'general' | 'seo' | 'og' | 'schema'>('general');
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
slug: '',
|
||||
site_type: 'marketing',
|
||||
hosting_type: 'igny8_sites',
|
||||
is_active: true,
|
||||
// SEO fields
|
||||
meta_title: '',
|
||||
meta_description: '',
|
||||
meta_keywords: '',
|
||||
og_title: '',
|
||||
og_description: '',
|
||||
og_image: '',
|
||||
og_type: 'website',
|
||||
og_site_name: '',
|
||||
schema_type: 'Organization',
|
||||
schema_name: '',
|
||||
schema_description: '',
|
||||
schema_url: '',
|
||||
schema_logo: '',
|
||||
schema_same_as: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
@@ -41,12 +60,28 @@ export default function SiteSettings() {
|
||||
const data = await fetchAPI(`/v1/auth/sites/${siteId}/`);
|
||||
if (data) {
|
||||
setSite(data);
|
||||
const seoData = data.seo_metadata || data.metadata || {};
|
||||
setFormData({
|
||||
name: data.name || '',
|
||||
slug: data.slug || '',
|
||||
site_type: data.site_type || 'marketing',
|
||||
hosting_type: data.hosting_type || 'igny8_sites',
|
||||
is_active: data.is_active !== false,
|
||||
// SEO fields
|
||||
meta_title: seoData.meta_title || data.name || '',
|
||||
meta_description: seoData.meta_description || data.description || '',
|
||||
meta_keywords: seoData.meta_keywords || '',
|
||||
og_title: seoData.og_title || seoData.meta_title || data.name || '',
|
||||
og_description: seoData.og_description || seoData.meta_description || data.description || '',
|
||||
og_image: seoData.og_image || '',
|
||||
og_type: seoData.og_type || 'website',
|
||||
og_site_name: seoData.og_site_name || data.name || '',
|
||||
schema_type: seoData.schema_type || 'Organization',
|
||||
schema_name: seoData.schema_name || data.name || '',
|
||||
schema_description: seoData.schema_description || data.description || '',
|
||||
schema_url: seoData.schema_url || data.domain || '',
|
||||
schema_logo: seoData.schema_logo || '',
|
||||
schema_same_as: Array.isArray(seoData.schema_same_as) ? seoData.schema_same_as.join(', ') : seoData.schema_same_as || '',
|
||||
});
|
||||
}
|
||||
} catch (error: any) {
|
||||
@@ -59,9 +94,31 @@ export default function SiteSettings() {
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
setSaving(true);
|
||||
const { meta_title, meta_description, meta_keywords, og_title, og_description, og_image, og_type, og_site_name, schema_type, schema_name, schema_description, schema_url, schema_logo, schema_same_as, ...basicData } = formData;
|
||||
|
||||
const payload = {
|
||||
...basicData,
|
||||
seo_metadata: {
|
||||
meta_title,
|
||||
meta_description,
|
||||
meta_keywords,
|
||||
og_title,
|
||||
og_description,
|
||||
og_image,
|
||||
og_type,
|
||||
og_site_name,
|
||||
schema_type,
|
||||
schema_name,
|
||||
schema_description,
|
||||
schema_url,
|
||||
schema_logo,
|
||||
schema_same_as: schema_same_as ? schema_same_as.split(',').map((s) => s.trim()).filter(Boolean) : [],
|
||||
},
|
||||
};
|
||||
|
||||
await fetchAPI(`/v1/auth/sites/${siteId}/`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(formData),
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
toast.success('Site settings saved successfully');
|
||||
loadSite();
|
||||
@@ -111,56 +168,312 @@ export default function SiteSettings() {
|
||||
</p>
|
||||
</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('general')}
|
||||
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'general'
|
||||
? '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'
|
||||
}`}
|
||||
>
|
||||
<SettingsIcon className="w-4 h-4 inline mr-2" />
|
||||
General
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab('seo')}
|
||||
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'seo'
|
||||
? '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'
|
||||
}`}
|
||||
>
|
||||
<SearchIcon className="w-4 h-4 inline mr-2" />
|
||||
SEO Meta Tags
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab('og')}
|
||||
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'og'
|
||||
? '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'
|
||||
}`}
|
||||
>
|
||||
<Share2Icon className="w-4 h-4 inline mr-2" />
|
||||
Open Graph
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab('schema')}
|
||||
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'schema'
|
||||
? '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'
|
||||
}`}
|
||||
>
|
||||
<CodeIcon className="w-4 h-4 inline mr-2" />
|
||||
Schema.org
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<Card className="p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>Site Name</Label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
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>
|
||||
{/* General Tab */}
|
||||
{activeTab === 'general' && (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>Site Name</Label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
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>
|
||||
<Label>Slug</Label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.slug}
|
||||
onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
|
||||
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>
|
||||
<Label>Slug</Label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.slug}
|
||||
onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
|
||||
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>
|
||||
<Label>Site Type</Label>
|
||||
<SelectDropdown
|
||||
options={SITE_TYPES}
|
||||
value={formData.site_type}
|
||||
onChange={(e) => setFormData({ ...formData, site_type: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>Site Type</Label>
|
||||
<SelectDropdown
|
||||
options={SITE_TYPES}
|
||||
value={formData.site_type}
|
||||
onChange={(e) => setFormData({ ...formData, site_type: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Hosting Type</Label>
|
||||
<SelectDropdown
|
||||
options={HOSTING_TYPES}
|
||||
value={formData.hosting_type}
|
||||
onChange={(e) => setFormData({ ...formData, hosting_type: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>Hosting Type</Label>
|
||||
<SelectDropdown
|
||||
options={HOSTING_TYPES}
|
||||
value={formData.hosting_type}
|
||||
onChange={(e) => setFormData({ ...formData, hosting_type: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Checkbox
|
||||
checked={formData.is_active}
|
||||
onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
|
||||
label="Active"
|
||||
/>
|
||||
<div>
|
||||
<Checkbox
|
||||
checked={formData.is_active}
|
||||
onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
|
||||
label="Active"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* SEO Meta Tags Tab */}
|
||||
{activeTab === 'seo' && (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>Meta Title</Label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.meta_title}
|
||||
onChange={(e) => setFormData({ ...formData, meta_title: e.target.value })}
|
||||
placeholder="SEO title (recommended: 50-60 characters)"
|
||||
maxLength={60}
|
||||
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"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{formData.meta_title.length}/60 characters
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Meta Description</Label>
|
||||
<TextArea
|
||||
value={formData.meta_description}
|
||||
onChange={(value) => setFormData({ ...formData, meta_description: value })}
|
||||
rows={4}
|
||||
placeholder="SEO description (recommended: 150-160 characters)"
|
||||
maxLength={160}
|
||||
className="mt-1"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{formData.meta_description.length}/160 characters
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Meta Keywords (comma-separated)</Label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.meta_keywords}
|
||||
onChange={(e) => setFormData({ ...formData, meta_keywords: e.target.value })}
|
||||
placeholder="keyword1, keyword2, keyword3"
|
||||
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"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
Separate keywords with commas
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Open Graph Tab */}
|
||||
{activeTab === 'og' && (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>OG Title</Label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.og_title}
|
||||
onChange={(e) => setFormData({ ...formData, og_title: e.target.value })}
|
||||
placeholder="Open Graph 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>
|
||||
<Label>OG Description</Label>
|
||||
<TextArea
|
||||
value={formData.og_description}
|
||||
onChange={(value) => setFormData({ ...formData, og_description: value })}
|
||||
rows={4}
|
||||
placeholder="Open Graph description"
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>OG Image URL</Label>
|
||||
<input
|
||||
type="url"
|
||||
value={formData.og_image}
|
||||
onChange={(e) => setFormData({ ...formData, og_image: e.target.value })}
|
||||
placeholder="https://example.com/image.jpg"
|
||||
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"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
Recommended: 1200x630px image
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>OG Type</Label>
|
||||
<SelectDropdown
|
||||
options={[
|
||||
{ value: 'website', label: 'Website' },
|
||||
{ value: 'article', label: 'Article' },
|
||||
{ value: 'business.business', label: 'Business' },
|
||||
{ value: 'product', label: 'Product' },
|
||||
]}
|
||||
value={formData.og_type}
|
||||
onChange={(e) => setFormData({ ...formData, og_type: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>OG Site Name</Label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.og_site_name}
|
||||
onChange={(e) => setFormData({ ...formData, og_site_name: e.target.value })}
|
||||
placeholder="Site name for social sharing"
|
||||
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>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Schema.org Tab */}
|
||||
{activeTab === 'schema' && (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>Schema Type</Label>
|
||||
<SelectDropdown
|
||||
options={[
|
||||
{ value: 'Organization', label: 'Organization' },
|
||||
{ value: 'LocalBusiness', label: 'Local Business' },
|
||||
{ value: 'WebSite', label: 'Website' },
|
||||
{ value: 'Corporation', label: 'Corporation' },
|
||||
{ value: 'NGO', label: 'NGO' },
|
||||
]}
|
||||
value={formData.schema_type}
|
||||
onChange={(e) => setFormData({ ...formData, schema_type: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Schema Name</Label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.schema_name}
|
||||
onChange={(e) => setFormData({ ...formData, schema_name: e.target.value })}
|
||||
placeholder="Organization name"
|
||||
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>
|
||||
<Label>Schema Description</Label>
|
||||
<TextArea
|
||||
value={formData.schema_description}
|
||||
onChange={(value) => setFormData({ ...formData, schema_description: value })}
|
||||
rows={3}
|
||||
placeholder="Organization description"
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Schema URL</Label>
|
||||
<input
|
||||
type="url"
|
||||
value={formData.schema_url}
|
||||
onChange={(e) => setFormData({ ...formData, schema_url: e.target.value })}
|
||||
placeholder="https://example.com"
|
||||
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>
|
||||
<Label>Schema Logo URL</Label>
|
||||
<input
|
||||
type="url"
|
||||
value={formData.schema_logo}
|
||||
onChange={(e) => setFormData({ ...formData, schema_logo: e.target.value })}
|
||||
placeholder="https://example.com/logo.png"
|
||||
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>
|
||||
<Label>Same As URLs (comma-separated)</Label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.schema_same_as}
|
||||
onChange={(e) => setFormData({ ...formData, schema_same_as: e.target.value })}
|
||||
placeholder="https://facebook.com/page, https://twitter.com/page"
|
||||
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"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
Social media profiles and other related URLs
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button onClick={handleSave} variant="primary" disabled={saving}>
|
||||
|
||||
Reference in New Issue
Block a user