react-native-inapp-inspector 2.3.23 → 2.3.25

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

@@ -1,332 +1,64 @@
-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}>
+import me,{useCallback as L,useState as X,useMemo as Y,useRef as pe}from"react";import{FlatList as Ce,Platform as Se,Pressable as Ie,ScrollView as Te,Text as _,TextInput as Pe,TouchableOpacity as $,View as C}from"react-native";import{animateNextLayout as Ae,useInspector as ze}from"./InspectorContext";import Fe from"../AnalyticsEventCard";import Le from"./AnalyticsFilterModal";import Re from"../EndOfListFooter";import Ve from"../EmptyState";import w from"../../styles";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as H}from"../../styles/AppFonts";import{useTranslation as Be}from"../../i18n";import Ee from"../TouchableScale";import{getEventCategory as Oe}from"../../helpers";import{LayersIcon as Ne,SearchIcon as Me,ClearIcon as _e,TrashIcon as $e,HeaderPauseIcon as He,FilterIcon as De,CartIcon as We,GlobeIcon as Ge,BoltIcon as je,SparkleIcon as Je}from"../NetworkIcons";const Qe=me.memo(()=>{const{t:D}=Be(),{analyticsEvents:W,filteredAnalyticsEvents:a,analyticsSearch:S,setAnalyticsSearch:R,analyticsFilters:V,setAnalyticsFilters:G,handleDelete:Z,selectedEvent:ee,setSelectedEvent:j,newEventIds:J,logRouteMapRef:Q,isAnalyticsLayoutReady:te,setIsAnalyticsLayoutReady:oe,isAnalyticsPaused:B,setIsAnalyticsPaused:re,isAnalyticsFilterApplied:E}=ze(),ae=pe(null),[le,q]=X(!1),[K,ne]=X(100),O=Y(()=>a.slice(0,K),[a,K]),v=Y(()=>{let e=0,r=0,o=0,I=0;for(const z of W){const A=Oe(z.name),T=z.count||1;A==="ecommerce"?e+=T:A==="page_view"?r+=T:A==="system"?o+=T:I+=T}const P=e+r+o+I;return{ecommerce:e,page_view:r,system:o,custom:I,totalCount:P}},[W]),se=L(e=>{Ae(),G(r=>{if(e==="all")return{...r,categories:new Set(["all"])};const o=new Set(r.categories);if(o.has("all"))o.delete("all"),o.add(e);else if(o.has(e))o.delete(e),o.size===0&&o.add("all");else if(o.add(e),o.has("ecommerce")&&o.has("page_view")&&o.has("system")&&o.has("custom"))return{...r,categories:new Set(["all"])};return{...r,categories:o}})},[G]),ie=L((e,r)=>e?.id?.toString()??r.toString(),[]),ce=L(({item:e,index:r})=>{const o=a[r+1],I=a[r-1],P=o?e.timestamp-o.timestamp:void 0,z=Math.floor(e.timestamp/6e4),A=I?Math.floor(I.timestamp/6e4):-1,T=r===0||z!==A;return<Fe event={e}onPress={()=>{j(e)}}isNew={J.has(e.id)}searchStr={S}isFirst={r===0}isLast={r===a.length-1}msSincePrev={P}showTimestamp={T}computedScreenName={(()=>{if(!e)return"";const F=e.screenName||e.screenClass||e.pageTitle||e.pageLocation||e.params?.firebase_screen||e.params?.screen_name||e.params?.firebase_screen_class||e.params?.screen_class;let N=typeof F=="string"?F:F?JSON.stringify(F):"";const M=Q.current.get(e.id+1e6);if(!N&&M&&M.path!=="Navigators"){const U=M.path.split(" \u2794 ");N=U[U.length-1]}return N})()}/>},[a,S,J,j,Q]),de=L((e,r)=>({length:86,offset:86*r,index:r}),[]);return<>
       
-      <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>
-
-        <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>}
-
-          <Yt direction={$?"up":"down"}size={16}color={e.grayTextWeak}/>
-        </C>
-      </Ce>
-
-      
-      {$&&<C style={{marginTop:10}}>
-          
-          <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>
-
-              
-              <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>
-
-                {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>
-
-            
-            <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>
-
-                
-                <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"/>
-
-                
-                <Ge d={O.areaPath}fill="url(#crashlyticsAreaGrad)"/>
-
-                
-                {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"}/>
-
-                      
-                      {t.total>0&&<Ue x={B}y={H}width={F}height={D}rx={3}fill="url(#crashlyticsBarGrad)"/>}
-
-                      
-                      {P&&<Me x1={t.x}y1={4}x2={t.x}y2={z-6}stroke="#8B5CF6"strokeWidth="1.5"strokeDasharray="2,2"/>}
-                    </Je>})}
-
-                
-                <Ge d={O.linePath}fill="none"stroke="#8B5CF6"strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
-
-                
-                {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>
-
-              
-              <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>
-
-            
-            {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>}
-
-            
-            <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>
-
-          
-          {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>}
-
-          
-          {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>
-
-              
-              {(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<>
-      
-      {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>
+      {ee==null&&<C style={{backgroundColor:t.white,borderBottomWidth:1,borderBottomColor:t.dividerColor,paddingBottom:6}}>
+          <C style={[w.toolbarRow,{marginTop:12,marginBottom:8}]}>
+            <C style={w.searchContainer}>
+              <Me color={t.grayTextWeak}size={16}/>
+              <Pe placeholder={D("analytics.searchPlaceholder","Search events...")}placeholderTextColor={t.grayTextWeak}value={S}onChangeText={R}style={w.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+              {S.length>0&&<C style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                  <C style={{backgroundColor:`${t.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
+                    <_ style={{color:t.purple,fontSize:9.5,fontFamily:H.interBold}}>
+                      {a.length}
+                    </_>
                   </C>
-                  <Tt onPress={()=>ke("")}hitSlop={10}style={k.clearBtn}>
-                    <Ht color={e.grayTextWeak}size={13}/>
-                  </Tt>
+                  <Ie onPress={()=>R("")}hitSlop={10}style={w.clearBtn}>
+                    <_e color={t.grayTextWeak}size={13}/>
+                  </Ie>
                 </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>
+            <C style={w.toolbarRight}>
+              <$ style={[w.toolbarBtn,B&&{borderColor:`${t.darkOrange}50`,backgroundColor:`${t.darkOrange}18`}]}onPress={()=>re(e=>!e)}hitSlop={6}>
+                <He isPaused={B}color={B?t.darkOrange:t.grayTextStrong}size={16}/>
+              </$>
 
               
-              <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>
-
-              <Ce style={[k.toolbarBtn,{borderColor:`${e.errorColor}38`,backgroundColor:`${e.errorColor}0F`}]}onPress={Pe}hitSlop={6}>
-                <Wt color={e.errorColor}size={15}/>
-              </Ce>
+              <$ style={[w.toolbarBtn,E&&{borderColor:`${t.brandPurple}60`,backgroundColor:`${t.brandPurple}15`}]}onPress={()=>q(!0)}hitSlop={6}>
+                <De color={E?t.brandPurple:t.grayTextStrong}size={15}/>
+                {E&&<C style={{position:"absolute",top:2,right:2,width:7,height:7,borderRadius:3.5,backgroundColor:t.darkOrange,borderWidth:1,borderColor:t.white}}/>}
+              </$>
+
+              <$ style={[w.toolbarBtn,{borderColor:`${t.errorColor}38`,backgroundColor:`${t.errorColor}0F`}]}onPress={Z}hitSlop={6}>
+                <$e color={t.errorColor}size={15}/>
+              </$>
             </C>
           </C>
 
           
-          <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 style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:12,gap:6}}>
+            <Te horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
+              {[{id:"all",label:D("common.all","All"),count:v.totalCount,color:t.purple,Icon:Ne},{id:"ecommerce",label:"Ecommerce",count:v.ecommerce,color:t.amber600,Icon:We},{id:"page_view",label:"Screens",count:v.page_view,color:t.sky600,Icon:Ge},{id:"system",label:"System",count:v.system,color:t.violet600,Icon:je},{id:"custom",label:"Custom",count:v.custom,color:t.teal600,Icon:Je}].map(e=>{const r=e.id==="all"?V.categories.has("all"):!V.categories.has("all")&&V.categories.has(e.id),o=e.color||t.purple,I=r?t.white:o,P=e.Icon;return<Ee key={e.id}onPress={()=>se(e.id)}>
+                    <C style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:r?o:`${o}12`,borderWidth:1,borderColor:r?o:`${o}30`,gap:5}}>
+                      <P size={11}color={I}/>
+                      <_ style={{fontFamily:H.interBold,fontSize:10.5,color:r?t.white:t.primaryBlack}}>
+                        {e.label}
+                      </_>
+                      <C style={{backgroundColor:r?"rgba(255,255,255,0.25)":`${o}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8,alignItems:"center",justifyContent:"center"}}>
+                        <_ style={{fontFamily:H.interBold,fontSize:9.5,color:r?t.white:o}}>
+                          {e.count}
+                        </_>
+                      </C>
                     </C>
-                  </C>
-                </Be>})()}
-
-            
-            {(()=>{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>})()}
-
-            
-            {(()=>{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>})()}
-
-            
-            {(()=>{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>
+                  </Ee>})}
+            </Te>
+          </C>
         </C>}
 
       
-      <Bt visible={j}onClose={()=>U(!1)}/>
+      <Le visible={le}onClose={()=>q(!1)}/>
 
-      <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"/>
+      <C style={{flex:1}}onLayout={()=>oe(!0)}>
+        {te?<>
+            <Ce ref={ae}data={O}keyExtractor={ie}renderItem={ce}getItemLayout={de}initialNumToRender={15}maxToRenderPerBatch={10}windowSize={9}removeClippedSubviews={Se.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<Ve isSearch={S.length>0}searchQuery={S}customTitle={S.length>0?"No matching analytics events":"No analytics events yet"}customSub={S.length>0?`No events matched "${S}"`:"Call setupAnalyticsLogger(analytics()) at app start."}onClearSearch={()=>R("")}/>}ListFooterComponent={a.length>0?<Re count={O.length}totalCount={a.length}label="events"hasMore={O.length<a.length}onLoadMore={()=>ne(e=>e+10)}/>:null}contentContainerStyle={[w.listContent,a.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
           </>:null}
       </C>
-    </>});export default qt;
+    </>});export default Qe;