1351 lines
56 KiB
TypeScript
1351 lines
56 KiB
TypeScript
/**
|
|
* Site Settings (Advanced)
|
|
* Phase 7: Advanced Site Management
|
|
* Features: SEO (meta tags, Open Graph, schema.org), Industry & Sectors Configuration
|
|
*/
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
|
|
import PageMeta from '../../components/common/PageMeta';
|
|
import PageHeader from '../../components/common/PageHeader';
|
|
import { Card } from '../../components/ui/card';
|
|
import Button from '../../components/ui/button/Button';
|
|
import 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,
|
|
fetchSites,
|
|
fetchIndustries,
|
|
Site,
|
|
Industry,
|
|
} from '../../services/api';
|
|
import WordPressIntegrationForm from '../../components/sites/WordPressIntegrationForm';
|
|
import { integrationApi, SiteIntegration } from '../../services/integration.api';
|
|
import { GridIcon, PlugInIcon, PaperPlaneIcon, DocsIcon, BoltIcon, FileIcon, ChevronDownIcon } from '../../icons';
|
|
import Badge from '../../components/ui/badge/Badge';
|
|
import { Dropdown } from '../../components/ui/dropdown/Dropdown';
|
|
import { DropdownItem } from '../../components/ui/dropdown/DropdownItem';
|
|
|
|
export default function SiteSettings() {
|
|
const { id: siteId } = useParams<{ id: string }>();
|
|
const navigate = useNavigate();
|
|
const [searchParams] = useSearchParams();
|
|
const toast = useToast();
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [site, setSite] = useState<any>(null);
|
|
const [wordPressIntegration, setWordPressIntegration] = useState<SiteIntegration | null>(null);
|
|
const [integrationLoading, setIntegrationLoading] = useState(false);
|
|
|
|
// Site selector state
|
|
const [sites, setSites] = useState<Site[]>([]);
|
|
const [sitesLoading, setSitesLoading] = useState(true);
|
|
const [isSiteSelectorOpen, setIsSiteSelectorOpen] = useState(false);
|
|
const siteSelectorRef = useRef<HTMLButtonElement>(null);
|
|
|
|
// Check for tab parameter in URL
|
|
const initialTab = (searchParams.get('tab') as 'general' | 'integrations' | 'content-types') || 'general';
|
|
const [activeTab, setActiveTab] = useState<'general' | 'integrations' | 'content-types'>(initialTab);
|
|
const [contentTypes, setContentTypes] = useState<any>(null);
|
|
const [contentTypesLoading, setContentTypesLoading] = useState(false);
|
|
|
|
// Sectors selection state
|
|
const [industries, setIndustries] = useState<Industry[]>([]);
|
|
const [selectedIndustry, setSelectedIndustry] = useState<string>('');
|
|
const [selectedSectors, setSelectedSectors] = useState<string[]>([]);
|
|
const [isSelectingSectors, setIsSelectingSectors] = useState(false);
|
|
const [userPreferences, setUserPreferences] = useState<{
|
|
selectedIndustry?: string;
|
|
selectedSectors?: string[];
|
|
} | null>(null);
|
|
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
slug: '',
|
|
site_url: '',
|
|
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(() => {
|
|
if (siteId) {
|
|
// Clear state when site changes
|
|
setWordPressIntegration(null);
|
|
setContentTypes(null);
|
|
setSite(null);
|
|
|
|
// Load new site data
|
|
loadSite();
|
|
loadIntegrations();
|
|
loadIndustries();
|
|
}
|
|
}, [siteId]);
|
|
|
|
useEffect(() => {
|
|
// Update tab if URL parameter changes
|
|
const tab = searchParams.get('tab');
|
|
if (tab && ['general', 'integrations', 'content-types'].includes(tab)) {
|
|
setActiveTab(tab as typeof activeTab);
|
|
}
|
|
}, [searchParams]);
|
|
|
|
useEffect(() => {
|
|
if (activeTab === 'content-types' && wordPressIntegration) {
|
|
loadContentTypes();
|
|
}
|
|
}, [activeTab, wordPressIntegration]);
|
|
|
|
// Load sites for selector
|
|
useEffect(() => {
|
|
loadSites();
|
|
loadUserPreferences();
|
|
}, []);
|
|
|
|
// Load site sectors when site and industries are loaded
|
|
useEffect(() => {
|
|
if (site && industries.length > 0) {
|
|
loadSiteSectors();
|
|
}
|
|
}, [site, industries]);
|
|
|
|
const loadSites = async () => {
|
|
try {
|
|
setSitesLoading(true);
|
|
const response = await fetchSites();
|
|
const activeSites = (response.results || []).filter(site => site.is_active);
|
|
setSites(activeSites);
|
|
} catch (error: any) {
|
|
console.error('Failed to load sites:', error);
|
|
} finally {
|
|
setSitesLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleSiteSelect = (siteId: number) => {
|
|
navigate(`/sites/${siteId}/settings${searchParams.get('tab') ? `?tab=${searchParams.get('tab')}` : ''}`);
|
|
setIsSiteSelectorOpen(false);
|
|
};
|
|
|
|
const loadSite = async () => {
|
|
try {
|
|
setLoading(true);
|
|
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_url: data.domain || data.url || '',
|
|
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 || '',
|
|
});
|
|
// Don't automatically mark as connected - wait for actual connection test
|
|
}
|
|
} catch (error: any) {
|
|
toast.error(`Failed to load site: ${error.message}`);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const loadIntegrations = async () => {
|
|
if (!siteId) return;
|
|
try {
|
|
setIntegrationLoading(true);
|
|
const integration = await integrationApi.getWordPressIntegration(Number(siteId));
|
|
setWordPressIntegration(integration);
|
|
} catch (error: any) {
|
|
// Integration might not exist, that's okay
|
|
setWordPressIntegration(null);
|
|
} finally {
|
|
setIntegrationLoading(false);
|
|
}
|
|
};
|
|
|
|
const loadIndustries = async () => {
|
|
try {
|
|
const response = await fetchIndustries();
|
|
let allIndustries = response.industries || [];
|
|
|
|
// Note: For existing sites with industries already configured,
|
|
// we show ALL industries so users can change their selection.
|
|
// The filtering by user preferences only applies during initial site creation.
|
|
|
|
setIndustries(allIndustries);
|
|
} catch (error: any) {
|
|
console.error('Failed to load industries:', error);
|
|
}
|
|
};
|
|
|
|
const loadUserPreferences = async () => {
|
|
try {
|
|
const { fetchAccountSetting } = await import('../../services/api');
|
|
const setting = await fetchAccountSetting('user_preferences');
|
|
const preferences = setting.config as { selectedIndustry?: string; selectedSectors?: string[] } | undefined;
|
|
if (preferences) {
|
|
setUserPreferences(preferences);
|
|
}
|
|
} catch (error: any) {
|
|
// Silently handle errors
|
|
}
|
|
};
|
|
|
|
const loadSiteSectors = async () => {
|
|
if (!siteId) return;
|
|
try {
|
|
const { fetchSiteSectors } = await import('../../services/api');
|
|
const sectors = await fetchSiteSectors(Number(siteId));
|
|
const sectorSlugs = sectors.map((s: any) => s.slug);
|
|
setSelectedSectors(sectorSlugs);
|
|
|
|
if (site?.industry_slug) {
|
|
setSelectedIndustry(site.industry_slug);
|
|
} else {
|
|
for (const industry of industries) {
|
|
const matchingSectors = industry.sectors.filter(s => sectorSlugs.includes(s.slug));
|
|
if (matchingSectors.length > 0) {
|
|
setSelectedIndustry(industry.slug);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
} catch (error: any) {
|
|
console.error('Failed to load site sectors:', error);
|
|
}
|
|
};
|
|
|
|
const getIndustrySectors = () => {
|
|
if (!selectedIndustry) return [];
|
|
const industry = industries.find(i => i.slug === selectedIndustry);
|
|
|
|
// Note: For existing sites in Settings page, show ALL sectors from the selected industry
|
|
// so users can change their sector selection. The filtering by user preferences
|
|
// only applies during initial site creation (in the Sites wizard).
|
|
return industry?.sectors || [];
|
|
};
|
|
|
|
const handleSelectSectors = async () => {
|
|
if (!siteId || !selectedIndustry || selectedSectors.length === 0) {
|
|
toast.error('Please select an industry and at least one sector');
|
|
return;
|
|
}
|
|
|
|
if (selectedSectors.length > 5) {
|
|
toast.error('Maximum 5 sectors allowed per site');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setIsSelectingSectors(true);
|
|
const { selectSectorsForSite } = await import('../../services/api');
|
|
await selectSectorsForSite(
|
|
Number(siteId),
|
|
selectedIndustry,
|
|
selectedSectors
|
|
);
|
|
toast.success('Sectors configured successfully');
|
|
await loadSite();
|
|
await loadSiteSectors();
|
|
} catch (error: any) {
|
|
toast.error(`Failed to configure sectors: ${error.message}`);
|
|
} finally {
|
|
setIsSelectingSectors(false);
|
|
}
|
|
};
|
|
|
|
const handleIntegrationUpdate = async (integration: SiteIntegration) => {
|
|
setWordPressIntegration(integration);
|
|
await loadIntegrations();
|
|
};
|
|
|
|
const loadContentTypes = async () => {
|
|
if (!wordPressIntegration?.id) return;
|
|
try {
|
|
setContentTypesLoading(true);
|
|
const data = await fetchAPI(`/v1/integration/integrations/${wordPressIntegration.id}/content-types/`);
|
|
setContentTypes(data);
|
|
} catch (error: any) {
|
|
toast.error(`Failed to load content types: ${error.message}`);
|
|
} finally {
|
|
setContentTypesLoading(false);
|
|
}
|
|
};
|
|
|
|
const formatRelativeTime = (iso: string | null) => {
|
|
if (!iso) return '-';
|
|
const then = new Date(iso).getTime();
|
|
const now = Date.now();
|
|
const diff = Math.max(0, now - then);
|
|
const mins = Math.floor(diff / 60000);
|
|
if (mins < 1) return 'just now';
|
|
if (mins < 60) return `${mins}m ago`;
|
|
const hours = Math.floor(mins / 60);
|
|
if (hours < 24) return `${hours}h ago`;
|
|
const days = Math.floor(hours / 24);
|
|
if (days < 30) return `${days}d ago`;
|
|
const months = Math.floor(days / 30);
|
|
return `${months}mo ago`;
|
|
};
|
|
|
|
// Integration status with authentication check
|
|
const [integrationStatus, setIntegrationStatus] = useState<'connected' | 'configured' | 'not_configured'>('not_configured');
|
|
const [testingAuth, setTestingAuth] = useState(false);
|
|
|
|
// Check basic configuration - integration must exist in DB and have sync_enabled
|
|
useEffect(() => {
|
|
const checkStatus = async () => {
|
|
// Integration must exist in database and have sync_enabled = true
|
|
if (wordPressIntegration && wordPressIntegration.id && wordPressIntegration.sync_enabled) {
|
|
setIntegrationStatus('configured');
|
|
// Test authentication
|
|
testAuthentication();
|
|
} else {
|
|
setIntegrationStatus('not_configured');
|
|
}
|
|
};
|
|
checkStatus();
|
|
}, [wordPressIntegration, site]);
|
|
|
|
// Auto-refresh integration list periodically to detect plugin-created integrations
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
if (!wordPressIntegration) {
|
|
loadIntegrations();
|
|
}
|
|
}, 5000); // Check every 5 seconds if integration doesn't exist
|
|
|
|
return () => clearInterval(interval);
|
|
}, [wordPressIntegration]);
|
|
|
|
// Test authentication with WordPress API
|
|
const testAuthentication = async () => {
|
|
if (testingAuth || !wordPressIntegration?.id) return;
|
|
|
|
try {
|
|
setTestingAuth(true);
|
|
const resp = await fetchAPI(`/v1/integration/integrations/${wordPressIntegration.id}/test_connection/`, {
|
|
method: 'POST',
|
|
body: {}
|
|
});
|
|
|
|
if (resp && resp.success) {
|
|
setIntegrationStatus('connected');
|
|
} else {
|
|
// Keep as 'configured' if auth fails
|
|
setIntegrationStatus('configured');
|
|
}
|
|
} catch (err) {
|
|
// Keep as 'configured' if auth test fails
|
|
setIntegrationStatus('configured');
|
|
} finally {
|
|
setTestingAuth(false);
|
|
}
|
|
};
|
|
|
|
// Sync Now handler extracted
|
|
const [syncLoading, setSyncLoading] = useState(false);
|
|
const [lastSyncTime, setLastSyncTime] = useState<string | null>(null);
|
|
const handleManualSync = async () => {
|
|
setSyncLoading(true);
|
|
try {
|
|
if (wordPressIntegration && wordPressIntegration.id) {
|
|
const res = await integrationApi.syncIntegration(wordPressIntegration.id, 'metadata');
|
|
if (res && res.success) {
|
|
toast.success('WordPress structure synced successfully');
|
|
if (res.last_sync_at) {
|
|
setLastSyncTime(res.last_sync_at);
|
|
}
|
|
setTimeout(() => loadContentTypes(), 1500);
|
|
} else {
|
|
toast.error(res?.message || 'Sync failed to start');
|
|
}
|
|
} else {
|
|
toast.error('No integration configured. Please configure WordPress integration first.');
|
|
}
|
|
} catch (err: any) {
|
|
toast.error(`Sync failed: ${err?.message || String(err)}`);
|
|
} finally {
|
|
setSyncLoading(false);
|
|
}
|
|
};
|
|
|
|
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(payload),
|
|
});
|
|
toast.success('Site settings saved successfully');
|
|
loadSite();
|
|
} catch (error: any) {
|
|
toast.error(`Failed to save settings: ${error.message}`);
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const SITE_TYPES = [
|
|
{ value: 'marketing', label: 'Marketing Site' },
|
|
{ value: 'ecommerce', label: 'Ecommerce Site' },
|
|
{ value: 'blog', label: 'Blog' },
|
|
{ value: 'portfolio', label: 'Portfolio' },
|
|
{ value: 'corporate', label: 'Corporate' },
|
|
];
|
|
|
|
const HOSTING_TYPES = [
|
|
{ value: 'igny8_sites', label: 'IGNY8 Sites' },
|
|
{ value: 'wordpress', label: 'WordPress' },
|
|
{ value: 'shopify', label: 'Shopify' },
|
|
{ value: 'multi', label: 'Multi-Destination' },
|
|
];
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="p-6">
|
|
<PageMeta title="Site Settings" />
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-gray-500">Loading site settings...</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<PageMeta title="Site Settings - IGNY8" />
|
|
|
|
<div className="flex items-center justify-between gap-4 mb-6">
|
|
<div className="flex items-center gap-4">
|
|
<PageHeader
|
|
title={site?.name ? `${site.name} — Site Settings` : 'Site Settings'}
|
|
badge={{ icon: <GridIcon />, color: 'blue' }}
|
|
hideSiteSector
|
|
/>
|
|
{/* Integration status indicator */}
|
|
<div className="flex items-center gap-3 ml-2">
|
|
<span
|
|
className={`inline-block w-6 h-6 rounded-full ${
|
|
integrationStatus === 'connected' ? 'bg-green-500' :
|
|
integrationStatus === 'configured' ? 'bg-brand-500' : 'bg-gray-300'
|
|
}`}
|
|
title={`Integration status: ${
|
|
integrationStatus === 'connected' ? 'Connected & Authenticated' :
|
|
integrationStatus === 'configured' ? 'Configured (testing...)' : 'Not configured'
|
|
}`}
|
|
/>
|
|
<span className="text-sm text-gray-600 dark:text-gray-300">
|
|
{integrationStatus === 'connected' && 'Connected'}
|
|
{integrationStatus === 'configured' && (testingAuth ? 'Testing...' : 'Configured')}
|
|
{integrationStatus === 'not_configured' && 'Not configured'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Site Selector - Only show if more than 1 site */}
|
|
{!sitesLoading && sites.length > 1 && (
|
|
<div className="relative inline-block">
|
|
<button
|
|
ref={siteSelectorRef}
|
|
onClick={() => setIsSiteSelectorOpen(!isSiteSelectorOpen)}
|
|
className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-brand-200 rounded-lg hover:bg-brand-50 hover:border-brand-300 dark:bg-gray-800 dark:text-gray-300 dark:border-brand-700/50 dark:hover:bg-brand-500/10 dark:hover:border-brand-600/50 transition-colors"
|
|
aria-label="Switch site"
|
|
>
|
|
<span className="flex items-center gap-2">
|
|
<GridIcon className="w-4 h-4 text-brand-500 dark:text-brand-400" />
|
|
<span className="max-w-[150px] truncate">{site?.name || 'Select Site'}</span>
|
|
</span>
|
|
<ChevronDownIcon className={`w-4 h-4 text-brand-500 dark:text-brand-400 transition-transform ${isSiteSelectorOpen ? 'rotate-180' : ''}`} />
|
|
</button>
|
|
<Dropdown
|
|
isOpen={isSiteSelectorOpen}
|
|
onClose={() => setIsSiteSelectorOpen(false)}
|
|
anchorRef={siteSelectorRef}
|
|
>
|
|
{sites.map((s) => (
|
|
<DropdownItem
|
|
key={s.id}
|
|
onItemClick={() => handleSiteSelect(s.id)}
|
|
className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
|
|
site?.id === s.id
|
|
? "bg-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300"
|
|
: "text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
|
|
}`}
|
|
>
|
|
<span className="flex-1">{s.name}</span>
|
|
{site?.id === s.id && (
|
|
<svg
|
|
className="w-4 h-4 text-brand-600 dark:text-brand-400"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
)}
|
|
</DropdownItem>
|
|
))}
|
|
</Dropdown>
|
|
</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('general');
|
|
navigate(`/sites/${siteId}/settings`, { replace: true });
|
|
}}
|
|
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'
|
|
}`}
|
|
>
|
|
<GridIcon className="w-4 h-4 inline mr-2" />
|
|
General
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setActiveTab('integrations');
|
|
navigate(`/sites/${siteId}/settings?tab=integrations`, { replace: true });
|
|
}}
|
|
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
|
|
activeTab === 'integrations'
|
|
? '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'
|
|
}`}
|
|
>
|
|
<PlugInIcon className="w-4 h-4 inline mr-2" />
|
|
Integrations
|
|
</button>
|
|
{(wordPressIntegration || site?.wp_url || site?.wp_api_key || site?.hosting_type === 'wordpress') && (
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setActiveTab('content-types');
|
|
navigate(`/sites/${siteId}/settings?tab=content-types`, { replace: true });
|
|
}}
|
|
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
|
|
activeTab === 'content-types'
|
|
? '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'
|
|
}`}
|
|
>
|
|
<FileIcon className="w-4 h-4 inline mr-2" />
|
|
Content Types
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Types Tab */}
|
|
{activeTab === 'content-types' && (
|
|
<Card>
|
|
<div className="p-6">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h2 className="text-lg font-semibold">WordPress Content Types</h2>
|
|
<p className="text-sm text-gray-500 mt-1">View WordPress site structure and content counts</p>
|
|
</div>
|
|
{wordPressIntegration && (
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center gap-2 px-3 py-1.5 rounded-md bg-gray-100 dark:bg-gray-800">
|
|
<div className={`w-2 h-2 rounded-full ${
|
|
wordPressIntegration.sync_status === 'success' ? 'bg-green-500' :
|
|
wordPressIntegration.sync_status === 'failed' ? 'bg-red-500' :
|
|
'bg-yellow-500'
|
|
}`}></div>
|
|
<span className="text-xs font-medium text-gray-700 dark:text-gray-300">
|
|
{wordPressIntegration.sync_status === 'success' ? 'Synced' :
|
|
wordPressIntegration.sync_status === 'failed' ? 'Failed' : 'Pending'}
|
|
</span>
|
|
</div>
|
|
{(lastSyncTime || wordPressIntegration.last_sync_at) && (
|
|
<div className="text-xs text-gray-500">
|
|
{formatRelativeTime(lastSyncTime || wordPressIntegration.last_sync_at)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{contentTypesLoading ? (
|
|
<div className="text-center py-8 text-gray-500">
|
|
<div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-brand-600 mb-3"></div>
|
|
<p>Loading content types...</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="flex items-center justify-end gap-3 mb-6">
|
|
<Button
|
|
variant="outline"
|
|
disabled={syncLoading || !(wordPressIntegration || site?.wp_url || site?.wp_api_key || site?.hosting_type === 'wordpress')}
|
|
onClick={handleManualSync}
|
|
className="flex items-center gap-2"
|
|
>
|
|
{syncLoading ? (
|
|
<>
|
|
<div className="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-current"></div>
|
|
<span>Syncing...</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
<span>Sync Structure</span>
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
|
|
{!contentTypes ? (
|
|
<div className="text-center py-12 text-gray-500">
|
|
<svg className="w-16 h-16 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
|
|
</svg>
|
|
<p className="font-medium mb-1">No content types data available</p>
|
|
<p className="text-sm">Click "Sync Structure" to fetch WordPress content types</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Post Types Section */}
|
|
<div>
|
|
<h3 className="text-md font-medium mb-3">Post Types</h3>
|
|
<div className="space-y-3">
|
|
{Object.entries(contentTypes.post_types || {}).map(([key, data]: [string, any]) => (
|
|
<div key={key} className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-3">
|
|
<h4 className="font-medium">{data.label}</h4>
|
|
<span className="text-sm text-gray-500">
|
|
{data.count} total · {data.synced_count} synced
|
|
</span>
|
|
</div>
|
|
{data.last_synced && (
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
Last synced: {new Date(data.last_synced).toLocaleString()}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className={`px-2 py-1 text-xs rounded ${data.enabled ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200'}`}>
|
|
{data.enabled ? 'Enabled' : 'Disabled'}
|
|
</span>
|
|
<span className="text-sm text-gray-500">Limit: {data.fetch_limit}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Taxonomies Section */}
|
|
<div>
|
|
<h3 className="text-md font-medium mb-3">Taxonomies</h3>
|
|
<div className="space-y-3">
|
|
{Object.entries(contentTypes.taxonomies || {}).map(([key, data]: [string, any]) => (
|
|
<div key={key} className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-3">
|
|
<h4 className="font-medium">{data.label}</h4>
|
|
<span className="text-sm text-gray-500">
|
|
{data.count} total · {data.synced_count} synced
|
|
</span>
|
|
</div>
|
|
{data.last_synced && (
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
Last synced: {new Date(data.last_synced).toLocaleString()}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className={`px-2 py-1 text-xs rounded ${data.enabled ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200'}`}>
|
|
{data.enabled ? 'Enabled' : 'Disabled'}
|
|
</span>
|
|
<span className="text-sm text-gray-500">Limit: {data.fetch_limit}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Summary */}
|
|
{contentTypes.last_structure_fetch && (
|
|
<div className="mt-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
Structure last fetched: {new Date(contentTypes.last_structure_fetch).toLocaleString()}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Original tab content below */}
|
|
{activeTab !== 'content-types' && (
|
|
<div className="space-y-6">
|
|
{/* General Tab */}
|
|
{activeTab === 'general' && (
|
|
<>
|
|
{/* 4-Card Layout for Basic Settings, SEO, Open Graph, and Schema */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
|
{/* Card 1: Basic Site Settings */}
|
|
<Card className="p-6">
|
|
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
|
<GridIcon className="w-5 h-5 text-brand-500" />
|
|
Basic Settings
|
|
</h3>
|
|
<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>Site URL</Label>
|
|
<input
|
|
type="text"
|
|
value={formData.site_url}
|
|
onChange={(e) => setFormData({ ...formData, site_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>Site Type</Label>
|
|
<SelectDropdown
|
|
options={SITE_TYPES}
|
|
value={formData.site_type}
|
|
onChange={(value) => setFormData({ ...formData, site_type: value })}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label>Hosting Type</Label>
|
|
<SelectDropdown
|
|
options={HOSTING_TYPES}
|
|
value={formData.hosting_type}
|
|
onChange={(value) => setFormData({ ...formData, hosting_type: value })}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Checkbox
|
|
checked={formData.is_active}
|
|
onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
|
|
label="Active"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Card 2: SEO Meta Tags */}
|
|
<Card className="p-6">
|
|
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
|
<DocsIcon className="w-5 h-5 text-brand-500" />
|
|
SEO Meta Tags
|
|
</h3>
|
|
<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>
|
|
|
|
{/* Card 3: Open Graph */}
|
|
<Card className="p-6">
|
|
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
|
<PaperPlaneIcon className="w-5 h-5 text-brand-500" />
|
|
Open Graph
|
|
</h3>
|
|
<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={3}
|
|
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={(value) => setFormData({ ...formData, og_type: 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>
|
|
|
|
{/* Card 4: Schema.org */}
|
|
<Card className="p-6">
|
|
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
|
<BoltIcon className="w-5 h-5 text-brand-500" />
|
|
Schema.org
|
|
</h3>
|
|
<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={(value) => setFormData({ ...formData, schema_type: 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>
|
|
|
|
{/* Sectors Configuration Section */}
|
|
<Card className="p-6">
|
|
<h3 className="text-lg font-semibold mb-4">Industry & Sectors Configuration</h3>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mb-6">
|
|
Configure up to 5 sectors from your selected industry. Keywords and clusters are automatically associated with sectors.
|
|
</p>
|
|
|
|
<div className="space-y-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Select Industry
|
|
</label>
|
|
<select
|
|
value={selectedIndustry}
|
|
onChange={(e) => {
|
|
setSelectedIndustry(e.target.value);
|
|
setSelectedSectors([]);
|
|
}}
|
|
className="h-9 w-full rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm shadow-theme-xs text-gray-800 placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
|
|
>
|
|
<option value="">Select an industry...</option>
|
|
{industries.map((industry) => (
|
|
<option key={industry.slug} value={industry.slug}>
|
|
{industry.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{selectedIndustry && (
|
|
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
{industries.find(i => i.slug === selectedIndustry)?.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{selectedIndustry && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Select Sectors (max 5)
|
|
</label>
|
|
<div className="space-y-2 max-h-64 overflow-y-auto border border-gray-200 rounded-lg p-4 dark:border-gray-700">
|
|
{getIndustrySectors().map((sector) => (
|
|
<label
|
|
key={sector.slug}
|
|
className="flex items-start space-x-3 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedSectors.includes(sector.slug)}
|
|
onChange={(e) => {
|
|
if (e.target.checked) {
|
|
if (selectedSectors.length >= 5) {
|
|
toast.error('Maximum 5 sectors allowed per site');
|
|
return;
|
|
}
|
|
setSelectedSectors([...selectedSectors, sector.slug]);
|
|
} else {
|
|
setSelectedSectors(selectedSectors.filter(s => s !== sector.slug));
|
|
}
|
|
}}
|
|
className="mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
|
/>
|
|
<div className="flex-1">
|
|
<div className="font-medium text-sm text-gray-900 dark:text-white">
|
|
{sector.name}
|
|
</div>
|
|
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
|
{sector.description}
|
|
</div>
|
|
</div>
|
|
</label>
|
|
))}
|
|
</div>
|
|
<p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
|
Selected: {selectedSectors.length} / 5 sectors
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{selectedIndustry && selectedSectors.length > 0 && (
|
|
<div className="flex justify-end">
|
|
<Button
|
|
onClick={handleSelectSectors}
|
|
variant="primary"
|
|
disabled={isSelectingSectors}
|
|
>
|
|
{isSelectingSectors ? 'Saving Sectors...' : 'Save Sectors'}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</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>
|
|
)}
|
|
|
|
{/* Integrations Tab */}
|
|
{activeTab === 'integrations' && siteId && (
|
|
<WordPressIntegrationForm
|
|
siteId={Number(siteId)}
|
|
integration={wordPressIntegration}
|
|
siteName={site?.name}
|
|
siteUrl={site?.domain || site?.wp_url}
|
|
onIntegrationUpdate={handleIntegrationUpdate}
|
|
/>
|
|
)}
|
|
|
|
{/* Save Button */}
|
|
{activeTab === 'general' && (
|
|
<div className="flex justify-end">
|
|
<Button onClick={handleSave} variant="primary" disabled={saving}>
|
|
{saving ? 'Saving...' : 'Save Settings'}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|