import { BarChart2, Search, TrendingUp } 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 { 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 KeywordOpportunityRow { id: number; site_id: number | null; site_name: string | null; site_domain: string | null; opportunity_type: string; query: string; page_url: string | null; impact_score: string | null; lifecycle_status: string | null; created_at: string; } interface PaginatedOpportunities { data: KeywordOpportunityRow[]; current_page: number; last_page: number; from: number | null; to: number | null; total: number; } interface Stats { total: number; striking_distance: number; ctr_gap: number; rising_query: number; } interface Props { opportunities: PaginatedOpportunities; filters: { opportunity_type: string; lifecycle_status: string; search?: string; sort?: string; dir?: string }; stats: Stats; } const opportunityTypeVariant = (type: string): 'default' | 'secondary' | 'outline' => { switch (type) { case 'striking_distance': return 'default'; case 'ctr_gap': return 'secondary'; case 'rising_query': return 'default'; default: return 'outline'; } }; export default function KeywordOpportunitiesIndex({ opportunities, filters, stats }: Props) { const isNavigating = useNavigationState(); const searchRef = useRef(null); const { search, setSearch, updateFilter, handleSort, handlePage } = useAdminFilters({ route: route('admin.keyword-opportunities.index'), filters, }); const statCards: StatCard[] = [ { title: 'Total', value: stats.total, icon: TrendingUp }, { title: 'Striking Distance', value: stats.striking_distance, icon: BarChart2 }, { title: 'CTR Gap', value: stats.ctr_gap, icon: BarChart2 }, { title: 'Rising Queries', value: stats.rising_query, icon: TrendingUp }, ]; useAdminKeyboardShortcuts({ onSearch: () => searchRef.current?.focus(), onNextPage: opportunities.current_page < opportunities.last_page ? () => handlePage(opportunities.current_page + 1) : undefined, onPrevPage: opportunities.current_page > 1 ? () => handlePage(opportunities.current_page - 1) : undefined, }); const currentPage = opportunities.current_page; const lastPage = opportunities.last_page; useAdminKeyboardShortcuts({ onNextPage: currentPage < lastPage ? () => handlePage(currentPage + 1) : undefined, onPrevPage: currentPage > 1 ? () => handlePage(currentPage - 1) : undefined, }); return (

Admin Keyword Opportunities

} />

setSearch(e.target.value)} className="pl-9 w-48" aria-label="Search keyword opportunities" />

Query Type Site Page URL Lifecycle {opportunities.data.map((opp) => ( {opp.query} {opp.opportunity_type.replace(/_/g, ' ')}

{opp.site_name ?? '—'}

{opp.site_domain}

{opp.page_url ?? '—'} {opp.impact_score !== null ? Number(opp.impact_score).toFixed(2) : '—'} {opp.lifecycle_status ? ( {opp.lifecycle_status} ) : ( — )} {formatRelativeTime(opp.created_at)} View → ))}

); }