import { useTranslation } from '@/hooks/use-translation'; import AppLayout from '@/layouts/app-layout'; import { type BreadcrumbItem } from '@/types'; import { Head, router, usePage } from '@inertiajs/react'; import React, { useEffect, useRef } from 'react'; import { FiltersCard } from './filters-card'; import { CategoryBars, EmptyState, HousekeeperCleanlinessPanel, KpiCards, MonthlyTrendChart, PropertyRankingTable, RatingDistributionChart, SourceComparisonChart, SourceDonut, StatsSection, type CategoryAverage, type DistributionBucket, type HeroMetrics, type HousekeeperCleanliness, type PropertyRank, type SourceAverage, type SourceBreakdownPoint, type TrendPoint, } from './stats-widgets'; import { TabsSwitcher, type CurrentFilters } from './tabs-switcher'; interface StatsPayload { hero: HeroMetrics; trend: TrendPoint[]; sourceBreakdown: SourceBreakdownPoint[]; topProperties: PropertyRank[]; bottomProperties: PropertyRank[]; categoryAverages: CategoryAverage[]; ratingDistribution: DistributionBucket[]; sourceAverages: SourceAverage[]; housekeeperCleanliness: HousekeeperCleanliness; } interface PageProps { stats: StatsPayload; dateFrom: string; dateTo: string; logements: { id: number; name: string; internal_name?: string | null; [key: string]: unknown }[]; coHosts: { id: string | number; name: string }[]; sources: string[]; auth: { isAdmin: boolean; permissions: string[] }; currentFilters?: CurrentFilters; [key: string]: unknown; } export default function Stats() { const { t } = useTranslation(); const { stats, dateFrom, dateTo, logements, coHosts, sources, auth, currentFilters } = usePage().props; const breadcrumbs: BreadcrumbItem[] = [ { title: t('reviews', 'reviews'), href: '/reviews' }, { title: t('reviews', 'view_stats'), href: '/reviews/stats' }, ]; const [coHost, setCoHost] = React.useState(currentFilters?.coHost ?? ''); const [dateRange, setDateRange] = React.useState({ from: dateFrom, to: dateTo }); const [state, setState] = React.useState(currentFilters?.state ?? 'tous'); const [logement, setLogement] = React.useState(currentFilters?.logement ?? ''); const [minRating, setMinRating] = React.useState(currentFilters?.minRating ?? '0'); const [source, setSource] = React.useState(currentFilters?.source ?? 'tous'); // Same first-render guard as the list view — keeps the default date range from polluting // the URL and inadvertently filtering out reviews with NULL/older ru_created_at. const isFirstRender = useRef(true); useEffect(() => { if (isFirstRender.current) { isFirstRender.current = false; return; } const delayDebounceFn = setTimeout(() => { const data: Record = { dateRange, state, logement, minRating, source }; if (coHost) data.coHost = coHost; router.get(route('reviews.stats'), data as never, { preserveState: true, replace: true }); }, 200); return () => clearTimeout(delayDebounceFn); }, [dateRange, state, logement, minRating, source, coHost]); const noData = stats.hero.total === 0; return (
{noData ? ( ) : ( <> {/* Row 1 — KPI hero */} {/* Row 2 — Trend + Source donut */}
{/* Row 3 — Top + Bottom properties */}
{/* Row 4 — Categories breakdown */} {/* Row 4b — Housekeeper (femmes de ménage) cleanliness scoring */} {/* Row 5 — Distribution + Source comparison */}
)}
); }