← Назадimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogClose, DialogBody } from '../ui/dialog';
import { useProject } from '../../hooks/useProjects';
import { useSystem } from '../../hooks/useSystem';
interface KpiModalProps {
open: boolean;
onOpenChange: (open: boolean) => void;
projectId: 'system' | 'bender-bot' | 'piewell' | 'futures-screener' | 'affiliate' | 'ideas' | 'alphapulse' | 'options-screener' | 'youtube-ai-channel' | 'trading-bot';
}
export function KpiModal({ open, onOpenChange, projectId }: KpiModalProps) {
const isSystem = projectId === 'system';
const { data: systemData } = useSystem();
const { data: projectData } = useProject(projectId);
const data = isSystem ? systemData : projectData;
const kpis = data?.kpis || {};
const renderKpiTable = (title: string, items: Record<string, any>) => (
<div className="bg-white/5 rounded-xl p-6 border border-white/10">
<h3 className="text-lg font-semibold text-primary mb-4 flex items-center gap-2">
{title}
</h3>
<div className="space-y-3">
{Object.entries(items).map(([key, value]) => (
<div key={key} className="flex justify-between items-center py-2 border-b border-white/5 last:border-0">
<span className="text-sm text-gray-400 capitalize">{key.replace(/([A-Z])/g, ' $1')}</span>
<span className="text-sm font-semibold text-white">
{typeof value === 'object' ? JSON.stringify(value) : String(value)}
</span>
</div>
))}
</div>
</div>
);
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent>
<DialogHeader>
<DialogTitle>{data?.name || 'Project Details'}</DialogTitle>
<DialogClose onClick={() => onOpenChange(false)} />
</DialogHeader>
<DialogBody>
<div className="grid grid-cols-2 gap-6">
{Object.entries(kpis).map(([category, values]) => {
if (typeof values === 'object' && !Array.isArray(values)) {
return renderKpiTable(
category.charAt(0).toUpperCase() + category.slice(1),
values as Record<string, any>
);
}
return null;
})}
</div>
{/* Links section */}
{data?.links && (
<div className="mt-6 bg-white/5 rounded-xl p-6 border border-white/10">
<h3 className="text-lg font-semibold text-primary mb-4">Quick Links</h3>
<div className="flex flex-wrap gap-2">
{Object.entries(data.links).map(([name, url]) => (
<a
key={name}
href={url as string}
target="_blank"
rel="noopener noreferrer"
className="px-4 py-2 bg-primary/20 text-primary rounded-lg hover:bg-primary/30 transition-colors text-sm"
>
{name}
</a>
))}
</div>
</div>
)}
</DialogBody>
</DialogContent>
</Dialog>
);
}