import { RefreshCw } from 'lucide-react'; import { useEffect, useRef } from 'react'; import { Head, Link, router, useForm, usePage } from '@inertiajs/react'; import DecayPatternBadge from '@/Components/ContentIntelligence/DecayPatternBadge'; import FreshnessScoreCard from '@/Components/ContentIntelligence/FreshnessScoreCard'; import SiteNav from '@/Components/Navigation/SiteNav'; import { Badge } from '@/Components/ui/badge'; import { Button } from '@/Components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card'; import { EmptyState } from '@/Components/ui/empty-state'; import { Input } from '@/Components/ui/input'; import { Label } from '@/Components/ui/label'; import { LoadingButton } from '@/Components/ui/loading-button'; import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from '@/Components/ui/pagination'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/Components/ui/select'; import { Skeleton } from '@/Components/ui/skeleton'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/Components/ui/table'; import { usePolling } from '@/hooks/usePolling'; import { useSiteKeyboardShortcuts } from '@/hooks/useSiteKeyboardShortcuts'; import DashboardLayout from '@/Layouts/DashboardLayout'; import { trackFilterApplied, trackProductEvent } from '@/lib/analytics'; import { FRESHNESS_VIEWED } from '@/lib/event-catalog'; import { formatDateOnly, formatPercent } from '@/lib/format'; import type { PageProps } from '@/types'; import type { FreshnessIndexPageProps } from '@/types/freshness'; export default function FreshnessIndex({ site, latestRun, recommendations, filters, counts, }: FreshnessIndexPageProps) { const { polling_interval_ms } = usePage().props; useEffect(() => { trackProductEvent(FRESHNESS_VIEWED, { site_id: String(site.id) }); }, [site.id]); // Poll when analysis is in progress usePolling( !!latestRun?.status && ['pending', 'processing'].includes(latestRun.status), polling_interval_ms, ['latestRun', 'recommendations', 'counts'], ); // Form for triggering new analysis const { data, setData, post, processing, errors } = useForm({ analysis_window_start: latestRun?.analysis_window_start ?? '', analysis_window_end: latestRun?.analysis_window_end ?? '', }); const handleTriggerAnalysis = (e: React.FormEvent) => { e.preventDefault(); post(route('freshness.store', site.id)); }; // Handle filter changes const handleFilterChange = (key: string, value: string | undefined) => { if (value) { trackFilterApplied(key, value); } router.get( route('freshness.index', site.id), { ...filters, [key]: value || undefined, }, { preserveState: true, replace: true, }, ); }; // Handle page navigation const handlePage = (page: number) => { router.get( route('freshness.index', site.id), { ...filters, page, }, { preserveState: true, replace: true, }, ); }; // Keyboard shortcuts const firstFilterRef = useRef(null); const currentPage = recommendations?.current_page ?? 1; const lastPage = recommendations?.last_page ?? 1; useSiteKeyboardShortcuts({ onSearch: () => firstFilterRef.current?.click(), onNextPage: currentPage < lastPage ? () => handlePage(currentPage + 1) : undefined, onPrevPage: currentPage > 1 ? () => handlePage(currentPage - 1) : undefined, }); return ( <>

Freshness Watchlist

Track pages losing performance due to staleness

{/* Trigger Analysis Form */} Run Freshness Analysis Detect decay patterns and get refresh recommendations {/* Latest Run Status */} {latestRun && (

{(latestRun.status === 'processing' || latestRun.status === 'pending') && (

Analysis in Progress

Analyzing pages from {latestRun.analysis_window_start} to{' '} {latestRun.analysis_window_end}...

)} {latestRun.status === 'failed' && (

Analysis Failed

The freshness analysis could not be completed. Try again.

)} {latestRun.status === 'completed' && latestRun.summary && ( Latest Analysis Summary Completed on{' '} {latestRun.completed_at ? formatDateOnly(latestRun.completed_at) : 'Unknown'}

Total

{counts.total}

Light Refresh

{counts.light_refresh}

Section Refresh

{counts.section_refresh}

Full Rewrite

{counts.full_rewrite}

Reposition Intent

{counts.reposition_intent}

)}

)} {/* Filters */} {latestRun?.status === 'completed' && recommendations.total > 0 && ( Filters

Action Type

Decay Pattern

Min Confidence

Sort By

{(filters.action_type || filters.decay_pattern || filters.min_confidence) && (

)} )} {/* Recommendations Table */} {!latestRun && ( )} {latestRun && (latestRun.status === 'processing' || latestRun.status === 'pending') && (

)} {latestRun?.status === 'completed' && recommendations.total === 0 && ( )} {latestRun?.status === 'completed' && recommendations.total > 0 && ( <>

Page Decay Pattern Freshness Score Loss Estimate Recommended Action Confidence {recommendations.data.map((rec) => (

{rec.title}

{rec.page_url}

{rec.page_decay_signal && ( )} {rec.page_decay_signal && (

{formatPercent(rec.page_decay_signal.decay_magnitude / 100)}

Current: {Math.round(rec.page_decay_signal.current_clicks)}{' '} clicks/day

)} {rec.action_type .split('_') .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) .join(' ')}

{Math.round(rec.confidence_score * 100)}%

))}

{/* Pagination */} {recommendations.last_page > 1 && (

{recommendations.current_page > 1 && ( )} {Array.from({ length: recommendations.last_page }).map((_, idx) => { const page = idx + 1; if ( page === 1 || page === recommendations.last_page || Math.abs(page - recommendations.current_page) <= 1 ) { return ( {page} ); } else if (Math.abs(page - recommendations.current_page) === 2) { return ( ); } return null; })} {recommendations.current_page < recommendations.last_page && ( )}

)} )}

); } FreshnessIndex.layout = (page: React.ReactNode) => {page};