import { toast } from 'sonner'; import { useCallback, useState } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import PageHeader from '@/Components/layout/PageHeader'; import { Badge } from '@/Components/ui/badge'; import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from '@/Components/ui/breadcrumb'; import { Button } from '@/Components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/Components/ui/card'; import { ConfirmDialog } from '@/Components/ui/confirm-dialog'; import { EmptyState } from '@/Components/ui/empty-state'; import { Skeleton } from '@/Components/ui/skeleton'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/Components/ui/table'; import AdminLayout from '@/Layouts/AdminLayout'; import { formatRelativeTime } from '@/lib/format'; import type { AdminSystemProps, FailedJob } from '@/types/admin'; export default function AdminSystem({ system }: AdminSystemProps) { const [failedJobs, setFailedJobs] = useState([]); const [isExpanded, setIsExpanded] = useState(false); const [isLoading, setIsLoading] = useState(false); const [retrying, setRetrying] = useState(null); const [deleting, setDeleting] = useState(null); const [confirmingDelete, setConfirmingDelete] = useState(null); const [flushCacheOpen, setFlushCacheOpen] = useState(false); const fetchFailedJobs = useCallback(() => { setIsLoading(true); fetch(route('admin.system.failed-jobs'), { headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' }, credentials: 'same-origin', }) .then((res) => { if (!res.ok) { throw new Error(`HTTP ${res.status}`); } return res.json(); }) .then((data: FailedJob[]) => { setFailedJobs(data); setIsLoading(false); }) .catch(() => { setFailedJobs([]); setIsLoading(false); }); }, []); const toggleExpanded = () => { const next = !isExpanded; setIsExpanded(next); if (next) { fetchFailedJobs(); } }; const handleRetry = (uuid: string) => { setRetrying(uuid); router.post( route('admin.system.failed-jobs.retry', { uuid }), {}, { preserveScroll: true, onSuccess: () => toast.success('Job queued for retry.'), onFinish: () => { setRetrying(null); fetchFailedJobs(); }, }, ); }; const handleDelete = (uuid: string) => { setDeleting(uuid); router.delete(route('admin.system.failed-jobs.delete', { uuid }), { preserveScroll: true, onSuccess: () => toast.success('Failed job deleted.'), onFinish: () => { setDeleting(null); setConfirmingDelete(null); fetchFailedJobs(); }, }); }; const failedCount = system.queue.failed_jobs; return (

Admin System Info

{/* Runtime */} Runtime

PHP {system.php_version}

Laravel {system.laravel_version}

Node.js {system.node_version ?? ( Not available )}

{/* Server */} Server

OS {system.server.os}

Server Software {system.server.server_software}

{/* Database */} Database

Driver {system.database.driver}

Version {system.database.version ?? ( Unknown )}

{/* Queue */} Queue

Driver {system.queue.driver}

Pending Jobs {system.queue.pending_jobs !== null ? system.queue.pending_jobs : 'N/A'}

Failed Jobs {failedCount !== null ? ( failedCount > 0 ? ( ) : ( failedCount ) ) : ( 'N/A' )}

{/* Failed Jobs Table */} {isExpanded && ( Failed Jobs {isLoading && failedJobs.length === 0 ? (

{Array.from({ length: 3 }).map((_, i) => (

))}

) : failedJobs.length === 0 ? ( ) : (

Job Queue Exception Failed At Actions {failedJobs.map((job) => ( {job.job_name} {job.queue} {job.exception} {formatRelativeTime(job.failed_at)} ))}

)} )} {/* Cache Management */} Cache Management

Admin Cache

Clears all cached admin metrics and dashboard data. Data will be reloaded from the database on the next page view.

{/* Packages */} Key Packages {system.packages.length === 0 ? ( ) : (

Package Version {system.packages.map((pkg) => ( {pkg.name} {pkg.version} ))}

)}

{ if (!open) setConfirmingDelete(null); }} title="Delete failed job" description="Delete this failed job? This cannot be undone." variant="destructive" confirmLabel="Delete" onConfirm={() => { if (confirmingDelete) handleDelete(confirmingDelete); }} /> { router.post(route('admin.system.flush-cache'), {}, { preserveScroll: true, onFinish: () => setFlushCacheOpen(false), }); }} /> ); }