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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { RefreshCw, AlertTriangle, Clock, FileText } from 'lucide-react'; import { dashboard } from '@/routes'; import { type BreadcrumbItem } from '@/types'; import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'; import { format } from 'date-fns'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { useState } from 'react'; interface ErrorLog { sid: string; error_code: string; log_level: string; alert_text: string; request_method: string | null; request_url: string | null; request_variables: string | null; response_body: string | null; response_headers: string | null; service_sid: string | null; resource_sid: string | null; date_created: string | null; date_generated: string | null; date_updated: string | null; } interface Props { errorLogs: ErrorLog[]; count?: number; limit?: number; error?: string; } const logLevelColors: Record = { error: 'destructive', warning: 'default', notice: 'secondary', }; export default function ErrorLogs({ errorLogs = [], count = 0, limit = 10, error }: Props) { const [selectedLog, setSelectedLog] = useState(null); const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: dashboard().url }, { title: 'Error Logs', href: '/admin/error-logs', }, ]; const handleRefresh = () => { router.reload(); }; return (

{error && ( Error Loading Logs {error} )}

Total Errors

{count}

Last {limit} alerts

Data Source

Live

Twilio Monitor API

Auto Refresh

Manual

Click refresh to update

Error Details Showing the latest {limit} error alerts from your Twilio account {errorLogs.length === 0 ? (

No Error Logs Found

{error ? 'Unable to fetch error logs. Please check your Twilio configuration.' : 'Great! There are no recent errors in your Twilio account.'}

) : (

Error Code Level Alert Message Resource SID Date Details {errorLogs.map((log) => ( {log.error_code} {log.log_level}

{log.alert_text}

{log.resource_sid ? ( {log.resource_sid} ) : ( - )} {log.date_created ? (

{format(new Date(log.date_created), 'MMM dd, HH:mm')}

) : ( - )} ))}

)} {errorLogs.length > 0 && ( About Error Logs These logs are fetched directly from Twilio's Monitor API and are not stored in your database. Refresh this page to get the latest errors. For detailed error code documentation, visit{' '} Twilio Error Codes Documentation . )}

{/* Error Details Modal */} ); }

No Error Logs Found

Alert Message

Request Details

Response Details