@payez/next-mvp 4.0.0 → 4.0.1

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

@@ -1,22 +0,0 @@
-/**
- * =============================================================================
- * 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

@@ -1,167 +0,0 @@
-"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

@@ -1,19 +0,0 @@
-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

@@ -1,252 +0,0 @@
-"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

@@ -1,73 +0,0 @@
-/**
- * =============================================================================
- * 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;