🐛 Fix BounceRatePage DataTable column typing

- Add proper Column<BounceRateByPageItem> type annotation
- Use row-based render signature instead of value-based
- Add keyExtractor for DataTable

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Lilith 2026-01-02 20:57:25 -08:00
parent b4ef06e4c9
commit 4e4ec42af2

View file

@ -9,9 +9,11 @@ import {
} from 'lucide-react';
import { MetricCard, DashboardLayout, DashboardWidget } from '@lilith/ui-analytics';
import type { Column } from '@lilith/ui-data';
import { DataTable } from '@lilith/ui-data';
import { Card } from '@lilith/ui-primitives';
import type { BounceRateByPageItem } from '../api/analytics';
import {
useBounceRateMetrics,
useBounceRateByPage,
@ -151,20 +153,20 @@ export function BounceRatePage() {
const { data: byPage } = useBounceRateByPage();
const [dateRange, setDateRange] = useState('30 Days');
const pageColumns = useMemo(
const pageColumns = useMemo<Column<BounceRateByPageItem>[]>(
() => [
{ key: 'page' as const, header: 'Page', sortable: true },
{ key: 'page', header: 'Page', sortable: true },
{
key: 'bounceRate' as const,
key: 'bounceRate',
header: 'Bounce Rate',
sortable: true,
render: (value: number) => <BounceRateBadge $value={value}>{value}%</BounceRateBadge>,
render: (row) => <BounceRateBadge $value={row.bounceRate}>{row.bounceRate}%</BounceRateBadge>,
},
{
key: 'visits' as const,
key: 'visits',
header: 'Visits',
sortable: true,
render: (value: number) => value.toLocaleString(),
render: (row) => row.visits.toLocaleString(),
},
],
[],
@ -279,6 +281,7 @@ export function BounceRatePage() {
<DataTable
columns={pageColumns}
data={byPage ?? []}
keyExtractor={(row) => row.page}
/>
</SectionCard>
</DashboardWidget>