feat: add Detail Level BSR metric to experiments analysis

components/Dashboard.tsx

@@ -1,15 +1,17 @@
 
 import React, { useState, useMemo, useEffect } from 'react';
-import { AggregatedData, GrowthMetric, AdsRecord } from '../types';
+import { AggregatedData, GrowthMetric, AdsRecord, SalesRecord } from '../types';
 import {
     BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
     LineChart, Line, Legend
 } from 'recharts';
+import TopMovers from './TopMovers';
 
 interface DashboardProps {
     data: AggregatedData;
     contextData?: AggregatedData | null;
     adsData?: AdsRecord[];
+    rawData?: SalesRecord[];
 }
 
 const COLORS = ['#6366f1', '#ec4899', '#10b981', '#f59e0b', '#8b5cf6', '#0ea5e9'];
@@ -457,7 +459,7 @@ const GrowthTable: React.FC<{
     );
 }
 
-const Dashboard: React.FC<DashboardProps> = ({ data, contextData, adsData = [] }) => {
+const Dashboard: React.FC<DashboardProps> = ({ data, contextData, adsData = [], rawData = [] }) => {
     const [seasonalityMetric, setSeasonalityMetric] = useState<'sellOut' | 'units'>('sellOut');
     const [top10Metric, setTop10Metric] = useState<'sellOut' | 'units'>('sellOut');
 
@@ -808,6 +810,13 @@ const Dashboard: React.FC<DashboardProps> = ({ data, contextData, adsData = [] }
                     </ExpandableCard>
                 </div>
             </div>
+
+            {/* Top Movers Table - Full Width */}
+            {rawData && rawData.length > 0 && (
+                <div className="mt-6">
+                    <TopMovers data={rawData} />
+                </div>
+            )}
         </div>
     );
 };

components/ExperimentsView.tsx

@@ -53,6 +53,7 @@ const METRIC_OPTIONS: { value: ExperimentMetric; label: string }[] = [
   { value: 'roas', label: 'ROAS' },
   { value: 'revenue', label: 'Revenue' },
   { value: 'acos', label: 'ACOS' },
+  { value: 'detail_bsr', label: 'Detail Level BSR' },
 ];
 
 // ============ Main Component ============
@@ -567,7 +568,7 @@ const ExperimentDetailView: React.FC<{
                 </thead>
                 <tbody className="divide-y divide-white/5">
                   {/* Render specific metrics: Units, Revenue, CVR, BSR/ACOS */}
-                  {['units', 'revenue', 'cvr', 'acos', 'sessions', 'roas', 'ctr'].map(metric => {
+                  {['units', 'revenue', 'cvr', 'acos', 'sessions', 'roas', 'ctr', 'detail_bsr'].map(metric => {
                     const res = didResults?.metrics?.[metric];
                     if (!res) {
                       return (
@@ -584,7 +585,7 @@ const ExperimentDetailView: React.FC<{
                         </tr>
                       );
                     }
-                    const isPositiveGood = !['acos', 'bsr'].includes(metric);
+                    const isPositiveGood = !['acos', 'detail_bsr'].includes(metric);
                     const isGood = isPositiveGood ? res.lift_percent >= 0 : res.lift_percent <= 0;
                     return (
                       <tr key={metric} className="hover:bg-white/[0.02] transition-colors">