react-native-inapp-inspector 2.3.18 → 2.3.20

package/dist/esm/components/AnalyticsDetail.js

@@ -1,696 +1,203 @@
-import React, { useState, useMemo } from 'react';
-import { Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from 'react-native';
-import CopyButton from './CopyButton';
-import JsonViewer from './JsonViewer';
-import SegmentedTabs from './SegmentedTabs';
-import HighlightText from './HighlightText';
-import AnimatedEntrance from './AnimatedEntrance';
-import { AppFonts } from '../styles/AppFonts';
-import { AppColors } from '../styles/AppColors';
-import { getSize, formatDateTime } from '../helpers';
-import { getEventCategory } from '../helpers/gaAnalyticsRegistry';
-import { useTranslation } from '../i18n';
-import { SparkleIcon, ClockIcon, SearchIcon, ClearIcon, LayersIcon, CartIcon, GlobeIcon, BoltIcon, PinIcon, MoneyIcon, PrettyIcon, RawIcon, TableIcon, DocIcon, PackageIcon, } from './NetworkIcons';
-const AnalyticsDetail = ({ event, }) => {
-    const { t } = useTranslation();
-    const [activeViewTab, setActiveViewTab] = useState('overview');
-    const [paramSearch, setParamSearch] = useState('');
-    const params = useMemo(() => event.params ?? {}, [event.params]);
-    const userProperties = useMemo(() => event.userProperties ?? {}, [event.userProperties]);
-    const paramKeys = useMemo(() => Object.keys(params), [params]);
-    const userPropKeys = useMemo(() => Object.keys(userProperties), [userProperties]);
-    const category = useMemo(() => getEventCategory(event.name, params), [event.name, params]);
-    const fullJsonData = useMemo(() => ({
-        name: event.name,
-        timestamp: event.timestamp,
-        source: event.source,
-        ...(event.screenName ? { screenName: event.screenName } : {}),
-        ...(event.screenClass ? { screenClass: event.screenClass } : {}),
-        ...(event.userId ? { userId: event.userId } : {}),
-        ...(event.sessionId ? { sessionId: event.sessionId } : {}),
-        ...(event.trackingId ? { trackingId: event.trackingId } : {}),
-        params,
-        ...(userPropKeys.length > 0 ? { userProperties } : {}),
-    }), [event, params, userPropKeys.length, userProperties]);
-    const revenueInfo = useMemo(() => {
-        const val = params.value ?? params.price;
-        const currency = params.currency ?? 'USD';
-        if (val !== undefined && val !== null && !isNaN(Number(val))) {
-            return {
-                amount: Number(val).toFixed(2),
-                currency: String(currency).toUpperCase(),
-            };
-        }
-        return null;
-    }, [params]);
-    const itemsCount = useMemo(() => {
-        if (Array.isArray(params.items)) {
-            return params.items.length;
-        }
-        return null;
-    }, [params.items]);
-    const screenContext = useMemo(() => {
-        return (event.screenName ||
-            params.firebase_screen ||
-            params.screen_name ||
-            params.page_title ||
-            event.screenClass ||
-            params.firebase_screen_class);
-    }, [event.screenName, event.screenClass, params]);
-    const filteredParamEntries = useMemo(() => {
-        const entries = Object.entries(params);
-        if (!paramSearch.trim())
-            return entries;
-        const q = paramSearch.toLowerCase();
-        return entries.filter(([k, v]) => {
-            const valStr = typeof v === 'object' ? JSON.stringify(v) : String(v);
-            return k.toLowerCase().includes(q) || valStr.toLowerCase().includes(q);
-        });
-    }, [params, paramSearch]);
-    const catMeta = useMemo(() => {
-        switch (category) {
-            case 'ecommerce':
-                return {
-                    label: t('analytics.ecommerceCategory'),
-                    color: AppColors.amber700,
-                    bg: AppColors.amber100,
-                    border: AppColors.amber200,
-                    icon: (color) => <CartIcon color={color} size={11}/>,
-                };
-            case 'page_view':
-                return {
-                    label: t('analytics.screensCategory'),
-                    color: AppColors.sky600,
-                    bg: AppColors.sky100,
-                    border: AppColors.sky400,
-                    icon: (color) => <GlobeIcon color={color} size={11}/>,
-                };
-            case 'system':
-                return {
-                    label: t('analytics.systemCategory'),
-                    color: AppColors.purple,
-                    bg: AppColors.purple100,
-                    border: AppColors.purple200,
-                    icon: (color) => <BoltIcon color={color} size={11}/>,
-                };
-            default:
-                return {
-                    label: t('analytics.customCategory'),
-                    color: AppColors.brandPurple,
-                    bg: AppColors.purple100,
-                    border: AppColors.purple200,
-                    icon: (color) => <SparkleIcon color={color} size={11}/>,
-                };
-        }
-    }, [category, t]);
-    const viewTabs = [
-        {
-            key: 'overview',
-            label: `${t('analytics.overviewTab')} (${paramKeys.length})`,
-            icon: (isActive) => (<TableIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
-        },
-        {
-            key: 'tree',
-            label: t('analytics.jsonTreeTab'),
-            icon: (isActive) => (<PrettyIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
-        },
-        {
-            key: 'raw',
-            label: t('analytics.rawPayloadTab'),
-            icon: (isActive) => (<RawIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
-        },
-    ];
-    return (<ScrollView style={detailStyles.scroll} contentContainerStyle={detailStyles.content} showsVerticalScrollIndicator contentInsetAdjustmentBehavior="never" automaticallyAdjustContentInsets={false}>
+import{useState as q,useMemo as z}from"react";import{Pressable as Ce,ScrollView as Te,StyleSheet as Be,Text as V,TextInput as Ve,View as C}from"react-native";import G from"./CopyButton";import Y from"./JsonViewer";import Se from"./SegmentedTabs";import Q from"./HighlightText";import Ie from"./AnimatedEntrance";import{AppFonts as S}from"../styles/AppFonts";import{AppColors as e}from"../styles/AppColors";import{getSize as ze,formatDateTime as Pe}from"../helpers";import{getEventCategory as De}from"../helpers/gaAnalyticsRegistry";import{useTranslation as Re}from"../i18n";import{SparkleIcon as X,ClockIcon as Fe,SearchIcon as We,ClearIcon as He,LayersIcon as Ee,CartIcon as Ne,GlobeIcon as Ae,BoltIcon as Oe,PinIcon as Ke,MoneyIcon as Le,PrettyIcon as Me,TableIcon as Z,DocIcon as $e,PackageIcon as _e}from"./NetworkIcons";const Je=({event:T})=>{const{t:P}=Re(),[j,ee]=q("overview"),[D,v]=q(""),k=z(()=>T.params??{},[T.params]),H=z(()=>T.userProperties??{},[T.userProperties]),E=z(()=>Object.keys(k),[k]),R=z(()=>Object.keys(H),[H]),M=z(()=>De(T.name,k),[T.name,k]),A=z(()=>({name:T.name,timestamp:T.timestamp,source:T.source,...T.screenName?{screenName:T.screenName}:{},...T.screenClass?{screenClass:T.screenClass}:{},...T.userId?{userId:T.userId}:{},...T.sessionId?{sessionId:T.sessionId}:{},...T.trackingId?{trackingId:T.trackingId}:{},params:k,...R.length>0?{userProperties:H}:{}}),[T,k,R.length,H]),O=z(()=>{const B=k.value??k.price,I=k.currency??"USD";return B!=null&&!isNaN(Number(B))?{amount:Number(B).toFixed(2),currency:String(I).toUpperCase()}:null},[k]),$=z(()=>Array.isArray(k.items)?k.items.length:null,[k.items]),_=z(()=>T.screenName||k.firebase_screen||k.screen_name||k.page_title||T.screenClass||k.firebase_screen_class,[T.screenName,T.screenClass,k]),J=z(()=>{const B=Object.entries(k);if(!D.trim())return B;const I=D.toLowerCase();return B.filter(([K,F])=>{const L=typeof F=="object"?JSON.stringify(F):String(F);return K.toLowerCase().includes(I)||L.toLowerCase().includes(I)})},[k,D]),W=z(()=>{switch(M){case"ecommerce":return{label:P("analytics.ecommerceCategory"),color:e.amber700,bg:e.amber100,border:e.amber200,icon:B=><Ne color={B}size={11}/>};case"page_view":return{label:P("analytics.screensCategory"),color:e.sky600,bg:e.sky100,border:e.sky400,icon:B=><Ae color={B}size={11}/>};case"system":return{label:P("analytics.systemCategory"),color:e.purple,bg:e.purple100,border:e.purple200,icon:B=><Oe color={B}size={11}/>};default:return{label:P("analytics.customCategory"),color:e.brandPurple,bg:e.purple100,border:e.purple200,icon:B=><X color={B}size={11}/>}}},[M,P]),re=[{key:"overview",label:`${P("analytics.overviewTab")} (${E.length})`,icon:B=><Z color={B?e.white:e.grayText}size={12}/>},{key:"json",label:"JSON Payload",icon:B=><Me color={B?e.white:e.grayText}size={12}/>}];return<Te style={r.scroll}contentContainerStyle={r.content}showsVerticalScrollIndicator contentInsetAdjustmentBehavior="never"automaticallyAdjustContentInsets={!1}>
       
       
-      <View style={detailStyles.heroCard}>
+      <C style={r.heroCard}>
         
-        <View style={detailStyles.heroTopRow}>
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap', flex: 1 }}>
+        <C style={r.heroTopRow}>
+          <C style={{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap",flex:1}}>
             
-            <View style={[
-            detailStyles.sourceBadge,
-            event.source === 'firebase'
-                ? { backgroundColor: AppColors.amberBg, borderColor: AppColors.amberBorder }
-                : { backgroundColor: AppColors.purpleBg, borderColor: AppColors.purpleBorder },
-        ]}>
-              <View style={[
-            detailStyles.sourceDot,
-            {
-                backgroundColor: event.source === 'firebase'
-                    ? AppColors.firebaseOrange
-                    : AppColors.purple,
-            },
-        ]}/>
-              <Text style={[
-            detailStyles.sourceBadgeText,
-            {
-                color: event.source === 'firebase'
-                    ? AppColors.amber800Warm
-                    : AppColors.purple,
-            },
-        ]}>
-                {event.source === 'firebase' ? t('analytics.sourceFirebase') : t('analytics.sourceCustom')}
-              </Text>
-            </View>
+            <C style={r.idBadge}>
+              <V style={r.idBadgeText}>
+                #{T.id!=null?T.id+1:1}
+              </V>
+            </C>
 
             
-            <View style={[
-            detailStyles.catBadge,
-            { backgroundColor: catMeta.bg, borderColor: catMeta.border },
-        ]}>
-              {catMeta.icon(catMeta.color)}
-              <Text style={[detailStyles.catBadgeText, { color: catMeta.color }]}>
-                {catMeta.label}
-              </Text>
-            </View>
-          </View>
+            <C style={[r.sourceBadge,T.source==="firebase"?{backgroundColor:e.amberBg,borderColor:e.amberBorder}:{backgroundColor:e.purpleBg,borderColor:e.purpleBorder}]}>
+              <C style={[r.sourceDot,{backgroundColor:T.source==="firebase"?e.firebaseOrange:e.purple}]}/>
+              <V style={[r.sourceBadgeText,{color:T.source==="firebase"?e.amber800Warm:e.purple}]}>
+                {T.source==="firebase"?P("analytics.sourceFirebase"):P("analytics.sourceCustom")}
+              </V>
+            </C>
+
+            
+            <C style={[r.catBadge,{backgroundColor:W.bg,borderColor:W.border}]}>
+              {W.icon(W.color)}
+              <V style={[r.catBadgeText,{color:W.color}]}>
+                {W.label}
+              </V>
+            </C>
+          </C>
 
           
-          <CopyButton value={JSON.stringify(fullJsonData, null, 2)} label={t('analytics.eventDetails')}/>
-        </View>
+          <G value={JSON.stringify(A,null,2)}label={P("analytics.eventDetails")}/>
+        </C>
 
         
-        <View style={detailStyles.titleRow}>
-          <Text style={detailStyles.eventTitle} selectable numberOfLines={2}>
-            {event.name}
-          </Text>
-        </View>
+        <C style={r.titleRow}>
+          <V style={r.eventTitle}selectable numberOfLines={2}>
+            {T.name}
+          </V>
+        </C>
 
         
-        <View style={detailStyles.metaRow}>
-          <View style={detailStyles.timePill}>
-            <ClockIcon color={AppColors.purple} size={11}/>
-            <Text style={detailStyles.timeText}>
-              {formatDateTime(event.timestamp)}
-            </Text>
-          </View>
-
-          {screenContext && (<View style={detailStyles.screenPill}>
-              <PinIcon color={AppColors.sky600} size={11}/>
-              <Text style={detailStyles.screenText} numberOfLines={1}>
-                {String(screenContext)}
-              </Text>
-            </View>)}
-        </View>
+        <C style={r.metaRow}>
+          <C style={r.timePill}>
+            <Fe color={e.purple}size={11}/>
+            <V style={r.timeText}>
+              {Pe(T.timestamp)}
+            </V>
+          </C>
+
+          {_&&<C style={r.screenPill}>
+              <Ke color={e.sky600}size={11}/>
+              <V style={r.screenText}numberOfLines={1}>
+                {String(_)}
+              </V>
+            </C>}
+        </C>
 
         
-        <View style={detailStyles.metricsBar}>
-          <View style={detailStyles.metricPill}>
-            <Text style={detailStyles.metricLabel}>Params:</Text>
-            <Text style={detailStyles.metricValue}>{paramKeys.length}</Text>
-          </View>
-
-          {userPropKeys.length > 0 && (<View style={detailStyles.metricPill}>
-              <Text style={detailStyles.metricLabel}>User Props:</Text>
-              <Text style={detailStyles.metricValue}>{userPropKeys.length}</Text>
-            </View>)}
-
-          <View style={detailStyles.metricPill}>
-            <Text style={detailStyles.metricLabel}>Size:</Text>
-            <Text style={detailStyles.metricValue}>{getSize(fullJsonData)}</Text>
-          </View>
-
-          {revenueInfo && (<View style={detailStyles.revenuePill}>
-              <MoneyIcon color={AppColors.emerald600} size={11}/>
-              <Text style={detailStyles.revenueValue}>
-                ${revenueInfo.amount} {revenueInfo.currency}
-              </Text>
-            </View>)}
-
-          {itemsCount !== null && (<View style={detailStyles.itemsPill}>
-              <PackageIcon size={12} color="#1D4ED8"/>
-              <Text style={detailStyles.itemsValue}>
-                {itemsCount} items
-              </Text>
-            </View>)}
-        </View>
-      </View>
+        <C style={r.metricsBar}>
+          <C style={r.metricPill}>
+            <V style={r.metricLabel}>Params:</V>
+            <V style={r.metricValue}>{E.length}</V>
+          </C>
+
+          {R.length>0&&<C style={r.metricPill}>
+              <V style={r.metricLabel}>User Props:</V>
+              <V style={r.metricValue}>{R.length}</V>
+            </C>}
+
+          <C style={r.metricPill}>
+            <V style={r.metricLabel}>Size:</V>
+            <V style={r.metricValue}>{ze(A)}</V>
+          </C>
+
+          {O&&<C style={r.revenuePill}>
+              <Le color={e.emerald600}size={11}/>
+              <V style={r.revenueValue}>
+                ${O.amount} {O.currency}
+              </V>
+            </C>}
+
+          {$!==null&&<C style={r.itemsPill}>
+              <_e size={12}color="#1D4ED8"/>
+              <V style={r.itemsValue}>
+                {$} items
+              </V>
+            </C>}
+        </C>
+      </C>
 
       
-      <View style={detailStyles.tabsWrap}>
-        <SegmentedTabs tabs={viewTabs} activeKey={activeViewTab} onChange={key => setActiveViewTab(key)}/>
-      </View>
+      <C style={r.tabsWrap}>
+        <Se tabs={re}activeKey={j}onChange={B=>ee(B)}/>
+      </C>
 
       
-      {activeViewTab === 'overview' && (<View style={detailStyles.tabContent}>
+      {j==="overview"&&<C style={r.tabContent}>
           
-          {(event.userId || event.sessionId || event.trackingId) && (<View style={detailStyles.sectionCard}>
-              <View style={detailStyles.sectionHeader}>
-                <LayersIcon color={AppColors.purple} size={12}/>
-                <Text style={detailStyles.sectionTitle}>SESSION & IDENTITY</Text>
-              </View>
-              <View style={detailStyles.sectionBody}>
-                {event.userId && (<View style={detailStyles.kvRow}>
-                    <Text style={detailStyles.kvKey}>User ID:</Text>
-                    <Text style={detailStyles.kvVal} selectable>{event.userId}</Text>
-                  </View>)}
-                {event.sessionId && (<View style={detailStyles.kvRow}>
-                    <Text style={detailStyles.kvKey}>Session ID:</Text>
-                    <Text style={detailStyles.kvVal} selectable>{event.sessionId}</Text>
-                  </View>)}
-                {event.trackingId && (<View style={detailStyles.kvRow}>
-                    <Text style={detailStyles.kvKey}>Tracking ID:</Text>
-                    <Text style={detailStyles.kvVal} selectable>{event.trackingId}</Text>
-                  </View>)}
-              </View>
-            </View>)}
+          {(T.userId||T.sessionId||T.trackingId)&&<C style={r.sectionCard}>
+              <C style={r.sectionHeader}>
+                <Ee color={e.purple}size={12}/>
+                <V style={r.sectionTitle}>SESSION & IDENTITY</V>
+              </C>
+              <C style={r.sectionBody}>
+                {T.userId&&<C style={r.kvRow}>
+                    <V style={r.kvKey}>User ID:</V>
+                    <V style={r.kvVal}selectable>{T.userId}</V>
+                  </C>}
+                {T.sessionId&&<C style={r.kvRow}>
+                    <V style={r.kvKey}>Session ID:</V>
+                    <V style={r.kvVal}selectable>{T.sessionId}</V>
+                  </C>}
+                {T.trackingId&&<C style={r.kvRow}>
+                    <V style={r.kvKey}>Tracking ID:</V>
+                    <V style={r.kvVal}selectable>{T.trackingId}</V>
+                  </C>}
+              </C>
+            </C>}
 
           
-          <View style={detailStyles.sectionCard}>
-            <View style={detailStyles.sectionHeaderBetween}>
-              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                <TableIcon color={AppColors.brandPurple} size={12}/>
-                <Text style={detailStyles.sectionTitle}>
-                  EVENT PARAMETERS ({paramKeys.length})
-                </Text>
-              </View>
-              <Text style={detailStyles.sectionSubtitle}>
+          <C style={r.sectionCard}>
+            <C style={r.sectionHeaderBetween}>
+              <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                <Z color={e.brandPurple}size={12}/>
+                <V style={r.sectionTitle}>
+                  EVENT PARAMETERS ({E.length})
+                </V>
+              </C>
+              <V style={r.sectionSubtitle}>
                 Key-Value Attributes
-              </Text>
-            </View>
+              </V>
+            </C>
 
             
-            {paramKeys.length > 4 && (<View style={detailStyles.searchBar}>
-                <SearchIcon color={AppColors.grayTextWeak} size={13}/>
-                <TextInput placeholder="Filter parameters by key or value..." placeholderTextColor={AppColors.grayTextWeak} value={paramSearch} onChangeText={setParamSearch} style={detailStyles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-                {paramSearch.length > 0 && (<Pressable onPress={() => setParamSearch('')} hitSlop={8}>
-                    <ClearIcon color={AppColors.grayTextWeak} size={13}/>
-                  </Pressable>)}
-              </View>)}
-
-            {paramKeys.length === 0 ? (<View style={detailStyles.emptyParamsBox}>
-                <DocIcon color={AppColors.grayTextWeak} size={16}/>
-                <Text style={detailStyles.emptyParamsText}>
+            {E.length>4&&<C style={r.searchBar}>
+                <We color={e.grayTextWeak}size={13}/>
+                <Ve placeholder="Filter parameters by key or value..."placeholderTextColor={e.grayTextWeak}value={D}onChangeText={v}style={r.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+                {D.length>0&&<Ce onPress={()=>v("")}hitSlop={8}>
+                    <He color={e.grayTextWeak}size={13}/>
+                  </Ce>}
+              </C>}
+
+            {E.length===0?<C style={r.emptyParamsBox}>
+                <$e color={e.grayTextWeak}size={16}/>
+                <V style={r.emptyParamsText}>
                   No custom parameters recorded for this event.
-                </Text>
-              </View>) : filteredParamEntries.length === 0 ? (<View style={detailStyles.emptyParamsBox}>
-                <Text style={detailStyles.emptyParamsText}>
-                  No parameters matching "{paramSearch}"
-                </Text>
-              </View>) : (<View style={detailStyles.paramList}>
-                {filteredParamEntries.map(([key, val], pIdx) => {
-                    const isObject = typeof val === 'object' && val !== null;
-                    const isArray = Array.isArray(val);
-                    let typeStr = typeof val;
-                    if (val === null)
-                        typeStr = 'null';
-                    else if (isArray)
-                        typeStr = `array [${val.length}]`;
-                    else if (isObject)
-                        typeStr = 'object';
-                    const valString = isObject ? JSON.stringify(val, null, 2) : String(val);
-                    const isKeyHighlighted = key === 'value' ||
-                        key === 'price' ||
-                        key === 'currency' ||
-                        key === 'screen_name' ||
-                        key === 'item_id' ||
-                        key === 'item_name';
-                    return (<AnimatedEntrance key={key} index={pIdx} distance={4}>
-                      <View style={detailStyles.paramCard}>
+                </V>
+              </C>:J.length===0?<C style={r.emptyParamsBox}>
+                <V style={r.emptyParamsText}>
+                  No parameters matching "{D}"
+                </V>
+              </C>:<C style={r.paramList}>
+                {J.map(([B,I],K)=>{const F=typeof I=="object"&&I!==null,L=Array.isArray(I);let N=typeof I;I===null?N="null":L?N=`array [${I.length}]`:F&&(N="object");const U=F?JSON.stringify(I,null,2):String(I),te=B==="value"||B==="price"||B==="currency"||B==="screen_name"||B==="item_id"||B==="item_name";return<Ie key={B}index={K}distance={4}>
+                      <C style={r.paramCard}>
                         
-                        <View style={detailStyles.paramCardHeader}>
-                          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1, minWidth: 0 }}>
-                            <HighlightText text={key} search={paramSearch} style={[
-                            detailStyles.paramKeyText,
-                            isKeyHighlighted && detailStyles.paramKeyHighlighted,
-                        ]} highlightStyle={detailStyles.highlight}/>
-                            <View style={detailStyles.typeBadge}>
-                              <Text style={detailStyles.typeBadgeText}>
-                                {typeStr.toUpperCase()}
-                              </Text>
-                            </View>
-                          </View>
-
-                          <CopyButton value={valString} label={key}/>
-                        </View>
+                        <C style={r.paramCardHeader}>
+                          <C style={{flexDirection:"row",alignItems:"center",gap:6,flex:1,minWidth:0}}>
+                            <Q text={B}search={D}style={[r.paramKeyText,te&&r.paramKeyHighlighted]}highlightStyle={r.highlight}/>
+                            <C style={r.typeBadge}>
+                              <V style={r.typeBadgeText}>
+                                {N.toUpperCase()}
+                              </V>
+                            </C>
+                          </C>
+
+                          <G value={U}label={B}/>
+                        </C>
 
                         
-                        <View style={detailStyles.paramValBox}>
-                          {isObject ? (<JsonViewer data={val} search={paramSearch} hideTabs wrap/>) : (<HighlightText text={valString} search={paramSearch} style={detailStyles.paramValText} highlightStyle={detailStyles.highlight} selectable/>)}
-                        </View>
-                      </View>
-                    </AnimatedEntrance>);
-                })}
-              </View>)}
-          </View>
+                        <C style={r.paramValBox}>
+                          {F?<Y data={I}search={D}hideTabs wrap/>:<Q text={U}search={D}style={r.paramValText}highlightStyle={r.highlight}selectable/>}
+                        </C>
+                      </C>
+                    </Ie>})}
+              </C>}
+          </C>
 
           
-          {userPropKeys.length > 0 && (<View style={detailStyles.sectionCard}>
-              <View style={detailStyles.sectionHeader}>
-                <SparkleIcon color={AppColors.purple} size={12}/>
-                <Text style={detailStyles.sectionTitle}>
-                  USER PROPERTIES SNAPSHOT ({userPropKeys.length})
-                </Text>
-              </View>
-              <View style={detailStyles.sectionBody}>
-                {userPropKeys.map(k => (<View key={k} style={detailStyles.kvRow}>
-                    <Text style={detailStyles.kvKey}>{k}:</Text>
-                    <Text style={detailStyles.kvVal} selectable>
-                      {String(userProperties[k])}
-                    </Text>
-                  </View>))}
-              </View>
-            </View>)}
-        </View>)}
-
-      
-      {activeViewTab === 'tree' && (<View style={detailStyles.jsonContainer}>
-          <JsonViewer data={fullJsonData} defaultExpandDepth={1} mode="pretty" fullHeight/>
-        </View>)}
+          {R.length>0&&<C style={r.sectionCard}>
+              <C style={r.sectionHeader}>
+                <X color={e.purple}size={12}/>
+                <V style={r.sectionTitle}>
+                  USER PROPERTIES SNAPSHOT ({R.length})
+                </V>
+              </C>
+              <C style={r.sectionBody}>
+                {R.map(B=><C key={B}style={r.kvRow}>
+                    <V style={r.kvKey}>{B}:</V>
+                    <V style={r.kvVal}selectable>
+                      {String(H[B])}
+                    </V>
+                  </C>)}
+              </C>
+            </C>}
+        </C>}
 
       
-      {activeViewTab === 'raw' && (<View style={detailStyles.jsonContainer}>
-          <JsonViewer data={fullJsonData} mode="raw" fullHeight/>
-        </View>)}
-    </ScrollView>);
-};
-const detailStyles = StyleSheet.create({
-    scroll: {
-        flex: 1,
-        backgroundColor: AppColors.grayBackground,
-    },
-    content: {
-        paddingTop: 12,
-        paddingBottom: 40,
-        paddingHorizontal: 12,
-    },
-    heroCard: {
-        backgroundColor: AppColors.white,
-        borderRadius: 12,
-        padding: 14,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        shadowColor: AppColors.primaryBlack,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.04,
-        shadowRadius: 4,
-        elevation: 2,
-        marginBottom: 12,
-    },
-    heroTopRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 10,
-    },
-    sourceBadge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4.5,
-        paddingHorizontal: 7,
-        paddingVertical: 3,
-        borderRadius: 5,
-        borderWidth: 1,
-    },
-    sourceDot: {
-        width: 6,
-        height: 6,
-        borderRadius: 3,
-    },
-    sourceBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        letterSpacing: 0.4,
-    },
-    catBadge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        paddingHorizontal: 7,
-        paddingVertical: 3,
-        borderRadius: 5,
-        borderWidth: 1,
-    },
-    catBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        letterSpacing: 0.3,
-    },
-    titleRow: {
-        marginBottom: 8,
-    },
-    eventTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 16,
-        color: AppColors.primaryBlack,
-        lineHeight: 22,
-    },
-    metaRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        flexWrap: 'wrap',
-        marginBottom: 10,
-    },
-    timePill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: `${AppColors.purple}14`,
-        paddingHorizontal: 7,
-        paddingVertical: 3,
-        borderRadius: 5,
-        borderWidth: 1,
-        borderColor: `${AppColors.purple}2E`,
-    },
-    timeText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10.5,
-        color: AppColors.purple,
-    },
-    screenPill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: `${AppColors.sky500}14`,
-        paddingHorizontal: 7,
-        paddingVertical: 3,
-        borderRadius: 5,
-        borderWidth: 1,
-        borderColor: `${AppColors.sky500}2E`,
-        maxWidth: 220,
-    },
-    screenText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10.5,
-        color: AppColors.sky600,
-    },
-    metricsBar: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        flexWrap: 'wrap',
-        paddingTop: 8,
-        borderTopWidth: 1,
-        borderTopColor: AppColors.dividerColor,
-    },
-    metricPill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: AppColors.grayBackground,
-        paddingHorizontal: 7,
-        paddingVertical: 3,
-        borderRadius: 5,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    metricLabel: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10.5,
-        color: AppColors.grayTextWeak,
-    },
-    metricValue: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10.5,
-        color: AppColors.primaryBlack,
-    },
-    revenuePill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: AppColors.emeraldBg,
-        paddingHorizontal: 7,
-        paddingVertical: 3,
-        borderRadius: 5,
-        borderWidth: 1,
-        borderColor: AppColors.emeraldBorder,
-    },
-    revenueValue: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10.5,
-        color: '#047857',
-    },
-    itemsPill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: '#EFF6FF',
-        paddingHorizontal: 7,
-        paddingVertical: 3,
-        borderRadius: 5,
-        borderWidth: 1,
-        borderColor: '#BFDBFE',
-    },
-    itemsValue: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10.5,
-        color: '#1D4ED8',
-    },
-    tabsWrap: {
-        marginBottom: 12,
-    },
-    tabContent: {
-        gap: 12,
-    },
-    sectionCard: {
-        backgroundColor: AppColors.white,
-        borderRadius: 12,
-        padding: 12,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        shadowColor: AppColors.primaryBlack,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.04,
-        shadowRadius: 4,
-        elevation: 2,
-    },
-    sectionHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        marginBottom: 10,
-        paddingBottom: 6,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.dividerColor,
-    },
-    sectionHeaderBetween: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 10,
-        paddingBottom: 6,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.dividerColor,
-    },
-    sectionTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors.slate700,
-        letterSpacing: 0.4,
-    },
-    sectionSubtitle: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-    },
-    sectionBody: {
-        gap: 6,
-    },
-    kvRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingVertical: 3,
-    },
-    kvKey: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.grayTextWeak,
-    },
-    kvVal: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors.primaryBlack,
-    },
-    searchBar: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors.grayBackground,
-        borderRadius: 8,
-        paddingHorizontal: 8,
-        paddingVertical: 5,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        marginBottom: 10,
-        gap: 6,
-    },
-    searchInput: {
-        flex: 1,
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors.primaryBlack,
-        paddingVertical: 0,
-    },
-    emptyParamsBox: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 20,
-        gap: 6,
-    },
-    emptyParamsText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.grayTextWeak,
-    },
-    paramList: {
-        gap: 8,
-    },
-    paramCard: {
-        backgroundColor: AppColors.grayBackground,
-        borderRadius: 8,
-        padding: 9,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    paramCardHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 4,
-    },
-    paramKeyText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11.5,
-        color: AppColors.primaryBlack,
-    },
-    paramKeyHighlighted: {
-        color: AppColors.brandPurple,
-    },
-    typeBadge: {
-        backgroundColor: '#E2E8F0',
-        paddingHorizontal: 5,
-        paddingVertical: 1.5,
-        borderRadius: 3,
-    },
-    typeBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 8.5,
-        color: AppColors.slate700,
-        letterSpacing: 0.3,
-    },
-    paramValBox: {
-        marginTop: 2,
-    },
-    paramValText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors.slate700,
-        lineHeight: 16,
-    },
-    jsonContainer: {
-        borderRadius: 12,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        overflow: 'hidden',
-        backgroundColor: AppColors.white,
-        minHeight: 300,
-    },
-    highlight: {
-        backgroundColor: '#FEF08A',
-        color: '#854D0E',
-        fontFamily: AppFonts.interBold,
-    },
-});
-export default AnalyticsDetail;
+      {j==="json"&&<C style={r.jsonContainer}>
+          <Y data={A}defaultExpandDepth={2}fullHeight/>
+        </C>}
+    </Te>},r=Be.create({scroll:{flex:1,backgroundColor:e.grayBackground},content:{paddingTop:12,paddingBottom:40,paddingHorizontal:12},heroCard:{backgroundColor:e.white,borderRadius:12,padding:14,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:4,elevation:2,marginBottom:12},heroTopRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:10},idBadge:{paddingHorizontal:6,paddingVertical:2.5,borderRadius:5,backgroundColor:`${e.slate500}12`,borderWidth:1,borderColor:`${e.slate500}22`},idBadgeText:{fontFamily:S.interBold,fontSize:10,color:e.grayTextWeak,letterSpacing:.2},sourceBadge:{flexDirection:"row",alignItems:"center",gap:4.5,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1},sourceDot:{width:6,height:6,borderRadius:3},sourceBadgeText:{fontFamily:S.interBold,fontSize:9.5,letterSpacing:.4},catBadge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1},catBadgeText:{fontFamily:S.interBold,fontSize:9.5,letterSpacing:.3},titleRow:{marginBottom:8},eventTitle:{fontFamily:S.interBold,fontSize:16,color:e.primaryBlack,lineHeight:22},metaRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap",marginBottom:10},timePill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:`${e.purple}14`,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:`${e.purple}2E`},timeText:{fontFamily:S.interMedium,fontSize:10.5,color:e.purple},screenPill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:`${e.sky500}14`,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:`${e.sky500}2E`,maxWidth:220},screenText:{fontFamily:S.interMedium,fontSize:10.5,color:e.sky600},metricsBar:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap",paddingTop:8,borderTopWidth:1,borderTopColor:e.dividerColor},metricPill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.grayBackground,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.dividerColor},metricLabel:{fontFamily:S.interMedium,fontSize:10.5,color:e.grayTextWeak},metricValue:{fontFamily:S.interBold,fontSize:10.5,color:e.primaryBlack},revenuePill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.emeraldBg,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.emeraldBorder},revenueValue:{fontFamily:S.interBold,fontSize:10.5,color:"#047857"},itemsPill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:"#EFF6FF",paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:"#BFDBFE"},itemsValue:{fontFamily:S.interBold,fontSize:10.5,color:"#1D4ED8"},tabsWrap:{marginBottom:12},tabContent:{gap:12},sectionCard:{backgroundColor:e.white,borderRadius:12,padding:12,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:4,elevation:2},sectionHeader:{flexDirection:"row",alignItems:"center",gap:6,marginBottom:10,paddingBottom:6,borderBottomWidth:1,borderBottomColor:e.dividerColor},sectionHeaderBetween:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:10,paddingBottom:6,borderBottomWidth:1,borderBottomColor:e.dividerColor},sectionTitle:{fontFamily:S.interBold,fontSize:11,color:e.slate700,letterSpacing:.4},sectionSubtitle:{fontFamily:S.interMedium,fontSize:10,color:e.grayTextWeak},sectionBody:{gap:6},kvRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:3},kvKey:{fontFamily:S.interMedium,fontSize:11,color:e.grayTextWeak},kvVal:{fontFamily:S.interBold,fontSize:11,color:e.primaryBlack},searchBar:{flexDirection:"row",alignItems:"center",backgroundColor:e.grayBackground,borderRadius:8,paddingHorizontal:8,paddingVertical:5,borderWidth:1,borderColor:e.dividerColor,marginBottom:10,gap:6},searchInput:{flex:1,fontFamily:S.interRegular,fontSize:11,color:e.primaryBlack,paddingVertical:0},emptyParamsBox:{alignItems:"center",justifyContent:"center",paddingVertical:20,gap:6},emptyParamsText:{fontFamily:S.interMedium,fontSize:11,color:e.grayTextWeak},paramList:{gap:8},paramCard:{backgroundColor:e.grayBackground,borderRadius:8,padding:9,borderWidth:1,borderColor:e.dividerColor},paramCardHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:4},paramKeyText:{fontFamily:S.interBold,fontSize:11.5,color:e.primaryBlack},paramKeyHighlighted:{color:e.brandPurple},typeBadge:{backgroundColor:"#E2E8F0",paddingHorizontal:5,paddingVertical:1.5,borderRadius:3},typeBadgeText:{fontFamily:S.interBold,fontSize:8.5,color:e.slate700,letterSpacing:.3},paramValBox:{marginTop:2},paramValText:{fontFamily:S.interRegular,fontSize:11,color:e.slate700,lineHeight:16},jsonContainer:{borderRadius:12,borderWidth:1,borderColor:e.dividerColor,overflow:"hidden",backgroundColor:e.white,minHeight:300},highlight:{backgroundColor:"#FEF08A",color:"#854D0E",fontFamily:S.interBold}});export default Je;