@payez/next-mvp 3.0.0

package/dist/components/admin/LoggingSettingsTab.js

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

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

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

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