@payez/next-mvp 3.0.0

package/dist/components/SessionSync.js

@@ -0,0 +1,119 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SessionSync = SessionSync;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("next-auth/react");
+const authStore_1 = require("../stores/authStore");
+const session_1 = require("../lib/session");
+const app_slug_1 = require("../lib/app-slug");
+/**
+ * Sanitize sensitive data for logging
+ * Never log full user IDs or emails in any environment
+ */
+function sanitizeForLog(value, type) {
+    if (!value)
+        return '(empty)';
+    if (type === 'email') {
+        return '***@***'; // Never log emails
+    }
+    if (type === 'userId') {
+        // Only show first 8 chars in development
+        if (process.env.NODE_ENV === 'development') {
+            return value.substring(0, 8) + '...';
+        }
+        return '***'; // Fully redact in production
+    }
+    return '***';
+}
+/**
+ * SessionSync - Bridges NextAuth session with Zustand auth store
+ *
+ * CRITICAL: This component enforces strict session validation. If NextAuth
+ * reports an authenticated status but the session data is invalid (empty user ID,
+ * empty email, or missing access token), it forces a sign-out to prevent
+ * contradictory state like "hasSession: true, userId: ''"
+ *
+ * This ensures the app NEVER shows authenticated UI with empty/invalid session data.
+ */
+function SessionSync({ children }) {
+    const { data: session, status } = (0, react_2.useSession)();
+    const { setSession, clearSession } = (0, authStore_1.useAuthStore)();
+    // Guard against duplicate sign-out calls
+    const isSigningOutRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        let isMounted = true;
+        // Only process when NextAuth has finished loading
+        if (status === 'loading') {
+            return;
+        }
+        // Strict validation: Check if session is actually valid
+        const isValid = (0, session_1.isValidSession)(session);
+        // CRITICAL FIX: If NextAuth says "authenticated" but session is invalid,
+        // this is a broken state that must be fixed immediately
+        if (status === 'authenticated' && !isValid) {
+            // GUARD: Prevent duplicate sign-out
+            if (isSigningOutRef.current) {
+                console.warn('[SessionSync] Sign-out already in progress, skipping');
+                return;
+            }
+            isSigningOutRef.current = true;
+            console.error('[SessionSync] CRITICAL: Invalid session detected despite authenticated status!');
+            console.error('[SessionSync] This indicates a session with empty user data - forcing sign-out');
+            // Log diagnostic info with PII redaction
+            // Note: session is typed as Session | null from NextAuth, but may have invalid/partial data
+            const sessionData = session; // Explicit cast needed for error logging
+            console.error('[SessionSync] Session data:', {
+                hasSessionObject: !!sessionData,
+                hasUser: !!sessionData?.user,
+                userId: sanitizeForLog(sessionData?.user?.id, 'userId'),
+                userEmail: sanitizeForLog(sessionData?.user?.email, 'email'),
+                hasAccessToken: !!sessionData?.accessToken,
+            });
+            // Clear the auth store immediately
+            clearSession();
+            // FIX: Force clear all auth cookies including stale provisional tokens (app-slug prefixed)
+            // This prevents infinite loop when provisional token exists but session is invalid
+            // Root cause: OAuth creates provisional token before Redis session exists
+            try {
+                const secureSession = (0, app_slug_1.getSecureSessionCookieName)();
+                const secureCsrf = (0, app_slug_1.getSecureCsrfCookieName)();
+                const callbackUrl = (0, app_slug_1.getCallbackUrlCookieName)();
+                document.cookie = `${secureSession}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; Secure; SameSite=Lax`;
+                document.cookie = `${secureCsrf}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; SameSite=Lax`;
+                document.cookie = `__Secure-${callbackUrl}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; Secure; SameSite=Lax`;
+            }
+            catch (e) {
+                // Cookie clearing failed - non-critical, continue with signout
+            }
+            // Force NextAuth to sign out (this will clear cookies and trigger redirect)
+            (0, react_2.signOut)({ redirect: false })
+                .then(() => {
+                if (isMounted) {
+                    // Use generic error code instead of implementation details
+                    window.location.href = '/account-auth/login?error=SessionExpired&code=1001';
+                }
+            })
+                .catch((err) => {
+                console.error('[SessionSync] Error during forced signout:', err);
+                if (isMounted) {
+                    window.location.href = '/account-auth/login?error=SessionExpired&code=1001';
+                }
+            });
+            return;
+        }
+        // Normal flow: Update store based on valid session status
+        if (status === 'authenticated' && isValid) {
+            setSession(session);
+        }
+        else if (status === 'unauthenticated') {
+            clearSession();
+        }
+        // Cleanup function to prevent post-unmount updates
+        return () => {
+            isMounted = false;
+        };
+    }, [session, status, setSession, clearSession]);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+}

package/dist/components/SignalRHealthCheck.d.ts

@@ -0,0 +1,10 @@
+interface SignalRHealthCheckProps {
+    className?: string;
+    idpBaseUrl: string;
+}
+/**
+ * Simple health check component using SignalR connection state
+ * Following Occam's Razor: Connection alive = Service healthy, Connection dead = Service unhealthy
+ */
+export default function SignalRHealthCheck({ className, idpBaseUrl }: SignalRHealthCheckProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/SignalRHealthCheck.js

@@ -0,0 +1,97 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SignalRHealthCheck;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const signalrActivityService_1 = require("../services/signalrActivityService");
+/**
+ * Simple health check component using SignalR connection state
+ * Following Occam's Razor: Connection alive = Service healthy, Connection dead = Service unhealthy
+ */
+function SignalRHealthCheck({ className = '', idpBaseUrl }) {
+    // Allow disabling via env for noisy environments (e.g., production demos)
+    if (process.env.NEXT_PUBLIC_DISABLE_HEALTH_MONITOR === 'true') {
+        return null;
+    }
+    const [healthStatus, setHealthStatus] = (0, react_1.useState)({
+        isHealthy: false,
+        message: 'Initializing...',
+        lastHeartbeat: null,
+        connectionId: null
+    });
+    const [isInitializing, setIsInitializing] = (0, react_1.useState)(true);
+    (0, react_1.useEffect)(() => {
+        let unsubscribe = null;
+        const initializeHealthService = async () => {
+            try {
+                // Subscribe to health status changes
+                unsubscribe = signalrActivityService_1.signalRActivityService.subscribe((status) => {
+                    setHealthStatus(status);
+                    setIsInitializing(false);
+                });
+                // Start the health monitoring
+                await signalrActivityService_1.signalRActivityService.start(idpBaseUrl);
+            }
+            catch (error) {
+                // Handle service unavailable gracefully without console spam
+                const errorMessage = error instanceof Error ? error.message : String(error);
+                const isServiceDown = errorMessage.includes('ERR_CONNECTION_REFUSED') ||
+                    errorMessage.includes('Failed to fetch');
+                if (isServiceDown) {
+                    console.info('Health monitoring: Backend service unavailable');
+                    setHealthStatus({
+                        isHealthy: false,
+                        message: 'Backend service offline',
+                        lastHeartbeat: null,
+                        connectionId: null
+                    });
+                }
+                else {
+                    console.error('Failed to initialize SignalR health service:', error);
+                    setHealthStatus({
+                        isHealthy: false,
+                        message: 'Failed to initialize health monitoring',
+                        lastHeartbeat: null,
+                        connectionId: null
+                    });
+                }
+                setIsInitializing(false);
+            }
+        };
+        initializeHealthService();
+        // Cleanup on unmount
+        return () => {
+            if (unsubscribe) {
+                unsubscribe();
+            }
+        };
+    }, [idpBaseUrl]);
+    const getStatusColor = () => {
+        if (isInitializing)
+            return 'text-yellow-600';
+        return healthStatus.isHealthy ? 'text-green-600' : 'text-orange-600'; // Orange instead of alarming red
+    };
+    const getStatusIcon = () => {
+        if (isInitializing)
+            return '🔄';
+        return healthStatus.isHealthy ? '✅' : '🔶'; // Orange diamond instead of scary red X
+    };
+    const getStatusMessage = () => {
+        if (isInitializing)
+            return 'Connecting to service...';
+        return healthStatus.message;
+    };
+    const formatLastHeartbeat = () => {
+        if (!healthStatus.lastHeartbeat)
+            return null;
+        const now = new Date();
+        const diff = Math.floor((now.getTime() - healthStatus.lastHeartbeat.getTime()) / 1000);
+        if (diff < 60)
+            return `${diff}s ago`;
+        if (diff < 3600)
+            return `${Math.floor(diff / 60)}m ago`;
+        return `${Math.floor(diff / 3600)}h ago`;
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex items-center space-x-2 ${className}`, children: [(0, jsx_runtime_1.jsx)("span", { className: "text-lg", role: "img", "aria-label": "status", children: getStatusIcon() }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: `text-sm font-medium ${getStatusColor()}`, children: getStatusMessage() }), healthStatus.lastHeartbeat && ((0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-gray-500", children: ["Last heartbeat: ", formatLastHeartbeat()] }))] })] }));
+}

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

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

@@ -0,0 +1,80 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserAvatarMenu = UserAvatarMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("next-auth/react");
+const navigation_1 = require("next/navigation");
+const lucide_react_1 = require("lucide-react");
+function UserAvatarMenu({ basePath = '', showProfile = true, showSettings = true, showSecurity = true, customItems, onSignOut, }) {
+    const { data: session, status } = (0, react_2.useSession)();
+    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;
+    }
+    const userInitial = session.user.email?.charAt(0).toUpperCase() || 'U';
+    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 (0, react_2.signOut)({ callbackUrl: 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 bg-[#349AD5] text-white font-semibold text-lg hover:bg-[#2980b9] transition-colors focus:outline-none focus:ring-2 focus:ring-[#349AD5] focus:ring-offset-2 dark:focus:ring-offset-slate-900", "aria-label": "User menu", "aria-expanded": isOpen, "aria-haspopup": "true", children: 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.jsx)("p", { className: "text-sm text-gray-500 dark:text-slate-400 truncate", children: session.user.email }) }), (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

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

package/dist/components/account/index.js

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

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

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