react-native-inapp-inspector 1.1.11 → 1.1.13

package/dist/commonjs/components/AnalyticsDetail.js

@@ -38,298 +38,126 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
 // Components
 const CopyButton_1 = __importDefault(require("./CopyButton"));
 const JsonViewer_1 = __importDefault(require("./JsonViewer"));
-// Icons
-const NetworkIcons_1 = require("./NetworkIcons");
+const TouchableScale_1 = __importDefault(require("./TouchableScale"));
 // Utils
 const AppFonts_1 = require("../styles/AppFonts");
+const helpers_1 = require("../helpers");
 // Stylesheet
 const AppColors_1 = require("../styles/AppColors");
-const styles_1 = __importDefault(require("../styles"));
-const AnalyticsEventCard_1 = require("./AnalyticsEventCard");
-// Helpers
-const helpers_1 = require("../helpers");
-// Sub Components
-const ParamRowItem = ({ paramKey, value, }) => {
-    const isObject = typeof value === 'object' && value !== null;
-    const valStr = isObject ? JSON.stringify(value, null, 2) : String(value);
-    const [expanded, setExpanded] = (0, react_1.useState)(false);
-    const isLong = valStr.length > 80 || valStr.includes('\n') || isObject;
-    return (<react_native_1.View style={[detailStyles.dataBox, { backgroundColor: AppColors_1.AppColors.primaryLight, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
-      <react_native_1.View style={detailStyles.dataBoxHeader}>
-        <react_native_1.Text style={[detailStyles.dataBoxKey, { color: AppColors_1.AppColors.primaryBlack }]} numberOfLines={1}>
-          {paramKey}
-        </react_native_1.Text>
-        <CopyButton_1.default value={valStr} label={paramKey}/>
-      </react_native_1.View>
-      {expanded && isObject ? (<react_native_1.View style={[detailStyles.jsonBlock, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
-          <JsonViewer_1.default data={value}/>
-        </react_native_1.View>) : (<react_native_1.Text style={[detailStyles.dataBoxVal, { color: AppColors_1.AppColors.primaryBlack }]} selectable numberOfLines={expanded ? undefined : 2}>
-          {valStr}
-        </react_native_1.Text>)}
-      {isLong && (<react_native_1.Pressable onPress={() => setExpanded(!expanded)} style={[detailStyles.showMoreBtn, { backgroundColor: AppColors_1.AppColors.grayBackground }]}>
-          <react_native_1.Text style={[detailStyles.showMoreText, { color: AppColors_1.AppColors.grayTextStrong }]}>
-            {expanded ? 'Show Less' : 'Show More'}
-          </react_native_1.Text>
-        </react_native_1.Pressable>)}
-    </react_native_1.View>);
-};
-const ParamTable = ({ data, emptyLabel, }) => {
-    const entries = Object.keys(data).map(key => ({
-        key,
-        value: data[key],
-    }));
-    if (entries.length === 0) {
-        return (<react_native_1.View style={[detailStyles.emptyParams, { backgroundColor: AppColors_1.AppColors.primaryLight, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
-        <react_native_1.Text style={[detailStyles.emptyParamsText, { color: AppColors_1.AppColors.grayTextWeak }]}>
-          {emptyLabel ?? 'No parameters'}
-        </react_native_1.Text>
-      </react_native_1.View>);
-    }
-    return (<react_native_1.View style={detailStyles.paramList}>
-      {entries.map(({ key, value }) => (<ParamRowItem key={key} paramKey={key} value={value}/>))}
-    </react_native_1.View>);
-};
-const SectionCard = ({ title, children, count, accentColor = AppColors_1.AppColors.purple, }) => {
-    if (!title) {
-        return (<react_native_1.View style={{ paddingHorizontal: 16, paddingTop: 12, paddingBottom: 20 }}>
-        {children}
-      </react_native_1.View>);
-    }
-    return (<react_native_1.View style={[detailStyles.sectionCard, { backgroundColor: AppColors_1.AppColors.primaryLight, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
-      <react_native_1.View style={detailStyles.sectionHeader}>
-        <react_native_1.View style={detailStyles.sectionTitleRow}>
-          <react_native_1.View style={[
-            detailStyles.sectionAccentDot,
-            { backgroundColor: accentColor },
-        ]}/>
-          <react_native_1.Text style={[detailStyles.sectionTitle, { color: AppColors_1.AppColors.primaryBlack }]}>{title.toUpperCase()}</react_native_1.Text>
-        </react_native_1.View>
-        {typeof count === 'number' && (<react_native_1.View style={[
-                detailStyles.countBadge,
-                {
-                    borderColor: `${accentColor}55`,
-                    backgroundColor: `${accentColor}12`,
-                },
-            ]}>
-            <react_native_1.Text style={[detailStyles.countBadgeText, { color: accentColor }]}>
-              {count}
-            </react_native_1.Text>
-          </react_native_1.View>)}
-      </react_native_1.View>
-      <react_native_1.View style={{ paddingHorizontal: 14, paddingBottom: 14 }}>{children}</react_native_1.View>
-    </react_native_1.View>);
-};
 const AnalyticsDetail = ({ event, }) => {
-    const [search, setSearch] = (0, react_1.useState)('');
-    const [activeTab, setActiveTab] = (0, react_1.useState)('unformatted');
-    const SOURCE_COLORS = {
-        firebase: '#E07B1A',
-        manual: AppColors_1.AppColors.purple,
-    };
+    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 eventColor = (0, AnalyticsEventCard_1.getEventColor)(event.name);
-    const sourceColor = SOURCE_COLORS[event.source] ?? AppColors_1.AppColors.purple;
-    const paramCount = Object.keys(params).length;
     const upCount = Object.keys(userProperties).length;
-    const topMetrics = [];
-    if (event.screenName) {
-        topMetrics.push({
-            key: 'Screen',
-            value: event.screenName,
-            color: AppColors_1.AppColors.skyBlue,
-        });
-    }
-    if (event.userId) {
-        topMetrics.push({
-            key: 'User ID',
-            value: event.userId,
-            color: AppColors_1.AppColors.greenColor,
-        });
-    }
-    if (event.pageTitle) {
-        topMetrics.push({
-            key: 'Page',
-            value: event.pageTitle,
-            color: AppColors_1.AppColors.purple,
-        });
-    }
-    if (params?.primary_category) {
-        topMetrics.push({
-            key: 'Category',
-            value: String(params.primary_category),
-            color: AppColors_1.AppColors.purple,
-        });
-    }
-    if (params?.flow) {
-        topMetrics.push({
-            key: 'Flow',
-            value: String(params.flow),
-            color: AppColors_1.AppColors.greenColor,
-        });
-    }
-    if (params?.market_language) {
-        topMetrics.push({
-            key: 'Language',
-            value: String(params.market_language),
-            color: '#F59E0B',
-        }); // Amber
-    }
-    if (params?.tripType) {
-        topMetrics.push({
-            key: 'Trip Type',
-            value: String(params.tripType),
-            color: '#3B82F6',
-        }); // Blue
+    const jsonData = {
+        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';
     }
-    if (userProperties?.platform_type) {
-        topMetrics.push({
-            key: 'Platform',
-            value: String(userProperties.platform_type),
-            color: AppColors_1.AppColors.skyBlue,
-        });
+    else if (isArray) {
+        typeLabel = 'array';
+        countLabel = `${jsonData.length} items`;
     }
-    if (userProperties?.login_status) {
-        topMetrics.push({
-            key: 'Login Status',
-            value: String(userProperties.login_status),
-            color: '#64748B',
-        });
+    else if (isObject) {
+        typeLabel = 'object';
+        countLabel = `${Object.keys(jsonData).length} keys`;
     }
-    topMetrics.unshift({
-        key: 'Source',
-        value: event.source,
-        color: sourceColor,
-    });
     return (<react_native_1.ScrollView style={[detailStyles.scroll, { backgroundColor: AppColors_1.AppColors.grayBackground }]} contentContainerStyle={detailStyles.content} showsVerticalScrollIndicator contentInsetAdjustmentBehavior="never" automaticallyAdjustContentInsets={false}>
-      <react_native_linear_gradient_1.default colors={[
-            `${eventColor}18`,
-            `${eventColor}06`,
-            AppColors_1.AppColors.grayBackground,
-        ]} style={detailStyles.hero}>
-        <react_native_1.View style={{
+      
+      {/* Clean Toolbar */}
+      <react_native_1.View style={{
             flexDirection: 'row',
-            width: '100%',
             justifyContent: 'space-between',
-            alignItems: 'flex-start',
+            alignItems: 'center',
             paddingHorizontal: 16,
-            paddingTop: 14,
-            marginBottom: 8,
+            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.View style={{ flex: 1, paddingRight: 10 }}>
             <react_native_1.Text style={{
             fontFamily: AppFonts_1.AppFonts.interBold,
-            fontSize: 18,
-            color: AppColors_1.AppColors.primaryBlack,
-            marginBottom: 4,
-        }} numberOfLines={2}>
-              {event.name}
-            </react_native_1.Text>
-            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-              <react_native_1.View style={{
-            width: 8,
-            height: 8,
-            borderRadius: 4,
-            backgroundColor: sourceColor,
-        }}/>
-              <react_native_1.Text style={{
-            fontFamily: AppFonts_1.AppFonts.interMedium,
             fontSize: 12,
-            color: AppColors_1.AppColors.grayTextStrong,
+            color: AppColors_1.AppColors.purple,
         }}>
-                {(0, helpers_1.formatDateTimeToAnalytics)(event.timestamp)}
+              {expandDepth === 99 ? 'Collapse All' : 'Expand All'}
+            </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()}
               </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)}
+            </react_native_1.Text>
           </react_native_1.View>
-          <CopyButton_1.default value={JSON.stringify({ name: event.name, params: params }, null, 2)} label="Copy JSON"/>
         </react_native_1.View>
 
-        {topMetrics.length > 0 && (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={detailStyles.metricsScroll} contentContainerStyle={detailStyles.metricsGrid}>
-            {topMetrics.map((item, idx) => (<react_native_1.View key={idx} style={[
-                    detailStyles.metricCard,
-                    {
-                        borderLeftColor: item.color,
-                        backgroundColor: AppColors_1.AppColors.primaryLight,
-                    },
-                ]}>
-                <react_native_1.Text style={[detailStyles.metricLabel, { color: AppColors_1.AppColors.grayTextWeak }]}>{item.key}</react_native_1.Text>
-                <react_native_1.Text style={[detailStyles.metricValue, { color: item.color }]} numberOfLines={1}>
-                  {item.value}
-                </react_native_1.Text>
-              </react_native_1.View>))}
-          </react_native_1.ScrollView>)}
-      </react_native_linear_gradient_1.default>
+        <CopyButton_1.default value={JSON.stringify(jsonData, null, 2)} label="Copy JSON"/>
+      </react_native_1.View>
 
-      <react_native_1.View style={[detailStyles.tabRow, { backgroundColor: AppColors_1.AppColors.grayBackground }]}>
-        <react_native_1.Pressable style={[
-            detailStyles.tabButton,
-            activeTab === 'unformatted' && [detailStyles.tabActive, { backgroundColor: AppColors_1.AppColors.primaryLight }],
-        ]} onPress={() => setActiveTab('unformatted')}>
-          <react_native_1.Text style={[
-            detailStyles.tabText,
-            { color: AppColors_1.AppColors.grayTextWeak },
-            activeTab === 'unformatted' && [detailStyles.tabTextActive, { color: AppColors_1.AppColors.primaryBlack }],
-        ]}>
-            JSON Viewer
-          </react_native_1.Text>
-        </react_native_1.Pressable>
-        <react_native_1.Pressable style={[
-            detailStyles.tabButton,
-            activeTab === 'formatted' && [detailStyles.tabActive, { backgroundColor: AppColors_1.AppColors.primaryLight }],
-        ]} onPress={() => setActiveTab('formatted')}>
-          <react_native_1.Text style={[
-            detailStyles.tabText,
-            { color: AppColors_1.AppColors.grayTextWeak },
-            activeTab === 'formatted' && [detailStyles.tabTextActive, { color: AppColors_1.AppColors.primaryBlack }],
+      {/* Direct JSON Viewer View */}
+      <react_native_1.View style={[
+            detailStyles.jsonBlockContainer,
+            {
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                marginTop: 16,
+            },
         ]}>
-            Tabular View
-          </react_native_1.Text>
-        </react_native_1.Pressable>
+        <JsonViewer_1.default key={treeKey} data={jsonData} defaultExpandDepth={expandDepth} fullHeight/>
       </react_native_1.View>
-
-      {activeTab === 'unformatted' && (<react_native_1.View style={detailStyles.searchRow}>
-          <react_native_1.View style={[styles_1.default.detailSearchBox, { backgroundColor: AppColors_1.AppColors.primaryLight, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
-            <react_native_1.TextInput placeholder="Search JSON data..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={[styles_1.default.detailSearchInput, { color: AppColors_1.AppColors.primaryBlack }]} autoCorrect={false} autoCapitalize="none"/>
-            {search.length > 0 && (<react_native_1.Pressable onPress={() => setSearch('')} hitSlop={10} style={{ padding: 8 }}>
-                <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-              </react_native_1.Pressable>)}
-          </react_native_1.View>
-        </react_native_1.View>)}
-
-      {activeTab === 'formatted' && (<react_native_1.View style={{ gap: 10 }}>
-          {paramCount > 0 && (<SectionCard title="Event Parameters" count={paramCount} accentColor={eventColor}>
-              <ParamTable data={params} emptyLabel="No parameters"/>
-            </SectionCard>)}
-
-          {upCount > 0 && (<SectionCard title="User Properties" count={upCount} accentColor={AppColors_1.AppColors.greenColor}>
-              <ParamTable data={userProperties} emptyLabel="No user properties"/>
-            </SectionCard>)}
-        </react_native_1.View>)}
-
-      {activeTab === 'unformatted' && (<SectionCard accentColor={AppColors_1.AppColors.purple}>
-          <react_native_1.View style={[detailStyles.jsonBlock, { marginLeft: 0, marginTop: 0, backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
-            <JsonViewer_1.default data={{
-                name: event.name,
-                params: params,
-                ...(upCount > 0
-                    ? {
-                        userProperties: userProperties,
-                    }
-                    : {}),
-            }} search={search}/>
-          </react_native_1.View>
-        </SectionCard>)}
-
-      {/* Empty state */}
-      {paramCount === 0 && upCount === 0 && activeTab !== 'unformatted' && (<react_native_1.View style={[detailStyles.emptyParams, { backgroundColor: AppColors_1.AppColors.primaryLight, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
-          <react_native_1.Text style={[detailStyles.emptyParamsText, { color: AppColors_1.AppColors.grayTextWeak }]}>
-            No parameters recorded for this event
-          </react_native_1.Text>
-        </react_native_1.View>)}
     </react_native_1.ScrollView>);
 };
 const detailStyles = react_native_1.StyleSheet.create({
@@ -338,226 +166,12 @@ const detailStyles = react_native_1.StyleSheet.create({
         paddingTop: 0,
         paddingBottom: 40,
     },
-    hero: {
-        paddingTop: 0,
-        paddingBottom: 16,
-        paddingHorizontal: 0,
-        gap: 8,
-        marginTop: 0,
-        marginBottom: 0,
-        width: '100%',
-        alignSelf: 'stretch',
-    },
-    searchRow: {
-        paddingHorizontal: 16,
-        marginVertical: 6,
-    },
-    sectionCard: {
-        marginHorizontal: 0,
-        borderRadius: 12,
-        overflow: 'hidden',
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-        backgroundColor: AppColors_1.AppColors.primaryLight,
-        shadowColor: '#000',
-        shadowOpacity: 0.04,
-        shadowRadius: 4,
-        shadowOffset: { width: 0, height: 1 },
-        elevation: 1,
-    },
-    sectionHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 14,
-        paddingVertical: 12,
-    },
-    sectionTitleRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-        flex: 1,
-    },
-    sectionAccentDot: {
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-    },
-    sectionTitle: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 13,
-        color: AppColors_1.AppColors.primaryBlack,
-    },
-    sectionActions: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-    },
-    countBadge: {
-        paddingHorizontal: 7,
-        paddingVertical: 2,
-        borderRadius: 8,
-        borderWidth: 1,
-    },
-    countBadgeText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 10,
-    },
-    paramList: {
-        gap: 8,
-    },
-    emptyParams: {
-        marginVertical: 12,
-        paddingVertical: 18,
-        paddingHorizontal: 14,
-        borderRadius: 10,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-        backgroundColor: AppColors_1.AppColors.primaryLight,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    emptyParamsText: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 13,
-        color: AppColors_1.AppColors.grayTextWeak,
-        textAlign: 'center',
-        lineHeight: 18,
-    },
-    dataBox: {
-        backgroundColor: '#FFFFFF',
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: '#E5E7EB',
-        padding: 12,
-    },
-    dataBoxHeader: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: 8,
-    },
-    dataBoxKey: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontWeight: 'bold',
-        fontSize: 13,
-        color: AppColors_1.AppColors.primaryBlack,
-        flex: 1,
-        paddingRight: 8,
-    },
-    dataBoxVal: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 13,
-        color: AppColors_1.AppColors.primaryBlack,
-        lineHeight: 18,
-    },
-    showMoreBtn: {
-        marginTop: 8,
-        alignSelf: 'flex-start',
-        backgroundColor: '#F3F4F6',
-        paddingHorizontal: 10,
-        paddingVertical: 4,
-        borderRadius: 4,
-    },
-    showMoreText: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 11,
-        color: '#4B5563', // matching previous UI color
-    },
-    jsonBlock: {
-        padding: 12,
-        borderWidth: 1,
-        borderColor: '#E0E7FF',
-        borderRadius: 8,
-        backgroundColor: '#EEF2FF',
-    },
-    metricsScroll: {
-        height: 92,
-        overflow: 'visible',
-    },
-    metricsGrid: {
-        gap: 8,
-        marginTop: 4,
-        paddingHorizontal: 16,
-        paddingBottom: 14,
-    },
-    metricCard: {
-        backgroundColor: '#FFFFFF',
-        paddingVertical: 8,
-        paddingHorizontal: 10,
-        borderRadius: 6,
-        borderLeftWidth: 3,
-        width: 130, // fixed width for horizontal scrolling
-        shadowColor: '#000',
-        shadowOpacity: 0.04,
-        shadowRadius: 4,
-        shadowOffset: { width: 0, height: 2 },
-        elevation: 2,
-        alignItems: 'flex-start',
-    },
-    metricLabel: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors_1.AppColors.grayTextWeak,
-        textTransform: 'uppercase',
-        marginBottom: 4,
-    },
-    metricValue: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 13,
-    },
-    tabRow: {
-        flexDirection: 'row',
+    jsonBlockContainer: {
         marginHorizontal: 16,
-        marginTop: 6,
-        backgroundColor: '#E5E7EB',
-        borderRadius: 8,
-        padding: 4,
-    },
-    tabButton: {
-        flex: 1,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 8,
-        borderRadius: 6,
-        gap: 6,
-    },
-    tabActive: {
-        backgroundColor: '#FFFFFF',
-        shadowColor: '#000',
-        shadowOpacity: 0.1,
-        shadowRadius: 2,
-        shadowOffset: { width: 0, height: 1 },
-        elevation: 2,
-    },
-    tabText: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 13,
-        color: AppColors_1.AppColors.grayTextWeak,
-    },
-    tabTextActive: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        color: AppColors_1.AppColors.primaryBlack,
-    },
-    tabBadge: {
-        backgroundColor: '#D1D5DB',
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 10,
-    },
-    tabBadgeActive: {
-        backgroundColor: AppColors_1.AppColors.primaryLight,
+        marginTop: 16,
+        marginBottom: 16,
         borderWidth: 1,
-        borderColor: '#E5E7EB',
-    },
-    tabBadgeText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 10,
-        color: '#6B7280',
-    },
-    tabBadgeTextActive: {
-        color: AppColors_1.AppColors.primaryBlack,
+        borderRadius: 12,
     },
 });
 exports.default = AnalyticsDetail;

package/dist/commonjs/components/AnalyticsEventCard.js

@@ -175,34 +175,34 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             {userPropCount > 0 && (<react_native_1.View style={[cardStyles.chip, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
                 <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.grayText }]}>★ {userPropCount} props</react_native_1.Text>
               </react_native_1.View>)}
-          </react_native_1.View>
 
-          {/* Inline Mini Graph for E-commerce Items */}
-          {(() => {
+            {(() => {
             const items = event.params?.items;
-            if (!Array.isArray(items) || items.length === 0)
-                return null;
-            const prices = items
-                .map((item) => parseFloat(item.price || item.value))
-                .filter(p => !isNaN(p));
-            if (prices.length === 0)
-                return null;
-            const max = Math.max(...prices);
-            if (max === 0)
-                return null;
-            return (<react_native_1.View style={cardStyles.miniGraphWrapper}>
-                {prices.map((val, idx) => {
-                    const hPct = (val / max) * 100;
-                    return (<react_native_1.View key={idx} style={[
-                            cardStyles.miniGraphBar,
-                            {
-                                height: `${Math.max(15, hPct)}%`,
-                                backgroundColor: color,
-                            },
-                        ]}/>);
-                })}
-              </react_native_1.View>);
+            if (Array.isArray(items) && items.length > 0) {
+                return (<react_native_1.View style={[cardStyles.chip, { backgroundColor: '#FEF3C7', borderColor: '#FDE68A' }]}>
+                    <react_native_1.Text style={[cardStyles.chipText, { color: '#D97706', fontFamily: AppFonts_1.AppFonts.interBold }]}>
+                      🛒 {items.length} {items.length === 1 ? 'item' : 'items'}
+                    </react_native_1.Text>
+                  </react_native_1.View>);
+            }
+            return null;
+        })()}
+
+            {(() => {
+            const val = event.params?.value ?? event.params?.price;
+            const currency = event.params?.currency ?? '';
+            const isPrimitive = typeof val === 'string' || typeof val === 'number';
+            if (isPrimitive) {
+                const currencyStr = typeof currency === 'string' || typeof currency === 'number' ? String(currency) : '';
+                return (<react_native_1.View style={[cardStyles.chip, { backgroundColor: '#ECFDF5', borderColor: '#A7F3D0' }]}>
+                    <react_native_1.Text style={[cardStyles.chipText, { color: '#059669', fontFamily: AppFonts_1.AppFonts.interBold }]}>
+                      💰 {String(val)} {currencyStr}
+                    </react_native_1.Text>
+                  </react_native_1.View>);
+            }
+            return null;
         })()}
+          </react_native_1.View>
         </react_native_1.View>
       </TouchableScale_1.default>
     </react_native_1.View>);