import { Database, Search } from 'lucide-react'; import { useRef } from 'react'; import { Head, Link } from '@inertiajs/react'; import { AdminDataTable } from '@/Components/admin/AdminDataTable'; import { ChartErrorBoundary } from '@/Components/admin/ChartErrorBoundary'; import { PerPageSelector } from '@/Components/admin/PerPageSelector'; import { SortHeader } from '@/Components/admin/SortHeader'; import PageHeader from '@/Components/layout/PageHeader'; 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 { 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 { formatNumber } from '@/lib/format'; import type { PaginatedResponse } from '@/types'; interface GscMetricRow { id: number; site_id: number; site_name: string | null; site_domain: string | null; date: string; page_url: string; clicks: number; impressions: number; ctr: number; position: number; } interface Stats { total_rows: number; sites_with_data: number; date_min: string | null; date_max: string | null; } interface Props { metrics: PaginatedResponse; stats: Stats; filters: { search?: string; date_from?: string; date_to?: string; sort?: string; dir?: string; per_page?: number; }; } export default function AdminGscMetricsIndex({ metrics, stats, filters }: Props) { const searchInputRef = useRef(null); const { search, setSearch, updateFilter, handleSort, handlePage } = useAdminFilters({ route: '/admin/gsc-metrics', filters, }); const isNavigating = useNavigationState(); const exportParams: Record = {}; if (filters.search) exportParams.search = filters.search; if (filters.date_from) exportParams.date_from = filters.date_from; if (filters.date_to) exportParams.date_to = filters.date_to; useAdminKeyboardShortcuts({ onSearch: () => searchInputRef.current?.focus(), onNextPage: metrics.current_page < metrics.last_page ? () => handlePage(metrics.current_page + 1) : undefined, onPrevPage: metrics.current_page > 1 ? () => handlePage(metrics.current_page - 1) : undefined, }); return (
Admin GSC Page Metrics
} />
Total Rows

{formatNumber(stats.total_rows)}

Sites With Data

{stats.sites_with_data}

Earliest Date

{stats.date_min ?? '—'}

Latest Date

{stats.date_max ?? '—'}

GSC Metric Filters setSearch(e.target.value)} className="max-w-sm" aria-label="Search GSC metrics" /> updateFilter({ date_from: e.target.value || undefined })} className="w-[160px]" aria-label="Filter from date" /> updateFilter({ date_to: e.target.value || undefined })} className="w-[160px]" aria-label="Filter to date" />
updateFilter({ per_page: perPage })} />
Site Page URL {metrics.data.map((row) => (
{row.site_name ?? '—'}
{row.site_domain && (
{row.site_domain}
)} {row.date} {row.page_url} {formatNumber(row.clicks)} {formatNumber(row.impressions)} {row.ctr}% {row.position} ))}
); }