import { CheckCircle2, ExternalLink, X } from 'lucide-react'; import { useEffect, useState } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import SiteNav from '@/Components/Navigation/SiteNav'; 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, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card'; import DashboardLayout from '@/Layouts/DashboardLayout'; import { trackProductEvent } from '@/lib/analytics'; import { TRAFFIC_ALERT_ACKNOWLEDGED, TRAFFIC_ALERT_DETAIL_VIEWED, TRAFFIC_ALERT_DISMISSED, } from '@/lib/event-catalog'; import { formatDateOnly, formatDateTime, formatNumber } from '@/lib/format'; import { ALERT_STATUS_LABELS as STATUS_LABELS } from '@/lib/status'; import { cn } from '@/lib/utils'; import type { TrafficAlert, SiteBasic } from '@/types'; interface TrafficAlertShowPageProps { site: SiteBasic; alert: TrafficAlert; } const SEVERITY_LABELS: Record = { critical: 'Critical', warning: 'Warning', info: 'Info', }; const SEVERITY_DESCRIPTIONS: Record = { critical: 'Traffic dropped significantly and requires immediate attention. Check for technical issues, algorithmic updates, or recent content changes.', warning: 'A notable trend was detected. Monitor closely over the next 7 days before taking action.', info: 'An unusual pattern was detected but is within normal variance. No action needed unless the trend continues.', }; const ANOMALY_TYPE_LABELS: Record = { sudden_drop: 'Sudden Drop', sustained_decline: 'Sustained Decline', unusual_spike: 'Unusual Spike', }; function getSeverityBadgeVariant(severity: string): 'default' | 'destructive' | 'secondary' { switch (severity) { case 'critical': return 'destructive'; case 'warning': return 'default'; case 'info': return 'secondary'; default: return 'default'; } } function formatDelta(delta: number): string { const sign = delta > 0 ? '+' : ''; return `${sign}${delta.toFixed(1)}%`; } export default function TrafficAlertShow({ site, alert }: TrafficAlertShowPageProps) { const [isAcknowledging, setIsAcknowledging] = useState(false); const [isDismissing, setIsDismissing] = useState(false); useEffect(() => { trackProductEvent(TRAFFIC_ALERT_DETAIL_VIEWED, { site_id: String(site.id), severity: alert.severity, anomaly_type: alert.anomaly_type, }); }, [site.id, alert.id, alert.severity, alert.anomaly_type]); const handleAcknowledge = () => { if (isAcknowledging) return; trackProductEvent(TRAFFIC_ALERT_ACKNOWLEDGED, { site_id: String(site.id), alert_id: String(alert.id), severity: alert.severity, }); setIsAcknowledging(true); router.post( route('alerts.acknowledge', [site.id, alert.id]), {}, { preserveState: false, preserveScroll: true, onFinish: () => setIsAcknowledging(false), }, ); }; const handleDismiss = () => { if (isDismissing) return; trackProductEvent(TRAFFIC_ALERT_DISMISSED, { site_id: String(site.id), alert_id: String(alert.id), severity: alert.severity, }); setIsDismissing(true); router.post( route('alerts.dismiss', [site.id, alert.id]), {}, { preserveState: false, preserveScroll: true, onFinish: () => setIsDismissing(false), }, ); }; const canAcknowledge = alert.status === 'unacknowledged' || alert.status === 'dismissed'; const canDismiss = alert.status === 'unacknowledged' || alert.status === 'acknowledged'; return ( <>

Traffic Alert

{SEVERITY_LABELS[alert.severity]} {ANOMALY_TYPE_LABELS[alert.anomaly_type]} {STATUS_LABELS[alert.status]}
{SEVERITY_DESCRIPTIONS[alert.severity] && (

{SEVERITY_DESCRIPTIONS[alert.severity]}

)}

Detected on {formatDateOnly(alert.created_at, 'Unknown')}

{/* Alert Overview */} Alert Overview Traffic anomaly detected for this page
Anomaly Type
{ANOMALY_TYPE_LABELS[alert.anomaly_type]}
Severity
{SEVERITY_LABELS[alert.severity]}
Status
{STATUS_LABELS[alert.status]}
Detected
{formatDateOnly(alert.created_at, 'Unknown')}
{/* Traffic Metrics */} Traffic Metrics Before and after comparison
{/* Clicks */}
Clicks
{formatNumber(alert.metrics.clicks_before)} →{' '} {formatNumber(alert.metrics.clicks_after)}
{formatDelta(alert.metrics.delta_percent)}
{/* Impressions */} {alert.metrics.impressions_before !== undefined && alert.metrics.impressions_after !== undefined && (
Impressions
{formatNumber(alert.metrics.impressions_before)} →{' '} {formatNumber(alert.metrics.impressions_after)}
)} {/* CTR */} {alert.metrics.ctr_before !== undefined && alert.metrics.ctr_after !== undefined && (
CTR
{alert.metrics.ctr_before.toFixed(2)}% → {alert.metrics.ctr_after.toFixed(2)}%
)} {/* Position */} {alert.metrics.position_before !== undefined && alert.metrics.position_after !== undefined && (
Position
{alert.metrics.position_before.toFixed(1)} →{' '} {alert.metrics.position_after.toFixed(1)}
)}
{/* Actions */}
{canAcknowledge && ( )} {canDismiss && ( )} {alert.analysis_run_id && ( )}
{/* Acknowledgment/Dismissal Info */} {(alert.acknowledged_at || alert.dismissed_at) && (
{alert.acknowledged_at && (
Acknowledged: {formatDateTime(alert.acknowledged_at)}
)} {alert.dismissed_at && (
Dismissed: {formatDateTime(alert.dismissed_at)}
)}
)}
); } TrafficAlertShow.layout = (page: React.ReactNode) => ;