'use client'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import {
Bot,
Zap,
Shield,
Eye,
Navigation,
Cpu,
Battery,
Wifi,
Settings,
Play,
Pause,
RotateCcw,
ChevronRight,
AlertTriangle,
CheckCircle,
Info,
ExternalLink
} from 'lucide-react'
import Link from 'next/link'
const specifications = {
dimensions: {
length: '48 cm',
width: '32 cm',
height: '25 cm',
weight: '15 kg'
},
performance: {
maxSpeed: '2.0 m/s',
payloadCapacity: '10 kg',
batteryLife: '4 hours',
operatingTemperature: '-20°C to 50°C'
},
sensors: [
{ name: 'YDLIDAR SuperLight (95g)', type: 'LiDAR', range: '12m', resolution: '1°' },
{ name: 'Intel RealSense D435i', type: 'RGB-D Camera', resolution: '1920x1080', fps: '30' },
{ name: 'Bosch BMI088', type: 'IMU', features: '9-DOF' },
{ name: 'Wheel Encoders', type: 'Odometry', resolution: '4096 PPR' }
],
computing: {
processor: 'Intel NUC 11',
ram: '16GB DDR4',
storage: '512GB NVMe SSD',
os: 'Ubuntu 22.04 LTS'
}
}
const controlModes = [
{
name: 'Autonomous Navigation',
description: 'Full autonomous operation with SLAM and path planning',
features: ['A* Path Planning', 'Dynamic Obstacle Avoidance', 'Goal-oriented Navigation'],
status: 'available'
},
{
name: 'Teleoperation',
description: 'Manual control via web interface or gamepad',
features: ['Real-time Video Feed', 'Force Feedback', 'Emergency Stop'],
status: 'available'
},
{
name: 'Semi-Autonomous',
description: 'Human supervision with autonomous assistance',
features: ['Waypoint Navigation', 'Collision Prevention', 'Human Override'],
status: 'available'
}
]
const maintenanceSchedule = [
{
interval: 'Daily',
tasks: ['Visual inspection', 'Battery check', 'Software updates'],
estimatedTime: '15 minutes'
},
{
interval: 'Weekly',
tasks: ['Wheel alignment', 'Sensor calibration', 'Log review'],
estimatedTime: '30 minutes'
},
{
interval: 'Monthly',
tasks: ['Deep cleaning', 'Firmware updates', 'Performance testing'],
estimatedTime: '1 hour'
}
]
export default function PilotLabsScoutPage() {
return (
<div className="min-h-screen bg-background">
<div className="container mx-auto px-4 py-8 max-w-6xl">
{/* Header */}
<div className="mb-8">
<div className="flex items-center space-x-4 mb-4">
<Bot className="h-12 w-12 text-primary" />
<div>
<h1 className="text-4xl font-bold">Pilot Labs Scout</h1>
<p className="text-xl text-muted-foreground">
Advanced Autonomous Mobile Robot Platform
</p>
</div>
<Badge variant="default" className="text-sm">
Active Production
</Badge>
</div>
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<Card>
<CardContent className="p-4 text-center">
<Zap className="h-8 w-8 text-yellow-500 mx-auto mb-2" />
<div className="text-2xl font-bold">2.0 m/s</div>
<div className="text-sm text-muted-foreground">Max Speed</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-4 text-center">
<Battery className="h-8 w-8 text-green-500 mx-auto mb-2" />
<div className="text-2xl font-bold">4h</div>
<div className="text-sm text-muted-foreground">Battery Life</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-4 text-center">
<Eye className="h-8 w-8 text-blue-500 mx-auto mb-2" />
<div className="text-2xl font-bold">360°</div>
<div className="text-sm text-muted-foreground">LiDAR Vision</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-4 text-center">
<Shield className="h-8 w-8 text-red-500 mx-auto mb-2" />
<div className="text-2xl font-bold">IP65</div>
<div className="text-sm text-muted-foreground">Protection</div>
</CardContent>
</Card>
</div>
</div>
<Tabs defaultValue="overview" className="space-y-6">
<TabsList className="grid w-full grid-cols-5">
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="specifications">Specifications</TabsTrigger>
<TabsTrigger value="control">Control Modes</TabsTrigger>
<TabsTrigger value="sensors">Sensors</TabsTrigger>
<TabsTrigger value="maintenance">Maintenance</TabsTrigger>
</TabsList>
<TabsContent value="overview" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>System Overview</CardTitle>
<CardDescription>
The Pilot Labs Scout is a rugged, autonomous mobile robot designed for indoor and outdoor operations
in industrial, commercial, and research environments.
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 className="font-semibold mb-3">Key Features</h3>
<ul className="space-y-2 text-sm">
<li className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span>Mecanum wheel drive system for omnidirectional movement</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span>YDLIDAR SuperLight (95g) for 360° obstacle detection</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span>Intel RealSense D435i RGB-D camera for depth perception</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span>ROS 2 Rolling Jazzy Jalisco integration</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span>IP65 weather protection rating</span>
</li>
</ul>
</div>
<div>
<h3 className="font-semibold mb-3">Use Cases</h3>
<ul className="space-y-2 text-sm">
<li className="flex items-center space-x-2">
<Info className="h-4 w-4 text-blue-500" />
<span>Industrial facility inspection and monitoring</span>
</li>
<li className="flex items-center space-x-2">
<Info className="h-4 w-4 text-blue-500" />
<span>Warehouse inventory management</span>
</li>
<li className="flex items-center space-x-2">
<Info className="h-4 w-4 text-blue-500" />
<span>Research and development testing</span>
</li>
<li className="flex items-center space-x-2">
<Info className="h-4 w-4 text-blue-500" />
<span>Security patrol and surveillance</span>
</li>
<li className="flex items-center space-x-2">
<Info className="h-4 w-4 text-blue-500" />
<span>Delivery and transport operations</span>
</li>
</ul>
</div>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Quick Start</CardTitle>
<CardDescription>
Get your Scout robot up and running in minutes
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="flex items-start space-x-3">
<div className="flex-shrink-0 w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">1</div>
<div>
<h4 className="font-medium">Power On</h4>
<p className="text-sm text-muted-foreground">Press and hold the power button for 3 seconds</p>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="flex-shrink-0 w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">2</div>
<div>
<h4 className="font-medium">Connect to Network</h4>
<p className="text-sm text-muted-foreground">Scout will automatically connect to configured WiFi network</p>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="flex-shrink-0 w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">3</div>
<div>
<h4 className="font-medium">Access Web Interface</h4>
<p className="text-sm text-muted-foreground">Navigate to http://scout-[serial]/ or use the Robotics MCP dashboard</p>
</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="specifications" className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Card>
<CardHeader>
<CardTitle>Physical Specifications</CardTitle>
</CardHeader>
<CardContent>
<dl className="space-y-2">
{Object.entries(specifications.dimensions).map(([key, value]) => (
<div key={key} className="flex justify-between">
<dt className="text-sm font-medium capitalize">{key.replace(/([A-Z])/g, ' $1')}:</dt>
<dd className="text-sm text-muted-foreground">{value}</dd>
</div>
))}
</dl>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Performance Specifications</CardTitle>
</CardHeader>
<CardContent>
<dl className="space-y-2">
{Object.entries(specifications.performance).map(([key, value]) => (
<div key={key} className="flex justify-between">
<dt className="text-sm font-medium capitalize">{key.replace(/([A-Z])/g, ' $1')}:</dt>
<dd className="text-sm text-muted-foreground">{value}</dd>
</div>
))}
</dl>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Computing Platform</CardTitle>
</CardHeader>
<CardContent>
<dl className="space-y-2">
{Object.entries(specifications.computing).map(([key, value]) => (
<div key={key} className="flex justify-between">
<dt className="text-sm font-medium capitalize">{key.replace(/([A-Z])/g, ' $1')}:</dt>
<dd className="text-sm text-muted-foreground">{value}</dd>
</div>
))}
</dl>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Environmental</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<div className="flex items-center space-x-2">
<Shield className="h-4 w-4 text-green-500" />
<span className="text-sm">IP65 rated for dust and water resistance</span>
</div>
<div className="flex items-center space-x-2">
<Shield className="h-4 w-4 text-green-500" />
<span className="text-sm">Operating temperature: -20°C to 50°C</span>
</div>
<div className="flex items-center space-x-2">
<Shield className="h-4 w-4 text-green-500" />
<span className="text-sm">Indoor and outdoor operation capable</span>
</div>
</CardContent>
</Card>
</div>
</TabsContent>
<TabsContent value="control" className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{controlModes.map((mode) => (
<Card key={mode.name}>
<CardHeader>
<CardTitle className="text-lg">{mode.name}</CardTitle>
<CardDescription>{mode.description}</CardDescription>
</CardHeader>
<CardContent>
<ul className="space-y-2 mb-4">
{mode.features.map((feature) => (
<li key={feature} className="flex items-center space-x-2 text-sm">
<CheckCircle className="h-3 w-3 text-green-500" />
<span>{feature}</span>
</li>
))}
</ul>
<Badge variant={mode.status === 'available' ? 'default' : 'secondary'}>
{mode.status === 'available' ? 'Available' : 'Coming Soon'}
</Badge>
</CardContent>
</Card>
))}
</div>
<Card>
<CardHeader>
<CardTitle>Control Interface</CardTitle>
<CardDescription>
Access all control modes through the Robotics MCP web interface
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Link href="/robot-control">
<Button className="w-full justify-start">
<Play className="mr-2 h-4 w-4" />
Start Robot Control
</Button>
</Link>
<Button variant="outline" className="justify-start">
<Settings className="mr-2 h-4 w-4" />
Configure Settings
</Button>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="sensors" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>Sensor Suite</CardTitle>
<CardDescription>
Comprehensive sensor array for autonomous operation and environmental awareness
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{specifications.sensors.map((sensor) => (
<div key={sensor.name} className="border rounded-lg p-4">
<div className="flex items-start space-x-3">
<Eye className="h-5 w-5 text-primary mt-0.5" />
<div className="flex-1">
<h4 className="font-medium">{sensor.name}</h4>
<p className="text-sm text-muted-foreground mb-2">{sensor.type}</p>
<div className="text-xs space-y-1">
{Object.entries(sensor).filter(([key]) => key !== 'name' && key !== 'type').map(([key, value]) => (
<div key={key} className="flex justify-between">
<span className="capitalize">{key.replace(/([A-Z])/g, ' $1')}:</span>
<span className="text-muted-foreground">{value}</span>
</div>
))}
</div>
</div>
</div>
</div>
))}
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Data Processing Pipeline</CardTitle>
<CardDescription>
Real-time sensor fusion and processing architecture
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">1</div>
<div>
<h4 className="font-medium">Sensor Data Acquisition</h4>
<p className="text-sm text-muted-foreground">Raw sensor data collection at 30Hz</p>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">2</div>
<div>
<h4 className="font-medium">Preprocessing & Filtering</h4>
<p className="text-sm text-muted-foreground">Noise reduction and data validation</p>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">3</div>
<div>
<h4 className="font-medium">Sensor Fusion</h4>
<p className="text-sm text-muted-foreground">Multi-modal data integration using Kalman filters</p>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">4</div>
<div>
<h4 className="font-medium">State Estimation</h4>
<p className="text-sm text-muted-foreground">Pose estimation and localization using SLAM</p>
</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="maintenance" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>Maintenance Schedule</CardTitle>
<CardDescription>
Regular maintenance tasks to ensure optimal robot performance
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
{maintenanceSchedule.map((schedule) => (
<div key={schedule.interval} className="border rounded-lg p-4">
<div className="flex items-center justify-between mb-3">
<h4 className="font-medium">{schedule.interval} Maintenance</h4>
<Badge variant="outline">{schedule.estimatedTime}</Badge>
</div>
<ul className="space-y-1">
{schedule.tasks.map((task) => (
<li key={task} className="flex items-center space-x-2 text-sm">
<CheckCircle className="h-3 w-3 text-green-500" />
<span>{task}</span>
</li>
))}
</ul>
</div>
))}
</div>
</CardContent>
</Card>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Card>
<CardHeader>
<CardTitle className="text-red-600">Safety Checks</CardTitle>
<CardDescription>
Critical safety inspections that must be performed
</CardDescription>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-sm">
<li className="flex items-start space-x-2">
<AlertTriangle className="h-4 w-4 text-red-500 mt-0.5" />
<span>Emergency stop button functionality</span>
</li>
<li className="flex items-start space-x-2">
<AlertTriangle className="h-4 w-4 text-red-500 mt-0.5" />
<span>Battery connection and voltage levels</span>
</li>
<li className="flex items-start space-x-2">
<AlertTriangle className="h-4 w-4 text-red-500 mt-0.5" />
<span>Wheel and motor mounting security</span>
</li>
<li className="flex items-start space-x-2">
<AlertTriangle className="h-4 w-4 text-red-500 mt-0.5" />
<span>Sensor calibration and alignment</span>
</li>
</ul>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Troubleshooting</CardTitle>
<CardDescription>
Common issues and their solutions
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-3">
<div>
<h5 className="font-medium text-sm">Robot not responding</h5>
<p className="text-xs text-muted-foreground">Check power connection and network connectivity</p>
</div>
<div>
<h5 className="font-medium text-sm">Navigation errors</h5>
<p className="text-xs text-muted-foreground">Recalibrate LiDAR and IMU sensors</p>
</div>
<div>
<h5 className="font-medium text-sm">Slow performance</h5>
<p className="text-xs text-muted-foreground">Check CPU temperature and clear system logs</p>
</div>
</div>
</CardContent>
</Card>
</div>
</TabsContent>
</Tabs>
{/* Navigation Footer */}
<div className="mt-12 pt-8 border-t">
<div className="flex items-center justify-between">
<Link href="/docs/robots">
<Button variant="outline">
<ChevronRight className="mr-2 h-4 w-4 rotate-180" />
Back to Robots
</Button>
</Link>
<div className="flex space-x-2">
<Link href="/docs/robots/unitree-go2">
<Button variant="outline">
Unitree Go2
<ChevronRight className="ml-2 h-4 w-4" />
</Button>
</Link>
</div>
</div>
</div>
</div>
</div>
)
}
