import { Search } from 'lucide-react'; import { useRef } from 'react'; import { Head, Link } from '@inertiajs/react'; import { AdminDataTable } from '@/Components/admin/AdminDataTable'; 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 { getAdminStatusVariant } from '@/lib/adminStatusBadge'; import { formatRelativeTime } from '@/lib/format'; interface SerpSnapshotRow { id: number; site_id: number; site_name: string | null; site_domain: string | null; keyword: string; target_url: string | null; status: string; fetched_at: string | null; expires_at: string | null; created_at: string; } interface PaginatedSnapshots { data: SerpSnapshotRow[]; current_page: number; last_page: number; from: number | null; to: number | null; total: number; } interface Props { snapshots: PaginatedSnapshots; filters: { status: string; search?: string }; } export default function SerpSnapshotsIndex({ snapshots, filters }: Props) { const isNavigating = useNavigationState(); const searchRef = useRef(null); const { search, setSearch, updateFilter, handlePage } = useAdminFilters({ route: route('admin.serp-snapshots.index'), filters, }); const exportParams: Record = {}; if (filters.search) exportParams.search = filters.search; if (filters.status) exportParams.status = filters.status; useAdminKeyboardShortcuts({ onSearch: () => searchRef.current?.focus(), onNextPage: snapshots.current_page < snapshots.last_page ? () => handlePage(snapshots.current_page + 1) : undefined, onPrevPage: snapshots.current_page > 1 ? () => handlePage(snapshots.current_page - 1) : undefined, }); const currentPage = snapshots.current_page; const lastPage = snapshots.last_page; useAdminKeyboardShortcuts({ onNextPage: currentPage < lastPage ? () => handlePage(currentPage + 1) : undefined, onPrevPage: currentPage > 1 ? () => handlePage(currentPage - 1) : undefined, }); return (

Admin SERP Snapshots

setSearch(e.target.value)} className="pl-9 w-52" aria-label="Search SERP snapshots" />

Keyword Site Target URL Status Fetched Expires Created {snapshots.data.map((snapshot) => ( {snapshot.keyword}

{snapshot.site_name}

{snapshot.site_domain}

{snapshot.target_url ?? '—'} {snapshot.status} {snapshot.fetched_at ? formatRelativeTime(snapshot.fetched_at) : '—'} {snapshot.expires_at ? formatRelativeTime(snapshot.expires_at) : '—'} {formatRelativeTime(snapshot.created_at)} View → ))}

); }