react-native-inapp-inspector 1.1.28 → 1.1.31

package/dist/esm/components/Inspector/AnalyticsTab.js

@@ -9,11 +9,11 @@ import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { useTranslation } from '../../i18n';
-import Svg, { Path, Line, Circle, G, Defs, LinearGradient as SvgLinearGradient, Stop, } from 'react-native-svg';
+import Svg, { Path, Rect, Line, Circle, G, Defs, LinearGradient as SvgLinearGradient, Stop, } from 'react-native-svg';
 import TouchableScale from '../TouchableScale';
 import { getCurrentUserId, getCurrentUserProperties, getDefaultEventParameters, getCollectionEnabled, } from '../../customHooks/analyticsLogger';
 import { getEventCategory, } from '../../helpers';
-import { SearchIcon, ClearIcon, TrashIcon, EmptyRadarIcon, HeaderPauseIcon, FilterIcon, CartIcon, GlobeIcon, BoltIcon, SparkleIcon, PinIcon, MoneyIcon, } from '../NetworkIcons';
+import { LayersIcon, CheckIcon, SearchIcon, ClearIcon, TrashIcon, EmptyRadarIcon, HeaderPauseIcon, FilterIcon, CartIcon, GlobeIcon, BoltIcon, SparkleIcon, PinIcon, MoneyIcon, } from '../NetworkIcons';
 const AnalyticsHeader = React.memo(() => {
     const { t } = useTranslation();
     const { analyticsEvents, filteredAnalyticsEvents, analyticsFilters, setAnalyticsFilters, analyticsHeaderExpanded, setAnalyticsHeaderExpanded, } = useInspector();
@@ -87,17 +87,36 @@ const AnalyticsHeader = React.memo(() => {
             barWidthPct: Math.round((count / maxVal) * 100),
         }));
     }, [filteredAnalyticsEvents]);
-    // Toggle category filter from top button group
+    // Multi-select category toggle from top button group
     const toggleCategoryFilter = (cat) => {
         animateNextLayout();
         setAnalyticsFilters(prev => {
-            const isSelected = !prev.categories.has('all') && prev.categories.has(cat);
-            if (isSelected) {
+            if (cat === 'all') {
                 return { ...prev, categories: new Set(['all']) };
             }
+            const nextCategories = new Set(prev.categories);
+            if (nextCategories.has('all')) {
+                nextCategories.delete('all');
+                nextCategories.add(cat);
+            }
             else {
-                return { ...prev, categories: new Set([cat]) };
+                if (nextCategories.has(cat)) {
+                    nextCategories.delete(cat);
+                    if (nextCategories.size === 0) {
+                        nextCategories.add('all');
+                    }
+                }
+                else {
+                    nextCategories.add(cat);
+                    if (nextCategories.has('ecommerce') &&
+                        nextCategories.has('page_view') &&
+                        nextCategories.has('system') &&
+                        nextCategories.has('custom')) {
+                        return { ...prev, categories: new Set(['all']) };
+                    }
+                }
             }
+            return { ...prev, categories: nextCategories };
         });
     };
     // 12-Bucket GA4 Realtime Stacked Histogram & Spline Wave Graph (-30m / 30s to NOW)
@@ -177,7 +196,7 @@ const AnalyticsHeader = React.memo(() => {
     }, [filteredAnalyticsEvents, chartHeight, svgWidth, t]);
     const selectedBucket = selectedBucketIdx != null ? histogramData.buckets[selectedBucketIdx] : null;
     return (<View style={styles.analyticsHeaderCard}>
-      {/* ── Top Header Row (GA4 Style) ─────────────────────────────────────── */}
+      {/* ── 1. Top Header Row (GA4 Style) ─────────────────────────────────── */}
       <View style={styles.analyticsHeaderTop}>
         <View style={{ flex: 1 }}>
           <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
@@ -217,9 +236,280 @@ const AnalyticsHeader = React.memo(() => {
         </TouchableOpacity>
       </View>
 
-      {/* ── GA4 Realtime Metric Hero & Activity Chart ─────────────────────── */}
+      {/* ── 2. Multi-Select Category Filter Buttons (AT THE TOP) ──────────── */}
+      <View style={{ marginTop: 10, marginBottom: 8 }}>
+        {/* Multi-color Proportional Segmented Bar */}
+        <View style={{
+            height: 4.5,
+            borderRadius: 2.5,
+            backgroundColor: `${AppColors.grayBorderSecondary}40`,
+            flexDirection: 'row',
+            overflow: 'hidden',
+            marginBottom: 8,
+        }}>
+          {categoryStats.ecommerce > 0 && (<View style={{
+                flex: categoryStats.ecommerce,
+                backgroundColor: AppColors.amber500,
+            }}/>)}
+          {categoryStats.page_view > 0 && (<View style={{
+                flex: categoryStats.page_view,
+                backgroundColor: AppColors.sky500,
+            }}/>)}
+          {categoryStats.system > 0 && (<View style={{
+                flex: categoryStats.system,
+                backgroundColor: AppColors.purple,
+            }}/>)}
+          {categoryStats.custom > 0 && (<View style={{
+                flex: categoryStats.custom,
+                backgroundColor: AppColors.brandPurple,
+            }}/>)}
+        </View>
+
+        {/* Multi-Select Category Buttons with Checkboxes */}
+        <View style={{
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            gap: 6,
+        }}>
+          {/* All Button */}
+          {(() => {
+            const isAllSelected = analyticsFilters.categories.has('all');
+            return (<TouchableScale onPress={() => toggleCategoryFilter('all')} style={[
+                    {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 5,
+                        backgroundColor: isAllSelected ? AppColors.indigo600Alt : AppColors.indigo50,
+                        paddingHorizontal: 8,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        borderWidth: 1,
+                        borderColor: isAllSelected ? AppColors.indigo600 : AppColors.indigo400,
+                    },
+                    isAllSelected && {
+                        shadowColor: AppColors.indigo600Alt,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.28,
+                        shadowRadius: 2.5,
+                        elevation: 2,
+                    },
+                ]}>
+                <View style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 3,
+                    borderWidth: 1.2,
+                    borderColor: isAllSelected ? AppColors.white : AppColors.indigo400,
+                    backgroundColor: isAllSelected ? AppColors.white : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                  {isAllSelected && <CheckIcon color={AppColors.indigo600Alt} size={8}/>}
+                </View>
+                <LayersIcon color={isAllSelected ? AppColors.white : AppColors.indigo600Alt} size={11}/>
+                <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 10,
+                    color: isAllSelected ? AppColors.white : AppColors.indigo600Alt,
+                }}>
+                  {t('analytics.allCategory')}: {categoryStats.totalCount}
+                </Text>
+              </TouchableScale>);
+        })()}
+
+          {/* Ecommerce Button */}
+          {(() => {
+            const isSelected = !analyticsFilters.categories.has('all') &&
+                analyticsFilters.categories.has('ecommerce');
+            return (<TouchableScale onPress={() => toggleCategoryFilter('ecommerce')} style={[
+                    {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 5,
+                        backgroundColor: isSelected ? AppColors.amber600 : AppColors.amber100,
+                        paddingHorizontal: 8,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        borderWidth: 1,
+                        borderColor: isSelected ? AppColors.amber700 : AppColors.amber200,
+                    },
+                    isSelected && {
+                        shadowColor: AppColors.amber600,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.28,
+                        shadowRadius: 2.5,
+                        elevation: 2,
+                    },
+                ]}>
+                <View style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 3,
+                    borderWidth: 1.2,
+                    borderColor: isSelected ? AppColors.white : AppColors.amber500,
+                    backgroundColor: isSelected ? AppColors.white : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                  {isSelected && <CheckIcon color={AppColors.amber600} size={8}/>}
+                </View>
+                <CartIcon color={isSelected ? AppColors.white : AppColors.amber700} size={11}/>
+                <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 10,
+                    color: isSelected ? AppColors.white : AppColors.amber800Warm,
+                }}>
+                  {t('analytics.ecommerceCategory')}: {categoryStats.ecommerce} ({categoryStats.ecommercePct}%)
+                </Text>
+              </TouchableScale>);
+        })()}
+
+          {/* Screens Button */}
+          {(() => {
+            const isSelected = !analyticsFilters.categories.has('all') &&
+                analyticsFilters.categories.has('page_view');
+            return (<TouchableScale onPress={() => toggleCategoryFilter('page_view')} style={[
+                    {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 5,
+                        backgroundColor: isSelected ? AppColors.sky600 : AppColors.sky100,
+                        paddingHorizontal: 8,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        borderWidth: 1,
+                        borderColor: isSelected ? AppColors.blue700 : AppColors.sky400,
+                    },
+                    isSelected && {
+                        shadowColor: AppColors.sky600,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.28,
+                        shadowRadius: 2.5,
+                        elevation: 2,
+                    },
+                ]}>
+                <View style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 3,
+                    borderWidth: 1.2,
+                    borderColor: isSelected ? AppColors.white : AppColors.sky400,
+                    backgroundColor: isSelected ? AppColors.white : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                  {isSelected && <CheckIcon color={AppColors.sky600} size={8}/>}
+                </View>
+                <GlobeIcon color={isSelected ? AppColors.white : AppColors.sky600} size={11}/>
+                <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 10,
+                    color: isSelected ? AppColors.white : AppColors.sky600,
+                }}>
+                  {t('analytics.screensCategory')}: {categoryStats.page_view} ({categoryStats.page_viewPct}%)
+                </Text>
+              </TouchableScale>);
+        })()}
+
+          {/* System Button */}
+          {(() => {
+            const isSelected = !analyticsFilters.categories.has('all') &&
+                analyticsFilters.categories.has('system');
+            return (<TouchableScale onPress={() => toggleCategoryFilter('system')} style={[
+                    {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 5,
+                        backgroundColor: isSelected ? AppColors.violet600 : AppColors.purple100,
+                        paddingHorizontal: 8,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        borderWidth: 1,
+                        borderColor: isSelected ? AppColors.purpleShade700 : AppColors.purple200,
+                    },
+                    isSelected && {
+                        shadowColor: AppColors.violet600,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.28,
+                        shadowRadius: 2.5,
+                        elevation: 2,
+                    },
+                ]}>
+                <View style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 3,
+                    borderWidth: 1.2,
+                    borderColor: isSelected ? AppColors.white : AppColors.purple400,
+                    backgroundColor: isSelected ? AppColors.white : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                  {isSelected && <CheckIcon color={AppColors.violet600} size={8}/>}
+                </View>
+                <BoltIcon color={isSelected ? AppColors.white : AppColors.purple} size={11}/>
+                <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 10,
+                    color: isSelected ? AppColors.white : AppColors.brandPurple,
+                }}>
+                  {t('analytics.systemCategory')}: {categoryStats.system} ({categoryStats.systemPct}%)
+                </Text>
+              </TouchableScale>);
+        })()}
+
+          {/* Custom Button */}
+          {(() => {
+            const isSelected = !analyticsFilters.categories.has('all') &&
+                analyticsFilters.categories.has('custom');
+            return (<TouchableScale onPress={() => toggleCategoryFilter('custom')} style={[
+                    {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 5,
+                        backgroundColor: isSelected ? AppColors.pink600 : AppColors.pink100,
+                        paddingHorizontal: 8,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        borderWidth: 1,
+                        borderColor: isSelected ? AppColors.rose700 : AppColors.roseBorder,
+                    },
+                    isSelected && {
+                        shadowColor: AppColors.pink600,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.28,
+                        shadowRadius: 2.5,
+                        elevation: 2,
+                    },
+                ]}>
+                <View style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 3,
+                    borderWidth: 1.2,
+                    borderColor: isSelected ? AppColors.white : AppColors.pink400,
+                    backgroundColor: isSelected ? AppColors.white : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                  {isSelected && <CheckIcon color={AppColors.pink600} size={8}/>}
+                </View>
+                <SparkleIcon color={isSelected ? AppColors.white : AppColors.brandPurple} size={11}/>
+                <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 10,
+                    color: isSelected ? AppColors.white : AppColors.pink600,
+                }}>
+                  {t('analytics.customCategory')}: {categoryStats.custom} ({categoryStats.customPct}%)
+                </Text>
+              </TouchableScale>);
+        })()}
+        </View>
+      </View>
+
+      {/* ── 3. GA4 Realtime Metric Hero & Activity Chart (UNDER CATEGORIES) ─ */}
       <View style={{
-            marginTop: 10,
+            marginTop: 2,
             marginBottom: 8,
             backgroundColor: AppColors.grayBackground,
             borderRadius: 10,
@@ -299,41 +589,55 @@ const AnalyticsHeader = React.memo(() => {
           </View>
         </View>
 
-        {/* ── High Precision SVG Spline Area Graph ── */}
+        {/* ── Crashlytics-Style Multi-Bar Histogram with Trendline Overlay ── */}
         <View style={{ height: chartHeight, position: 'relative' }}>
           <Svg width="100%" height={chartHeight} viewBox={`0 0 ${svgWidth} ${chartHeight}`}>
             <Defs>
-              <SvgLinearGradient id="telemetryAreaGrad" x1="0" y1="0" x2="0" y2="1">
-                <Stop offset="0%" stopColor={AppColors.brandPurple} stopOpacity="0.4"/>
-                <Stop offset="80%" stopColor={AppColors.brandPurple} stopOpacity="0.05"/>
-                <Stop offset="100%" stopColor={AppColors.brandPurple} stopOpacity="0.0"/>
+              <SvgLinearGradient id="crashlyticsBarGrad" x1="0" y1="0" x2="0" y2="1">
+                <Stop offset="0%" stopColor="#8B5CF6" stopOpacity="0.9"/>
+                <Stop offset="100%" stopColor="#6366F1" stopOpacity="0.6"/>
+              </SvgLinearGradient>
+              <SvgLinearGradient id="crashlyticsAreaGrad" x1="0" y1="0" x2="0" y2="1">
+                <Stop offset="0%" stopColor="#8B5CF6" stopOpacity="0.25"/>
+                <Stop offset="80%" stopColor="#8B5CF6" stopOpacity="0.04"/>
+                <Stop offset="100%" stopColor="#8B5CF6" stopOpacity="0.0"/>
               </SvgLinearGradient>
             </Defs>
 
-            {/* Baseline & Grid lines */}
-            <Line x1="8" y1={chartHeight - 6} x2={svgWidth - 8} y2={chartHeight - 6} stroke={AppColors.dividerColor} strokeWidth="1"/>
-            <Line x1="8" y1={chartHeight / 2} x2={svgWidth - 8} y2={chartHeight / 2} stroke={AppColors.dividerColor} strokeWidth="0.8" strokeDasharray="3,3"/>
+            {/* Subtle Grid Guidelines */}
+            <Line x1="6" y1={chartHeight - 6} x2={svgWidth - 6} y2={chartHeight - 6} stroke="#E2E8F0" strokeWidth="1"/>
+            <Line x1="6" y1={chartHeight / 2} x2={svgWidth - 6} y2={chartHeight / 2} stroke="#F1F5F9" strokeWidth="1" strokeDasharray="4,4"/>
 
-            {/* Glowing Area Fill */}
-            <Path d={histogramData.areaPath} fill="url(#telemetryAreaGrad)"/>
+            {/* Glowing Area Underlay */}
+            <Path d={histogramData.areaPath} fill="url(#crashlyticsAreaGrad)"/>
 
-            {/* Smooth Spline Wave Stroke */}
-            <Path d={histogramData.linePath} fill="none" stroke={AppColors.brandPurple} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
-
-            {/* Data Points & Active Bucket Indicators */}
+            {/* Vertical Crashlytics Histogram Bars */}
             {histogramData.buckets.map((b, idx) => {
             const isSelected = selectedBucketIdx === idx;
-            return (<G key={b.index}>
-                  {isSelected && (<Line x1={b.x} y1={4} x2={b.x} y2={chartHeight - 6} stroke={AppColors.brandPurple} strokeWidth="1.2" strokeDasharray="2,2"/>)}
+            const barWidth = 10;
+            const barX = b.x - barWidth / 2;
+            const barHeight = Math.max(3, chartHeight - 8 - b.y);
+            const barY = chartHeight - 8 - barHeight;
+            return (<G key={`bar-${b.index}`}>
+                  {/* Background slot */}
+                  <Rect x={barX} y={6} width={barWidth} height={chartHeight - 14} rx={3} fill={isSelected ? '#EDE9FE' : '#F8FAFC'}/>
 
-                  {b.total > 0 && (<Circle cx={b.x} cy={b.y} r={isSelected ? 4.5 : 2.8} fill={isSelected ? AppColors.brandPurple : AppColors.white} stroke={AppColors.brandPurple} strokeWidth={isSelected ? 2 : 1.5}/>)}
+                  {/* Active Event Bar */}
+                  {b.total > 0 && (<Rect x={barX} y={barY} width={barWidth} height={barHeight} rx={3} fill="url(#crashlyticsBarGrad)"/>)}
 
-                  {b.isLatest && (<G>
-                      <Circle cx={b.x} cy={b.y} r="6.5" fill={AppColors.brandPurple} opacity="0.22"/>
-                      <Circle cx={b.x} cy={b.y} r="3" fill={AppColors.brandPurple}/>
-                    </G>)}
+                  {/* Selected Cursor Line */}
+                  {isSelected && (<Line x1={b.x} y1={4} x2={b.x} y2={chartHeight - 6} stroke="#8B5CF6" strokeWidth="1.5" strokeDasharray="2,2"/>)}
                 </G>);
         })}
+
+            {/* Crashlytics Apex Trendline */}
+            <Path d={histogramData.linePath} fill="none" stroke="#8B5CF6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+
+            {/* Pulsing Dot on Current Active Time Bucket */}
+            {histogramData.buckets.length > 0 && (<G>
+                <Circle cx={histogramData.buckets[histogramData.buckets.length - 1].x} cy={histogramData.buckets[histogramData.buckets.length - 1].y} r="5.5" fill="#8B5CF6" opacity="0.25"/>
+                <Circle cx={histogramData.buckets[histogramData.buckets.length - 1].x} cy={histogramData.buckets[histogramData.buckets.length - 1].y} r="3" fill="#7C3AED"/>
+              </G>)}
           </Svg>
 
           {/* Invisible Touch Columns for Interactive Bucket Selection */}
@@ -423,199 +727,6 @@ const AnalyticsHeader = React.memo(() => {
         </View>
       </View>
 
-      {/* ── Category Breakdown Distribution Bar & Interactive Filter Buttons ─ */}
-      <View style={{ marginTop: 2, marginBottom: 4 }}>
-        {/* Multi-color Proportional Segmented Bar */}
-        <View style={{
-            height: 5,
-            borderRadius: 2.5,
-            backgroundColor: `${AppColors.grayBorderSecondary}40`,
-            flexDirection: 'row',
-            overflow: 'hidden',
-            marginBottom: 8,
-        }}>
-          {categoryStats.ecommerce > 0 && (<View style={{
-                flex: categoryStats.ecommerce,
-                backgroundColor: AppColors.amber500,
-            }}/>)}
-          {categoryStats.page_view > 0 && (<View style={{
-                flex: categoryStats.page_view,
-                backgroundColor: AppColors.sky500,
-            }}/>)}
-          {categoryStats.system > 0 && (<View style={{
-                flex: categoryStats.system,
-                backgroundColor: AppColors.purple,
-            }}/>)}
-          {categoryStats.custom > 0 && (<View style={{
-                flex: categoryStats.custom,
-                backgroundColor: AppColors.brandPurple,
-            }}/>)}
-        </View>
-
-        {/* 4 Interactive Category Filter Buttons */}
-        <View style={{
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-            gap: 6,
-        }}>
-          {/* Ecommerce Button */}
-          {(() => {
-            const isSelected = !analyticsFilters.categories.has('all') &&
-                analyticsFilters.categories.has('ecommerce');
-            return (<TouchableScale onPress={() => toggleCategoryFilter('ecommerce')} style={[
-                    {
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 4.5,
-                        backgroundColor: isSelected
-                            ? AppColors.amber500
-                            : `${AppColors.amber500}14`,
-                        paddingHorizontal: 7,
-                        paddingVertical: 4.5,
-                        borderRadius: 6,
-                        borderWidth: 1,
-                        borderColor: isSelected
-                            ? AppColors.amber500
-                            : `${AppColors.amber500}35`,
-                    },
-                    isSelected && {
-                        shadowColor: AppColors.amber500,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.25,
-                        shadowRadius: 2,
-                        elevation: 2,
-                    },
-                ]}>
-                <CartIcon color={isSelected ? AppColors.white : AppColors.amber700} size={11}/>
-                <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 10,
-                    color: isSelected ? AppColors.white : AppColors.amber700,
-                }}>
-                  Ecommerce: {categoryStats.ecommerce} ({categoryStats.ecommercePct}%)
-                </Text>
-              </TouchableScale>);
-        })()}
-
-          {/* Screens Button */}
-          {(() => {
-            const isSelected = !analyticsFilters.categories.has('all') &&
-                analyticsFilters.categories.has('page_view');
-            return (<TouchableScale onPress={() => toggleCategoryFilter('page_view')} style={[
-                    {
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 4.5,
-                        backgroundColor: isSelected
-                            ? AppColors.sky600
-                            : `${AppColors.sky500}14`,
-                        paddingHorizontal: 7,
-                        paddingVertical: 4.5,
-                        borderRadius: 6,
-                        borderWidth: 1,
-                        borderColor: isSelected
-                            ? AppColors.sky600
-                            : `${AppColors.sky500}35`,
-                    },
-                    isSelected && {
-                        shadowColor: AppColors.sky600,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.25,
-                        shadowRadius: 2,
-                        elevation: 2,
-                    },
-                ]}>
-                <GlobeIcon color={isSelected ? AppColors.white : AppColors.sky600} size={11}/>
-                <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 10,
-                    color: isSelected ? AppColors.white : AppColors.sky600,
-                }}>
-                  Screens: {categoryStats.page_view} ({categoryStats.page_viewPct}%)
-                </Text>
-              </TouchableScale>);
-        })()}
-
-          {/* System Button */}
-          {(() => {
-            const isSelected = !analyticsFilters.categories.has('all') &&
-                analyticsFilters.categories.has('system');
-            return (<TouchableScale onPress={() => toggleCategoryFilter('system')} style={[
-                    {
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 4.5,
-                        backgroundColor: isSelected
-                            ? AppColors.purple
-                            : `${AppColors.purple}14`,
-                        paddingHorizontal: 7,
-                        paddingVertical: 4.5,
-                        borderRadius: 6,
-                        borderWidth: 1,
-                        borderColor: isSelected
-                            ? AppColors.purple
-                            : `${AppColors.purple}35`,
-                    },
-                    isSelected && {
-                        shadowColor: AppColors.purple,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.25,
-                        shadowRadius: 2,
-                        elevation: 2,
-                    },
-                ]}>
-                <BoltIcon color={isSelected ? AppColors.white : AppColors.purple} size={11}/>
-                <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 10,
-                    color: isSelected ? AppColors.white : AppColors.purple,
-                }}>
-                  System: {categoryStats.system} ({categoryStats.systemPct}%)
-                </Text>
-              </TouchableScale>);
-        })()}
-
-          {/* Custom Button */}
-          {(() => {
-            const isSelected = !analyticsFilters.categories.has('all') &&
-                analyticsFilters.categories.has('custom');
-            return (<TouchableScale onPress={() => toggleCategoryFilter('custom')} style={[
-                    {
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 4.5,
-                        backgroundColor: isSelected
-                            ? AppColors.brandPurple
-                            : `${AppColors.brandPurple}14`,
-                        paddingHorizontal: 7,
-                        paddingVertical: 4.5,
-                        borderRadius: 6,
-                        borderWidth: 1,
-                        borderColor: isSelected
-                            ? AppColors.brandPurple
-                            : `${AppColors.brandPurple}35`,
-                    },
-                    isSelected && {
-                        shadowColor: AppColors.brandPurple,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.25,
-                        shadowRadius: 2,
-                        elevation: 2,
-                    },
-                ]}>
-                <SparkleIcon color={isSelected ? AppColors.white : AppColors.brandPurple} size={11}/>
-                <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 10,
-                    color: isSelected ? AppColors.white : AppColors.brandPurple,
-                }}>
-                  Custom: {categoryStats.custom} ({categoryStats.customPct}%)
-                </Text>
-              </TouchableScale>);
-        })()}
-        </View>
-      </View>
-
       {/* ── Top Screens / Views Mini Leaderboard (GA4 Realtime Overview) ──── */}
       {topScreens.length > 0 && (<View style={{
                 marginTop: 8,