react-native-inapp-inspector 1.1.29 → 1.1.31

package/dist/commonjs/components/AnalyticsDetail.js

@@ -41,139 +41,699 @@ const react_native_1 = require("react-native");
 // Components
 const CopyButton_1 = __importDefault(require("./CopyButton"));
 const JsonViewer_1 = __importDefault(require("./JsonViewer"));
-const TouchableScale_1 = __importDefault(require("./TouchableScale"));
-// Utils
+const SegmentedTabs_1 = __importDefault(require("./SegmentedTabs"));
+const HighlightText_1 = __importDefault(require("./HighlightText"));
+const AnimatedEntrance_1 = __importDefault(require("./AnimatedEntrance"));
+// Helpers & Icons
 const AppFonts_1 = require("../styles/AppFonts");
-const helpers_1 = require("../helpers");
-// Stylesheet
 const AppColors_1 = require("../styles/AppColors");
+const helpers_1 = require("../helpers");
+const gaAnalyticsRegistry_1 = require("../helpers/gaAnalyticsRegistry");
 const i18n_1 = require("../i18n");
+const NetworkIcons_1 = require("./NetworkIcons");
 const AnalyticsDetail = ({ event, }) => {
     const { t } = (0, i18n_1.useTranslation)();
-    const [expandDepth, setExpandDepth] = (0, react_1.useState)(1);
-    const [treeKey, setTreeKey] = (0, react_1.useState)(0);
-    const params = event.params ?? {};
-    const userProperties = event.userProperties ?? {};
-    const upCount = Object.keys(userProperties).length;
-    const jsonData = {
+    const [activeViewTab, setActiveViewTab] = (0, react_1.useState)('overview');
+    const [paramSearch, setParamSearch] = (0, react_1.useState)('');
+    const params = (0, react_1.useMemo)(() => event.params ?? {}, [event.params]);
+    const userProperties = (0, react_1.useMemo)(() => event.userProperties ?? {}, [event.userProperties]);
+    const paramKeys = (0, react_1.useMemo)(() => Object.keys(params), [params]);
+    const userPropKeys = (0, react_1.useMemo)(() => Object.keys(userProperties), [userProperties]);
+    const category = (0, react_1.useMemo)(() => (0, gaAnalyticsRegistry_1.getEventCategory)(event.name, params), [event.name, params]);
+    // Combined full JSON payload
+    const fullJsonData = (0, react_1.useMemo)(() => ({
         name: event.name,
-        params: params,
-        ...(upCount > 0 ? { userProperties } : {}),
-    };
-    const isObject = typeof jsonData === 'object' && jsonData !== null;
-    const isArray = Array.isArray(jsonData);
-    let typeLabel = typeof jsonData;
-    let countLabel = '';
-    if (jsonData === null) {
-        typeLabel = 'null';
-    }
-    else if (isArray) {
-        typeLabel = 'array';
-        countLabel = `${jsonData.length} ${t('analytics.items')}`;
-    }
-    else if (isObject) {
-        typeLabel = 'object';
-        countLabel = `${Object.keys(jsonData).length} keys`;
-    }
-    return (<react_native_1.ScrollView style={[detailStyles.scroll, { backgroundColor: AppColors_1.AppColors.grayBackground }]} contentContainerStyle={detailStyles.content} showsVerticalScrollIndicator contentInsetAdjustmentBehavior="never" automaticallyAdjustContentInsets={false}>
+        timestamp: event.timestamp,
+        source: event.source,
+        ...(event.screenName ? { screenName: event.screenName } : {}),
+        ...(event.screenClass ? { screenClass: event.screenClass } : {}),
+        ...(event.userId ? { userId: event.userId } : {}),
+        ...(event.sessionId ? { sessionId: event.sessionId } : {}),
+        ...(event.trackingId ? { trackingId: event.trackingId } : {}),
+        params,
+        ...(userPropKeys.length > 0 ? { userProperties } : {}),
+    }), [event, params, userPropKeys.length, userProperties]);
+    // E-commerce revenue calculation
+    const revenueInfo = (0, react_1.useMemo)(() => {
+        const val = params.value ?? params.price;
+        const currency = params.currency ?? 'USD';
+        if (val !== undefined && val !== null && !isNaN(Number(val))) {
+            return {
+                amount: Number(val).toFixed(2),
+                currency: String(currency).toUpperCase(),
+            };
+        }
+        return null;
+    }, [params]);
+    // Items count if an items array exists
+    const itemsCount = (0, react_1.useMemo)(() => {
+        if (Array.isArray(params.items)) {
+            return params.items.length;
+        }
+        return null;
+    }, [params.items]);
+    // Screen Context
+    const screenContext = (0, react_1.useMemo)(() => {
+        return (event.screenName ||
+            params.firebase_screen ||
+            params.screen_name ||
+            params.page_title ||
+            event.screenClass ||
+            params.firebase_screen_class);
+    }, [event.screenName, event.screenClass, params]);
+    // Filtered parameter entries
+    const filteredParamEntries = (0, react_1.useMemo)(() => {
+        const entries = Object.entries(params);
+        if (!paramSearch.trim())
+            return entries;
+        const q = paramSearch.toLowerCase();
+        return entries.filter(([k, v]) => {
+            const valStr = typeof v === 'object' ? JSON.stringify(v) : String(v);
+            return k.toLowerCase().includes(q) || valStr.toLowerCase().includes(q);
+        });
+    }, [params, paramSearch]);
+    // Category Theme Meta
+    const catMeta = (0, react_1.useMemo)(() => {
+        switch (category) {
+            case 'ecommerce':
+                return {
+                    label: t('analytics.ecommerceCategory'),
+                    color: AppColors_1.AppColors.amber700,
+                    bg: AppColors_1.AppColors.amber100,
+                    border: AppColors_1.AppColors.amber200,
+                    icon: (color) => <NetworkIcons_1.CartIcon color={color} size={11}/>,
+                };
+            case 'page_view':
+                return {
+                    label: t('analytics.screensCategory'),
+                    color: AppColors_1.AppColors.sky600,
+                    bg: AppColors_1.AppColors.sky100,
+                    border: AppColors_1.AppColors.sky400,
+                    icon: (color) => <NetworkIcons_1.GlobeIcon color={color} size={11}/>,
+                };
+            case 'system':
+                return {
+                    label: t('analytics.systemCategory'),
+                    color: AppColors_1.AppColors.purple,
+                    bg: AppColors_1.AppColors.purple100,
+                    border: AppColors_1.AppColors.purple200,
+                    icon: (color) => <NetworkIcons_1.BoltIcon color={color} size={11}/>,
+                };
+            default:
+                return {
+                    label: t('analytics.customCategory'),
+                    color: AppColors_1.AppColors.brandPurple,
+                    bg: AppColors_1.AppColors.purple100,
+                    border: AppColors_1.AppColors.purple200,
+                    icon: (color) => <NetworkIcons_1.SparkleIcon color={color} size={11}/>,
+                };
+        }
+    }, [category, t]);
+    const viewTabs = [
+        {
+            key: 'overview',
+            label: `${t('analytics.overviewTab')} (${paramKeys.length})`,
+            icon: (isActive) => (<NetworkIcons_1.TableIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText} size={12}/>),
+        },
+        {
+            key: 'tree',
+            label: t('analytics.jsonTreeTab'),
+            icon: (isActive) => (<NetworkIcons_1.PrettyIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText} size={12}/>),
+        },
+        {
+            key: 'raw',
+            label: t('analytics.rawPayloadTab'),
+            icon: (isActive) => (<NetworkIcons_1.RawIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText} size={12}/>),
+        },
+    ];
+    return (<react_native_1.ScrollView style={detailStyles.scroll} contentContainerStyle={detailStyles.content} showsVerticalScrollIndicator contentInsetAdjustmentBehavior="never" automaticallyAdjustContentInsets={false}>
       
-      {/* Clean Toolbar */}
-      <react_native_1.View style={{
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            paddingHorizontal: 16,
-            paddingVertical: 12,
-            borderBottomWidth: 1,
-            borderBottomColor: AppColors_1.AppColors.grayBorderSecondary,
-            backgroundColor: AppColors_1.AppColors.primaryLight,
-        }}>
-        <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-          <TouchableScale_1.default style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 6,
-            backgroundColor: AppColors_1.AppColors.grayBackground,
-            paddingHorizontal: 12,
-            paddingVertical: 6,
-            borderRadius: 8,
-            borderWidth: 1,
-            borderColor: AppColors_1.AppColors.grayBorderSecondary,
-        }} onPress={() => {
-            const nextDepth = expandDepth === 99 ? 1 : 99;
-            setExpandDepth(nextDepth);
-            setTreeKey(prev => prev + 1);
-        }}>
-            <react_native_1.Text style={{
-            fontFamily: AppFonts_1.AppFonts.interBold,
-            fontSize: 12,
-            color: AppColors_1.AppColors.purple,
-        }}>
-              {expandDepth === 99 ? t('common.collapseAll') : t('common.expandAll')}
-            </react_native_1.Text>
-          </TouchableScale_1.default>
-          <react_native_1.View style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            backgroundColor: AppColors_1.AppColors.grayBackground,
-            borderRadius: 6,
-            overflow: 'hidden',
-            borderWidth: 1,
-            borderColor: AppColors_1.AppColors.grayBorderSecondary,
-        }}>
-            <react_native_1.View style={{ paddingHorizontal: 6, paddingVertical: 4, backgroundColor: AppColors_1.AppColors.purple + '18' }}>
-              <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 9, color: AppColors_1.AppColors.purple, letterSpacing: 0.3 }}>
-                {typeLabel.toUpperCase()}
+      {/* ── 1. Hero Event Header Card ────────────────────────────────────── */}
+      <react_native_1.View style={detailStyles.heroCard}>
+        {/* Top Badges Row */}
+        <react_native_1.View style={detailStyles.heroTopRow}>
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap', flex: 1 }}>
+            {/* Source Badge */}
+            <react_native_1.View style={[
+            detailStyles.sourceBadge,
+            event.source === 'firebase'
+                ? { backgroundColor: AppColors_1.AppColors.amberBg, borderColor: AppColors_1.AppColors.amberBorder }
+                : { backgroundColor: AppColors_1.AppColors.purpleBg, borderColor: AppColors_1.AppColors.purpleBorder },
+        ]}>
+              <react_native_1.View style={[
+            detailStyles.sourceDot,
+            {
+                backgroundColor: event.source === 'firebase'
+                    ? AppColors_1.AppColors.firebaseOrange
+                    : AppColors_1.AppColors.purple,
+            },
+        ]}/>
+              <react_native_1.Text style={[
+            detailStyles.sourceBadgeText,
+            {
+                color: event.source === 'firebase'
+                    ? AppColors_1.AppColors.amber800Warm
+                    : AppColors_1.AppColors.purple,
+            },
+        ]}>
+                {event.source === 'firebase' ? t('analytics.sourceFirebase') : t('analytics.sourceCustom')}
+              </react_native_1.Text>
+            </react_native_1.View>
+
+            {/* Category Badge */}
+            <react_native_1.View style={[
+            detailStyles.catBadge,
+            { backgroundColor: catMeta.bg, borderColor: catMeta.border },
+        ]}>
+              {catMeta.icon(catMeta.color)}
+              <react_native_1.Text style={[detailStyles.catBadgeText, { color: catMeta.color }]}>
+                {catMeta.label}
               </react_native_1.Text>
             </react_native_1.View>
-            {countLabel ? (<react_native_1.View style={{ paddingHorizontal: 6, paddingVertical: 4 }}>
-                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interMedium, fontSize: 9, color: AppColors_1.AppColors.grayText }}>
-                  {countLabel}
-                </react_native_1.Text>
-              </react_native_1.View>) : null}
           </react_native_1.View>
-          <react_native_1.View style={{
-            backgroundColor: AppColors_1.AppColors.grayBackground,
-            borderRadius: 6,
-            paddingHorizontal: 6,
-            paddingVertical: 4,
-            borderWidth: 1,
-            borderColor: AppColors_1.AppColors.grayBorderSecondary,
-        }}>
-            <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interMedium, fontSize: 9, color: AppColors_1.AppColors.grayText }}>
-              {(0, helpers_1.getSize)(jsonData)}
+
+          {/* Copy Full Event JSON Button */}
+          <CopyButton_1.default value={JSON.stringify(fullJsonData, null, 2)} label={t('analytics.eventDetails')}/>
+        </react_native_1.View>
+
+        {/* Event Name Heading */}
+        <react_native_1.View style={detailStyles.titleRow}>
+          <react_native_1.Text style={detailStyles.eventTitle} selectable numberOfLines={2}>
+            {event.name}
+          </react_native_1.Text>
+        </react_native_1.View>
+
+        {/* Sub Details Row: Timestamp & Screen Location */}
+        <react_native_1.View style={detailStyles.metaRow}>
+          <react_native_1.View style={detailStyles.timePill}>
+            <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.purple} size={11}/>
+            <react_native_1.Text style={detailStyles.timeText}>
+              {(0, helpers_1.formatDateTime)(event.timestamp)}
             </react_native_1.Text>
           </react_native_1.View>
+
+          {screenContext && (<react_native_1.View style={detailStyles.screenPill}>
+              <NetworkIcons_1.PinIcon color={AppColors_1.AppColors.sky600} size={11}/>
+              <react_native_1.Text style={detailStyles.screenText} numberOfLines={1}>
+                {String(screenContext)}
+              </react_native_1.Text>
+            </react_native_1.View>)}
         </react_native_1.View>
 
-        <CopyButton_1.default value={JSON.stringify(jsonData, null, 2)} label={t('common.copyJson')}/>
+        {/* ── 2. Metric Pills Summary ──────────────────────────────────────── */}
+        <react_native_1.View style={detailStyles.metricsBar}>
+          <react_native_1.View style={detailStyles.metricPill}>
+            <react_native_1.Text style={detailStyles.metricLabel}>Params:</react_native_1.Text>
+            <react_native_1.Text style={detailStyles.metricValue}>{paramKeys.length}</react_native_1.Text>
+          </react_native_1.View>
+
+          {userPropKeys.length > 0 && (<react_native_1.View style={detailStyles.metricPill}>
+              <react_native_1.Text style={detailStyles.metricLabel}>User Props:</react_native_1.Text>
+              <react_native_1.Text style={detailStyles.metricValue}>{userPropKeys.length}</react_native_1.Text>
+            </react_native_1.View>)}
+
+          <react_native_1.View style={detailStyles.metricPill}>
+            <react_native_1.Text style={detailStyles.metricLabel}>Size:</react_native_1.Text>
+            <react_native_1.Text style={detailStyles.metricValue}>{(0, helpers_1.getSize)(fullJsonData)}</react_native_1.Text>
+          </react_native_1.View>
+
+          {revenueInfo && (<react_native_1.View style={detailStyles.revenuePill}>
+              <NetworkIcons_1.MoneyIcon color={AppColors_1.AppColors.emerald600} size={11}/>
+              <react_native_1.Text style={detailStyles.revenueValue}>
+                ${revenueInfo.amount} {revenueInfo.currency}
+              </react_native_1.Text>
+            </react_native_1.View>)}
+
+          {itemsCount !== null && (<react_native_1.View style={detailStyles.itemsPill}>
+              <react_native_1.Text style={detailStyles.itemsValue}>
+                📦 {itemsCount} items
+              </react_native_1.Text>
+            </react_native_1.View>)}
+        </react_native_1.View>
       </react_native_1.View>
 
-      {/* Direct JSON Viewer View */}
-      <react_native_1.View style={[
-            detailStyles.jsonBlockContainer,
-            {
-                backgroundColor: AppColors_1.AppColors.primaryLight,
-                borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                marginTop: 16,
-            },
-        ]}>
-        <JsonViewer_1.default key={treeKey} data={jsonData} defaultExpandDepth={expandDepth} fullHeight/>
+      {/* ── 3. View Switcher Tabs (Overview, Tree, Raw) ───────────────────── */}
+      <react_native_1.View style={detailStyles.tabsWrap}>
+        <SegmentedTabs_1.default tabs={viewTabs} activeKey={activeViewTab} onChange={key => setActiveViewTab(key)}/>
       </react_native_1.View>
+
+      {/* ── 4. Main Tab Body Content ───────────────────────────────────────── */}
+      {activeViewTab === 'overview' && (<react_native_1.View style={detailStyles.tabContent}>
+          {/* Metadata Card (Session, User ID, Client ID) */}
+          {(event.userId || event.sessionId || event.trackingId) && (<react_native_1.View style={detailStyles.sectionCard}>
+              <react_native_1.View style={detailStyles.sectionHeader}>
+                <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.purple} size={12}/>
+                <react_native_1.Text style={detailStyles.sectionTitle}>SESSION & IDENTITY</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={detailStyles.sectionBody}>
+                {event.userId && (<react_native_1.View style={detailStyles.kvRow}>
+                    <react_native_1.Text style={detailStyles.kvKey}>User ID:</react_native_1.Text>
+                    <react_native_1.Text style={detailStyles.kvVal} selectable>{event.userId}</react_native_1.Text>
+                  </react_native_1.View>)}
+                {event.sessionId && (<react_native_1.View style={detailStyles.kvRow}>
+                    <react_native_1.Text style={detailStyles.kvKey}>Session ID:</react_native_1.Text>
+                    <react_native_1.Text style={detailStyles.kvVal} selectable>{event.sessionId}</react_native_1.Text>
+                  </react_native_1.View>)}
+                {event.trackingId && (<react_native_1.View style={detailStyles.kvRow}>
+                    <react_native_1.Text style={detailStyles.kvKey}>Tracking ID:</react_native_1.Text>
+                    <react_native_1.Text style={detailStyles.kvVal} selectable>{event.trackingId}</react_native_1.Text>
+                  </react_native_1.View>)}
+              </react_native_1.View>
+            </react_native_1.View>)}
+
+          {/* Parameters Table Section */}
+          <react_native_1.View style={detailStyles.sectionCard}>
+            <react_native_1.View style={detailStyles.sectionHeaderBetween}>
+              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                <NetworkIcons_1.TableIcon color={AppColors_1.AppColors.brandPurple} size={12}/>
+                <react_native_1.Text style={detailStyles.sectionTitle}>
+                  EVENT PARAMETERS ({paramKeys.length})
+                </react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.Text style={detailStyles.sectionSubtitle}>
+                Key-Value Attributes
+              </react_native_1.Text>
+            </react_native_1.View>
+
+            {/* Search filter within parameters (if > 4 params) */}
+            {paramKeys.length > 4 && (<react_native_1.View style={detailStyles.searchBar}>
+                <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={13}/>
+                <react_native_1.TextInput placeholder="Filter parameters by key or value..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={paramSearch} onChangeText={setParamSearch} style={detailStyles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                {paramSearch.length > 0 && (<react_native_1.Pressable onPress={() => setParamSearch('')} hitSlop={8}>
+                    <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={13}/>
+                  </react_native_1.Pressable>)}
+              </react_native_1.View>)}
+
+            {paramKeys.length === 0 ? (<react_native_1.View style={detailStyles.emptyParamsBox}>
+                <NetworkIcons_1.DocIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
+                <react_native_1.Text style={detailStyles.emptyParamsText}>
+                  No custom parameters recorded for this event.
+                </react_native_1.Text>
+              </react_native_1.View>) : filteredParamEntries.length === 0 ? (<react_native_1.View style={detailStyles.emptyParamsBox}>
+                <react_native_1.Text style={detailStyles.emptyParamsText}>
+                  No parameters matching "{paramSearch}"
+                </react_native_1.Text>
+              </react_native_1.View>) : (<react_native_1.View style={detailStyles.paramList}>
+                {filteredParamEntries.map(([key, val], pIdx) => {
+                    const isObject = typeof val === 'object' && val !== null;
+                    const isArray = Array.isArray(val);
+                    let typeStr = typeof val;
+                    if (val === null)
+                        typeStr = 'null';
+                    else if (isArray)
+                        typeStr = `array [${val.length}]`;
+                    else if (isObject)
+                        typeStr = 'object';
+                    const valString = isObject ? JSON.stringify(val, null, 2) : String(val);
+                    // Highlight standard GA4 ecom/screen keys
+                    const isKeyHighlighted = key === 'value' ||
+                        key === 'price' ||
+                        key === 'currency' ||
+                        key === 'screen_name' ||
+                        key === 'item_id' ||
+                        key === 'item_name';
+                    return (<AnimatedEntrance_1.default key={key} index={pIdx} distance={4}>
+                      <react_native_1.View style={detailStyles.paramCard}>
+                        {/* Param Top Row: Key + Type + Copy */}
+                        <react_native_1.View style={detailStyles.paramCardHeader}>
+                          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1, minWidth: 0 }}>
+                            <HighlightText_1.default text={key} search={paramSearch} style={[
+                            detailStyles.paramKeyText,
+                            isKeyHighlighted && detailStyles.paramKeyHighlighted,
+                        ]} highlightStyle={detailStyles.highlight}/>
+                            <react_native_1.View style={detailStyles.typeBadge}>
+                              <react_native_1.Text style={detailStyles.typeBadgeText}>
+                                {typeStr.toUpperCase()}
+                              </react_native_1.Text>
+                            </react_native_1.View>
+                          </react_native_1.View>
+
+                          <CopyButton_1.default value={valString} label={key}/>
+                        </react_native_1.View>
+
+                        {/* Param Value Display */}
+                        <react_native_1.View style={detailStyles.paramValBox}>
+                          {isObject ? (<JsonViewer_1.default data={val} search={paramSearch} hideTabs wrap/>) : (<HighlightText_1.default text={valString} search={paramSearch} style={detailStyles.paramValText} highlightStyle={detailStyles.highlight} selectable/>)}
+                        </react_native_1.View>
+                      </react_native_1.View>
+                    </AnimatedEntrance_1.default>);
+                })}
+              </react_native_1.View>)}
+          </react_native_1.View>
+
+          {/* User Properties Section (if any) */}
+          {userPropKeys.length > 0 && (<react_native_1.View style={detailStyles.sectionCard}>
+              <react_native_1.View style={detailStyles.sectionHeader}>
+                <NetworkIcons_1.SparkleIcon color={AppColors_1.AppColors.purple} size={12}/>
+                <react_native_1.Text style={detailStyles.sectionTitle}>
+                  USER PROPERTIES SNAPSHOT ({userPropKeys.length})
+                </react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={detailStyles.sectionBody}>
+                {userPropKeys.map(k => (<react_native_1.View key={k} style={detailStyles.kvRow}>
+                    <react_native_1.Text style={detailStyles.kvKey}>{k}:</react_native_1.Text>
+                    <react_native_1.Text style={detailStyles.kvVal} selectable>
+                      {String(userProperties[k])}
+                    </react_native_1.Text>
+                  </react_native_1.View>))}
+              </react_native_1.View>
+            </react_native_1.View>)}
+        </react_native_1.View>)}
+
+      {/* ── JSON Tree View ────────────────────────────────────────────────── */}
+      {activeViewTab === 'tree' && (<react_native_1.View style={detailStyles.jsonContainer}>
+          <JsonViewer_1.default data={fullJsonData} defaultExpandDepth={1} mode="pretty" fullHeight/>
+        </react_native_1.View>)}
+
+      {/* ── Raw Payload View ──────────────────────────────────────────────── */}
+      {activeViewTab === 'raw' && (<react_native_1.View style={detailStyles.jsonContainer}>
+          <JsonViewer_1.default data={fullJsonData} mode="raw" fullHeight/>
+        </react_native_1.View>)}
     </react_native_1.ScrollView>);
 };
 const detailStyles = react_native_1.StyleSheet.create({
-    scroll: { flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground },
+    scroll: {
+        flex: 1,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+    },
     content: {
-        paddingTop: 0,
+        paddingTop: 12,
         paddingBottom: 40,
+        paddingHorizontal: 12,
+    },
+    heroCard: {
+        backgroundColor: AppColors_1.AppColors.white,
+        borderRadius: 12,
+        padding: 14,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+        shadowColor: AppColors_1.AppColors.primaryBlack,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.04,
+        shadowRadius: 4,
+        elevation: 2,
+        marginBottom: 12,
     },
-    jsonBlockContainer: {
-        marginHorizontal: 16,
-        marginTop: 16,
-        marginBottom: 16,
+    heroTopRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 10,
+    },
+    sourceBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4.5,
+        paddingHorizontal: 7,
+        paddingVertical: 3,
+        borderRadius: 5,
+        borderWidth: 1,
+    },
+    sourceDot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+    },
+    sourceBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        letterSpacing: 0.4,
+    },
+    catBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        paddingHorizontal: 7,
+        paddingVertical: 3,
+        borderRadius: 5,
         borderWidth: 1,
+    },
+    catBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        letterSpacing: 0.3,
+    },
+    titleRow: {
+        marginBottom: 8,
+    },
+    eventTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 16,
+        color: AppColors_1.AppColors.primaryBlack,
+        lineHeight: 22,
+    },
+    metaRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        flexWrap: 'wrap',
+        marginBottom: 10,
+    },
+    timePill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: `${AppColors_1.AppColors.purple}14`,
+        paddingHorizontal: 7,
+        paddingVertical: 3,
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.purple}2E`,
+    },
+    timeText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.purple,
+    },
+    screenPill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: `${AppColors_1.AppColors.sky500}14`,
+        paddingHorizontal: 7,
+        paddingVertical: 3,
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.sky500}2E`,
+        maxWidth: 220,
+    },
+    screenText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.sky600,
+    },
+    metricsBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        flexWrap: 'wrap',
+        paddingTop: 8,
+        borderTopWidth: 1,
+        borderTopColor: AppColors_1.AppColors.dividerColor,
+    },
+    metricPill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        paddingHorizontal: 7,
+        paddingVertical: 3,
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    metricLabel: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    metricValue: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    revenuePill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: AppColors_1.AppColors.emeraldBg,
+        paddingHorizontal: 7,
+        paddingVertical: 3,
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.emeraldBorder,
+    },
+    revenueValue: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10.5,
+        color: '#047857',
+    },
+    itemsPill: {
+        backgroundColor: '#EFF6FF',
+        paddingHorizontal: 7,
+        paddingVertical: 3,
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: '#BFDBFE',
+    },
+    itemsValue: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10.5,
+        color: '#1D4ED8',
+    },
+    tabsWrap: {
+        marginBottom: 12,
+    },
+    tabContent: {
+        gap: 12,
+    },
+    sectionCard: {
+        backgroundColor: AppColors_1.AppColors.white,
         borderRadius: 12,
+        padding: 12,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+        shadowColor: AppColors_1.AppColors.primaryBlack,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.04,
+        shadowRadius: 4,
+        elevation: 2,
+    },
+    sectionHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        marginBottom: 10,
+        paddingBottom: 6,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.dividerColor,
+    },
+    sectionHeaderBetween: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 10,
+        paddingBottom: 6,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.dividerColor,
+    },
+    sectionTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.slate700,
+        letterSpacing: 0.4,
+    },
+    sectionSubtitle: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    sectionBody: {
+        gap: 6,
+    },
+    kvRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: 3,
+    },
+    kvKey: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    kvVal: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    searchBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderRadius: 8,
+        paddingHorizontal: 8,
+        paddingVertical: 5,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+        marginBottom: 10,
+        gap: 6,
+    },
+    searchInput: {
+        flex: 1,
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors_1.AppColors.primaryBlack,
+        paddingVertical: 0,
+    },
+    emptyParamsBox: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 20,
+        gap: 6,
+    },
+    emptyParamsText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    paramList: {
+        gap: 8,
+    },
+    paramCard: {
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderRadius: 8,
+        padding: 9,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    paramCardHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 4,
+    },
+    paramKeyText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11.5,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    paramKeyHighlighted: {
+        color: AppColors_1.AppColors.brandPurple,
+    },
+    typeBadge: {
+        backgroundColor: '#E2E8F0',
+        paddingHorizontal: 5,
+        paddingVertical: 1.5,
+        borderRadius: 3,
+    },
+    typeBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 8.5,
+        color: AppColors_1.AppColors.slate700,
+        letterSpacing: 0.3,
+    },
+    paramValBox: {
+        marginTop: 2,
+    },
+    paramValText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors_1.AppColors.slate700,
+        lineHeight: 16,
+    },
+    jsonContainer: {
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+        overflow: 'hidden',
+        backgroundColor: AppColors_1.AppColors.white,
+        minHeight: 300,
+    },
+    highlight: {
+        backgroundColor: '#FEF08A',
+        color: '#854D0E',
+        fontFamily: AppFonts_1.AppFonts.interBold,
     },
 });
 exports.default = AnalyticsDetail;