import { FileText, Lightbulb } from 'lucide-react'; import { Head, Link } 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 { Card, CardContent, CardHeader, CardTitle } from '@/Components/ui/card'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/Components/ui/table'; import AdminLayout from '@/Layouts/AdminLayout'; import { formatDate, formatRelativeTime, formatNumber } from '@/lib/format'; interface FindingMetrics { clicks?: number; impressions?: number; ctr?: number; position?: number; } interface FindingDetail { id: number; dimension_type: string; metrics_before: FindingMetrics | null; metrics_after: FindingMetrics | null; } interface AiDraftRow { id: number; status: string; model_used: string | null; prompt_tokens: number | null; completion_tokens: number | null; created_at: string; } interface RecommendationDetail { id: number; site_id: number | null; site_name: string | null; site_domain: string | null; analysis_run_id: number | null; page_url: string; action_type: string; impact_score: string | number; lifecycle_status: string; roi_performance_multiplier: number | null; finding: FindingDetail | null; ai_drafts: AiDraftRow[]; created_at: string; } interface Props { recommendation: RecommendationDetail; } const lifecycleVariant = (status: string): 'default' | 'secondary' | 'outline' | 'destructive' | 'success' => { switch (status) { case 'applied': case 'tracking': return 'success'; case 'approved': return 'default'; case 'rejected': return 'destructive'; case 'reviewed': return 'secondary'; default: return 'outline'; } }; function MetricRow({ label, value }: { label: string; value: number | undefined }) { if (value === undefined || value === null) return null; return (
{label} {typeof value === 'number' && value < 1 ? (value * 100).toFixed(2) + '%' : formatNumber(value)}
); } export default function RecommendationsShow({ recommendation }: Props) { return (
Admin Recommendations Recommendation #{recommendation.id} View as user → ) } />
Details

Site

{recommendation.site_id ? ( {recommendation.site_name ?? '—'} ) : ( — )} {recommendation.site_domain && (

{recommendation.site_domain}

)}

Action Type

{recommendation.action_type.replace(/_/g, ' ')}

Lifecycle Status

{recommendation.lifecycle_status}

Impact Score

{recommendation.impact_score}

{recommendation.roi_performance_multiplier !== null && (

ROI Multiplier

{recommendation.roi_performance_multiplier}×

)}

Created

{formatDate(recommendation.created_at)}

{recommendation.analysis_run_id && (

Analysis Run

#{recommendation.analysis_run_id}

)} {recommendation.finding && ( Traffic Finding

Dimension

{recommendation.finding.dimension_type?.replace(/_/g, ' ') ?? '—'}

{recommendation.finding.metrics_before && (

Before

)} {recommendation.finding.metrics_after && (

After

)} )}
AI Drafts
{recommendation.ai_drafts.length === 0 ? (

No drafts generated

No AI drafts have been generated for this recommendation yet.

) : ( ID Status Model Tokens Created {recommendation.ai_drafts.map((draft) => ( #{draft.id} {draft.status} {draft.model_used ?? '—'} {formatNumber((draft.prompt_tokens ?? 0) + (draft.completion_tokens ?? 0))} {formatRelativeTime(draft.created_at)} View → ))}
)}
); }