react-native-inapp-inspector 2.3.18 → 2.3.20

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

@@ -1,978 +1,332 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const InspectorContext_1 = require("./InspectorContext");
-const AnalyticsEventCard_1 = __importDefault(require("../AnalyticsEventCard"));
-const AnalyticsFilterModal_1 = __importDefault(require("./AnalyticsFilterModal"));
-const EndOfListFooter_1 = __importDefault(require("../EndOfListFooter"));
-const EmptyState_1 = __importDefault(require("../EmptyState"));
-const styles_1 = __importDefault(require("../../styles"));
-const AppColors_1 = require("../../styles/AppColors");
-const AppFonts_1 = require("../../styles/AppFonts");
-const i18n_1 = require("../../i18n");
-const react_native_svg_1 = __importStar(require("react-native-svg"));
-const TouchableScale_1 = __importDefault(require("../TouchableScale"));
-const analyticsLogger_1 = require("../../customHooks/analyticsLogger");
-const helpers_1 = require("../../helpers");
-const NetworkIcons_1 = require("../NetworkIcons");
-const AnalyticsHeader = react_1.default.memo(() => {
-    const { t } = (0, i18n_1.useTranslation)();
-    const { analyticsEvents, filteredAnalyticsEvents, analyticsFilters, setAnalyticsFilters, analyticsHeaderExpanded, setAnalyticsHeaderExpanded, } = (0, InspectorContext_1.useInspector)();
-    const userId = (0, analyticsLogger_1.getCurrentUserId)();
-    const userProperties = (0, analyticsLogger_1.getCurrentUserProperties)();
-    const defaultParams = (0, analyticsLogger_1.getDefaultEventParameters)();
-    const isTrackingEnabled = (0, analyticsLogger_1.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 = (0, react_1.useMemo)(() => {
-        let ecommerce = 0;
-        let page_view = 0;
-        let system = 0;
-        let custom = 0;
-        let totalRevenue = 0;
-        for (const e of analyticsEvents) {
-            const cat = (0, helpers_1.getEventCategory)(e.name);
-            const c = e.count || 1;
-            if (cat === 'ecommerce') {
-                ecommerce += c;
-                const val = e.params?.value ?? e.params?.price;
-                if (val && !isNaN(Number(val))) {
-                    totalRevenue += Number(val);
-                }
-            }
-            else if (cat === 'page_view') {
-                page_view += c;
-            }
-            else if (cat === 'system') {
-                system += c;
-            }
-            else {
-                custom += c;
-            }
-        }
-        const total = ecommerce + page_view + system + custom || 1;
-        return {
-            ecommerce,
-            page_view,
-            system,
-            custom,
-            totalRevenue,
-            ecommercePct: Math.round((ecommerce / total) * 100),
-            page_viewPct: Math.round((page_view / total) * 100),
-            systemPct: Math.round((system / total) * 100),
-            customPct: Math.round((custom / total) * 100),
-            totalCount: total,
-        };
-    }, [analyticsEvents]);
-    const topScreens = (0, react_1.useMemo)(() => {
-        const screenMap = new Map();
-        for (const e of filteredAnalyticsEvents) {
-            const scr = e.screenName ||
-                e.params?.firebase_screen ||
-                e.params?.screen_name ||
-                e.params?.firebase_screen_class ||
-                e.screenClass;
-            if (scr && typeof scr === 'string' && scr.trim() !== '') {
-                screenMap.set(scr, (screenMap.get(scr) || 0) + (e.count || 1));
-            }
-        }
-        const arr = Array.from(screenMap.entries()).sort((a, b) => b[1] - a[1]);
-        const maxVal = arr.length > 0 ? arr[0][1] : 1;
-        return arr.slice(0, 3).map(([name, count]) => ({
-            name,
-            count,
-            pct: Math.round((count / (filteredAnalyticsEvents.length || 1)) * 100),
-            barWidthPct: Math.round((count / maxVal) * 100),
-        }));
-    }, [filteredAnalyticsEvents]);
-    const toggleCategoryFilter = (cat) => {
-        (0, InspectorContext_1.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] = (0, react_1.useState)(null);
-    const [liveTick, setLiveTick] = (0, react_1.useState)(0);
-    (0, react_1.useEffect)(() => {
-        if (!isTrackingEnabled)
-            return;
-        const interval = setInterval(() => {
-            setLiveTick(t => (t + 1) % 100000);
-        }, 1000);
-        return () => clearInterval(interval);
-    }, [isTrackingEnabled]);
-    const histogramData = (0, react_1.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 = (0, helpers_1.getEventCategory)(e.name);
-                    const c = e.count || 1;
-                    buckets[bucketIdx].total += c;
-                    if (cat === 'ecommerce')
-                        buckets[bucketIdx].ecommerce += c;
-                    else if (cat === 'page_view')
-                        buckets[bucketIdx].page_view += c;
-                    else if (cat === 'system')
-                        buckets[bucketIdx].system += c;
-                    else
-                        buckets[bucketIdx].custom += c;
-                }
-            }
-        }
-        const maxVal = Math.max(...buckets.map(b => b.total), 4);
-        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 (<react_native_1.View style={styles_1.default.analyticsHeaderCard}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(a,l,r,s){s===void 0&&(s=r);var p=Object.getOwnPropertyDescriptor(l,r);(!p||("get"in p?!l.__esModule:p.writable||p.configurable))&&(p={enumerable:!0,get:function(){return l[r]}}),Object.defineProperty(a,s,p)}):(function(a,l,r,s){s===void 0&&(s=r),a[s]=l[r]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(a,l){Object.defineProperty(a,"default",{enumerable:!0,value:l})}):function(a,l){a.default=l}),__importStar=this&&this.__importStar||(function(){var a=function(l){return a=Object.getOwnPropertyNames||function(r){var s=[];for(var p in r)Object.prototype.hasOwnProperty.call(r,p)&&(s[s.length]=p);return s},a(l)};return function(l){if(l&&l.__esModule)return l;var r={};if(l!=null)for(var s=a(l),p=0;p<s.length;p++)s[p]!=="default"&&__createBinding(r,l,s[p]);return __setModuleDefault(r,l),r}})(),__importDefault=this&&this.__importDefault||function(a){return a&&a.__esModule?a:{default:a}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),AnalyticsEventCard_1=__importDefault(require("../AnalyticsEventCard")),AnalyticsFilterModal_1=__importDefault(require("./AnalyticsFilterModal")),EndOfListFooter_1=__importDefault(require("../EndOfListFooter")),EmptyState_1=__importDefault(require("../EmptyState")),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),i18n_1=require("../../i18n"),react_native_svg_1=__importStar(require("react-native-svg")),TouchableScale_1=__importDefault(require("../TouchableScale")),analyticsLogger_1=require("../../customHooks/analyticsLogger"),helpers_1=require("../../helpers"),NetworkIcons_1=require("../NetworkIcons"),AnalyticsHeader=react_1.default.memo(()=>{const{t:a}=(0,i18n_1.useTranslation)(),{analyticsEvents:l,filteredAnalyticsEvents:r,analyticsHeaderExpanded:s,setAnalyticsHeaderExpanded:p}=(0,InspectorContext_1.useInspector)(),[f,R]=(0,react_1.useState)(!1),L=(0,analyticsLogger_1.getCurrentUserId)(),B=(0,analyticsLogger_1.getCurrentUserProperties)(),S=(0,analyticsLogger_1.getDefaultEventParameters)(),v=(0,analyticsLogger_1.getCollectionEnabled)();if(l.length===0)return null;const I=Object.keys(B).length>0,D=Object.keys(S).length>0,b=r.length,k=(0,react_1.useMemo)(()=>{let e=0,o=0;for(const d of l){const n=(0,helpers_1.getEventCategory)(d.name),c=d.count||1;if(n==="ecommerce"){e+=c;const _=d.params?.value??d.params?.price;_&&!isNaN(Number(_))&&(o+=Number(_))}}return{ecommerce:e,totalRevenue:o}},[l]),E=(0,react_1.useMemo)(()=>{const e=new Map;for(const n of r){const c=n.screenName||n.params?.firebase_screen||n.params?.screen_name||n.params?.firebase_screen_class||n.screenClass;c&&typeof c=="string"&&c.trim()!==""&&e.set(c,(e.get(c)||0)+(n.count||1))}const o=Array.from(e.entries()).sort((n,c)=>c[1]-n[1]),d=o.length>0?o[0][1]:1;return o.slice(0,3).map(([n,c])=>({name:n,count:c,pct:Math.round(c/(r.length||1)*100),barWidthPct:Math.round(c/d*100)}))},[r]),h=12,u=64,A=320,[T,V]=(0,react_1.useState)(null),[F,$]=(0,react_1.useState)(0);(0,react_1.useEffect)(()=>{if(!v)return;const e=setInterval(()=>{$(o=>(o+1)%1e5)},1e3);return()=>clearInterval(e)},[v]);const y=(0,react_1.useMemo)(()=>{const e=[],o=Date.now(),d=6e4,n=d/h;for(let i=0;i<h;i++){const g=Math.round((h-1-i)*n/1e3);e.push({index:i,ecommerce:0,page_view:0,system:0,custom:0,total:0,x:i/(h-1)*(A-24)+12,y:u-12,isLatest:i===h-1,ageLabel:i===h-1?a("analytics.timeNow"):`-${g}s`})}for(const i of r){const g=o-i.timestamp;if(g>=0&&g<d){const m=Math.floor((d-1-g)/n);if(m>=0&&m<h){const C=(0,helpers_1.getEventCategory)(i.name),x=i.count||1;e[m].total+=x,C==="ecommerce"?e[m].ecommerce+=x:C==="page_view"?e[m].page_view+=x:C==="system"?e[m].system+=x:e[m].custom+=x}}}const c=Math.max(...e.map(i=>i.total),4);e.forEach(i=>{const g=i.total/c*(u-22);i.y=u-10-g});let _=`M ${e[0].x.toFixed(1)} ${e[0].y.toFixed(1)}`;for(let i=0;i<e.length-1;i++){const g=e[Math.max(0,i-1)],m=e[i],C=e[i+1],x=e[Math.min(e.length-1,i+2)],H=m.x+(C.x-g.x)/6,W=m.y+(C.y-g.y)/6,N=C.x-(x.x-m.x)/6,j=C.y-(x.y-m.y)/6;_+=` C ${H.toFixed(1)} ${W.toFixed(1)}, ${N.toFixed(1)} ${j.toFixed(1)}, ${C.x.toFixed(1)} ${C.y.toFixed(1)}`}const w=e[e.length-1],O=e[0],P=`${_} L ${w.x.toFixed(1)} ${u-4} L ${O.x.toFixed(1)} ${u-4} Z`,z=Math.max(...e.map(i=>i.total),0),M=Math.round(e.reduce((i,g)=>i+g.total,0));return{buckets:e,linePath:_,areaPath:P,peakVal:z,eventRate:M}},[r,u,A,F,a]),t=T!=null?y.buckets[T]:null;return<react_native_1.View style={styles_1.default.analyticsHeaderCard}>
       
-      <react_native_1.View style={styles_1.default.analyticsHeaderTop}>
-        <react_native_1.View style={{ flex: 1 }}>
-          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-            <react_native_1.Text style={styles_1.default.analyticsHeaderTitle}>{t('analytics.realtimeStream')}</react_native_1.Text>
-            <react_native_1.View style={[
-            styles_1.default.statusDot,
-            {
-                backgroundColor: isTrackingEnabled
-                    ? AppColors_1.AppColors.greenColor
-                    : AppColors_1.AppColors.errorColor,
-            },
-        ]}/>
-            <react_native_1.Text style={[
-            styles_1.default.statusText,
-            {
-                color: isTrackingEnabled
-                    ? AppColors_1.AppColors.greenColor
-                    : AppColors_1.AppColors.errorColor,
-                fontFamily: AppFonts_1.AppFonts.interBold,
-            },
-        ]}>
-              {isTrackingEnabled ? t('performance.live') : t('common.pause')}
+      <react_native_1.TouchableOpacity activeOpacity={.7}onPress={()=>{(0,InspectorContext_1.animateNextLayout)(),R(e=>!e)}}style={{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingVertical:2}}>
+        <react_native_1.View style={{flex:1}}>
+          <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
+            <react_native_1.Text style={styles_1.default.analyticsHeaderTitle}>{a("analytics.realtimeStream")}</react_native_1.Text>
+            <react_native_1.View style={[styles_1.default.statusDot,{backgroundColor:v?AppColors_1.AppColors.greenColor:AppColors_1.AppColors.errorColor}]}/>
+            <react_native_1.Text style={[styles_1.default.statusText,{color:v?AppColors_1.AppColors.greenColor:AppColors_1.AppColors.errorColor,fontFamily:AppFonts_1.AppFonts.interBold}]}>
+              {a(v?"performance.live":"common.pause")}
             </react_native_1.Text>
           </react_native_1.View>
-          <react_native_1.Text style={styles_1.default.analyticsHeaderSubtitle} numberOfLines={1}>
-            {userId ? `${t('analytics.userId')}: ${userId}` : t('analytics.emptySubtitle')}
+          <react_native_1.Text style={styles_1.default.analyticsHeaderSubtitle}numberOfLines={1}>
+            {L?`${a("analytics.userId")}: ${L}`:a("analytics.emptySubtitle")}
           </react_native_1.Text>
         </react_native_1.View>
 
-        <react_native_1.TouchableOpacity style={styles_1.default.analyticsHeaderToggle} activeOpacity={0.7} onPress={() => {
-            (0, InspectorContext_1.animateNextLayout)();
-            setAnalyticsHeaderExpanded(!analyticsHeaderExpanded);
-        }}>
-          <react_native_1.Text style={styles_1.default.analyticsHeaderToggleText}>
-            {analyticsHeaderExpanded ? t('common.close') : t('analytics.eventDetails')}
-          </react_native_1.Text>
-        </react_native_1.TouchableOpacity>
-      </react_native_1.View>
-
-      
-      <react_native_1.View style={{ marginTop: 10, marginBottom: 8 }}>
-        
-        <react_native_1.View style={{
-            height: 4.5,
-            borderRadius: 2.5,
-            backgroundColor: `${AppColors_1.AppColors.grayBorderSecondary}40`,
-            flexDirection: 'row',
-            overflow: 'hidden',
-            marginBottom: 8,
-        }}>
-          {categoryStats.ecommerce > 0 && (<react_native_1.View style={{
-                flex: categoryStats.ecommerce,
-                backgroundColor: AppColors_1.AppColors.amber500,
-            }}/>)}
-          {categoryStats.page_view > 0 && (<react_native_1.View style={{
-                flex: categoryStats.page_view,
-                backgroundColor: AppColors_1.AppColors.sky500,
-            }}/>)}
-          {categoryStats.system > 0 && (<react_native_1.View style={{
-                flex: categoryStats.system,
-                backgroundColor: AppColors_1.AppColors.purple,
-            }}/>)}
-          {categoryStats.custom > 0 && (<react_native_1.View style={{
-                flex: categoryStats.custom,
-                backgroundColor: AppColors_1.AppColors.brandPurple,
-            }}/>)}
-        </react_native_1.View>
-
-        
-        <react_native_1.View style={{
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-            gap: 6,
-        }}>
-          
-          {(() => {
-            const isAllSelected = analyticsFilters.categories.has('all');
-            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('all')} style={[
-                    {
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 5,
-                        backgroundColor: isAllSelected ? AppColors_1.AppColors.indigo600Alt : AppColors_1.AppColors.indigo50,
-                        paddingHorizontal: 8,
-                        paddingVertical: 5,
-                        borderRadius: 7,
-                        borderWidth: 1,
-                        borderColor: isAllSelected ? AppColors_1.AppColors.indigo600 : AppColors_1.AppColors.indigo400,
-                    },
-                    isAllSelected && {
-                        shadowColor: AppColors_1.AppColors.indigo600Alt,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.28,
-                        shadowRadius: 2.5,
-                        elevation: 2,
-                    },
-                ]}>
-                <NetworkIcons_1.LayersIcon color={isAllSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.indigo600Alt} size={11}/>
-                <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 10,
-                    color: isAllSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.indigo600Alt,
-                }}>
-                  {t('analytics.allCategory')}: {categoryStats.totalCount}
-                </react_native_1.Text>
-              </TouchableScale_1.default>);
-        })()}
-
-          
-          {(() => {
-            const isSelected = !analyticsFilters.categories.has('all') &&
-                analyticsFilters.categories.has('ecommerce');
-            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('ecommerce')} style={[
-                    {
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 5,
-                        backgroundColor: isSelected ? AppColors_1.AppColors.amber600 : AppColors_1.AppColors.amber100,
-                        paddingHorizontal: 8,
-                        paddingVertical: 5,
-                        borderRadius: 7,
-                        borderWidth: 1,
-                        borderColor: isSelected ? AppColors_1.AppColors.amber700 : AppColors_1.AppColors.amber200,
-                    },
-                    isSelected && {
-                        shadowColor: AppColors_1.AppColors.amber600,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.28,
-                        shadowRadius: 2.5,
-                        elevation: 2,
-                    },
-                ]}>
-                <NetworkIcons_1.CartIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber700} size={11}/>
-                <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 10,
-                    color: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber800Warm,
-                }}>
-                  {t('analytics.ecommerceCategory')}: {categoryStats.ecommerce} ({categoryStats.ecommercePct}%)
-                </react_native_1.Text>
-              </TouchableScale_1.default>);
-        })()}
-
-          
-          {(() => {
-            const isSelected = !analyticsFilters.categories.has('all') &&
-                analyticsFilters.categories.has('page_view');
-            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('page_view')} style={[
-                    {
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 5,
-                        backgroundColor: isSelected ? AppColors_1.AppColors.sky600 : AppColors_1.AppColors.sky100,
-                        paddingHorizontal: 8,
-                        paddingVertical: 5,
-                        borderRadius: 7,
-                        borderWidth: 1,
-                        borderColor: isSelected ? AppColors_1.AppColors.blue700 : AppColors_1.AppColors.sky400,
-                    },
-                    isSelected && {
-                        shadowColor: AppColors_1.AppColors.sky600,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.28,
-                        shadowRadius: 2.5,
-                        elevation: 2,
-                    },
-                ]}>
-                <NetworkIcons_1.GlobeIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky600} size={11}/>
-                <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 10,
-                    color: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky600,
-                }}>
-                  {t('analytics.screensCategory')}: {categoryStats.page_view} ({categoryStats.page_viewPct}%)
-                </react_native_1.Text>
-              </TouchableScale_1.default>);
-        })()}
-
-          
-          {(() => {
-            const isSelected = !analyticsFilters.categories.has('all') &&
-                analyticsFilters.categories.has('system');
-            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('system')} style={[
-                    {
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 5,
-                        backgroundColor: isSelected ? AppColors_1.AppColors.violet600 : AppColors_1.AppColors.purple100,
-                        paddingHorizontal: 8,
-                        paddingVertical: 5,
-                        borderRadius: 7,
-                        borderWidth: 1,
-                        borderColor: isSelected ? AppColors_1.AppColors.purpleShade700 : AppColors_1.AppColors.purple200,
-                    },
-                    isSelected && {
-                        shadowColor: AppColors_1.AppColors.violet600,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.28,
-                        shadowRadius: 2.5,
-                        elevation: 2,
-                    },
-                ]}>
-                <NetworkIcons_1.BoltIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>
-                <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 10,
-                    color: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.brandPurple,
-                }}>
-                  {t('analytics.systemCategory')}: {categoryStats.system} ({categoryStats.systemPct}%)
-                </react_native_1.Text>
-              </TouchableScale_1.default>);
-        })()}
+        <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:8}}>
+          {f?<react_native_1.TouchableOpacity style={styles_1.default.analyticsHeaderToggle}activeOpacity={.7}onPress={e=>{e.stopPropagation(),(0,InspectorContext_1.animateNextLayout)(),p(!s)}}>
+              <react_native_1.Text style={styles_1.default.analyticsHeaderToggleText}>
+                {a(s?"common.close":"analytics.eventDetails")}
+              </react_native_1.Text>
+            </react_native_1.TouchableOpacity>:<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:`${AppColors_1.AppColors.purple}14`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,borderWidth:1,borderColor:`${AppColors_1.AppColors.purple}25`}}>
+              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10,color:AppColors_1.AppColors.purple}}>
+                {b} {b===1?"event":"events"}
+              </react_native_1.Text>
+            </react_native_1.View>}
 
-          
-          {(() => {
-            const isSelected = !analyticsFilters.categories.has('all') &&
-                analyticsFilters.categories.has('custom');
-            return (<TouchableScale_1.default onPress={() => toggleCategoryFilter('custom')} style={[
-                    {
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 5,
-                        backgroundColor: isSelected ? AppColors_1.AppColors.pink600 : AppColors_1.AppColors.pink100,
-                        paddingHorizontal: 8,
-                        paddingVertical: 5,
-                        borderRadius: 7,
-                        borderWidth: 1,
-                        borderColor: isSelected ? AppColors_1.AppColors.rose700 : AppColors_1.AppColors.roseBorder,
-                    },
-                    isSelected && {
-                        shadowColor: AppColors_1.AppColors.pink600,
-                        shadowOffset: { width: 0, height: 1 },
-                        shadowOpacity: 0.28,
-                        shadowRadius: 2.5,
-                        elevation: 2,
-                    },
-                ]}>
-                <NetworkIcons_1.SparkleIcon color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.brandPurple} size={11}/>
-                <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 10,
-                    color: isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.pink600,
-                }}>
-                  {t('analytics.customCategory')}: {categoryStats.custom} ({categoryStats.customPct}%)
-                </react_native_1.Text>
-              </TouchableScale_1.default>);
-        })()}
+          <NetworkIcons_1.ChevronIcon direction={f?"up":"down"}size={16}color={AppColors_1.AppColors.grayTextWeak}/>
         </react_native_1.View>
-      </react_native_1.View>
+      </react_native_1.TouchableOpacity>
 
       
-      <react_native_1.View style={{
-            marginTop: 2,
-            marginBottom: 8,
-            backgroundColor: AppColors_1.AppColors.grayBackground,
-            borderRadius: 10,
-            borderWidth: 1,
-            borderColor: AppColors_1.AppColors.dividerColor,
-            padding: 10,
-        }}>
-        
-        <react_native_1.View style={{
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'flex-start',
-            marginBottom: 6,
-        }}>
-          <react_native_1.View>
-            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'baseline', gap: 6 }}>
-              <react_native_1.Text style={{
-            fontFamily: AppFonts_1.AppFonts.interBold,
-            fontSize: 22,
-            color: AppColors_1.AppColors.primaryBlack,
-            lineHeight: 26,
-        }}>
-                {totalEvents}
-              </react_native_1.Text>
-              <react_native_1.Text style={{
-            fontFamily: AppFonts_1.AppFonts.interMedium,
-            fontSize: 10.5,
-            color: AppColors_1.AppColors.grayTextWeak,
-        }}>
-                {t('analytics.eventsInWindow')}
-              </react_native_1.Text>
-            </react_native_1.View>
-          </react_native_1.View>
-
+      {f&&<react_native_1.View style={{marginTop:10}}>
           
-          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
-            <react_native_1.View style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 3,
-            backgroundColor: `${AppColors_1.AppColors.purple}14`,
-            paddingHorizontal: 6,
-            paddingVertical: 2.5,
-            borderRadius: 4,
-            borderWidth: 1,
-            borderColor: `${AppColors_1.AppColors.purple}2E`,
-        }}>
-              <react_native_1.Text style={{
-            fontFamily: AppFonts_1.AppFonts.interBold,
-            fontSize: 9.5,
-            color: AppColors_1.AppColors.purple,
-        }}>
-                {t('analytics.eventVelocity', { rate: histogramData.eventRate })}
-              </react_native_1.Text>
-            </react_native_1.View>
+          <react_native_1.View style={{marginBottom:8,backgroundColor:AppColors_1.AppColors.grayBackground,borderRadius:10,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,padding:10}}>
+            
+            <react_native_1.View style={{flexDirection:"row",justifyContent:"space-between",alignItems:"flex-start",marginBottom:6}}>
+              <react_native_1.View>
+                <react_native_1.View style={{flexDirection:"row",alignItems:"baseline",gap:6}}>
+                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:22,color:AppColors_1.AppColors.primaryBlack,lineHeight:26}}>
+                    {b}
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10.5,color:AppColors_1.AppColors.grayTextWeak}}>
+                    {a("analytics.eventsInWindow")}
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
 
-            {categoryStats.totalRevenue > 0 && (<react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 3,
-                backgroundColor: `${AppColors_1.AppColors.emerald600}15`,
-                paddingHorizontal: 6,
-                paddingVertical: 2.5,
-                borderRadius: 4,
-                borderWidth: 1,
-                borderColor: `${AppColors_1.AppColors.emerald600}30`,
-            }}>
-                <NetworkIcons_1.MoneyIcon color={AppColors_1.AppColors.emerald600} size={10}/>
-                <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 9.5,
-                color: AppColors_1.AppColors.emerald600,
-            }}>
-                  ${categoryStats.totalRevenue.toFixed(2)}
-                </react_native_1.Text>
-              </react_native_1.View>)}
-          </react_native_1.View>
-        </react_native_1.View>
+              
+              <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:5}}>
+                <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${AppColors_1.AppColors.purple}14`,paddingHorizontal:6,paddingVertical:2.5,borderRadius:4,borderWidth:1,borderColor:`${AppColors_1.AppColors.purple}2E`}}>
+                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.purple}}>
+                    {a("analytics.eventVelocity",{rate:y.eventRate})}
+                  </react_native_1.Text>
+                </react_native_1.View>
 
-        
-        <react_native_1.View style={{ height: chartHeight, position: 'relative', overflow: 'hidden', borderRadius: 8 }}>
-          <react_native_svg_1.default width="100%" height={chartHeight} viewBox={`0 0 ${svgWidth} ${chartHeight}`} preserveAspectRatio="none">
-            <react_native_svg_1.Defs>
-              <react_native_svg_1.LinearGradient id="crashlyticsBarGrad" x1="0" y1="0" x2="0" y2="1">
-                <react_native_svg_1.Stop offset="0%" stopColor="#8B5CF6" stopOpacity="0.9"/>
-                <react_native_svg_1.Stop offset="100%" stopColor="#6366F1" stopOpacity="0.6"/>
-              </react_native_svg_1.LinearGradient>
-              <react_native_svg_1.LinearGradient id="crashlyticsAreaGrad" x1="0" y1="0" x2="0" y2="1">
-                <react_native_svg_1.Stop offset="0%" stopColor="#8B5CF6" stopOpacity="0.25"/>
-                <react_native_svg_1.Stop offset="80%" stopColor="#8B5CF6" stopOpacity="0.04"/>
-                <react_native_svg_1.Stop offset="100%" stopColor="#8B5CF6" stopOpacity="0.0"/>
-              </react_native_svg_1.LinearGradient>
-            </react_native_svg_1.Defs>
+                {k.totalRevenue>0&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${AppColors_1.AppColors.emerald600}15`,paddingHorizontal:6,paddingVertical:2.5,borderRadius:4,borderWidth:1,borderColor:`${AppColors_1.AppColors.emerald600}30`}}>
+                    <NetworkIcons_1.MoneyIcon color={AppColors_1.AppColors.emerald600}size={10}/>
+                    <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.emerald600}}>
+                      ${k.totalRevenue.toFixed(2)}
+                    </react_native_1.Text>
+                  </react_native_1.View>}
+              </react_native_1.View>
+            </react_native_1.View>
 
             
-            <react_native_svg_1.Line x1="6" y1={chartHeight - 6} x2={svgWidth - 6} y2={chartHeight - 6} stroke="#E2E8F0" strokeWidth="1"/>
-            <react_native_svg_1.Line x1="6" y1={chartHeight / 2} x2={svgWidth - 6} y2={chartHeight / 2} stroke="#F1F5F9" strokeWidth="1" strokeDasharray="4,4"/>
+            <react_native_1.View style={{height:u,position:"relative",overflow:"hidden",borderRadius:8}}>
+              <react_native_svg_1.default width="100%"height={u}viewBox={`0 0 ${A} ${u}`}preserveAspectRatio="none">
+                <react_native_svg_1.Defs>
+                  <react_native_svg_1.LinearGradient id="crashlyticsBarGrad"x1="0"y1="0"x2="0"y2="1">
+                    <react_native_svg_1.Stop offset="0%"stopColor="#8B5CF6"stopOpacity="0.9"/>
+                    <react_native_svg_1.Stop offset="100%"stopColor="#6366F1"stopOpacity="0.6"/>
+                  </react_native_svg_1.LinearGradient>
+                  <react_native_svg_1.LinearGradient id="crashlyticsAreaGrad"x1="0"y1="0"x2="0"y2="1">
+                    <react_native_svg_1.Stop offset="0%"stopColor="#8B5CF6"stopOpacity="0.25"/>
+                    <react_native_svg_1.Stop offset="80%"stopColor="#8B5CF6"stopOpacity="0.04"/>
+                    <react_native_svg_1.Stop offset="100%"stopColor="#8B5CF6"stopOpacity="0.0"/>
+                  </react_native_svg_1.LinearGradient>
+                </react_native_svg_1.Defs>
 
-            
-            <react_native_svg_1.Path d={histogramData.areaPath} fill="url(#crashlyticsAreaGrad)"/>
+                
+                <react_native_svg_1.Line x1="6"y1={u-6}x2={A-6}y2={u-6}stroke="#E2E8F0"strokeWidth="1"/>
+                <react_native_svg_1.Line x1="6"y1={u/2}x2={A-6}y2={u/2}stroke="#F1F5F9"strokeWidth="1"strokeDasharray="4,4"/>
 
-            
-            {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 (<react_native_svg_1.G key={`bar-${b.index}`}>
-                  
-                  <react_native_svg_1.Rect x={barX} y={6} width={barWidth} height={chartHeight - 14} rx={3} fill={isSelected ? '#EDE9FE' : '#F8FAFC'}/>
+                
+                <react_native_svg_1.Path d={y.areaPath}fill="url(#crashlyticsAreaGrad)"/>
 
-                  
-                  {b.total > 0 && (<react_native_svg_1.Rect x={barX} y={barY} width={barWidth} height={barHeight} rx={3} fill="url(#crashlyticsBarGrad)"/>)}
+                
+                {y.buckets.map((e,o)=>{const d=T===o,n=10,c=e.x-n/2,_=Math.max(3,u-8-e.y),w=u-8-_;return<react_native_svg_1.G key={`bar-${e.index}`}>
+                      
+                      <react_native_svg_1.Rect x={c}y={6}width={n}height={u-14}rx={3}fill={d?"#EDE9FE":"#F8FAFC"}/>
 
-                  
-                  {isSelected && (<react_native_svg_1.Line x1={b.x} y1={4} x2={b.x} y2={chartHeight - 6} stroke="#8B5CF6" strokeWidth="1.5" strokeDasharray="2,2"/>)}
-                </react_native_svg_1.G>);
-        })}
+                      
+                      {e.total>0&&<react_native_svg_1.Rect x={c}y={w}width={n}height={_}rx={3}fill="url(#crashlyticsBarGrad)"/>}
 
-            
-            <react_native_svg_1.Path d={histogramData.linePath} fill="none" stroke="#8B5CF6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                      
+                      {d&&<react_native_svg_1.Line x1={e.x}y1={4}x2={e.x}y2={u-6}stroke="#8B5CF6"strokeWidth="1.5"strokeDasharray="2,2"/>}
+                    </react_native_svg_1.G>})}
 
-            
-            {histogramData.buckets.length > 0 && (<react_native_svg_1.G>
-                <react_native_svg_1.Circle cx={histogramData.buckets[histogramData.buckets.length - 1].x} cy={histogramData.buckets[histogramData.buckets.length - 1].y} r="5.5" fill="#8B5CF6" opacity="0.25"/>
-                <react_native_svg_1.Circle cx={histogramData.buckets[histogramData.buckets.length - 1].x} cy={histogramData.buckets[histogramData.buckets.length - 1].y} r="3" fill="#7C3AED"/>
-              </react_native_svg_1.G>)}
-          </react_native_svg_1.default>
+                
+                <react_native_svg_1.Path d={y.linePath}fill="none"stroke="#8B5CF6"strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
 
-          
-          <react_native_1.View style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            flexDirection: 'row',
-        }}>
-            {histogramData.buckets.map((b, idx) => (<react_native_1.TouchableOpacity key={b.index} style={{ flex: 1, height: '100%' }} activeOpacity={0.8} onPress={() => setSelectedBucketIdx(selectedBucketIdx === idx ? null : idx)}/>))}
-          </react_native_1.View>
-        </react_native_1.View>
+                
+                {y.buckets.length>0&&<react_native_svg_1.G>
+                    <react_native_svg_1.Circle cx={y.buckets[y.buckets.length-1].x}cy={y.buckets[y.buckets.length-1].y}r="5.5"fill="#8B5CF6"opacity="0.25"/>
+                    <react_native_svg_1.Circle cx={y.buckets[y.buckets.length-1].x}cy={y.buckets[y.buckets.length-1].y}r="3"fill="#7C3AED"/>
+                  </react_native_svg_1.G>}
+              </react_native_svg_1.default>
 
-        
-        {selectedBucket && (<react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                backgroundColor: AppColors_1.AppColors.white,
-                borderRadius: 6,
-                paddingHorizontal: 8,
-                paddingVertical: 4,
-                marginTop: 4,
-                borderWidth: 1,
-                borderColor: AppColors_1.AppColors.brandPurple,
-            }}>
-            <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 10,
-                color: AppColors_1.AppColors.primaryBlack,
-            }}>
-              {t('analytics.selectedBucket', {
-                time: selectedBucket.ageLabel,
-                count: selectedBucket.total,
-            })}
-            </react_native_1.Text>
-            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-              {selectedBucket.ecommerce > 0 && (<react_native_1.Text style={{ fontSize: 9, fontFamily: AppFonts_1.AppFonts.interBold, color: AppColors_1.AppColors.amber700 }}>
-                  Ecom: {selectedBucket.ecommerce}
-                </react_native_1.Text>)}
-              {selectedBucket.page_view > 0 && (<react_native_1.Text style={{ fontSize: 9, fontFamily: AppFonts_1.AppFonts.interBold, color: AppColors_1.AppColors.sky500 }}>
-                  Screen: {selectedBucket.page_view}
-                </react_native_1.Text>)}
-              {selectedBucket.custom > 0 && (<react_native_1.Text style={{ fontSize: 9, fontFamily: AppFonts_1.AppFonts.interBold, color: AppColors_1.AppColors.brandPurple }}>
-                  Custom: {selectedBucket.custom}
-                </react_native_1.Text>)}
+              
+              <react_native_1.View style={{position:"absolute",top:0,left:0,right:0,bottom:0,flexDirection:"row"}}>
+                {y.buckets.map((e,o)=><react_native_1.TouchableOpacity key={e.index}style={{flex:1,height:"100%"}}activeOpacity={.8}onPress={()=>V(T===o?null:o)}/>)}
+              </react_native_1.View>
             </react_native_1.View>
-          </react_native_1.View>)}
 
-        
-        <react_native_1.View style={{
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            marginTop: 4,
-            paddingHorizontal: 4,
-        }}>
-          <react_native_1.Text style={{
-            fontFamily: AppFonts_1.AppFonts.interMedium,
-            fontSize: 8.5,
-            color: AppColors_1.AppColors.grayTextWeak,
-        }}>
-            -60s
-          </react_native_1.Text>
-          <react_native_1.Text style={{
-            fontFamily: AppFonts_1.AppFonts.interMedium,
-            fontSize: 8.5,
-            color: AppColors_1.AppColors.grayTextWeak,
-        }}>
-            -40s
-          </react_native_1.Text>
-          <react_native_1.Text style={{
-            fontFamily: AppFonts_1.AppFonts.interMedium,
-            fontSize: 8.5,
-            color: AppColors_1.AppColors.grayTextWeak,
-        }}>
-            -20s
-          </react_native_1.Text>
-          <react_native_1.Text style={{
-            fontFamily: AppFonts_1.AppFonts.interBold,
-            fontSize: 8.5,
-            color: AppColors_1.AppColors.brandPurple,
-        }}>
-            {t('analytics.timeNow')}
-          </react_native_1.Text>
-        </react_native_1.View>
-      </react_native_1.View>
+            
+            {t&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:AppColors_1.AppColors.white,borderRadius:6,paddingHorizontal:8,paddingVertical:4,marginTop:4,borderWidth:1,borderColor:AppColors_1.AppColors.brandPurple}}>
+                <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10,color:AppColors_1.AppColors.primaryBlack}}>
+                  {a("analytics.selectedBucket",{time:t.ageLabel,count:t.total})}
+                </react_native_1.Text>
+                <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                  {t.ecommerce>0&&<react_native_1.Text style={{fontSize:9,fontFamily:AppFonts_1.AppFonts.interBold,color:AppColors_1.AppColors.amber700}}>
+                      Ecom: {t.ecommerce}
+                    </react_native_1.Text>}
+                  {t.page_view>0&&<react_native_1.Text style={{fontSize:9,fontFamily:AppFonts_1.AppFonts.interBold,color:AppColors_1.AppColors.sky500}}>
+                      Screen: {t.page_view}
+                    </react_native_1.Text>}
+                  {t.custom>0&&<react_native_1.Text style={{fontSize:9,fontFamily:AppFonts_1.AppFonts.interBold,color:AppColors_1.AppColors.brandPurple}}>
+                      Custom: {t.custom}
+                    </react_native_1.Text>}
+                </react_native_1.View>
+              </react_native_1.View>}
 
-      
-      {topScreens.length > 0 && (<react_native_1.View style={{
-                marginTop: 8,
-                backgroundColor: `${AppColors_1.AppColors.sky500}0A`,
-                borderRadius: 8,
-                borderWidth: 1,
-                borderColor: `${AppColors_1.AppColors.sky500}22`,
-                padding: 8,
-            }}>
-          <react_native_1.View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                marginBottom: 6,
-            }}>
-            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
-              <NetworkIcons_1.PinIcon color={AppColors_1.AppColors.sky600} size={11}/>
-              <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 9.5,
-                color: AppColors_1.AppColors.sky600,
-                letterSpacing: 0.3,
-            }}>
-                TOP SCREENS (REALTIME)
+            
+            <react_native_1.View style={{flexDirection:"row",justifyContent:"space-between",marginTop:4,paddingHorizontal:4}}>
+              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:8.5,color:AppColors_1.AppColors.grayTextWeak}}>
+                -60s
+              </react_native_1.Text>
+              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:8.5,color:AppColors_1.AppColors.grayTextWeak}}>
+                -40s
+              </react_native_1.Text>
+              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:8.5,color:AppColors_1.AppColors.grayTextWeak}}>
+                -20s
+              </react_native_1.Text>
+              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:8.5,color:AppColors_1.AppColors.brandPurple}}>
+                {a("analytics.timeNow")}
               </react_native_1.Text>
             </react_native_1.View>
-            <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interMedium,
-                fontSize: 9,
-                color: AppColors_1.AppColors.grayTextWeak,
-            }}>
-              Views
-            </react_native_1.Text>
           </react_native_1.View>
 
-          <react_native_1.View style={{ gap: 4 }}>
-            {topScreens.map(scr => (<react_native_1.View key={scr.name}>
-                <react_native_1.View style={{
-                    flexDirection: 'row',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    marginBottom: 2,
-                }}>
-                  <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interMedium,
-                    fontSize: 10,
-                    color: AppColors_1.AppColors.primaryBlack,
-                }} numberOfLines={1}>
-                    {scr.name}
+          
+          {E.length>0&&<react_native_1.View style={{marginTop:4,backgroundColor:`${AppColors_1.AppColors.sky500}0A`,borderRadius:8,borderWidth:1,borderColor:`${AppColors_1.AppColors.sky500}22`,padding:8}}>
+              <react_native_1.View style={{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:6}}>
+                <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                  <NetworkIcons_1.PinIcon color={AppColors_1.AppColors.sky600}size={11}/>
+                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.sky600,letterSpacing:.3}}>
+                    TOP SCREENS (REALTIME)
                   </react_native_1.Text>
-                  <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 9.5,
-                    color: AppColors_1.AppColors.sky600,
-                }}>
-                    {scr.count} ({scr.pct}%)
+                </react_native_1.View>
+                <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:9,color:AppColors_1.AppColors.grayTextWeak}}>
+                  Views
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              <react_native_1.View style={{gap:4}}>
+                {E.map(e=><react_native_1.View key={e.name}>
+                    <react_native_1.View style={{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:2}}>
+                      <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10,color:AppColors_1.AppColors.primaryBlack}}numberOfLines={1}>
+                        {e.name}
+                      </react_native_1.Text>
+                      <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.sky600}}>
+                        {e.count} ({e.pct}%)
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                    
+                    <react_native_1.View style={{height:3,borderRadius:1.5,backgroundColor:`${AppColors_1.AppColors.sky500}22`,overflow:"hidden"}}>
+                      <react_native_1.View style={{height:"100%",width:`${e.barWidthPct}%`,backgroundColor:AppColors_1.AppColors.sky500}}/>
+                    </react_native_1.View>
+                  </react_native_1.View>)}
+              </react_native_1.View>
+            </react_native_1.View>}
+
+          
+          {s&&<>
+              
+              <react_native_1.View style={styles_1.default.analyticsStatsRow}>
+                <react_native_1.View style={styles_1.default.analyticsStatBox}>
+                  <react_native_1.Text style={styles_1.default.analyticsStatValue}>{b}</react_native_1.Text>
+                  <react_native_1.Text style={styles_1.default.analyticsStatLabel}>{a("analytics.eventCount",{count:b})}</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={styles_1.default.analyticsStatBox}>
+                  <react_native_1.Text style={styles_1.default.analyticsStatValue}>
+                    {Object.keys(B).length}
                   </react_native_1.Text>
+                  <react_native_1.Text style={styles_1.default.analyticsStatLabel}>{a("analytics.props")}</react_native_1.Text>
                 </react_native_1.View>
-                
-                <react_native_1.View style={{
-                    height: 3,
-                    borderRadius: 1.5,
-                    backgroundColor: `${AppColors_1.AppColors.sky500}22`,
-                    overflow: 'hidden',
-                }}>
-                  <react_native_1.View style={{
-                    height: '100%',
-                    width: `${scr.barWidthPct}%`,
-                    backgroundColor: AppColors_1.AppColors.sky500,
-                }}/>
+                <react_native_1.View style={styles_1.default.analyticsStatBox}>
+                  <react_native_1.Text style={styles_1.default.analyticsStatValue}>
+                    {Object.keys(S).length}
+                  </react_native_1.Text>
+                  <react_native_1.Text style={styles_1.default.analyticsStatLabel}>{a("analytics.defaultParameters")}</react_native_1.Text>
                 </react_native_1.View>
-              </react_native_1.View>))}
-          </react_native_1.View>
-        </react_native_1.View>)}
+              </react_native_1.View>
+
+              
+              {(I||D)&&<react_native_1.View style={styles_1.default.analyticsHeaderDetails}>
+                  {I&&<react_native_1.View style={{marginBottom:10}}>
+                      <react_native_1.Text style={styles_1.default.detailsGroupTitle}>{a("analytics.userProperties")}</react_native_1.Text>
+                      {Object.entries(B).map(([e,o])=><react_native_1.View key={e}style={styles_1.default.detailsRow}>
+                          <react_native_1.Text style={styles_1.default.detailsKey}selectable={!0}>{e}</react_native_1.Text>
+                          <react_native_1.Text style={styles_1.default.detailsValue}selectable={!0}>{String(o)}</react_native_1.Text>
+                        </react_native_1.View>)}
+                    </react_native_1.View>}
 
+                  {D&&<react_native_1.View>
+                      <react_native_1.Text style={styles_1.default.detailsGroupTitle}>{a("analytics.defaultParameters")}</react_native_1.Text>
+                      {Object.entries(S).map(([e,o])=><react_native_1.View key={e}style={styles_1.default.detailsRow}>
+                          <react_native_1.Text style={styles_1.default.detailsKey}selectable={!0}>{e}</react_native_1.Text>
+                          <react_native_1.Text style={styles_1.default.detailsValue}selectable={!0}>{String(o)}</react_native_1.Text>
+                        </react_native_1.View>)}
+                    </react_native_1.View>}
+                </react_native_1.View>}
+            </>}
+        </react_native_1.View>}
+    </react_native_1.View>}),AnalyticsTab=react_1.default.memo(()=>{const{t:a}=(0,i18n_1.useTranslation)(),{analyticsEvents:l,filteredAnalyticsEvents:r,analyticsSearch:s,setAnalyticsSearch:p,analyticsFilters:f,setAnalyticsFilters:R,handleDelete:L,selectedEvent:B,setSelectedEvent:S,newEventIds:v,logRouteMapRef:I,isAnalyticsLayoutReady:D,setIsAnalyticsLayoutReady:b,isAnalyticsPaused:k,setIsAnalyticsPaused:E,isAnalyticsFilterApplied:h}=(0,InspectorContext_1.useInspector)(),u=(0,react_1.useRef)(null),[A,T]=(0,react_1.useState)(!1),V=(0,react_1.useMemo)(()=>{let t=0,e=0,o=0,d=0;for(const c of l){const _=(0,helpers_1.getEventCategory)(c.name),w=c.count||1;_==="ecommerce"?t+=w:_==="page_view"?e+=w:_==="system"?o+=w:d+=w}const n=t+e+o+d;return{ecommerce:t,page_view:e,system:o,custom:d,totalCount:n}},[l]),F=(0,react_1.useCallback)(t=>{(0,InspectorContext_1.animateNextLayout)(),R(e=>{if(t==="all")return{...e,categories:new Set(["all"])};const o=new Set(e.categories);if(o.has("all"))o.delete("all"),o.add(t);else if(o.has(t))o.delete(t),o.size===0&&o.add("all");else if(o.add(t),o.has("ecommerce")&&o.has("page_view")&&o.has("system")&&o.has("custom"))return{...e,categories:new Set(["all"])};return{...e,categories:o}})},[R]),$=(0,react_1.useCallback)((t,e)=>t?.id?.toString()??e.toString(),[]),y=(0,react_1.useCallback)(({item:t,index:e})=>{const o=r[e+1],d=r[e-1],n=o?t.timestamp-o.timestamp:void 0,c=Math.floor(t.timestamp/6e4),_=d?Math.floor(d.timestamp/6e4):-1,w=e===0||c!==_;return<AnalyticsEventCard_1.default event={t}onPress={()=>{S(t)}}isNew={v.has(t.id)}searchStr={s}isFirst={e===0}isLast={e===r.length-1}msSincePrev={n}showTimestamp={w}computedScreenName={(()=>{if(!t)return"";const O=t.screenName||t.screenClass||t.pageTitle||t.pageLocation||t.params?.firebase_screen||t.params?.screen_name||t.params?.firebase_screen_class||t.params?.screen_class;let P=typeof O=="string"?O:O?JSON.stringify(O):"";const z=I.current.get(t.id+1e6);if(!P&&z&&z.path!=="Navigators"){const M=z.path.split(" \u2794 ");P=M[M.length-1]}return P})()}/>},[r,s,v,S,I]);return<>
       
-      {analyticsHeaderExpanded && (<>
-          
-          <react_native_1.View style={styles_1.default.analyticsStatsRow}>
-            <react_native_1.View style={styles_1.default.analyticsStatBox}>
-              <react_native_1.Text style={styles_1.default.analyticsStatValue}>{totalEvents}</react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.analyticsStatLabel}>{t('analytics.eventCount', { count: totalEvents })}</react_native_1.Text>
-            </react_native_1.View>
-            <react_native_1.View style={styles_1.default.analyticsStatBox}>
-              <react_native_1.Text style={styles_1.default.analyticsStatValue}>
-                {Object.keys(userProperties).length}
-              </react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.analyticsStatLabel}>{t('analytics.props')}</react_native_1.Text>
+      {B==null&&<react_native_1.View style={{backgroundColor:AppColors_1.AppColors.white,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.dividerColor,paddingBottom:6}}>
+          <react_native_1.View style={[styles_1.default.toolbarRow,{marginTop:12,marginBottom:8}]}>
+            <react_native_1.View style={styles_1.default.searchContainer}>
+              <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak}size={16}/>
+              <react_native_1.TextInput placeholder="Search events..."placeholderTextColor={AppColors_1.AppColors.grayTextWeak}value={s}onChangeText={p}style={styles_1.default.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+              {s.length>0&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                  <react_native_1.View style={{backgroundColor:`${AppColors_1.AppColors.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
+                    <react_native_1.Text style={{color:AppColors_1.AppColors.purple,fontSize:9.5,fontFamily:AppFonts_1.AppFonts.interBold}}>
+                      {r.length}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                  <react_native_1.Pressable onPress={()=>p("")}hitSlop={10}style={styles_1.default.clearBtn}>
+                    <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak}size={13}/>
+                  </react_native_1.Pressable>
+                </react_native_1.View>}
             </react_native_1.View>
-            <react_native_1.View style={styles_1.default.analyticsStatBox}>
-              <react_native_1.Text style={styles_1.default.analyticsStatValue}>
-                {Object.keys(defaultParams).length}
-              </react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.analyticsStatLabel}>{t('analytics.defaultParameters')}</react_native_1.Text>
+            <react_native_1.View style={styles_1.default.toolbarRight}>
+              <react_native_1.TouchableOpacity style={[styles_1.default.toolbarBtn,k&&{borderColor:`${AppColors_1.AppColors.darkOrange}50`,backgroundColor:`${AppColors_1.AppColors.darkOrange}18`}]}onPress={()=>E(t=>!t)}hitSlop={6}>
+                <NetworkIcons_1.HeaderPauseIcon isPaused={k}color={k?AppColors_1.AppColors.darkOrange:AppColors_1.AppColors.grayTextStrong}size={16}/>
+              </react_native_1.TouchableOpacity>
+
+              
+              <react_native_1.TouchableOpacity style={[styles_1.default.toolbarBtn,h&&{borderColor:`${AppColors_1.AppColors.brandPurple}60`,backgroundColor:`${AppColors_1.AppColors.brandPurple}15`}]}onPress={()=>T(!0)}hitSlop={6}>
+                <NetworkIcons_1.FilterIcon color={h?AppColors_1.AppColors.brandPurple:AppColors_1.AppColors.grayTextStrong}size={15}/>
+                {h&&<react_native_1.View style={{position:"absolute",top:2,right:2,width:7,height:7,borderRadius:3.5,backgroundColor:AppColors_1.AppColors.darkOrange,borderWidth:1,borderColor:AppColors_1.AppColors.white}}/>}
+              </react_native_1.TouchableOpacity>
+
+              <react_native_1.TouchableOpacity style={[styles_1.default.toolbarBtn,{borderColor:`${AppColors_1.AppColors.errorColor}38`,backgroundColor:`${AppColors_1.AppColors.errorColor}0F`}]}onPress={L}hitSlop={6}>
+                <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor}size={15}/>
+              </react_native_1.TouchableOpacity>
             </react_native_1.View>
           </react_native_1.View>
 
           
-          {(hasUserProps || hasDefaultParams) && (<react_native_1.View style={styles_1.default.analyticsHeaderDetails}>
-              {hasUserProps && (<react_native_1.View style={{ marginBottom: 10 }}>
-                  <react_native_1.Text style={styles_1.default.detailsGroupTitle}>{t('analytics.userProperties')}</react_native_1.Text>
-                  {Object.entries(userProperties).map(([k, v]) => (<react_native_1.View key={k} style={styles_1.default.detailsRow}>
-                      <react_native_1.Text style={styles_1.default.detailsKey} selectable={true}>{k}</react_native_1.Text>
-                      <react_native_1.Text style={styles_1.default.detailsValue} selectable={true}>{String(v)}</react_native_1.Text>
-                    </react_native_1.View>))}
-                </react_native_1.View>)}
+          <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}style={{marginVertical:4,maxHeight:46}}contentContainerStyle={{paddingHorizontal:16,paddingBottom:4,flexDirection:"row",alignItems:"center",gap:8}}>
+            
+            {(()=>{const t=f.categories.has("all");return<TouchableScale_1.default onPress={()=>F("all")}>
+                  <react_native_1.View style={[styles_1.default.statusFilterChip,{backgroundColor:t?AppColors_1.AppColors.indigo600Alt:AppColors_1.AppColors.indigo50,borderColor:t?AppColors_1.AppColors.indigo600:AppColors_1.AppColors.indigo400,borderRadius:8,paddingHorizontal:10,paddingVertical:6},t&&{shadowColor:AppColors_1.AppColors.indigo600Alt,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2.5,elevation:2}]}>
+                    <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                      <NetworkIcons_1.LayersIcon size={13}color={t?AppColors_1.AppColors.white:AppColors_1.AppColors.indigo600Alt}/>
+                      <react_native_1.Text numberOfLines={1}style={[styles_1.default.statusFilterText,{color:t?AppColors_1.AppColors.white:AppColors_1.AppColors.indigo600Alt,fontFamily:AppFonts_1.AppFonts.interBold}]}>
+                        {a("common.all","All")} ({V.totalCount})
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>
+                </TouchableScale_1.default>})()}
 
-              {hasDefaultParams && (<react_native_1.View>
-                  <react_native_1.Text style={styles_1.default.detailsGroupTitle}>{t('analytics.defaultParameters')}</react_native_1.Text>
-                  {Object.entries(defaultParams).map(([k, v]) => (<react_native_1.View key={k} style={styles_1.default.detailsRow}>
-                      <react_native_1.Text style={styles_1.default.detailsKey} selectable={true}>{k}</react_native_1.Text>
-                      <react_native_1.Text style={styles_1.default.detailsValue} selectable={true}>{String(v)}</react_native_1.Text>
-                    </react_native_1.View>))}
-                </react_native_1.View>)}
-            </react_native_1.View>)}
-        </>)}
-    </react_native_1.View>);
-});
-const AnalyticsTab = react_1.default.memo(() => {
-    const { t } = (0, i18n_1.useTranslation)();
-    const { filteredAnalyticsEvents, analyticsSearch, setAnalyticsSearch, handleDelete, selectedEvent, setSelectedEvent, newEventIds, logRouteMapRef, isAnalyticsLayoutReady, setIsAnalyticsLayoutReady, isAnalyticsPaused, setIsAnalyticsPaused, isAnalyticsFilterApplied, } = (0, InspectorContext_1.useInspector)();
-    const listRef = (0, react_1.useRef)(null);
-    const [isFilterModalOpen, setIsFilterModalOpen] = (0, react_1.useState)(false);
-    const keyExtractor = (0, react_1.useCallback)((item, index) => item?.id?.toString() ?? index.toString(), []);
-    const renderItem = (0, react_1.useCallback)(({ item, index }) => {
-        const prev = filteredAnalyticsEvents[index + 1];
-        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_1.default 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 && (<react_native_1.View style={[
-                styles_1.default.toolbarRow,
-                { marginTop: 12, marginBottom: 8 },
-            ]}>
-        <react_native_1.View style={styles_1.default.searchContainer}>
-          <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
-          <react_native_1.TextInput placeholder="Search events..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={analyticsSearch} onChangeText={setAnalyticsSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
-          {analyticsSearch.length > 0 && (<react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 4,
-                }}>
-              <react_native_1.View style={{
-                    backgroundColor: `${AppColors_1.AppColors.purple}20`,
-                    borderRadius: 10,
-                    paddingHorizontal: 6,
-                    paddingVertical: 1.5,
-                }}>
-                <react_native_1.Text style={{
-                    color: AppColors_1.AppColors.purple,
-                    fontSize: 9.5,
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                }}>
-                  {filteredAnalyticsEvents.length}
-                </react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.Pressable onPress={() => setAnalyticsSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
-                <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={13}/>
-              </react_native_1.Pressable>
-            </react_native_1.View>)}
-        </react_native_1.View>
-        <react_native_1.View style={styles_1.default.toolbarRight}>
-          <react_native_1.TouchableOpacity style={[
-                styles_1.default.toolbarBtn,
-                isAnalyticsPaused && {
-                    borderColor: `${AppColors_1.AppColors.darkOrange}50`,
-                    backgroundColor: `${AppColors_1.AppColors.darkOrange}18`,
-                },
-            ]} onPress={() => setIsAnalyticsPaused(p => !p)} hitSlop={6}>
-            <NetworkIcons_1.HeaderPauseIcon isPaused={isAnalyticsPaused} color={isAnalyticsPaused
-                ? AppColors_1.AppColors.darkOrange
-                : AppColors_1.AppColors.grayTextStrong} size={16}/>
-          </react_native_1.TouchableOpacity>
+            
+            {(()=>{const t=!f.categories.has("all")&&f.categories.has("ecommerce");return<TouchableScale_1.default onPress={()=>F("ecommerce")}>
+                  <react_native_1.View style={[styles_1.default.statusFilterChip,{backgroundColor:t?AppColors_1.AppColors.amber600:AppColors_1.AppColors.amber100,borderColor:t?AppColors_1.AppColors.amber700:AppColors_1.AppColors.amber200,borderRadius:8,paddingHorizontal:10,paddingVertical:6},t&&{shadowColor:AppColors_1.AppColors.amber600,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2.5,elevation:2}]}>
+                    <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                      <NetworkIcons_1.CartIcon size={13}color={t?AppColors_1.AppColors.white:AppColors_1.AppColors.amber700}/>
+                      <react_native_1.Text numberOfLines={1}style={[styles_1.default.statusFilterText,{color:t?AppColors_1.AppColors.white:AppColors_1.AppColors.amber800Warm,fontFamily:AppFonts_1.AppFonts.interBold}]}>
+                        Ecommerce ({V.ecommerce})
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>
+                </TouchableScale_1.default>})()}
 
-          
-          <react_native_1.TouchableOpacity style={[
-                styles_1.default.toolbarBtn,
-                isAnalyticsFilterApplied && {
-                    borderColor: `${AppColors_1.AppColors.brandPurple}60`,
-                    backgroundColor: `${AppColors_1.AppColors.brandPurple}15`,
-                },
-            ]} onPress={() => setIsFilterModalOpen(true)} hitSlop={6}>
-            <NetworkIcons_1.FilterIcon color={isAnalyticsFilterApplied
-                ? AppColors_1.AppColors.brandPurple
-                : AppColors_1.AppColors.grayTextStrong} size={15}/>
-            {isAnalyticsFilterApplied && (<react_native_1.View style={{
-                    position: 'absolute',
-                    top: 2,
-                    right: 2,
-                    width: 7,
-                    height: 7,
-                    borderRadius: 3.5,
-                    backgroundColor: AppColors_1.AppColors.darkOrange,
-                    borderWidth: 1,
-                    borderColor: AppColors_1.AppColors.white,
-                }}/>)}
-          </react_native_1.TouchableOpacity>
+            
+            {(()=>{const t=!f.categories.has("all")&&f.categories.has("page_view");return<TouchableScale_1.default onPress={()=>F("page_view")}>
+                  <react_native_1.View style={[styles_1.default.statusFilterChip,{backgroundColor:t?AppColors_1.AppColors.sky600:AppColors_1.AppColors.sky100,borderColor:t?AppColors_1.AppColors.blue700:AppColors_1.AppColors.sky400,borderRadius:8,paddingHorizontal:10,paddingVertical:6},t&&{shadowColor:AppColors_1.AppColors.sky600,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2.5,elevation:2}]}>
+                    <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                      <NetworkIcons_1.GlobeIcon size={13}color={t?AppColors_1.AppColors.white:AppColors_1.AppColors.sky600}/>
+                      <react_native_1.Text numberOfLines={1}style={[styles_1.default.statusFilterText,{color:t?AppColors_1.AppColors.white:AppColors_1.AppColors.sky600,fontFamily:AppFonts_1.AppFonts.interBold}]}>
+                        Screens ({V.page_view})
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>
+                </TouchableScale_1.default>})()}
 
-          <react_native_1.TouchableOpacity style={[
-                styles_1.default.toolbarBtn,
-                {
-                    borderColor: `${AppColors_1.AppColors.errorColor}38`,
-                    backgroundColor: `${AppColors_1.AppColors.errorColor}0F`,
-                },
-            ]} onPress={handleDelete} hitSlop={6}>
-            <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={15}/>
-          </react_native_1.TouchableOpacity>
-        </react_native_1.View>
-      </react_native_1.View>)}
+            
+            {(()=>{const t=!f.categories.has("all")&&f.categories.has("system");return<TouchableScale_1.default onPress={()=>F("system")}>
+                  <react_native_1.View style={[styles_1.default.statusFilterChip,{backgroundColor:t?AppColors_1.AppColors.violet600:AppColors_1.AppColors.purple100,borderColor:t?AppColors_1.AppColors.purpleShade700:AppColors_1.AppColors.purple200,borderRadius:8,paddingHorizontal:10,paddingVertical:6},t&&{shadowColor:AppColors_1.AppColors.violet600,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2.5,elevation:2}]}>
+                    <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                      <NetworkIcons_1.BoltIcon size={13}color={t?AppColors_1.AppColors.white:AppColors_1.AppColors.purple}/>
+                      <react_native_1.Text numberOfLines={1}style={[styles_1.default.statusFilterText,{color:t?AppColors_1.AppColors.white:AppColors_1.AppColors.brandPurple,fontFamily:AppFonts_1.AppFonts.interBold}]}>
+                        System ({V.system})
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>
+                </TouchableScale_1.default>})()}
+
+            
+            {(()=>{const t=!f.categories.has("all")&&f.categories.has("custom");return<TouchableScale_1.default onPress={()=>F("custom")}>
+                  <react_native_1.View style={[styles_1.default.statusFilterChip,{backgroundColor:t?AppColors_1.AppColors.pink600:AppColors_1.AppColors.pink100,borderColor:t?AppColors_1.AppColors.rose700:AppColors_1.AppColors.roseBorder,borderRadius:8,paddingHorizontal:10,paddingVertical:6},t&&{shadowColor:AppColors_1.AppColors.pink600,shadowOffset:{width:0,height:1},shadowOpacity:.28,shadowRadius:2.5,elevation:2}]}>
+                    <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                      <NetworkIcons_1.SparkleIcon size={13}color={t?AppColors_1.AppColors.white:AppColors_1.AppColors.brandPurple}/>
+                      <react_native_1.Text numberOfLines={1}style={[styles_1.default.statusFilterText,{color:t?AppColors_1.AppColors.white:AppColors_1.AppColors.pink600,fontFamily:AppFonts_1.AppFonts.interBold}]}>
+                        Custom ({V.custom})
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>
+                </TouchableScale_1.default>})()}
+          </react_native_1.ScrollView>
+        </react_native_1.View>}
 
       
-      <AnalyticsFilterModal_1.default visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)}/>
+      <AnalyticsFilterModal_1.default visible={A}onClose={()=>T(!1)}/>
 
-      <react_native_1.View style={{ flex: 1 }} onLayout={() => setIsAnalyticsLayoutReady(true)}>
-        {isAnalyticsLayoutReady ? (<>
-            <react_native_1.FlatList ref={listRef} data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={react_native_1.Platform.OS === 'android'} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState_1.default 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_1.default count={filteredAnalyticsEvents.length} label="events"/>) : null} contentContainerStyle={[
-                styles_1.default.listContent,
-                filteredAnalyticsEvents.length === 0 && {
-                    flexGrow: 1,
-                },
-            ]} keyboardShouldPersistTaps="handled"/>
-          </>) : null}
+      <react_native_1.View style={{flex:1}}onLayout={()=>b(!0)}>
+        {D?<>
+            <react_native_1.FlatList ref={u}data={r}keyExtractor={$}ListHeaderComponent={AnalyticsHeader}renderItem={y}initialNumToRender={12}maxToRenderPerBatch={8}windowSize={5}removeClippedSubviews={react_native_1.Platform.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<EmptyState_1.default 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={()=>p("")}/>}ListFooterComponent={r.length>0?<EndOfListFooter_1.default count={r.length}label="events"/>:null}contentContainerStyle={[styles_1.default.listContent,r.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+          </>:null}
       </react_native_1.View>
-    </>);
-});
-exports.default = AnalyticsTab;
+    </>});exports.default=AnalyticsTab;