react-native-inapp-inspector 1.1.28 → 1.1.31

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

@@ -125,17 +125,36 @@ const AnalyticsHeader = react_1.default.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) => {
         (0, InspectorContext_1.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)
@@ -215,7 +234,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
     }, [filteredAnalyticsEvents, chartHeight, svgWidth, t]);
     const selectedBucket = selectedBucketIdx != null ? histogramData.buckets[selectedBucketIdx] : null;
     return (<react_native_1.View style={styles_1.default.analyticsHeaderCard}>
-      {/* ── Top Header Row (GA4 Style) ─────────────────────────────────────── */}
+      {/* ── 1. Top Header Row (GA4 Style) ─────────────────────────────────── */}
       <react_native_1.View style={styles_1.default.analyticsHeaderTop}>
         <react_native_1.View style={{ flex: 1 }}>
           <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
@@ -255,9 +274,280 @@ const AnalyticsHeader = react_1.default.memo(() => {
         </react_native_1.TouchableOpacity>
       </react_native_1.View>
 
-      {/* ── GA4 Realtime Metric Hero & Activity Chart ─────────────────────── */}
+      {/* ── 2. Multi-Select Category Filter Buttons (AT THE TOP) ──────────── */}
+      <react_native_1.View style={{ marginTop: 10, marginBottom: 8 }}>
+        {/* Multi-color Proportional Segmented Bar */}
+        <react_native_1.View style={{
+            height: 4.5,
+            borderRadius: 2.5,
+            backgroundColor: `${AppColors_1.AppColors.grayBorderSecondary}40`,
+            flexDirection: 'row',
+            overflow: 'hidden',
+            marginBottom: 8,
+        }}>
+          {categoryStats.ecommerce > 0 && (<react_native_1.View style={{
+                flex: categoryStats.ecommerce,
+                backgroundColor: AppColors_1.AppColors.amber500,
+            }}/>)}
+          {categoryStats.page_view > 0 && (<react_native_1.View style={{
+                flex: categoryStats.page_view,
+                backgroundColor: AppColors_1.AppColors.sky500,
+            }}/>)}
+          {categoryStats.system > 0 && (<react_native_1.View style={{
+                flex: categoryStats.system,
+                backgroundColor: AppColors_1.AppColors.purple,
+            }}/>)}
+          {categoryStats.custom > 0 && (<react_native_1.View style={{
+                flex: categoryStats.custom,
+                backgroundColor: AppColors_1.AppColors.brandPurple,
+            }}/>)}
+        </react_native_1.View>
+
+        {/* Multi-Select Category Buttons with Checkboxes */}
+        <react_native_1.View style={{
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            gap: 6,
+        }}>
+          {/* All Button */}
+          {(() => {
+            const isAllSelected = analyticsFilters.categories.has('all');
+            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('all')} style={[
+                    {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 5,
+                        backgroundColor: isAllSelected ? AppColors_1.AppColors.indigo600Alt : AppColors_1.AppColors.indigo50,
+                        paddingHorizontal: 8,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        borderWidth: 1,
+                        borderColor: isAllSelected ? AppColors_1.AppColors.indigo600 : AppColors_1.AppColors.indigo400,
+                    },
+                    isAllSelected && {
+                        shadowColor: AppColors_1.AppColors.indigo600Alt,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.28,
+                        shadowRadius: 2.5,
+                        elevation: 2,
+                    },
+                ]}>
+                <react_native_1.View style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 3,
+                    borderWidth: 1.2,
+                    borderColor: isAllSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.indigo400,
+                    backgroundColor: isAllSelected ? AppColors_1.AppColors.white : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                  {isAllSelected && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.indigo600Alt} size={8}/>}
+                </react_native_1.View>
+                <NetworkIcons_1.LayersIcon color={isAllSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.indigo600Alt} size={11}/>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10,
+                    color: isAllSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.indigo600Alt,
+                }}>
+                  {t('analytics.allCategory')}: {categoryStats.totalCount}
+                </react_native_1.Text>
+              </TouchableScale_1.default>);
+        })()}
+
+          {/* Ecommerce Button */}
+          {(() => {
+            const isSelected = !analyticsFilters.categories.has('all') &&
+                analyticsFilters.categories.has('ecommerce');
+            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('ecommerce')} style={[
+                    {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 5,
+                        backgroundColor: isSelected ? AppColors_1.AppColors.amber600 : AppColors_1.AppColors.amber100,
+                        paddingHorizontal: 8,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        borderWidth: 1,
+                        borderColor: isSelected ? AppColors_1.AppColors.amber700 : AppColors_1.AppColors.amber200,
+                    },
+                    isSelected && {
+                        shadowColor: AppColors_1.AppColors.amber600,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.28,
+                        shadowRadius: 2.5,
+                        elevation: 2,
+                    },
+                ]}>
+                <react_native_1.View style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 3,
+                    borderWidth: 1.2,
+                    borderColor: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber500,
+                    backgroundColor: isSelected ? AppColors_1.AppColors.white : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                  {isSelected && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.amber600} size={8}/>}
+                </react_native_1.View>
+                <NetworkIcons_1.CartIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber700} size={11}/>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10,
+                    color: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber800Warm,
+                }}>
+                  {t('analytics.ecommerceCategory')}: {categoryStats.ecommerce} ({categoryStats.ecommercePct}%)
+                </react_native_1.Text>
+              </TouchableScale_1.default>);
+        })()}
+
+          {/* Screens Button */}
+          {(() => {
+            const isSelected = !analyticsFilters.categories.has('all') &&
+                analyticsFilters.categories.has('page_view');
+            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('page_view')} style={[
+                    {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 5,
+                        backgroundColor: isSelected ? AppColors_1.AppColors.sky600 : AppColors_1.AppColors.sky100,
+                        paddingHorizontal: 8,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        borderWidth: 1,
+                        borderColor: isSelected ? AppColors_1.AppColors.blue700 : AppColors_1.AppColors.sky400,
+                    },
+                    isSelected && {
+                        shadowColor: AppColors_1.AppColors.sky600,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.28,
+                        shadowRadius: 2.5,
+                        elevation: 2,
+                    },
+                ]}>
+                <react_native_1.View style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 3,
+                    borderWidth: 1.2,
+                    borderColor: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky400,
+                    backgroundColor: isSelected ? AppColors_1.AppColors.white : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                  {isSelected && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.sky600} size={8}/>}
+                </react_native_1.View>
+                <NetworkIcons_1.GlobeIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky600} size={11}/>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10,
+                    color: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky600,
+                }}>
+                  {t('analytics.screensCategory')}: {categoryStats.page_view} ({categoryStats.page_viewPct}%)
+                </react_native_1.Text>
+              </TouchableScale_1.default>);
+        })()}
+
+          {/* System Button */}
+          {(() => {
+            const isSelected = !analyticsFilters.categories.has('all') &&
+                analyticsFilters.categories.has('system');
+            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('system')} style={[
+                    {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 5,
+                        backgroundColor: isSelected ? AppColors_1.AppColors.violet600 : AppColors_1.AppColors.purple100,
+                        paddingHorizontal: 8,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        borderWidth: 1,
+                        borderColor: isSelected ? AppColors_1.AppColors.purpleShade700 : AppColors_1.AppColors.purple200,
+                    },
+                    isSelected && {
+                        shadowColor: AppColors_1.AppColors.violet600,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.28,
+                        shadowRadius: 2.5,
+                        elevation: 2,
+                    },
+                ]}>
+                <react_native_1.View style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 3,
+                    borderWidth: 1.2,
+                    borderColor: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple400,
+                    backgroundColor: isSelected ? AppColors_1.AppColors.white : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                  {isSelected && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.violet600} size={8}/>}
+                </react_native_1.View>
+                <NetworkIcons_1.BoltIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10,
+                    color: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.brandPurple,
+                }}>
+                  {t('analytics.systemCategory')}: {categoryStats.system} ({categoryStats.systemPct}%)
+                </react_native_1.Text>
+              </TouchableScale_1.default>);
+        })()}
+
+          {/* Custom Button */}
+          {(() => {
+            const isSelected = !analyticsFilters.categories.has('all') &&
+                analyticsFilters.categories.has('custom');
+            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('custom')} style={[
+                    {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 5,
+                        backgroundColor: isSelected ? AppColors_1.AppColors.pink600 : AppColors_1.AppColors.pink100,
+                        paddingHorizontal: 8,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        borderWidth: 1,
+                        borderColor: isSelected ? AppColors_1.AppColors.rose700 : AppColors_1.AppColors.roseBorder,
+                    },
+                    isSelected && {
+                        shadowColor: AppColors_1.AppColors.pink600,
+                        shadowOffset: { width: 0, height: 1 },
+                        shadowOpacity: 0.28,
+                        shadowRadius: 2.5,
+                        elevation: 2,
+                    },
+                ]}>
+                <react_native_1.View style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 3,
+                    borderWidth: 1.2,
+                    borderColor: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.pink400,
+                    backgroundColor: isSelected ? AppColors_1.AppColors.white : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                  {isSelected && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.pink600} size={8}/>}
+                </react_native_1.View>
+                <NetworkIcons_1.SparkleIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.brandPurple} size={11}/>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10,
+                    color: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.pink600,
+                }}>
+                  {t('analytics.customCategory')}: {categoryStats.custom} ({categoryStats.customPct}%)
+                </react_native_1.Text>
+              </TouchableScale_1.default>);
+        })()}
+        </react_native_1.View>
+      </react_native_1.View>
+
+      {/* ── 3. GA4 Realtime Metric Hero & Activity Chart (UNDER CATEGORIES) ─ */}
       <react_native_1.View style={{
-            marginTop: 10,
+            marginTop: 2,
             marginBottom: 8,
             backgroundColor: AppColors_1.AppColors.grayBackground,
             borderRadius: 10,
@@ -337,41 +627,55 @@ const AnalyticsHeader = react_1.default.memo(() => {
           </react_native_1.View>
         </react_native_1.View>
 
-        {/* ── High Precision SVG Spline Area Graph ── */}
+        {/* ── Crashlytics-Style Multi-Bar Histogram with Trendline Overlay ── */}
         <react_native_1.View style={{ height: chartHeight, position: 'relative' }}>
           <react_native_svg_1.default width="100%" height={chartHeight} viewBox={`0 0 ${svgWidth} ${chartHeight}`}>
             <react_native_svg_1.Defs>
-              <react_native_svg_1.LinearGradient id="telemetryAreaGrad" x1="0" y1="0" x2="0" y2="1">
-                <react_native_svg_1.Stop offset="0%" stopColor={AppColors_1.AppColors.brandPurple} stopOpacity="0.4"/>
-                <react_native_svg_1.Stop offset="80%" stopColor={AppColors_1.AppColors.brandPurple} stopOpacity="0.05"/>
-                <react_native_svg_1.Stop offset="100%" stopColor={AppColors_1.AppColors.brandPurple} stopOpacity="0.0"/>
+              <react_native_svg_1.LinearGradient id="crashlyticsBarGrad" x1="0" y1="0" x2="0" y2="1">
+                <react_native_svg_1.Stop offset="0%" stopColor="#8B5CF6" stopOpacity="0.9"/>
+                <react_native_svg_1.Stop offset="100%" stopColor="#6366F1" stopOpacity="0.6"/>
+              </react_native_svg_1.LinearGradient>
+              <react_native_svg_1.LinearGradient id="crashlyticsAreaGrad" x1="0" y1="0" x2="0" y2="1">
+                <react_native_svg_1.Stop offset="0%" stopColor="#8B5CF6" stopOpacity="0.25"/>
+                <react_native_svg_1.Stop offset="80%" stopColor="#8B5CF6" stopOpacity="0.04"/>
+                <react_native_svg_1.Stop offset="100%" stopColor="#8B5CF6" stopOpacity="0.0"/>
               </react_native_svg_1.LinearGradient>
             </react_native_svg_1.Defs>
 
-            {/* Baseline & Grid lines */}
-            <react_native_svg_1.Line x1="8" y1={chartHeight - 6} x2={svgWidth - 8} y2={chartHeight - 6} stroke={AppColors_1.AppColors.dividerColor} strokeWidth="1"/>
-            <react_native_svg_1.Line x1="8" y1={chartHeight / 2} x2={svgWidth - 8} y2={chartHeight / 2} stroke={AppColors_1.AppColors.dividerColor} strokeWidth="0.8" strokeDasharray="3,3"/>
+            {/* Subtle Grid Guidelines */}
+            <react_native_svg_1.Line x1="6" y1={chartHeight - 6} x2={svgWidth - 6} y2={chartHeight - 6} stroke="#E2E8F0" strokeWidth="1"/>
+            <react_native_svg_1.Line x1="6" y1={chartHeight / 2} x2={svgWidth - 6} y2={chartHeight / 2} stroke="#F1F5F9" strokeWidth="1" strokeDasharray="4,4"/>
 
-            {/* Glowing Area Fill */}
-            <react_native_svg_1.Path d={histogramData.areaPath} fill="url(#telemetryAreaGrad)"/>
+            {/* Glowing Area Underlay */}
+            <react_native_svg_1.Path d={histogramData.areaPath} fill="url(#crashlyticsAreaGrad)"/>
 
-            {/* Smooth Spline Wave Stroke */}
-            <react_native_svg_1.Path d={histogramData.linePath} fill="none" stroke={AppColors_1.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 (<react_native_svg_1.G key={b.index}>
-                  {isSelected && (<react_native_svg_1.Line x1={b.x} y1={4} x2={b.x} y2={chartHeight - 6} stroke={AppColors_1.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 (<react_native_svg_1.G key={`bar-${b.index}`}>
+                  {/* Background slot */}
+                  <react_native_svg_1.Rect x={barX} y={6} width={barWidth} height={chartHeight - 14} rx={3} fill={isSelected ? '#EDE9FE' : '#F8FAFC'}/>
 
-                  {b.total > 0 && (<react_native_svg_1.Circle cx={b.x} cy={b.y} r={isSelected ? 4.5 : 2.8} fill={isSelected ? AppColors_1.AppColors.brandPurple : AppColors_1.AppColors.white} stroke={AppColors_1.AppColors.brandPurple} strokeWidth={isSelected ? 2 : 1.5}/>)}
+                  {/* Active Event Bar */}
+                  {b.total > 0 && (<react_native_svg_1.Rect x={barX} y={barY} width={barWidth} height={barHeight} rx={3} fill="url(#crashlyticsBarGrad)"/>)}
 
-                  {b.isLatest && (<react_native_svg_1.G>
-                      <react_native_svg_1.Circle cx={b.x} cy={b.y} r="6.5" fill={AppColors_1.AppColors.brandPurple} opacity="0.22"/>
-                      <react_native_svg_1.Circle cx={b.x} cy={b.y} r="3" fill={AppColors_1.AppColors.brandPurple}/>
-                    </react_native_svg_1.G>)}
+                  {/* Selected Cursor Line */}
+                  {isSelected && (<react_native_svg_1.Line x1={b.x} y1={4} x2={b.x} y2={chartHeight - 6} stroke="#8B5CF6" strokeWidth="1.5" strokeDasharray="2,2"/>)}
                 </react_native_svg_1.G>);
         })}
+
+            {/* Crashlytics Apex Trendline */}
+            <react_native_svg_1.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 && (<react_native_svg_1.G>
+                <react_native_svg_1.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"/>
+                <react_native_svg_1.Circle cx={histogramData.buckets[histogramData.buckets.length - 1].x} cy={histogramData.buckets[histogramData.buckets.length - 1].y} r="3" fill="#7C3AED"/>
+              </react_native_svg_1.G>)}
           </react_native_svg_1.default>
 
           {/* Invisible Touch Columns for Interactive Bucket Selection */}
@@ -461,199 +765,6 @@ const AnalyticsHeader = react_1.default.memo(() => {
         </react_native_1.View>
       </react_native_1.View>
 
-      {/* ── Category Breakdown Distribution Bar & Interactive Filter Buttons ─ */}
-      <react_native_1.View style={{ marginTop: 2, marginBottom: 4 }}>
-        {/* Multi-color Proportional Segmented Bar */}
-        <react_native_1.View style={{
-            height: 5,
-            borderRadius: 2.5,
-            backgroundColor: `${AppColors_1.AppColors.grayBorderSecondary}40`,
-            flexDirection: 'row',
-            overflow: 'hidden',
-            marginBottom: 8,
-        }}>
-          {categoryStats.ecommerce > 0 && (<react_native_1.View style={{
-                flex: categoryStats.ecommerce,
-                backgroundColor: AppColors_1.AppColors.amber500,
-            }}/>)}
-          {categoryStats.page_view > 0 && (<react_native_1.View style={{
-                flex: categoryStats.page_view,
-                backgroundColor: AppColors_1.AppColors.sky500,
-            }}/>)}
-          {categoryStats.system > 0 && (<react_native_1.View style={{
-                flex: categoryStats.system,
-                backgroundColor: AppColors_1.AppColors.purple,
-            }}/>)}
-          {categoryStats.custom > 0 && (<react_native_1.View style={{
-                flex: categoryStats.custom,
-                backgroundColor: AppColors_1.AppColors.brandPurple,
-            }}/>)}
-        </react_native_1.View>
-
-        {/* 4 Interactive Category Filter Buttons */}
-        <react_native_1.View style={{
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-            gap: 6,
-        }}>
-          {/* Ecommerce Button */}
-          {(() => {
-            const isSelected = !analyticsFilters.categories.has('all') &&
-                analyticsFilters.categories.has('ecommerce');
-            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('ecommerce')} style={[
-                    {
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 4.5,
-                        backgroundColor: isSelected
-                            ? AppColors_1.AppColors.amber500
-                            : `${AppColors_1.AppColors.amber500}14`,
-                        paddingHorizontal: 7,
-                        paddingVertical: 4.5,
-                        borderRadius: 6,
-                        borderWidth: 1,
-                        borderColor: isSelected
-                            ? AppColors_1.AppColors.amber500
-                            : `${AppColors_1.AppColors.amber500}35`,
-                    },
-                    isSelected && {
-                        shadowColor: AppColors_1.AppColors.amber500,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.25,
-                        shadowRadius: 2,
-                        elevation: 2,
-                    },
-                ]}>
-                <NetworkIcons_1.CartIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber700} size={11}/>
-                <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 10,
-                    color: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber700,
-                }}>
-                  Ecommerce: {categoryStats.ecommerce} ({categoryStats.ecommercePct}%)
-                </react_native_1.Text>
-              </TouchableScale_1.default>);
-        })()}
-
-          {/* Screens Button */}
-          {(() => {
-            const isSelected = !analyticsFilters.categories.has('all') &&
-                analyticsFilters.categories.has('page_view');
-            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('page_view')} style={[
-                    {
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 4.5,
-                        backgroundColor: isSelected
-                            ? AppColors_1.AppColors.sky600
-                            : `${AppColors_1.AppColors.sky500}14`,
-                        paddingHorizontal: 7,
-                        paddingVertical: 4.5,
-                        borderRadius: 6,
-                        borderWidth: 1,
-                        borderColor: isSelected
-                            ? AppColors_1.AppColors.sky600
-                            : `${AppColors_1.AppColors.sky500}35`,
-                    },
-                    isSelected && {
-                        shadowColor: AppColors_1.AppColors.sky600,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.25,
-                        shadowRadius: 2,
-                        elevation: 2,
-                    },
-                ]}>
-                <NetworkIcons_1.GlobeIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky600} size={11}/>
-                <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 10,
-                    color: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky600,
-                }}>
-                  Screens: {categoryStats.page_view} ({categoryStats.page_viewPct}%)
-                </react_native_1.Text>
-              </TouchableScale_1.default>);
-        })()}
-
-          {/* System Button */}
-          {(() => {
-            const isSelected = !analyticsFilters.categories.has('all') &&
-                analyticsFilters.categories.has('system');
-            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('system')} style={[
-                    {
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 4.5,
-                        backgroundColor: isSelected
-                            ? AppColors_1.AppColors.purple
-                            : `${AppColors_1.AppColors.purple}14`,
-                        paddingHorizontal: 7,
-                        paddingVertical: 4.5,
-                        borderRadius: 6,
-                        borderWidth: 1,
-                        borderColor: isSelected
-                            ? AppColors_1.AppColors.purple
-                            : `${AppColors_1.AppColors.purple}35`,
-                    },
-                    isSelected && {
-                        shadowColor: AppColors_1.AppColors.purple,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.25,
-                        shadowRadius: 2,
-                        elevation: 2,
-                    },
-                ]}>
-                <NetworkIcons_1.BoltIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>
-                <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 10,
-                    color: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple,
-                }}>
-                  System: {categoryStats.system} ({categoryStats.systemPct}%)
-                </react_native_1.Text>
-              </TouchableScale_1.default>);
-        })()}
-
-          {/* Custom Button */}
-          {(() => {
-            const isSelected = !analyticsFilters.categories.has('all') &&
-                analyticsFilters.categories.has('custom');
-            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('custom')} style={[
-                    {
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 4.5,
-                        backgroundColor: isSelected
-                            ? AppColors_1.AppColors.brandPurple
-                            : `${AppColors_1.AppColors.brandPurple}14`,
-                        paddingHorizontal: 7,
-                        paddingVertical: 4.5,
-                        borderRadius: 6,
-                        borderWidth: 1,
-                        borderColor: isSelected
-                            ? AppColors_1.AppColors.brandPurple
-                            : `${AppColors_1.AppColors.brandPurple}35`,
-                    },
-                    isSelected && {
-                        shadowColor: AppColors_1.AppColors.brandPurple,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.25,
-                        shadowRadius: 2,
-                        elevation: 2,
-                    },
-                ]}>
-                <NetworkIcons_1.SparkleIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.brandPurple} size={11}/>
-                <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 10,
-                    color: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.brandPurple,
-                }}>
-                  Custom: {categoryStats.custom} ({categoryStats.customPct}%)
-                </react_native_1.Text>
-              </TouchableScale_1.default>);
-        })()}
-        </react_native_1.View>
-      </react_native_1.View>
-
       {/* ── Top Screens / Views Mini Leaderboard (GA4 Realtime Overview) ──── */}
       {topScreens.length > 0 && (<react_native_1.View style={{
                 marginTop: 8,