@payez/next-mvp 3.9.1 → 4.0.1

package/dist/pages/profile/EnhancedProfilePage.js

@@ -1,150 +0,0 @@
-"use strict";
-/**
- * Enhanced Profile Page for @payez/next-mvp
- *
- * Implements BAPert's Member Self-Service spec with:
- * - Identity header (avatar, name, email, phone, member since)
- * - Personal info section (first name, last name, title, bio)
- * - Contact info section (secondary email/phone, website)
- * - Address section with state/country dropdowns
- * - Edit capabilities with inline forms
- *
- * @see docs/specs/MEMBER_SELF_SERVICE_SPEC.md
- */
-'use client';
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = EnhancedProfilePage;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const useProfile_1 = require("../../hooks/useProfile");
-const useTheme_1 = require("../../theme/useTheme");
-function EditableSection({ title, children, onEdit, isEditing, onSave, onCancel, isDarkMode }) {
-    const cardBg = isDarkMode ? 'bg-slate-800' : 'bg-white';
-    const borderColor = isDarkMode ? 'border-slate-700' : 'border-gray-200';
-    const textPrimary = isDarkMode ? 'text-white' : 'text-gray-900';
-    const textSecondary = isDarkMode ? 'text-slate-300' : 'text-gray-600';
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `rounded-lg border ${cardBg} ${borderColor}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: `flex items-center justify-between px-6 py-4 border-b ${borderColor}`, children: [(0, jsx_runtime_1.jsx)("h2", { className: `text-lg font-semibold ${textPrimary}`, children: title }), !isEditing && onEdit && ((0, jsx_runtime_1.jsx)("button", { onClick: onEdit, className: `text-sm font-medium ${isDarkMode ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-700'}`, children: "Edit" })), isEditing && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onCancel, className: `text-sm font-medium ${textSecondary} hover:${textPrimary}`, children: "Cancel" }), (0, jsx_runtime_1.jsx)("button", { onClick: onSave, className: "text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded", children: "Save" })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "px-6 py-4", children: children })] }));
-}
-function FieldRow({ label, value, verified, action, isDarkMode }) {
-    const textPrimary = isDarkMode ? 'text-white' : 'text-gray-900';
-    const textSecondary = isDarkMode ? 'text-slate-400' : 'text-gray-500';
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3 border-b last:border-b-0 border-slate-700/30", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsx)("p", { className: `text-sm ${textSecondary}`, children: label }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mt-1", children: [(0, jsx_runtime_1.jsx)("span", { className: textPrimary, children: value || '—' }), verified !== undefined && ((0, jsx_runtime_1.jsx)("span", { className: `inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${verified ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400' : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400'}`, children: verified ? '✓ Verified' : 'Not Verified' }))] })] }), action && (0, jsx_runtime_1.jsx)("div", { className: "ml-4", children: action })] }));
-}
-function formatDate(dateString) {
-    if (!dateString)
-        return '—';
-    try {
-        const date = new Date(dateString);
-        return date.toLocaleDateString('en-US', {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric'
-        });
-    }
-    catch {
-        return dateString;
-    }
-}
-function formatRelativeTime(dateString) {
-    if (!dateString)
-        return '—';
-    try {
-        const date = new Date(dateString);
-        const now = new Date();
-        const diffMs = now.getTime() - date.getTime();
-        const diffMins = Math.floor(diffMs / 60000);
-        const diffHours = Math.floor(diffMs / 3600000);
-        const diffDays = Math.floor(diffMs / 86400000);
-        if (diffMins < 1)
-            return 'Just now';
-        if (diffMins < 60)
-            return `${diffMins} minute${diffMins === 1 ? '' : 's'} ago`;
-        if (diffHours < 24)
-            return `${diffHours} hour${diffHours === 1 ? '' : 's'} ago`;
-        if (diffDays < 7)
-            return `${diffDays} day${diffDays === 1 ? '' : 's'} ago`;
-        return formatDate(dateString);
-    }
-    catch {
-        return dateString;
-    }
-}
-function EnhancedProfilePage() {
-    const { data: rawProfile, isLoading, error, refetch } = (0, useProfile_1.useProfile)();
-    const layout = (0, useTheme_1.useLayout)();
-    const colors = (0, useTheme_1.useColors)();
-    // Normalize profile data (handles both new structured and legacy flat formats)
-    const profile = react_1.default.useMemo(() => {
-        if (!rawProfile)
-            return {};
-        // If data already has identity section, use as-is
-        if (rawProfile.identity) {
-            return rawProfile;
-        }
-        // Convert legacy flat format to structured format
-        return {
-            user_id: rawProfile.user_id,
-            identity: {
-                email: rawProfile.email || '',
-                email_confirmed: rawProfile.email_confirmed,
-                phone_number: rawProfile.phone_number,
-                phone_confirmed: rawProfile.phone_confirmed,
-                full_name: rawProfile.full_name ||
-                    [rawProfile.first_name, rawProfile.last_name].filter(Boolean).join(' ') ||
-                    rawProfile.email,
-                avatar_url: null,
-                created_at: undefined,
-                last_sign_in: undefined,
-            },
-            personal_info: {
-                first_name: rawProfile.first_name,
-                last_name: rawProfile.last_name,
-                title: undefined,
-                bio: undefined,
-            },
-            contact_info: rawProfile.contact_information ? {
-                secondary_email: rawProfile.contact_information.secondary_email,
-                secondary_phone: rawProfile.contact_information.secondary_phone,
-                website: rawProfile.contact_information.website,
-            } : undefined,
-            address: rawProfile.contact_information ? {
-                address_line_1: rawProfile.contact_information.addressLine1,
-                address_line_2: rawProfile.contact_information.addressLine2,
-                city: rawProfile.contact_information.city,
-                state_id: rawProfile.contact_information.stateId,
-                state_name: rawProfile.contact_information.stateName,
-                postal_code: rawProfile.contact_information.postalCode,
-                country_code: rawProfile.contact_information.countryCode,
-                country_name: rawProfile.contact_information.countryName,
-            } : undefined,
-            two_factor_enabled: rawProfile.two_factor_enabled,
-            roles: rawProfile.roles,
-        };
-    }, [rawProfile]);
-    // Determine dark mode
-    const isDarkMode = colors?.background?.includes('slate-9') ||
-        colors?.background?.includes('gray-9') ||
-        colors?.background?.includes('dark') ||
-        colors?.card?.includes('slate-8');
-    // Theme classes
-    const bgClass = isDarkMode ? 'bg-slate-900' : 'bg-gray-50';
-    const textPrimary = isDarkMode ? 'text-white' : 'text-gray-900';
-    const textSecondary = isDarkMode ? 'text-slate-300' : 'text-gray-600';
-    const textMuted = isDarkMode ? 'text-slate-400' : 'text-gray-500';
-    const cardBg = isDarkMode ? 'bg-slate-800' : 'bg-white';
-    const borderColor = isDarkMode ? 'border-slate-700' : 'border-gray-200';
-    // Loading state
-    if (isLoading || !profile.identity) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: `min-h-screen ${bgClass}`, children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center min-h-[400px]", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center space-y-4", children: [(0, jsx_runtime_1.jsxs)("svg", { className: `animate-spin h-8 w-8 ${textMuted}`, 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 12 a 8 8 0 0 1 8 -8 v 4 a 4 4 0 0 0 -4 4 H4 z" })] }), (0, jsx_runtime_1.jsx)("p", { className: textMuted, children: "Loading profile..." }), error && ((0, jsx_runtime_1.jsx)("p", { className: "text-red-500 text-sm mt-2", children: error.message }))] }) }) }));
-    }
-    const { identity, personal_info, contact_info, address } = profile;
-    const userInitial = identity?.email?.charAt(0).toUpperCase() || 'U';
-    return ((0, jsx_runtime_1.jsx)("div", { className: `min-h-screen ${bgClass}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `${layout?.maxWidth || 'max-w-3xl'} mx-auto ${layout?.padding || 'p-6'} space-y-6`, children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between", children: (0, jsx_runtime_1.jsx)("h1", { className: `text-2xl font-bold ${textPrimary}`, children: "Profile" }) }), (0, jsx_runtime_1.jsx)("div", { className: `rounded-lg border ${cardBg} ${borderColor} p-6`, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-shrink-0", children: [identity?.avatar_url ? ((0, jsx_runtime_1.jsx)("img", { src: identity.avatar_url, alt: "Profile", className: "w-24 h-24 rounded-full object-cover" })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-24 h-24 rounded-full bg-blue-600 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-white font-semibold text-3xl", children: userInitial }) })), (0, jsx_runtime_1.jsx)("button", { className: `mt-2 text-sm ${isDarkMode ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-700'} w-full text-center`, children: "Change Photo" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsx)("h2", { className: `text-2xl font-bold ${textPrimary}`, children: identity?.full_name || identity?.email }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 space-y-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: textSecondary, children: identity?.email }), identity?.email_confirmed && ((0, jsx_runtime_1.jsx)("span", { className: "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400", children: "\u2713" }))] }), identity?.phone_number && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: textSecondary, children: identity.phone_number }), identity?.phone_confirmed && ((0, jsx_runtime_1.jsx)("span", { className: "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400", children: "\u2713" }))] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: `mt-4 pt-4 border-t ${borderColor} text-sm ${textMuted} space-y-1`, children: [identity?.created_at && ((0, jsx_runtime_1.jsxs)("p", { children: ["Member since ", formatDate(identity.created_at)] })), identity?.last_activity && ((0, jsx_runtime_1.jsxs)("p", { children: ["Last active ", formatRelativeTime(identity.last_activity)] })), profile.user_id && ((0, jsx_runtime_1.jsxs)("p", { children: ["Account ID: USR-", profile.user_id] }))] })] })] }) }), (0, jsx_runtime_1.jsx)(EditableSection, { title: "Personal Information", isDarkMode: isDarkMode, children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-0", children: [(0, jsx_runtime_1.jsx)(FieldRow, { label: "First Name", value: personal_info?.first_name, isDarkMode: isDarkMode }), (0, jsx_runtime_1.jsx)(FieldRow, { label: "Last Name", value: personal_info?.last_name, isDarkMode: isDarkMode }), (0, jsx_runtime_1.jsx)(FieldRow, { label: "Title", value: personal_info?.title, isDarkMode: isDarkMode }), (0, jsx_runtime_1.jsx)(FieldRow, { label: "Bio", value: personal_info?.bio, isDarkMode: isDarkMode })] }) }), (0, jsx_runtime_1.jsx)(EditableSection, { title: "Contact Information", isDarkMode: isDarkMode, children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-0", children: [(0, jsx_runtime_1.jsx)(FieldRow, { label: "Primary Email", value: identity?.email, verified: identity?.email_confirmed, action: (0, jsx_runtime_1.jsx)("button", { className: `text-sm ${isDarkMode ? 'text-blue-400' : 'text-blue-600'}`, children: "Change" }), isDarkMode: isDarkMode }), (0, jsx_runtime_1.jsx)(FieldRow, { label: "Primary Phone", value: identity?.phone_number, verified: identity?.phone_confirmed, action: (0, jsx_runtime_1.jsx)("button", { className: `text-sm ${isDarkMode ? 'text-blue-400' : 'text-blue-600'}`, children: "Change" }), isDarkMode: isDarkMode }), (0, jsx_runtime_1.jsx)(FieldRow, { label: "Secondary Email", value: contact_info?.secondary_email, isDarkMode: isDarkMode }), (0, jsx_runtime_1.jsx)(FieldRow, { label: "Secondary Phone", value: contact_info?.secondary_phone, isDarkMode: isDarkMode }), (0, jsx_runtime_1.jsx)(FieldRow, { label: "Website", value: contact_info?.website, isDarkMode: isDarkMode }), (0, jsx_runtime_1.jsx)(FieldRow, { label: "Preferred Contact", value: contact_info?.preferred_contact_method ?
-                                    contact_info.preferred_contact_method.charAt(0).toUpperCase() +
-                                        contact_info.preferred_contact_method.slice(1) : undefined, isDarkMode: isDarkMode })] }) }), (0, jsx_runtime_1.jsx)(EditableSection, { title: "Address", isDarkMode: isDarkMode, children: address?.address_line_1 ? ((0, jsx_runtime_1.jsxs)("div", { className: textPrimary, children: [(0, jsx_runtime_1.jsx)("p", { children: address.address_line_1 }), address.address_line_2 && (0, jsx_runtime_1.jsx)("p", { children: address.address_line_2 }), (0, jsx_runtime_1.jsx)("p", { children: [address.city, address.state_name, address.postal_code]
-                                    .filter(Boolean)
-                                    .join(', ') }), (0, jsx_runtime_1.jsx)("p", { children: address.country_name || address.country_code })] })) : ((0, jsx_runtime_1.jsx)("p", { className: textMuted, children: "No address on file" })) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center gap-6 pt-4", children: [(0, jsx_runtime_1.jsx)("a", { href: "/account/security", className: `text-sm ${isDarkMode ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-700'}`, children: "Security Settings \u2192" }), (0, jsx_runtime_1.jsx)("a", { href: "/account/settings", className: `text-sm ${isDarkMode ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-700'}`, children: "Preferences \u2192" })] })] }) }));
-}

package/dist/pages/profile/index.d.ts

@@ -1,8 +0,0 @@
-/**
- * Profile Page exports
- *
- * - ProfilePage: Basic profile display (legacy)
- * - EnhancedProfilePage: Full-featured profile with identity, personal info, contact, address sections
- */
-export { default as ProfilePage } from './page';
-export { default as EnhancedProfilePage } from './EnhancedProfilePage';

package/dist/pages/profile/index.js

@@ -1,16 +0,0 @@
-"use strict";
-/**
- * Profile Page exports
- *
- * - ProfilePage: Basic profile display (legacy)
- * - EnhancedProfilePage: Full-featured profile with identity, personal info, contact, address sections
- */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EnhancedProfilePage = exports.ProfilePage = void 0;
-var page_1 = require("./page");
-Object.defineProperty(exports, "ProfilePage", { enumerable: true, get: function () { return __importDefault(page_1).default; } });
-var EnhancedProfilePage_1 = require("./EnhancedProfilePage");
-Object.defineProperty(exports, "EnhancedProfilePage", { enumerable: true, get: function () { return __importDefault(EnhancedProfilePage_1).default; } });

package/dist/pages/profile/page.d.ts

@@ -1,19 +0,0 @@
-/**
- * Themed Profile Page for @payez/next-mvp
- *
- * DEPENDENCIES: Only React, Next.js, next-auth, React Query, and Tailwind CSS
- * NO shadcn/ui or other UI library required!
- *
- * FEATURES:
- * ✅ Displays user profile information
- * ✅ Shows email, phone, roles
- * ✅ 2FA status indicator
- * ✅ Themeable styling via ThemeProvider
- * ✅ Uses React Query for data fetching (matches website-membership pattern)
- *
- * USAGE:
- * 1. Import from @payez/next-mvp/pages/profile
- * 2. Wrap your app with ThemeProvider to customize branding
- * 3. Create API route at: src/app/api/account/profile/route.ts
- */
-export default function ProfilePage(): import("react/jsx-runtime").JSX.Element;

package/dist/pages/profile/page.js

@@ -1,47 +0,0 @@
-"use strict";
-/**
- * Themed Profile Page for @payez/next-mvp
- *
- * DEPENDENCIES: Only React, Next.js, next-auth, React Query, and Tailwind CSS
- * NO shadcn/ui or other UI library required!
- *
- * FEATURES:
- * ✅ Displays user profile information
- * ✅ Shows email, phone, roles
- * ✅ 2FA status indicator
- * ✅ Themeable styling via ThemeProvider
- * ✅ Uses React Query for data fetching (matches website-membership pattern)
- *
- * USAGE:
- * 1. Import from @payez/next-mvp/pages/profile
- * 2. Wrap your app with ThemeProvider to customize branding
- * 3. Create API route at: src/app/api/account/profile/route.ts
- */
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = ProfilePage;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const navigation_1 = require("next/navigation");
-const useProfile_1 = require("../../hooks/useProfile");
-const useTheme_1 = require("../../theme/useTheme");
-function ProfilePage() {
-    const router = (0, navigation_1.useRouter)();
-    const { data: profileData, isLoading, error } = (0, useProfile_1.useProfile)();
-    const branding = (0, useTheme_1.useBranding)();
-    const colors = (0, useTheme_1.useColors)();
-    const layout = (0, useTheme_1.useLayout)();
-    // Loading state
-    // Note: Auth protection is handled by middleware - no need to check here
-    if (isLoading || !profileData) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: "min-h-screen", style: { background: 'var(--bg-default)' }, children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center min-h-[400px]", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center space-y-4", children: [(0, jsx_runtime_1.jsxs)("svg", { className: "animate-spin h-8 w-8", style: { color: 'var(--text-muted)' }, 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 12 a 8 8 0 0 1 8 -8 v 4 a 4 4 0 0 0 -4 4 H4 z" })] }), (0, jsx_runtime_1.jsx)("p", { style: { color: 'var(--text-muted)' }, children: "Loading profile..." }), error && ((0, jsx_runtime_1.jsx)("p", { className: "text-red-600 text-sm mt-2", children: error.message }))] }) }) }));
-    }
-    // Get 2FA status from security settings or direct field
-    const twoFactorEnabled = profileData.two_factor_enabled ||
-        profileData.security_settings?.some((setting) => setting.setting_type?.toLowerCase().includes('2fa') && setting.is_enabled) || false;
-    return ((0, jsx_runtime_1.jsx)("div", { className: "min-h-screen", style: { background: 'var(--bg-default)' }, children: (0, jsx_runtime_1.jsxs)("div", { className: `${layout?.spacing || 'space-y-6'} ${layout?.maxWidth || 'max-w-4xl'} mx-auto ${layout?.padding || 'p-6'}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between", children: (0, jsx_runtime_1.jsx)("h1", { className: "text-3xl font-bold", style: { color: 'var(--text-primary)' }, children: "Profile" }) }), (0, jsx_runtime_1.jsxs)("div", { className: `rounded-lg shadow-sm border ${layout?.padding || 'p-6'}`, style: { background: 'var(--bg-card)', borderColor: 'var(--border-default)' }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-4 mb-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-20 h-20 bg-gray-300 rounded-full flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-gray-700 font-semibold text-2xl", children: profileData.email?.charAt(0).toUpperCase() || 'U' }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold text-gray-900", children: profileData.full_name ||
-                                                (profileData.first_name || profileData.last_name
-                                                    ? `${profileData.first_name || ''} ${profileData.last_name || ''}`.trim()
-                                                    : profileData.email) }), (0, jsx_runtime_1.jsxs)("p", { className: "text-gray-600 text-sm", children: ["User ID: ", profileData.user_id || profileData.email] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", 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-secondary)' }, children: "Email" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, jsx_runtime_1.jsx)("p", { style: { color: 'var(--text-primary)' }, children: profileData.email }), profileData.email_confirmed && ((0, jsx_runtime_1.jsx)("span", { className: "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800", children: "\u2713 Verified" }))] })] }), profileData?.phone_number && ((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-secondary)' }, children: "Phone" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, jsx_runtime_1.jsx)("p", { style: { color: 'var(--text-primary)' }, children: profileData.phone_number }), profileData.phone_confirmed && ((0, jsx_runtime_1.jsx)("span", { className: "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800", children: "\u2713 Verified" }))] })] })), profileData?.roles && profileData.roles.length > 0 && ((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-secondary)' }, children: "Roles" }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-2", children: profileData.roles.map((role) => ((0, jsx_runtime_1.jsx)("span", { className: "inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-200 text-gray-800", children: role }, role))) })] })), (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-secondary)' }, children: "Two-Factor Authentication" }), (0, jsx_runtime_1.jsx)("span", { className: `inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${profileData?.two_factor_enabled
-                                                ? 'bg-green-100 text-green-800'
-                                                : 'bg-yellow-100 text-yellow-800'}`, children: profileData?.two_factor_enabled ? '✓ Enabled' : 'Not Active' })] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-6 pt-6 border-t border-gray-200 text-center", children: (0, jsx_runtime_1.jsx)("a", { href: "/account/security", className: "text-gray-600 hover:text-gray-800 text-sm hover:underline", children: "Manage security settings" }) })] })] })] }) }));
-}

package/dist/pages/profile/profile-patch.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/pages/profile/profile-patch.js

@@ -1,281 +0,0 @@
-"use strict";
-// Patch script to add password confirmation to profile page phone/email change
-const fs = require('fs');
-const path = 'E:/Repos/PayEz-Next-MVP/packages/next-mvp/src/pages/profile/EnhancedProfilePage.tsx';
-let content = fs.readFileSync(path, 'utf8');
-// 1. Add PasswordConfirmModal after FieldRow component
-const fieldRowEnd = `function FieldRow({ label, value, verified, action, isDarkMode }: FieldRowProps) {
-  const textPrimary = isDarkMode ? 'text-white' : 'text-gray-900';
-  const textSecondary = isDarkMode ? 'text-slate-400' : 'text-gray-500';
-
-  return (
-    <div className="flex items-center justify-between py-3 border-b last:border-b-0 border-slate-700/30">
-      <div className="flex-1">
-        <span className={\`text-sm \${textSecondary}\`}>{label}</span>
-        <div className="flex items-center gap-2 mt-0.5">
-          {value ? (
-            <span className={textPrimary}>{value}</span>
-          ) : (
-            <span className={textSecondary}>Not set</span>
-          )}
-          {verified !== undefined && (
-            <span className={\`text-xs px-2 py-0.5 rounded-full \${
-              verified
-                ? 'bg-green-900/30 text-green-400'
-                : 'bg-yellow-900/30 text-yellow-400'
-            }\`}>
-              {verified ? 'Verified' : 'Unverified'}
-            </span>
-          )}
-        </div>
-      </div>
-      {action && <div>{action}</div>}
-    </div>
-  );
-}`;
-const passwordConfirmModal = `function FieldRow({ label, value, verified, action, isDarkMode }: FieldRowProps) {
-  const textPrimary = isDarkMode ? 'text-white' : 'text-gray-900';
-  const textSecondary = isDarkMode ? 'text-slate-400' : 'text-gray-500';
-
-  return (
-    <div className="flex items-center justify-between py-3 border-b last:border-b-0 border-slate-700/30">
-      <div className="flex-1">
-        <span className={\`text-sm \${textSecondary}\`}>{label}</span>
-        <div className="flex items-center gap-2 mt-0.5">
-          {value ? (
-            <span className={textPrimary}>{value}</span>
-          ) : (
-            <span className={textSecondary}>Not set</span>
-          )}
-          {verified !== undefined && (
-            <span className={\`text-xs px-2 py-0.5 rounded-full \${
-              verified
-                ? 'bg-green-900/30 text-green-400'
-                : 'bg-yellow-900/30 text-yellow-400'
-            }\`}>
-              {verified ? 'Verified' : 'Unverified'}
-            </span>
-          )}
-        </div>
-      </div>
-      {action && <div>{action}</div>}
-    </div>
-  );
-}
-
-// Password Confirmation Modal for sensitive changes (Security Addendum)
-type ChangeAction = 'change_email' | 'change_phone' | null;
-
-function PasswordConfirmModal({
-  isOpen,
-  action,
-  onConfirm,
-  onCancel,
-  isDarkMode,
-}: {
-  isOpen: boolean;
-  action: ChangeAction;
-  onConfirm: (password: string) => void;
-  onCancel: () => void;
-  isDarkMode: boolean;
-}) {
-  const [password, setPassword] = React.useState('');
-  const [showPassword, setShowPassword] = React.useState(false);
-  const [error, setError] = React.useState('');
-
-  // Reset state when modal opens/closes
-  React.useEffect(() => {
-    if (!isOpen) {
-      setPassword('');
-      setShowPassword(false);
-      setError('');
-    }
-  }, [isOpen]);
-
-  if (!isOpen) return null;
-
-  const title = action === 'change_email' ? 'Change Email Address' : 'Change Phone Number';
-  const description = action === 'change_email'
-    ? 'Enter your password to verify your identity before changing your email.'
-    : 'Enter your password to verify your identity before changing your phone number.';
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-    if (!password) {
-      setError('Password is required');
-      return;
-    }
-    onConfirm(password);
-  };
-
-  const bgOverlay = 'bg-black/50';
-  const modalBg = isDarkMode ? 'bg-slate-800' : 'bg-white';
-  const borderColor = isDarkMode ? 'border-slate-700' : 'border-gray-200';
-  const textPrimary = isDarkMode ? 'text-white' : 'text-gray-900';
-  const textMuted = isDarkMode ? 'text-slate-400' : 'text-gray-500';
-  const inputBg = isDarkMode ? 'bg-slate-700' : 'bg-white';
-  const inputBorder = isDarkMode ? 'border-slate-600' : 'border-gray-300';
-
-  return (
-    <div className={\`fixed inset-0 z-50 flex items-center justify-center \${bgOverlay}\`}>
-      <div className={\`w-full max-w-md mx-4 rounded-lg shadow-xl \${modalBg} border \${borderColor}\`}>
-        <div className={\`px-6 py-4 border-b \${borderColor}\`}>
-          <h3 className={\`text-lg font-semibold \${textPrimary}\`}>{title}</h3>
-          <p className={\`text-sm mt-1 \${textMuted}\`}>{description}</p>
-        </div>
-        <form onSubmit={handleSubmit} className="px-6 py-4 space-y-4">
-          <div>
-            <label className={\`block text-sm font-medium mb-1 \${textMuted}\`}>Current Password</label>
-            <div className="relative">
-              <input
-                type={showPassword ? 'text' : 'password'}
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className={\`w-full px-3 py-2 rounded-md border \${inputBorder} \${inputBg} \${textPrimary} focus:ring-2 focus:ring-blue-500 focus:border-transparent\`}
-                placeholder="Enter your password"
-                autoFocus
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className={\`absolute right-2 top-1/2 -translate-y-1/2 text-xs \${textMuted}\`}
-              >
-                {showPassword ? 'Hide' : 'Show'}
-              </button>
-            </div>
-          </div>
-
-          {error && (
-            <div className="bg-red-900/30 border border-red-600 rounded-lg p-2">
-              <p className="text-red-400 text-sm">{error}</p>
-            </div>
-          )}
-
-          <div className="flex gap-3 pt-2">
-            <button
-              type="button"
-              onClick={onCancel}
-              className={\`flex-1 px-4 py-2 rounded-md border \${borderColor} \${textMuted} hover:bg-slate-700/20\`}
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className="flex-1 px-4 py-2 rounded-md text-white bg-blue-600 hover:bg-blue-700"
-            >
-              Continue
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}`;
-content = content.replace(fieldRowEnd, passwordConfirmModal);
-// 2. Add state for password modal after isDarkMode declaration
-const isDarkModeDecl = `const isDarkMode = colors?.background?.includes('slate-9') ||
-                       colors?.background?.includes('gray-9') ||
-                       colors?.card?.includes('slate-8');`;
-const withModalState = `const isDarkMode = colors?.background?.includes('slate-9') ||
-                       colors?.background?.includes('gray-9') ||
-                       colors?.card?.includes('slate-8');
-
-  // Password confirmation modal state (Security Addendum)
-  const [passwordModal, setPasswordModal] = useState<{
-    isOpen: boolean;
-    action: ChangeAction;
-  }>({ isOpen: false, action: null });
-
-  // Handler for password confirmation
-  const handlePasswordConfirm = async (password: string) => {
-    const action = passwordModal.action;
-    setPasswordModal({ isOpen: false, action: null });
-
-    // In production, verify password then redirect to change flow
-    if (action === 'change_email') {
-      console.log('Starting email change flow after password verification');
-      // POST /api/account/verify-password then redirect to email change page
-      // window.location.href = '/account/change-email';
-    } else if (action === 'change_phone') {
-      console.log('Starting phone change flow after password verification');
-      // POST /api/account/verify-password then redirect to phone change page
-      // window.location.href = '/account/change-phone';
-    }
-  };`;
-content = content.replace(isDarkModeDecl, withModalState);
-// 3. Update email Change button to use modal
-const oldEmailChange = `<button className={\`text-sm \${isDarkMode ? 'text-blue-400' : 'text-blue-600'}\`}>
-                  Change
-                </button>
-              }
-              isDarkMode={isDarkMode}
-            />
-            <FieldRow
-              label="Primary Phone"`;
-const newEmailChange = `<button
-                    onClick={() => setPasswordModal({ isOpen: true, action: 'change_email' })}
-                    className={\`text-sm \${isDarkMode ? 'text-blue-400' : 'text-blue-600'}\`}
-                  >
-                  Change
-                </button>
-              }
-              isDarkMode={isDarkMode}
-            />
-            <FieldRow
-              label="Primary Phone"`;
-content = content.replace(oldEmailChange, newEmailChange);
-// 4. Update phone Change button to use modal
-const oldPhoneChange = `<button className={\`text-sm \${isDarkMode ? 'text-blue-400' : 'text-blue-600'}\`}>
-                  Change
-                </button>
-              }
-              isDarkMode={isDarkMode}
-            />
-            <FieldRow
-              label="Secondary Email"`;
-const newPhoneChange = `<button
-                    onClick={() => setPasswordModal({ isOpen: true, action: 'change_phone' })}
-                    className={\`text-sm \${isDarkMode ? 'text-blue-400' : 'text-blue-600'}\`}
-                  >
-                  Change
-                </button>
-              }
-              isDarkMode={isDarkMode}
-            />
-            <FieldRow
-              label="Secondary Email"`;
-content = content.replace(oldPhoneChange, newPhoneChange);
-// 5. Add modal component before closing div
-const closingPart = `{/* Back to App link */}
-        <div className="text-center">
-          <a href="/" className={\`text-sm hover:underline \${textSecondary}\`}>
-            Back to App
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-}`;
-const withModalJSX = `{/* Password Confirmation Modal */}
-        <PasswordConfirmModal
-          isOpen={passwordModal.isOpen}
-          action={passwordModal.action}
-          onConfirm={handlePasswordConfirm}
-          onCancel={() => setPasswordModal({ isOpen: false, action: null })}
-          isDarkMode={isDarkMode}
-        />
-
-        {/* Back to App link */}
-        <div className="text-center">
-          <a href="/" className={\`text-sm hover:underline \${textSecondary}\`}>
-            Back to App
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-}`;
-content = content.replace(closingPart, withModalJSX);
-fs.writeFileSync(path, content);
-console.log('Profile page patched with password confirmation for email/phone changes');

package/dist/pages/recovery/page.d.ts

@@ -1 +0,0 @@
-export default function RecoveryPage(): import("react/jsx-runtime").JSX.Element;