import React from 'react';
import { Bot, Cpu, RefreshCw, Wifi, WifiOff } from 'lucide-react';
interface Robot {
robot_id: string;
robot_type: string;
platform?: string;
connected: boolean;
is_virtual?: boolean;
metadata?: any;
}
interface RobotDashboardProps {
robots: Robot[];
selectedRobot: Robot | null;
onRobotSelect: (robot: Robot) => void;
onRefresh: () => void;
}
const RobotDashboard: React.FC<RobotDashboardProps> = ({
robots,
selectedRobot,
onRobotSelect,
onRefresh
}) => {
const getRobotIcon = (robotType: string, isVirtual?: boolean) => {
if (isVirtual) return <Cpu className="w-6 h-6" />;
return <Bot className="w-6 h-6" />;
};
const getRobotTypeDisplay = (robotType: string, isVirtual?: boolean) => {
if (isVirtual) return `Virtual ${robotType}`;
return robotType;
};
const getStatusColor = (connected: boolean) => {
return connected ? 'text-green-400' : 'text-red-400';
};
const getStatusIcon = (connected: boolean) => {
return connected ? <Wifi className="w-4 h-4" /> : <WifiOff className="w-4 h-4" />;
};
return (
<div className="bg-gray-800 rounded-lg shadow-lg p-6">
<div className="flex justify-between items-center mb-6">
<h2 className="text-xl font-semibold text-gray-100">Robot Fleet</h2>
<button
onClick={onRefresh}
className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition-colors"
>
<RefreshCw className="w-4 h-4" />
Refresh
</button>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{robots.map((robot) => (
<div
key={robot.robot_id}
className={`bg-gray-700 rounded-lg p-4 cursor-pointer transition-all hover:bg-gray-600 ${
selectedRobot?.robot_id === robot.robot_id ? 'ring-2 ring-blue-400' : ''
}`}
onClick={() => onRobotSelect(robot)}
>
<div className="flex items-start justify-between mb-3">
<div className="flex items-center gap-3">
<div className={`${robot.is_virtual ? 'text-purple-400' : 'text-blue-400'}`}>
{getRobotIcon(robot.robot_type, robot.is_virtual)}
</div>
<div>
<h3 className="font-semibold text-gray-100">{robot.robot_id}</h3>
<p className="text-sm text-gray-400">
{getRobotTypeDisplay(robot.robot_type, robot.is_virtual)}
{robot.platform && ` • ${robot.platform}`}
</p>
</div>
</div>
<div className={`flex items-center gap-1 ${getStatusColor(robot.connected)}`}>
{getStatusIcon(robot.connected)}
<span className="text-xs">
{robot.connected ? 'Online' : 'Offline'}
</span>
</div>
</div>
{robot.is_virtual && (
<div className="mb-2">
<span className="inline-block bg-purple-600 text-purple-100 text-xs px-2 py-1 rounded">
VIRTUAL ROBOT
</span>
</div>
)}
<div className="text-xs text-gray-500">
Status: {robot.connected ? 'Connected' : 'Disconnected'}
{robot.platform && ` • Platform: ${robot.platform}`}
</div>
</div>
))}
</div>
{robots.length === 0 && (
<div className="text-center py-12 text-gray-400">
<Bot className="w-12 h-12 mx-auto mb-4 opacity-50" />
<p>No robots found</p>
<p className="text-sm mt-2">Make sure the robotics MCP server is running</p>
</div>
)}
</div>
);
};
export default RobotDashboard;
