@payez/next-mvp 3.0.0

package/dist/pages/profile/EnhancedProfilePage.js

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

@@ -0,0 +1,8 @@
+/**
+ * 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

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

@@ -0,0 +1,19 @@
+/**
+ * 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

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

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

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

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

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