← Назадimport { Globe, FileText, Activity, ExternalLink, FolderOpen, TrendingUp, Link2 } from 'lucide-react';
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../ui/card';
import { Button } from '../ui/button';
import { Badge } from '../ui/badge';
import { useProject } from '../../hooks/useProjects';
interface PiewellCardProps {
onViewDetails: () => void;
onViewTasks: () => void;
onViewFiles?: () => void;
}
export function PiewellCard({ onViewDetails, onViewTasks, onViewFiles }: PiewellCardProps) {
const { data, isLoading, refetch } = useProject('piewell');
if (isLoading) {
return <Card className="animate-pulse"><div className="h-64" /></Card>;
}
const { kpis } = data || {};
const wpStatus = kpis?.wordpress?.status || 'unknown';
const posts = kpis?.wordpress?.posts || 0;
const impressions = kpis?.search?.impressions || 0;
const impressionsTrend = kpis?.search?.impressionsTrend || '';
const pinterestImpressions = kpis?.pinterest?.impressions || 0;
const iherbStatus = kpis?.affiliate?.iherbStatus || 'unknown';
const iherbColor = iherbStatus === 'approved' ? 'text-green-400' : iherbStatus === 'pending' ? 'text-yellow-400' : 'text-gray-400';
return (
<Card className="transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-piewell/10">
<CardHeader>
<div className="flex items-start justify-between">
<div className="flex items-center gap-3">
<div className="p-3 rounded-xl bg-piewell/20">
<Globe className="w-6 h-6 text-piewell" />
</div>
<div>
<CardTitle>Piewell.com</CardTitle>
<CardDescription>Health & Wellness · SEO + Affiliate</CardDescription>
</div>
</div>
<Badge variant={wpStatus === 'up' ? 'success' : 'danger'}>
{wpStatus?.toUpperCase()}
</Badge>
</div>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 gap-3">
<div className="bg-white/5 rounded-xl p-4 border border-white/5">
<div className="flex items-center gap-2 text-xs text-gray-400 uppercase mb-2">
<FileText className="w-4 h-4" />
Articles
</div>
<div className="text-2xl font-bold text-white">{posts}</div>
<div className="text-xs text-gray-500 mt-1">published</div>
</div>
<div className="bg-white/5 rounded-xl p-4 border border-white/5">
<div className="flex items-center gap-2 text-xs text-gray-400 uppercase mb-2">
<TrendingUp className="w-4 h-4" />
SC Impressions
</div>
<div className="text-2xl font-bold text-secondary">{impressions.toLocaleString()}</div>
{impressionsTrend && <div className="text-xs text-green-400 mt-1">{impressionsTrend} 28d</div>}
</div>
<div className="bg-white/5 rounded-xl p-4 border border-white/5">
<div className="flex items-center gap-2 text-xs text-gray-400 uppercase mb-2">
<Activity className="w-4 h-4" />
Pinterest
</div>
<div className="text-2xl font-bold text-white">
{pinterestImpressions >= 1000 ? `${(pinterestImpressions / 1000).toFixed(0)}K` : pinterestImpressions}
</div>
<div className="text-xs text-gray-500 mt-1">impressions</div>
</div>
<div className="bg-white/5 rounded-xl p-4 border border-white/5">
<div className="flex items-center gap-2 text-xs text-gray-400 uppercase mb-2">
<Link2 className="w-4 h-4" />
iHerb / CJ
</div>
<div className={`text-lg font-bold capitalize ${iherbColor}`}>{iherbStatus}</div>
<div className="text-xs text-gray-500 mt-1">affiliate</div>
</div>
</div>
</CardContent>
<CardFooter className="gap-2">
<Button variant="primary" size="sm" onClick={() => refetch()}>
<Activity className="w-4 h-4" />
Обновить
</Button>
<Button variant="ghost" size="sm" onClick={onViewDetails}>
Детали
</Button>
<Button variant="ghost" size="sm" onClick={onViewTasks}>
Задачи
</Button>
{onViewFiles && (
<Button variant="ghost" size="sm" onClick={onViewFiles}>
<FolderOpen className="w-4 h-4" />
Файлы
</Button>
)}
<a href="https://piewell.com" target="_blank" rel="noopener noreferrer">
<Button variant="ghost" size="sm">
<ExternalLink className="w-4 h-4" />
</Button>
</a>
</CardFooter>
</Card>
);
}