react-native-inapp-inspector 2.3.19 → 2.3.21

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

@@ -1,940 +1,332 @@
-import React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';
-import { FlatList, Platform, Pressable, Text, TextInput, TouchableOpacity, View, } from 'react-native';
-import { animateNextLayout, useInspector } from './InspectorContext';
-import AnalyticsEventCard from '../AnalyticsEventCard';
-import AnalyticsFilterModal from './AnalyticsFilterModal';
-import EndOfListFooter from '../EndOfListFooter';
-import EmptyState from '../EmptyState';
-import styles from '../../styles';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import { useTranslation } from '../../i18n';
-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 { LayersIcon, SearchIcon, ClearIcon, TrashIcon, 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();
-    const userId = getCurrentUserId();
-    const userProperties = getCurrentUserProperties();
-    const defaultParams = getDefaultEventParameters();
-    const isTrackingEnabled = getCollectionEnabled();
-    if (analyticsEvents.length === 0) {
-        return null;
-    }
-    const hasUserProps = Object.keys(userProperties).length > 0;
-    const hasDefaultParams = Object.keys(defaultParams).length > 0;
-    const totalEvents = filteredAnalyticsEvents.length;
-    const categoryStats = useMemo(() => {
-        let ecommerce = 0;
-        let page_view = 0;
-        let system = 0;
-        let custom = 0;
-        let totalRevenue = 0;
-        for (const e of analyticsEvents) {
-            const cat = 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]);
-    const topScreens = 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]);
-    const toggleCategoryFilter = (cat) => {
-        animateNextLayout();
-        setAnalyticsFilters(prev => {
-            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 {
-                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 };
-        });
-    };
-    const BUCKET_COUNT = 12;
-    const chartHeight = 64;
-    const svgWidth = 320;
-    const [selectedBucketIdx, setSelectedBucketIdx] = useState(null);
-    const [liveTick, setLiveTick] = useState(0);
-    useEffect(() => {
-        if (!isTrackingEnabled)
-            return;
-        const interval = setInterval(() => {
-            setLiveTick(t => (t + 1) % 100000);
-        }, 1000);
-        return () => clearInterval(interval);
-    }, [isTrackingEnabled]);
-    const histogramData = useMemo(() => {
-        const buckets = [];
-        const now = Date.now();
-        const windowMs = 60000;
-        const bucketDuration = windowMs / BUCKET_COUNT;
-        for (let i = 0; i < BUCKET_COUNT; i++) {
-            const bucketAgeSec = Math.round(((BUCKET_COUNT - 1 - i) * bucketDuration) / 1000);
-            buckets.push({
-                index: i,
-                ecommerce: 0,
-                page_view: 0,
-                system: 0,
-                custom: 0,
-                total: 0,
-                x: (i / (BUCKET_COUNT - 1)) * (svgWidth - 24) + 12,
-                y: chartHeight - 12,
-                isLatest: i === BUCKET_COUNT - 1,
-                ageLabel: i === BUCKET_COUNT - 1 ? t('analytics.timeNow') : `-${bucketAgeSec}s`,
-            });
-        }
-        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 = 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);
-        buckets.forEach(b => {
-            const normalizedH = (b.total / maxVal) * (chartHeight - 22);
-            b.y = chartHeight - 10 - normalizedH;
-        });
-        let linePath = `M ${buckets[0].x.toFixed(1)} ${buckets[0].y.toFixed(1)}`;
-        for (let i = 0; i < buckets.length - 1; i++) {
-            const p0 = buckets[Math.max(0, i - 1)];
-            const p1 = buckets[i];
-            const p2 = buckets[i + 1];
-            const p3 = buckets[Math.min(buckets.length - 1, i + 2)];
-            const cp1x = p1.x + (p2.x - p0.x) / 6;
-            const cp1y = p1.y + (p2.y - p0.y) / 6;
-            const cp2x = p2.x - (p3.x - p1.x) / 6;
-            const cp2y = p2.y - (p3.y - p1.y) / 6;
-            linePath += ` C ${cp1x.toFixed(1)} ${cp1y.toFixed(1)}, ${cp2x.toFixed(1)} ${cp2y.toFixed(1)}, ${p2.x.toFixed(1)} ${p2.y.toFixed(1)}`;
-        }
-        const lastB = buckets[buckets.length - 1];
-        const firstB = buckets[0];
-        const areaPath = `${linePath} L ${lastB.x.toFixed(1)} ${chartHeight - 4} L ${firstB.x.toFixed(1)} ${chartHeight - 4} Z`;
-        const peakVal = Math.max(...buckets.map(b => b.total), 0);
-        const eventRate = Math.round(buckets.reduce((a, b) => a + b.total, 0));
-        return {
-            buckets,
-            linePath,
-            areaPath,
-            peakVal,
-            eventRate,
-        };
-    }, [filteredAnalyticsEvents, chartHeight, svgWidth, liveTick, t]);
-    const selectedBucket = selectedBucketIdx != null ? histogramData.buckets[selectedBucketIdx] : null;
-    return (<View style={styles.analyticsHeaderCard}>
+import We,{useCallback as Le,useState as De,useMemo as Ee,useEffect as et,useRef as tt}from"react";import{FlatList as Ct,Platform as kt,Pressable as Tt,ScrollView as St,Text as S,TextInput as Vt,TouchableOpacity as Ce,View as C}from"react-native";import{animateNextLayout as Ae,useInspector as Ne}from"./InspectorContext";import Ft from"../AnalyticsEventCard";import Bt from"./AnalyticsFilterModal";import It from"../EndOfListFooter";import Pt from"../EmptyState";import k from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as V}from"../../styles/AppFonts";import{useTranslation as _e}from"../../i18n";import Ot,{Path as Ge,Rect as Ue,Line as Me,Circle as Ke,G as Je,Defs as Rt,LinearGradient as Qe,Stop as Fe}from"react-native-svg";import Be from"../TouchableScale";import{getCurrentUserId as Dt,getCurrentUserProperties as Et,getDefaultEventParameters as $t,getCollectionEnabled as Lt}from"../../customHooks/analyticsLogger";import{getEventCategory as He}from"../../helpers";import{LayersIcon as At,SearchIcon as Mt,ClearIcon as Ht,TrashIcon as Wt,HeaderPauseIcon as Nt,FilterIcon as _t,CartIcon as Gt,GlobeIcon as Ut,BoltIcon as Kt,SparkleIcon as Jt,PinIcon as Qt,MoneyIcon as Xt,ChevronIcon as Yt}from"../NetworkIcons";const Zt=We.memo(()=>{const{t:I}=_e(),{analyticsEvents:Q,filteredAnalyticsEvents:R,analyticsHeaderExpanded:E,setAnalyticsHeaderExpanded:ke}=Ne(),[$,Ie]=De(!1),Pe=Dt(),Te=Et(),X=$t(),N=Lt();if(Q.length===0)return null;const Se=Object.keys(Te).length>0,ze=Object.keys(X).length>0,G=R.length,Y=Ee(()=>{let t=0,T=0;for(const P of Q){const F=He(P.name),B=P.count||1;if(F==="ecommerce"){t+=B;const D=P.params?.value??P.params?.price;D&&!isNaN(Number(D))&&(T+=Number(D))}}return{ecommerce:t,totalRevenue:T}},[Q]),Oe=Ee(()=>{const t=new Map;for(const F of R){const B=F.screenName||F.params?.firebase_screen||F.params?.screen_name||F.params?.firebase_screen_class||F.screenClass;B&&typeof B=="string"&&B.trim()!==""&&t.set(B,(t.get(B)||0)+(F.count||1))}const T=Array.from(t.entries()).sort((F,B)=>B[1]-F[1]),P=T.length>0?T[0][1]:1;return T.slice(0,3).map(([F,B])=>({name:F,count:B,pct:Math.round(B/(R.length||1)*100),barWidthPct:Math.round(B/P*100)}))},[R]),M=12,z=64,j=320,[U,K]=De(null),[J,$e]=De(0);et(()=>{if(!N)return;const t=setInterval(()=>{$e(T=>(T+1)%1e5)},1e3);return()=>clearInterval(t)},[N]);const O=Ee(()=>{const t=[],T=Date.now(),P=6e4,F=P/M;for(let v=0;v<M;v++){const L=Math.round((M-1-v)*F/1e3);t.push({index:v,ecommerce:0,page_view:0,system:0,custom:0,total:0,x:v/(M-1)*(j-24)+12,y:z-12,isLatest:v===M-1,ageLabel:v===M-1?I("analytics.timeNow"):`-${L}s`})}for(const v of R){const L=T-v.timestamp;if(L>=0&&L<P){const A=Math.floor((P-1-L)/F);if(A>=0&&A<M){const W=He(v.name),_=v.count||1;t[A].total+=_,W==="ecommerce"?t[A].ecommerce+=_:W==="page_view"?t[A].page_view+=_:W==="system"?t[A].system+=_:t[A].custom+=_}}}const B=Math.max(...t.map(v=>v.total),4);t.forEach(v=>{const L=v.total/B*(z-22);v.y=z-10-L});let D=`M ${t[0].x.toFixed(1)} ${t[0].y.toFixed(1)}`;for(let v=0;v<t.length-1;v++){const L=t[Math.max(0,v-1)],A=t[v],W=t[v+1],_=t[Math.min(t.length-1,v+2)],Xe=A.x+(W.x-L.x)/6,Ye=A.y+(W.y-L.y)/6,Ze=W.x-(_.x-A.x)/6,qe=W.y-(_.y-A.y)/6;D+=` C ${Xe.toFixed(1)} ${Ye.toFixed(1)}, ${Ze.toFixed(1)} ${qe.toFixed(1)}, ${W.x.toFixed(1)} ${W.y.toFixed(1)}`}const H=t[t.length-1],Z=t[0],ve=`${D} L ${H.x.toFixed(1)} ${z-4} L ${Z.x.toFixed(1)} ${z-4} Z`,Ve=Math.max(...t.map(v=>v.total),0),Re=Math.round(t.reduce((v,L)=>v+L.total,0));return{buckets:t,linePath:D,areaPath:ve,peakVal:Ve,eventRate:Re}},[R,z,j,J,I]),o=U!=null?O.buckets[U]:null;return<C style={k.analyticsHeaderCard}>
       
-      <View style={styles.analyticsHeaderTop}>
-        <View style={{ flex: 1 }}>
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-            <Text style={styles.analyticsHeaderTitle}>{t('analytics.realtimeStream')}</Text>
-            <View style={[
-            styles.statusDot,
-            {
-                backgroundColor: isTrackingEnabled
-                    ? AppColors.greenColor
-                    : AppColors.errorColor,
-            },
-        ]}/>
-            <Text style={[
-            styles.statusText,
-            {
-                color: isTrackingEnabled
-                    ? AppColors.greenColor
-                    : AppColors.errorColor,
-                fontFamily: AppFonts.interBold,
-            },
-        ]}>
-              {isTrackingEnabled ? t('performance.live') : t('common.pause')}
-            </Text>
-          </View>
-          <Text style={styles.analyticsHeaderSubtitle} numberOfLines={1}>
-            {userId ? `${t('analytics.userId')}: ${userId}` : t('analytics.emptySubtitle')}
-          </Text>
-        </View>
+      <Ce activeOpacity={.7}onPress={()=>{Ae(),Ie(t=>!t)}}style={{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingVertical:2}}>
+        <C style={{flex:1}}>
+          <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
+            <S style={k.analyticsHeaderTitle}>{I("analytics.realtimeStream")}</S>
+            <C style={[k.statusDot,{backgroundColor:N?e.greenColor:e.errorColor}]}/>
+            <S style={[k.statusText,{color:N?e.greenColor:e.errorColor,fontFamily:V.interBold}]}>
+              {I(N?"performance.live":"common.pause")}
+            </S>
+          </C>
+          <S style={k.analyticsHeaderSubtitle}numberOfLines={1}>
+            {Pe?`${I("analytics.userId")}: ${Pe}`:I("analytics.emptySubtitle")}
+          </S>
+        </C>
 
-        <TouchableOpacity style={styles.analyticsHeaderToggle} activeOpacity={0.7} onPress={() => {
-            animateNextLayout();
-            setAnalyticsHeaderExpanded(!analyticsHeaderExpanded);
-        }}>
-          <Text style={styles.analyticsHeaderToggleText}>
-            {analyticsHeaderExpanded ? t('common.close') : t('analytics.eventDetails')}
-          </Text>
-        </TouchableOpacity>
-      </View>
+        <C style={{flexDirection:"row",alignItems:"center",gap:8}}>
+          {$?<Ce style={k.analyticsHeaderToggle}activeOpacity={.7}onPress={t=>{t.stopPropagation(),Ae(),ke(!E)}}>
+              <S style={k.analyticsHeaderToggleText}>
+                {I(E?"common.close":"analytics.eventDetails")}
+              </S>
+            </Ce>:<C style={{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:`${e.purple}14`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,borderWidth:1,borderColor:`${e.purple}25`}}>
+              <S style={{fontFamily:V.interBold,fontSize:10,color:e.purple}}>
+                {G} {G===1?"event":"events"}
+              </S>
+            </C>}
 
-      
-      <View style={{ marginTop: 10, marginBottom: 8 }}>
-        
-        <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>
-
-        
-        <View style={{
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-            gap: 6,
-        }}>
-          
-          {(() => {
-            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,
-                    },
-                ]}>
-                <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>);
-        })()}
-
-          
-          {(() => {
-            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,
-                    },
-                ]}>
-                <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>);
-        })()}
+          <Yt direction={$?"up":"down"}size={16}color={e.grayTextWeak}/>
+        </C>
+      </Ce>
 
+      
+      {$&&<C style={{marginTop:10}}>
           
-          {(() => {
-            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,
-                    },
-                ]}>
-                <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>);
-        })()}
+          <C style={{marginBottom:8,backgroundColor:e.grayBackground,borderRadius:10,borderWidth:1,borderColor:e.dividerColor,padding:10}}>
+            
+            <C style={{flexDirection:"row",justifyContent:"space-between",alignItems:"flex-start",marginBottom:6}}>
+              <C>
+                <C style={{flexDirection:"row",alignItems:"baseline",gap:6}}>
+                  <S style={{fontFamily:V.interBold,fontSize:22,color:e.primaryBlack,lineHeight:26}}>
+                    {G}
+                  </S>
+                  <S style={{fontFamily:V.interMedium,fontSize:10.5,color:e.grayTextWeak}}>
+                    {I("analytics.eventsInWindow")}
+                  </S>
+                </C>
+              </C>
 
-          
-          {(() => {
-            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,
-                    },
-                ]}>
-                <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>);
-        })()}
+              
+              <C style={{flexDirection:"row",alignItems:"center",gap:5}}>
+                <C style={{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${e.purple}14`,paddingHorizontal:6,paddingVertical:2.5,borderRadius:4,borderWidth:1,borderColor:`${e.purple}2E`}}>
+                  <S style={{fontFamily:V.interBold,fontSize:9.5,color:e.purple}}>
+                    {I("analytics.eventVelocity",{rate:O.eventRate})}
+                  </S>
+                </C>
 
-          
-          {(() => {
-            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,
-                    },
-                ]}>
-                <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>
+                {Y.totalRevenue>0&&<C style={{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${e.emerald600}15`,paddingHorizontal:6,paddingVertical:2.5,borderRadius:4,borderWidth:1,borderColor:`${e.emerald600}30`}}>
+                    <Xt color={e.emerald600}size={10}/>
+                    <S style={{fontFamily:V.interBold,fontSize:9.5,color:e.emerald600}}>
+                      ${Y.totalRevenue.toFixed(2)}
+                    </S>
+                  </C>}
+              </C>
+            </C>
 
-      
-      <View style={{
-            marginTop: 2,
-            marginBottom: 8,
-            backgroundColor: AppColors.grayBackground,
-            borderRadius: 10,
-            borderWidth: 1,
-            borderColor: AppColors.dividerColor,
-            padding: 10,
-        }}>
-        
-        <View style={{
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'flex-start',
-            marginBottom: 6,
-        }}>
-          <View>
-            <View style={{ flexDirection: 'row', alignItems: 'baseline', gap: 6 }}>
-              <Text style={{
-            fontFamily: AppFonts.interBold,
-            fontSize: 22,
-            color: AppColors.primaryBlack,
-            lineHeight: 26,
-        }}>
-                {totalEvents}
-              </Text>
-              <Text style={{
-            fontFamily: AppFonts.interMedium,
-            fontSize: 10.5,
-            color: AppColors.grayTextWeak,
-        }}>
-                {t('analytics.eventsInWindow')}
-              </Text>
-            </View>
-          </View>
+            
+            <C style={{height:z,position:"relative",overflow:"hidden",borderRadius:8}}>
+              <Ot width="100%"height={z}viewBox={`0 0 ${j} ${z}`}preserveAspectRatio="none">
+                <Rt>
+                  <Qe id="crashlyticsBarGrad"x1="0"y1="0"x2="0"y2="1">
+                    <Fe offset="0%"stopColor="#8B5CF6"stopOpacity="0.9"/>
+                    <Fe offset="100%"stopColor="#6366F1"stopOpacity="0.6"/>
+                  </Qe>
+                  <Qe id="crashlyticsAreaGrad"x1="0"y1="0"x2="0"y2="1">
+                    <Fe offset="0%"stopColor="#8B5CF6"stopOpacity="0.25"/>
+                    <Fe offset="80%"stopColor="#8B5CF6"stopOpacity="0.04"/>
+                    <Fe offset="100%"stopColor="#8B5CF6"stopOpacity="0.0"/>
+                  </Qe>
+                </Rt>
 
-          
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
-            <View style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 3,
-            backgroundColor: `${AppColors.purple}14`,
-            paddingHorizontal: 6,
-            paddingVertical: 2.5,
-            borderRadius: 4,
-            borderWidth: 1,
-            borderColor: `${AppColors.purple}2E`,
-        }}>
-              <Text style={{
-            fontFamily: AppFonts.interBold,
-            fontSize: 9.5,
-            color: AppColors.purple,
-        }}>
-                {t('analytics.eventVelocity', { rate: histogramData.eventRate })}
-              </Text>
-            </View>
+                
+                <Me x1="6"y1={z-6}x2={j-6}y2={z-6}stroke="#E2E8F0"strokeWidth="1"/>
+                <Me x1="6"y1={z/2}x2={j-6}y2={z/2}stroke="#F1F5F9"strokeWidth="1"strokeDasharray="4,4"/>
 
-            {categoryStats.totalRevenue > 0 && (<View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 3,
-                backgroundColor: `${AppColors.emerald600}15`,
-                paddingHorizontal: 6,
-                paddingVertical: 2.5,
-                borderRadius: 4,
-                borderWidth: 1,
-                borderColor: `${AppColors.emerald600}30`,
-            }}>
-                <MoneyIcon color={AppColors.emerald600} size={10}/>
-                <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 9.5,
-                color: AppColors.emerald600,
-            }}>
-                  ${categoryStats.totalRevenue.toFixed(2)}
-                </Text>
-              </View>)}
-          </View>
-        </View>
+                
+                <Ge d={O.areaPath}fill="url(#crashlyticsAreaGrad)"/>
 
-        
-        <View style={{ height: chartHeight, position: 'relative', overflow: 'hidden', borderRadius: 8 }}>
-          <Svg width="100%" height={chartHeight} viewBox={`0 0 ${svgWidth} ${chartHeight}`} preserveAspectRatio="none">
-            <Defs>
-              <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>
+                
+                {O.buckets.map((t,T)=>{const P=U===T,F=10,B=t.x-F/2,D=Math.max(3,z-8-t.y),H=z-8-D;return<Je key={`bar-${t.index}`}>
+                      
+                      <Ue x={B}y={6}width={F}height={z-14}rx={3}fill={P?"#EDE9FE":"#F8FAFC"}/>
 
-            
-            <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"/>
+                      
+                      {t.total>0&&<Ue x={B}y={H}width={F}height={D}rx={3}fill="url(#crashlyticsBarGrad)"/>}
 
-            
-            <Path d={histogramData.areaPath} fill="url(#crashlyticsAreaGrad)"/>
+                      
+                      {P&&<Me x1={t.x}y1={4}x2={t.x}y2={z-6}stroke="#8B5CF6"strokeWidth="1.5"strokeDasharray="2,2"/>}
+                    </Je>})}
 
-            
-            {histogramData.buckets.map((b, idx) => {
-            const isSelected = selectedBucketIdx === idx;
-            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}`}>
-                  
-                  <Rect x={barX} y={6} width={barWidth} height={chartHeight - 14} rx={3} fill={isSelected ? '#EDE9FE' : '#F8FAFC'}/>
+                
+                <Ge d={O.linePath}fill="none"stroke="#8B5CF6"strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
 
-                  
-                  {b.total > 0 && (<Rect x={barX} y={barY} width={barWidth} height={barHeight} rx={3} fill="url(#crashlyticsBarGrad)"/>)}
+                
+                {O.buckets.length>0&&<Je>
+                    <Ke cx={O.buckets[O.buckets.length-1].x}cy={O.buckets[O.buckets.length-1].y}r="5.5"fill="#8B5CF6"opacity="0.25"/>
+                    <Ke cx={O.buckets[O.buckets.length-1].x}cy={O.buckets[O.buckets.length-1].y}r="3"fill="#7C3AED"/>
+                  </Je>}
+              </Ot>
 
-                  
-                  {isSelected && (<Line x1={b.x} y1={4} x2={b.x} y2={chartHeight - 6} stroke="#8B5CF6" strokeWidth="1.5" strokeDasharray="2,2"/>)}
-                </G>);
-        })}
+              
+              <C style={{position:"absolute",top:0,left:0,right:0,bottom:0,flexDirection:"row"}}>
+                {O.buckets.map((t,T)=><Ce key={t.index}style={{flex:1,height:"100%"}}activeOpacity={.8}onPress={()=>K(U===T?null:T)}/>)}
+              </C>
+            </C>
 
             
-            <Path d={histogramData.linePath} fill="none" stroke="#8B5CF6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+            {o&&<C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:e.white,borderRadius:6,paddingHorizontal:8,paddingVertical:4,marginTop:4,borderWidth:1,borderColor:e.brandPurple}}>
+                <S style={{fontFamily:V.interBold,fontSize:10,color:e.primaryBlack}}>
+                  {I("analytics.selectedBucket",{time:o.ageLabel,count:o.total})}
+                </S>
+                <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                  {o.ecommerce>0&&<S style={{fontSize:9,fontFamily:V.interBold,color:e.amber700}}>
+                      Ecom: {o.ecommerce}
+                    </S>}
+                  {o.page_view>0&&<S style={{fontSize:9,fontFamily:V.interBold,color:e.sky500}}>
+                      Screen: {o.page_view}
+                    </S>}
+                  {o.custom>0&&<S style={{fontSize:9,fontFamily:V.interBold,color:e.brandPurple}}>
+                      Custom: {o.custom}
+                    </S>}
+                </C>
+              </C>}
 
             
-            {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>
+            <C style={{flexDirection:"row",justifyContent:"space-between",marginTop:4,paddingHorizontal:4}}>
+              <S style={{fontFamily:V.interMedium,fontSize:8.5,color:e.grayTextWeak}}>
+                -60s
+              </S>
+              <S style={{fontFamily:V.interMedium,fontSize:8.5,color:e.grayTextWeak}}>
+                -40s
+              </S>
+              <S style={{fontFamily:V.interMedium,fontSize:8.5,color:e.grayTextWeak}}>
+                -20s
+              </S>
+              <S style={{fontFamily:V.interBold,fontSize:8.5,color:e.brandPurple}}>
+                {I("analytics.timeNow")}
+              </S>
+            </C>
+          </C>
 
           
-          <View style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            flexDirection: 'row',
-        }}>
-            {histogramData.buckets.map((b, idx) => (<TouchableOpacity key={b.index} style={{ flex: 1, height: '100%' }} activeOpacity={0.8} onPress={() => setSelectedBucketIdx(selectedBucketIdx === idx ? null : idx)}/>))}
-          </View>
-        </View>
+          {Oe.length>0&&<C style={{marginTop:4,backgroundColor:`${e.sky500}0A`,borderRadius:8,borderWidth:1,borderColor:`${e.sky500}22`,padding:8}}>
+              <C style={{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:6}}>
+                <C style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                  <Qt color={e.sky600}size={11}/>
+                  <S style={{fontFamily:V.interBold,fontSize:9.5,color:e.sky600,letterSpacing:.3}}>
+                    TOP SCREENS (REALTIME)
+                  </S>
+                </C>
+                <S style={{fontFamily:V.interMedium,fontSize:9,color:e.grayTextWeak}}>
+                  Views
+                </S>
+              </C>
+
+              <C style={{gap:4}}>
+                {Oe.map(t=><C key={t.name}>
+                    <C style={{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:2}}>
+                      <S style={{fontFamily:V.interMedium,fontSize:10,color:e.primaryBlack}}numberOfLines={1}>
+                        {t.name}
+                      </S>
+                      <S style={{fontFamily:V.interBold,fontSize:9.5,color:e.sky600}}>
+                        {t.count} ({t.pct}%)
+                      </S>
+                    </C>
+                    
+                    <C style={{height:3,borderRadius:1.5,backgroundColor:`${e.sky500}22`,overflow:"hidden"}}>
+                      <C style={{height:"100%",width:`${t.barWidthPct}%`,backgroundColor:e.sky500}}/>
+                    </C>
+                  </C>)}
+              </C>
+            </C>}
 
-        
-        {selectedBucket && (<View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                backgroundColor: AppColors.white,
-                borderRadius: 6,
-                paddingHorizontal: 8,
-                paddingVertical: 4,
-                marginTop: 4,
-                borderWidth: 1,
-                borderColor: AppColors.brandPurple,
-            }}>
-            <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 10,
-                color: AppColors.primaryBlack,
-            }}>
-              {t('analytics.selectedBucket', {
-                time: selectedBucket.ageLabel,
-                count: selectedBucket.total,
-            })}
-            </Text>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-              {selectedBucket.ecommerce > 0 && (<Text style={{ fontSize: 9, fontFamily: AppFonts.interBold, color: AppColors.amber700 }}>
-                  Ecom: {selectedBucket.ecommerce}
-                </Text>)}
-              {selectedBucket.page_view > 0 && (<Text style={{ fontSize: 9, fontFamily: AppFonts.interBold, color: AppColors.sky500 }}>
-                  Screen: {selectedBucket.page_view}
-                </Text>)}
-              {selectedBucket.custom > 0 && (<Text style={{ fontSize: 9, fontFamily: AppFonts.interBold, color: AppColors.brandPurple }}>
-                  Custom: {selectedBucket.custom}
-                </Text>)}
-            </View>
-          </View>)}
+          
+          {E&&<>
+              
+              <C style={k.analyticsStatsRow}>
+                <C style={k.analyticsStatBox}>
+                  <S style={k.analyticsStatValue}>{G}</S>
+                  <S style={k.analyticsStatLabel}>{I("analytics.eventCount",{count:G})}</S>
+                </C>
+                <C style={k.analyticsStatBox}>
+                  <S style={k.analyticsStatValue}>
+                    {Object.keys(Te).length}
+                  </S>
+                  <S style={k.analyticsStatLabel}>{I("analytics.props")}</S>
+                </C>
+                <C style={k.analyticsStatBox}>
+                  <S style={k.analyticsStatValue}>
+                    {Object.keys(X).length}
+                  </S>
+                  <S style={k.analyticsStatLabel}>{I("analytics.defaultParameters")}</S>
+                </C>
+              </C>
 
-        
-        <View style={{
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            marginTop: 4,
-            paddingHorizontal: 4,
-        }}>
-          <Text style={{
-            fontFamily: AppFonts.interMedium,
-            fontSize: 8.5,
-            color: AppColors.grayTextWeak,
-        }}>
-            -60s
-          </Text>
-          <Text style={{
-            fontFamily: AppFonts.interMedium,
-            fontSize: 8.5,
-            color: AppColors.grayTextWeak,
-        }}>
-            -40s
-          </Text>
-          <Text style={{
-            fontFamily: AppFonts.interMedium,
-            fontSize: 8.5,
-            color: AppColors.grayTextWeak,
-        }}>
-            -20s
-          </Text>
-          <Text style={{
-            fontFamily: AppFonts.interBold,
-            fontSize: 8.5,
-            color: AppColors.brandPurple,
-        }}>
-            {t('analytics.timeNow')}
-          </Text>
-        </View>
-      </View>
+              
+              {(Se||ze)&&<C style={k.analyticsHeaderDetails}>
+                  {Se&&<C style={{marginBottom:10}}>
+                      <S style={k.detailsGroupTitle}>{I("analytics.userProperties")}</S>
+                      {Object.entries(Te).map(([t,T])=><C key={t}style={k.detailsRow}>
+                          <S style={k.detailsKey}selectable={!0}>{t}</S>
+                          <S style={k.detailsValue}selectable={!0}>{String(T)}</S>
+                        </C>)}
+                    </C>}
 
+                  {ze&&<C>
+                      <S style={k.detailsGroupTitle}>{I("analytics.defaultParameters")}</S>
+                      {Object.entries(X).map(([t,T])=><C key={t}style={k.detailsRow}>
+                          <S style={k.detailsKey}selectable={!0}>{t}</S>
+                          <S style={k.detailsValue}selectable={!0}>{String(T)}</S>
+                        </C>)}
+                    </C>}
+                </C>}
+            </>}
+        </C>}
+    </C>}),qt=We.memo(()=>{const{t:I}=_e(),{analyticsEvents:Q,filteredAnalyticsEvents:R,analyticsSearch:E,setAnalyticsSearch:ke,analyticsFilters:$,setAnalyticsFilters:Ie,handleDelete:Pe,selectedEvent:Te,setSelectedEvent:X,newEventIds:N,logRouteMapRef:Se,isAnalyticsLayoutReady:ze,setIsAnalyticsLayoutReady:G,isAnalyticsPaused:Y,setIsAnalyticsPaused:Oe,isAnalyticsFilterApplied:M}=Ne(),z=tt(null),[j,U]=De(!1),K=Ee(()=>{let o=0,t=0,T=0,P=0;for(const B of Q){const D=He(B.name),H=B.count||1;D==="ecommerce"?o+=H:D==="page_view"?t+=H:D==="system"?T+=H:P+=H}const F=o+t+T+P;return{ecommerce:o,page_view:t,system:T,custom:P,totalCount:F}},[Q]),J=Le(o=>{Ae(),Ie(t=>{if(o==="all")return{...t,categories:new Set(["all"])};const T=new Set(t.categories);if(T.has("all"))T.delete("all"),T.add(o);else if(T.has(o))T.delete(o),T.size===0&&T.add("all");else if(T.add(o),T.has("ecommerce")&&T.has("page_view")&&T.has("system")&&T.has("custom"))return{...t,categories:new Set(["all"])};return{...t,categories:T}})},[Ie]),$e=Le((o,t)=>o?.id?.toString()??t.toString(),[]),O=Le(({item:o,index:t})=>{const T=R[t+1],P=R[t-1],F=T?o.timestamp-T.timestamp:void 0,B=Math.floor(o.timestamp/6e4),D=P?Math.floor(P.timestamp/6e4):-1,H=t===0||B!==D;return<Ft event={o}onPress={()=>{X(o)}}isNew={N.has(o.id)}searchStr={E}isFirst={t===0}isLast={t===R.length-1}msSincePrev={F}showTimestamp={H}computedScreenName={(()=>{if(!o)return"";const Z=o.screenName||o.screenClass||o.pageTitle||o.pageLocation||o.params?.firebase_screen||o.params?.screen_name||o.params?.firebase_screen_class||o.params?.screen_class;let ve=typeof Z=="string"?Z:Z?JSON.stringify(Z):"";const Ve=Se.current.get(o.id+1e6);if(!ve&&Ve&&Ve.path!=="Navigators"){const Re=Ve.path.split(" \u2794 ");ve=Re[Re.length-1]}return ve})()}/>},[R,E,N,X,Se]);return<>
       
-      {topScreens.length > 0 && (<View style={{
-                marginTop: 8,
-                backgroundColor: `${AppColors.sky500}0A`,
-                borderRadius: 8,
-                borderWidth: 1,
-                borderColor: `${AppColors.sky500}22`,
-                padding: 8,
-            }}>
-          <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                marginBottom: 6,
-            }}>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
-              <PinIcon color={AppColors.sky600} size={11}/>
-              <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 9.5,
-                color: AppColors.sky600,
-                letterSpacing: 0.3,
-            }}>
-                TOP SCREENS (REALTIME)
-              </Text>
-            </View>
-            <Text style={{
-                fontFamily: AppFonts.interMedium,
-                fontSize: 9,
-                color: AppColors.grayTextWeak,
-            }}>
-              Views
-            </Text>
-          </View>
+      {Te==null&&<C style={{backgroundColor:e.white,borderBottomWidth:1,borderBottomColor:e.dividerColor,paddingBottom:6}}>
+          <C style={[k.toolbarRow,{marginTop:12,marginBottom:8}]}>
+            <C style={k.searchContainer}>
+              <Mt color={e.grayTextWeak}size={16}/>
+              <Vt placeholder="Search events..."placeholderTextColor={e.grayTextWeak}value={E}onChangeText={ke}style={k.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+              {E.length>0&&<C style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                  <C style={{backgroundColor:`${e.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
+                    <S style={{color:e.purple,fontSize:9.5,fontFamily:V.interBold}}>
+                      {R.length}
+                    </S>
+                  </C>
+                  <Tt onPress={()=>ke("")}hitSlop={10}style={k.clearBtn}>
+                    <Ht color={e.grayTextWeak}size={13}/>
+                  </Tt>
+                </C>}
+            </C>
+            <C style={k.toolbarRight}>
+              <Ce style={[k.toolbarBtn,Y&&{borderColor:`${e.darkOrange}50`,backgroundColor:`${e.darkOrange}18`}]}onPress={()=>Oe(o=>!o)}hitSlop={6}>
+                <Nt isPaused={Y}color={Y?e.darkOrange:e.grayTextStrong}size={16}/>
+              </Ce>
 
-          <View style={{ gap: 4 }}>
-            {topScreens.map(scr => (<View key={scr.name}>
-                <View style={{
-                    flexDirection: 'row',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    marginBottom: 2,
-                }}>
-                  <Text style={{
-                    fontFamily: AppFonts.interMedium,
-                    fontSize: 10,
-                    color: AppColors.primaryBlack,
-                }} numberOfLines={1}>
-                    {scr.name}
-                  </Text>
-                  <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9.5,
-                    color: AppColors.sky600,
-                }}>
-                    {scr.count} ({scr.pct}%)
-                  </Text>
-                </View>
-                
-                <View style={{
-                    height: 3,
-                    borderRadius: 1.5,
-                    backgroundColor: `${AppColors.sky500}22`,
-                    overflow: 'hidden',
-                }}>
-                  <View style={{
-                    height: '100%',
-                    width: `${scr.barWidthPct}%`,
-                    backgroundColor: AppColors.sky500,
-                }}/>
-                </View>
-              </View>))}
-          </View>
-        </View>)}
+              
+              <Ce style={[k.toolbarBtn,M&&{borderColor:`${e.brandPurple}60`,backgroundColor:`${e.brandPurple}15`}]}onPress={()=>U(!0)}hitSlop={6}>
+                <_t color={M?e.brandPurple:e.grayTextStrong}size={15}/>
+                {M&&<C style={{position:"absolute",top:2,right:2,width:7,height:7,borderRadius:3.5,backgroundColor:e.darkOrange,borderWidth:1,borderColor:e.white}}/>}
+              </Ce>
 
-      
-      {analyticsHeaderExpanded && (<>
-          
-          <View style={styles.analyticsStatsRow}>
-            <View style={styles.analyticsStatBox}>
-              <Text style={styles.analyticsStatValue}>{totalEvents}</Text>
-              <Text style={styles.analyticsStatLabel}>{t('analytics.eventCount', { count: totalEvents })}</Text>
-            </View>
-            <View style={styles.analyticsStatBox}>
-              <Text style={styles.analyticsStatValue}>
-                {Object.keys(userProperties).length}
-              </Text>
-              <Text style={styles.analyticsStatLabel}>{t('analytics.props')}</Text>
-            </View>
-            <View style={styles.analyticsStatBox}>
-              <Text style={styles.analyticsStatValue}>
-                {Object.keys(defaultParams).length}
-              </Text>
-              <Text style={styles.analyticsStatLabel}>{t('analytics.defaultParameters')}</Text>
-            </View>
-          </View>
+              <Ce style={[k.toolbarBtn,{borderColor:`${e.errorColor}38`,backgroundColor:`${e.errorColor}0F`}]}onPress={Pe}hitSlop={6}>
+                <Wt color={e.errorColor}size={15}/>
+              </Ce>
+            </C>
+          </C>
 
           
-          {(hasUserProps || hasDefaultParams) && (<View style={styles.analyticsHeaderDetails}>
-              {hasUserProps && (<View style={{ marginBottom: 10 }}>
-                  <Text style={styles.detailsGroupTitle}>{t('analytics.userProperties')}</Text>
-                  {Object.entries(userProperties).map(([k, v]) => (<View key={k} style={styles.detailsRow}>
-                      <Text style={styles.detailsKey} selectable={true}>{k}</Text>
-                      <Text style={styles.detailsValue} selectable={true}>{String(v)}</Text>
-                    </View>))}
-                </View>)}
+          <St horizontal showsHorizontalScrollIndicator={!1}style={{marginVertical:4,maxHeight:46}}contentContainerStyle={{paddingHorizontal:16,paddingBottom:4,flexDirection:"row",alignItems:"center",gap:8}}>
+            
+            {(()=>{const o=$.categories.has("all");return<Be onPress={()=>J("all")}>
+                  <C style={[k.statusFilterChip,{backgroundColor:o?e.indigo600Alt:e.indigo50,borderColor:o?e.indigo600:e.indigo400,borderRadius:8,paddingHorizontal:10,paddingVertical:6},o&&{shadowColor:e.indigo600Alt,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2.5,elevation:2}]}>
+                    <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                      <At size={13}color={o?e.white:e.indigo600Alt}/>
+                      <S numberOfLines={1}style={[k.statusFilterText,{color:o?e.white:e.indigo600Alt,fontFamily:V.interBold}]}>
+                        {I("common.all","All")} ({K.totalCount})
+                      </S>
+                    </C>
+                  </C>
+                </Be>})()}
 
-              {hasDefaultParams && (<View>
-                  <Text style={styles.detailsGroupTitle}>{t('analytics.defaultParameters')}</Text>
-                  {Object.entries(defaultParams).map(([k, v]) => (<View key={k} style={styles.detailsRow}>
-                      <Text style={styles.detailsKey} selectable={true}>{k}</Text>
-                      <Text style={styles.detailsValue} selectable={true}>{String(v)}</Text>
-                    </View>))}
-                </View>)}
-            </View>)}
-        </>)}
-    </View>);
-});
-const AnalyticsTab = React.memo(() => {
-    const { t } = useTranslation();
-    const { filteredAnalyticsEvents, analyticsSearch, setAnalyticsSearch, handleDelete, selectedEvent, setSelectedEvent, newEventIds, logRouteMapRef, isAnalyticsLayoutReady, setIsAnalyticsLayoutReady, isAnalyticsPaused, setIsAnalyticsPaused, isAnalyticsFilterApplied, } = useInspector();
-    const listRef = useRef(null);
-    const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
-    const keyExtractor = useCallback((item, index) => item?.id?.toString() ?? index.toString(), []);
-    const renderItem = useCallback(({ item, index }) => {
-        const prev = filteredAnalyticsEvents[index + 1];
-        const next = filteredAnalyticsEvents[index - 1];
-        const msSincePrev = prev
-            ? item.timestamp - prev.timestamp
-            : undefined;
-        const thisMin = Math.floor(item.timestamp / 60000);
-        const nextMin = next
-            ? Math.floor(next.timestamp / 60000)
-            : -1;
-        const showTimestamp = index === 0 || thisMin !== nextMin;
-        return (<AnalyticsEventCard event={item} onPress={() => {
-                setSelectedEvent(item);
-            }} isNew={newEventIds.has(item.id)} searchStr={analyticsSearch} isFirst={index === 0} isLast={index === filteredAnalyticsEvents.length - 1} msSincePrev={msSincePrev} showTimestamp={showTimestamp} computedScreenName={(() => {
-                if (!item)
-                    return '';
-                const rawScreenName = item.screenName ||
-                    item.screenClass ||
-                    item.pageTitle ||
-                    item.pageLocation ||
-                    item.params?.firebase_screen ||
-                    item.params?.screen_name ||
-                    item.params?.firebase_screen_class ||
-                    item.params?.screen_class;
-                let screenName = typeof rawScreenName === 'string'
-                    ? rawScreenName
-                    : (rawScreenName ? JSON.stringify(rawScreenName) : '');
-                const routeInfo = logRouteMapRef.current.get(item.id + 1000000);
-                if (!screenName) {
-                    if (routeInfo &&
-                        routeInfo.path !== 'Navigators') {
-                        const parts = routeInfo.path.split(' ➔ ');
-                        screenName = parts[parts.length - 1];
-                    }
-                }
-                return screenName;
-            })()}/>);
-    }, [filteredAnalyticsEvents, analyticsSearch, newEventIds, setSelectedEvent, logRouteMapRef]);
-    return (<>
-      
-      {selectedEvent == null && (<View style={[
-                styles.toolbarRow,
-                { marginTop: 12, marginBottom: 8 },
-            ]}>
-        <View style={styles.searchContainer}>
-          <SearchIcon color={AppColors.grayTextWeak} size={16}/>
-          <TextInput placeholder="Search events..." placeholderTextColor={AppColors.grayTextWeak} value={analyticsSearch} onChangeText={setAnalyticsSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-          {analyticsSearch.length > 0 && (<View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 4,
-                }}>
-              <View style={{
-                    backgroundColor: `${AppColors.purple}20`,
-                    borderRadius: 10,
-                    paddingHorizontal: 6,
-                    paddingVertical: 1.5,
-                }}>
-                <Text style={{
-                    color: AppColors.purple,
-                    fontSize: 9.5,
-                    fontFamily: AppFonts.interBold,
-                }}>
-                  {filteredAnalyticsEvents.length}
-                </Text>
-              </View>
-              <Pressable onPress={() => setAnalyticsSearch('')} hitSlop={10} style={styles.clearBtn}>
-                <ClearIcon color={AppColors.grayTextWeak} size={13}/>
-              </Pressable>
-            </View>)}
-        </View>
-        <View style={styles.toolbarRight}>
-          <TouchableOpacity style={[
-                styles.toolbarBtn,
-                isAnalyticsPaused && {
-                    borderColor: `${AppColors.darkOrange}50`,
-                    backgroundColor: `${AppColors.darkOrange}18`,
-                },
-            ]} onPress={() => setIsAnalyticsPaused(p => !p)} hitSlop={6}>
-            <HeaderPauseIcon isPaused={isAnalyticsPaused} color={isAnalyticsPaused
-                ? AppColors.darkOrange
-                : AppColors.grayTextStrong} size={16}/>
-          </TouchableOpacity>
+            
+            {(()=>{const o=!$.categories.has("all")&&$.categories.has("ecommerce");return<Be onPress={()=>J("ecommerce")}>
+                  <C style={[k.statusFilterChip,{backgroundColor:o?e.amber600:e.amber100,borderColor:o?e.amber700:e.amber200,borderRadius:8,paddingHorizontal:10,paddingVertical:6},o&&{shadowColor:e.amber600,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2.5,elevation:2}]}>
+                    <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                      <Gt size={13}color={o?e.white:e.amber700}/>
+                      <S numberOfLines={1}style={[k.statusFilterText,{color:o?e.white:e.amber800Warm,fontFamily:V.interBold}]}>
+                        Ecommerce ({K.ecommerce})
+                      </S>
+                    </C>
+                  </C>
+                </Be>})()}
 
-          
-          <TouchableOpacity style={[
-                styles.toolbarBtn,
-                isAnalyticsFilterApplied && {
-                    borderColor: `${AppColors.brandPurple}60`,
-                    backgroundColor: `${AppColors.brandPurple}15`,
-                },
-            ]} onPress={() => setIsFilterModalOpen(true)} hitSlop={6}>
-            <FilterIcon color={isAnalyticsFilterApplied
-                ? AppColors.brandPurple
-                : AppColors.grayTextStrong} size={15}/>
-            {isAnalyticsFilterApplied && (<View style={{
-                    position: 'absolute',
-                    top: 2,
-                    right: 2,
-                    width: 7,
-                    height: 7,
-                    borderRadius: 3.5,
-                    backgroundColor: AppColors.darkOrange,
-                    borderWidth: 1,
-                    borderColor: AppColors.white,
-                }}/>)}
-          </TouchableOpacity>
+            
+            {(()=>{const o=!$.categories.has("all")&&$.categories.has("page_view");return<Be onPress={()=>J("page_view")}>
+                  <C style={[k.statusFilterChip,{backgroundColor:o?e.sky600:e.sky100,borderColor:o?e.blue700:e.sky400,borderRadius:8,paddingHorizontal:10,paddingVertical:6},o&&{shadowColor:e.sky600,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2.5,elevation:2}]}>
+                    <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                      <Ut size={13}color={o?e.white:e.sky600}/>
+                      <S numberOfLines={1}style={[k.statusFilterText,{color:o?e.white:e.sky600,fontFamily:V.interBold}]}>
+                        Screens ({K.page_view})
+                      </S>
+                    </C>
+                  </C>
+                </Be>})()}
+
+            
+            {(()=>{const o=!$.categories.has("all")&&$.categories.has("system");return<Be onPress={()=>J("system")}>
+                  <C style={[k.statusFilterChip,{backgroundColor:o?e.violet600:e.purple100,borderColor:o?e.purpleShade700:e.purple200,borderRadius:8,paddingHorizontal:10,paddingVertical:6},o&&{shadowColor:e.violet600,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2.5,elevation:2}]}>
+                    <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                      <Kt size={13}color={o?e.white:e.purple}/>
+                      <S numberOfLines={1}style={[k.statusFilterText,{color:o?e.white:e.brandPurple,fontFamily:V.interBold}]}>
+                        System ({K.system})
+                      </S>
+                    </C>
+                  </C>
+                </Be>})()}
 
-          <TouchableOpacity style={[
-                styles.toolbarBtn,
-                {
-                    borderColor: `${AppColors.errorColor}38`,
-                    backgroundColor: `${AppColors.errorColor}0F`,
-                },
-            ]} onPress={handleDelete} hitSlop={6}>
-            <TrashIcon color={AppColors.errorColor} size={15}/>
-          </TouchableOpacity>
-        </View>
-      </View>)}
+            
+            {(()=>{const o=!$.categories.has("all")&&$.categories.has("custom");return<Be onPress={()=>J("custom")}>
+                  <C style={[k.statusFilterChip,{backgroundColor:o?e.pink600:e.pink100,borderColor:o?e.rose700:e.roseBorder,borderRadius:8,paddingHorizontal:10,paddingVertical:6},o&&{shadowColor:e.pink600,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2.5,elevation:2}]}>
+                    <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                      <Jt size={13}color={o?e.white:e.brandPurple}/>
+                      <S numberOfLines={1}style={[k.statusFilterText,{color:o?e.white:e.pink600,fontFamily:V.interBold}]}>
+                        Custom ({K.custom})
+                      </S>
+                    </C>
+                  </C>
+                </Be>})()}
+          </St>
+        </C>}
 
       
-      <AnalyticsFilterModal visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)}/>
+      <Bt visible={j}onClose={()=>U(!1)}/>
 
-      <View style={{ flex: 1 }} onLayout={() => setIsAnalyticsLayoutReady(true)}>
-        {isAnalyticsLayoutReady ? (<>
-            <FlatList ref={listRef} data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={Platform.OS === 'android'} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={analyticsSearch.length > 0} searchQuery={analyticsSearch} customTitle={analyticsSearch.length > 0
-                    ? 'No matching analytics events'
-                    : 'No analytics events yet'} customSub={analyticsSearch.length > 0
-                    ? `No events matched "${analyticsSearch}"`
-                    : 'Call setupAnalyticsLogger(analytics()) at app start.'} onClearSearch={() => setAnalyticsSearch('')}/>} ListFooterComponent={filteredAnalyticsEvents.length > 0 ? (<EndOfListFooter count={filteredAnalyticsEvents.length} label="events"/>) : null} contentContainerStyle={[
-                styles.listContent,
-                filteredAnalyticsEvents.length === 0 && {
-                    flexGrow: 1,
-                },
-            ]} keyboardShouldPersistTaps="handled"/>
-          </>) : null}
-      </View>
-    </>);
-});
-export default AnalyticsTab;
+      <C style={{flex:1}}onLayout={()=>G(!0)}>
+        {ze?<>
+            <Ct ref={z}data={R}keyExtractor={$e}ListHeaderComponent={Zt}renderItem={O}initialNumToRender={12}maxToRenderPerBatch={8}windowSize={5}removeClippedSubviews={kt.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<Pt isSearch={E.length>0}searchQuery={E}customTitle={E.length>0?"No matching analytics events":"No analytics events yet"}customSub={E.length>0?`No events matched "${E}"`:"Call setupAnalyticsLogger(analytics()) at app start."}onClearSearch={()=>ke("")}/>}ListFooterComponent={R.length>0?<It count={R.length}label="events"/>:null}contentContainerStyle={[k.listContent,R.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+          </>:null}
+      </C>
+    </>});export default qt;