import { Search } from 'lucide-react'; import { useEffect, 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 { 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 { trackProductEvent } from '@/lib/analytics'; import { ADMIN_FINDINGS_VIEWED } from '@/lib/event-catalog'; import { formatRelativeTime } from '@/lib/format'; import type { PaginatedResponse } from '@/types'; interface FindingRow { id: number; analysis_run_id: number; site_name: string | null; site_domain: string | null; dimension_type: string; created_at: string; } interface Props { findings: PaginatedResponse; filters: { search?: string; dimension_type?: string; sort?: string; dir?: string; per_page?: number; }; } const DIMENSION_TYPES = ['overall', 'country', 'device', 'search_type']; export default function AdminFindingsIndex({ findings, filters }: Props) { useEffect(() => { trackProductEvent(ADMIN_FINDINGS_VIEWED, { total_findings: findings.total ?? findings.data.length, }); // intentional: fire-once on mount // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const searchInputRef = useRef(null); const { search, setSearch, updateFilter, handleSort, handlePage } = useAdminFilters({ route: '/admin/findings', filters, }); const isNavigating = useNavigationState(); const hasFilters = !!(filters.search || filters.dimension_type); const exportParams: Record = {}; if (filters.search) exportParams.search = filters.search; if (filters.dimension_type) exportParams.dimension_type = filters.dimension_type; useAdminKeyboardShortcuts({ onSearch: () => searchInputRef.current?.focus(), onNextPage: findings.current_page < findings.last_page ? () => handlePage(findings.current_page + 1) : undefined, onPrevPage: findings.current_page > 1 ? () => handlePage(findings.current_page - 1) : undefined, }); return (
Admin Findings
} />
Finding Filters setSearch(e.target.value)} className="max-w-sm" aria-label="Search findings" />
updateFilter({ per_page: perPage })} />
ID Analysis Run Site Dimension {findings.data.map((finding) => ( #{finding.id} #{finding.analysis_run_id}
{finding.site_name ?? '—'}
{finding.site_domain && (
{finding.site_domain}
)} {finding.dimension_type} {formatRelativeTime(finding.created_at)} View → ))}
); }