@payez/next-mvp 4.0.0 → 4.0.1

package/dist/components/admin/LoggingSettingsTab.js

@@ -1,339 +0,0 @@
-"use strict";
-/**
- * =============================================================================
- * VIBE ADMIN LOGGING SETTINGS TAB
- * =============================================================================
- *
- * Admin UI for managing log levels, retention, and storage limits.
- * Provides environment presets, per-category levels, and manual pruning.
- *
- * =============================================================================
- */
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoggingSettingsTab = LoggingSettingsTab;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const lucide_react_1 = require("lucide-react");
-// -----------------------------------------------------------------------------
-// CONSTANTS
-// -----------------------------------------------------------------------------
-const LOG_LEVELS = [
-    { value: 'debug', label: 'Debug', color: 'text-gray-400' },
-    { value: 'info', label: 'Info', color: 'text-blue-400' },
-    { value: 'warn', label: 'Warning', color: 'text-amber-400' },
-    { value: 'error', label: 'Error', color: 'text-red-400' },
-    { value: 'critical', label: 'Critical', color: 'text-red-500' },
-];
-const PRESETS = [
-    {
-        id: 'development',
-        label: 'Development',
-        description: 'Verbose logging for debugging',
-        levels: { api: 'debug', auth: 'debug', database: 'info', agent: 'debug', system: 'info' },
-    },
-    {
-        id: 'production',
-        label: 'Production',
-        description: 'Minimal logging for performance',
-        levels: { api: 'warn', auth: 'info', database: 'error', agent: 'info', system: 'warn' },
-    },
-    {
-        id: 'troubleshooting',
-        label: 'Troubleshooting',
-        description: 'Maximum verbosity for issue diagnosis',
-        levels: { api: 'debug', auth: 'debug', database: 'debug', agent: 'debug', system: 'debug' },
-    },
-];
-const CATEGORIES = [
-    { id: 'api', label: 'API', description: 'Request/response logging' },
-    { id: 'auth', label: 'Authentication', description: 'Login, logout, token events' },
-    { id: 'database', label: 'Database', description: 'Query and connection logging' },
-    { id: 'agent', label: 'Agent', description: 'AI agent execution logs' },
-    { id: 'system', label: 'System', description: 'Infrastructure and health events' },
-];
-const RETENTION_DEFAULTS = {
-    debug_days: 7,
-    info_days: 30,
-    warn_days: 60,
-    error_days: 90,
-    critical_days: 180,
-};
-const PRUNE_OPTIONS = [
-    { value: 'debug_all', label: 'Clear all Debug logs' },
-    { value: 'older_7', label: 'Clear logs older than 7 days' },
-    { value: 'older_30', label: 'Clear logs older than 30 days' },
-    { value: 'all_keep_100', label: 'Clear all (keep last 100)' },
-];
-// -----------------------------------------------------------------------------
-// COMPONENT
-// -----------------------------------------------------------------------------
-function LoggingSettingsTab({ isDark = true, apiBasePath = '/api/admin/logging', onSave, }) {
-    const [settings, setSettings] = (0, react_1.useState)(null);
-    const [usage, setUsage] = (0, react_1.useState)(null);
-    const [loading, setLoading] = (0, react_1.useState)(true);
-    const [saving, setSaving] = (0, react_1.useState)(false);
-    const [pruning, setPruning] = (0, react_1.useState)(false);
-    const [error, setError] = (0, react_1.useState)(null);
-    const [successMessage, setSuccessMessage] = (0, react_1.useState)(null);
-    const [hasChanges, setHasChanges] = (0, react_1.useState)(false);
-    // Edited state (local changes before save)
-    const [editedLevels, setEditedLevels] = (0, react_1.useState)(null);
-    const [editedRetention, setEditedRetention] = (0, react_1.useState)(null);
-    const [editedLimits, setEditedLimits] = (0, react_1.useState)(null);
-    const themeClasses = {
-        bg: isDark ? 'bg-slate-950' : 'bg-gray-50',
-        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',
-        inputBg: isDark ? 'bg-slate-900 border-slate-600' : 'bg-white border-gray-300',
-        hoverBg: isDark ? 'hover:bg-slate-700' : 'hover:bg-gray-100',
-    };
-    // Fetch settings
-    const fetchSettings = (0, react_1.useCallback)(async () => {
-        setLoading(true);
-        setError(null);
-        try {
-            const res = await fetch(`${apiBasePath}/settings`);
-            if (res.ok) {
-                const data = await res.json();
-                setSettings(data);
-                setEditedLevels(data.levels);
-                setEditedRetention(data.retention);
-                setEditedLimits(data.limits);
-                if (data.current_usage) {
-                    setUsage(data.current_usage);
-                }
-            }
-            else if (res.status === 404) {
-                // Endpoint not ready - use defaults
-                const defaults = {
-                    levels: PRESETS[1].levels, // Production defaults
-                    retention: RETENTION_DEFAULTS,
-                    limits: { max_size_mb: 10, max_rows: 20000 },
-                };
-                setSettings(defaults);
-                setEditedLevels(defaults.levels);
-                setEditedRetention(defaults.retention);
-                setEditedLimits(defaults.limits);
-            }
-            else {
-                throw new Error('Failed to fetch settings');
-            }
-        }
-        catch (err) {
-            setError(err.message);
-        }
-        finally {
-            setLoading(false);
-        }
-    }, [apiBasePath]);
-    // Fetch usage separately (can be more frequent)
-    const fetchUsage = (0, react_1.useCallback)(async () => {
-        try {
-            const res = await fetch(`${apiBasePath}/usage`);
-            if (res.ok) {
-                const data = await res.json();
-                setUsage(data);
-            }
-        }
-        catch (err) {
-            console.error('Failed to fetch usage:', err);
-        }
-    }, [apiBasePath]);
-    (0, react_1.useEffect)(() => {
-        fetchSettings();
-    }, [fetchSettings]);
-    // Check for changes
-    (0, react_1.useEffect)(() => {
-        if (!settings || !editedLevels || !editedRetention || !editedLimits) {
-            setHasChanges(false);
-            return;
-        }
-        const levelsChanged = JSON.stringify(settings.levels) !== JSON.stringify(editedLevels);
-        const retentionChanged = JSON.stringify(settings.retention) !== JSON.stringify(editedRetention);
-        const limitsChanged = JSON.stringify(settings.limits) !== JSON.stringify(editedLimits);
-        setHasChanges(levelsChanged || retentionChanged || limitsChanged);
-    }, [settings, editedLevels, editedRetention, editedLimits]);
-    // Apply preset
-    const applyPreset = async (presetId) => {
-        const preset = PRESETS.find(p => p.id === presetId);
-        if (!preset)
-            return;
-        setEditedLevels(preset.levels);
-        try {
-            const res = await fetch(`${apiBasePath}/preset`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ preset: presetId }),
-            });
-            if (res.ok) {
-                setSuccessMessage(`Applied ${preset.label} preset`);
-                setTimeout(() => setSuccessMessage(null), 3000);
-                fetchSettings();
-            }
-        }
-        catch (err) {
-            // Preset applied locally even if API fails
-            console.error('Failed to apply preset:', err);
-        }
-    };
-    // Save settings
-    const saveSettings = async () => {
-        if (!hasChanges || !editedLevels || !editedRetention || !editedLimits)
-            return;
-        setSaving(true);
-        setError(null);
-        try {
-            const payload = {
-                levels: editedLevels,
-                retention: editedRetention,
-                limits: editedLimits,
-            };
-            const res = await fetch(`${apiBasePath}/settings`, {
-                method: 'PUT',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(payload),
-            });
-            if (res.ok) {
-                setSuccessMessage('Settings saved successfully');
-                setTimeout(() => setSuccessMessage(null), 3000);
-                onSave?.(payload);
-                fetchSettings();
-            }
-            else if (res.status === 404) {
-                // Endpoint not ready - simulate success
-                setSettings({
-                    levels: editedLevels,
-                    retention: editedRetention,
-                    limits: editedLimits,
-                });
-                setSuccessMessage('Settings saved (demo mode)');
-                setTimeout(() => setSuccessMessage(null), 3000);
-            }
-            else {
-                throw new Error('Failed to save settings');
-            }
-        }
-        catch (err) {
-            setError(err.message);
-        }
-        finally {
-            setSaving(false);
-        }
-    };
-    // Manual prune
-    const handlePrune = async (option) => {
-        setPruning(true);
-        setError(null);
-        try {
-            let body = {};
-            switch (option) {
-                case 'debug_all':
-                    body = { level: 'debug' };
-                    break;
-                case 'older_7':
-                    body = { older_than_days: 7 };
-                    break;
-                case 'older_30':
-                    body = { older_than_days: 30 };
-                    break;
-                case 'all_keep_100':
-                    body = { older_than_days: 0 }; // Server interprets as "all"
-                    break;
-            }
-            const res = await fetch(`${apiBasePath}/prune`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(body),
-            });
-            if (res.ok) {
-                const data = await res.json();
-                setSuccessMessage(`Pruned ${data.deleted_rows?.toLocaleString() || 'some'} rows`);
-                setTimeout(() => setSuccessMessage(null), 3000);
-                fetchUsage();
-            }
-            else if (res.status === 404) {
-                setSuccessMessage('Prune completed (demo mode)');
-                setTimeout(() => setSuccessMessage(null), 3000);
-            }
-            else {
-                throw new Error('Failed to prune logs');
-            }
-        }
-        catch (err) {
-            setError(err.message);
-        }
-        finally {
-            setPruning(false);
-        }
-    };
-    // Get active preset
-    const getActivePreset = () => {
-        if (!editedLevels)
-            return null;
-        return PRESETS.find(p => JSON.stringify(p.levels) === JSON.stringify(editedLevels))?.id || null;
-    };
-    if (loading) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center py-12", children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { className: "w-8 h-8 animate-spin text-indigo-500" }) }));
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [error && ((0, jsx_runtime_1.jsxs)("div", { className: `flex items-center gap-3 p-4 rounded-lg ${isDark ? 'bg-red-900/30 border-red-700' : 'bg-red-50 border-red-300'} border`, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { className: isDark ? 'text-red-400' : 'text-red-500', size: 20 }), (0, jsx_runtime_1.jsx)("span", { className: isDark ? 'text-red-300' : 'text-red-700', children: error })] })), successMessage && ((0, jsx_runtime_1.jsxs)("div", { className: `flex items-center gap-3 p-4 rounded-lg ${isDark ? 'bg-green-900/30 border-green-700' : 'bg-green-50 border-green-300'} border`, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: isDark ? 'text-green-400' : 'text-green-500', size: 20 }), (0, jsx_runtime_1.jsx)("span", { className: isDark ? 'text-green-300' : 'text-green-700', children: successMessage })] })), (0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-xl overflow-hidden`, children: [(0, jsx_runtime_1.jsxs)("div", { className: `px-5 py-4 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Zap, { className: isDark ? 'text-amber-400' : 'text-amber-500', size: 20 }), (0, jsx_runtime_1.jsx)("h3", { className: `font-semibold ${themeClasses.textPrimary}`, children: "Quick Setup" })] }), (0, jsx_runtime_1.jsx)("p", { className: `text-sm ${themeClasses.textMuted} mt-1`, children: "Choose a preset to quickly configure log levels" })] }), (0, jsx_runtime_1.jsx)("div", { className: "p-5", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-3", children: PRESETS.map((preset) => {
-                                const isActive = getActivePreset() === preset.id;
-                                return ((0, jsx_runtime_1.jsx)("button", { onClick: () => applyPreset(preset.id), className: `
-                    px-4 py-2.5 rounded-lg font-medium text-sm transition-all
-                    ${isActive
-                                        ? 'bg-indigo-600 text-white ring-2 ring-indigo-500 ring-offset-2 ' + (isDark ? 'ring-offset-slate-800' : 'ring-offset-white')
-                                        : (isDark ? 'bg-slate-700 text-white hover:bg-slate-600' : 'bg-gray-100 text-gray-700 hover:bg-gray-200')}
-                  `, children: preset.label }, preset.id));
-                            }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-xl overflow-hidden`, children: [(0, jsx_runtime_1.jsxs)("div", { className: `px-5 py-4 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Bug, { className: isDark ? 'text-violet-400' : 'text-violet-500', size: 20 }), (0, jsx_runtime_1.jsx)("h3", { className: `font-semibold ${themeClasses.textPrimary}`, children: "Log Levels" })] }), (0, jsx_runtime_1.jsx)("p", { className: `text-sm ${themeClasses.textMuted} mt-1`, children: "Set verbosity per category" })] }), (0, jsx_runtime_1.jsx)("div", { className: "p-5", children: (0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: CATEGORIES.map((category) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: `font-medium ${themeClasses.textPrimary}`, children: category.label }), (0, jsx_runtime_1.jsx)("p", { className: `text-xs ${themeClasses.textMuted}`, children: category.description })] }), (0, jsx_runtime_1.jsx)("select", { value: editedLevels?.[category.id] || 'info', onChange: (e) => {
-                                            setEditedLevels(prev => prev ? { ...prev, [category.id]: e.target.value } : null);
-                                        }, className: `
-                    px-3 py-2 rounded-lg text-sm font-medium cursor-pointer
-                    ${themeClasses.inputBg} ${themeClasses.textPrimary} border
-                    focus:outline-none focus:ring-2 focus:ring-indigo-500
-                  `, children: LOG_LEVELS.map((level) => ((0, jsx_runtime_1.jsx)("option", { value: level.value, children: level.label }, level.value))) })] }, category.id))) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-xl overflow-hidden`, children: [(0, jsx_runtime_1.jsxs)("div", { className: `px-5 py-4 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Clock, { className: isDark ? 'text-cyan-400' : 'text-cyan-500', size: 20 }), (0, jsx_runtime_1.jsx)("h3", { className: `font-semibold ${themeClasses.textPrimary}`, children: "Retention Settings" })] }), (0, jsx_runtime_1.jsx)("p", { className: `text-sm ${themeClasses.textMuted} mt-1`, children: "How long to keep logs by severity level" })] }), (0, jsx_runtime_1.jsx)("div", { className: "p-5", children: (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4", children: [
-                                { key: 'debug_days', label: 'Debug' },
-                                { key: 'info_days', label: 'Info' },
-                                { key: 'warn_days', label: 'Warnings' },
-                                { key: 'error_days', label: 'Errors' },
-                                { key: 'critical_days', label: 'Critical' },
-                            ].map((item) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: `block text-sm ${themeClasses.textSecondary} mb-1`, children: item.label }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "number", min: "1", max: "365", value: editedRetention?.[item.key] || 7, onChange: (e) => {
-                                                    setEditedRetention(prev => prev ? { ...prev, [item.key]: parseInt(e.target.value) || 7 } : null);
-                                                }, className: `
-                      w-20 px-3 py-2 rounded-lg text-sm
-                      ${themeClasses.inputBg} ${themeClasses.textPrimary} border
-                      focus:outline-none focus:ring-2 focus:ring-indigo-500
-                    ` }), (0, jsx_runtime_1.jsx)("span", { className: `text-sm ${themeClasses.textMuted}`, children: "days" })] })] }, item.key))) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-xl overflow-hidden`, children: [(0, jsx_runtime_1.jsx)("div", { className: `px-5 py-4 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HardDrive, { className: isDark ? 'text-emerald-400' : 'text-emerald-500', size: 20 }), (0, jsx_runtime_1.jsx)("h3", { className: `font-semibold ${themeClasses.textPrimary}`, children: "Storage Limits" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "p-5 space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("label", { className: `text-sm ${themeClasses.textSecondary}`, children: "Max size:" }), (0, jsx_runtime_1.jsx)("input", { type: "number", min: "1", max: "1000", value: editedLimits?.max_size_mb || 10, onChange: (e) => {
-                                                    setEditedLimits(prev => prev ? { ...prev, max_size_mb: parseInt(e.target.value) || 10 } : null);
-                                                }, className: `
-                  w-20 px-3 py-2 rounded-lg text-sm
-                  ${themeClasses.inputBg} ${themeClasses.textPrimary} border
-                  focus:outline-none focus:ring-2 focus:ring-indigo-500
-                ` }), (0, jsx_runtime_1.jsx)("span", { className: `text-sm ${themeClasses.textMuted}`, children: "MB" })] }), (0, jsx_runtime_1.jsx)("span", { className: themeClasses.textMuted, children: "or" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "number", min: "100", max: "1000000", step: "1000", value: editedLimits?.max_rows || 20000, onChange: (e) => {
-                                                    setEditedLimits(prev => prev ? { ...prev, max_rows: parseInt(e.target.value) || 20000 } : null);
-                                                }, className: `
-                  w-28 px-3 py-2 rounded-lg text-sm
-                  ${themeClasses.inputBg} ${themeClasses.textPrimary} border
-                  focus:outline-none focus:ring-2 focus:ring-indigo-500
-                ` }), (0, jsx_runtime_1.jsx)("span", { className: `text-sm ${themeClasses.textMuted}`, children: "rows" })] })] }), usage && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `text-sm ${themeClasses.textSecondary}`, children: "Current usage" }), (0, jsx_runtime_1.jsxs)("span", { className: `text-sm font-medium ${themeClasses.textPrimary}`, children: [usage.total_size_mb?.toFixed(1) || 0, " MB of ", usage.limits.max_size_mb, " MB (", usage.percent_used || 0, "%)"] })] }), (0, jsx_runtime_1.jsx)("div", { className: `h-3 rounded-full overflow-hidden ${isDark ? 'bg-slate-700' : 'bg-gray-200'}`, children: (0, jsx_runtime_1.jsx)("div", { className: `h-full rounded-full transition-all ${(usage.percent_used || 0) > 90 ? 'bg-red-500' :
-                                                (usage.percent_used || 0) > 70 ? 'bg-amber-500' :
-                                                    'bg-emerald-500'}`, style: { width: `${Math.min(usage.percent_used || 0, 100)}%` } }) }), (0, jsx_runtime_1.jsxs)("div", { className: `flex items-center justify-between mt-2 text-xs ${themeClasses.textMuted}`, children: [(0, jsx_runtime_1.jsxs)("span", { children: [(usage.total_rows || 0).toLocaleString(), " rows"] }), usage.oldest_entry && ((0, jsx_runtime_1.jsxs)("span", { children: ["Oldest: ", new Date(usage.oldest_entry).toLocaleDateString()] }))] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("select", { disabled: pruning, onChange: (e) => {
-                                                    if (e.target.value) {
-                                                        handlePrune(e.target.value);
-                                                        e.target.value = '';
-                                                    }
-                                                }, className: `
-                  px-4 py-2.5 pr-10 rounded-lg text-sm font-medium cursor-pointer appearance-none
-                  ${isDark ? 'bg-red-900/30 text-red-300 border-red-700 hover:bg-red-900/50' : 'bg-red-50 text-red-700 border-red-300 hover:bg-red-100'}
-                  border focus:outline-none focus:ring-2 focus:ring-red-500
-                  disabled:opacity-50 disabled:cursor-not-allowed
-                `, children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Prune Now..." }), PRUNE_OPTIONS.map((opt) => ((0, jsx_runtime_1.jsx)("option", { value: opt.value, children: opt.label }, opt.value)))] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: `absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none ${isDark ? 'text-red-400' : 'text-red-500'}` })] }), pruning && ((0, jsx_runtime_1.jsxs)("span", { className: `flex items-center gap-2 text-sm ${themeClasses.textMuted}`, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { className: "w-4 h-4 animate-spin" }), "Pruning..."] }))] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-end gap-4", children: [hasChanges && ((0, jsx_runtime_1.jsx)("span", { className: `text-sm ${themeClasses.textMuted}`, children: "You have unsaved changes" })), (0, jsx_runtime_1.jsx)("button", { onClick: saveSettings, disabled: !hasChanges || saving, className: `
-            px-6 py-2.5 rounded-lg font-medium text-sm transition-all
-            ${hasChanges
-                            ? 'bg-indigo-600 text-white hover:bg-indigo-700'
-                            : (isDark ? 'bg-slate-700 text-slate-400' : 'bg-gray-200 text-gray-400')}
-            disabled:cursor-not-allowed
-          `, children: saving ? ((0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { className: "w-4 h-4 animate-spin" }), "Saving..."] })) : ('Save Settings') })] })] }));
-}
-exports.default = LoggingSettingsTab;

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

@@ -1,37 +0,0 @@
-export interface LoginSession {
-    id: number;
-    idp_user_id: number;
-    email: string;
-    name?: string;
-    status: 'active' | 'revoked' | 'expired';
-    ip_address?: string;
-    city?: string;
-    region?: string;
-    country_code?: string;
-    device_type?: string;
-    browser?: string;
-    os?: string;
-    created_at: string;
-    last_activity?: string;
-    revoked_at?: string;
-    revoked_by?: string;
-    country_flag?: string;
-}
-export interface SessionStats {
-    totalActive: number;
-    totalRevoked: number;
-    uniqueUsers: number;
-    recentLogins: number;
-    byCountryWithFlags: Record<string, {
-        count: number;
-        flag: string;
-    }>;
-    byDevice: Record<string, number>;
-}
-export interface SessionsTabProps {
-    isDark?: boolean;
-    /** Base API path for sessions (default: /api/admin/sessions) */
-    apiBasePath?: string;
-}
-export declare function SessionsTab({ isDark, apiBasePath }: SessionsTabProps): import("react/jsx-runtime").JSX.Element;
-export default SessionsTab;

package/dist/components/admin/SessionsTab.js

@@ -1,165 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SessionsTab = SessionsTab;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-// -----------------------------------------------------------------------------
-// COMPONENT
-// -----------------------------------------------------------------------------
-function SessionsTab({ isDark = true, apiBasePath = '/api/admin/sessions' }) {
-    const [sessions, setSessions] = (0, react_1.useState)([]);
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
-    const [error, setError] = (0, react_1.useState)(null);
-    const [lastRefresh, setLastRefresh] = (0, react_1.useState)(null);
-    const [filterStatus, setFilterStatus] = (0, react_1.useState)('all');
-    const [filterEmail, setFilterEmail] = (0, react_1.useState)('');
-    const [stats, setStats] = (0, react_1.useState)(null);
-    const [revokingId, setRevokingId] = (0, react_1.useState)(null);
-    const [revokingUserId, setRevokingUserId] = (0, react_1.useState)(null);
-    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' : 'bg-white border-gray-300 text-gray-900',
-        textPrimary: isDark ? 'text-white' : 'text-gray-900',
-        textSecondary: isDark ? 'text-gray-400' : 'text-gray-600',
-        textMuted: isDark ? 'text-gray-500' : 'text-gray-500',
-    };
-    // Fetch sessions
-    const fetchSessions = (0, react_1.useCallback)(async () => {
-        setIsLoading(true);
-        setError(null);
-        try {
-            const params = new URLSearchParams();
-            if (filterStatus !== 'all')
-                params.set('status', filterStatus);
-            if (filterEmail)
-                params.set('email', filterEmail);
-            const response = await fetch(`${apiBasePath}?${params}`);
-            const data = await response.json();
-            if (response.ok) {
-                setSessions(data.sessions || []);
-                setLastRefresh(new Date());
-            }
-            else {
-                setError(data.error || 'Failed to fetch sessions');
-            }
-        }
-        catch (err) {
-            setError('Network error. Please try again.');
-        }
-        finally {
-            setIsLoading(false);
-        }
-    }, [filterStatus, filterEmail, apiBasePath]);
-    // Fetch stats
-    const fetchStats = (0, react_1.useCallback)(async () => {
-        try {
-            const response = await fetch(apiBasePath, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ action: 'stats' }),
-            });
-            const data = await response.json();
-            if (response.ok) {
-                setStats(data.stats);
-            }
-        }
-        catch (err) {
-            console.error('Failed to fetch stats:', err);
-        }
-    }, [apiBasePath]);
-    // Initial fetch
-    (0, react_1.useEffect)(() => {
-        fetchSessions();
-        fetchStats();
-    }, [fetchSessions, fetchStats]);
-    // Revoke single session
-    const handleRevokeSession = async (sessionId) => {
-        if (!confirm('Are you sure you want to revoke this session? The user will be logged out.')) {
-            return;
-        }
-        setRevokingId(sessionId);
-        try {
-            const response = await fetch(`${apiBasePath}/${sessionId}/revoke`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ reason: 'Revoked from admin dashboard' }),
-            });
-            const data = await response.json();
-            if (response.ok) {
-                await fetchSessions();
-                await fetchStats();
-            }
-            else {
-                alert(data.error || 'Failed to revoke session');
-            }
-        }
-        catch (err) {
-            alert('Network error. Please try again.');
-        }
-        finally {
-            setRevokingId(null);
-        }
-    };
-    // Revoke all sessions for a user
-    const handleRevokeAllUserSessions = async (userId, userEmail) => {
-        if (!confirm(`Are you sure you want to revoke ALL sessions for ${userEmail}? They will be logged out from all devices.`)) {
-            return;
-        }
-        setRevokingUserId(userId);
-        try {
-            const response = await fetch(`${apiBasePath}/user/${userId}/revoke-all`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ reason: 'All sessions revoked from admin dashboard' }),
-            });
-            const data = await response.json();
-            if (response.ok) {
-                alert(`Revoked ${data.revokedCount} session(s) for ${userEmail}`);
-                await fetchSessions();
-                await fetchStats();
-            }
-            else {
-                alert(data.error || 'Failed to revoke sessions');
-            }
-        }
-        catch (err) {
-            alert('Network error. Please try again.');
-        }
-        finally {
-            setRevokingUserId(null);
-        }
-    };
-    // Format time ago
-    const getTimeAgo = (dateStr) => {
-        const now = new Date();
-        const date = new Date(dateStr);
-        const diffMs = now.getTime() - date.getTime();
-        const diffSec = Math.floor(diffMs / 1000);
-        const diffMin = Math.floor(diffSec / 60);
-        const diffHour = Math.floor(diffMin / 60);
-        const diffDay = Math.floor(diffHour / 24);
-        if (diffSec < 60)
-            return 'Just now';
-        if (diffMin < 60)
-            return `${diffMin}m ago`;
-        if (diffHour < 24)
-            return `${diffHour}h ago`;
-        if (diffDay < 7)
-            return `${diffDay}d ago`;
-        return date.toLocaleDateString();
-    };
-    // Format location
-    const formatLocation = (session) => {
-        const parts = [session.city, session.region, session.country_code].filter(Boolean);
-        return parts.length > 0 ? parts.join(', ') : 'Unknown';
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [stats && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-xl p-4`, children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-emerald-400", children: stats.totalActive }), (0, jsx_runtime_1.jsx)("div", { className: `text-sm ${themeClasses.textMuted}`, children: "Active Sessions" })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-xl p-4`, children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-red-400", children: stats.totalRevoked }), (0, jsx_runtime_1.jsx)("div", { className: `text-sm ${themeClasses.textMuted}`, children: "Revoked Sessions" })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-xl p-4`, children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-blue-400", children: stats.uniqueUsers }), (0, jsx_runtime_1.jsx)("div", { className: `text-sm ${themeClasses.textMuted}`, children: "Unique Users" })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-xl p-4`, children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-purple-400", children: stats.recentLogins }), (0, jsx_runtime_1.jsx)("div", { className: `text-sm ${themeClasses.textMuted}`, children: "Logins (24h)" })] })] })), (0, jsx_runtime_1.jsx)("div", { className: `${themeClasses.cardBg} border rounded-xl p-4`, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 min-w-[200px]", children: (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Filter by email...", value: filterEmail, onChange: (e) => setFilterEmail(e.target.value), onKeyDown: (e) => e.key === 'Enter' && fetchSessions(), className: `w-full px-4 py-2 rounded-lg border ${themeClasses.inputBg}` }) }), (0, jsx_runtime_1.jsxs)("select", { value: filterStatus, onChange: (e) => setFilterStatus(e.target.value), className: `px-4 py-2 rounded-lg border ${themeClasses.inputBg}`, children: [(0, jsx_runtime_1.jsx)("option", { value: "all", children: "All Status" }), (0, jsx_runtime_1.jsx)("option", { value: "active", children: "Active Only" }), (0, jsx_runtime_1.jsx)("option", { value: "revoked", children: "Revoked Only" })] }), (0, jsx_runtime_1.jsx)("button", { onClick: fetchSessions, disabled: isLoading, className: "px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-500 disabled:opacity-50", children: isLoading ? 'Loading...' : 'Search' }), (0, jsx_runtime_1.jsx)("span", { className: `text-xs ${themeClasses.textMuted}`, children: lastRefresh ? `Last: ${lastRefresh.toLocaleTimeString()}` : '' })] }) }), error && ((0, jsx_runtime_1.jsx)("div", { className: "p-4 rounded-lg bg-red-500/20 border border-red-500 text-red-400", children: error })), (0, jsx_runtime_1.jsx)("div", { className: `${themeClasses.cardBg} border rounded-xl overflow-hidden`, children: (0, jsx_runtime_1.jsx)("div", { className: "overflow-x-auto", children: (0, jsx_runtime_1.jsxs)("table", { className: "w-full", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { className: `border-b ${isDark ? 'border-slate-700' : 'border-gray-200'} bg-opacity-50 ${isDark ? 'bg-slate-900' : 'bg-gray-50'}`, children: [(0, jsx_runtime_1.jsx)("th", { className: `text-left py-3 px-4 ${themeClasses.textSecondary} font-medium text-sm`, children: "User" }), (0, jsx_runtime_1.jsx)("th", { className: `text-left py-3 px-4 ${themeClasses.textSecondary} font-medium text-sm`, children: "Location" }), (0, jsx_runtime_1.jsx)("th", { className: `text-left py-3 px-4 ${themeClasses.textSecondary} font-medium text-sm`, children: "Device" }), (0, jsx_runtime_1.jsx)("th", { className: `text-left py-3 px-4 ${themeClasses.textSecondary} font-medium text-sm`, children: "Status" }), (0, jsx_runtime_1.jsx)("th", { className: `text-left py-3 px-4 ${themeClasses.textSecondary} font-medium text-sm`, children: "Created" }), (0, jsx_runtime_1.jsx)("th", { className: `text-left py-3 px-4 ${themeClasses.textSecondary} font-medium text-sm`, children: "Actions" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: sessions.length === 0 ? ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: 6, className: `text-center py-8 ${themeClasses.textMuted}`, children: isLoading ? 'Loading sessions...' : 'No sessions found' }) })) : (sessions.map((session) => ((0, jsx_runtime_1.jsxs)("tr", { className: `border-b ${isDark ? 'border-slate-700' : 'border-gray-100'} last:border-0`, children: [(0, jsx_runtime_1.jsx)("td", { className: "py-3 px-4", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: `font-medium ${themeClasses.textPrimary}`, children: session.name || session.email.split('@')[0] }), (0, jsx_runtime_1.jsx)("div", { className: `text-xs ${themeClasses.textMuted}`, children: session.email }), (0, jsx_runtime_1.jsxs)("div", { className: `text-xs ${themeClasses.textMuted}`, children: ["ID: ", session.idp_user_id] })] }) }), (0, jsx_runtime_1.jsx)("td", { className: "py-3 px-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-lg", children: session.country_flag || '🌍' }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: themeClasses.textPrimary, children: formatLocation(session) }), (0, jsx_runtime_1.jsx)("div", { className: `text-xs font-mono ${themeClasses.textMuted}`, children: session.ip_address })] })] }) }), (0, jsx_runtime_1.jsx)("td", { className: "py-3 px-4", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.textPrimary} capitalize`, children: [session.device_type === 'desktop' ? '💻' : session.device_type === 'mobile' ? '📱' : '📲', " ", session.device_type] }), (0, jsx_runtime_1.jsxs)("div", { className: `text-xs ${themeClasses.textMuted}`, children: [session.browser, " / ", session.os] })] }) }), (0, jsx_runtime_1.jsxs)("td", { className: "py-3 px-4", children: [(0, jsx_runtime_1.jsx)("span", { className: `px-2 py-1 rounded text-xs font-medium ${session.status === 'active'
-                                                        ? 'bg-emerald-500/20 text-emerald-400'
-                                                        : session.status === 'revoked'
-                                                            ? 'bg-red-500/20 text-red-400'
-                                                            : 'bg-gray-500/20 text-gray-400'}`, children: session.status }), session.status === 'revoked' && session.revoked_at && ((0, jsx_runtime_1.jsx)("div", { className: `text-xs ${themeClasses.textMuted} mt-1`, children: getTimeAgo(session.revoked_at) }))] }), (0, jsx_runtime_1.jsxs)("td", { className: `py-3 px-4 ${themeClasses.textMuted} text-sm`, children: [(0, jsx_runtime_1.jsx)("div", { children: getTimeAgo(session.created_at) }), session.last_activity && ((0, jsx_runtime_1.jsxs)("div", { className: `text-xs ${themeClasses.textMuted}`, children: ["Active: ", getTimeAgo(session.last_activity)] }))] }), (0, jsx_runtime_1.jsx)("td", { className: "py-3 px-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [session.status === 'active' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => handleRevokeSession(session.id), disabled: revokingId === session.id, className: "px-3 py-1 rounded text-xs font-medium bg-red-500/20 text-red-400 hover:bg-red-500/30 disabled:opacity-50", title: "Revoke this session", children: revokingId === session.id ? '...' : 'Revoke' }), (0, jsx_runtime_1.jsx)("button", { onClick: () => handleRevokeAllUserSessions(session.idp_user_id, session.email), disabled: revokingUserId === session.idp_user_id, className: "px-3 py-1 rounded text-xs font-medium bg-orange-500/20 text-orange-400 hover:bg-orange-500/30 disabled:opacity-50", title: "Revoke all sessions for this user", children: revokingUserId === session.idp_user_id ? '...' : 'Revoke All' })] })), session.status === 'revoked' && ((0, jsx_runtime_1.jsxs)("span", { className: `text-xs ${themeClasses.textMuted}`, children: ["By: ", session.revoked_by?.split('@')[0]] }))] }) })] }, session.id)))) })] }) }) }), stats && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-xl p-4`, children: [(0, jsx_runtime_1.jsx)("h3", { className: `font-semibold ${themeClasses.textPrimary} mb-3`, children: "Sessions by Device" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-2", children: Object.entries(stats.byDevice).map(([device, count]) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("span", { className: `${themeClasses.textSecondary} capitalize`, children: [device === 'desktop' ? '💻' : device === 'mobile' ? '📱' : '📲', " ", device] }), (0, jsx_runtime_1.jsx)("span", { className: themeClasses.textPrimary, children: count })] }, device))) })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-xl p-4`, children: [(0, jsx_runtime_1.jsx)("h3", { className: `font-semibold ${themeClasses.textPrimary} mb-3`, children: "Sessions by Country" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-2 max-h-48 overflow-y-auto", children: Object.entries(stats.byCountryWithFlags)
-                                    .sort((a, b) => b[1].count - a[1].count)
-                                    .map(([code, data]) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("span", { className: themeClasses.textSecondary, children: [data.flag, " ", code] }), (0, jsx_runtime_1.jsx)("span", { className: themeClasses.textPrimary, children: data.count })] }, code))) })] })] }))] }));
-}
-exports.default = SessionsTab;

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

@@ -1,53 +0,0 @@
-/**
- * =============================================================================
- * VIBE ADMIN STATS TAB
- * =============================================================================
- *
- * Generic dashboard stats overview tab.
- * Shows high-level metrics about users, sessions, and system health.
- *
- * =============================================================================
- */
-import { ReactNode } from 'react';
-import { type LucideIcon } from 'lucide-react';
-export interface StatCard {
-    id: string;
-    label: string;
-    value: string | number;
-    change?: string;
-    changeType?: 'positive' | 'negative' | 'neutral';
-    icon?: LucideIcon;
-    color?: 'blue' | 'green' | 'purple' | 'orange' | 'red' | 'cyan';
-}
-export interface QuickAction {
-    id: string;
-    label: string;
-    description: string;
-    onClick: () => void;
-    icon?: LucideIcon;
-}
-export interface RecentActivity {
-    id: string;
-    type: string;
-    message: string;
-    timestamp: string;
-    user?: string;
-}
-export interface SystemStatus {
-    service: string;
-    status: 'healthy' | 'degraded' | 'down';
-    latency?: number;
-}
-export interface StatsTabProps {
-    isDark?: boolean;
-    /** API endpoint to fetch stats (default: /api/admin/stats) */
-    apiBasePath?: string;
-    /** Custom stat cards to display */
-    customStats?: StatCard[];
-    /** Quick actions shown in the sidebar */
-    quickActions?: QuickAction[];
-    /** Additional content to render below stats */
-    children?: ReactNode;
-}
-export declare function StatsTab({ isDark, apiBasePath, customStats, quickActions, children, }: StatsTabProps): import("react/jsx-runtime").JSX.Element;
-export default StatsTab;