Section 1
, Section 2
];
+ render(Hero Content
;
+ render(Sidebar Content
;
+ render(Hero
;
+ const sections = [Section
];
+ const sidebar = Sidebar
;
+
+ render(
+ Section 1
,
+ Section 2
,
+ ];
+ render(Sidebar Content
;
+ render(Content
];
+ const sidebar = Sidebar
;
+
+ render(
+
+
+ ),
+ minimal: (
+
+ Header
+
+
+ Main Content Area
+
+
+ Footer
+
+
+
+ ),
+ magazine: (
+
+ Focused Content Area
+
+
+
+ ),
+ blog: (
+
+ Header
+
+
+
+
+ Featured Content
+
+
+ Sidebar
+
+
+
+ ),
+ ecommerce: (
+
+ Header
+
+
+
+
+
+
+ Blog Post 1
+
+
+ Blog Post 2
+
+
+ Sidebar
+
+
+
+ ),
+ portfolio: (
+
+ Navigation
+
+
+
+
+ Filters
+
+
+ {[1, 2, 3, 4, 5, 6].map((i) => (
+
+
+ Product {i}
+
+ ))}
+
+
+ ),
+ corporate: (
+
+ Header
+
+
+ {[1, 2, 3, 4, 5, 6].map((i) => (
+
+
+ Project {i}
+
+ ))}
+
+
+ ),
+};
+
+export default function LayoutPreview({ layoutId, layoutName, onClose, onSelect }: LayoutPreviewProps) {
+ const [isFullscreen, setIsFullscreen] = useState(false);
+
+ const previewContent = LAYOUT_PREVIEWS[layoutId] || LAYOUT_PREVIEWS.default;
+
+ return (
+
+ Header
+
+
+ Hero Section
+
+
+ {[1, 2, 3].map((i) => (
+
+
+ Section {i}
+
+ ))}
+
+ Footer
+
+
+
+
+
+ );
+}
+
diff --git a/frontend/src/components/sites/LayoutSelector.tsx b/frontend/src/components/sites/LayoutSelector.tsx
new file mode 100644
index 00000000..38a8c008
--- /dev/null
+++ b/frontend/src/components/sites/LayoutSelector.tsx
@@ -0,0 +1,143 @@
+/**
+ * Layout Selector
+ * Phase 7: Layout & Template System
+ * Component for selecting page layouts
+ */
+import React, { useState } from 'react';
+import { CheckIcon } from 'lucide-react';
+import { Card } from '../../ui/card';
+
+export interface LayoutOption {
+ id: string;
+ name: string;
+ description: string;
+ preview: string; // Preview image URL or component
+ category: 'marketing' | 'blog' | 'ecommerce' | 'portfolio' | 'corporate';
+}
+
+interface LayoutSelectorProps {
+ selectedLayout?: string;
+ onSelect: (layoutId: string) => void;
+ layouts?: LayoutOption[];
+}
+
+const DEFAULT_LAYOUTS: LayoutOption[] = [
+ {
+ id: 'default',
+ name: 'Default Layout',
+ description: 'Standard layout with header, content, and footer',
+ preview: '',
+ category: 'marketing',
+ },
+ {
+ id: 'minimal',
+ name: 'Minimal Layout',
+ description: 'Clean, focused layout for content pages',
+ preview: '',
+ category: 'marketing',
+ },
+ {
+ id: 'magazine',
+ name: 'Magazine Layout',
+ description: 'Magazine-style layout with featured sections',
+ preview: '',
+ category: 'blog',
+ },
+ {
+ id: 'blog',
+ name: 'Blog Layout',
+ description: 'Blog layout with sidebar support',
+ preview: '',
+ category: 'blog',
+ },
+ {
+ id: 'ecommerce',
+ name: 'Ecommerce Layout',
+ description: 'E-commerce layout with product focus',
+ preview: '',
+ category: 'ecommerce',
+ },
+ {
+ id: 'portfolio',
+ name: 'Portfolio Layout',
+ description: 'Portfolio layout for showcasing work',
+ preview: '',
+ category: 'portfolio',
+ },
+ {
+ id: 'corporate',
+ name: 'Corporate Layout',
+ description: 'Professional corporate layout',
+ preview: '',
+ category: 'corporate',
+ },
+];
+
+export default function LayoutSelector({ selectedLayout, onSelect, layouts = DEFAULT_LAYOUTS }: LayoutSelectorProps) {
+ const [selectedCategory, setSelectedCategory] = useState
+
+
+
+ {layoutName}
+Layout Preview
+
+
+ {onSelect && (
+
+ )}
+ {onClose && (
+
+ )}
+
+
+ {previewContent}
+
+
+ {/* Category Filter */}
+
+ );
+}
+
diff --git a/frontend/src/components/sites/StyleEditor.tsx b/frontend/src/components/sites/StyleEditor.tsx
new file mode 100644
index 00000000..17774cb2
--- /dev/null
+++ b/frontend/src/components/sites/StyleEditor.tsx
@@ -0,0 +1,296 @@
+/**
+ * Style Editor
+ * Phase 7: Layout & Template System
+ * Component for editing CSS styles and theme customization
+ */
+import React, { useState } from 'react';
+import { CodeIcon, PaletteIcon, TypeIcon, SaveIcon, RefreshCwIcon } from 'lucide-react';
+import { Card } from '../../ui/card';
+import Button from '../../ui/button/Button';
+import Label from '../../form/Label';
+import TextArea from '../../form/input/TextArea';
+import { useToast } from '../../ui/toast/ToastContainer';
+
+export interface StyleSettings {
+ customCSS?: string;
+ colorPalette?: {
+ primary: string;
+ secondary: string;
+ accent: string;
+ background: string;
+ text: string;
+ };
+ typography?: {
+ fontFamily: string;
+ headingFont: string;
+ fontSize: string;
+ lineHeight: string;
+ };
+ spacing?: {
+ base: string;
+ scale: string;
+ };
+}
+
+interface StyleEditorProps {
+ styleSettings: StyleSettings;
+ onChange: (settings: StyleSettings) => void;
+ onSave?: () => void;
+ onReset?: () => void;
+}
+
+export default function StyleEditor({ styleSettings, onChange, onSave, onReset }: StyleEditorProps) {
+ const toast = useToast();
+ const [activeTab, setActiveTab] = useState<'css' | 'colors' | 'typography' | 'spacing'>('css');
+ const [customCSS, setCustomCSS] = useState(styleSettings.customCSS || '');
+
+ const updateSettings = (updates: Partial
+ {categories.map((category) => (
+
+ ))}
+
+
+ {/* Layout Grid */}
+
+ {filteredLayouts.map((layout) => (
+ onSelect(layout.id)}
+ >
+
+ ))}
+
+
+ {layout.preview ? (
+ 
+ ) : (
+
+
+ {layout.name}
+
+ )}
+ {selectedLayout === layout.id && (
+
+
+ )}
+ {layout.name}
+{layout.description}
+
+
+
+ )}
+
+ {/* Colors Tab */}
+ {activeTab === 'colors' && (
+
+
+ )}
+
+ {/* Typography Tab */}
+ {activeTab === 'typography' && (
+
+
+ )}
+
+ {/* Spacing Tab */}
+ {activeTab === 'spacing' && (
+
+
+ )}
+
+ );
+}
+
diff --git a/frontend/src/components/sites/TemplateCustomizer.tsx b/frontend/src/components/sites/TemplateCustomizer.tsx
new file mode 100644
index 00000000..0d855a5e
--- /dev/null
+++ b/frontend/src/components/sites/TemplateCustomizer.tsx
@@ -0,0 +1,376 @@
+/**
+ * Template Customizer
+ * Phase 7: Layout & Template System
+ * Component for customizing template settings and styles
+ */
+import React, { useState } from 'react';
+import { SettingsIcon, PaletteIcon, TypeIcon, LayoutIcon } from 'lucide-react';
+import { Card } from '../../ui/card';
+import Label from '../../form/Label';
+import SelectDropdown from '../../form/SelectDropdown';
+import Button from '../../ui/button/Button';
+
+export interface TemplateCustomization {
+ layout: string;
+ colorScheme: string;
+ typography: string;
+ spacing: string;
+ headerStyle: string;
+ footerStyle: string;
+ sidebarPosition?: 'left' | 'right' | 'none';
+ customStyles?: Record
+
+
+ {/* Tabs */}
+
+
+ Style Editor
+Customize CSS, colors, typography, and spacing
+
+ {onReset && (
+
+ )}
+ {onSave && (
+
+ )}
+
+
+
+
+ {/* Custom CSS Tab */}
+ {activeTab === 'css' && (
+
+
+
+
+
+
+
+
+
+
+
+
+ + Add custom CSS rules. These will be applied to your site. +
+
+ {['primary', 'secondary', 'accent', 'background', 'text'].map((colorKey) => (
+
+
+
+
+ ))}
+
+ handleColorChange(colorKey, e.target.value)}
+ className="w-16 h-10 rounded border border-gray-300 dark:border-gray-700 cursor-pointer"
+ />
+ handleColorChange(colorKey, e.target.value)}
+ placeholder="#000000"
+ className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
+ />
+
+
+
+
+
+ handleTypographyChange('fontFamily', e.target.value)}
+ placeholder="Arial, sans-serif"
+ 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"
+ />
+
+
+
+
+ handleTypographyChange('headingFont', e.target.value)}
+ placeholder="Georgia, serif"
+ 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"
+ />
+
+
+
+
+ handleTypographyChange('fontSize', e.target.value)}
+ placeholder="16px"
+ 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"
+ />
+
+
+
+
+ handleTypographyChange('lineHeight', e.target.value)}
+ placeholder="1.5"
+ 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"
+ />
+
+
+
+
+
+ handleSpacingChange('base', e.target.value)}
+ placeholder="8px"
+ 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"
+ />
+
+
+ + Base unit for spacing calculations (e.g., 8px, 1rem) +
+
+
+ handleSpacingChange('scale', e.target.value)}
+ placeholder="1.5"
+ 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"
+ />
+
+ + Multiplier for spacing scale (e.g., 1.5 for 1.5x spacing) +
+
+
+
+ )}
+
+ {/* Colors Tab */}
+ {activeTab === 'colors' && (
+
+
+ )}
+
+ {/* Typography Tab */}
+ {activeTab === 'typography' && (
+
+
+ )}
+
+ {/* Spacing Tab */}
+ {activeTab === 'spacing' && (
+
+
+ )}
+
+ );
+}
+
diff --git a/frontend/src/components/sites/TemplateLibrary.tsx b/frontend/src/components/sites/TemplateLibrary.tsx
new file mode 100644
index 00000000..f0e6109e
--- /dev/null
+++ b/frontend/src/components/sites/TemplateLibrary.tsx
@@ -0,0 +1,226 @@
+/**
+ * Template Library
+ * Phase 7: Layout & Template System
+ * Component for browsing and selecting page templates
+ */
+import React, { useState } from 'react';
+import { SearchIcon, FilterIcon, CheckIcon } from 'lucide-react';
+import { Card } from '../../ui/card';
+import Button from '../../ui/button/Button';
+
+export interface TemplateOption {
+ id: string;
+ name: string;
+ description: string;
+ preview: string; // Preview image URL
+ category: 'landing' | 'marketing' | 'blog' | 'business' | 'portfolio' | 'ecommerce';
+ tags: string[];
+ featured?: boolean;
+}
+
+interface TemplateLibraryProps {
+ selectedTemplate?: string;
+ onSelect: (templateId: string) => void;
+ templates?: TemplateOption[];
+ onPreview?: (templateId: string) => void;
+}
+
+const DEFAULT_TEMPLATES: TemplateOption[] = [
+ {
+ id: 'marketing-1',
+ name: 'Modern Marketing',
+ description: 'Clean, conversion-focused marketing template',
+ preview: '',
+ category: 'marketing',
+ tags: ['modern', 'conversion', 'marketing'],
+ featured: true,
+ },
+ {
+ id: 'landing-1',
+ name: 'Landing Page Pro',
+ description: 'High-converting landing page template',
+ preview: '',
+ category: 'landing',
+ tags: ['landing', 'conversion', 'hero'],
+ featured: true,
+ },
+ {
+ id: 'blog-1',
+ name: 'Blog Classic',
+ description: 'Traditional blog layout with sidebar',
+ preview: '',
+ category: 'blog',
+ tags: ['blog', 'sidebar', 'content'],
+ },
+ {
+ id: 'business-1',
+ name: 'Business Professional',
+ description: 'Corporate business template',
+ preview: '',
+ category: 'business',
+ tags: ['corporate', 'professional', 'business'],
+ },
+ {
+ id: 'portfolio-1',
+ name: 'Portfolio Showcase',
+ description: 'Portfolio template for creative work',
+ preview: '',
+ category: 'portfolio',
+ tags: ['portfolio', 'showcase', 'creative'],
+ },
+ {
+ id: 'ecommerce-1',
+ name: 'Ecommerce Store',
+ description: 'Full-featured e-commerce template',
+ preview: '',
+ category: 'ecommerce',
+ tags: ['ecommerce', 'store', 'products'],
+ },
+];
+
+export default function TemplateLibrary({
+ selectedTemplate,
+ onSelect,
+ templates = DEFAULT_TEMPLATES,
+ onPreview,
+}: TemplateLibraryProps) {
+ const [searchTerm, setSearchTerm] = useState('');
+ const [selectedCategory, setSelectedCategory] = useState
+
+
+ {/* Tabs */}
+
+
+ Customize: {templateName}
+Adjust template settings and styles
+
+ {onReset && (
+
+ )}
+ {onSave && (
+
+ )}
+
+
+
+
+ {/* Layout Tab */}
+ {activeTab === 'layout' && (
+
+
+
+
+
+
+
+
+
+
+ updateCustomization({ layout: e.target.value })}
+ />
+
+
+
+
+ updateCustomization({ headerStyle: e.target.value })}
+ />
+
+
+
+
+ updateCustomization({ footerStyle: e.target.value })}
+ />
+
+
+ {customization.sidebarPosition !== undefined && (
+
+
+ updateCustomization({ sidebarPosition: e.target.value as 'left' | 'right' | 'none' })}
+ />
+
+ )}
+
+
+
+
+ updateCustomization({ colorScheme: e.target.value })}
+ />
+
+
+
+
+
+
+
+
+ updateCustomization({
+ customStyles: { ...customization.customStyles, primaryColor: e.target.value },
+ })
+ }
+ className="w-16 h-10 rounded border border-gray-300 dark:border-gray-700 cursor-pointer"
+ />
+
+ updateCustomization({
+ customStyles: { ...customization.customStyles, primaryColor: e.target.value },
+ })
+ }
+ placeholder="#3b82f6"
+ className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
+ />
+
+
+
+
+
+
+ updateCustomization({
+ customStyles: { ...customization.customStyles, backgroundColor: e.target.value },
+ })
+ }
+ className="w-16 h-10 rounded border border-gray-300 dark:border-gray-700 cursor-pointer"
+ />
+
+ updateCustomization({
+ customStyles: { ...customization.customStyles, backgroundColor: e.target.value },
+ })
+ }
+ placeholder="#ffffff"
+ className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
+ />
+
+
+
+
+
+ updateCustomization({ typography: e.target.value })}
+ />
+
+
+
+
+
+ updateCustomization({
+ customStyles: { ...customization.customStyles, headingSize: e.target.value },
+ })
+ }
+ />
+
+
+
+
+
+ updateCustomization({
+ customStyles: { ...customization.customStyles, bodySize: e.target.value },
+ })
+ }
+ />
+
+
+
+
+
+ updateCustomization({ spacing: e.target.value })}
+ />
+
+
+
+
+
+ updateCustomization({
+ customStyles: { ...customization.customStyles, sectionPadding: e.target.value },
+ })
+ }
+ />
+
+
+
+
+
+ updateCustomization({
+ customStyles: { ...customization.customStyles, containerWidth: e.target.value },
+ })
+ }
+ />
+
+
+ {/* Search and Filters */}
+
+
+ ) : (
+
+ );
+}
+
diff --git a/frontend/src/pages/Sites/Content.tsx b/frontend/src/pages/Sites/Content.tsx
new file mode 100644
index 00000000..d1f13a58
--- /dev/null
+++ b/frontend/src/pages/Sites/Content.tsx
@@ -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
+
+
+ {/* Category Filter */}
+
+
+
+
+
+
+ {categories.map((category) => (
+
+ ))}
+
+
+ {/* Template Grid */}
+ {filteredTemplates.length === 0 ? (
+ No templates found matching your criteria.
+
+ {filteredTemplates.map((template) => (
+
+
+ ))}
+
+ )}
+
+ {template.preview ? (
+ 
+ ) : (
+
+
+ {template.name}
+
+ )}
+ {template.featured && (
+
+ Featured
+
+ )}
+ {selectedTemplate === template.id && (
+
+
+ )}
+ {template.name}
+{template.description}
+
+ {template.tags.slice(0, 3).map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+
+ {onPreview && (
+
+ )}
+
+
+
+
+
+ {/* Content List */}
+ {loading ? (
+
+
+ ) : filteredContent.length === 0 ? (
+
+
+ ) : (
+ <>
+
+
+
+ {/* Pagination */}
+ {totalPages > 1 && (
+
+ );
+}
+
diff --git a/frontend/src/pages/Sites/Editor.tsx b/frontend/src/pages/Sites/Editor.tsx
index 927341f8..a725f587 100644
--- a/frontend/src/pages/Sites/Editor.tsx
+++ b/frontend/src/pages/Sites/Editor.tsx
@@ -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
+
+
+ {/* Filters */}
+
+
+
+ + Content Manager +
++ Manage and organize your site content ({totalCount} items) +
+
+
+
+
+
+
+
+
+
+
+ Loading content...
+ + No content found +
+ +
+ {filteredContent.map((item) => (
+
+
+
+ ))}
+
+
+ + {item.title || item.meta_title || `Content #${item.id}`} +
+ {item.meta_description && ( ++ {item.meta_description} +
+ )} +
+
+ {item.status}
+
+ {item.word_count.toLocaleString()} words
+ {item.source}
+ {item.primary_keyword && (
+ Keyword: {item.primary_keyword}
+ )}
+
+ {new Date(item.updated_at).toLocaleDateString()}
+
+
+
+
+
+
+
+
+
+
+ Page {currentPage} of {totalPages}
+
+
+
+ )}
+
+ )}
+
@@ -66,17 +105,105 @@ export default function SiteContentEditor() {
Site Content Editor
- - Edit content for site pages + View and edit content for site pages
-
);
}
diff --git a/frontend/src/pages/Sites/PageManager.tsx b/frontend/src/pages/Sites/PageManager.tsx
index 75caba38..14df37c7 100644
--- a/frontend/src/pages/Sites/PageManager.tsx
+++ b/frontend/src/pages/Sites/PageManager.tsx
@@ -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 (
+
- Content editor will be implemented in Phase 7
+ {blueprints.length === 0 ? (
+
+ No site blueprints found for this site
+ {blueprints.length > 1 && (
+
+
+
+
+ )}
+
+ {pages.length === 0 ? (
+
+
+ ) : (
+
+
+ )}
-
+ )}
+ No pages found in this blueprint +
+ +
+
+ + Pages ({pages.length}) +
+
+ {pages.map((page) => (
+
+
+
+ ))}
+
+
+
+
+ + {page.title} +
++ /{page.slug} • {page.type} • {page.status} +
+ {page.blocks_json && page.blocks_json.length > 0 && ( ++ {page.blocks_json.length} block{page.blocks_json.length !== 1 ? 's' : ''} +
+ )} +
+
+
+
+ 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' : ''}`}
+ >
+
+ );
+};
+
export default function PageManager() {
const { siteId } = useParams<{ siteId: string }>();
+ const navigate = useNavigate();
const toast = useToast();
const [pages, setPages] = useState
+
+
+
+
+ {page.title}
++ /{page.slug} • {page.type} • {page.status} • Order: {page.order} +
+
+
+
+
+
- {pages.map((page, index) => (
-
+
+ )}
+
+
+
+
+
+
)}
);
diff --git a/frontend/src/pages/Sites/PostEditor.tsx b/frontend/src/pages/Sites/PostEditor.tsx
new file mode 100644
index 00000000..6a53f49d
--- /dev/null
+++ b/frontend/src/pages/Sites/PostEditor.tsx
@@ -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
-
+
-
+
+ )}
+
+ {/* Reorder Save Button */}
+ {isReordering && (
+
-
+ <>
+ {/* Bulk Actions Bar */}
+ {selectedPages.size > 0 && (
+
-
-
-
-
-
- - {page.title} -
-- /{page.slug} • {page.type} • {page.status} -
-
+
+ {selectedPages.size} page(s) selected
+
- ))}
-
+
+
+
+ Page order changed. Save to apply changes.
+
+
+
+
+
+
+
+
+
+ + Drag and drop to reorder pages +
+
+ {pages.map((page, index) => (
+
+
+
+ );
+ }
+
+ return (
+
+
+ Loading post...
+
+
+
+
+ {/* Tabs */}
+
+
+ + {content.id ? 'Edit Post' : 'New Post'} +
++ {content.id ? 'Edit your post content' : 'Create a new post'} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Content Tab */}
+ {activeTab === 'content' && (
+
+
+
+
+ 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"
+ />
+
+
+
+
+
+
+
+ setContent({ ...content, content_type: e.target.value })}
+ />
+
+
+
+
+ setContent({ ...content, status: e.target.value })}
+ />
+
+
+
+