import { ArrowLeft, TrendingUp } from 'lucide-react'; import { Head, Link } from '@inertiajs/react'; 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 AdminLayout from '@/Layouts/AdminLayout'; import { formatDateTime, formatNumber } from '@/lib/format'; interface KeywordOpportunityDetail { id: number; opportunity_type: string; query: string; page_url: string | null; position: number | null; impressions: number | null; clicks: number | null; ctr: number | null; expected_ctr: number | null; impact_score: number | null; confidence_score: number | null; lifecycle_status: string | null; metadata: Record | null; status: string | null; dismissed_at: string | null; site_id: number | null; site_name: string | null; site_domain: string | null; keyword_opportunity_run_id: number | null; created_at: string; } interface Props { opportunity: KeywordOpportunityDetail; } const typeVariant = (type: string): 'default' | 'secondary' | 'outline' => { if (type === 'striking_distance' || type === 'rising_query') return 'default'; if (type === 'ctr_gap') return 'secondary'; return 'outline'; }; export default function AdminKeywordOpportunityShow({ opportunity }: Props) { const formatPercent = (val: number | null) => val != null ? `${(val * 100).toFixed(2)}%` : '—'; return (
Admin Keyword Opportunities #{opportunity.id}

{opportunity.query}

{opportunity.opportunity_type.replace(/_/g, ' ')} {opportunity.lifecycle_status && ( {opportunity.lifecycle_status} )}
{opportunity.page_url && (

{opportunity.page_url}

)}
Site {opportunity.site_id ? (

Site

{opportunity.site_name ?? '—'} {opportunity.site_domain && (

{opportunity.site_domain}

)}
) : (

No site

)}

Created

{formatDateTime(opportunity.created_at)}

{opportunity.dismissed_at && (

Dismissed

{formatDateTime(opportunity.dismissed_at)}

)} GSC Metrics {[ { label: 'Position', value: opportunity.position != null ? Number(opportunity.position).toFixed(1) : '—' }, { label: 'Impressions', value: opportunity.impressions != null ? formatNumber(opportunity.impressions) : '—' }, { label: 'Clicks', value: opportunity.clicks != null ? formatNumber(opportunity.clicks) : '—' }, { label: 'CTR', value: formatPercent(opportunity.ctr) }, { label: 'Expected CTR', value: formatPercent(opportunity.expected_ctr) }, { label: 'Impact Score', value: opportunity.impact_score != null ? Number(opportunity.impact_score).toFixed(2) : '—' }, { label: 'Confidence', value: opportunity.confidence_score != null ? Number(opportunity.confidence_score).toFixed(2) : '—' }, ].map(({ label, value }) => (
{label} {value}
))} {opportunity.metadata && Object.keys(opportunity.metadata).length > 0 && ( Metadata 
                  {JSON.stringify(opportunity.metadata, null, 2)}
)}
); }