import { Head, router } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import Heading from '@/components/heading'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '@/components/ui/alert-dialog'; import { Activity, CheckCircle2, XCircle, Clock, Trash2, RefreshCw } from 'lucide-react'; import { dashboard } from '@/routes'; import { type BreadcrumbItem } from '@/types'; import { toast } from 'sonner'; import { useState } from 'react'; interface CronJob { name: string; is_healthy: boolean; last_run: { completed_at?: string; completed_at_human?: string; execution_time_ms?: number; jobs_processed?: number; } | null; stats?: { total_runs?: number; completed?: number; failed?: number; success_rate?: number; avg_execution_time_ms?: number; total_jobs_processed?: number; }; recent_failures: Array<{ started_at: string; started_at_human: string; output: string; }>; } interface RecentLog { id: number; job_name: string; status: 'started' | 'completed' | 'failed'; started_at: string; started_at_human: string; completed_at: string | null; execution_time_ms: number | null; jobs_processed: number | null; output: string | null; } interface Props { jobs: CronJob[]; recent_logs: RecentLog[]; hours: number; } export default function CronMonitor({ jobs, recent_logs, hours }: Props) { const [showCleanupDialog, setShowCleanupDialog] = useState(false); const handleCleanup = () => { setShowCleanupDialog(true); }; const confirmCleanup = () => { router.post('/admin/cron-monitor/cleanup', { days: 7 }, { onSuccess: () => { toast.success('Old logs cleaned up successfully'); setShowCleanupDialog(false); }, onError: () => { toast.error('Failed to cleanup logs'); } }); }; const handleRefresh = () => { router.reload({ onSuccess: () => { toast.success('Data refreshed'); } }); }; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: dashboard().url, }, { title: 'Cron Monitor', href: '/admin/cron-monitor', }, ]; return (

{/* Job Status Cards */}

{jobs.map((job) => (

{job.name} {job.is_healthy ? ( <> Healthy ) : ( <> Issues )}

{job.last_run ? ( Last run: {job.last_run.completed_at_human} ) : ( Never executed )}

{/* Last Run Details */} {job.last_run && (

Execution Time

{job.last_run.execution_time_ms || 0}ms

Jobs Processed

{job.last_run.jobs_processed || 0}

)} {/* Statistics */}

Last {hours} Hours

Total Runs

{job.stats?.total_runs || 0}

Success Rate

{job.stats?.success_rate || 0}%

Failed

{job.stats?.failed || 0}

{job.name === 'queue:work' && (

Total Jobs Processed

{job.stats?.total_jobs_processed || 0}

)}

Avg Execution Time

{job.stats?.avg_execution_time_ms || 0}ms

{/* Recent Failures */} {job.recent_failures.length > 0 && (

Recent Failures

{job.recent_failures.slice(0, 3).map((failure, idx) => (

{failure.started_at_human}

{failure.output}

))}

)}

))}

{/* Recent Activity Timeline */} Recent Activity Last 50 executions

{recent_logs.map((log) => (

{log.status === 'completed' ? ( ) : log.status === 'failed' ? ( ) : ( )}

{log.job_name}

{log.started_at_human}

{log.execution_time_ms !== null && ( {log.execution_time_ms}ms )} {log.jobs_processed !== null && log.jobs_processed > 0 && ( {log.jobs_processed} jobs )} {log.status}

))}

{/* Cleanup Confirmation Dialog */} Clean Up Old Logs? This will permanently delete all cron job logs older than 7 days. This action cannot be undone. Cancel Delete Old Logs ); }