← Назадimport { authFetch } from '../../lib/api';
import { Lightbulb, TrendingUp, DollarSign, Target, Sparkles, ArrowRight, FolderOpen } from 'lucide-react';
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../ui/card';
import { Button } from '../ui/button';
import { Badge } from '../ui/badge';
import { useQuery } from '@tanstack/react-query';
interface IdeasCardProps {
onViewDetails: () => void;
onViewIdeas: () => void;
onViewFiles?: () => void;
}
interface Idea {
id: string;
title: string;
priority: 'low' | 'medium' | 'high' | 'critical';
status: 'proposed' | 'approved' | 'done' | 'verified';
tags?: string[];
details?: {
estimatedRevenue?: string;
timeToMarket?: string;
initialInvestment?: string;
riskLevel?: string;
};
}
interface IdeasData {
project: string;
tasks: Idea[];
stats: {
total: number;
proposed: number;
approved: number;
done: number;
verified: number;
};
}
const priorityColors = {
low: 'bg-secondary/20 text-secondary border-secondary/30',
medium: 'bg-warning/20 text-warning border-warning/30',
high: 'bg-danger/20 text-danger border-danger/30',
critical: 'bg-red-600/20 text-red-400 border-red-500/30',
};
async function fetchIdeas(): Promise<IdeasData> {
const res = await authFetch('/api/projects/ideas/kanban-tasks');
if (!res.ok) throw new Error('Failed to fetch ideas');
return res.json();
}
export function IdeasCard({ onViewDetails, onViewIdeas, onViewFiles }: IdeasCardProps) {
const { data, isLoading, error } = useQuery({
queryKey: ['ideas'],
queryFn: fetchIdeas,
refetchInterval: 30000,
});
if (isLoading) {
return (
<Card className="animate-pulse">
<div className="h-64 flex items-center justify-center">
<div className="text-gray-400">Loading...</div>
</div>
</Card>
);
}
if (error) {
return (
<Card className="border-danger/30">
<div className="p-6 text-center text-danger">
Failed to load ideas
</div>
</Card>
);
}
const stats = data?.stats;
const ideas = data?.tasks || [];
// Get top priority ideas
const highPriorityIdeas = ideas
.filter(i => i.priority === 'high' || i.priority === 'critical')
.slice(0, 2);
const totalIdeas = stats?.total || 0;
const approvedCount = stats?.approved || 0;
const inProgressCount = (stats?.done || 0) + (stats?.verified || 0);
return (
<Card className="border-l-4 border-l-warning transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-warning/10">
<CardHeader>
<div className="flex items-start justify-between">
<div className="flex items-center gap-3">
<div className="p-3 rounded-xl bg-warning/20">
<Lightbulb className="w-6 h-6 text-warning" />
</div>
<div>
<CardTitle>💡 Ideas Pipeline</CardTitle>
<CardDescription>Revenue opportunities & business ideas</CardDescription>
</div>
</div>
<Badge variant="warning">ACTIVE</Badge>
</div>
</CardHeader>
<CardContent className="space-y-4">
{/* Stats Grid */}
<div className="grid grid-cols-3 gap-3">
<div className="bg-white/5 rounded-xl p-3 border border-white/5 text-center">
<div className="flex items-center justify-center gap-1 text-xs text-gray-400 uppercase mb-1">
<Sparkles className="w-3 h-3" />
Всего
</div>
<div className="text-xl font-bold text-white">{totalIdeas}</div>
</div>
<div className="bg-white/5 rounded-xl p-3 border border-white/5 text-center">
<div className="flex items-center justify-center gap-1 text-xs text-gray-400 uppercase mb-1">
<Target className="w-3 h-3" />
Апрув
</div>
<div className="text-xl font-bold text-warning">{approvedCount}</div>
</div>
<div className="bg-white/5 rounded-xl p-3 border border-white/5 text-center">
<div className="flex items-center justify-center gap-1 text-xs text-gray-400 uppercase mb-1">
<TrendingUp className="w-3 h-3" />
Делаем
</div>
<div className="text-xl font-bold text-success">{inProgressCount}</div>
</div>
</div>
{/* High Priority Ideas Preview */}
{highPriorityIdeas.length > 0 && (
<div className="space-y-2">
<div className="text-xs text-gray-400 uppercase font-medium">Приоритетные идеи</div>
{highPriorityIdeas.map(idea => (
<div
key={idea.id}
className="bg-white/5 rounded-lg p-3 border border-white/5 hover:border-warning/30 transition-colors"
>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div className="text-sm font-medium text-white truncate">
{idea.title}
</div>
{idea.details?.estimatedRevenue && (
<div className="flex items-center gap-1 text-xs text-success mt-1">
<DollarSign className="w-3 h-3" />
{idea.details.estimatedRevenue}
</div>
)}
</div>
<span
className={`inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium ${priorityColors[idea.priority]}`}
>
{idea.priority === 'critical' ? '🔥' : idea.priority === 'high' ? '⚡' : ''}
{idea.priority}
</span>
</div>
{idea.tags && idea.tags.length > 0 && (
<div className="flex flex-wrap gap-1 mt-2">
{idea.tags.slice(0, 3).map(tag => (
<span key={tag} className="text-xs px-1.5 py-0.5 bg-white/10 rounded text-gray-400">
#{tag}
</span>
))}
</div>
)}
</div>
))}
</div>
)}
{/* Status Bar */}
<div className="flex items-center justify-between text-xs">
<span className="text-gray-400">
Предложено: <span className="text-white">{stats?.proposed || 0}</span>
</span>
<div className="flex gap-2">
{stats && (
<>
<span className="text-warning">● {stats.approved}</span>
<span className="text-success">● {stats.done}</span>
<span className="text-info">● {stats.verified}</span>
</>
)}
</div>
</div>
</CardContent>
<CardFooter className="gap-2">
<Button variant="primary" size="sm" onClick={onViewIdeas}>
<ArrowRight className="w-4 h-4" />
Открыть доску
</Button>
<Button variant="ghost" size="sm" onClick={onViewDetails}>
Детали
</Button>
{onViewFiles && (
<Button variant="ghost" size="sm" onClick={onViewFiles}>
<FolderOpen className="w-4 h-4" />
Файлы
</Button>
)}
</CardFooter>
</Card>
);
}