import { Download, Filter } from 'lucide-react'; import { useEffect } from 'react'; import { Head, Link, usePage } from '@inertiajs/react'; import { FeatureGateTeaser } from '@/Components/billing/FeatureGateTeaser'; import BrandedHeader from '@/Components/BrandedHeader'; import PageHeader from '@/Components/layout/PageHeader'; import SiteNav from '@/Components/Navigation/SiteNav'; import RecommendationRoiTable from '@/Components/Roi/RecommendationRoiTable'; import RoiSummaryCard from '@/Components/Roi/RoiSummaryCard'; import RoiTimelineChart from '@/Components/Roi/RoiTimelineChart'; import { Button } from '@/Components/ui/button'; import { EmptyState } from '@/Components/ui/empty-state'; import DashboardLayout from '@/Layouts/DashboardLayout'; import { trackProductEvent } from '@/lib/analytics'; import { FEATURE_USED, ROI_DASHBOARD_VIEWED } from '@/lib/event-catalog'; import { cn } from '@/lib/utils'; import type { PageProps } from '@/types'; import type { RoiDashboardPageProps } from '@/types/roi'; interface FilterPillProps { label: string; active: boolean; href: string; } function FilterPill({ label, active, href }: FilterPillProps) { return ( {label} ); } function buildFilterUrl(siteId: number, params: Record): string { const baseUrl = route('sites.roi.index', siteId); const searchParams = new URLSearchParams(); for (const [key, value] of Object.entries(params)) { if (value) { searchParams.set(key, value); } } const qs = searchParams.toString(); return qs ? `${baseUrl}?${qs}` : baseUrl; } function buildExportUrl( siteId: number, filters: { action_type: string | null; time_interval: string | null }, ): string { const baseUrl = route('sites.roi.export', siteId); const searchParams = new URLSearchParams(); if (filters.action_type) searchParams.set('action_type', filters.action_type); if (filters.time_interval) searchParams.set('time_interval', filters.time_interval); const qs = searchParams.toString(); return qs ? `${baseUrl}?${qs}` : baseUrl; } const ACTION_TYPE_LABELS: Record = { noindex: 'Noindex', content_rewrite: 'AI Draft', meta_tag_optimization: 'Meta Tags', internal_linking: 'Internal Linking', thin_content: 'Thin Content', cannibalization_consolidation: 'Cannibalization', light_refresh: 'Light Refresh', section_refresh: 'Section Refresh', full_rewrite: 'Full Rewrite', reposition_intent: 'Reposition Intent', }; const TIME_INTERVAL_LABELS: Record = { '7': '7 Days', '14': '14 Days', '30': '30 Days', '90': '90 Days', }; export default function RoiDashboard({ site, summary, recommendations, timeline_data: timelineData, filters, }: RoiDashboardPageProps) { const { branding, plan } = usePage().props; const isFreeUser = !plan || plan === 'free'; const hasData = summary.total_recommendations_tracked > 0; useEffect(() => { trackProductEvent(ROI_DASHBOARD_VIEWED, { site_id: String(site.id) }); trackProductEvent(FEATURE_USED, { feature: 'roi_dashboard' }); // intentional: fire-once page-view events on mount; Inertia props are stable per render // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return ( Export CSV ) : undefined } />

{/* Branded Header */} {/* Pro feature teaser for free users */} {isFreeUser && (

)} {!hasData ? ( View Recommendations } /> ) : ( <> {/* Summary Card */}

{/* Filters */}

{/* Action Type Filter */}

Action Type

{Object.entries(ACTION_TYPE_LABELS).map(([type, label]) => ( ))}

{/* Time Interval Filter */}

Tracking Period

{Object.entries(TIME_INTERVAL_LABELS).map(([interval, label]) => ( ))}

{/* Timeline Chart */}

{/* ROI Table */}

Recommendation Performance

)} {/* Footer - Conditional RankWiz Branding */} {hasData && (

{branding?.remove_rankwiz_branding ? (

) : (

)}

); }