123
This commit is contained in:
IGNY8 VPS (Salman)
@@ -1,474 +0,0 @@
|
||||
/**
|
||||
* Content Manager Module - Main Dashboard
|
||||
* Full-featured CMS with site selector, standard filtering, and WYSIWYG editing
|
||||
*/
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import PageMeta from '../../components/common/PageMeta';
|
||||
import PageHeader from '../../components/common/PageHeader';
|
||||
import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';
|
||||
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';
|
||||
import { useSiteStore } from '../../store/siteStore';
|
||||
import { useSectorStore } from '../../store/sectorStore';
|
||||
import {
|
||||
PencilIcon,
|
||||
EyeIcon,
|
||||
TrashBinIcon,
|
||||
PlusIcon,
|
||||
FileIcon
|
||||
} from '../../icons';
|
||||
import { Search, Filter } from 'lucide-react';
|
||||
|
||||
interface ContentItem {
|
||||
id: number;
|
||||
title: string;
|
||||
status: string;
|
||||
updated_at: string;
|
||||
source: string;
|
||||
content_type?: string;
|
||||
content_structure?: string;
|
||||
cluster_name?: string;
|
||||
external_url?: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
const STATUS_OPTIONS = [
|
||||
{ value: '', label: 'All Statuses' },
|
||||
{ value: 'draft', label: 'Draft' },
|
||||
{ value: 'published', label: 'Published' },
|
||||
{ value: 'scheduled', label: 'Scheduled' },
|
||||
];
|
||||
|
||||
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' },
|
||||
];
|
||||
|
||||
const CONTENT_TYPE_OPTIONS = [
|
||||
{ value: '', label: 'All Types' },
|
||||
{ value: 'post', label: 'Blog Post' },
|
||||
{ value: 'page', label: 'Page' },
|
||||
{ value: 'product', label: 'Product' },
|
||||
];
|
||||
|
||||
// Content type icon and color mapping
|
||||
const getContentTypeStyle = (contentType?: string) => {
|
||||
switch (contentType?.toLowerCase()) {
|
||||
case 'post':
|
||||
return {
|
||||
icon: '📝',
|
||||
color: 'text-blue-600 dark:text-blue-400',
|
||||
bgColor: 'bg-blue-100 dark:bg-blue-900/30',
|
||||
};
|
||||
case 'page':
|
||||
return {
|
||||
icon: '📄',
|
||||
color: 'text-green-600 dark:text-green-400',
|
||||
bgColor: 'bg-green-100 dark:bg-green-900/30',
|
||||
};
|
||||
case 'product':
|
||||
return {
|
||||
icon: '🛍️',
|
||||
color: 'text-purple-600 dark:text-purple-400',
|
||||
bgColor: 'bg-purple-100 dark:bg-purple-900/30',
|
||||
};
|
||||
default:
|
||||
return {
|
||||
icon: '📋',
|
||||
color: 'text-gray-600 dark:text-gray-400',
|
||||
bgColor: 'bg-gray-100 dark:bg-gray-900/30',
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// Status badge styling
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status?.toLowerCase()) {
|
||||
case 'published':
|
||||
return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400';
|
||||
case 'draft':
|
||||
return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400';
|
||||
case 'scheduled':
|
||||
return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400';
|
||||
}
|
||||
};
|
||||
|
||||
export default function ContentManagerDashboard() {
|
||||
const navigate = useNavigate();
|
||||
const toast = useToast();
|
||||
const { activeSite } = useSiteStore();
|
||||
const { activeSector } = useSectorStore();
|
||||
|
||||
const [content, setContent] = useState<ContentItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState('');
|
||||
const [sourceFilter, setSourceFilter] = useState('');
|
||||
const [contentTypeFilter, setContentTypeFilter] = useState('');
|
||||
const [sortBy, setSortBy] = useState<'created_at' | 'updated_at' | 'title'>('created_at');
|
||||
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
const pageSize = 20;
|
||||
|
||||
// Navigation tabs for Content Manager module
|
||||
const navigationTabs = [
|
||||
{ id: 'content', label: 'All Content', path: '/content-manager' },
|
||||
{ id: 'posts', label: 'Posts', path: '/content-manager/posts' },
|
||||
{ id: 'pages', label: 'Pages', path: '/content-manager/pages' },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
if (activeSite?.id) {
|
||||
loadContent();
|
||||
}
|
||||
}, [activeSite, currentPage, statusFilter, sourceFilter, contentTypeFilter, searchTerm, sortBy, sortDirection]);
|
||||
|
||||
const loadContent = async () => {
|
||||
if (!activeSite?.id) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const params = new URLSearchParams({
|
||||
site_id: activeSite.id.toString(),
|
||||
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);
|
||||
}
|
||||
if (contentTypeFilter) {
|
||||
params.append('content_type', contentTypeFilter);
|
||||
}
|
||||
|
||||
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}`);
|
||||
setContent([]);
|
||||
} 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 handleClearFilters = () => {
|
||||
setSearchTerm('');
|
||||
setStatusFilter('');
|
||||
setSourceFilter('');
|
||||
setContentTypeFilter('');
|
||||
setSortBy('created_at');
|
||||
setSortDirection('desc');
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
const hasActiveFilters = searchTerm || statusFilter || sourceFilter || contentTypeFilter;
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<PageMeta title="Content Manager - IGNY8" description="Manage all your content in one place" />
|
||||
|
||||
<PageHeader
|
||||
title="Content Manager"
|
||||
badge={{ icon: <FileIcon />, color: 'purple' }}
|
||||
/>
|
||||
|
||||
<ModuleNavigationTabs tabs={navigationTabs} />
|
||||
|
||||
{/* Action Bar */}
|
||||
<div className="mb-6 flex justify-between items-center">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{totalCount} total items
|
||||
{activeSite && <span className="ml-2">• {activeSite.name}</span>}
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => activeSite ? navigate(`/sites/${activeSite.id}/posts/new`) : toast.error('Please select a site first')}
|
||||
variant="primary"
|
||||
startIcon={<PlusIcon className="w-4 h-4" />}
|
||||
disabled={!activeSite}
|
||||
>
|
||||
New Content
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Standard Filter Bar */}
|
||||
<Card className="p-4 mb-6">
|
||||
<div className="space-y-4">
|
||||
{/* Search and Primary Filters */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
|
||||
{/* Search */}
|
||||
<div className="relative">
|
||||
<Search 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-lg dark:bg-gray-800 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Status Filter */}
|
||||
<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-lg dark:bg-gray-800 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
{STATUS_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* Content Type Filter */}
|
||||
<select
|
||||
value={contentTypeFilter}
|
||||
onChange={(e) => {
|
||||
setContentTypeFilter(e.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg dark:bg-gray-800 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
{CONTENT_TYPE_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* Source Filter */}
|
||||
<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-lg dark:bg-gray-800 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
{SOURCE_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* Sort */}
|
||||
<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-lg dark:bg-gray-800 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
<option value="created_at-desc">Newest First</option>
|
||||
<option value="created_at-asc">Oldest First</option>
|
||||
<option value="updated_at-desc">Recently Updated</option>
|
||||
<option value="title-asc">Title A-Z</option>
|
||||
<option value="title-desc">Title Z-A</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Clear Filters */}
|
||||
{hasActiveFilters && (
|
||||
<div className="flex justify-end">
|
||||
<Button variant="ghost" size="sm" onClick={handleClearFilters}>
|
||||
<Filter className="w-4 h-4 mr-2" />
|
||||
Clear Filters
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* No Site Selected Warning */}
|
||||
{!activeSite && (
|
||||
<Card className="p-12 text-center">
|
||||
<div className="text-gray-500 dark:text-gray-400">
|
||||
<FileIcon className="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600" />
|
||||
<p className="text-lg font-medium mb-2">No Site Selected</p>
|
||||
<p className="text-sm">Please select a site from the dropdown above to manage content.</p>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Content List */}
|
||||
{activeSite && (
|
||||
<>
|
||||
{loading ? (
|
||||
<Card className="p-12 text-center">
|
||||
<div className="text-gray-500">Loading content...</div>
|
||||
</Card>
|
||||
) : content.length === 0 ? (
|
||||
<Card className="p-12 text-center">
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-4">
|
||||
{hasActiveFilters ? 'No content matches your filters' : 'No content found'}
|
||||
</p>
|
||||
{!hasActiveFilters && (
|
||||
<Button onClick={() => activeSite ? navigate(`/sites/${activeSite.id}/posts/new`) : toast.error('Please select a site first')} variant="primary" disabled={!activeSite}>
|
||||
Create Your First Content
|
||||
</Button>
|
||||
)}
|
||||
</Card>
|
||||
) : (
|
||||
<>
|
||||
<Card className="overflow-hidden">
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{content.map((item) => {
|
||||
const typeStyle = getContentTypeStyle(item.content_type);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
className="p-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
{/* Content Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
{/* Content Type Icon */}
|
||||
<span className={`text-2xl ${typeStyle.bgColor} px-2 py-1 rounded`}>
|
||||
{typeStyle.icon}
|
||||
</span>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white truncate">
|
||||
{item.title || `Content #${item.id}`}
|
||||
</h3>
|
||||
|
||||
{/* Status Badge */}
|
||||
<span className={`px-2 py-1 text-xs font-medium rounded ${getStatusBadge(item.status)}`}>
|
||||
{item.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Meta Information */}
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
{item.content_type && (
|
||||
<span className={`${typeStyle.color} font-medium`}>
|
||||
{item.content_type}
|
||||
</span>
|
||||
)}
|
||||
{item.content_structure && (
|
||||
<span>{item.content_structure}</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="w-2 h-2 rounded-full bg-gray-400"></span>
|
||||
{item.source}
|
||||
</span>
|
||||
{item.cluster_name && (
|
||||
<span>Cluster: {item.cluster_name}</span>
|
||||
)}
|
||||
<span>
|
||||
Updated {new Date(item.updated_at).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-2 flex-shrink-0">
|
||||
{/* View - Opens content detail view in Writer */}
|
||||
<button
|
||||
onClick={() => navigate(`/writer/content/${item.id}`)}
|
||||
className="p-2 rounded-lg text-blue-600 hover:text-blue-700 hover:bg-blue-50 dark:text-blue-400 dark:hover:text-blue-300 dark:hover:bg-blue-900/20 transition-colors"
|
||||
aria-label="View content"
|
||||
>
|
||||
<EyeIcon className="w-4 h-4" />
|
||||
</button>
|
||||
{/* Edit - Opens post editor */}
|
||||
<button
|
||||
onClick={() => navigate(`/sites/${activeSite?.id}/posts/${item.id}/edit`)}
|
||||
className="p-2 rounded-lg text-green-600 hover:text-green-700 hover:bg-green-50 dark:text-green-400 dark:hover:text-green-300 dark:hover:bg-green-900/20 transition-colors"
|
||||
aria-label="Edit content"
|
||||
>
|
||||
<PencilIcon className="w-4 h-4" />
|
||||
</button>
|
||||
{/* Delete */}
|
||||
<button
|
||||
onClick={() => handleDelete(item.id)}
|
||||
className="p-2 rounded-lg text-red-600 hover:text-red-700 hover:bg-red-50 dark:text-red-400 dark:hover:text-red-300 dark:hover:bg-red-900/20 transition-colors"
|
||||
aria-label="Delete content"
|
||||
>
|
||||
<TrashBinIcon className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
@@ -458,45 +458,6 @@ export default function DebugStatus() {
|
||||
return checks;
|
||||
}, []);
|
||||
|
||||
// Check Content Manager module health (taxonomy relations)
|
||||
const checkContentManagerModule = useCallback(async (): Promise<HealthCheck[]> => {
|
||||
const checks: HealthCheck[] = [];
|
||||
|
||||
// Check Taxonomy endpoint
|
||||
try {
|
||||
const { response: taxonomyResp, data: taxonomyData } = await apiCall('/v1/writer/taxonomy/');
|
||||
|
||||
if (taxonomyResp.ok && taxonomyData?.success !== false) {
|
||||
checks.push({
|
||||
name: 'Taxonomy System',
|
||||
description: 'Content taxonomy endpoint',
|
||||
status: 'healthy',
|
||||
message: `Found ${taxonomyData?.count || 0} taxonomy items`,
|
||||
lastChecked: new Date().toISOString(),
|
||||
});
|
||||
} else {
|
||||
checks.push({
|
||||
name: 'Taxonomy System',
|
||||
description: 'Content taxonomy endpoint',
|
||||
status: 'error',
|
||||
message: taxonomyData?.error || `Failed with ${taxonomyResp.status}`,
|
||||
details: 'Check ContentTaxonomyRelation through model and field mappings',
|
||||
lastChecked: new Date().toISOString(),
|
||||
});
|
||||
}
|
||||
} catch (error: any) {
|
||||
checks.push({
|
||||
name: 'Taxonomy System',
|
||||
description: 'Content taxonomy endpoint',
|
||||
status: 'error',
|
||||
message: error.message || 'Network error',
|
||||
lastChecked: new Date().toISOString(),
|
||||
});
|
||||
}
|
||||
|
||||
return checks;
|
||||
}, []);
|
||||
|
||||
// Run all health checks
|
||||
const runAllChecks = useCallback(async () => {
|
||||
setLoading(true);
|
||||
@@ -506,12 +467,11 @@ export default function DebugStatus() {
|
||||
const schemaCheck = await checkDatabaseSchemaMapping();
|
||||
|
||||
// Run module checks in parallel
|
||||
const [writerChecks, plannerChecks, sitesChecks, integrationChecks, contentMgrChecks] = await Promise.all([
|
||||
const [writerChecks, plannerChecks, sitesChecks, integrationChecks] = await Promise.all([
|
||||
checkWriterModule(),
|
||||
checkPlannerModule(),
|
||||
checkSitesModule(),
|
||||
checkIntegrationModule(),
|
||||
checkContentManagerModule(),
|
||||
]);
|
||||
|
||||
// Build module health results
|
||||
@@ -541,11 +501,6 @@ export default function DebugStatus() {
|
||||
description: 'External platform sync (WordPress, etc.)',
|
||||
checks: integrationChecks,
|
||||
},
|
||||
{
|
||||
module: 'Content Manager',
|
||||
description: 'Taxonomy and content organization',
|
||||
checks: contentMgrChecks,
|
||||
},
|
||||
];
|
||||
|
||||
setModuleHealths(moduleHealthResults);
|
||||
@@ -560,7 +515,6 @@ export default function DebugStatus() {
|
||||
checkPlannerModule,
|
||||
checkSitesModule,
|
||||
checkIntegrationModule,
|
||||
checkContentManagerModule,
|
||||
]);
|
||||
|
||||
// Run checks on mount
|
||||
|
||||
@@ -8,8 +8,8 @@ import { Card } from '../../components/ui/card';
|
||||
import Button from '../../components/ui/button/Button';
|
||||
import Checkbox from '../../components/form/input/Checkbox';
|
||||
import Label from '../../components/form/Label';
|
||||
import Input from '../../components/form/input/Input';
|
||||
import Select from '../../components/form/input/Select';
|
||||
import Input from '../../components/form/input/InputField';
|
||||
import Select from '../../components/form/SelectDropdown';
|
||||
import PublishingRules, { PublishingRule } from '../../components/publishing/PublishingRules';
|
||||
import { useToast } from '../../components/ui/toast/ToastContainer';
|
||||
import { fetchAPI } from '../../services/api';
|
||||
|
||||
@@ -202,13 +202,6 @@ export default function SiteDashboard() {
|
||||
</p>
|
||||
)}
|
||||
<div className="flex gap-2 mt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => navigate(`/sites/${siteId}/preview`)}
|
||||
startIcon={<EyeIcon className="w-4 h-4" />}
|
||||
>
|
||||
Preview
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => navigate(`/sites/${siteId}/settings`)}
|
||||
|
||||
@@ -382,12 +382,16 @@ export default function SiteList() {
|
||||
{filteredSites.map((site) => (
|
||||
<Card key={site.id} className="rounded-xl border-2 border-slate-200 bg-white dark:border-gray-800 dark:bg-white/3 hover:border-[var(--color-primary)] hover:shadow-lg transition-all">
|
||||
<div className="relative p-4 pb-6">
|
||||
<div className="mb-5 size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-lg">
|
||||
<GridIcon className="h-6 w-6" />
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="size-6 rounded-lg bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-md flex-shrink-0">
|
||||
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
|
||||
{site.name}
|
||||
</h3>
|
||||
</div>
|
||||
<h3 className="mb-3 text-lg font-semibold text-gray-800 dark:text-white/90">
|
||||
{site.name}
|
||||
</h3>
|
||||
<p className="max-w-xs text-sm text-gray-500 dark:text-gray-400 mb-2">
|
||||
{site.description || 'No description'}
|
||||
</p>
|
||||
|
||||
@@ -1,223 +0,0 @@
|
||||
/**
|
||||
* 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 { id: siteId } = useParams<{ id: 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 deployment record to find preview URL
|
||||
if (latestBlueprint.deployed_version || latestBlueprint.status === 'deployed') {
|
||||
try {
|
||||
// Get deployment records for this blueprint
|
||||
const deploymentsData = await fetchAPI(`/v1/publisher/deployments/?site_blueprint=${latestBlueprint.id}`);
|
||||
const deployments = Array.isArray(deploymentsData?.results) ? deploymentsData.results : Array.isArray(deploymentsData) ? deploymentsData : [];
|
||||
|
||||
// Find the latest deployed record
|
||||
const deployedRecord = deployments.find((d: any) => d.status === 'deployed') || deployments[0];
|
||||
|
||||
if (deployedRecord?.deployment_url) {
|
||||
setPreviewUrl(deployedRecord.deployment_url);
|
||||
} else if (deployedRecord) {
|
||||
// If deployment exists but no URL, construct from Sites Renderer
|
||||
// Sites Renderer should be accessible at a different port or subdomain
|
||||
// Check if we have the Sites Renderer URL configured
|
||||
// Use VPS IP or configured URL for Sites Renderer
|
||||
const sitesRendererUrl = import.meta.env.VITE_SITES_RENDERER_URL ||
|
||||
(window as any).__SITES_RENDERER_URL__ ||
|
||||
'http://31.97.144.105:8024';
|
||||
setPreviewUrl(`${sitesRendererUrl}/${siteId}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('No deployment record found:', error);
|
||||
// If blueprint is deployed but no deployment record, try Sites Renderer directly
|
||||
if (latestBlueprint.status === 'deployed') {
|
||||
// Use VPS IP or configured URL for Sites Renderer
|
||||
const sitesRendererUrl = import.meta.env.VITE_SITES_RENDERER_URL ||
|
||||
(window as any).__SITES_RENDERER_URL__ ||
|
||||
'http://31.97.144.105:8024';
|
||||
setPreviewUrl(`${sitesRendererUrl}/${siteId}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If still no preview URL, check blueprint status
|
||||
if (!previewUrl) {
|
||||
if (latestBlueprint.status === 'ready' || latestBlueprint.status === 'generating' || latestBlueprint.status === 'draft') {
|
||||
// Blueprint exists but not deployed yet - don't set preview URL
|
||||
setPreviewUrl(null);
|
||||
} else if (latestBlueprint.status === 'deployed') {
|
||||
// Blueprint is deployed but no deployment record found - try Sites Renderer
|
||||
const sitesRendererUrl = import.meta.env.VITE_SITES_RENDERER_URL ||
|
||||
(window as any).__SITES_RENDERER_URL__ ||
|
||||
'http://localhost:8024';
|
||||
setPreviewUrl(`${sitesRendererUrl}/${siteId}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
} 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">
|
||||
{blueprint?.status === 'ready' || blueprint?.status === 'generating'
|
||||
? 'Blueprint is ready but not yet deployed. Deploy your site to preview it.'
|
||||
: blueprint?.status === 'draft'
|
||||
? 'Blueprint is still in draft. Complete the wizard to generate the site structure.'
|
||||
: 'No preview available. Please deploy your site first.'}
|
||||
</p>
|
||||
{blueprint && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-500">
|
||||
Blueprint: {blueprint.name} ({blueprint.status})
|
||||
</p>
|
||||
{blueprint.status === 'ready' && (
|
||||
<Button
|
||||
variant="solid"
|
||||
tone="brand"
|
||||
onClick={() => {
|
||||
// Navigate to blueprints page or show deploy option
|
||||
window.location.href = `/sites/blueprints`;
|
||||
}}
|
||||
className="mt-4"
|
||||
>
|
||||
Go to Blueprints to Deploy
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</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} startIcon={<RefreshCwIcon className="w-4 h-4" />}>
|
||||
Refresh
|
||||
</Button>
|
||||
<Button variant="outline" onClick={handleOpenInNewTab} startIcon={<ExternalLinkIcon className="w-4 h-4" />}>
|
||||
Open in New Tab
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => setIsFullscreen(true)} startIcon={<Maximize2Icon className="w-4 h-4" />}>
|
||||
Fullscreen
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isFullscreen && (
|
||||
<div className="absolute top-4 right-4 z-10">
|
||||
<Button variant="outline" onClick={() => setIsFullscreen(false)} startIcon={<Minimize2Icon className="w-4 h-4" />}>
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -20,7 +20,6 @@ import { useSectorStore } from '../../store/sectorStore';
|
||||
import { usePageSizeStore } from '../../store/pageSizeStore';
|
||||
import ProgressModal from '../../components/common/ProgressModal';
|
||||
import { useProgressModal } from '../../hooks/useProgressModal';
|
||||
import ContentViewerModal from '../../components/common/ContentViewerModal';
|
||||
import PageHeader from '../../components/common/PageHeader';
|
||||
import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';
|
||||
import ModuleMetricsFooter, { MetricItem, ProgressMetric } from '../../components/dashboard/ModuleMetricsFooter';
|
||||
@@ -50,10 +49,6 @@ export default function Content() {
|
||||
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
|
||||
const [showContent, setShowContent] = useState(false);
|
||||
|
||||
// Content viewer modal state
|
||||
const [isViewerModalOpen, setIsViewerModalOpen] = useState(false);
|
||||
const [viewerContent, setViewerContent] = useState<ContentType | null>(null);
|
||||
|
||||
// Progress modal for AI functions
|
||||
const progressModal = useProgressModal();
|
||||
const hasReloadedRef = useRef(false);
|
||||
@@ -138,11 +133,12 @@ export default function Content() {
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
// Handle view content
|
||||
const handleViewContent = useCallback((row: ContentType) => {
|
||||
setViewerContent(row);
|
||||
setIsViewerModalOpen(true);
|
||||
}, []);
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Handle row click - navigate to content view
|
||||
const handleRowClick = useCallback((row: ContentType) => {
|
||||
navigate(`/writer/content/${row.id}`);
|
||||
}, [navigate]);
|
||||
|
||||
// Create page config
|
||||
const pageConfig = useMemo(() => {
|
||||
@@ -153,13 +149,13 @@ export default function Content() {
|
||||
statusFilter,
|
||||
setStatusFilter,
|
||||
setCurrentPage,
|
||||
onViewContent: handleViewContent,
|
||||
onRowClick: handleRowClick,
|
||||
});
|
||||
}, [
|
||||
activeSector,
|
||||
searchTerm,
|
||||
statusFilter,
|
||||
handleViewContent,
|
||||
handleRowClick,
|
||||
]);
|
||||
|
||||
// Calculate header metrics
|
||||
@@ -172,8 +168,6 @@ export default function Content() {
|
||||
}));
|
||||
}, [pageConfig?.headerMetrics, content, totalCount]);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleRowAction = useCallback(async (action: string, row: ContentType) => {
|
||||
if (action === 'view_on_wordpress') {
|
||||
if (row.external_url) {
|
||||
@@ -194,7 +188,7 @@ export default function Content() {
|
||||
);
|
||||
} else {
|
||||
// Synchronous completion
|
||||
toast.success(`Image prompts generated: ${result.prompts_created || 0} prompt${(result.prompts_created || 0) === 1 ? '' : 's'} created`);
|
||||
toast.success(`Image prompts generation task started. Task ID: ${result.task_id || 'N/A'}`);
|
||||
loadContent(); // Reload to show new prompts
|
||||
}
|
||||
} else {
|
||||
@@ -300,17 +294,6 @@ export default function Content() {
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Content Viewer Modal */}
|
||||
<ContentViewerModal
|
||||
isOpen={isViewerModalOpen}
|
||||
onClose={() => {
|
||||
setIsViewerModalOpen(false);
|
||||
setViewerContent(null);
|
||||
}}
|
||||
title={viewerContent?.title || 'Content'}
|
||||
contentHtml={viewerContent?.content_html || ''}
|
||||
/>
|
||||
|
||||
{/* Progress Modal for AI Functions */}
|
||||
<ProgressModal
|
||||
isOpen={progressModal.isOpen}
|
||||
|
||||
@@ -109,6 +109,11 @@ export default function Review() {
|
||||
setCurrentPage(1);
|
||||
}, [sortBy]);
|
||||
|
||||
// Handle row click - navigate to content view
|
||||
const handleRowClick = useCallback((row: Content) => {
|
||||
navigate(`/writer/content/${row.id}`);
|
||||
}, [navigate]);
|
||||
|
||||
// Build page config
|
||||
const pageConfig = useMemo(() =>
|
||||
createReviewPageConfig({
|
||||
@@ -118,8 +123,9 @@ export default function Review() {
|
||||
statusFilter,
|
||||
setStatusFilter,
|
||||
setCurrentPage,
|
||||
onRowClick: handleRowClick,
|
||||
}),
|
||||
[activeSector, searchTerm, statusFilter]
|
||||
[activeSector, searchTerm, statusFilter, handleRowClick]
|
||||
);
|
||||
|
||||
// Header metrics (calculated from loaded data)
|
||||
|
||||
Reference in New Issue
Block a user