import { DataTable } from '@/components/data-table'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { useTranslation } from '@/hooks/use-translation'; import AppLayout from '@/layouts/app-layout'; import { type BreadcrumbItem } from '@/types'; import { Head, Link, router, usePage } from '@inertiajs/react'; import { ArrowLeft, BarChart3, CalendarCheck, Clock, Coins, Home, TrendingDown, TrendingUp } from 'lucide-react'; import { useMemo } from 'react'; import KpiHeroCard from './components/kpi-hero-card'; import { getKpiColumns } from './components/kpi-columns'; import KpiStatTile from './components/kpi-stat-tile'; import OccupancyBarList from './components/occupancy-bar-list'; import RevenueChart from './components/revenue-chart'; import YoyComparison from './components/yoy-comparison'; import { formatTnd, type KpiPageProps } from './components/kpi-types'; export default function Kpi() { const { headline, best, worst, topByOccupancy, rows, period, criterion, comparison, snapshot_at, coHosts, filters, auth } = usePage().props; const { t, locale } = useTranslation(); const breadcrumbs: BreadcrumbItem[] = [ { title: t('properties.index', 'accommodation_management'), href: '/logements' }, { title: t('properties.kpi', 'page_title'), href: '/logements/kpi' }, ]; const columns = useMemo(() => getKpiColumns(t, locale), [t, locale]); // "Les moins occupés" — derived client-side from the full rows (available > 0, ascending). const leastOccupiedList = useMemo( () => [...rows] .filter((r) => r.available_nights > 0) .sort((a, b) => a.occupancy_rate - b.occupancy_rate) .slice(0, 8), [rows], ); function applyFilters(next: Partial) { const merged = { ...filters, ...next }; const params: Record = { period: merged.period, criterion: merged.criterion, }; if (merged.coHost) params.coHost = merged.coHost; if (merged.period === 'custom') { if (merged.from) params.from = merged.from; if (merged.to) params.to = merged.to; } router.get(route('logements.kpi'), params, { preserveState: true, preserveScroll: true, replace: true }); } return (
{/* Header */}

{t('properties.kpi', 'page_title')}

{t('properties.kpi', 'page_subtitle')}

{/* Filters */}
{filters.period === 'custom' && ( <>
applyFilters({ from: e.target.value })} className="h-9 rounded-md border bg-white px-2 text-sm" />
applyFilters({ to: e.target.value })} className="h-9 rounded-md border bg-white px-2 text-sm" />
)}
{auth?.isAdmin && (
)}
{period.from} → {period.to} {snapshot_at ? `${t('properties.kpi', 'data_as_of')} ${new Date(snapshot_at).toLocaleString(locale)}` : t('properties.kpi', 'data_live')}
{/* Hero zone */}
{/* Headline KPI tiles */}
{/* Year-over-year comparison (curves) */} {comparison && } {/* Top 20 occupancy + Revenue chart */}
{t('properties.kpi', 'top_occupancy_title')} {t('properties.kpi', 'occupancy_explain')} {t('properties.kpi', 'revenue_chart_title')} {t('properties.kpi', 'revenue_chart_caption')}
{/* Least occupied */} {t('properties.kpi', 'least_occupied_title')} {t('properties.kpi', 'least_occupied_caption')} {/* Detailed sortable table */} {t('properties.kpi', 'ranking_title')} {t('properties.kpi', 'ranking_caption')} {rows.length === 0 ? (
{t('properties.kpi', 'no_data_period')}
) : ( )}

{t('properties.kpi', 'total_revenue')}: {formatTnd(headline.total_revenue, locale)}

); }