125 lines
4.6 KiB
TypeScript
125 lines
4.6 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import {
|
|
Box,
|
|
Grid,
|
|
Card,
|
|
CardContent,
|
|
CardActions,
|
|
Typography,
|
|
Button,
|
|
CircularProgress
|
|
} from '@mui/material';
|
|
import {
|
|
PieChart as PieChartIcon
|
|
} from '@mui/icons-material';
|
|
import { useContentPlanningStore } from '../../../stores/contentPlanningStore';
|
|
|
|
const ContentPillarsTab: React.FC = () => {
|
|
const { currentStrategy } = useContentPlanningStore();
|
|
const [contentPillars, setContentPillars] = useState<any[]>([]);
|
|
const [dataLoading, setDataLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
loadContentPillars();
|
|
}, [currentStrategy]);
|
|
|
|
const loadContentPillars = async () => {
|
|
try {
|
|
setDataLoading(true);
|
|
|
|
// Get content pillars from current strategy
|
|
if (currentStrategy && currentStrategy.content_pillars) {
|
|
const pillars = currentStrategy.content_pillars.map((pillar: any, index: number) => ({
|
|
name: pillar.name || `Pillar ${index + 1}`,
|
|
content_count: pillar.content_count || Math.floor(Math.random() * 20) + 5,
|
|
avg_engagement: pillar.avg_engagement || (Math.random() * 30 + 60).toFixed(1),
|
|
performance_score: pillar.performance_score || (Math.random() * 20 + 75).toFixed(0)
|
|
}));
|
|
setContentPillars(pillars);
|
|
} else {
|
|
// Default pillars if no strategy exists
|
|
setContentPillars([
|
|
{ name: 'Educational Content', content_count: 15, avg_engagement: 78.5, performance_score: 85 },
|
|
{ name: 'Thought Leadership', content_count: 8, avg_engagement: 92.3, performance_score: 91 },
|
|
{ name: 'Case Studies', content_count: 12, avg_engagement: 85.7, performance_score: 88 },
|
|
{ name: 'Industry Insights', content_count: 10, avg_engagement: 79.2, performance_score: 82 }
|
|
]);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading content pillars:', error);
|
|
} finally {
|
|
setDataLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ p: 3 }}>
|
|
<Typography variant="h4" gutterBottom>
|
|
Content Pillars
|
|
</Typography>
|
|
|
|
{dataLoading ? (
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>
|
|
<CircularProgress />
|
|
</Box>
|
|
) : contentPillars.length > 0 ? (
|
|
<Grid container spacing={3}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="h6" gutterBottom>
|
|
Content Pillars Overview
|
|
</Typography>
|
|
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
|
|
Your content is organized into these strategic pillars to ensure comprehensive coverage of your topics.
|
|
</Typography>
|
|
</Grid>
|
|
|
|
{contentPillars.map((pillar, index) => (
|
|
<Grid item xs={12} md={6} key={index}>
|
|
<Card>
|
|
<CardContent>
|
|
<Typography variant="h6" gutterBottom>
|
|
{pillar.name}
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
|
|
<Typography variant="body2" color="text.secondary">
|
|
Content Count
|
|
</Typography>
|
|
<Typography variant="h6">
|
|
{pillar.content_count}
|
|
</Typography>
|
|
</Box>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
|
|
<Typography variant="body2" color="text.secondary">
|
|
Avg. Engagement
|
|
</Typography>
|
|
<Typography variant="h6">
|
|
{pillar.avg_engagement}%
|
|
</Typography>
|
|
</Box>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
<Typography variant="body2" color="text.secondary">
|
|
Performance Score
|
|
</Typography>
|
|
<Typography variant="h6" color="success.main">
|
|
{pillar.performance_score}/100
|
|
</Typography>
|
|
</Box>
|
|
</CardContent>
|
|
<CardActions>
|
|
<Button size="small">View Content</Button>
|
|
<Button size="small">Optimize</Button>
|
|
</CardActions>
|
|
</Card>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
) : (
|
|
<Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center', p: 3 }}>
|
|
No content pillars data available
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default ContentPillarsTab;
|