import { route } from 'ziggy-js'; import { FormEvent, useMemo, useState } from 'react'; import { Head, Link, router, usePage } from '@inertiajs/react'; import InertiaPagination from '@/Components/Shared/InertiaPagination'; import DashboardLayout from '@/Layouts/DashboardLayout'; interface PostRef { id: number | null; title: string | null; url: string | null; } interface Opportunity { id: number; source: PostRef; target: PostRef; relevance_score: number; suggested_anchor: string; target_terms: Array<{ term: string; score: number }>; status: 'pending' | 'applied' | 'dismissed'; applied_at: string | null; dismissed_at: string | null; } interface PaginatedOpportunities { data: Opportunity[]; links: Array<{ url: string | null; label: string; active: boolean }>; current_page: number; last_page: number; total: number; } interface PageProps { site: { id: number; name: string; domain: string }; opportunities: PaginatedOpportunities; counts: { pending: number; applied: number; dismissed: number }; filters: { status: string; min_relevance: number; search: string }; [key: string]: unknown; } type StatusFilter = 'pending' | 'applied' | 'dismissed'; const STATUS_TABS: StatusFilter[] = ['pending', 'applied', 'dismissed']; export default function LinkOpportunitiesIndex() { const { site, opportunities, counts, filters } = usePage().props; const [search, setSearch] = useState(filters.search ?? ''); const [minRelevance, setMinRelevance] = useState( filters.min_relevance ? String(filters.min_relevance) : '', ); const hasAny = useMemo( () => counts.pending + counts.applied + counts.dismissed > 0, [counts], ); const applyFilters = (overrides: Partial = {}) => { router.get( route('sites.link-opportunities.index', site.id), { status: overrides.status ?? filters.status, min_relevance: overrides.min_relevance ?? minRelevance, search: overrides.search ?? search, }, { preserveState: true, preserveScroll: true, replace: true }, ); }; const onSearchSubmit = (event: FormEvent) => { event.preventDefault(); applyFilters({ search }); }; const onStatusClick = (next: StatusFilter) => { applyFilters({ status: next }); }; const onUpdateStatus = (opportunity: Opportunity, status: StatusFilter) => { router.patch( route('sites.link-opportunities.update', [site.id, opportunity.id]), { status }, { preserveScroll: true, preserveState: true }, ); }; const onBuild = () => { router.post( route('sites.link-opportunities.build', site.id), {}, { preserveScroll: true }, ); }; return (

Internal Link Opportunities

Targeted link suggestions across pages on {site.domain}.

{STATUS_TABS.map((tab) => { const active = filters.status === tab; return ( ); })}
setSearch(e.target.value)} placeholder="Search source or target title…" className="rounded-md border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100" /> setMinRelevance(e.target.value)} onBlur={() => applyFilters({ min_relevance: Number(minRelevance) || 0 })} placeholder="Min relevance" className="w-40 rounded-md border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100" />
{!hasAny ? (

No link opportunities yet

Run analysis to discover specific internal-link suggestions between pages on this site.

) : (
{opportunities.data.map((opportunity) => ( ))} {opportunities.data.length === 0 && ( )}
Source Target Suggested anchor Relevance Actions
{opportunity.source.url ? ( {opportunity.source.title ?? 'Untitled'} ) : ( {opportunity.source.title ?? 'Untitled'} )} {opportunity.target.url ? ( {opportunity.target.title ?? 'Untitled'} ) : ( {opportunity.target.title ?? 'Untitled'} )} {opportunity.suggested_anchor} {(opportunity.relevance_score * 100).toFixed(0)}% {opportunity.status === 'pending' ? (
) : ( )}
No opportunities match the current filters.
{opportunities.last_page > 1 && (
)}
)}
); }