'use client'
import { PlayIcon, PauseIcon, StopIcon } from '@heroicons/react/24/outline'
import { clsx } from 'clsx'
interface Workflow {
id: string
name: string
status: 'running' | 'paused' | 'stopped' | 'completed' | 'failed'
progress: number
lastRun: string
nextRun?: string
}
interface WorkflowOverviewProps {
data?: {
active: number
completed: number
failed: number
workflows: Workflow[]
}
}
const statusColors = {
running: 'bg-blue-100 text-blue-800',
paused: 'bg-yellow-100 text-yellow-800',
stopped: 'bg-gray-100 text-gray-800',
completed: 'bg-green-100 text-green-800',
failed: 'bg-red-100 text-red-800',
}
const statusIcons = {
running: PlayIcon,
paused: PauseIcon,
stopped: StopIcon,
completed: PlayIcon,
failed: StopIcon,
}
export default function WorkflowOverview({ data }: WorkflowOverviewProps) {
const mockData = data || {
active: 5,
completed: 12,
failed: 1,
workflows: [
{
id: 'wf-1',
name: 'GitHub PR Automation',
status: 'running' as const,
progress: 75,
lastRun: '2 minutes ago',
nextRun: 'In 30 minutes'
},
{
id: 'wf-2',
name: 'Daily Notion Sync',
status: 'completed' as const,
progress: 100,
lastRun: '1 hour ago',
nextRun: 'Tomorrow at 9:00 AM'
},
{
id: 'wf-3',
name: 'Calendar Integration',
status: 'failed' as const,
progress: 45,
lastRun: '3 hours ago',
},
]
}
return (
<div className="bg-white overflow-hidden shadow rounded-lg">
<div className="p-6">
<div className="flex items-center justify-between mb-6">
<h3 className="text-lg leading-6 font-medium text-gray-900">
Workflow Overview
</h3>
<button className="text-sm text-primary-600 hover:text-primary-500">
View all
</button>
</div>
{/* Stats */}
<div className="grid grid-cols-3 gap-4 mb-6">
<div className="text-center">
<div className="text-2xl font-bold text-blue-600">{mockData.active}</div>
<div className="text-sm text-gray-500">Active</div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-green-600">{mockData.completed}</div>
<div className="text-sm text-gray-500">Completed</div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-red-600">{mockData.failed}</div>
<div className="text-sm text-gray-500">Failed</div>
</div>
</div>
{/* Workflow List */}
<div className="space-y-4">
{mockData.workflows.map((workflow) => {
const StatusIcon = statusIcons[workflow.status]
return (
<div
key={workflow.id}
className="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50"
>
<div className="flex items-center space-x-4">
<div className="flex-shrink-0">
<StatusIcon className="h-5 w-5 text-gray-400" />
</div>
<div>
<h4 className="text-sm font-medium text-gray-900">
{workflow.name}
</h4>
<div className="flex items-center space-x-2 mt-1">
<span
className={clsx(
'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium',
statusColors[workflow.status]
)}
>
{workflow.status}
</span>
<span className="text-xs text-gray-500">
Last run: {workflow.lastRun}
</span>
</div>
</div>
</div>
<div className="flex items-center space-x-4">
{workflow.status === 'running' && (
<div className="w-32">
<div className="flex justify-between text-xs text-gray-500 mb-1">
<span>Progress</span>
<span>{workflow.progress}%</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className="bg-blue-600 h-2 rounded-full"
style={{ width: `${workflow.progress}%` }}
></div>
</div>
</div>
)}
{workflow.nextRun && (
<div className="text-xs text-gray-500">
Next: {workflow.nextRun}
</div>
)}
<button className="text-sm text-primary-600 hover:text-primary-500">
View
</button>
</div>
</div>
)
})}
</div>
</div>
</div>
)
}
