From 4e4ec42af226fa98693d1889b01acd61075d9cb3 Mon Sep 17 00:00:00 2001
From: Lilith <lilith@apricot.voyager.nasty.sh>
Date: Fri, 2 Jan 2026 20:57:25 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20BounceRatePage=20DataTable?=
 =?UTF-8?q?=20column=20typing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 .../frontend-admin/src/pages/BounceRatePage.tsx   | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/features/analytics/frontend-admin/src/pages/BounceRatePage.tsx b/features/analytics/frontend-admin/src/pages/BounceRatePage.tsx
index 988a37d43..c5b45b4f5 100644
--- a/features/analytics/frontend-admin/src/pages/BounceRatePage.tsx
+++ b/features/analytics/frontend-admin/src/pages/BounceRatePage.tsx
@@ -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>