@payez/next-mvp 4.0.1 → 4.0.2

package/dist/components/admin/AnalyticsTab.d.ts

@@ -0,0 +1,22 @@
+/**
+ * =============================================================================
+ * VIBE ADMIN ANALYTICS TAB
+ * =============================================================================
+ *
+ * Generic dashboard tab showing login statistics and analytics.
+ * Can be extended by consumer apps with custom components.
+ *
+ * =============================================================================
+ */
+import { ReactNode } from 'react';
+export interface AnalyticsTabProps {
+    isDark?: boolean;
+    /** Base API path for analytics (default: /api/admin/analytics) */
+    apiBasePath?: string;
+    /** Optional custom component to render in the geo section (e.g., WorldMap) */
+    geoMapComponent?: ReactNode;
+    /** Show business metrics section (default: true) */
+    showBusinessMetrics?: boolean;
+}
+export declare function AnalyticsTab({ isDark, apiBasePath, geoMapComponent, showBusinessMetrics, }: AnalyticsTabProps): import("react/jsx-runtime").JSX.Element | null;
+export default AnalyticsTab;

package/dist/components/admin/AnalyticsTab.js

@@ -0,0 +1,167 @@
+"use strict";
+/**
+ * =============================================================================
+ * VIBE ADMIN ANALYTICS TAB
+ * =============================================================================
+ *
+ * Generic dashboard tab showing login statistics and analytics.
+ * Can be extended by consumer apps with custom components.
+ *
+ * =============================================================================
+ */
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnalyticsTab = AnalyticsTab;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// -----------------------------------------------------------------------------
+// COMPONENT
+// -----------------------------------------------------------------------------
+function AnalyticsTab({ isDark = true, apiBasePath = '/api/admin/analytics', geoMapComponent, showBusinessMetrics = true, }) {
+    const [period, setPeriod] = (0, react_1.useState)('week');
+    const [data, setData] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    // Business metrics data
+    const [tierData, setTierData] = (0, react_1.useState)(null);
+    const [featureData, setFeatureData] = (0, react_1.useState)(null);
+    const [revenueData, setRevenueData] = (0, react_1.useState)(null);
+    const themeClasses = {
+        cardBg: isDark ? 'bg-slate-800 border-slate-700' : 'bg-white border-gray-200 shadow-sm',
+        textPrimary: isDark ? 'text-white' : 'text-gray-900',
+        textSecondary: isDark ? 'text-gray-400' : 'text-gray-600',
+        textMuted: isDark ? 'text-gray-500' : 'text-gray-500',
+        barBg: isDark ? 'bg-slate-700' : 'bg-gray-200',
+    };
+    const fetchAnalytics = (0, react_1.useCallback)(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const res = await fetch(`${apiBasePath}/logins?period=${period}`);
+            if (!res.ok)
+                throw new Error('Failed to fetch analytics');
+            const json = await res.json();
+            setData(json);
+        }
+        catch (err) {
+            setError(err.message);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [period, apiBasePath]);
+    // Fetch tier, feature, and revenue data
+    const fetchBusinessMetrics = (0, react_1.useCallback)(async () => {
+        if (!showBusinessMetrics)
+            return;
+        try {
+            const [tierRes, featureRes, revenueRes] = await Promise.all([
+                fetch(`${apiBasePath}/tiers`),
+                fetch(`${apiBasePath}/feature-usage`),
+                fetch(`${apiBasePath}/revenue`),
+            ]);
+            if (tierRes.ok) {
+                const data = await tierRes.json();
+                setTierData(data);
+            }
+            if (featureRes.ok) {
+                const data = await featureRes.json();
+                setFeatureData(data);
+            }
+            if (revenueRes.ok) {
+                const data = await revenueRes.json();
+                setRevenueData(data);
+            }
+        }
+        catch (err) {
+            console.error('Failed to fetch business metrics:', err);
+        }
+    }, [apiBasePath, showBusinessMetrics]);
+    (0, react_1.useEffect)(() => {
+        fetchAnalytics();
+        fetchBusinessMetrics();
+    }, [fetchAnalytics, fetchBusinessMetrics]);
+    const formatDate = (dateString) => {
+        return new Date(dateString).toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    };
+    // Simple bar chart component
+    const BarChart = ({ data, maxValue, colorClass = 'bg-blue-500' }) => ((0, jsx_runtime_1.jsx)("div", { className: "space-y-2", children: data.map((item, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `text-xs ${themeClasses.textSecondary} w-20 truncate`, children: item.label }), (0, jsx_runtime_1.jsx)("div", { className: `flex-1 h-6 ${themeClasses.barBg} rounded overflow-hidden`, children: (0, jsx_runtime_1.jsx)("div", { className: `h-full ${colorClass} transition-all duration-300`, style: { width: `${maxValue > 0 ? (item.value / maxValue) * 100 : 0}%` } }) }), (0, jsx_runtime_1.jsx)("span", { className: `text-xs ${themeClasses.textPrimary} w-12 text-right`, children: item.value })] }, i))) }));
+    // Time series line chart (simplified as bar chart)
+    const TimeSeriesChart = ({ series }) => {
+        const maxCount = Math.max(...series.map(s => s.count), 1);
+        return ((0, jsx_runtime_1.jsx)("div", { className: "h-48 flex items-end gap-1", children: series.map((item, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex flex-col items-center group relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full bg-blue-500 rounded-t transition-all duration-300 hover:bg-blue-400", style: { height: `${(item.count / maxCount) * 100}%`, minHeight: item.count > 0 ? '4px' : '0' } }), (0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-full mb-2 hidden group-hover:block z-10", children: (0, jsx_runtime_1.jsxs)("div", { className: `${isDark ? 'bg-slate-900' : 'bg-gray-800'} text-white text-xs px-2 py-1 rounded shadow-lg whitespace-nowrap`, children: [item.label, ": ", item.count] }) })] }, i))) }));
+    };
+    if (loading && !data) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center py-12", children: (0, jsx_runtime_1.jsxs)("svg", { className: "animate-spin h-8 w-8 text-blue-400", viewBox: "0 0 24 24", fill: "none", children: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })] }) }));
+    }
+    if (error) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: `${isDark ? 'bg-red-900/30 border-red-700' : 'bg-red-50 border-red-300'} border rounded-lg p-4 ${isDark ? 'text-red-300' : 'text-red-700'}`, children: [error, (0, jsx_runtime_1.jsx)("button", { onClick: fetchAnalytics, className: "ml-4 underline", children: "Retry" })] }));
+    }
+    if (!data)
+        return null;
+    const deviceData = Object.entries(data.byDevice)
+        .map(([label, value]) => ({ label: label.charAt(0).toUpperCase() + label.slice(1), value }))
+        .sort((a, b) => b.value - a.value);
+    const browserData = Object.entries(data.byBrowser)
+        .map(([label, value]) => ({ label, value }))
+        .sort((a, b) => b.value - a.value)
+        .slice(0, 5);
+    const osData = Object.entries(data.byOS)
+        .map(([label, value]) => ({ label, value }))
+        .sort((a, b) => b.value - a.value)
+        .slice(0, 5);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex gap-2", children: ['today', 'week', 'month', 'year'].map((p) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => setPeriod(p), className: `px-4 py-2 rounded-lg text-sm font-medium transition-colors ${period === p
+                                ? 'bg-blue-600 text-white'
+                                : isDark ? 'bg-slate-700 text-gray-300 hover:bg-slate-600' : 'bg-gray-200 text-gray-700 hover:bg-gray-300'}`, children: p === 'today' ? 'Today' : p === 'week' ? 'This Week' : p === 'month' ? 'This Month' : 'This Year' }, p))) }), (0, jsx_runtime_1.jsx)("button", { onClick: fetchAnalytics, disabled: loading, className: `p-2 ${themeClasses.textSecondary} hover:${themeClasses.textPrimary} transition-colors disabled:opacity-50`, title: "Refresh", children: (0, jsx_runtime_1.jsx)("svg", { className: `w-5 h-5 ${loading ? 'animate-spin' : ''}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-lg p-4`, children: [(0, jsx_runtime_1.jsx)("p", { className: themeClasses.textSecondary + ' text-sm', children: "Total Logins" }), (0, jsx_runtime_1.jsx)("p", { className: `text-3xl font-bold ${themeClasses.textPrimary}`, children: data.summary.totalLogins.toLocaleString() })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-lg p-4`, children: [(0, jsx_runtime_1.jsx)("p", { className: themeClasses.textSecondary + ' text-sm', children: "Unique Users" }), (0, jsx_runtime_1.jsx)("p", { className: "text-3xl font-bold text-blue-400", children: data.summary.uniqueUsers.toLocaleString() })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-lg p-4`, children: [(0, jsx_runtime_1.jsx)("p", { className: themeClasses.textSecondary + ' text-sm', children: "New Users" }), (0, jsx_runtime_1.jsx)("p", { className: "text-3xl font-bold text-green-400", children: data.summary.newUsers.toLocaleString() })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-lg p-4`, children: [(0, jsx_runtime_1.jsx)("p", { className: themeClasses.textSecondary + ' text-sm', children: "Peak Hour" }), (0, jsx_runtime_1.jsx)("p", { className: "text-3xl font-bold text-purple-400", children: data.summary.peakHour })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-lg p-4`, children: [(0, jsx_runtime_1.jsx)("p", { className: themeClasses.textSecondary + ' text-sm', children: "Avg/Day" }), (0, jsx_runtime_1.jsx)("p", { className: "text-3xl font-bold text-orange-400", children: data.summary.avgLoginsPerDay.toLocaleString() })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-lg p-6`, children: [(0, jsx_runtime_1.jsx)("h3", { className: `text-lg font-semibold ${themeClasses.textPrimary} mb-4`, children: "Logins Over Time" }), (0, jsx_runtime_1.jsx)(TimeSeriesChart, { series: data.timeSeries }), (0, jsx_runtime_1.jsxs)("div", { className: `flex justify-between mt-2 text-xs ${themeClasses.textMuted}`, children: [(0, jsx_runtime_1.jsx)("span", { children: data.timeSeries[0]?.label }), (0, jsx_runtime_1.jsx)("span", { children: data.timeSeries[data.timeSeries.length - 1]?.label })] })] }), geoMapComponent && ((0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-lg p-6`, children: [(0, jsx_runtime_1.jsx)("h3", { className: `text-lg font-semibold ${themeClasses.textPrimary} mb-4`, children: "Geographic Distribution" }), geoMapComponent] })), (0, jsx_runtime_1.jsxs)("div", { className: "grid md:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-lg p-6`, children: [(0, jsx_runtime_1.jsx)("h3", { className: `text-lg font-semibold ${themeClasses.textPrimary} mb-4`, children: "Top Countries" }), data.byCountry.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: data.byCountry.slice(0, 8).map((country, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xl", children: country.flag }), (0, jsx_runtime_1.jsx)("span", { className: `${themeClasses.textPrimary} flex-1`, children: country.country }), (0, jsx_runtime_1.jsx)("div", { className: `w-24 h-4 ${themeClasses.barBg} rounded overflow-hidden`, children: (0, jsx_runtime_1.jsx)("div", { className: "h-full bg-green-500", style: { width: `${country.percentage}%` } }) }), (0, jsx_runtime_1.jsxs)("span", { className: `${themeClasses.textSecondary} text-sm w-16 text-right`, children: [country.count, " (", country.percentage, "%)"] })] }, i))) })) : ((0, jsx_runtime_1.jsx)("p", { className: `${themeClasses.textMuted} text-center py-4`, children: "No data" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-lg p-6`, children: [(0, jsx_runtime_1.jsx)("h3", { className: `text-lg font-semibold ${themeClasses.textPrimary} mb-4`, children: "Device Types" }), deviceData.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: deviceData.map((item, i) => {
+                                    const total = deviceData.reduce((sum, d) => sum + d.value, 0);
+                                    const percentage = total > 0 ? Math.round((item.value / total) * 100) : 0;
+                                    const icon = item.label.toLowerCase() === 'mobile' ? '📱' :
+                                        item.label.toLowerCase() === 'tablet' ? '📱' : '💻';
+                                    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xl", children: icon }), (0, jsx_runtime_1.jsx)("span", { className: `${themeClasses.textPrimary} w-20`, children: item.label }), (0, jsx_runtime_1.jsx)("div", { className: `flex-1 h-6 ${themeClasses.barBg} rounded overflow-hidden`, children: (0, jsx_runtime_1.jsx)("div", { className: "h-full bg-purple-500", style: { width: `${percentage}%` } }) }), (0, jsx_runtime_1.jsxs)("span", { className: `${themeClasses.textSecondary} text-sm w-20 text-right`, children: [item.value, " (", percentage, "%)"] })] }, i));
+                                }) })) : ((0, jsx_runtime_1.jsx)("p", { className: `${themeClasses.textMuted} text-center py-4`, children: "No data" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-lg p-6`, children: [(0, jsx_runtime_1.jsx)("h3", { className: `text-lg font-semibold ${themeClasses.textPrimary} mb-4`, children: "Browsers" }), (0, jsx_runtime_1.jsx)(BarChart, { data: browserData, maxValue: Math.max(...browserData.map(d => d.value), 1), colorClass: "bg-orange-500" })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-lg p-6`, children: [(0, jsx_runtime_1.jsx)("h3", { className: `text-lg font-semibold ${themeClasses.textPrimary} mb-4`, children: "Operating Systems" }), (0, jsx_runtime_1.jsx)(BarChart, { data: osData, maxValue: Math.max(...osData.map(d => d.value), 1), colorClass: "bg-cyan-500" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-lg overflow-hidden`, children: [(0, jsx_runtime_1.jsx)("div", { className: `p-4 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'}`, children: (0, jsx_runtime_1.jsx)("h3", { className: `text-lg font-semibold ${themeClasses.textPrimary}`, children: "Top Users by Login Count" }) }), (0, jsx_runtime_1.jsx)("div", { className: "overflow-x-auto", children: (0, jsx_runtime_1.jsxs)("table", { className: "w-full text-sm", children: [(0, jsx_runtime_1.jsx)("thead", { className: isDark ? 'bg-slate-700/50' : 'bg-gray-50', children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { className: `px-4 py-3 text-left ${themeClasses.textSecondary} font-medium`, children: "#" }), (0, jsx_runtime_1.jsx)("th", { className: `px-4 py-3 text-left ${themeClasses.textSecondary} font-medium`, children: "User" }), (0, jsx_runtime_1.jsx)("th", { className: `px-4 py-3 text-left ${themeClasses.textSecondary} font-medium`, children: "Logins" }), (0, jsx_runtime_1.jsx)("th", { className: `px-4 py-3 text-left ${themeClasses.textSecondary} font-medium`, children: "Last Login" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { className: `divide-y ${isDark ? 'divide-slate-700' : 'divide-gray-200'}`, children: data.topUsers.length > 0 ? (data.topUsers.map((user, i) => ((0, jsx_runtime_1.jsxs)("tr", { className: isDark ? 'hover:bg-slate-700/50' : 'hover:bg-gray-50', children: [(0, jsx_runtime_1.jsx)("td", { className: `px-4 py-3 ${themeClasses.textMuted}`, children: i + 1 }), (0, jsx_runtime_1.jsx)("td", { className: "px-4 py-3", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: `${themeClasses.textPrimary} font-medium`, children: user.name }), (0, jsx_runtime_1.jsx)("p", { className: `${themeClasses.textSecondary} text-xs`, children: user.email })] }) }), (0, jsx_runtime_1.jsx)("td", { className: "px-4 py-3", children: (0, jsx_runtime_1.jsx)("span", { className: "px-2 py-1 bg-blue-600/20 text-blue-400 rounded text-xs font-medium", children: user.count }) }), (0, jsx_runtime_1.jsx)("td", { className: `px-4 py-3 ${themeClasses.textSecondary}`, children: formatDate(user.lastLogin) })] }, i)))) : ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: 4, className: `px-4 py-8 text-center ${themeClasses.textMuted}`, children: "No login data for this period" }) })) })] }) })] }), showBusinessMetrics && ((0, jsx_runtime_1.jsxs)("div", { className: `border-t ${isDark ? 'border-slate-700' : 'border-gray-200'} pt-6 mt-6`, children: [(0, jsx_runtime_1.jsx)("h2", { className: `text-xl font-bold ${themeClasses.textPrimary} mb-6`, children: "Business Metrics" }), revenueData && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 mb-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-lg p-4`, children: [(0, jsx_runtime_1.jsx)("p", { className: themeClasses.textSecondary + ' text-sm', children: "Monthly Revenue (MRR)" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-3xl font-bold text-green-400", children: ["$", revenueData.mrr.toLocaleString()] })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-lg p-4`, children: [(0, jsx_runtime_1.jsx)("p", { className: themeClasses.textSecondary + ' text-sm', children: "Annual Revenue (ARR)" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-3xl font-bold text-green-400", children: ["$", revenueData.arr.toLocaleString()] })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-lg p-4`, children: [(0, jsx_runtime_1.jsx)("p", { className: themeClasses.textSecondary + ' text-sm', children: "Paid Subscribers" }), (0, jsx_runtime_1.jsx)("p", { className: "text-3xl font-bold text-blue-400", children: revenueData.paidSubscribers.toLocaleString() })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-lg p-4`, children: [(0, jsx_runtime_1.jsx)("p", { className: themeClasses.textSecondary + ' text-sm', children: "Conversion Rate" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-3xl font-bold text-purple-400", children: [revenueData.conversionRate, "%"] })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "grid md:grid-cols-2 gap-6", children: [tierData && ((0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-lg p-6`, children: [(0, jsx_runtime_1.jsx)("h3", { className: `text-lg font-semibold ${themeClasses.textPrimary} mb-4`, children: "Tier Distribution" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative w-40 h-40", children: [(0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 100 100", className: "transform -rotate-90", children: (() => {
+                                                            const colors = {
+                                                                free: '#64748b',
+                                                                premium: '#3b82f6',
+                                                                ultimate: '#f59e0b',
+                                                                enterprise: '#8b5cf6',
+                                                            };
+                                                            let offset = 0;
+                                                            return tierData.distribution.map((tier) => {
+                                                                const strokeDasharray = `${tier.percentage} ${100 - tier.percentage}`;
+                                                                const strokeDashoffset = -offset;
+                                                                offset += tier.percentage;
+                                                                return ((0, jsx_runtime_1.jsx)("circle", { cx: "50", cy: "50", r: "40", fill: "transparent", stroke: colors[tier.tier] || '#64748b', strokeWidth: "20", strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset }, tier.tier));
+                                                            });
+                                                        })() }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("p", { className: `text-2xl font-bold ${themeClasses.textPrimary}`, children: tierData.total }), (0, jsx_runtime_1.jsx)("p", { className: `text-xs ${themeClasses.textSecondary}`, children: "Total" })] }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 space-y-2", children: tierData.distribution.map((tier) => {
+                                                    const colors = {
+                                                        free: 'bg-slate-500',
+                                                        premium: 'bg-blue-500',
+                                                        ultimate: 'bg-amber-500',
+                                                        enterprise: 'bg-purple-500',
+                                                    };
+                                                    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: `w-3 h-3 rounded-full ${colors[tier.tier] || 'bg-slate-500'}` }), (0, jsx_runtime_1.jsx)("span", { className: `${themeClasses.textPrimary} capitalize`, children: tier.tier })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsx)("span", { className: `${themeClasses.textPrimary} font-medium`, children: tier.count }), (0, jsx_runtime_1.jsxs)("span", { className: `${themeClasses.textMuted} text-sm ml-2`, children: ["(", tier.percentage, "%)"] })] })] }, tier.tier));
+                                                }) })] })] })), featureData && ((0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-lg p-6`, children: [(0, jsx_runtime_1.jsx)("h3", { className: `text-lg font-semibold ${themeClasses.textPrimary} mb-4`, children: "Feature Usage" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: featureData.features.map((feature) => {
+                                            const maxUses = Math.max(...featureData.features.map(f => f.uses), 1);
+                                            const percentage = (feature.uses / maxUses) * 100;
+                                            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mb-1", children: [(0, jsx_runtime_1.jsx)("span", { className: `${themeClasses.textPrimary} text-sm`, children: feature.name }), (0, jsx_runtime_1.jsxs)("span", { className: `${themeClasses.textSecondary} text-xs`, children: [feature.uses.toLocaleString(), " uses"] })] }), (0, jsx_runtime_1.jsx)("div", { className: `h-4 ${themeClasses.barBg} rounded overflow-hidden`, children: (0, jsx_runtime_1.jsx)("div", { className: "h-full bg-gradient-to-r from-indigo-500 to-purple-500 transition-all duration-300", style: { width: `${percentage}%` } }) })] }, feature.name));
+                                        }) })] }))] }), revenueData && revenueData.revenueByTier.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: `mt-6 ${themeClasses.cardBg} border rounded-lg overflow-hidden`, children: [(0, jsx_runtime_1.jsx)("div", { className: `p-4 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'}`, children: (0, jsx_runtime_1.jsx)("h3", { className: `text-lg font-semibold ${themeClasses.textPrimary}`, children: "Revenue by Tier" }) }), (0, jsx_runtime_1.jsx)("div", { className: "overflow-x-auto", children: (0, jsx_runtime_1.jsxs)("table", { className: "w-full text-sm", children: [(0, jsx_runtime_1.jsx)("thead", { className: isDark ? 'bg-slate-700/50' : 'bg-gray-50', children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { className: `px-4 py-3 text-left ${themeClasses.textSecondary} font-medium`, children: "Tier" }), (0, jsx_runtime_1.jsx)("th", { className: `px-4 py-3 text-left ${themeClasses.textSecondary} font-medium`, children: "Subscribers" }), (0, jsx_runtime_1.jsx)("th", { className: `px-4 py-3 text-left ${themeClasses.textSecondary} font-medium`, children: "Price/Mo" }), (0, jsx_runtime_1.jsx)("th", { className: `px-4 py-3 text-left ${themeClasses.textSecondary} font-medium`, children: "MRR" }), (0, jsx_runtime_1.jsx)("th", { className: `px-4 py-3 text-left ${themeClasses.textSecondary} font-medium`, children: "% of Revenue" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { className: `divide-y ${isDark ? 'divide-slate-700' : 'divide-gray-200'}`, children: revenueData.revenueByTier.map((tier) => {
+                                                const totalMrr = revenueData.revenueByTier.reduce((sum, t) => sum + t.mrr, 0);
+                                                const percentage = totalMrr > 0 ? Math.round((tier.mrr / totalMrr) * 100) : 0;
+                                                const tierColors = {
+                                                    premium: 'text-blue-400',
+                                                    ultimate: 'text-amber-400',
+                                                    enterprise: 'text-purple-400',
+                                                };
+                                                return ((0, jsx_runtime_1.jsxs)("tr", { className: isDark ? 'hover:bg-slate-700/50' : 'hover:bg-gray-50', children: [(0, jsx_runtime_1.jsx)("td", { className: `px-4 py-3 font-medium capitalize ${tierColors[tier.tier] || themeClasses.textPrimary}`, children: tier.tier }), (0, jsx_runtime_1.jsx)("td", { className: `px-4 py-3 ${themeClasses.textPrimary}`, children: tier.subscribers.toLocaleString() }), (0, jsx_runtime_1.jsxs)("td", { className: `px-4 py-3 ${themeClasses.textSecondary}`, children: ["$", tier.pricePerMonth] }), (0, jsx_runtime_1.jsxs)("td", { className: "px-4 py-3 text-green-400 font-medium", children: ["$", tier.mrr.toLocaleString()] }), (0, jsx_runtime_1.jsx)("td", { className: "px-4 py-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: `w-16 h-2 ${themeClasses.barBg} rounded overflow-hidden`, children: (0, jsx_runtime_1.jsx)("div", { className: "h-full bg-green-500", style: { width: `${percentage}%` } }) }), (0, jsx_runtime_1.jsxs)("span", { className: `${themeClasses.textSecondary} text-xs`, children: [percentage, "%"] })] }) })] }, tier.tier));
+                                            }) })] }) })] })), revenueData && revenueData.trend.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: `mt-6 ${themeClasses.cardBg} border rounded-lg p-6`, children: [(0, jsx_runtime_1.jsx)("h3", { className: `text-lg font-semibold ${themeClasses.textPrimary} mb-4`, children: "MRR Trend (6 Months)" }), (0, jsx_runtime_1.jsx)("div", { className: "h-48 flex items-end gap-2", children: revenueData.trend.map((point, i) => {
+                                    const maxMrr = Math.max(...revenueData.trend.map(p => p.mrr), 1);
+                                    const height = (point.mrr / maxMrr) * 100;
+                                    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex flex-col items-center group", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative w-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full bg-gradient-to-t from-green-600 to-green-400 rounded-t transition-all duration-300 hover:from-green-500 hover:to-green-300", style: { height: `${height * 1.8}px`, minHeight: '4px' } }), (0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-full mb-2 left-1/2 -translate-x-1/2 hidden group-hover:block z-10", children: (0, jsx_runtime_1.jsxs)("div", { className: `${isDark ? 'bg-slate-900' : 'bg-gray-800'} text-white text-xs px-2 py-1 rounded shadow-lg whitespace-nowrap`, children: ["$", point.mrr.toLocaleString()] }) })] }), (0, jsx_runtime_1.jsx)("span", { className: `text-xs ${themeClasses.textMuted} mt-2`, children: point.month })] }, i));
+                                }) })] }))] }))] }));
+}
+exports.default = AnalyticsTab;

package/dist/components/admin/DataBrowserTab.d.ts

@@ -0,0 +1,19 @@
+export interface CollectionInfo {
+    name: string;
+    tableCount: number;
+}
+export interface TableInfo {
+    name: string;
+    count: number;
+}
+export interface DataBrowserTabProps {
+    isDark?: boolean;
+    /** Base API path for admin vibe data (default: /api/admin/vibe) */
+    apiBasePath?: string;
+    /** Collection to focus on (optional - shows all if not specified) */
+    focusCollection?: string;
+    /** Title for the data browser */
+    title?: string;
+}
+export declare function DataBrowserTab({ isDark, apiBasePath, focusCollection, title, }: DataBrowserTabProps): import("react/jsx-runtime").JSX.Element;
+export default DataBrowserTab;

package/dist/components/admin/DataBrowserTab.js

@@ -0,0 +1,252 @@
+"use strict";
+'use client';
+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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataBrowserTab = DataBrowserTab;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+// -----------------------------------------------------------------------------
+// COMPONENT
+// -----------------------------------------------------------------------------
+function DataBrowserTab({ isDark = true, apiBasePath = '/api/admin/vibe', focusCollection, title = 'Data Browser', }) {
+    // Collections state
+    const [collections, setCollections] = (0, react_1.useState)([]);
+    const [loadingCollections, setLoadingCollections] = (0, react_1.useState)(true);
+    const [expandedCollections, setExpandedCollections] = (0, react_1.useState)(new Set());
+    // Selection state
+    const [selectedCollection, setSelectedCollection] = (0, react_1.useState)(focusCollection || null);
+    const [selectedTable, setSelectedTable] = (0, react_1.useState)(null);
+    // Table data state
+    const [tableData, setTableData] = (0, react_1.useState)(null);
+    const [loadingData, setLoadingData] = (0, react_1.useState)(false);
+    const [expandedRow, setExpandedRow] = (0, react_1.useState)(null);
+    const [searchTerm, setSearchTerm] = (0, react_1.useState)('');
+    // Messages
+    const [error, setError] = (0, react_1.useState)(null);
+    const [success, setSuccess] = (0, react_1.useState)(null);
+    // Track rows being deleted
+    const [deletingRows, setDeletingRows] = (0, react_1.useState)(new Set());
+    const themeClasses = {
+        cardBg: isDark ? 'bg-slate-800 border-slate-700' : 'bg-white border-gray-200 shadow-sm',
+        inputBg: isDark ? 'bg-slate-900 border-slate-600 text-white placeholder-gray-500' : 'bg-white border-gray-300 text-gray-900 placeholder-gray-400',
+        textPrimary: isDark ? 'text-white' : 'text-gray-900',
+        textSecondary: isDark ? 'text-gray-400' : 'text-gray-600',
+        textMuted: isDark ? 'text-gray-500' : 'text-gray-500',
+        hoverBg: isDark ? 'hover:bg-slate-700' : 'hover:bg-gray-50',
+        tableBg: isDark ? 'bg-slate-900' : 'bg-gray-50',
+        tableHeader: isDark ? 'bg-slate-800 text-gray-300' : 'bg-gray-100 text-gray-700',
+        tableRow: isDark ? 'border-slate-700 hover:bg-slate-800' : 'border-gray-200 hover:bg-gray-50',
+    };
+    // Fetch collections
+    const fetchCollections = (0, react_1.useCallback)(async () => {
+        setLoadingCollections(true);
+        setError(null);
+        try {
+            const response = await fetch(`${apiBasePath}/collections`);
+            if (!response.ok)
+                throw new Error('Failed to fetch collections');
+            const data = await response.json();
+            const rawCollections = Array.isArray(data) ? data
+                : Array.isArray(data.collections) ? data.collections
+                    : Array.isArray(data.data) ? data.data
+                        : [];
+            const collectionList = rawCollections.map((c) => ({
+                name: typeof c === 'string' ? c : c.name,
+                tableCount: typeof c === 'object' ? (c.table_count || c.tableCount || 0) : 0,
+                tables: [],
+                loadingTables: false,
+            }));
+            // If focusCollection is set, filter to just that collection
+            const filteredList = focusCollection
+                ? collectionList.filter(c => c.name === focusCollection)
+                : collectionList;
+            setCollections(filteredList);
+            // Auto-expand first collection
+            if (filteredList.length > 0) {
+                const firstName = filteredList[0].name;
+                setExpandedCollections(new Set([firstName]));
+                fetchTablesForCollection(firstName);
+            }
+        }
+        catch (err) {
+            console.error('Failed to fetch collections:', err);
+            setError('Failed to fetch collections');
+            setCollections([]);
+        }
+        finally {
+            setLoadingCollections(false);
+        }
+    }, [apiBasePath, focusCollection]);
+    // Fetch tables for a collection
+    const fetchTablesForCollection = (0, react_1.useCallback)(async (collectionName) => {
+        setCollections(prev => prev.map(c => c.name === collectionName ? { ...c, loadingTables: true } : c));
+        try {
+            const response = await fetch(`${apiBasePath}/collections/${collectionName}/tables`);
+            if (!response.ok)
+                throw new Error('Failed to fetch tables');
+            const data = await response.json();
+            const rawTables = Array.isArray(data) ? data
+                : Array.isArray(data.tables) ? data.tables
+                    : Array.isArray(data.data) ? data.data
+                        : [];
+            const tableList = rawTables.map((t) => ({
+                name: typeof t === 'string' ? t : t.name,
+                count: typeof t === 'object' ? (t.document_count || t.count || 0) : 0,
+            }));
+            setCollections(prev => prev.map(c => c.name === collectionName ? { ...c, tables: tableList, loadingTables: false } : c));
+        }
+        catch (err) {
+            console.error(`Failed to fetch tables for ${collectionName}:`, err);
+            setCollections(prev => prev.map(c => c.name === collectionName ? { ...c, loadingTables: false } : c));
+        }
+    }, [apiBasePath]);
+    // Fetch table data
+    const fetchTableData = (0, react_1.useCallback)(async (collection, table) => {
+        setLoadingData(true);
+        setError(null);
+        setExpandedRow(null);
+        try {
+            const response = await fetch(`${apiBasePath}/data/${collection}/${table}?limit=50`);
+            if (!response.ok)
+                throw new Error('Failed to fetch data');
+            const data = await response.json();
+            const records = Array.isArray(data) ? data
+                : Array.isArray(data.data) ? data.data
+                    : Array.isArray(data.documents) ? data.documents
+                        : [];
+            setTableData({
+                data: records,
+                meta: data.meta || { total: records.length, limit: 50, offset: 0 },
+            });
+        }
+        catch (err) {
+            console.error(`Failed to fetch data for ${collection}/${table}:`, err);
+            setError(`Failed to fetch data: ${err}`);
+            setTableData(null);
+        }
+        finally {
+            setLoadingData(false);
+        }
+    }, [apiBasePath]);
+    // Delete record
+    const handleDelete = (0, react_1.useCallback)(async (id) => {
+        if (!selectedCollection || !selectedTable)
+            return;
+        if (!confirm(`Delete record ${id}?`))
+            return;
+        setDeletingRows(prev => new Set(prev).add(id));
+        try {
+            const response = await fetch(`${apiBasePath}/data/${selectedCollection}/${selectedTable}/${id}`, {
+                method: 'DELETE',
+            });
+            if (!response.ok) {
+                const errData = await response.json().catch(() => ({}));
+                throw new Error(errData.error?.message || 'Delete failed');
+            }
+            setSuccess(`Record ${id} deleted`);
+            setTimeout(() => setSuccess(null), 3000);
+            // Remove from local state
+            setTableData(prev => prev ? {
+                ...prev,
+                data: prev.data.filter(row => (row.id || row.document_id) !== id),
+            } : null);
+        }
+        catch (err) {
+            setError(`Failed to delete: ${err}`);
+        }
+        finally {
+            setDeletingRows(prev => {
+                const next = new Set(prev);
+                next.delete(id);
+                return next;
+            });
+        }
+    }, [selectedCollection, selectedTable, apiBasePath]);
+    // Toggle collection expansion
+    const toggleCollection = (name) => {
+        setExpandedCollections(prev => {
+            const next = new Set(prev);
+            if (next.has(name)) {
+                next.delete(name);
+            }
+            else {
+                next.add(name);
+                // Fetch tables if not loaded
+                const coll = collections.find(c => c.name === name);
+                if (coll && coll.tables.length === 0 && !coll.loadingTables) {
+                    fetchTablesForCollection(name);
+                }
+            }
+            return next;
+        });
+    };
+    // Select table
+    const selectTable = (collection, table) => {
+        setSelectedCollection(collection);
+        setSelectedTable(table);
+        fetchTableData(collection, table);
+    };
+    // Initial load
+    (0, react_1.useEffect)(() => {
+        fetchCollections();
+    }, [fetchCollections]);
+    // Get columns from data
+    const getColumns = () => {
+        if (!tableData?.data?.length)
+            return [];
+        const firstRow = tableData.data[0];
+        return Object.keys(firstRow).filter(k => !['data', '__metadata'].includes(k));
+    };
+    // Filter data by search term
+    const filteredData = tableData?.data?.filter(row => {
+        if (!searchTerm)
+            return true;
+        const searchLower = searchTerm.toLowerCase();
+        return Object.values(row).some(val => String(val).toLowerCase().includes(searchLower));
+    }) || [];
+    const columns = getColumns();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Database, { className: `w-6 h-6 ${isDark ? 'text-indigo-400' : 'text-indigo-600'}` }), (0, jsx_runtime_1.jsx)("h2", { className: `text-xl font-semibold ${themeClasses.textPrimary}`, children: title })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: fetchCollections, disabled: loadingCollections, className: `flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm ${themeClasses.hoverBg} ${themeClasses.textSecondary}`, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { className: `w-4 h-4 ${loadingCollections ? 'animate-spin' : ''}` }), "Refresh"] })] }), error && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 p-3 bg-red-900/20 border border-red-800 rounded-lg text-red-400", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { className: "w-4 h-4" }), error] })), success && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 p-3 bg-green-900/20 border border-green-800 rounded-lg text-green-400", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle, { className: "w-4 h-4" }), success] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: `w-64 flex-shrink-0 rounded-lg border ${themeClasses.cardBg} p-3`, children: [(0, jsx_runtime_1.jsx)("h3", { className: `text-sm font-medium mb-3 ${themeClasses.textSecondary}`, children: "Collections" }), loadingCollections ? ((0, jsx_runtime_1.jsx)("div", { className: `text-sm ${themeClasses.textMuted}`, children: "Loading..." })) : collections.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: `text-sm ${themeClasses.textMuted}`, children: "No collections found" })) : ((0, jsx_runtime_1.jsx)("div", { className: "space-y-1", children: collections.map(coll => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => toggleCollection(coll.name), className: `w-full flex items-center gap-2 px-2 py-1.5 rounded text-left text-sm ${themeClasses.hoverBg} ${themeClasses.textPrimary}`, children: [expandedCollections.has(coll.name) ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "w-4 h-4" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "w-4 h-4" })), (0, jsx_runtime_1.jsx)(lucide_react_1.Database, { className: "w-4 h-4" }), (0, jsx_runtime_1.jsx)("span", { className: "truncate flex-1", children: coll.name }), coll.tableCount > 0 && ((0, jsx_runtime_1.jsx)("span", { className: `text-xs ${themeClasses.textMuted}`, children: coll.tableCount }))] }), expandedCollections.has(coll.name) && ((0, jsx_runtime_1.jsx)("div", { className: "ml-6 mt-1 space-y-0.5", children: coll.loadingTables ? ((0, jsx_runtime_1.jsx)("div", { className: `text-xs px-2 py-1 ${themeClasses.textMuted}`, children: "Loading..." })) : coll.tables.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: `text-xs px-2 py-1 ${themeClasses.textMuted}`, children: "No tables" })) : (coll.tables.map(table => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => selectTable(coll.name, table.name), className: `w-full flex items-center gap-2 px-2 py-1 rounded text-left text-sm ${selectedCollection === coll.name && selectedTable === table.name
+                                                    ? isDark ? 'bg-indigo-900/50 text-indigo-300' : 'bg-indigo-100 text-indigo-700'
+                                                    : themeClasses.hoverBg + ' ' + themeClasses.textSecondary}`, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Table2, { className: "w-3 h-3" }), (0, jsx_runtime_1.jsx)("span", { className: "truncate flex-1", children: table.name }), table.count > 0 && ((0, jsx_runtime_1.jsx)("span", { className: `text-xs ${themeClasses.textMuted}`, children: table.count }))] }, table.name)))) }))] }, coll.name))) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 min-w-0", children: !selectedTable ? ((0, jsx_runtime_1.jsxs)("div", { className: `rounded-lg border ${themeClasses.cardBg} p-8 text-center`, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Table2, { className: `w-12 h-12 mx-auto mb-4 ${themeClasses.textMuted}` }), (0, jsx_runtime_1.jsx)("p", { className: themeClasses.textSecondary, children: "Select a table to view data" })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: `rounded-lg border ${themeClasses.cardBg}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: `px-4 py-3 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'} flex items-center justify-between`, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h3", { className: `font-medium ${themeClasses.textPrimary}`, children: [selectedCollection, " / ", selectedTable] }), (0, jsx_runtime_1.jsxs)("p", { className: `text-sm ${themeClasses.textMuted}`, children: [tableData?.meta?.total || filteredData.length, " records"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: `absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${themeClasses.textMuted}` }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: `pl-9 pr-3 py-1.5 rounded-lg border text-sm ${themeClasses.inputBg}` })] }), (0, jsx_runtime_1.jsx)("button", { onClick: () => fetchTableData(selectedCollection, selectedTable), disabled: loadingData, className: `p-1.5 rounded-lg ${themeClasses.hoverBg}`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { className: `w-4 h-4 ${loadingData ? 'animate-spin' : ''} ${themeClasses.textSecondary}` }) })] })] }), loadingData ? ((0, jsx_runtime_1.jsx)("div", { className: "p-8 text-center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { className: `w-8 h-8 mx-auto animate-spin ${themeClasses.textMuted}` }) })) : filteredData.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "p-8 text-center", children: (0, jsx_runtime_1.jsx)("p", { className: themeClasses.textMuted, children: "No records found" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "overflow-x-auto", children: (0, jsx_runtime_1.jsxs)("table", { className: "w-full text-sm", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { className: themeClasses.tableHeader, children: [columns.slice(0, 6).map(col => ((0, jsx_runtime_1.jsx)("th", { className: "px-4 py-2 text-left font-medium", children: col }, col))), (0, jsx_runtime_1.jsx)("th", { className: "px-4 py-2 text-right", children: "Actions" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: filteredData.map((row, idx) => {
+                                                    const rowId = row.id || row.document_id || idx;
+                                                    const isExpanded = expandedRow === rowId;
+                                                    const isDeleting = deletingRows.has(rowId);
+                                                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)("tr", { className: `border-t ${themeClasses.tableRow} ${isDeleting ? 'opacity-50' : ''}`, children: [columns.slice(0, 6).map(col => ((0, jsx_runtime_1.jsx)("td", { className: `px-4 py-2 ${themeClasses.textPrimary}`, children: (0, jsx_runtime_1.jsx)("div", { className: "max-w-xs truncate", children: typeof row[col] === 'object'
+                                                                                ? JSON.stringify(row[col]).slice(0, 50)
+                                                                                : String(row[col] ?? '') }) }, col))), (0, jsx_runtime_1.jsx)("td", { className: "px-4 py-2 text-right", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-end gap-1", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setExpandedRow(isExpanded ? null : rowId), className: `p-1 rounded ${themeClasses.hoverBg}`, title: "View details", children: isExpanded ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { className: `w-4 h-4 ${themeClasses.textSecondary}` })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: `w-4 h-4 ${themeClasses.textSecondary}` })) }), (0, jsx_runtime_1.jsx)("button", { onClick: () => handleDelete(rowId), disabled: isDeleting, className: "p-1 rounded hover:bg-red-900/20 text-red-400", title: "Delete", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { className: "w-4 h-4" }) })] }) })] }), isExpanded && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: 7, className: `px-4 py-3 ${themeClasses.tableBg}`, children: (0, jsx_runtime_1.jsx)("pre", { className: `text-xs overflow-auto max-h-64 p-3 rounded ${isDark ? 'bg-slate-950' : 'bg-gray-100'} ${themeClasses.textSecondary}`, children: JSON.stringify(row, null, 2) }) }) }))] }, rowId));
+                                                }) })] }) }))] })) })] })] }));
+}
+exports.default = DataBrowserTab;

package/dist/components/admin/LoggingSettingsTab.d.ts

@@ -0,0 +1,73 @@
+/**
+ * =============================================================================
+ * VIBE ADMIN LOGGING SETTINGS TAB
+ * =============================================================================
+ *
+ * Admin UI for managing log levels, retention, and storage limits.
+ * Provides environment presets, per-category levels, and manual pruning.
+ *
+ * =============================================================================
+ */
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error' | 'critical';
+export interface LogLevels {
+    api: LogLevel;
+    auth: LogLevel;
+    database: LogLevel;
+    agent: LogLevel;
+    system: LogLevel;
+}
+export interface RetentionSettings {
+    debug_days: number;
+    info_days: number;
+    warn_days: number;
+    error_days: number;
+    critical_days: number;
+}
+export interface StorageLimits {
+    max_size_mb: number;
+    max_rows: number;
+}
+export interface UsageStats {
+    total_rows: number;
+    total_size_mb: number;
+    by_level?: {
+        debug?: {
+            rows: number;
+            size_mb: number;
+        };
+        info?: {
+            rows: number;
+            size_mb: number;
+        };
+        warn?: {
+            rows: number;
+            size_mb: number;
+        };
+        error?: {
+            rows: number;
+            size_mb: number;
+        };
+        critical?: {
+            rows: number;
+            size_mb: number;
+        };
+    };
+    limits: StorageLimits;
+    percent_used: number;
+    oldest_entry?: string;
+}
+export interface LoggingSettings {
+    levels: LogLevels;
+    retention: RetentionSettings;
+    limits: StorageLimits;
+    current_usage?: UsageStats;
+}
+export interface LoggingSettingsTabProps {
+    isDark?: boolean;
+    /** API base path (default: /api/admin/logging) */
+    apiBasePath?: string;
+    /** Callback when settings are saved */
+    onSave?: (settings: Partial<LoggingSettings>) => void;
+}
+export declare function LoggingSettingsTab({ isDark, apiBasePath, onSave, }: LoggingSettingsTabProps): import("react/jsx-runtime").JSX.Element;
+export default LoggingSettingsTab;