react-native-inapp-inspector 1.1.24 → 1.1.26

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

@@ -41,13 +41,17 @@ const react_native_1 = require("react-native");
 const InspectorContext_1 = require("./InspectorContext");
 const AnalyticsEventCard_1 = __importDefault(require("../AnalyticsEventCard"));
 const AnalyticsDetail_1 = __importDefault(require("../AnalyticsDetail"));
+const AnalyticsFilterModal_1 = __importDefault(require("./AnalyticsFilterModal"));
 const EndOfListFooter_1 = __importDefault(require("../EndOfListFooter"));
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
 const analyticsLogger_1 = require("../../customHooks/analyticsLogger");
+const helpers_1 = require("../../helpers");
 const NetworkIcons_1 = require("../NetworkIcons");
 const AnalyticsHeader = react_1.default.memo(() => {
-    const { filteredAnalyticsEvents, analyticsHeaderExpanded, setAnalyticsHeaderExpanded, } = (0, InspectorContext_1.useInspector)();
+    const { analyticsEvents, filteredAnalyticsEvents, analyticsFilters, setAnalyticsFilters, analyticsHeaderExpanded, setAnalyticsHeaderExpanded, } = (0, InspectorContext_1.useInspector)();
     const userId = (0, analyticsLogger_1.getCurrentUserId)();
     const userProperties = (0, analyticsLogger_1.getCurrentUserProperties)();
     const defaultParams = (0, analyticsLogger_1.getDefaultEventParameters)();
@@ -55,34 +59,628 @@ const AnalyticsHeader = react_1.default.memo(() => {
     const hasUserProps = Object.keys(userProperties).length > 0;
     const hasDefaultParams = Object.keys(defaultParams).length > 0;
     const totalEvents = filteredAnalyticsEvents.length;
+    // Category counts & breakdown across all session events
+    const categoryStats = (0, react_1.useMemo)(() => {
+        let ecommerce = 0;
+        let page_view = 0;
+        let system = 0;
+        let custom = 0;
+        let totalRevenue = 0;
+        for (const e of analyticsEvents) {
+            const cat = (0, helpers_1.getEventCategory)(e.name);
+            const c = e.count || 1;
+            if (cat === 'ecommerce') {
+                ecommerce += c;
+                const val = e.params?.value ?? e.params?.price;
+                if (val && !isNaN(Number(val))) {
+                    totalRevenue += Number(val);
+                }
+            }
+            else if (cat === 'page_view') {
+                page_view += c;
+            }
+            else if (cat === 'system') {
+                system += c;
+            }
+            else {
+                custom += c;
+            }
+        }
+        const total = ecommerce + page_view + system + custom || 1;
+        return {
+            ecommerce,
+            page_view,
+            system,
+            custom,
+            totalRevenue,
+            ecommercePct: Math.round((ecommerce / total) * 100),
+            page_viewPct: Math.round((page_view / total) * 100),
+            systemPct: Math.round((system / total) * 100),
+            customPct: Math.round((custom / total) * 100),
+            totalCount: total,
+        };
+    }, [analyticsEvents]);
+    // Top Screen Views Leaderboard (GA4 Realtime Card)
+    const topScreens = (0, react_1.useMemo)(() => {
+        const screenMap = new Map();
+        for (const e of filteredAnalyticsEvents) {
+            const scr = e.screenName ||
+                e.params?.firebase_screen ||
+                e.params?.screen_name ||
+                e.params?.firebase_screen_class ||
+                e.screenClass;
+            if (scr && typeof scr === 'string' && scr.trim() !== '') {
+                screenMap.set(scr, (screenMap.get(scr) || 0) + (e.count || 1));
+            }
+        }
+        const arr = Array.from(screenMap.entries()).sort((a, b) => b[1] - a[1]);
+        const maxVal = arr.length > 0 ? arr[0][1] : 1;
+        return arr.slice(0, 3).map(([name, count]) => ({
+            name,
+            count,
+            pct: Math.round((count / (filteredAnalyticsEvents.length || 1)) * 100),
+            barWidthPct: Math.round((count / maxVal) * 100),
+        }));
+    }, [filteredAnalyticsEvents]);
+    // Toggle category filter 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) {
+                return { ...prev, categories: new Set(['all']) };
+            }
+            else {
+                return { ...prev, categories: new Set([cat]) };
+            }
+        });
+    };
+    // 12-Bucket GA4 Realtime Stacked Histogram Graph (-30m / 30s to NOW)
+    const BUCKET_COUNT = 12;
+    const chartHeight = 56;
+    const histogramBars = (0, react_1.useMemo)(() => {
+        const buckets = Array.from({ length: BUCKET_COUNT }, () => ({
+            ecommerce: 0,
+            page_view: 0,
+            system: 0,
+            custom: 0,
+            total: 0,
+        }));
+        const now = Date.now();
+        const windowMs = 60000; // 60s window
+        const bucketDuration = windowMs / BUCKET_COUNT;
+        for (const e of filteredAnalyticsEvents) {
+            const age = now - e.timestamp;
+            if (age >= 0 && age < windowMs) {
+                const bucketIdx = Math.floor((windowMs - 1 - age) / bucketDuration);
+                if (bucketIdx >= 0 && bucketIdx < BUCKET_COUNT) {
+                    const cat = (0, helpers_1.getEventCategory)(e.name);
+                    const c = e.count || 1;
+                    buckets[bucketIdx].total += c;
+                    if (cat === 'ecommerce')
+                        buckets[bucketIdx].ecommerce += c;
+                    else if (cat === 'page_view')
+                        buckets[bucketIdx].page_view += c;
+                    else if (cat === 'system')
+                        buckets[bucketIdx].system += c;
+                    else
+                        buckets[bucketIdx].custom += c;
+                }
+            }
+        }
+        const maxVal = Math.max(...buckets.map(b => b.total), 4);
+        return buckets.map((b, idx) => {
+            const totalH = Math.max((b.total / maxVal) * (chartHeight - 14), b.total > 0 ? 8 : 2.5);
+            const ecomH = b.total > 0 ? (b.ecommerce / b.total) * totalH : 0;
+            const screenH = b.total > 0 ? (b.page_view / b.total) * totalH : 0;
+            const sysH = b.total > 0 ? (b.system / b.total) * totalH : 0;
+            const custH = b.total > 0 ? (b.custom / b.total) * totalH : totalH;
+            return {
+                index: idx,
+                total: b.total,
+                totalHeight: totalH,
+                ecomHeight: ecomH,
+                screenHeight: screenH,
+                sysHeight: sysH,
+                custHeight: custH,
+                isLatest: idx === BUCKET_COUNT - 1,
+            };
+        });
+    }, [filteredAnalyticsEvents, chartHeight]);
     return (<react_native_1.View style={styles_1.default.analyticsHeaderCard}>
-      <react_native_1.View style={[styles_1.default.analyticsHeaderTop, !analyticsHeaderExpanded && { marginBottom: 0 }]}>
+      {/* ── 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 }}>
-            <react_native_1.Text style={styles_1.default.analyticsHeaderTitle}>Session Info</react_native_1.Text>
+            <react_native_1.Text style={styles_1.default.analyticsHeaderTitle}>Users in last 30 minutes</react_native_1.Text>
             <react_native_1.View style={[
             styles_1.default.statusDot,
-            { backgroundColor: isTrackingEnabled ? AppColors_1.AppColors.greenColor : AppColors_1.AppColors.errorColor }
+            {
+                backgroundColor: isTrackingEnabled
+                    ? AppColors_1.AppColors.greenColor
+                    : AppColors_1.AppColors.errorColor,
+            },
         ]}/>
-            <react_native_1.Text style={styles_1.default.statusText}>
-              {isTrackingEnabled ? 'Active' : 'Paused'}
+            <react_native_1.Text style={[
+            styles_1.default.statusText,
+            {
+                color: isTrackingEnabled
+                    ? AppColors_1.AppColors.greenColor
+                    : AppColors_1.AppColors.errorColor,
+                fontFamily: AppFonts_1.AppFonts.interBold,
+            },
+        ]}>
+              {isTrackingEnabled ? 'Realtime' : 'Paused'}
             </react_native_1.Text>
           </react_native_1.View>
           <react_native_1.Text style={styles_1.default.analyticsHeaderSubtitle} numberOfLines={1}>
-            {userId ? `User ID: ${userId}` : 'Anonymous Session'}
+            {userId ? `User: ${userId}` : 'Anonymous Session'}
           </react_native_1.Text>
         </react_native_1.View>
-        
+
         <react_native_1.TouchableOpacity style={styles_1.default.analyticsHeaderToggle} activeOpacity={0.7} onPress={() => {
             (0, InspectorContext_1.animateNextLayout)();
             setAnalyticsHeaderExpanded(!analyticsHeaderExpanded);
         }}>
           <react_native_1.Text style={styles_1.default.analyticsHeaderToggleText}>
-            {analyticsHeaderExpanded ? 'Collapse' : 'Expand'}
+            {analyticsHeaderExpanded ? 'Hide Info' : 'Session Info'}
           </react_native_1.Text>
         </react_native_1.TouchableOpacity>
       </react_native_1.View>
 
+      {/* ── GA4 Realtime Metric Hero & Activity Chart ─────────────────────── */}
+      <react_native_1.View style={{
+            marginTop: 10,
+            marginBottom: 8,
+            backgroundColor: AppColors_1.AppColors.grayBackground,
+            borderRadius: 10,
+            borderWidth: 1,
+            borderColor: AppColors_1.AppColors.dividerColor,
+            padding: 10,
+        }}>
+        {/* Hero Metric Row */}
+        <react_native_1.View style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'flex-start',
+            marginBottom: 8,
+        }}>
+          <react_native_1.View>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'baseline', gap: 6 }}>
+              <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 22,
+            color: AppColors_1.AppColors.primaryBlack,
+            lineHeight: 26,
+        }}>
+                {totalEvents}
+              </react_native_1.Text>
+              <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interMedium,
+            fontSize: 10.5,
+            color: AppColors_1.AppColors.grayTextWeak,
+        }}>
+                events in window
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          {/* Realtime Badges */}
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+            {categoryStats.totalRevenue > 0 && (<react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 3,
+                backgroundColor: `${AppColors_1.AppColors.emerald600}15`,
+                paddingHorizontal: 6,
+                paddingVertical: 2.5,
+                borderRadius: 4,
+                borderWidth: 1,
+                borderColor: `${AppColors_1.AppColors.emerald600}30`,
+            }}>
+                <NetworkIcons_1.MoneyIcon color={AppColors_1.AppColors.emerald600} size={10}/>
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 9.5,
+                color: AppColors_1.AppColors.emerald600,
+            }}>
+                  ${categoryStats.totalRevenue.toFixed(2)}
+                </react_native_1.Text>
+              </react_native_1.View>)}
+            <react_native_1.View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 4,
+            backgroundColor: `${AppColors_1.AppColors.brandPurple}14`,
+            paddingHorizontal: 6,
+            paddingVertical: 2.5,
+            borderRadius: 4,
+            borderWidth: 1,
+            borderColor: `${AppColors_1.AppColors.brandPurple}2E`,
+        }}>
+              <NetworkIcons_1.TargetGoalIcon color={AppColors_1.AppColors.brandPurple} size={10}/>
+              <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 9.5,
+            color: AppColors_1.AppColors.brandPurple,
+        }}>
+                Live Telemetry
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        {/* GA4 Stacked Realtime Histogram Bar Graph */}
+        <react_native_1.View style={{
+            height: chartHeight,
+            flexDirection: 'row',
+            alignItems: 'flex-end',
+            justifyContent: 'space-between',
+            paddingHorizontal: 2,
+            paddingBottom: 2,
+            borderBottomWidth: 1,
+            borderBottomColor: AppColors_1.AppColors.dividerColor,
+        }}>
+          {histogramBars.map(bar => (<react_native_1.View key={bar.index} style={{
+                flex: 1,
+                alignItems: 'center',
+                justifyContent: 'flex-end',
+                height: '100%',
+                marginHorizontal: 1.5,
+            }}>
+              {bar.total > 0 && (<react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 7.5,
+                    color: bar.isLatest
+                        ? AppColors_1.AppColors.brandPurple
+                        : AppColors_1.AppColors.grayTextWeak,
+                    marginBottom: 2,
+                }}>
+                  {bar.total}
+                </react_native_1.Text>)}
+              {/* Stacked Category Segments Column */}
+              <react_native_1.View style={{
+                width: '100%',
+                maxWidth: 15,
+                height: bar.totalHeight,
+                borderRadius: 3,
+                overflow: 'hidden',
+                backgroundColor: bar.total > 0
+                    ? `${AppColors_1.AppColors.grayBorderSecondary}40`
+                    : `${AppColors_1.AppColors.grayBorderSecondary}40`,
+            }}>
+                {bar.total > 0 ? (<>
+                    {bar.ecomHeight > 0 && (<react_native_1.View style={{
+                        height: bar.ecomHeight,
+                        backgroundColor: AppColors_1.AppColors.amber500,
+                    }}/>)}
+                    {bar.screenHeight > 0 && (<react_native_1.View style={{
+                        height: bar.screenHeight,
+                        backgroundColor: AppColors_1.AppColors.sky500,
+                    }}/>)}
+                    {bar.sysHeight > 0 && (<react_native_1.View style={{
+                        height: bar.sysHeight,
+                        backgroundColor: AppColors_1.AppColors.purple,
+                    }}/>)}
+                    {bar.custHeight > 0 && (<react_native_1.View style={{
+                        height: bar.custHeight,
+                        backgroundColor: AppColors_1.AppColors.brandPurple,
+                    }}/>)}
+                  </>) : (<react_native_1.View style={{
+                    height: 2.5,
+                    backgroundColor: `${AppColors_1.AppColors.grayBorderSecondary}80`,
+                }}/>)}
+              </react_native_1.View>
+            </react_native_1.View>))}
+        </react_native_1.View>
+
+        {/* Timeline Axis Labels */}
+        <react_native_1.View style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            marginTop: 4,
+            paddingHorizontal: 2,
+        }}>
+          <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interMedium,
+            fontSize: 8,
+            color: AppColors_1.AppColors.grayTextWeak,
+        }}>
+            -30 min
+          </react_native_1.Text>
+          <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interMedium,
+            fontSize: 8,
+            color: AppColors_1.AppColors.grayTextWeak,
+        }}>
+            -20 min
+          </react_native_1.Text>
+          <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interMedium,
+            fontSize: 8,
+            color: AppColors_1.AppColors.grayTextWeak,
+        }}>
+            -10 min
+          </react_native_1.Text>
+          <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 8,
+            color: AppColors_1.AppColors.brandPurple,
+        }}>
+            NOW
+          </react_native_1.Text>
+        </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,
+                backgroundColor: `${AppColors_1.AppColors.sky500}0A`,
+                borderRadius: 8,
+                borderWidth: 1,
+                borderColor: `${AppColors_1.AppColors.sky500}22`,
+                padding: 8,
+            }}>
+          <react_native_1.View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                marginBottom: 6,
+            }}>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+              <NetworkIcons_1.PinIcon color={AppColors_1.AppColors.sky600} size={11}/>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 9.5,
+                color: AppColors_1.AppColors.sky600,
+                letterSpacing: 0.3,
+            }}>
+                TOP SCREENS (REALTIME)
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interMedium,
+                fontSize: 9,
+                color: AppColors_1.AppColors.grayTextWeak,
+            }}>
+              Views
+            </react_native_1.Text>
+          </react_native_1.View>
+
+          <react_native_1.View style={{ gap: 4 }}>
+            {topScreens.map(scr => (<react_native_1.View key={scr.name}>
+                <react_native_1.View style={{
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: 2,
+                }}>
+                  <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                    fontSize: 10,
+                    color: AppColors_1.AppColors.primaryBlack,
+                }} numberOfLines={1}>
+                    {scr.name}
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9.5,
+                    color: AppColors_1.AppColors.sky600,
+                }}>
+                    {scr.count} ({scr.pct}%)
+                  </react_native_1.Text>
+                </react_native_1.View>
+                {/* Mini Horizontal Progress Meter */}
+                <react_native_1.View style={{
+                    height: 3,
+                    borderRadius: 1.5,
+                    backgroundColor: `${AppColors_1.AppColors.sky500}22`,
+                    overflow: 'hidden',
+                }}>
+                  <react_native_1.View style={{
+                    height: '100%',
+                    width: `${scr.barWidthPct}%`,
+                    backgroundColor: AppColors_1.AppColors.sky500,
+                }}/>
+                </react_native_1.View>
+              </react_native_1.View>))}
+          </react_native_1.View>
+        </react_native_1.View>)}
+
+      {/* ── Expandable User Properties & Default Parameters ───────────────── */}
       {analyticsHeaderExpanded && (<>
           {/* Stats Row */}
           <react_native_1.View style={styles_1.default.analyticsStatsRow}>
@@ -126,7 +724,8 @@ const AnalyticsHeader = react_1.default.memo(() => {
     </react_native_1.View>);
 });
 const AnalyticsTab = react_1.default.memo(() => {
-    const { filteredAnalyticsEvents, analyticsSearch, setAnalyticsSearch, handleDelete, selectedEvent, setSelectedEvent, newEventIds, logRouteMapRef, isAnalyticsLayoutReady, setIsAnalyticsLayoutReady, isAnalyticsPaused, setIsAnalyticsPaused, } = (0, InspectorContext_1.useInspector)();
+    const { filteredAnalyticsEvents, analyticsSearch, setAnalyticsSearch, handleDelete, selectedEvent, setSelectedEvent, newEventIds, logRouteMapRef, isAnalyticsLayoutReady, setIsAnalyticsLayoutReady, isAnalyticsPaused, setIsAnalyticsPaused, isAnalyticsFilterApplied, } = (0, InspectorContext_1.useInspector)();
+    const [isFilterModalOpen, setIsFilterModalOpen] = (0, react_1.useState)(false);
     const keyExtractor = (0, react_1.useCallback)((item, index) => item?.id?.toString() ?? index.toString(), []);
     const renderItem = (0, react_1.useCallback)(({ item, index }) => {
         const prev = filteredAnalyticsEvents[index + 1];
@@ -192,6 +791,31 @@ const AnalyticsTab = react_1.default.memo(() => {
                 ? AppColors_1.AppColors.darkOrange
                 : AppColors_1.AppColors.grayTextStrong} size={16}/>
           </react_native_1.TouchableOpacity>
+
+          {/* GA Dashboard-style Filter Button */}
+          <react_native_1.TouchableOpacity style={[
+                styles_1.default.toolbarBtn,
+                isAnalyticsFilterApplied && {
+                    borderColor: `${AppColors_1.AppColors.brandPurple}60`,
+                    backgroundColor: `${AppColors_1.AppColors.brandPurple}15`,
+                },
+            ]} onPress={() => setIsFilterModalOpen(true)} hitSlop={6}>
+            <NetworkIcons_1.FilterIcon color={isAnalyticsFilterApplied
+                ? AppColors_1.AppColors.brandPurple
+                : AppColors_1.AppColors.grayTextStrong} size={15}/>
+            {isAnalyticsFilterApplied && (<react_native_1.View style={{
+                    position: 'absolute',
+                    top: 2,
+                    right: 2,
+                    width: 7,
+                    height: 7,
+                    borderRadius: 3.5,
+                    backgroundColor: AppColors_1.AppColors.darkOrange,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.white,
+                }}/>)}
+          </react_native_1.TouchableOpacity>
+
           <react_native_1.TouchableOpacity style={[
                 styles_1.default.toolbarBtn,
                 {
@@ -204,6 +828,9 @@ const AnalyticsTab = react_1.default.memo(() => {
         </react_native_1.View>
       </react_native_1.View>)}
 
+      {/* Filter Modal */}
+      <AnalyticsFilterModal_1.default visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)}/>
+
       <react_native_1.View style={{ flex: 1 }} onLayout={() => setIsAnalyticsLayoutReady(true)}>
         {selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : isAnalyticsLayoutReady ? (<react_native_1.FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={5} removeClippedSubviews={false} ListEmptyComponent={<react_native_1.View style={styles_1.default.emptyContainer}>
                 <react_native_1.View style={styles_1.default.emptyIconWrap}>