@payez/next-mvp 3.0.0

package/dist/pages/recovery/page.js

@@ -0,0 +1,142 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = RecoveryPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const navigation_1 = require("next/navigation");
+const api_1 = require("../../utils/api");
+const InitiateRecoveryStep_1 = require("../../components/recovery/InitiateRecoveryStep");
+const SelectMethodStep_1 = require("../../components/recovery/SelectMethodStep");
+const VerifyCodeStep_1 = require("../../components/recovery/VerifyCodeStep");
+const SetPasswordStep_1 = require("../../components/recovery/SetPasswordStep");
+const CompleteStep_1 = require("../../components/recovery/CompleteStep");
+const useTheme_1 = require("../../theme/useTheme");
+function RecoveryContent() {
+    const router = (0, navigation_1.useRouter)();
+    const searchParams = (0, navigation_1.useSearchParams)();
+    const prefilledEmail = searchParams?.get('email') || '';
+    const colors = (0, useTheme_1.useColors)();
+    const [currentStep, setCurrentStep] = (0, react_1.useState)('initiate');
+    const [email, setEmail] = (0, react_1.useState)(prefilledEmail);
+    const [recoverySession, setRecoverySession] = (0, react_1.useState)(null);
+    const [selectedMethod, setSelectedMethod] = (0, react_1.useState)(null);
+    const [verificationCode, setVerificationCode] = (0, react_1.useState)('');
+    const [passwordResetToken, setPasswordResetToken] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const handleInitiateRecovery = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const response = await api_1.accountApi.initiateRecovery(email);
+            if (response.success && response.data.recovery_session_token) {
+                setRecoverySession({
+                    recoveryToken: response.data.recovery_session_token,
+                    email: email,
+                    maskedEmail: response.data.masked_email,
+                    maskedPhone: response.data.masked_phone,
+                    hasAuthenticator: response.data.has_authenticator,
+                    availableMethods: response.data.available_methods || [],
+                    expiresAt: response.data.expires_at || ''
+                });
+                setCurrentStep('select-method');
+            }
+            else {
+                setCurrentStep('complete');
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to initiate recovery. Please try again.');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleSendCode = async (method) => {
+        if (!recoverySession)
+            return;
+        setLoading(true);
+        setError(null);
+        setSelectedMethod(method);
+        try {
+            const response = await api_1.accountApi.sendRecoveryCode(recoverySession.recoveryToken, method);
+            if (response.success) {
+                setCurrentStep('verify-code');
+            }
+            else {
+                setError('Failed to send verification code. Please try again.');
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to send verification code.');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleVerifyCode = async () => {
+        if (!recoverySession || !selectedMethod)
+            return;
+        setLoading(true);
+        setError(null);
+        try {
+            const response = await api_1.accountApi.verifyRecoveryCode(recoverySession.recoveryToken, verificationCode, selectedMethod);
+            if (response.success && response.data) {
+                setPasswordResetToken({
+                    token: response.data.password_reset_token,
+                    expiresAt: response.data.expires_at
+                });
+                setCurrentStep('set-password');
+            }
+            else {
+                setError(response.error?.message || 'Invalid verification code');
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to verify code.');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleResetPassword = async (password, confirmPassword) => {
+        if (!passwordResetToken || !recoverySession)
+            return;
+        setLoading(true);
+        setError(null);
+        try {
+            const response = await api_1.accountApi.resetPasswordWithToken(recoverySession.email, passwordResetToken.token, password, confirmPassword);
+            if (response.success) {
+                setCurrentStep('complete');
+            }
+            else {
+                setError('Failed to reset password. Please try again.');
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to reset password.');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleGoBack = () => {
+        if (currentStep === 'select-method')
+            setCurrentStep('initiate');
+        else if (currentStep === 'verify-code')
+            setCurrentStep('select-method');
+        else if (currentStep === 'set-password')
+            setCurrentStep('verify-code');
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "w-full flex items-center justify-center p-6", style: { background: 'var(--bg-default)' }, children: (0, jsx_runtime_1.jsxs)("div", { className: "max-w-md w-full", children: [error && ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 bg-red-50 border border-red-200 rounded-2xl p-3", children: (0, jsx_runtime_1.jsx)("p", { className: "text-red-700 text-sm", children: error }) })), loading && ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 rounded-2xl p-3", style: { background: 'var(--bg-card)', borderColor: 'var(--border-default)' }, children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm", style: { color: 'var(--text-secondary)' }, children: "Processing..." }) })), currentStep === 'initiate' && ((0, jsx_runtime_1.jsx)(InitiateRecoveryStep_1.InitiateRecoveryStep, { email: email, setEmail: setEmail, onSubmit: handleInitiateRecovery, loading: loading })), currentStep === 'select-method' && recoverySession && ((0, jsx_runtime_1.jsx)(SelectMethodStep_1.SelectMethodStep, { session: recoverySession, onSelectMethod: handleSendCode, loading: loading })), currentStep === 'verify-code' && ((0, jsx_runtime_1.jsx)(VerifyCodeStep_1.VerifyCodeStep, { code: verificationCode, setCode: setVerificationCode, onSubmit: handleVerifyCode, onResend: () => selectedMethod && handleSendCode(selectedMethod), loading: loading, maskedDestination: selectedMethod === 'sms'
+                        ? recoverySession?.maskedPhone
+                        : recoverySession?.maskedEmail })), currentStep === 'set-password' && ((0, jsx_runtime_1.jsx)(SetPasswordStep_1.SetPasswordStep, { onSubmit: handleResetPassword, loading: loading })), currentStep === 'complete' && ((0, jsx_runtime_1.jsx)(CompleteStep_1.CompleteStep, { onGoToLogin: () => router.push('/account-auth/login') })), currentStep !== 'complete' && currentStep !== 'initiate' && !loading && ((0, jsx_runtime_1.jsx)("div", { className: "mt-6 text-center", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleGoBack, className: "text-sm hover:underline font-medium", style: { color: 'var(--text-primary)' }, children: "\u2190 Go Back" }) }))] }) }));
+}
+function LoadingFallback() {
+    const colors = (0, useTheme_1.useColors)();
+    return ((0, jsx_runtime_1.jsx)("div", { className: "w-full flex items-center justify-center", style: { background: 'var(--bg-default)' }, children: (0, jsx_runtime_1.jsx)("div", { className: "border rounded-2xl p-8", style: { background: 'var(--bg-card)', borderColor: 'var(--border-default)' }, children: (0, jsx_runtime_1.jsx)("p", { style: { color: 'var(--text-muted)' }, children: "Loading..." }) }) }));
+}
+function RecoveryPage() {
+    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(LoadingFallback, {}), children: (0, jsx_runtime_1.jsx)(RecoveryContent, {}) }));
+}

package/dist/pages/roles/MyRolesPage.d.ts

@@ -0,0 +1,24 @@
+/**
+ * My Roles Page for @payez/next-mvp
+ *
+ * User view of their assigned roles (/account/roles).
+ * Shows roles from both IDP and app sources with expandable permissions.
+ * Read-only - users cannot self-assign roles.
+ *
+ * @see docs/specs/ROLES_MANAGEMENT_SPEC.md
+ */
+import { Role } from './components';
+interface MyRolesResponse {
+    summary: {
+        total_roles: number;
+        sources: string[];
+    };
+    idp_roles: Role[];
+    app_roles: Role[];
+}
+interface MyRolesPageProps {
+    initialData?: MyRolesResponse;
+    rolesEndpoint?: string;
+}
+export default function MyRolesPage({ initialData, rolesEndpoint, }: MyRolesPageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/pages/roles/MyRolesPage.js

@@ -0,0 +1,71 @@
+"use strict";
+/**
+ * My Roles Page for @payez/next-mvp
+ *
+ * User view of their assigned roles (/account/roles).
+ * Shows roles from both IDP and app sources with expandable permissions.
+ * Read-only - users cannot self-assign roles.
+ *
+ * @see docs/specs/ROLES_MANAGEMENT_SPEC.md
+ */
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = MyRolesPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useTheme_1 = require("../../theme/useTheme");
+const components_1 = require("./components");
+function MyRolesPage({ initialData, rolesEndpoint = '/api/account/my-roles', }) {
+    const layout = (0, useTheme_1.useLayout)();
+    const colors = (0, useTheme_1.useColors)();
+    // Determine dark mode
+    const isDark = colors?.background?.includes('slate-9') ||
+        colors?.background?.includes('gray-9') ||
+        colors?.card?.includes('slate-8');
+    // State
+    const [data, setData] = (0, react_1.useState)(initialData || null);
+    const [loading, setLoading] = (0, react_1.useState)(!initialData);
+    const [error, setError] = (0, react_1.useState)(null);
+    // Theme colors
+    const bgColor = isDark ? 'bg-slate-900' : 'bg-gray-50';
+    const cardBg = isDark ? 'bg-slate-800' : 'bg-white';
+    const borderColor = isDark ? 'border-slate-700' : 'border-gray-200';
+    const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+    const textMuted = isDark ? 'text-slate-400' : 'text-gray-500';
+    // Fetch roles
+    const fetchRoles = (0, react_1.useCallback)(async () => {
+        try {
+            setLoading(true);
+            setError(null);
+            const response = await fetch(rolesEndpoint, { credentials: 'include' });
+            if (!response.ok) {
+                throw new Error('Failed to load roles');
+            }
+            const result = await response.json();
+            setData(result);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to load roles');
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [rolesEndpoint]);
+    (0, react_1.useEffect)(() => {
+        if (!initialData) {
+            fetchRoles();
+        }
+    }, [initialData, fetchRoles]);
+    // Loading state
+    if (loading) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: `min-h-screen ${bgColor} flex items-center justify-center`, 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 text-blue-500", 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" })] }), (0, jsx_runtime_1.jsx)("p", { className: textMuted, children: "Loading roles..." })] }) }));
+    }
+    // Error state
+    if (error) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: `min-h-screen ${bgColor} flex items-center justify-center`, children: (0, jsx_runtime_1.jsxs)("div", { className: `${cardBg} border ${borderColor} rounded-lg p-8 text-center max-w-md`, children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-12 h-12 text-red-500 mx-auto mb-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }), (0, jsx_runtime_1.jsx)("h2", { className: `text-lg font-semibold ${textPrimary} mb-2`, children: "Failed to Load Roles" }), (0, jsx_runtime_1.jsx)("p", { className: `${textMuted} mb-4`, children: error }), (0, jsx_runtime_1.jsx)("button", { onClick: fetchRoles, className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700", children: "Try Again" })] }) }));
+    }
+    const idpRoles = data?.idp_roles || [];
+    const appRoles = data?.app_roles || [];
+    const totalRoles = idpRoles.length + appRoles.length;
+    return ((0, jsx_runtime_1.jsx)("div", { className: `min-h-screen ${bgColor}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `max-w-2xl mx-auto ${layout?.padding || 'p-6'}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: `text-3xl font-bold ${textPrimary}`, children: "My Roles" }), totalRoles > 0 && ((0, jsx_runtime_1.jsxs)("p", { className: `mt-1 ${textMuted}`, children: ["You have ", totalRoles, " role", totalRoles !== 1 ? 's' : '', " across ", data?.summary?.sources?.length || 0, " source", (data?.summary?.sources?.length || 0) !== 1 ? 's' : '', "."] }))] }), (0, jsx_runtime_1.jsx)("a", { href: "/account/profile", className: `text-sm hover:underline ${textMuted}`, children: "Back to Profile" })] }), totalRoles === 0 && ((0, jsx_runtime_1.jsxs)("div", { className: `${cardBg} border ${borderColor} rounded-lg p-8 text-center`, children: [(0, jsx_runtime_1.jsx)("svg", { className: `w-12 h-12 mx-auto mb-4 ${textMuted}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" }) }), (0, jsx_runtime_1.jsx)("h2", { className: `text-lg font-semibold ${textPrimary} mb-2`, children: "No Roles Assigned" }), (0, jsx_runtime_1.jsx)("p", { className: textMuted, children: "You don't have any roles assigned yet. Contact your administrator for access." })] })), idpRoles.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-6", children: [(0, jsx_runtime_1.jsx)(components_1.RoleSourceHeader, { source: "idp", count: idpRoles.length, isDark: isDark }), (0, jsx_runtime_1.jsx)("div", { className: "mt-3 space-y-3", children: idpRoles.map((role) => ((0, jsx_runtime_1.jsx)(components_1.RoleCard, { role: role, source: "idp", isDark: isDark }, role.role_name))) })] })), appRoles.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-6", children: [(0, jsx_runtime_1.jsx)(components_1.RoleSourceHeader, { source: "app", count: appRoles.length, isDark: isDark }), (0, jsx_runtime_1.jsx)("div", { className: "mt-3 space-y-3", children: appRoles.map((role) => ((0, jsx_runtime_1.jsx)(components_1.RoleCard, { role: role, source: "app", isDark: isDark }, role.role_name))) })] })), totalRoles > 0 && ((0, jsx_runtime_1.jsx)("div", { className: `border-t ${borderColor} pt-4 mt-6`, children: (0, jsx_runtime_1.jsx)("p", { className: `text-sm ${textMuted}`, children: "Need additional access? Contact your administrator." }) })), (0, jsx_runtime_1.jsxs)("div", { className: "mt-6 flex justify-between", children: [(0, jsx_runtime_1.jsx)("a", { href: "/account/security", className: `text-sm hover:underline ${textMuted}`, children: "\u2190 Security Settings" }), (0, jsx_runtime_1.jsx)("a", { href: "/account/settings", className: `text-sm hover:underline ${textMuted}`, children: "Settings \u2192" })] })] }) }));
+}

package/dist/pages/roles/components.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Shared Role Components for @payez/next-mvp
+ *
+ * Components for displaying roles and permissions:
+ * - RoleBadge: Small badge showing role name and source
+ * - RoleCard: Expandable card showing role details and permissions
+ * - PermissionsList: Grouped list of permissions
+ *
+ * @see docs/specs/ROLES_MANAGEMENT_SPEC.md
+ */
+export interface Permission {
+    type: 'page' | 'feature';
+    pattern?: string;
+    name?: string;
+    display: string;
+}
+export interface Role {
+    role_name: string;
+    display_name?: string;
+    description?: string;
+    assigned_at?: string;
+    status?: 'active' | 'pending' | 'expired';
+    permissions?: Permission[];
+    user_count?: number;
+    permission_count?: number;
+    is_system_role?: boolean;
+}
+export type RoleSource = 'idp' | 'app';
+/**
+ * RoleBadge - Small badge showing role name and source
+ */
+export declare function RoleBadge({ roleName, source, size, isDark, }: {
+    roleName: string;
+    source: RoleSource;
+    size?: 'sm' | 'md';
+    isDark?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * PermissionsList - Grouped list of permissions
+ */
+export declare function PermissionsList({ permissions, grouped, isDark, }: {
+    permissions: Permission[];
+    grouped?: boolean;
+    isDark?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * RoleCard - Expandable card showing role details and permissions
+ */
+export declare function RoleCard({ role, source, showPermissions, defaultExpanded, isDark, }: {
+    role: Role;
+    source: RoleSource;
+    showPermissions?: boolean;
+    defaultExpanded?: boolean;
+    isDark?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * RoleSourceHeader - Section header for role groups
+ */
+export declare function RoleSourceHeader({ source, count, isDark, }: {
+    source: RoleSource;
+    count?: number;
+    isDark?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/pages/roles/components.js

@@ -0,0 +1,108 @@
+"use strict";
+/**
+ * Shared Role Components for @payez/next-mvp
+ *
+ * Components for displaying roles and permissions:
+ * - RoleBadge: Small badge showing role name and source
+ * - RoleCard: Expandable card showing role details and permissions
+ * - PermissionsList: Grouped list of permissions
+ *
+ * @see docs/specs/ROLES_MANAGEMENT_SPEC.md
+ */
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RoleBadge = RoleBadge;
+exports.PermissionsList = PermissionsList;
+exports.RoleCard = RoleCard;
+exports.RoleSourceHeader = RoleSourceHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// Format date helper
+function formatDate(dateString) {
+    if (!dateString)
+        return '';
+    try {
+        return new Date(dateString).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        });
+    }
+    catch {
+        return dateString;
+    }
+}
+// Role icon based on name
+function getRoleIcon(roleName) {
+    if (roleName.includes('admin'))
+        return 'shield';
+    if (roleName.includes('editor'))
+        return 'edit';
+    if (roleName.includes('viewer'))
+        return 'eye';
+    return 'user';
+}
+/**
+ * RoleBadge - Small badge showing role name and source
+ */
+function RoleBadge({ roleName, source, size = 'md', isDark = true, }) {
+    const sizeClasses = size === 'sm' ? 'text-xs px-2 py-0.5' : 'text-sm px-2.5 py-1';
+    const sourceColor = source === 'idp'
+        ? isDark ? 'bg-purple-900/30 text-purple-400 border-purple-500/30' : 'bg-purple-100 text-purple-700 border-purple-300'
+        : isDark ? 'bg-blue-900/30 text-blue-400 border-blue-500/30' : 'bg-blue-100 text-blue-700 border-blue-300';
+    return ((0, jsx_runtime_1.jsxs)("span", { className: `inline-flex items-center gap-1 rounded-full border ${sizeClasses} ${sourceColor}`, children: [source === 'idp' && ((0, jsx_runtime_1.jsx)("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" }) })), roleName] }));
+}
+/**
+ * PermissionsList - Grouped list of permissions
+ */
+function PermissionsList({ permissions, grouped = true, isDark = true, }) {
+    const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+    const textMuted = isDark ? 'text-slate-400' : 'text-gray-500';
+    const borderColor = isDark ? 'border-slate-600' : 'border-gray-300';
+    if (!permissions || permissions.length === 0) {
+        return (0, jsx_runtime_1.jsx)("p", { className: `text-sm ${textMuted}`, children: "No specific permissions defined" });
+    }
+    if (!grouped) {
+        return ((0, jsx_runtime_1.jsx)("ul", { className: "space-y-1", children: permissions.map((perm, idx) => ((0, jsx_runtime_1.jsxs)("li", { className: `text-sm ${textMuted} flex items-center gap-2`, children: [(0, jsx_runtime_1.jsx)("span", { className: "text-green-400", children: "+" }), perm.display] }, idx))) }));
+    }
+    // Group by type
+    const pagePerms = permissions.filter((p) => p.type === 'page');
+    const featurePerms = permissions.filter((p) => p.type === 'feature');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [pagePerms.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: `text-xs font-medium uppercase tracking-wider mb-1 ${textMuted}`, children: "Page Access" }), (0, jsx_runtime_1.jsx)("ul", { className: `pl-4 border-l-2 ${borderColor} space-y-1`, children: pagePerms.map((perm, idx) => ((0, jsx_runtime_1.jsx)("li", { className: `text-sm ${textPrimary}`, children: perm.display }, idx))) })] })), featurePerms.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: `text-xs font-medium uppercase tracking-wider mb-1 ${textMuted}`, children: "Features" }), (0, jsx_runtime_1.jsx)("ul", { className: `pl-4 border-l-2 ${borderColor} space-y-1`, children: featurePerms.map((perm, idx) => ((0, jsx_runtime_1.jsx)("li", { className: `text-sm ${textPrimary}`, children: perm.display }, idx))) })] }))] }));
+}
+/**
+ * RoleCard - Expandable card showing role details and permissions
+ */
+function RoleCard({ role, source, showPermissions = true, defaultExpanded = false, isDark = true, }) {
+    const [expanded, setExpanded] = (0, react_1.useState)(defaultExpanded);
+    const cardBg = isDark ? 'bg-slate-800' : 'bg-white';
+    const borderColor = isDark ? 'border-slate-700' : 'border-gray-200';
+    const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+    const textMuted = isDark ? 'text-slate-400' : 'text-gray-500';
+    const hoverBg = isDark ? 'hover:bg-slate-700/50' : 'hover:bg-gray-50';
+    const statusColors = {
+        active: isDark ? 'text-green-400' : 'text-green-600',
+        pending: isDark ? 'text-yellow-400' : 'text-yellow-600',
+        expired: isDark ? 'text-red-400' : 'text-red-600',
+    };
+    const iconMap = {
+        shield: ((0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" }) })),
+        edit: ((0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }) })),
+        eye: ((0, jsx_runtime_1.jsxs)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })] })),
+        user: ((0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) })),
+    };
+    const icon = iconMap[getRoleIcon(role.role_name)] || iconMap.user;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `rounded-lg border ${borderColor} ${cardBg} overflow-hidden`, children: [(0, jsx_runtime_1.jsx)("div", { className: `p-4 ${showPermissions ? `cursor-pointer ${hoverBg}` : ''}`, onClick: () => showPermissions && setExpanded(!expanded), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: `p-2 rounded-lg ${isDark ? 'bg-slate-700' : 'bg-gray-100'} ${textMuted}`, children: icon }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: `font-semibold ${textPrimary}`, children: role.display_name || role.role_name }), source === 'idp' && ((0, jsx_runtime_1.jsx)("svg", { className: `w-4 h-4 ${textMuted}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" }) }))] }), (0, jsx_runtime_1.jsx)("p", { className: `text-sm ${textMuted}`, children: role.description || 'No description' }), role.assigned_at && ((0, jsx_runtime_1.jsxs)("p", { className: `text-xs ${textMuted} mt-1`, children: ["Assigned: ", formatDate(role.assigned_at)] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [role.status && ((0, jsx_runtime_1.jsxs)("span", { className: `flex items-center gap-1 text-sm ${statusColors[role.status]}`, children: [(0, jsx_runtime_1.jsx)("span", { className: "w-2 h-2 rounded-full bg-current" }), role.status.charAt(0).toUpperCase() + role.status.slice(1)] })), showPermissions && ((0, jsx_runtime_1.jsx)("svg", { className: `w-5 h-5 transition-transform ${expanded ? 'rotate-180' : ''} ${textMuted}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }))] })] }) }), showPermissions && expanded && role.permissions && ((0, jsx_runtime_1.jsx)("div", { className: `px-4 pb-4 pt-2 border-t ${borderColor}`, children: (0, jsx_runtime_1.jsx)(PermissionsList, { permissions: role.permissions, isDark: isDark }) }))] }));
+}
+/**
+ * RoleSourceHeader - Section header for role groups
+ */
+function RoleSourceHeader({ source, count, isDark = true, }) {
+    const bgColor = isDark ? 'bg-slate-700' : 'bg-gray-100';
+    const textColor = isDark ? 'text-slate-300' : 'text-gray-700';
+    const labels = {
+        idp: 'Identity Roles (from PayEz IDP)',
+        app: 'Application Roles',
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `${bgColor} px-4 py-2 rounded-lg flex items-center justify-between`, children: [(0, jsx_runtime_1.jsx)("span", { className: `text-sm font-medium ${textColor}`, children: labels[source] }), count !== undefined && ((0, jsx_runtime_1.jsxs)("span", { className: `text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`, children: [count, " role", count !== 1 ? 's' : ''] }))] }));
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Roles Page exports
+ *
+ * - MyRolesPage: User view of their roles (/account/roles)
+ * - Components: RoleCard, RoleBadge, PermissionsList, RoleSourceHeader
+ */
+export { default as MyRolesPage } from './MyRolesPage';
+export { RoleCard, RoleBadge, PermissionsList, RoleSourceHeader, type Role, type Permission, type RoleSource, } from './components';

package/dist/pages/roles/index.js

@@ -0,0 +1,19 @@
+"use strict";
+/**
+ * Roles Page exports
+ *
+ * - MyRolesPage: User view of their roles (/account/roles)
+ * - Components: RoleCard, RoleBadge, PermissionsList, RoleSourceHeader
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RoleSourceHeader = exports.PermissionsList = exports.RoleBadge = exports.RoleCard = exports.MyRolesPage = void 0;
+var MyRolesPage_1 = require("./MyRolesPage");
+Object.defineProperty(exports, "MyRolesPage", { enumerable: true, get: function () { return __importDefault(MyRolesPage_1).default; } });
+var components_1 = require("./components");
+Object.defineProperty(exports, "RoleCard", { enumerable: true, get: function () { return components_1.RoleCard; } });
+Object.defineProperty(exports, "RoleBadge", { enumerable: true, get: function () { return components_1.RoleBadge; } });
+Object.defineProperty(exports, "PermissionsList", { enumerable: true, get: function () { return components_1.PermissionsList; } });
+Object.defineProperty(exports, "RoleSourceHeader", { enumerable: true, get: function () { return components_1.RoleSourceHeader; } });

package/dist/pages/security/EnhancedSecurityPage.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Enhanced Security Page for @payez/next-mvp
+ *
+ * Implements BAPert's Member Self-Service spec with:
+ * - Password section with change form
+ * - Two-factor authentication management
+ * - Connected OAuth accounts
+ * - Active sessions list
+ * - Recent activity log
+ * - Danger zone (data export, account deletion)
+ *
+ * @see docs/specs/MEMBER_SELF_SERVICE_SPEC.md
+ */
+export default function EnhancedSecurityPage(): import("react/jsx-runtime").JSX.Element;