import { BarChart3, FileText, Search, Zap } from 'lucide-react'; import { useRef } from 'react'; import { Head, Link } from '@inertiajs/react'; import { AdminDataTable } from '@/Components/admin/AdminDataTable'; import { AdminStatsGrid, type StatCard } from '@/Components/admin/AdminStatsGrid'; import { ChartErrorBoundary } from '@/Components/admin/ChartErrorBoundary'; import { SortHeader } from '@/Components/admin/SortHeader'; import PageHeader from '@/Components/layout/PageHeader'; import { Badge } from '@/Components/ui/badge'; import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from '@/Components/ui/breadcrumb'; import { ExportButton } from '@/Components/ui/export-button'; import { Input } from '@/Components/ui/input'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/Components/ui/select'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/Components/ui/table'; import { useAdminFilters } from '@/hooks/useAdminFilters'; import { useAdminKeyboardShortcuts } from '@/hooks/useAdminKeyboardShortcuts'; import { useNavigationState } from '@/hooks/useNavigationState'; import AdminLayout from '@/Layouts/AdminLayout'; import { formatRelativeTime } from '@/lib/format'; interface AiDraftRow { id: number; site_id: number | null; site_name: string | null; site_domain: string | null; recommendation_id: number | null; recommendation_action_type: string | null; model_used: string | null; prompt_tokens: number | null; completion_tokens: number | null; status: string | null; publish_status: string | null; created_at: string; } interface PaginatedDrafts { data: AiDraftRow[]; current_page: number; last_page: number; from: number | null; to: number | null; total: number; } interface Stats { total: number; generated_30d: number; published_30d: number; avg_tokens: number; } interface Props { drafts: PaginatedDrafts; filters: { search?: string; site_id?: string; status?: string; sort?: string; dir?: string; }; stats: Stats; } export default function Index({ drafts, filters, stats }: Props) { const { search, setSearch, updateFilter, handleSort, handlePage } = useAdminFilters({ route: 'admin.ai-drafts.index', filters, }); const isNavigating = useNavigationState(); const searchInputRef = useRef(null); const statCards: StatCard[] = [ { title: 'Total Drafts', value: stats.total, icon: FileText }, { title: 'Generated (30d)', value: stats.generated_30d, icon: Zap }, { title: 'Published (30d)', value: stats.published_30d, icon: BarChart3 }, { title: 'Avg Tokens', value: stats.avg_tokens, icon: BarChart3 }, ]; const currentPage = drafts.current_page; const lastPage = drafts.last_page; useAdminKeyboardShortcuts({ onSearch: () => searchInputRef.current?.focus(), onNextPage: currentPage < lastPage ? () => handlePage(currentPage + 1) : undefined, onPrevPage: currentPage > 1 ? () => handlePage(currentPage - 1) : undefined, }); return (

Admin AI Drafts } />

setSearch(e.target.value)} className="pl-9" />

Site Model Status Publish Recommendation {drafts.data.map((draft) => ( {draft.site_id ? ( {draft.site_name ?? '—'} ) : ( — )} {draft.model_used ?? '—'} {draft.prompt_tokens !== null || draft.completion_tokens !== null ? `${draft.prompt_tokens ?? 0} / ${draft.completion_tokens ?? 0}` : '—'} {draft.status ?? '—'} {draft.publish_status ? ( {draft.publish_status} ) : ( — )} {draft.recommendation_action_type ? draft.recommendation_action_type.replace(/_/g, ' ') : '—'} {formatRelativeTime(draft.created_at)} View → ))}

); }