+ {/* Alert preferences */}
+
+
+ Alert Preferences
+
+
+ Choose which metric milestones you want to be notified about. These are informational only — not gamification.
+
+
+ {(data?.preferences ?? []).map((pref) => (
+
+ ))}
+
+
+
+ {/* Create new alert */}
+
+
+ Create Alert
+
+
+
+
+
+
+
+
+ setNewThreshold(e.target.value)}
+ placeholder="e.g., 1000"
+ className="w-full bg-background border border-white/10 rounded-md px-3 py-2 text-sm text-foreground"
+ aria-label="Alert threshold value"
+ />
+
+
+
+
+ {/* Quick suggestions */}
+ {SUGGESTED_THRESHOLDS[newMetricType] && (
+
+ Quick:
+ {SUGGESTED_THRESHOLDS[newMetricType].map((threshold) => (
+
+ ))}
+
+ )}
+
+
+ {/* Active alerts */}
+
+
+ Active Alerts
+
+ {!data?.alerts?.length ? (
+
No alerts configured yet.
+ ) : (
+
+ {data.alerts.map((alert) => (
+
+
+
+
+ {METRIC_LABELS[alert.metric_type] ?? alert.metric_type} reaches {alert.threshold.toLocaleString()}
+
+ {alert.is_triggered && (
+ Reached!
+ )}
+
+
+
+ ))}
+
+ )}
+
+
+
+ Listening Heatmap
+
+
+ No heatmap data available yet. Select a track to view its listening heatmap.
+
+
+ Heatmap data helps you understand which parts of your tracks listeners engage with most.
+
+
+
+
+ Listening Heatmap
+
+ {trackTitle && (
+ {trackTitle}
+ )}
+
+
+
+ {data.segments.map((seg) => (
+
+
+
+
{formatMs(seg.segment_start_ms)} - {formatMs(seg.segment_end_ms)}
+
{seg.listen_count} listens
+
{seg.drop_off_count} drop-offs
+
{seg.replay_count} replays
+
+
+
+ ))}
+
+
+
+ 0:00
+ {data.segments.length > 0 && (
+ {formatMs(data.segments[data.segments.length - 1].segment_end_ms)}
+ )}
+
+
+
+
+
+
+
+ Peak: {data.max_listens} listens | Avg drop-off: {data.avg_drop_off.toFixed(1)}
+
+
+
+ {/* KPI Cards */}
+
+
+
+
+
+
+
+
+
+ {/* Products table */}
+ {data.products && data.products.length > 0 && (
+
+
+ Product Performance
+
+
+
+
+
+ | Product |
+ Type |
+ Views |
+ Sales |
+ Revenue |
+ Conversion |
+
+
+
+ {data.products.map((product) => (
+
+ | {product.name} |
+ {product.product_type} |
+ {product.views} |
+ {product.sales} |
+ {formatCurrency(product.revenue)} |
+
+ 5 ? 'text-emerald-400' : 'text-muted-foreground'}>
+ {product.conversion_rate.toFixed(1)}%
+
+ |
+
+ ))}
+
+
+
+
+ )}
+
+ {/* Revenue timeline */}
+ {data.revenue_timeline && data.revenue_timeline.length > 0 && (
+
+
+ Revenue Timeline
+
+
+ {data.revenue_timeline.map((day, i) => {
+ const maxRevenue = Math.max(...data.revenue_timeline!.map((d) => d.revenue), 1);
+ const height = (day.revenue / maxRevenue) * 100;
+ return (
+
+
+
+
{day.date}
+
{formatCurrency(day.revenue)}
+
{day.sales} sales, {day.views} views
+
+
+
+ );
+ })}
+
+
+ )}
+