react-native-inapp-inspector 1.1.24 → 1.1.25

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

@@ -0,0 +1,1002 @@
+"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 AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const helpers_1 = require("../../helpers");
+const NetworkIcons_1 = require("../NetworkIcons");
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const DEFAULT_FILTERS = {
+    categories: new Set(['all']),
+    screens: new Set(),
+    sources: new Set(['all']),
+    userTypes: new Set(['all']),
+    timeWindow: 'all',
+    payloadComplexity: 'all',
+    hasRevenue: false,
+    hasItems: false,
+    hasUserProps: false,
+    hasParams: false,
+    onlyDuplicates: false,
+    onlyConversions: false,
+    sortBy: 'time_desc',
+};
+const AnalyticsFilterModal = ({ visible, onClose, }) => {
+    const { analyticsEvents, analyticsSearch, analyticsFilters, setAnalyticsFilters, } = (0, InspectorContext_1.useInspector)();
+    // Staged Draft State: applied ONLY on tapping "Apply Filters"
+    const [draft, setDraft] = (0, react_1.useState)(() => ({
+        ...analyticsFilters,
+        categories: new Set(analyticsFilters.categories),
+        screens: new Set(analyticsFilters.screens),
+        sources: new Set(analyticsFilters.sources || ['all']),
+        userTypes: new Set(analyticsFilters.userTypes || ['all']),
+    }));
+    // Re-sync draft whenever modal opens
+    (0, react_1.useEffect)(() => {
+        if (visible) {
+            setDraft({
+                ...analyticsFilters,
+                categories: new Set(analyticsFilters.categories),
+                screens: new Set(analyticsFilters.screens),
+                sources: new Set(analyticsFilters.sources || ['all']),
+                userTypes: new Set(analyticsFilters.userTypes || ['all']),
+            });
+        }
+    }, [visible, analyticsFilters]);
+    // Extract unique screen names from logged events
+    const uniqueScreens = (0, react_1.useMemo)(() => {
+        const screens = new Set();
+        for (const e of analyticsEvents) {
+            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() !== '') {
+                screens.add(scr.trim());
+            }
+        }
+        return Array.from(screens);
+    }, [analyticsEvents]);
+    // Toggle Category in Draft
+    const toggleCategory = (cat) => {
+        setDraft(prev => {
+            const next = new Set(prev.categories);
+            if (cat === 'all') {
+                return { ...prev, categories: new Set(['all']) };
+            }
+            next.delete('all');
+            if (next.has(cat)) {
+                next.delete(cat);
+                if (next.size === 0)
+                    next.add('all');
+            }
+            else {
+                next.add(cat);
+            }
+            return { ...prev, categories: next };
+        });
+    };
+    // Toggle Screen in Draft
+    const toggleScreen = (scr) => {
+        setDraft(prev => {
+            const next = new Set(prev.screens);
+            if (next.has(scr)) {
+                next.delete(scr);
+            }
+            else {
+                next.add(scr);
+            }
+            return { ...prev, screens: next };
+        });
+    };
+    // Toggle Source in Draft
+    const toggleSource = (src) => {
+        setDraft(prev => {
+            const next = new Set(prev.sources);
+            if (src === 'all') {
+                return { ...prev, sources: new Set(['all']) };
+            }
+            next.delete('all');
+            if (next.has(src)) {
+                next.delete(src);
+                if (next.size === 0)
+                    next.add('all');
+            }
+            else {
+                next.add(src);
+            }
+            return { ...prev, sources: next };
+        });
+    };
+    // Toggle User Type in Draft
+    const toggleUserType = (ut) => {
+        setDraft(prev => {
+            const next = new Set(prev.userTypes);
+            if (ut === 'all') {
+                return { ...prev, userTypes: new Set(['all']) };
+            }
+            next.delete('all');
+            if (next.has(ut)) {
+                next.delete(ut);
+                if (next.size === 0)
+                    next.add('all');
+            }
+            else {
+                next.add(ut);
+            }
+            return { ...prev, userTypes: next };
+        });
+    };
+    // Toggle Boolean Flag in Draft
+    const toggleFlag = (key) => {
+        setDraft(prev => ({
+            ...prev,
+            [key]: !prev[key],
+        }));
+    };
+    // Set Time Window in Draft
+    const setTimeWindow = (tw) => {
+        setDraft(prev => ({ ...prev, timeWindow: tw }));
+    };
+    // Set Payload Complexity in Draft
+    const setPayloadComplexity = (pc) => {
+        setDraft(prev => ({ ...prev, payloadComplexity: pc }));
+    };
+    // Set Sort in Draft
+    const setSort = (sortBy) => {
+        setDraft(prev => ({ ...prev, sortBy }));
+    };
+    // Reset Draft to default
+    const handleResetDraft = () => {
+        setDraft({
+            categories: new Set(['all']),
+            screens: new Set(),
+            sources: new Set(['all']),
+            userTypes: new Set(['all']),
+            timeWindow: 'all',
+            payloadComplexity: 'all',
+            hasRevenue: false,
+            hasItems: false,
+            hasUserProps: false,
+            hasParams: false,
+            onlyDuplicates: false,
+            onlyConversions: false,
+            sortBy: 'time_desc',
+        });
+    };
+    // Commit Draft to actual filters
+    const handleApply = () => {
+        setAnalyticsFilters({
+            ...draft,
+            categories: new Set(draft.categories),
+            screens: new Set(draft.screens),
+            sources: new Set(draft.sources),
+            userTypes: new Set(draft.userTypes),
+        });
+        onClose();
+    };
+    // Discard changes & close
+    const handleDiscard = () => {
+        setDraft({
+            ...analyticsFilters,
+            categories: new Set(analyticsFilters.categories),
+            screens: new Set(analyticsFilters.screens),
+            sources: new Set(analyticsFilters.sources || ['all']),
+            userTypes: new Set(analyticsFilters.userTypes || ['all']),
+        });
+        onClose();
+    };
+    // Calculate matching count for Draft in real-time
+    const draftMatchCount = (0, react_1.useMemo)(() => {
+        let events = analyticsEvents;
+        if (analyticsSearch) {
+            const s = analyticsSearch.toLowerCase();
+            events = events.filter(e => e.name.toLowerCase().includes(s) ||
+                JSON.stringify(e.params || {}).toLowerCase().includes(s) ||
+                (e.screenName ?? '').toLowerCase().includes(s) ||
+                (e.pageTitle ?? '').toLowerCase().includes(s));
+        }
+        if (draft.categories.size > 0 && !draft.categories.has('all')) {
+            events = events.filter(e => {
+                const cat = (0, helpers_1.getEventCategory)(e.name);
+                return draft.categories.has(cat);
+            });
+        }
+        if (draft.timeWindow !== 'all') {
+            const now = Date.now();
+            const cutoff = draft.timeWindow === '1m'
+                ? now - 60 * 1000
+                : draft.timeWindow === '5m'
+                    ? now - 5 * 60 * 1000
+                    : draft.timeWindow === '15m'
+                        ? now - 15 * 60 * 1000
+                        : now - 60 * 60 * 1000;
+            events = events.filter(e => e.timestamp >= cutoff);
+        }
+        if (draft.sources.size > 0 && !draft.sources.has('all')) {
+            events = events.filter(e => draft.sources.has(e.source || 'manual'));
+        }
+        if (draft.userTypes.size > 0 && !draft.userTypes.has('all')) {
+            events = events.filter(e => {
+                const isIdentified = Boolean(e.userId && e.userId.trim() !== '');
+                if (draft.userTypes.has('identified') && isIdentified)
+                    return true;
+                if (draft.userTypes.has('anonymous') && !isIdentified)
+                    return true;
+                return false;
+            });
+        }
+        if (draft.payloadComplexity !== 'all') {
+            events = events.filter(e => {
+                const count = e.params ? Object.keys(e.params).length : 0;
+                if (draft.payloadComplexity === 'none')
+                    return count === 0;
+                if (draft.payloadComplexity === 'simple')
+                    return count >= 1 && count <= 5;
+                if (draft.payloadComplexity === 'heavy')
+                    return count > 5;
+                return true;
+            });
+        }
+        if (draft.onlyConversions) {
+            const CONVERSION_PATTERNS = [
+                'purchase',
+                'item_purchase',
+                'ecommerce_purchase',
+                'sign_up',
+                'login',
+                'lead',
+                'generate_lead',
+                'tutorial_complete',
+                'add_payment_info',
+                'begin_checkout',
+            ];
+            events = events.filter(e => CONVERSION_PATTERNS.some(pat => e.name.toLowerCase().includes(pat)));
+        }
+        if (draft.screens.size > 0) {
+            events = events.filter(e => {
+                const scr = e.screenName ||
+                    e.params?.firebase_screen ||
+                    e.params?.screen_name ||
+                    e.params?.firebase_screen_class ||
+                    e.screenClass ||
+                    '';
+                return draft.screens.has(scr);
+            });
+        }
+        if (draft.hasRevenue) {
+            events = events.filter(e => {
+                const val = e.params?.value ?? e.params?.price;
+                return val !== undefined && val !== null && Number(val) > 0;
+            });
+        }
+        if (draft.hasItems) {
+            events = events.filter(e => Array.isArray(e.params?.items) && e.params.items.length > 0);
+        }
+        if (draft.hasUserProps) {
+            events = events.filter(e => e.userProperties && Object.keys(e.userProperties).length > 0);
+        }
+        if (draft.hasParams) {
+            events = events.filter(e => e.params && Object.keys(e.params).length > 0);
+        }
+        return events.length;
+    }, [analyticsEvents, analyticsSearch, draft]);
+    const isAllCategories = draft.categories.has('all') || draft.categories.size === 0;
+    const isAllSources = draft.sources.has('all') || draft.sources.size === 0;
+    const isAllUserTypes = draft.userTypes.has('all') || draft.userTypes.size === 0;
+    return (<react_native_1.Modal visible={visible} transparent animationType="fade" onRequestClose={handleDiscard}>
+      <react_native_1.View style={styles.backdrop}>
+        <react_native_1.Pressable style={react_native_1.StyleSheet.absoluteFill} onPress={handleDiscard}/>
+
+        <react_native_1.View style={styles.modalCard}>
+          {/* ─── Header ──────────────────────────────────────────────────────── */}
+          <react_native_1.View style={styles.header}>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+              <react_native_1.View style={styles.headerIconBox}>
+                <NetworkIcons_1.FilterIcon color={AppColors_1.AppColors.brandPurple} size={15}/>
+              </react_native_1.View>
+              <react_native_1.View>
+                <react_native_1.Text style={styles.headerTitle}>Analytics Filters</react_native_1.Text>
+                <react_native_1.Text style={styles.headerSubtitle}>
+                  GA4 Telemetry Dimensions & Metrics
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+              <react_native_1.TouchableOpacity onPress={handleResetDraft} hitSlop={8} style={styles.resetBtn}>
+                <react_native_1.Text style={styles.resetBtnText}>Reset All</react_native_1.Text>
+              </react_native_1.TouchableOpacity>
+
+              <react_native_1.TouchableOpacity onPress={handleDiscard} hitSlop={10} style={styles.closeBtn}>
+                <NetworkIcons_1.CloseWhite />
+              </react_native_1.TouchableOpacity>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          {/* ─── Scrollable Filter Options ──────────────────────────────────── */}
+          <react_native_1.ScrollView style={{ maxHeight: 460 }} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={true}>
+            {/* 1. Time Horizon Window */}
+            <react_native_1.View style={styles.section}>
+              <react_native_1.View style={styles.sectionHeaderRow}>
+                <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.grayTextWeak} size={12}/>
+                <react_native_1.Text style={styles.sectionTitle}>TIME HORIZON</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.chipsWrap}>
+                {[
+            { key: 'all', label: 'All Time' },
+            { key: '1m', label: 'Last 1 min' },
+            { key: '5m', label: 'Last 5 mins' },
+            { key: '15m', label: 'Last 15 mins' },
+            { key: '1h', label: 'Last 1 hour' },
+        ].map(item => (<TouchableScale_1.default key={item.key} onPress={() => setTimeWindow(item.key)} style={[
+                styles.filterPill,
+                draft.timeWindow === item.key &&
+                    styles.filterPillActive,
+            ]}>
+                    <react_native_1.Text style={[
+                styles.filterPillText,
+                draft.timeWindow === item.key &&
+                    styles.filterPillTextActive,
+            ]}>
+                      {item.label}
+                    </react_native_1.Text>
+                  </TouchableScale_1.default>))}
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* 2. Category Dimensions */}
+            <react_native_1.View style={styles.section}>
+              <react_native_1.View style={styles.sectionHeaderRow}>
+                <NetworkIcons_1.TargetGoalIcon color={AppColors_1.AppColors.grayTextWeak} size={12}/>
+                <react_native_1.Text style={styles.sectionTitle}>EVENT CATEGORIES</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.chipsWrap}>
+                <TouchableScale_1.default onPress={() => toggleCategory('all')} style={[
+            styles.filterPill,
+            isAllCategories && styles.filterPillActive,
+        ]}>
+                  {isAllCategories && (<NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.white} size={12}/>)}
+                  <react_native_1.Text style={[
+            styles.filterPillText,
+            isAllCategories && styles.filterPillTextActive,
+        ]}>
+                    All Categories
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+
+                <TouchableScale_1.default onPress={() => toggleCategory('ecommerce')} style={[
+            styles.filterPill,
+            draft.categories.has('ecommerce') &&
+                styles.filterPillActive,
+        ]}>
+                  <NetworkIcons_1.CartIcon color={draft.categories.has('ecommerce')
+            ? AppColors_1.AppColors.white
+            : AppColors_1.AppColors.amber700} size={13}/>
+                  <react_native_1.Text style={[
+            styles.filterPillText,
+            draft.categories.has('ecommerce') &&
+                styles.filterPillTextActive,
+        ]}>
+                    Ecommerce
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+
+                <TouchableScale_1.default onPress={() => toggleCategory('page_view')} style={[
+            styles.filterPill,
+            draft.categories.has('page_view') &&
+                styles.filterPillActive,
+        ]}>
+                  <NetworkIcons_1.GlobeIcon color={draft.categories.has('page_view')
+            ? AppColors_1.AppColors.white
+            : AppColors_1.AppColors.sky600} size={13}/>
+                  <react_native_1.Text style={[
+            styles.filterPillText,
+            draft.categories.has('page_view') &&
+                styles.filterPillTextActive,
+        ]}>
+                    Screens & Pages
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+
+                <TouchableScale_1.default onPress={() => toggleCategory('system')} style={[
+            styles.filterPill,
+            draft.categories.has('system') &&
+                styles.filterPillActive,
+        ]}>
+                  <NetworkIcons_1.BoltIcon color={draft.categories.has('system')
+            ? AppColors_1.AppColors.white
+            : AppColors_1.AppColors.purple} size={13}/>
+                  <react_native_1.Text style={[
+            styles.filterPillText,
+            draft.categories.has('system') &&
+                styles.filterPillTextActive,
+        ]}>
+                    System & Lifecycle
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+
+                <TouchableScale_1.default onPress={() => toggleCategory('custom')} style={[
+            styles.filterPill,
+            draft.categories.has('custom') &&
+                styles.filterPillActive,
+        ]}>
+                  <NetworkIcons_1.SparkleIcon color={draft.categories.has('custom')
+            ? AppColors_1.AppColors.white
+            : AppColors_1.AppColors.brandPurple} size={13}/>
+                  <react_native_1.Text style={[
+            styles.filterPillText,
+            draft.categories.has('custom') &&
+                styles.filterPillTextActive,
+        ]}>
+                    Custom Events
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* 3. Goals, Monetization & Attributes */}
+            <react_native_1.View style={styles.section}>
+              <react_native_1.View style={styles.sectionHeaderRow}>
+                <NetworkIcons_1.MoneyIcon color={AppColors_1.AppColors.grayTextWeak} size={12}/>
+                <react_native_1.Text style={styles.sectionTitle}>
+                  MONETIZATION & ATTRIBUTES
+                </react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.chipsWrap}>
+                <TouchableScale_1.default onPress={() => toggleFlag('onlyConversions')} style={[
+            styles.filterPill,
+            draft.onlyConversions && styles.filterPillActive,
+        ]}>
+                  <NetworkIcons_1.TargetGoalIcon color={draft.onlyConversions
+            ? AppColors_1.AppColors.white
+            : AppColors_1.AppColors.brandPurple} size={13}/>
+                  <react_native_1.Text style={[
+            styles.filterPillText,
+            draft.onlyConversions && styles.filterPillTextActive,
+        ]}>
+                    Conversion Events Only
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+
+                <TouchableScale_1.default onPress={() => toggleFlag('hasRevenue')} style={[
+            styles.filterPill,
+            draft.hasRevenue && styles.filterPillActive,
+        ]}>
+                  <NetworkIcons_1.MoneyIcon color={draft.hasRevenue
+            ? AppColors_1.AppColors.white
+            : AppColors_1.AppColors.emerald600} size={13}/>
+                  <react_native_1.Text style={[
+            styles.filterPillText,
+            draft.hasRevenue && styles.filterPillTextActive,
+        ]}>
+                    With Revenue (Value &gt; 0)
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+
+                <TouchableScale_1.default onPress={() => toggleFlag('hasItems')} style={[
+            styles.filterPill,
+            draft.hasItems && styles.filterPillActive,
+        ]}>
+                  <NetworkIcons_1.PackageBoxIcon color={draft.hasItems
+            ? AppColors_1.AppColors.white
+            : AppColors_1.AppColors.amber700} size={13}/>
+                  <react_native_1.Text style={[
+            styles.filterPillText,
+            draft.hasItems && styles.filterPillTextActive,
+        ]}>
+                    With Items Payload
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+
+                <TouchableScale_1.default onPress={() => toggleFlag('hasUserProps')} style={[
+            styles.filterPill,
+            draft.hasUserProps && styles.filterPillActive,
+        ]}>
+                  <NetworkIcons_1.SparkleIcon color={draft.hasUserProps
+            ? AppColors_1.AppColors.white
+            : AppColors_1.AppColors.brandPurple} size={13}/>
+                  <react_native_1.Text style={[
+            styles.filterPillText,
+            draft.hasUserProps && styles.filterPillTextActive,
+        ]}>
+                    With User Properties
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+
+                <TouchableScale_1.default onPress={() => toggleFlag('hasParams')} style={[
+            styles.filterPill,
+            draft.hasParams && styles.filterPillActive,
+        ]}>
+                  <NetworkIcons_1.CodeBracketsIcon color={draft.hasParams
+            ? AppColors_1.AppColors.white
+            : AppColors_1.AppColors.grayText} size={13}/>
+                  <react_native_1.Text style={[
+            styles.filterPillText,
+            draft.hasParams && styles.filterPillTextActive,
+        ]}>
+                    With Custom Params
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+
+                <TouchableScale_1.default onPress={() => toggleFlag('onlyDuplicates')} style={[
+            styles.filterPill,
+            draft.onlyDuplicates && styles.filterPillActive,
+        ]}>
+                  <NetworkIcons_1.RepeatIcon color={draft.onlyDuplicates
+            ? AppColors_1.AppColors.white
+            : AppColors_1.AppColors.rose600} size={13}/>
+                  <react_native_1.Text style={[
+            styles.filterPillText,
+            draft.onlyDuplicates && styles.filterPillTextActive,
+        ]}>
+                    Frequent Only (&gt; 1×)
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* 4. User Identification */}
+            <react_native_1.View style={styles.section}>
+              <react_native_1.View style={styles.sectionHeaderRow}>
+                <NetworkIcons_1.UserIcon color={AppColors_1.AppColors.grayTextWeak} size={12}/>
+                <react_native_1.Text style={styles.sectionTitle}>USER IDENTIFICATION</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.chipsWrap}>
+                <TouchableScale_1.default onPress={() => toggleUserType('all')} style={[
+            styles.filterPill,
+            isAllUserTypes && styles.filterPillActive,
+        ]}>
+                  {isAllUserTypes && (<NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.white} size={12}/>)}
+                  <react_native_1.Text style={[
+            styles.filterPillText,
+            isAllUserTypes && styles.filterPillTextActive,
+        ]}>
+                    All Users
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+
+                <TouchableScale_1.default onPress={() => toggleUserType('identified')} style={[
+            styles.filterPill,
+            draft.userTypes.has('identified') &&
+                styles.filterPillActive,
+        ]}>
+                  <NetworkIcons_1.UserCheckIcon color={draft.userTypes.has('identified')
+            ? AppColors_1.AppColors.white
+            : AppColors_1.AppColors.greenColor} size={13}/>
+                  <react_native_1.Text style={[
+            styles.filterPillText,
+            draft.userTypes.has('identified') &&
+                styles.filterPillTextActive,
+        ]}>
+                    Identified (User ID)
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+
+                <TouchableScale_1.default onPress={() => toggleUserType('anonymous')} style={[
+            styles.filterPill,
+            draft.userTypes.has('anonymous') &&
+                styles.filterPillActive,
+        ]}>
+                  <NetworkIcons_1.UserIcon color={draft.userTypes.has('anonymous')
+            ? AppColors_1.AppColors.white
+            : AppColors_1.AppColors.grayTextWeak} size={13}/>
+                  <react_native_1.Text style={[
+            styles.filterPillText,
+            draft.userTypes.has('anonymous') &&
+                styles.filterPillTextActive,
+        ]}>
+                    Anonymous
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* 5. Source Logger SDK */}
+            <react_native_1.View style={styles.section}>
+              <react_native_1.View style={styles.sectionHeaderRow}>
+                <NetworkIcons_1.BoltIcon color={AppColors_1.AppColors.grayTextWeak} size={12}/>
+                <react_native_1.Text style={styles.sectionTitle}>EVENT SOURCE</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.chipsWrap}>
+                <TouchableScale_1.default onPress={() => toggleSource('all')} style={[
+            styles.filterPill,
+            isAllSources && styles.filterPillActive,
+        ]}>
+                  {isAllSources && (<NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.white} size={12}/>)}
+                  <react_native_1.Text style={[
+            styles.filterPillText,
+            isAllSources && styles.filterPillTextActive,
+        ]}>
+                    All Sources
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+
+                <TouchableScale_1.default onPress={() => toggleSource('firebase')} style={[
+            styles.filterPill,
+            draft.sources.has('firebase') &&
+                styles.filterPillActive,
+        ]}>
+                  <react_native_1.Text style={[
+            styles.filterPillText,
+            draft.sources.has('firebase') &&
+                styles.filterPillTextActive,
+        ]}>
+                    Firebase / GA SDK
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+
+                <TouchableScale_1.default onPress={() => toggleSource('manual')} style={[
+            styles.filterPill,
+            draft.sources.has('manual') &&
+                styles.filterPillActive,
+        ]}>
+                  <react_native_1.Text style={[
+            styles.filterPillText,
+            draft.sources.has('manual') &&
+                styles.filterPillTextActive,
+        ]}>
+                    In-App Logger
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* 6. Payload Complexity */}
+            <react_native_1.View style={styles.section}>
+              <react_native_1.View style={styles.sectionHeaderRow}>
+                <NetworkIcons_1.CodeBracketsIcon color={AppColors_1.AppColors.grayTextWeak} size={12}/>
+                <react_native_1.Text style={styles.sectionTitle}>PAYLOAD COMPLEXITY</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.chipsWrap}>
+                {[
+            { key: 'all', label: 'All Payloads' },
+            { key: 'none', label: '0 Params' },
+            { key: 'simple', label: '1 - 5 Params' },
+            { key: 'heavy', label: '> 5 Params' },
+        ].map(item => (<TouchableScale_1.default key={item.key} onPress={() => setPayloadComplexity(item.key)} style={[
+                styles.filterPill,
+                draft.payloadComplexity === item.key &&
+                    styles.filterPillActive,
+            ]}>
+                    <react_native_1.Text style={[
+                styles.filterPillText,
+                draft.payloadComplexity === item.key &&
+                    styles.filterPillTextActive,
+            ]}>
+                      {item.label}
+                    </react_native_1.Text>
+                  </TouchableScale_1.default>))}
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* 7. Discovered Screens (Dimensions) */}
+            {uniqueScreens.length > 0 && (<react_native_1.View style={styles.section}>
+                <react_native_1.View style={styles.sectionHeaderRow}>
+                  <NetworkIcons_1.PinIcon color={AppColors_1.AppColors.grayTextWeak} size={12}/>
+                  <react_native_1.Text style={styles.sectionTitle}>
+                    DISCOVERED SCREENS ({uniqueScreens.length})
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={styles.chipsWrap}>
+                  {uniqueScreens.map(scr => {
+                const isSelected = draft.screens.has(scr);
+                return (<TouchableScale_1.default key={scr} onPress={() => toggleScreen(scr)} style={[
+                        styles.filterPill,
+                        isSelected && styles.filterPillActive,
+                    ]}>
+                        <NetworkIcons_1.PinIcon color={isSelected
+                        ? AppColors_1.AppColors.white
+                        : AppColors_1.AppColors.amber700} size={12}/>
+                        <react_native_1.Text style={[
+                        styles.filterPillText,
+                        isSelected && styles.filterPillTextActive,
+                    ]}>
+                          {scr}
+                        </react_native_1.Text>
+                      </TouchableScale_1.default>);
+            })}
+                </react_native_1.View>
+              </react_native_1.View>)}
+
+            {/* 8. Sort Order */}
+            <react_native_1.View style={styles.section}>
+              <react_native_1.View style={styles.sectionHeaderRow}>
+                <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.grayTextWeak} size={12}/>
+                <react_native_1.Text style={styles.sectionTitle}>SORT ORDER</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.chipsWrap}>
+                <TouchableScale_1.default onPress={() => setSort('time_desc')} style={[
+            styles.filterPill,
+            draft.sortBy === 'time_desc' &&
+                styles.filterPillActive,
+        ]}>
+                  <NetworkIcons_1.ClockIcon color={draft.sortBy === 'time_desc'
+            ? AppColors_1.AppColors.white
+            : AppColors_1.AppColors.grayText} size={12}/>
+                  <react_native_1.Text style={[
+            styles.filterPillText,
+            draft.sortBy === 'time_desc' &&
+                styles.filterPillTextActive,
+        ]}>
+                    Newest First (Default)
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+
+                <TouchableScale_1.default onPress={() => setSort('time_asc')} style={[
+            styles.filterPill,
+            draft.sortBy === 'time_asc' &&
+                styles.filterPillActive,
+        ]}>
+                  <NetworkIcons_1.HourglassIcon color={draft.sortBy === 'time_asc'
+            ? AppColors_1.AppColors.white
+            : AppColors_1.AppColors.grayText} size={12}/>
+                  <react_native_1.Text style={[
+            styles.filterPillText,
+            draft.sortBy === 'time_asc' &&
+                styles.filterPillTextActive,
+        ]}>
+                    Oldest First
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+
+                <TouchableScale_1.default onPress={() => setSort('revenue_desc')} style={[
+            styles.filterPill,
+            draft.sortBy === 'revenue_desc' &&
+                styles.filterPillActive,
+        ]}>
+                  <NetworkIcons_1.MoneyIcon color={draft.sortBy === 'revenue_desc'
+            ? AppColors_1.AppColors.white
+            : AppColors_1.AppColors.emerald600} size={12}/>
+                  <react_native_1.Text style={[
+            styles.filterPillText,
+            draft.sortBy === 'revenue_desc' &&
+                styles.filterPillTextActive,
+        ]}>
+                    Highest Revenue
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+
+                <TouchableScale_1.default onPress={() => setSort('count_desc')} style={[
+            styles.filterPill,
+            draft.sortBy === 'count_desc' &&
+                styles.filterPillActive,
+        ]}>
+                  <NetworkIcons_1.FlameIcon color={draft.sortBy === 'count_desc'
+            ? AppColors_1.AppColors.white
+            : AppColors_1.AppColors.darkOrange} size={12}/>
+                  <react_native_1.Text style={[
+            styles.filterPillText,
+            draft.sortBy === 'count_desc' &&
+                styles.filterPillTextActive,
+        ]}>
+                    Most Frequent
+                  </react_native_1.Text>
+                </TouchableScale_1.default>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.ScrollView>
+
+          {/* ─── Footer Action Bar (Discard + Apply) ────────────────────────── */}
+          <react_native_1.View style={styles.footer}>
+            <react_native_1.TouchableOpacity onPress={handleDiscard} style={styles.discardBtn} activeOpacity={0.8}>
+              <react_native_1.Text style={styles.discardBtnText}>Discard</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+
+            <react_native_1.TouchableOpacity onPress={handleApply} style={styles.applyBtn} activeOpacity={0.85}>
+              <react_native_1.Text style={styles.applyBtnText}>
+                Apply ({draftMatchCount} Events)
+              </react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_1.Modal>);
+};
+const styles = react_native_1.StyleSheet.create({
+    backdrop: {
+        flex: 1,
+        backgroundColor: `${AppColors_1.AppColors.primaryBlack}85`,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 16,
+    },
+    modalCard: {
+        width: '100%',
+        maxWidth: 440,
+        backgroundColor: AppColors_1.AppColors.white,
+        borderRadius: 14,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+        shadowColor: AppColors_1.AppColors.black,
+        shadowOpacity: 0.18,
+        shadowRadius: 12,
+        shadowOffset: { width: 0, height: 4 },
+        elevation: 8,
+        overflow: 'hidden',
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 14,
+        paddingVertical: 12,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.dividerColor,
+        backgroundColor: `${AppColors_1.AppColors.brandPurple}08`,
+    },
+    headerIconBox: {
+        width: 28,
+        height: 28,
+        borderRadius: 7,
+        backgroundColor: `${AppColors_1.AppColors.brandPurple}18`,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    headerTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 13.5,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    headerSubtitle: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    resetBtn: {
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 5,
+        backgroundColor: `${AppColors_1.AppColors.darkOrange}14`,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.darkOrange}30`,
+    },
+    resetBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10,
+        color: AppColors_1.AppColors.darkOrange,
+    },
+    closeBtn: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        backgroundColor: `${AppColors_1.AppColors.primaryBlack}18`,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    scrollContent: {
+        padding: 14,
+        gap: 14,
+    },
+    section: {
+        gap: 7,
+    },
+    sectionHeaderRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+    },
+    sectionTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.grayTextWeak,
+        letterSpacing: 0.5,
+    },
+    chipsWrap: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 6.5,
+    },
+    filterPill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+        paddingHorizontal: 9,
+        paddingVertical: 5.5,
+        borderRadius: 7,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    filterPillActive: {
+        backgroundColor: AppColors_1.AppColors.brandPurple,
+        borderColor: AppColors_1.AppColors.brandPurple,
+        shadowColor: AppColors_1.AppColors.brandPurple,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.25,
+        shadowRadius: 3,
+        elevation: 2,
+    },
+    filterPillText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    filterPillTextActive: {
+        color: AppColors_1.AppColors.white,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+    },
+    footer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        paddingHorizontal: 14,
+        paddingVertical: 12,
+        borderTopWidth: 1,
+        borderTopColor: AppColors_1.AppColors.dividerColor,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+    },
+    discardBtn: {
+        flex: 1,
+        paddingVertical: 9.5,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+        backgroundColor: AppColors_1.AppColors.white,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    discardBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.grayTextStrong,
+    },
+    applyBtn: {
+        flex: 2,
+        backgroundColor: AppColors_1.AppColors.brandPurple,
+        paddingVertical: 9.5,
+        borderRadius: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: AppColors_1.AppColors.brandPurple,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.25,
+        shadowRadius: 3,
+        elevation: 2,
+    },
+    applyBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.white,
+    },
+});
+exports.default = AnalyticsFilterModal;