← Назадimport { Bot, Network, Brain, DollarSign, Activity, 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 { useProject } from '../../hooks/useProjects';
interface OpenClawCardProps {
onViewDetails: () => void;
onViewTasks: () => void;
onViewFiles?: () => void;
}
export function OpenClawCard({ onViewDetails, onViewTasks, onViewFiles }: OpenClawCardProps) {
const { data, isLoading, refetch } = useProject('openclaw');
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>
);
}
const { kpis } = data || {};
const gatewayStatus = kpis?.gateway?.status || 'unknown';
const modelCount = kpis?.models?.totalModels || 0;
const weeklyCost = kpis?.models?.weeklyCostEstimate || '$0';
const statusColor = gatewayStatus === 'running' ? 'border-l-success' : 'border-l-danger';
return (
<Card className={`border-l-4 ${statusColor} transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-openclaw/10`}>
<CardHeader>
<div className="flex items-start justify-between">
<div className="flex items-center gap-3">
<div className="p-3 rounded-xl bg-openclaw/20">
<Bot className="w-6 h-6 text-openclaw" />
</div>
<div>
<CardTitle>OpenClaw Agent</CardTitle>
<CardDescription>AI operational partner</CardDescription>
</div>
</div>
<Badge variant={gatewayStatus === 'running' ? 'success' : 'danger'}>
{gatewayStatus?.toUpperCase() || 'UNKNOWN'}
</Badge>
</div>
</CardHeader>
<CardContent>
<div className="grid grid-cols-3 gap-4">
<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">
<Network className="w-4 h-4" />
Gateway
</div>
<div className="text-2xl font-bold text-secondary">
{kpis?.gateway?.portStatus || '--'}
</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">
<Brain className="w-4 h-4" />
Models
</div>
<div className="text-2xl font-bold text-white">{modelCount}</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">
<DollarSign className="w-4 h-4" />
Cost
</div>
<div className="text-2xl font-bold text-white">{weeklyCost}</div>
</div>
</div>
{/* Active models */}
{kpis?.models?.activeModels && (
<div className="mt-4 flex flex-wrap gap-2">
{kpis.models.activeModels.slice(0, 3).map((model: string) => (
<div key={model} className="px-2 py-1 bg-primary/10 text-primary text-xs rounded-lg border border-primary/20">
{model.split('/').pop()}
</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>
)}
</CardFooter>
</Card>
);
}