import { toast } from 'sonner'; import { useEffect } from 'react'; import { Head, router } from '@inertiajs/react'; import SiteNav from '@/Components/Navigation/SiteNav'; import ClusterCard from '@/Components/TopicClusters/ClusterCard'; import { Button } from '@/Components/ui/button'; import { EmptyState } from '@/Components/ui/empty-state'; import DashboardLayout from '@/Layouts/DashboardLayout'; import { trackProductEvent } from '@/lib/analytics'; import { TOPIC_CLUSTERS_VIEWED } from '@/lib/event-catalog'; import type { SiteBasic } from '@/types'; interface TopicCluster { id: number; name: string; total_demand: number; coverage_percentage: number; hub_page_url: string | null; metadata: { representative_queries?: string[]; [key: string]: unknown; }; page_count: number; query_count: number; gap_count: number; } interface TopicClusterRun { id: number; status: string; started_at: string | null; completed_at: string | null; summary: Record | null; } interface Props { site: SiteBasic; clusters: TopicCluster[]; latestRun: TopicClusterRun | null; filters: { coverage: string | null; demand: string | null }; counts: { total: number; high_coverage: number; low_coverage: number; }; } export default function TopicClustersIndex({ site, clusters, latestRun, filters, counts }: Props) { useEffect(() => { trackProductEvent(TOPIC_CLUSTERS_VIEWED, { site_id: String(site.id) }); }, [site.id]); const handleRecompute = () => { router.post( route('topic-clusters.recompute', site.id), {}, { onSuccess: () => toast.success('Topic cluster analysis queued.'), }, ); }; const handleFilterByCoverage = (coverage: string | null) => { router.get( route('topic-clusters.index', site.id), { coverage, demand: filters.demand }, { preserveState: true, replace: true }, ); }; const handleFilterByDemand = (demand: string) => { router.get( route('topic-clusters.index', site.id), { coverage: filters.coverage, demand }, { preserveState: true, replace: true }, ); }; return ( <>

Topic Coverage Gaps

{latestRun && }
{!latestRun && ( Run Topic Clustering} /> )} {latestRun && counts.total === 0 && ( )} {latestRun && counts.total > 0 && ( <>
{clusters.map((cluster) => ( ))}
{clusters.length === 0 && ( handleFilterByCoverage(null)}>Clear Filters} /> )} )}
); } TopicClustersIndex.layout = (page: React.ReactNode) => {page};