'use client'
interface Activity {
id: string
type: 'workflow' | 'api' | 'system' | 'user'
message: string
timestamp: string
status: 'success' | 'warning' | 'error' | 'info'
}
interface RecentActivityProps {
data?: Activity[]
}
const getActivityIcon = (type: string) => {
switch (type) {
case 'workflow':
return '🔄'
case 'api':
return '🔌'
case 'system':
return '⚙️'
case 'user':
return '👤'
default:
return '📝'
}
}
const getStatusColor = (status: string) => {
switch (status) {
case 'success':
return 'text-green-600 bg-green-50'
case 'warning':
return 'text-yellow-600 bg-yellow-50'
case 'error':
return 'text-red-600 bg-red-50'
case 'info':
default:
return 'text-blue-600 bg-blue-50'
}
}
export default function RecentActivity({ data }: RecentActivityProps) {
const mockData = data || [
{
id: '1',
type: 'workflow' as const,
message: 'GitHub PR automation workflow completed successfully',
timestamp: '2 minutes ago',
status: 'success' as const,
},
{
id: '2',
type: 'api' as const,
message: 'Notion API rate limit warning',
timestamp: '5 minutes ago',
status: 'warning' as const,
},
{
id: '3',
type: 'system' as const,
message: 'Database connection restored',
timestamp: '15 minutes ago',
status: 'success' as const,
},
{
id: '4',
type: 'user' as const,
message: 'New workflow "Daily Sync" created',
timestamp: '1 hour ago',
status: 'info' as const,
},
{
id: '5',
type: 'workflow' as const,
message: 'Calendar integration failed: Authentication required',
timestamp: '2 hours ago',
status: 'error' as const,
},
]
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">
Recent Activity
</h3>
<button className="text-sm text-primary-600 hover:text-primary-500">
View all
</button>
</div>
<div className="flow-root">
<ul className="-mb-8">
{mockData.map((activity, index) => (
<li key={activity.id}>
<div className="relative pb-8">
{index !== mockData.length - 1 && (
<span
className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
aria-hidden="true"
/>
)}
<div className="relative flex space-x-3">
<div>
<span className="h-8 w-8 rounded-full bg-gray-100 flex items-center justify-center ring-8 ring-white">
<span className="text-lg">{getActivityIcon(activity.type)}</span>
</span>
</div>
<div className="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
<div>
<p className="text-sm text-gray-900">{activity.message}</p>
<div className="mt-2">
<span
className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${getStatusColor(activity.status)}`}
>
{activity.status}
</span>
</div>
</div>
<div className="text-right text-sm whitespace-nowrap text-gray-500">
<time>{activity.timestamp}</time>
</div>
</div>
</div>
</div>
</li>
))}
</ul>
</div>
</div>
</div>
)
}
