import { Network } from 'lucide-react'; import { useRef } from 'react'; import { Head, Link } from '@inertiajs/react'; import { AdminDataTable } from '@/Components/admin/AdminDataTable'; 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 { formatRelativeTime, formatNumber } from '@/lib/format'; import type { PaginatedResponse } from '@/types'; interface TopicClusterRow { id: number; name: string; site_name: string | null; site_domain: string | null; topic_cluster_run_id: number; total_demand: number; coverage_percentage: number | null; hub_page_url: string | null; created_at: string; } interface Props { clusters: PaginatedResponse; filters: { search?: string; run_id?: string; sort?: string; dir?: string }; } export default function AdminTopicClustersIndex({ clusters, filters }: Props) { const searchInputRef = useRef(null); const { search, setSearch, handleSort, handlePage } = useAdminFilters({ route: '/admin/topic-clusters', filters, }); const isNavigating = useNavigationState(); const exportParams: Record = {}; if (filters.search) exportParams.search = filters.search; if (filters.run_id) exportParams.run_id = filters.run_id; useAdminKeyboardShortcuts({ onSearch: () => searchInputRef.current?.focus() }); return (
Admin Topic Cluster Runs Topic Clusters
} />
Filters setSearch(e.target.value)} className="max-w-sm" aria-label="Search topic clusters" />
ID Cluster Name Site Run Hub URL {clusters.data.map((cluster) => ( #{cluster.id}
{cluster.name}
{cluster.site_name ?? '—'}
{cluster.site_domain &&
{cluster.site_domain}
} #{cluster.topic_cluster_run_id} {formatNumber(cluster.total_demand)} {cluster.coverage_percentage !== null ? `${cluster.coverage_percentage.toFixed(1)}%` : '—'} {cluster.hub_page_url ?? '—'} {formatRelativeTime(cluster.created_at)} ))}
); }