@payez/next-mvp 4.0.0 → 4.0.1

package/dist/components/account/MobileNavDrawer.js

@@ -1,81 +0,0 @@
-"use strict";
-'use client';
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MobileNavDrawer = MobileNavDrawer;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const better_auth_client_1 = require("../../client/better-auth-client");
-const navigation_1 = require("next/navigation");
-const image_1 = __importDefault(require("next/image"));
-const link_1 = __importDefault(require("next/link"));
-const lucide_react_1 = require("lucide-react");
-function MobileNavDrawer({ isOpen, onClose, navItems, customSections, basePath = '/account', onSignIn, signInCallbackUrl = '/dashboard', unauthActions, authFooter, }) {
-    const { data: session } = better_auth_client_1.authClient.useSession();
-    const pathname = (0, navigation_1.usePathname)();
-    const isAuthenticated = !!session?.user;
-    const isActiveRoute = (0, react_1.useCallback)((href) => pathname?.startsWith(href) ?? false, [pathname]);
-    // Close on Escape key
-    (0, react_1.useEffect)(() => {
-        function handleEscape(event) {
-            if (event.key === 'Escape') {
-                onClose();
-            }
-        }
-        if (isOpen) {
-            document.addEventListener('keydown', handleEscape);
-            return () => document.removeEventListener('keydown', handleEscape);
-        }
-    }, [isOpen, onClose]);
-    // Lock body scroll when open
-    (0, react_1.useEffect)(() => {
-        if (isOpen) {
-            document.body.style.overflow = 'hidden';
-            return () => {
-                document.body.style.overflow = '';
-            };
-        }
-    }, [isOpen]);
-    const handleSignIn = () => {
-        onClose();
-        if (onSignIn) {
-            onSignIn();
-        }
-        else {
-            better_auth_client_1.authClient.signIn.social({ provider: 'google', callbackURL: signInCallbackUrl });
-        }
-    };
-    const handleSectionItemClick = (item) => {
-        onClose();
-        if (item.onClick) {
-            item.onClick();
-        }
-    };
-    // Derive display initial from name or email
-    const userName = session?.user?.name;
-    const userEmail = session?.user?.email;
-    const displaySource = userName || userEmail;
-    const userInitial = displaySource?.charAt(0).toUpperCase() || '?';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `
-          fixed inset-0 bg-black/50 backdrop-blur-sm z-40 lg:hidden
-          transition-opacity duration-300
-          ${isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}
-        `, onClick: onClose, "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("div", { role: "dialog", "aria-modal": "true", "aria-label": "Navigation menu", "aria-expanded": isOpen, className: `
-          fixed top-0 right-0 bottom-0 w-80 max-w-[85vw]
-          bg-white dark:bg-slate-900
-          shadow-[-8px_0_32px_rgba(0,0,0,0.15)]
-          dark:shadow-[-8px_0_32px_rgba(0,0,0,0.4)]
-          z-50 lg:hidden
-          overflow-y-auto
-          transition-transform duration-300 ease-out
-          ${isOpen ? 'translate-x-0' : 'translate-x-full'}
-        `, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 dark:border-white/10", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Menu" }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "\r\n              p-2 rounded-xl\r\n              text-gray-400 hover:text-gray-900\r\n              dark:hover:text-white\r\n              hover:bg-gray-100 dark:hover:bg-white/10\r\n              transition-colors\r\n            ", "aria-label": "Close menu", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }) })] }), isAuthenticated && session?.user && ((0, jsx_runtime_1.jsx)("div", { className: "p-4 border-b border-gray-200 dark:border-white/10", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [session.user.image ? ((0, jsx_runtime_1.jsx)(image_1.default, { src: session.user.image, alt: "", width: 48, height: 48, className: "w-12 h-12 rounded-full", unoptimized: true })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold text-lg", children: userInitial })), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [userName && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm font-semibold text-gray-900 dark:text-white truncate", children: userName })), userEmail && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-gray-500 dark:text-slate-400 truncate", children: userEmail }))] })] }) })), (0, jsx_runtime_1.jsx)("div", { className: "p-2", children: navItems.map((item) => ((0, jsx_runtime_1.jsxs)(link_1.default, { href: item.href, onClick: onClose, className: `
-                flex items-center gap-3 px-4 py-3.5 rounded-xl
-                transition-colors duration-200
-                ${isActiveRoute(item.href)
-                                ? 'bg-blue-500/10 text-blue-500'
-                                : 'text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-white/10'}
-              `, children: [item.icon && (0, jsx_runtime_1.jsx)("span", { className: "text-xl", children: item.icon }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: item.label }), isActiveRoute(item.href) && ((0, jsx_runtime_1.jsx)("span", { className: "ml-auto w-2 h-2 rounded-full bg-blue-500" }))] }, item.href))) }), customSections?.map((section, sectionIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: "p-2 border-t border-gray-200 dark:border-white/10", children: [section.title && ((0, jsx_runtime_1.jsx)("p", { className: "px-4 py-2 text-xs font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wider", children: section.title })), section.items.map((item, itemIndex) => item.href ? ((0, jsx_runtime_1.jsxs)(link_1.default, { href: item.href, onClick: onClose, className: "\r\n                    flex items-center gap-3 px-4 py-3 rounded-xl\r\n                    text-gray-900 dark:text-white\r\n                    hover:bg-gray-100 dark:hover:bg-white/10\r\n                    transition-colors\r\n                  ", children: [item.icon && (0, jsx_runtime_1.jsx)("span", { className: "text-xl", children: item.icon }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: item.label })] }, itemIndex)) : ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleSectionItemClick(item), className: "\r\n                    flex items-center gap-3 px-4 py-3 rounded-xl w-full text-left\r\n                    text-gray-900 dark:text-white\r\n                    hover:bg-gray-100 dark:hover:bg-white/10\r\n                    transition-colors\r\n                  ", children: [item.icon && (0, jsx_runtime_1.jsx)("span", { className: "text-xl", children: item.icon }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: item.label })] }, itemIndex)))] }, sectionIndex))), (0, jsx_runtime_1.jsx)("div", { className: "p-4 mt-auto border-t border-gray-200 dark:border-white/10", children: !isAuthenticated ? (unauthActions ?? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: (0, jsx_runtime_1.jsx)("button", { onClick: handleSignIn, className: "\r\n                    w-full px-4 py-3 rounded-xl\r\n                    text-blue-500 font-semibold\r\n                    border border-blue-500/30\r\n                    hover:bg-blue-500/10\r\n                    transition-colors\r\n                  ", children: "Login" }) }))) : (authFooter ?? ((0, jsx_runtime_1.jsx)(link_1.default, { href: basePath, onClick: onClose, className: "\r\n                  flex items-center justify-center gap-2\r\n                  w-full px-4 py-3 rounded-xl\r\n                  text-gray-500 dark:text-slate-400 font-medium\r\n                  hover:bg-gray-100 dark:hover:bg-white/10\r\n                  transition-colors\r\n                ", children: "Account Settings" }))) })] })] }));
-}

package/dist/components/account/UserAvatarMenu.d.ts

@@ -1,20 +0,0 @@
-export interface UserAvatarMenuProps {
-    /** Base path for navigation (e.g., '/dashboard', '/account') */
-    basePath?: string;
-    /** Show Profile menu item (default: true) */
-    showProfile?: boolean;
-    /** Show Settings menu item (default: true) */
-    showSettings?: boolean;
-    /** Show Security menu item (default: true) */
-    showSecurity?: boolean;
-    /** Custom menu items to add before the sign out divider */
-    customItems?: Array<{
-        label: string;
-        icon?: React.ReactNode;
-        href?: string;
-        onClick?: () => void;
-    }>;
-    /** Override default signOut behavior */
-    onSignOut?: () => void;
-}
-export declare function UserAvatarMenu({ basePath, showProfile, showSettings, showSecurity, customItems, onSignOut, }: UserAvatarMenuProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/account/UserAvatarMenu.js

@@ -1,91 +0,0 @@
-"use strict";
-'use client';
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserAvatarMenu = UserAvatarMenu;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const better_auth_client_1 = require("../../client/better-auth-client");
-const navigation_1 = require("next/navigation");
-const image_1 = __importDefault(require("next/image"));
-const lucide_react_1 = require("lucide-react");
-function UserAvatarMenu({ basePath = '', showProfile = true, showSettings = true, showSecurity = true, customItems, onSignOut, }) {
-    const { data: sessionData, isPending } = better_auth_client_1.authClient.useSession();
-    const session = sessionData;
-    const status = isPending ? 'loading' : session ? 'authenticated' : 'unauthenticated';
-    const router = (0, navigation_1.useRouter)();
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const menuRef = (0, react_1.useRef)(null);
-    // Close menu when clicking outside
-    (0, react_1.useEffect)(() => {
-        function handleClickOutside(event) {
-            if (menuRef.current && !menuRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        }
-        if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-            return () => document.removeEventListener('mousedown', handleClickOutside);
-        }
-    }, [isOpen]);
-    // Close menu on Escape
-    (0, react_1.useEffect)(() => {
-        function handleEscape(event) {
-            if (event.key === 'Escape') {
-                setIsOpen(false);
-            }
-        }
-        if (isOpen) {
-            document.addEventListener('keydown', handleEscape);
-            return () => document.removeEventListener('keydown', handleEscape);
-        }
-    }, [isOpen]);
-    // Loading state
-    if (status === 'loading') {
-        return ((0, jsx_runtime_1.jsx)("div", { className: "h-10 w-10 rounded-full bg-gray-200 dark:bg-white/10 animate-pulse" }));
-    }
-    // Not authenticated
-    if (!session?.user) {
-        return null;
-    }
-    // Derive display initial from name or email — ignore anon/internal IDs
-    const userName = session.user?.name;
-    const userEmail = session.user.email;
-    const displaySource = userName || userEmail;
-    const userInitial = displaySource?.charAt(0).toUpperCase() || '?';
-    const handleNavigation = (path) => {
-        setIsOpen(false);
-        router.push(path);
-    };
-    const handleSignOut = async () => {
-        setIsOpen(false);
-        if (onSignOut) {
-            onSignOut();
-        }
-        else {
-            // Use NEXT_PUBLIC env var or default to root
-            const logoutUrl = process.env.NEXT_PUBLIC_LOGOUT_REDIRECT_URL || '/';
-            await better_auth_client_1.authClient.signOut();
-            window.location.href = logoutUrl;
-        }
-    };
-    const handleItemClick = (item) => {
-        setIsOpen(false);
-        if (item.onClick) {
-            item.onClick();
-        }
-        else if (item.href) {
-            router.push(item.href);
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: menuRef, className: "relative", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setIsOpen(!isOpen), className: "flex items-center justify-center h-10 w-10 rounded-full overflow-hidden bg-blue-500 text-white font-semibold text-lg hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900", "aria-label": "User menu", "aria-expanded": isOpen, "aria-haspopup": "true", children: session.user.image ? ((0, jsx_runtime_1.jsx)(image_1.default, { src: session.user.image, alt: "", width: 40, height: 40, className: "w-10 h-10 rounded-full object-cover", unoptimized: true })) : (userInitial) }), isOpen && ((0, jsx_runtime_1.jsxs)("div", { className: "absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50\r\n            bg-white dark:bg-slate-900\r\n            border border-gray-200 dark:border-slate-700", role: "menu", "aria-orientation": "vertical", children: [(0, jsx_runtime_1.jsx)("div", { className: "px-4 py-3 border-b border-gray-200 dark:border-slate-700", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [session.user.image ? ((0, jsx_runtime_1.jsx)(image_1.default, { src: session.user.image, alt: "", width: 32, height: 32, className: "w-8 h-8 rounded-full flex-shrink-0", unoptimized: true })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold text-sm flex-shrink-0", children: userInitial })), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0", children: [userName && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-700 dark:text-slate-200 truncate", children: userName })), userEmail && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 dark:text-slate-400 truncate", children: userEmail })), !userName && !userEmail && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 dark:text-slate-400", children: "Signed in" }))] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "py-1", children: [showProfile && ((0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.User, { className: "h-4 w-4" }), label: "Profile", onClick: () => handleNavigation(`${basePath}/profile`) })), showSettings && ((0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { className: "h-4 w-4" }), label: "Settings", onClick: () => handleNavigation(`${basePath}/settings`) })), showSecurity && ((0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Shield, { className: "h-4 w-4" }), label: "Security", onClick: () => handleNavigation(`${basePath}/security`) })), customItems?.map((item, index) => ((0, jsx_runtime_1.jsx)(MenuItem, { icon: item.icon, label: item.label, onClick: () => handleItemClick(item) }, index)))] }), (0, jsx_runtime_1.jsx)("div", { className: "border-t border-gray-200 dark:border-slate-700 py-1", children: (0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { className: "h-4 w-4" }), label: "Sign Out", onClick: handleSignOut, variant: "danger" }) })] }))] }));
-}
-function MenuItem({ icon, label, onClick, variant = 'default' }) {
-    const baseClasses = "flex items-center w-full px-4 py-2 text-sm cursor-pointer transition-colors";
-    const variantClasses = variant === 'danger'
-        ? "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-slate-800"
-        : "text-gray-700 dark:text-white hover:bg-gray-100 dark:hover:bg-slate-800";
-    return ((0, jsx_runtime_1.jsxs)("button", { onClick: onClick, className: `${baseClasses} ${variantClasses}`, role: "menuitem", children: [icon && (0, jsx_runtime_1.jsx)("span", { className: "mr-3", children: icon }), (0, jsx_runtime_1.jsx)("span", { children: label })] }));
-}

package/dist/components/account/index.d.ts

@@ -1,9 +0,0 @@
-/**
- * Account Components for @payez/next-mvp
- *
- * User account related UI components.
- */
-export { UserAvatarMenu } from './UserAvatarMenu';
-export type { UserAvatarMenuProps } from './UserAvatarMenu';
-export { MobileNavDrawer } from './MobileNavDrawer';
-export type { MobileNavDrawerProps, NavItem, NavSection } from './MobileNavDrawer';

package/dist/components/account/index.js

@@ -1,13 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MobileNavDrawer = exports.UserAvatarMenu = void 0;
-/**
- * Account Components for @payez/next-mvp
- *
- * User account related UI components.
- */
-var UserAvatarMenu_1 = require("./UserAvatarMenu");
-Object.defineProperty(exports, "UserAvatarMenu", { enumerable: true, get: function () { return UserAvatarMenu_1.UserAvatarMenu; } });
-var MobileNavDrawer_1 = require("./MobileNavDrawer");
-Object.defineProperty(exports, "MobileNavDrawer", { enumerable: true, get: function () { return MobileNavDrawer_1.MobileNavDrawer; } });

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

@@ -1,48 +0,0 @@
-/**
- * =============================================================================
- * VIBE ADMIN ALERT SETTINGS TAB
- * =============================================================================
- *
- * Admin UI for managing email alert preferences, recipients, and thresholds.
- * Supports Smart/Immediate/Hourly/Daily delivery modes.
- *
- * =============================================================================
- */
-export type DeliveryMode = 'smart' | 'immediate' | 'hourly' | 'daily';
-export interface AlertConfig {
-    enabled: boolean;
-    threshold?: number;
-    threshold_pct?: number;
-}
-export interface AlertsConfig {
-    error_spike: AlertConfig;
-    storage_warning: AlertConfig;
-    storage_critical: AlertConfig;
-    agent_expiring: AlertConfig;
-    agent_expired: AlertConfig;
-}
-export interface RateLimit {
-    max_per_hour: number;
-}
-export interface AlertSettings {
-    recipients: string[];
-    digest_mode: DeliveryMode;
-    alerts: AlertsConfig;
-    rate_limit: RateLimit;
-}
-export interface AlertHistoryItem {
-    id: number;
-    type: string;
-    sent_at: string;
-    subject: string;
-    recipients: string[];
-}
-export interface AlertSettingsTabProps {
-    isDark?: boolean;
-    /** API base path (default: /api/admin/alerts) */
-    apiBasePath?: string;
-    /** Callback when settings are saved */
-    onSave?: (settings: Partial<AlertSettings>) => void;
-}
-export declare function AlertSettingsTab({ isDark, apiBasePath, onSave, }: AlertSettingsTabProps): import("react/jsx-runtime").JSX.Element;
-export default AlertSettingsTab;

package/dist/components/admin/AlertSettingsTab.js

@@ -1,351 +0,0 @@
-"use strict";
-/**
- * =============================================================================
- * VIBE ADMIN ALERT SETTINGS TAB
- * =============================================================================
- *
- * Admin UI for managing email alert preferences, recipients, and thresholds.
- * Supports Smart/Immediate/Hourly/Daily delivery modes.
- *
- * =============================================================================
- */
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertSettingsTab = AlertSettingsTab;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const lucide_react_1 = require("lucide-react");
-// -----------------------------------------------------------------------------
-// CONSTANTS
-// -----------------------------------------------------------------------------
-const DELIVERY_MODES = [
-    { value: 'smart', label: 'Smart', description: 'Critical alerts immediate, others batched (Recommended)' },
-    { value: 'immediate', label: 'Immediate', description: 'All alerts sent as they occur' },
-    { value: 'hourly', label: 'Hourly', description: 'Batched into hourly digest' },
-    { value: 'daily', label: 'Daily', description: 'Batched into daily digest (8 AM)' },
-];
-const ALERT_TYPES = [
-    {
-        id: 'error_spike',
-        label: 'Error Spike',
-        description: 'Alert when errors exceed threshold',
-        icon: lucide_react_1.AlertTriangle,
-        hasThreshold: true,
-        thresholdLabel: 'Threshold',
-        thresholdUnit: 'errors/hour',
-    },
-    {
-        id: 'storage_warning',
-        label: 'Storage Warning',
-        description: 'Alert when log storage approaches capacity',
-        icon: lucide_react_1.HardDrive,
-        hasThreshold: true,
-        thresholdLabel: 'Threshold',
-        thresholdUnit: '% capacity',
-    },
-    {
-        id: 'storage_critical',
-        label: 'Storage Critical',
-        description: 'Alert when storage is nearly full',
-        icon: lucide_react_1.HardDrive,
-        hasThreshold: true,
-        thresholdLabel: 'Threshold',
-        thresholdUnit: '% capacity',
-        alwaysSent: true,
-    },
-    {
-        id: 'agent_expiring',
-        label: 'Agent Access Expiring',
-        description: 'Alert 24 hours before agent access expires',
-        icon: lucide_react_1.Bot,
-        hasThreshold: false,
-    },
-    {
-        id: 'agent_expired',
-        label: 'Agent Access Expired',
-        description: 'Alert when agent access has expired',
-        icon: lucide_react_1.Bot,
-        hasThreshold: false,
-        alwaysSent: true,
-    },
-];
-const TEST_ALERT_OPTIONS = [
-    { value: 'error_spike', label: 'Error Spike Alert' },
-    { value: 'storage_warning', label: 'Storage Warning Alert' },
-    { value: 'agent_expiring', label: 'Agent Expiring Alert' },
-];
-const DEFAULT_SETTINGS = {
-    recipients: [],
-    digest_mode: 'smart',
-    alerts: {
-        error_spike: { enabled: true, threshold: 10 },
-        storage_warning: { enabled: true, threshold_pct: 80 },
-        storage_critical: { enabled: true, threshold_pct: 95 },
-        agent_expiring: { enabled: true },
-        agent_expired: { enabled: true },
-    },
-    rate_limit: { max_per_hour: 10 },
-};
-// -----------------------------------------------------------------------------
-// COMPONENT
-// -----------------------------------------------------------------------------
-function AlertSettingsTab({ isDark = true, apiBasePath = '/api/admin/alerts', onSave, }) {
-    const [settings, setSettings] = (0, react_1.useState)(null);
-    const [loading, setLoading] = (0, react_1.useState)(true);
-    const [saving, setSaving] = (0, react_1.useState)(false);
-    const [sendingTest, setSendingTest] = (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
-    const [editedRecipients, setEditedRecipients] = (0, react_1.useState)([]);
-    const [editedMode, setEditedMode] = (0, react_1.useState)('smart');
-    const [editedAlerts, setEditedAlerts] = (0, react_1.useState)(DEFAULT_SETTINGS.alerts);
-    const [editedRateLimit, setEditedRateLimit] = (0, react_1.useState)(10);
-    // New recipient input
-    const [newRecipient, setNewRecipient] = (0, react_1.useState)('');
-    const [recipientError, setRecipientError] = (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',
-        tagBg: isDark ? 'bg-slate-700' : '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);
-                setEditedRecipients(data.recipients || []);
-                setEditedMode(data.digest_mode || 'smart');
-                setEditedAlerts(data.alerts || DEFAULT_SETTINGS.alerts);
-                setEditedRateLimit(data.rate_limit?.max_per_hour || 10);
-            }
-            else if (res.status === 404) {
-                // Endpoint not ready - use defaults
-                setSettings(DEFAULT_SETTINGS);
-                setEditedRecipients([]);
-                setEditedMode('smart');
-                setEditedAlerts(DEFAULT_SETTINGS.alerts);
-                setEditedRateLimit(10);
-            }
-            else {
-                throw new Error('Failed to fetch settings');
-            }
-        }
-        catch (err) {
-            setError(err.message);
-        }
-        finally {
-            setLoading(false);
-        }
-    }, [apiBasePath]);
-    (0, react_1.useEffect)(() => {
-        fetchSettings();
-    }, [fetchSettings]);
-    // Check for changes
-    (0, react_1.useEffect)(() => {
-        if (!settings) {
-            setHasChanges(false);
-            return;
-        }
-        const recipientsChanged = JSON.stringify(settings.recipients) !== JSON.stringify(editedRecipients);
-        const modeChanged = settings.digest_mode !== editedMode;
-        const alertsChanged = JSON.stringify(settings.alerts) !== JSON.stringify(editedAlerts);
-        const rateLimitChanged = settings.rate_limit.max_per_hour !== editedRateLimit;
-        setHasChanges(recipientsChanged || modeChanged || alertsChanged || rateLimitChanged);
-    }, [settings, editedRecipients, editedMode, editedAlerts, editedRateLimit]);
-    // Add recipient
-    const addRecipient = () => {
-        const email = newRecipient.trim().toLowerCase();
-        setRecipientError(null);
-        if (!email)
-            return;
-        // Basic email validation
-        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-        if (!emailRegex.test(email)) {
-            setRecipientError('Please enter a valid email address');
-            return;
-        }
-        if (editedRecipients.includes(email)) {
-            setRecipientError('This email is already in the list');
-            return;
-        }
-        setEditedRecipients([...editedRecipients, email]);
-        setNewRecipient('');
-    };
-    // Remove recipient
-    const removeRecipient = (email) => {
-        setEditedRecipients(editedRecipients.filter(r => r !== email));
-    };
-    // Update alert config
-    const updateAlertConfig = (alertId, updates) => {
-        setEditedAlerts(prev => ({
-            ...prev,
-            [alertId]: { ...prev[alertId], ...updates },
-        }));
-    };
-    // Save settings
-    const saveSettings = async () => {
-        if (!hasChanges)
-            return;
-        setSaving(true);
-        setError(null);
-        try {
-            const payload = {
-                recipients: editedRecipients,
-                digest_mode: editedMode,
-                alerts: editedAlerts,
-                rate_limit: { max_per_hour: editedRateLimit },
-            };
-            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(payload);
-                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);
-        }
-    };
-    // Send test alert
-    const sendTestAlert = async (alertType) => {
-        setSendingTest(true);
-        setError(null);
-        try {
-            const res = await fetch(`${apiBasePath}/test`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    type: alertType,
-                    recipient: editedRecipients[0] || 'test@example.com',
-                }),
-            });
-            if (res.ok) {
-                setSuccessMessage(`Test ${alertType.replace('_', ' ')} alert sent!`);
-                setTimeout(() => setSuccessMessage(null), 3000);
-            }
-            else if (res.status === 404) {
-                setSuccessMessage('Test alert sent (demo mode)');
-                setTimeout(() => setSuccessMessage(null), 3000);
-            }
-            else {
-                throw new Error('Failed to send test alert');
-            }
-        }
-        catch (err) {
-            setError(err.message);
-        }
-        finally {
-            setSendingTest(false);
-        }
-    };
-    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.Mail, { className: isDark ? 'text-violet-400' : 'text-violet-500', size: 20 }), (0, jsx_runtime_1.jsx)("h3", { className: `font-semibold ${themeClasses.textPrimary}`, children: "Alert Recipients" })] }), (0, jsx_runtime_1.jsx)("p", { className: `text-sm ${themeClasses.textMuted} mt-1`, children: "Email addresses that receive alert notifications" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-5 space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-2", children: [editedRecipients.map((email) => ((0, jsx_runtime_1.jsxs)("div", { className: `flex items-center gap-2 px-3 py-1.5 rounded-lg ${themeClasses.tagBg}`, children: [(0, jsx_runtime_1.jsx)("span", { className: `text-sm ${themeClasses.textPrimary}`, children: email }), (0, jsx_runtime_1.jsx)("button", { onClick: () => removeRecipient(email), className: `p-0.5 rounded ${isDark ? 'hover:bg-slate-600' : 'hover:bg-gray-300'} transition-colors`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14, className: themeClasses.textMuted }) })] }, email))), editedRecipients.length === 0 && ((0, jsx_runtime_1.jsx)("span", { className: `text-sm ${themeClasses.textMuted}`, children: "No recipients configured" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsx)("input", { type: "email", value: newRecipient, onChange: (e) => {
-                                                    setNewRecipient(e.target.value);
-                                                    setRecipientError(null);
-                                                }, onKeyDown: (e) => {
-                                                    if (e.key === 'Enter') {
-                                                        e.preventDefault();
-                                                        addRecipient();
-                                                    }
-                                                }, placeholder: "Enter email address", className: `
-                  w-full px-3 py-2 rounded-lg text-sm
-                  ${themeClasses.inputBg} ${themeClasses.textPrimary} border
-                  focus:outline-none focus:ring-2 focus:ring-indigo-500
-                  ${recipientError ? (isDark ? 'border-red-500' : 'border-red-400') : ''}
-                ` }), recipientError && ((0, jsx_runtime_1.jsx)("p", { className: `text-xs mt-1 ${isDark ? 'text-red-400' : 'text-red-500'}`, children: recipientError }))] }), (0, jsx_runtime_1.jsxs)("button", { onClick: addRecipient, className: `
-                px-4 py-2 rounded-lg font-medium text-sm transition-colors
-                ${isDark ? 'bg-indigo-600 hover:bg-indigo-700' : 'bg-indigo-500 hover:bg-indigo-600'}
-                text-white flex items-center gap-2
-              `, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), "Add"] })] })] })] }), (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: "Delivery Mode" })] }), (0, jsx_runtime_1.jsx)("p", { className: `text-sm ${themeClasses.textMuted} mt-1`, children: "How alerts are delivered to recipients" })] }), (0, jsx_runtime_1.jsx)("div", { className: "p-5", children: (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3", children: DELIVERY_MODES.map((mode) => {
-                                const isSelected = editedMode === mode.value;
-                                return ((0, jsx_runtime_1.jsxs)("button", { onClick: () => setEditedMode(mode.value), className: `
-                    p-4 rounded-lg border-2 text-left transition-all
-                    ${isSelected
-                                        ? 'border-indigo-500 ' + (isDark ? 'bg-indigo-500/10' : 'bg-indigo-50')
-                                        : (isDark ? 'border-slate-700 hover:border-slate-600' : 'border-gray-200 hover:border-gray-300')}
-                  `, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-1", children: [(0, jsx_runtime_1.jsx)("div", { className: `w-3 h-3 rounded-full border-2 flex items-center justify-center ${isSelected ? 'border-indigo-500' : (isDark ? 'border-slate-500' : 'border-gray-400')}`, children: isSelected && (0, jsx_runtime_1.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-indigo-500" }) }), (0, jsx_runtime_1.jsx)("span", { className: `font-medium ${themeClasses.textPrimary}`, children: mode.label })] }), (0, jsx_runtime_1.jsx)("p", { className: `text-xs ${themeClasses.textMuted} ml-5`, children: mode.description })] }, mode.value));
-                            }) }) })] }), (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.Bell, { className: isDark ? 'text-amber-400' : 'text-amber-500', size: 20 }), (0, jsx_runtime_1.jsx)("h3", { className: `font-semibold ${themeClasses.textPrimary}`, children: "Alert Types" })] }), (0, jsx_runtime_1.jsx)("p", { className: `text-sm ${themeClasses.textMuted} mt-1`, children: "Configure which alerts to receive and their thresholds" })] }), (0, jsx_runtime_1.jsx)("div", { className: "divide-y divide-slate-700/50", children: ALERT_TYPES.map((alertType) => {
-                            const config = editedAlerts[alertType.id];
-                            const Icon = alertType.icon;
-                            return ((0, jsx_runtime_1.jsx)("div", { className: "p-5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: `p-2 rounded-lg ${isDark ? 'bg-slate-700' : 'bg-gray-100'}`, children: (0, jsx_runtime_1.jsx)(Icon, { size: 18, className: themeClasses.textSecondary }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `font-medium ${themeClasses.textPrimary}`, children: alertType.label }), alertType.alwaysSent && ((0, jsx_runtime_1.jsx)("span", { className: `px-2 py-0.5 text-xs rounded ${isDark ? 'bg-red-500/20 text-red-400' : 'bg-red-100 text-red-600'}`, children: "Always sent" }))] }), (0, jsx_runtime_1.jsx)("p", { className: `text-sm ${themeClasses.textMuted}`, children: alertType.description })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [alertType.hasThreshold && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "number", min: "1", max: "100", value: config.threshold ?? config.threshold_pct ?? 10, onChange: (e) => {
-                                                                const val = parseInt(e.target.value) || 10;
-                                                                if (alertType.thresholdUnit?.includes('%')) {
-                                                                    updateAlertConfig(alertType.id, { threshold_pct: val });
-                                                                }
-                                                                else {
-                                                                    updateAlertConfig(alertType.id, { threshold: val });
-                                                                }
-                                                            }, disabled: !config.enabled && !alertType.alwaysSent, className: `
-                            w-16 px-2 py-1.5 rounded text-sm text-center
-                            ${themeClasses.inputBg} ${themeClasses.textPrimary} border
-                            focus:outline-none focus:ring-2 focus:ring-indigo-500
-                            disabled:opacity-50
-                          ` }), (0, jsx_runtime_1.jsx)("span", { className: `text-xs ${themeClasses.textMuted} whitespace-nowrap`, children: alertType.thresholdUnit })] })), !alertType.alwaysSent && ((0, jsx_runtime_1.jsx)("button", { onClick: () => updateAlertConfig(alertType.id, { enabled: !config.enabled }), className: `
-                          relative w-11 h-6 rounded-full transition-colors
-                          ${config.enabled
-                                                        ? (isDark ? 'bg-indigo-600' : 'bg-indigo-500')
-                                                        : (isDark ? 'bg-slate-600' : 'bg-gray-300')}
-                        `, children: (0, jsx_runtime_1.jsx)("span", { className: `
-                            absolute top-1 left-1 w-4 h-4 rounded-full bg-white transition-transform
-                            ${config.enabled ? 'translate-x-5' : ''}
-                          ` }) }))] })] }) }, alertType.id));
-                        }) })] }), (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.Zap, { className: isDark ? 'text-emerald-400' : 'text-emerald-500', size: 20 }), (0, jsx_runtime_1.jsx)("h3", { className: `font-semibold ${themeClasses.textPrimary}`, children: "Rate Limiting" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "p-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("label", { className: `text-sm ${themeClasses.textSecondary}`, children: "Maximum alerts:" }), (0, jsx_runtime_1.jsx)("input", { type: "number", min: "1", max: "100", value: editedRateLimit, onChange: (e) => setEditedRateLimit(parseInt(e.target.value) || 10), 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: "per hour" })] }), (0, jsx_runtime_1.jsxs)("div", { className: `flex items-start gap-2 mt-3 text-xs ${themeClasses.textMuted}`, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Info, { size: 14, className: "flex-shrink-0 mt-0.5" }), (0, jsx_runtime_1.jsx)("span", { children: "Critical alerts (Storage Critical, Agent Expired) are always sent regardless of this limit." })] })] })] }), (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.Send, { className: isDark ? 'text-blue-400' : 'text-blue-500', size: 20 }), (0, jsx_runtime_1.jsx)("h3", { className: `font-semibold ${themeClasses.textPrimary}`, children: "Test & History" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "p-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("select", { disabled: sendingTest || editedRecipients.length === 0, onChange: (e) => {
-                                                    if (e.target.value) {
-                                                        sendTestAlert(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-blue-900/30 text-blue-300 border-blue-700 hover:bg-blue-900/50' : 'bg-blue-50 text-blue-700 border-blue-300 hover:bg-blue-100'}
-                  border focus:outline-none focus:ring-2 focus:ring-blue-500
-                  disabled:opacity-50 disabled:cursor-not-allowed
-                `, children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Send Test Alert..." }), TEST_ALERT_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-blue-400' : 'text-blue-500'}` })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => {
-                                            // TODO: Open history modal or navigate to history page
-                                            window.open(`${apiBasePath}/history`, '_blank');
-                                        }, className: `
-                px-4 py-2.5 rounded-lg text-sm font-medium flex items-center gap-2
-                ${isDark ? 'bg-slate-700 text-white hover:bg-slate-600' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}
-                border ${isDark ? 'border-slate-600' : 'border-gray-300'}
-              `, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.History, { size: 16 }), "View Alert History"] })] }), editedRecipients.length === 0 && ((0, jsx_runtime_1.jsx)("p", { className: `text-xs mt-3 ${themeClasses.textMuted}`, children: "Add at least one recipient to send test alerts." }))] })] }), (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 = AlertSettingsTab;