@payez/next-mvp 3.0.0

package/dist/components/admin/StatsTab.js

@@ -0,0 +1,161 @@
+"use strict";
+/**
+ * =============================================================================
+ * VIBE ADMIN STATS TAB
+ * =============================================================================
+ *
+ * Generic dashboard stats overview tab.
+ * Shows high-level metrics about users, sessions, and system health.
+ *
+ * =============================================================================
+ */
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatsTab = StatsTab;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+// -----------------------------------------------------------------------------
+// COMPONENT
+// -----------------------------------------------------------------------------
+function StatsTab({ isDark = true, apiBasePath = '/api/admin/stats', customStats, quickActions, children, }) {
+    const [stats, setStats] = (0, react_1.useState)([]);
+    const [recentActivity, setRecentActivity] = (0, react_1.useState)([]);
+    const [systemStatus, setSystemStatus] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const themeClasses = {
+        cardBg: isDark ? 'bg-slate-800 border-slate-700' : 'bg-white border-gray-200 shadow-sm',
+        textPrimary: isDark ? 'text-white' : 'text-gray-900',
+        textSecondary: isDark ? 'text-gray-400' : 'text-gray-600',
+        textMuted: isDark ? 'text-gray-500' : 'text-gray-500',
+    };
+    const colorClasses = {
+        blue: { bg: 'bg-blue-500/10', text: 'text-blue-400', icon: 'text-blue-400' },
+        green: { bg: 'bg-emerald-500/10', text: 'text-emerald-400', icon: 'text-emerald-400' },
+        purple: { bg: 'bg-purple-500/10', text: 'text-purple-400', icon: 'text-purple-400' },
+        orange: { bg: 'bg-orange-500/10', text: 'text-orange-400', icon: 'text-orange-400' },
+        red: { bg: 'bg-red-500/10', text: 'text-red-400', icon: 'text-red-400' },
+        cyan: { bg: 'bg-cyan-500/10', text: 'text-cyan-400', icon: 'text-cyan-400' },
+    };
+    const defaultIcons = {
+        users: lucide_react_1.Users,
+        sessions: lucide_react_1.Activity,
+        uptime: lucide_react_1.Clock,
+        growth: lucide_react_1.TrendingUp,
+        security: lucide_react_1.Shield,
+        system: lucide_react_1.Server,
+    };
+    const fetchStats = (0, react_1.useCallback)(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const res = await fetch(apiBasePath);
+            if (!res.ok)
+                throw new Error('Failed to fetch stats');
+            const data = await res.json();
+            // Map API response to stat cards
+            const apiStats = [];
+            if (data.totalUsers !== undefined) {
+                apiStats.push({
+                    id: 'users',
+                    label: 'Total Users',
+                    value: data.totalUsers,
+                    change: data.userGrowth ? `+${data.userGrowth}%` : undefined,
+                    changeType: 'positive',
+                    icon: lucide_react_1.Users,
+                    color: 'blue',
+                });
+            }
+            if (data.activeSessions !== undefined) {
+                apiStats.push({
+                    id: 'sessions',
+                    label: 'Active Sessions',
+                    value: data.activeSessions,
+                    icon: lucide_react_1.Activity,
+                    color: 'green',
+                });
+            }
+            if (data.todayLogins !== undefined) {
+                apiStats.push({
+                    id: 'logins',
+                    label: 'Today Logins',
+                    value: data.todayLogins,
+                    icon: lucide_react_1.Clock,
+                    color: 'purple',
+                });
+            }
+            if (data.newUsersToday !== undefined) {
+                apiStats.push({
+                    id: 'new_users',
+                    label: 'New Users Today',
+                    value: data.newUsersToday,
+                    icon: lucide_react_1.TrendingUp,
+                    color: 'orange',
+                });
+            }
+            // Merge custom stats with API stats
+            setStats(customStats ? [...apiStats, ...customStats] : apiStats);
+            // Set recent activity if available
+            if (data.recentActivity) {
+                setRecentActivity(data.recentActivity);
+            }
+            // Set system status if available
+            if (data.systemStatus) {
+                setSystemStatus(data.systemStatus);
+            }
+        }
+        catch (err) {
+            setError(err.message);
+            // Use custom stats as fallback
+            if (customStats) {
+                setStats(customStats);
+            }
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [apiBasePath, customStats]);
+    (0, react_1.useEffect)(() => {
+        fetchStats();
+        // Refresh stats every 60 seconds
+        const interval = setInterval(fetchStats, 60000);
+        return () => clearInterval(interval);
+    }, [fetchStats]);
+    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);
+        if (diffSec < 60)
+            return 'Just now';
+        if (diffMin < 60)
+            return `${diffMin}m ago`;
+        if (diffHour < 24)
+            return `${diffHour}h ago`;
+        return date.toLocaleDateString();
+    };
+    if (loading && stats.length === 0) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center py-12", children: (0, jsx_runtime_1.jsxs)("svg", { className: "animate-spin h-8 w-8 text-blue-400", viewBox: "0 0 24 24", fill: "none", children: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })] }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [error && ((0, jsx_runtime_1.jsxs)("div", { className: `p-4 rounded-lg ${isDark ? 'bg-red-900/30 border-red-700' : 'bg-red-50 border-red-300'} border ${isDark ? 'text-red-300' : 'text-red-700'}`, children: [error, (0, jsx_runtime_1.jsx)("button", { onClick: fetchStats, className: "ml-4 underline", children: "Retry" })] })), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4", children: stats.map((stat) => {
+                    const Icon = stat.icon || defaultIcons[stat.id] || lucide_react_1.Activity;
+                    const colors = colorClasses[stat.color || 'blue'];
+                    return ((0, jsx_runtime_1.jsx)("div", { className: `${themeClasses.cardBg} border rounded-xl p-5`, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: `text-sm ${themeClasses.textSecondary}`, children: stat.label }), (0, jsx_runtime_1.jsx)("p", { className: `text-3xl font-bold ${themeClasses.textPrimary} mt-1`, children: typeof stat.value === 'number' ? stat.value.toLocaleString() : stat.value }), stat.change && ((0, jsx_runtime_1.jsx)("p", { className: `text-sm mt-1 ${stat.changeType === 'positive' ? 'text-emerald-400' :
+                                                stat.changeType === 'negative' ? 'text-red-400' :
+                                                    themeClasses.textMuted}`, children: stat.change }))] }), (0, jsx_runtime_1.jsx)("div", { className: `p-3 rounded-lg ${colors.bg}`, children: (0, jsx_runtime_1.jsx)(Icon, { className: `w-6 h-6 ${colors.icon}` }) })] }) }, stat.id));
+                }) }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: `lg:col-span-2 ${themeClasses.cardBg} border rounded-xl`, 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.jsx)("h3", { className: `font-semibold ${themeClasses.textPrimary}`, children: "Recent Activity" }) }), (0, jsx_runtime_1.jsx)("div", { className: "p-5", children: recentActivity.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: recentActivity.map((activity) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: `w-2 h-2 rounded-full mt-2 ${activity.type === 'login' ? 'bg-green-400' :
+                                                    activity.type === 'signup' ? 'bg-blue-400' :
+                                                        activity.type === 'error' ? 'bg-red-400' :
+                                                            'bg-gray-400'}` }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("p", { className: `text-sm ${themeClasses.textPrimary}`, children: activity.message }), (0, jsx_runtime_1.jsxs)("div", { className: `flex items-center gap-2 text-xs ${themeClasses.textMuted} mt-1`, children: [activity.user && (0, jsx_runtime_1.jsx)("span", { children: activity.user }), (0, jsx_runtime_1.jsx)("span", { children: getTimeAgo(activity.timestamp) })] })] })] }, activity.id))) })) : ((0, jsx_runtime_1.jsx)("p", { className: `text-center py-8 ${themeClasses.textMuted}`, children: "No recent activity" })) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [quickActions && quickActions.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-xl`, 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.jsx)("h3", { className: `font-semibold ${themeClasses.textPrimary}`, children: "Quick Actions" }) }), (0, jsx_runtime_1.jsx)("div", { className: "p-3", children: quickActions.map((action) => {
+                                            const Icon = action.icon || lucide_react_1.Activity;
+                                            return ((0, jsx_runtime_1.jsx)("button", { onClick: action.onClick, className: `w-full text-left p-3 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-700' : 'hover:bg-gray-100'}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(Icon, { className: `w-5 h-5 ${themeClasses.textSecondary}` }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: `font-medium ${themeClasses.textPrimary}`, children: action.label }), (0, jsx_runtime_1.jsx)("p", { className: `text-xs ${themeClasses.textMuted}`, children: action.description })] })] }) }, action.id));
+                                        }) })] })), systemStatus.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: `${themeClasses.cardBg} border rounded-xl`, 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.jsx)("h3", { className: `font-semibold ${themeClasses.textPrimary}`, children: "System Status" }) }), (0, jsx_runtime_1.jsx)("div", { className: "p-5 space-y-3", children: systemStatus.map((service) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: `w-2 h-2 rounded-full ${service.status === 'healthy' ? 'bg-emerald-400' :
+                                                                service.status === 'degraded' ? 'bg-amber-400' :
+                                                                    'bg-red-400'}` }), (0, jsx_runtime_1.jsx)("span", { className: themeClasses.textPrimary, children: service.service })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [service.latency !== undefined && ((0, jsx_runtime_1.jsxs)("span", { className: `text-xs ${themeClasses.textMuted}`, children: [service.latency, "ms"] })), (0, jsx_runtime_1.jsx)("span", { className: `text-xs px-2 py-0.5 rounded ${service.status === 'healthy' ? 'bg-emerald-500/20 text-emerald-400' :
+                                                                service.status === 'degraded' ? 'bg-amber-500/20 text-amber-400' :
+                                                                    'bg-red-500/20 text-red-400'}`, children: service.status })] })] }, service.service))) })] }))] })] }), children] }));
+}
+exports.default = StatsTab;

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

@@ -0,0 +1,32 @@
+import React, { ReactNode } from 'react';
+export interface VibeAdminConfig {
+    /** Collection name for this tenant (e.g., "ideal_resume", "idealvibe_app") */
+    collectionName: string;
+    /** Display name for the app (e.g., "IdealResume", "IdealVibe") */
+    appName: string;
+    /** Optional logo URL */
+    logoUrl?: string;
+    /** Base path for admin routes (default: /vibe-admin) */
+    basePath?: string;
+    /** Custom tabs to add to the admin panel */
+    customTabs?: AdminTab[];
+    /** Theme mode override */
+    isDarkMode?: boolean;
+}
+export interface AdminTab {
+    id: string;
+    label: string;
+    icon?: React.ElementType;
+    component: React.ComponentType;
+}
+export interface VibeAdminContextValue extends VibeAdminConfig {
+    /** All tabs including defaults and custom */
+    allTabs: AdminTab[];
+}
+export declare function useVibeAdmin(): VibeAdminContextValue;
+interface VibeAdminProviderProps {
+    config: VibeAdminConfig;
+    children: ReactNode;
+}
+export declare function VibeAdminProvider({ config, children }: VibeAdminProviderProps): import("react/jsx-runtime").JSX.Element;
+export default VibeAdminProvider;

package/dist/components/admin/VibeAdminContext.js

@@ -0,0 +1,38 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVibeAdmin = useVibeAdmin;
+exports.VibeAdminProvider = VibeAdminProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// -----------------------------------------------------------------------------
+// CONTEXT
+// -----------------------------------------------------------------------------
+const VibeAdminContext = (0, react_1.createContext)(null);
+// -----------------------------------------------------------------------------
+// HOOK
+// -----------------------------------------------------------------------------
+function useVibeAdmin() {
+    const context = (0, react_1.useContext)(VibeAdminContext);
+    if (!context) {
+        throw new Error('useVibeAdmin must be used within a VibeAdminProvider');
+    }
+    return context;
+}
+function VibeAdminProvider({ config, children }) {
+    // Default tabs - will be populated with actual components
+    const defaultTabs = [
+        { id: 'stats', label: 'Stats', component: () => null },
+        { id: 'users', label: 'Users', component: () => null },
+        { id: 'sessions', label: 'Sessions', component: () => null },
+        { id: 'analytics', label: 'Analytics', component: () => null },
+    ];
+    const allTabs = [...defaultTabs, ...(config.customTabs || [])];
+    const value = {
+        ...config,
+        basePath: config.basePath || '/vibe-admin',
+        allTabs,
+    };
+    return ((0, jsx_runtime_1.jsx)(VibeAdminContext.Provider, { value: value, children: children }));
+}
+exports.default = VibeAdminProvider;

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+interface VibeAdminLayoutProps {
+    children?: ReactNode;
+    activeTabId?: string;
+    onTabChange?: (tabId: string) => void;
+    headerContent?: ReactNode;
+    isDarkMode?: boolean;
+    adminRole?: string;
+}
+export declare function VibeAdminLayout({ children, activeTabId, onTabChange, headerContent, isDarkMode: isDarkModeProp, adminRole, }: VibeAdminLayoutProps): import("react/jsx-runtime").JSX.Element | null;
+export default VibeAdminLayout;

package/dist/components/admin/VibeAdminLayout.js

@@ -0,0 +1,69 @@
+"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.VibeAdminLayout = VibeAdminLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("next-auth/react");
+const navigation_1 = require("next/navigation");
+const react_2 = require("react");
+const link_1 = __importDefault(require("next/link"));
+const VibeAdminContext_1 = require("./VibeAdminContext");
+const lucide_react_1 = require("lucide-react");
+const defaultNavItems = [
+    { id: 'stats', label: 'Dashboard', icon: lucide_react_1.LayoutDashboard },
+    { id: 'users', label: 'Users', icon: lucide_react_1.Users },
+    { id: 'sessions', label: 'Sessions', icon: lucide_react_1.Activity },
+    { id: 'analytics', label: 'Analytics', icon: lucide_react_1.BarChart3 },
+    { id: 'data', label: 'Data Browser', icon: lucide_react_1.Database },
+    { id: 'settings', label: 'Settings', icon: lucide_react_1.Settings },
+];
+function VibeAdminLayout({ children, activeTabId = 'stats', onTabChange, headerContent, isDarkMode: isDarkModeProp, adminRole = 'vibe_app_admin', }) {
+    const { data: session, status } = (0, react_1.useSession)();
+    const router = (0, navigation_1.useRouter)();
+    const adminConfig = (0, VibeAdminContext_1.useVibeAdmin)();
+    const isDark = isDarkModeProp ?? adminConfig.isDarkMode ?? false;
+    const basePath = adminConfig.basePath || '/vibe-admin';
+    const navItems = [...defaultNavItems];
+    adminConfig.customTabs?.forEach((tab) => {
+        navItems.push({
+            id: tab.id,
+            label: tab.label,
+            icon: tab.icon || lucide_react_1.LayoutDashboard,
+        });
+    });
+    const userRoles = session?.user?.roles || [];
+    const hasAdminRole = userRoles.includes(adminRole) || userRoles.includes('payez_admin');
+    (0, react_2.useEffect)(() => {
+        if (status === 'unauthenticated') {
+            router.push('/account-auth/login?callbackUrl=' + basePath);
+            return;
+        }
+        if (status === 'authenticated' && !hasAdminRole) {
+            router.push('/?error=unauthorized');
+        }
+    }, [status, hasAdminRole, router, basePath]);
+    if (status === 'loading') {
+        return ((0, jsx_runtime_1.jsx)("div", { className: 'min-h-screen flex items-center justify-center ' + (isDark ? 'bg-slate-950' : 'bg-gray-50'), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-500" }), (0, jsx_runtime_1.jsx)("p", { className: isDark ? 'text-slate-400' : 'text-slate-600', children: "Loading..." })] }) }));
+    }
+    if (status === 'authenticated' && !hasAdminRole) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: 'min-h-screen flex items-center justify-center ' + (isDark ? 'bg-slate-950' : 'bg-gray-50'), children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Shield, { className: 'w-16 h-16 mx-auto mb-4 ' + (isDark ? 'text-red-400' : 'text-red-500') }), (0, jsx_runtime_1.jsx)("h1", { className: 'text-2xl font-bold mb-2 ' + (isDark ? 'text-white' : 'text-gray-900'), children: "Access Denied" }), (0, jsx_runtime_1.jsx)("p", { className: 'mb-6 ' + (isDark ? 'text-slate-400' : 'text-slate-600'), children: "You do not have permission to access the admin panel." }), (0, jsx_runtime_1.jsxs)(link_1.default, { href: "/", className: "inline-flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { className: "w-4 h-4" }), "Return to Home"] })] }) }));
+    }
+    if (status === 'unauthenticated') {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'min-h-screen ' + (isDark ? 'bg-slate-950 text-white' : 'bg-gray-50 text-gray-900'), children: [(0, jsx_runtime_1.jsx)("header", { className: 'sticky top-0 z-40 border-b ' + (isDark ? 'bg-slate-900 border-slate-800' : 'bg-white border-gray-200'), children: (0, jsx_runtime_1.jsx)("div", { className: "container mx-auto px-4 py-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [adminConfig.logoUrl && ((0, jsx_runtime_1.jsx)("div", { className: 'p-2 rounded-lg ' + (isDark ? 'bg-indigo-900/30' : 'bg-indigo-100'), children: (0, jsx_runtime_1.jsx)("img", { src: adminConfig.logoUrl, alt: adminConfig.appName, className: "w-6 h-6" }) })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-xl font-bold", children: "Platform Admin" }), (0, jsx_runtime_1.jsxs)("p", { className: 'text-sm ' + (isDark ? 'text-slate-400' : 'text-slate-600'), children: [adminConfig.appName, " - ", adminConfig.collectionName] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [headerContent, (0, jsx_runtime_1.jsxs)(link_1.default, { href: "/", className: 'flex items-center gap-2 px-3 py-2 rounded-lg transition-colors ' + (isDark ? 'hover:bg-slate-800 text-slate-400' : 'hover:bg-gray-100 text-slate-600'), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { className: "w-4 h-4" }), "Back to App"] })] })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "container mx-auto px-4 py-4", children: [(0, jsx_runtime_1.jsx)("nav", { className: 'flex items-center gap-1 mb-6 border-b ' + (isDark ? 'border-slate-800' : 'border-gray-200'), children: navItems.map((item) => {
+                            const isActive = activeTabId === item.id;
+                            const Icon = item.icon;
+                            const activeClass = isDark
+                                ? 'border-indigo-500 text-indigo-400'
+                                : 'border-indigo-600 text-indigo-700';
+                            const inactiveClass = isDark
+                                ? 'border-transparent text-slate-400 hover:text-white hover:border-slate-600'
+                                : 'border-transparent text-slate-600 hover:text-gray-900 hover:border-gray-300';
+                            return ((0, jsx_runtime_1.jsxs)("button", { onClick: () => onTabChange?.(item.id), className: 'flex items-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px ' + (isActive ? activeClass : inactiveClass), children: [(0, jsx_runtime_1.jsx)(Icon, { className: "w-4 h-4" }), item.label] }, item.id));
+                        }) }), (0, jsx_runtime_1.jsx)("main", { className: "min-w-0", children: children })] })] }));
+}
+exports.default = VibeAdminLayout;

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

@@ -0,0 +1,29 @@
+/**
+ * =============================================================================
+ * VIBE ADMIN COMPONENTS
+ * =============================================================================
+ *
+ * Generic admin panel components for Vibe-powered applications.
+ * These components are designed to be multi-tenant and can be configured
+ * per-collection via the VibeAdminProvider.
+ *
+ * Usage:
+ * ------
+ * import {
+ *   VibeAdminProvider,
+ *   VibeAdminLayout,
+ *   SessionsTab,
+ *   AnalyticsTab,
+ *   StatsTab,
+ * } from '@payez/next-mvp/components/admin';
+ *
+ * =============================================================================
+ */
+export { VibeAdminProvider, useVibeAdmin, type VibeAdminConfig, type AdminTab, type VibeAdminContextValue, } from './VibeAdminContext';
+export { VibeAdminLayout } from './VibeAdminLayout';
+export { SessionsTab, type SessionsTabProps, type LoginSession, type SessionStats } from './SessionsTab';
+export { AnalyticsTab, type AnalyticsTabProps } from './AnalyticsTab';
+export { StatsTab, type StatsTabProps, type StatCard, type QuickAction, type RecentActivity, type SystemStatus } from './StatsTab';
+export { DataBrowserTab, type DataBrowserTabProps, type CollectionInfo, type TableInfo } from './DataBrowserTab';
+export { LoggingSettingsTab, type LoggingSettingsTabProps, type LogLevel, type LogLevels, type RetentionSettings, type StorageLimits, type UsageStats, type LoggingSettings, } from './LoggingSettingsTab';
+export { AlertSettingsTab, type AlertSettingsTabProps, type DeliveryMode, type AlertConfig, type AlertsConfig, type RateLimit, type AlertSettings, type AlertHistoryItem, } from './AlertSettingsTab';

package/dist/components/admin/index.js

@@ -0,0 +1,44 @@
+"use strict";
+/**
+ * =============================================================================
+ * VIBE ADMIN COMPONENTS
+ * =============================================================================
+ *
+ * Generic admin panel components for Vibe-powered applications.
+ * These components are designed to be multi-tenant and can be configured
+ * per-collection via the VibeAdminProvider.
+ *
+ * Usage:
+ * ------
+ * import {
+ *   VibeAdminProvider,
+ *   VibeAdminLayout,
+ *   SessionsTab,
+ *   AnalyticsTab,
+ *   StatsTab,
+ * } from '@payez/next-mvp/components/admin';
+ *
+ * =============================================================================
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertSettingsTab = exports.LoggingSettingsTab = exports.DataBrowserTab = exports.StatsTab = exports.AnalyticsTab = exports.SessionsTab = exports.VibeAdminLayout = exports.useVibeAdmin = exports.VibeAdminProvider = void 0;
+// Context & Provider
+var VibeAdminContext_1 = require("./VibeAdminContext");
+Object.defineProperty(exports, "VibeAdminProvider", { enumerable: true, get: function () { return VibeAdminContext_1.VibeAdminProvider; } });
+Object.defineProperty(exports, "useVibeAdmin", { enumerable: true, get: function () { return VibeAdminContext_1.useVibeAdmin; } });
+// Layout
+var VibeAdminLayout_1 = require("./VibeAdminLayout");
+Object.defineProperty(exports, "VibeAdminLayout", { enumerable: true, get: function () { return VibeAdminLayout_1.VibeAdminLayout; } });
+// Tab Components
+var SessionsTab_1 = require("./SessionsTab");
+Object.defineProperty(exports, "SessionsTab", { enumerable: true, get: function () { return SessionsTab_1.SessionsTab; } });
+var AnalyticsTab_1 = require("./AnalyticsTab");
+Object.defineProperty(exports, "AnalyticsTab", { enumerable: true, get: function () { return AnalyticsTab_1.AnalyticsTab; } });
+var StatsTab_1 = require("./StatsTab");
+Object.defineProperty(exports, "StatsTab", { enumerable: true, get: function () { return StatsTab_1.StatsTab; } });
+var DataBrowserTab_1 = require("./DataBrowserTab");
+Object.defineProperty(exports, "DataBrowserTab", { enumerable: true, get: function () { return DataBrowserTab_1.DataBrowserTab; } });
+var LoggingSettingsTab_1 = require("./LoggingSettingsTab");
+Object.defineProperty(exports, "LoggingSettingsTab", { enumerable: true, get: function () { return LoggingSettingsTab_1.LoggingSettingsTab; } });
+var AlertSettingsTab_1 = require("./AlertSettingsTab");
+Object.defineProperty(exports, "AlertSettingsTab", { enumerable: true, get: function () { return AlertSettingsTab_1.AlertSettingsTab; } });

package/dist/components/auth/FederatedAuthSection.d.ts

@@ -0,0 +1,8 @@
+import { FederatedProvider } from '@/types/auth';
+interface Props {
+    providers: FederatedProvider[];
+    onProviderClick: (provider: FederatedProvider) => void;
+    isLoading?: boolean;
+}
+export declare function FederatedAuthSection({ providers, onProviderClick, isLoading }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/auth/FederatedAuthSection.js

@@ -0,0 +1,45 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FederatedAuthSection = FederatedAuthSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const providerIcons = {
+    google: {
+        label: 'Google',
+        color: '#4285F4',
+        svg: ((0, jsx_runtime_1.jsxs)("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "currentColor", children: [(0, jsx_runtime_1.jsx)("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z", fill: "#4285F4" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }), (0, jsx_runtime_1.jsx)("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z", fill: "#FBBC05" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })] })),
+    },
+    microsoft: {
+        label: 'Microsoft',
+        color: '#0078D4',
+        svg: ((0, jsx_runtime_1.jsxs)("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "currentColor", children: [(0, jsx_runtime_1.jsx)("rect", { x: "1", y: "1", width: "9", height: "9", fill: "#F25022" }), (0, jsx_runtime_1.jsx)("rect", { x: "12", y: "1", width: "9", height: "9", fill: "#7FBA00" }), (0, jsx_runtime_1.jsx)("rect", { x: "1", y: "12", width: "9", height: "9", fill: "#00A4EF" }), (0, jsx_runtime_1.jsx)("rect", { x: "12", y: "12", width: "9", height: "9", fill: "#FFB900" })] })),
+    },
+    facebook: {
+        label: 'Facebook',
+        color: '#1877F2',
+        svg: ((0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "#1877F2", children: (0, jsx_runtime_1.jsx)("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" }) })),
+    },
+    github: {
+        label: 'GitHub',
+        color: '#000000',
+        svg: ((0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" }) })),
+    },
+    apple: {
+        label: 'Apple',
+        color: '#000000',
+        svg: ((0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { d: "M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }) })),
+    },
+};
+function FederatedAuthSection({ providers, onProviderClick, isLoading }) {
+    if (!providers.length) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: providers.map((provider) => {
+            const config = providerIcons[provider];
+            return ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => onProviderClick(provider), disabled: isLoading, className: `w-full px-4 py-3 rounded-lg border-2 font-semibold transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed`, style: {
+                    border: '1px solid var(--border-default)',
+                    color: 'var(--text-primary)',
+                    background: 'var(--bg-default)',
+                }, children: [config.svg, "Continue with ", config.label] }, provider));
+        }) }));
+}

package/dist/components/auth/ModeAwareLoginPage.d.ts

@@ -0,0 +1,10 @@
+import { FederatedProvider } from '@/types/auth';
+interface Props {
+    onFederatedSignIn?: (provider: FederatedProvider) => void;
+    onTraditionalSignIn?: (email: string, password: string) => Promise<void>;
+    onForgotPassword?: () => void;
+    isLoading?: boolean;
+    error?: string | null;
+}
+export declare function ModeAwareLoginPage({ onFederatedSignIn, onTraditionalSignIn, onForgotPassword, isLoading, error, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/auth/ModeAwareLoginPage.js

@@ -0,0 +1,42 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModeAwareLoginPage = ModeAwareLoginPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const AuthContext_1 = require("../../client/AuthContext");
+const FederatedAuthSection_1 = require("./FederatedAuthSection");
+const TraditionalAuthSection_1 = require("./TraditionalAuthSection");
+function ModeAwareLoginPage({ onFederatedSignIn, onTraditionalSignIn, onForgotPassword, isLoading = false, error = null, }) {
+    const config = (0, AuthContext_1.useAuthConfig)();
+    const [email, setEmail] = (0, react_1.useState)('');
+    const [password, setPassword] = (0, react_1.useState)('');
+    const [localLoading, setLocalLoading] = (0, react_1.useState)(false);
+    const handleFederatedClick = (provider) => {
+        onFederatedSignIn?.(provider);
+    };
+    const handleTraditionalSubmit = async (e) => {
+        e.preventDefault();
+        if (!onTraditionalSignIn)
+            return;
+        setLocalLoading(true);
+        try {
+            await onTraditionalSignIn(email, password);
+        }
+        finally {
+            setLocalLoading(false);
+        }
+    };
+    const isFederated = config.mode === 'federated';
+    const isTraditional = config.mode === 'traditional';
+    const totalLoading = isLoading || localLoading;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [error && ((0, jsx_runtime_1.jsx)("div", { className: "mb-6 px-4 py-3 rounded-lg", style: {
+                    background: 'var(--color-error, #ef4444)',
+                    color: 'white',
+                }, children: error })), isFederated && ((0, jsx_runtime_1.jsx)(FederatedAuthSection_1.FederatedAuthSection, { providers: config.providers, onProviderClick: handleFederatedClick, isLoading: totalLoading })), isTraditional && ((0, jsx_runtime_1.jsx)(TraditionalAuthSection_1.TraditionalAuthSection, { email: email, password: password, onEmailChange: setEmail, onPasswordChange: setPassword, onSubmit: handleTraditionalSubmit, isLoading: totalLoading, buttonText: "Sign In", showForgotPassword: config.enableRecovery, onForgotPassword: onForgotPassword })), isFederated === false && isTraditional === false && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FederatedAuthSection_1.FederatedAuthSection, { providers: config.providers, onProviderClick: handleFederatedClick, isLoading: totalLoading }), config.providers.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "relative my-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 flex items-center", children: (0, jsx_runtime_1.jsx)("div", { className: "w-full", style: {
+                                        borderTop: '1px solid var(--border-default)',
+                                    } }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex justify-center text-sm", children: (0, jsx_runtime_1.jsx)("span", { className: "px-2", style: {
+                                        background: 'var(--bg-card)',
+                                        color: 'var(--text-secondary)',
+                                    }, children: "Or sign in with email" }) })] })), (0, jsx_runtime_1.jsx)(TraditionalAuthSection_1.TraditionalAuthSection, { email: email, password: password, onEmailChange: setEmail, onPasswordChange: setPassword, onSubmit: handleTraditionalSubmit, isLoading: totalLoading, buttonText: "Sign In", showForgotPassword: config.enableRecovery, onForgotPassword: onForgotPassword })] }))] }));
+}

package/dist/components/auth/ModeAwareSignupPage.d.ts

@@ -0,0 +1,9 @@
+import { FederatedProvider } from '@/types/auth';
+interface Props {
+    onFederatedSignUp?: (provider: FederatedProvider) => void;
+    onTraditionalSignUp?: (email: string, password: string, confirmPassword: string) => Promise<void>;
+    isLoading?: boolean;
+    error?: string | null;
+}
+export declare function ModeAwareSignupPage({ onFederatedSignUp, onTraditionalSignUp, isLoading, error, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/auth/ModeAwareSignupPage.js

@@ -0,0 +1,78 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModeAwareSignupPage = ModeAwareSignupPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const AuthContext_1 = require("../../client/AuthContext");
+const FederatedAuthSection_1 = require("./FederatedAuthSection");
+function ModeAwareSignupPage({ onFederatedSignUp, onTraditionalSignUp, isLoading = false, error = null, }) {
+    const config = (0, AuthContext_1.useAuthConfig)();
+    const [email, setEmail] = (0, react_1.useState)('');
+    const [password, setPassword] = (0, react_1.useState)('');
+    const [confirmPassword, setConfirmPassword] = (0, react_1.useState)('');
+    const [localLoading, setLocalLoading] = (0, react_1.useState)(false);
+    const handleFederatedClick = (provider) => {
+        onFederatedSignUp?.(provider);
+    };
+    const handleTraditionalSubmit = async (e) => {
+        e.preventDefault();
+        if (!onTraditionalSignUp)
+            return;
+        if (password !== confirmPassword) {
+            alert('Passwords do not match');
+            return;
+        }
+        setLocalLoading(true);
+        try {
+            await onTraditionalSignUp(email, password, confirmPassword);
+        }
+        finally {
+            setLocalLoading(false);
+        }
+    };
+    const isFederated = config.mode === 'federated';
+    const isTraditional = config.mode === 'traditional';
+    const totalLoading = isLoading || localLoading;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [error && ((0, jsx_runtime_1.jsx)("div", { className: "mb-6 px-4 py-3 rounded-lg", style: {
+                    background: 'var(--color-error, #ef4444)',
+                    color: 'white',
+                }, children: error })), isFederated && ((0, jsx_runtime_1.jsx)(FederatedAuthSection_1.FederatedAuthSection, { providers: config.providers, onProviderClick: handleFederatedClick, isLoading: totalLoading })), isTraditional && config.enableEmailSignup && ((0, jsx_runtime_1.jsxs)("form", { onSubmit: handleTraditionalSubmit, className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-sm font-medium mb-2", style: { color: 'var(--text-primary)' }, children: "Email Address" }), (0, jsx_runtime_1.jsx)("input", { type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "you@example.com", disabled: totalLoading, required: true, className: "w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50", style: {
+                                    border: '1px solid var(--border-default)',
+                                    color: 'var(--text-primary)',
+                                    background: 'var(--bg-default)',
+                                } })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-sm font-medium mb-2", style: { color: 'var(--text-primary)' }, children: "Password" }), (0, jsx_runtime_1.jsx)("input", { type: "password", value: password, onChange: (e) => setPassword(e.target.value), placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", disabled: totalLoading, required: true, className: "w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50", style: {
+                                    border: '1px solid var(--border-default)',
+                                    color: 'var(--text-primary)',
+                                    background: 'var(--bg-default)',
+                                } })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-sm font-medium mb-2", style: { color: 'var(--text-primary)' }, children: "Confirm Password" }), (0, jsx_runtime_1.jsx)("input", { type: "password", value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", disabled: totalLoading, required: true, className: "w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50", style: {
+                                    border: '1px solid var(--border-default)',
+                                    color: 'var(--text-primary)',
+                                    background: 'var(--bg-default)',
+                                } })] }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: totalLoading, className: "w-full py-3 px-4 rounded-lg font-semibold focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors mt-6", style: {
+                            border: '1px solid var(--border-default)',
+                            color: 'white',
+                            background: 'var(--color-primary, #10b981)',
+                        }, children: totalLoading ? 'Creating Account...' : 'Create Account' })] })), isFederated === false && isTraditional === false && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FederatedAuthSection_1.FederatedAuthSection, { providers: config.providers, onProviderClick: handleFederatedClick, isLoading: totalLoading }), config.providers.length > 0 && config.enableEmailSignup && ((0, jsx_runtime_1.jsxs)("div", { className: "relative my-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 flex items-center", children: (0, jsx_runtime_1.jsx)("div", { className: "w-full", style: {
+                                        borderTop: '1px solid var(--border-default)',
+                                    } }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex justify-center text-sm", children: (0, jsx_runtime_1.jsx)("span", { className: "px-2", style: {
+                                        background: 'var(--bg-card)',
+                                        color: 'var(--text-secondary)',
+                                    }, children: "Or sign up with email" }) })] })), config.enableEmailSignup && ((0, jsx_runtime_1.jsxs)("form", { onSubmit: handleTraditionalSubmit, className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-sm font-medium mb-2", style: { color: 'var(--text-primary)' }, children: "Email Address" }), (0, jsx_runtime_1.jsx)("input", { type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "you@example.com", disabled: totalLoading, required: true, className: "w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50", style: {
+                                            border: '1px solid var(--border-default)',
+                                            color: 'var(--text-primary)',
+                                            background: 'var(--bg-default)',
+                                        } })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-sm font-medium mb-2", style: { color: 'var(--text-primary)' }, children: "Password" }), (0, jsx_runtime_1.jsx)("input", { type: "password", value: password, onChange: (e) => setPassword(e.target.value), placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", disabled: totalLoading, required: true, className: "w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50", style: {
+                                            border: '1px solid var(--border-default)',
+                                            color: 'var(--text-primary)',
+                                            background: 'var(--bg-default)',
+                                        } })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-sm font-medium mb-2", style: { color: 'var(--text-primary)' }, children: "Confirm Password" }), (0, jsx_runtime_1.jsx)("input", { type: "password", value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", disabled: totalLoading, required: true, className: "w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50", style: {
+                                            border: '1px solid var(--border-default)',
+                                            color: 'var(--text-primary)',
+                                            background: 'var(--bg-default)',
+                                        } })] }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: totalLoading, className: "w-full py-3 px-4 rounded-lg font-semibold focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors mt-6", style: {
+                                    border: '1px solid var(--border-default)',
+                                    color: 'white',
+                                    background: 'var(--color-primary, #10b981)',
+                                }, children: totalLoading ? 'Creating Account...' : 'Create Account' })] }))] }))] }));
+}