import { Head, Link } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { ArrowLeft, CheckCircle2, XCircle, RefreshCw } from 'lucide-react'; import { CrmWebhookLog } from '@/types/crm'; import { format } from 'date-fns'; import Heading from '@/components/heading'; import { type BreadcrumbItem } from '@/types'; import { PageHelp } from '@/components/page-help'; import { dashboard } from '@/routes'; interface Props { logs: { data: CrmWebhookLog[]; current_page: number; last_page: number; per_page: number; total: number; }; integration?: { id: number; name: string; }; } export default function Logs({ logs, integration }: Props) { const handleRetry = async (logId: number) => { if (!confirm('Retry this webhook?')) return; try { const response = await fetch(`/api/v1/crm-integrations/logs/${logId}/retry`, { method: 'POST', headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '', }, }); const result = await response.json(); alert(result.success ? '✅ Webhook retried successfully' : '❌ ' + result.message); window.location.reload(); } catch (error) { alert('Failed to retry webhook'); } }; const isSuccess = (log: CrmWebhookLog) => { return log.response_status && log.response_status >= 200 && log.response_status < 300; }; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: dashboard().url }, { title: 'CRM Integrations', href: '/integrations' }, { title: integration ? `${integration.name} Logs` : 'Webhook Logs', href: '' }, ]; const helpSections = [ { title: 'Understanding Logs', content: 'View all webhook delivery attempts with timestamps, status codes, and response data. Green badges indicate successful deliveries (2xx status), red badges show failures.', }, { title: 'Retrying Failed Webhooks', content: 'Click the Retry button on any failed webhook to attempt redelivery. The system will send the same payload to the endpoint again.', }, { title: 'Status Codes', content: '200-299: Success, 400-499: Client errors (check your endpoint), 500-599: Server errors (temporary issues, safe to retry).', }, ]; return (

{/* Header */}

{/* Logs */} {logs.data.length === 0 ? (

No webhook logs yet

) : (

{logs.data.map((log) => (

{isSuccess(log) ? ( ) : ( )} {log.event_type} {log.response_status && ( HTTP {log.response_status} )} {format(new Date(log.triggered_at), 'MMM d, yyyy HH:mm:ss')} {log.crm_integration && ` • ${log.crm_integration.name}`}

{!isSuccess(log) && ( )}

{/* Response */} {log.response_body && (

Response

                        {log.response_body.substring(0, 500)}
                        {log.response_body.length > 500 && '...'}

)} {/* Payload (collapsed) */}

View Payload

                      {JSON.stringify(log.payload, null, 2)}

))}

)} {/* Pagination */} {logs.last_page > 1 && (

{Array.from({ length: logs.last_page }, (_, i) => i + 1).map((page) => ( {page} ))}

)}

); }