@payez/next-mvp 3.6.0 → 3.6.1

package/dist/auth/utils/idp-client.js

@@ -160,6 +160,7 @@ async function idpOAuthCallback(oauthData) {
                 access_token: oauthData.accessToken || '',
                 refresh_token: oauthData.refreshToken || '',
                 expires_at: oauthData.expiresAt || 0,
+                client_id: clientId,
             }),
         });
         if (!response.ok) {

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

@@ -0,0 +1,32 @@
+export interface NavItem {
+    href: string;
+    label: string;
+    icon?: React.ReactNode;
+}
+export interface NavSection {
+    title?: string;
+    items: Array<{
+        label: string;
+        icon?: React.ReactNode;
+        href?: string;
+        onClick?: () => void;
+    }>;
+}
+export interface MobileNavDrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    navItems: NavItem[];
+    /** Extra sections like Admin, rendered after nav items with optional title */
+    customSections?: NavSection[];
+    /** Base path for account link (default: '/account') */
+    basePath?: string;
+    /** Custom sign-in handler (default: next-auth signIn) */
+    onSignIn?: () => void;
+    /** Callback URL after sign in (default: '/dashboard') */
+    signInCallbackUrl?: string;
+    /** Custom unauthenticated actions (replaces default Login + Start Free buttons) */
+    unauthActions?: React.ReactNode;
+    /** Custom authenticated footer (replaces default "Account Settings" link) */
+    authFooter?: React.ReactNode;
+}
+export declare function MobileNavDrawer({ isOpen, onClose, navItems, customSections, basePath, onSignIn, signInCallbackUrl, unauthActions, authFooter, }: MobileNavDrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/account/MobileNavDrawer.js

@@ -0,0 +1,81 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileNavDrawer = MobileNavDrawer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("next-auth/react");
+const navigation_1 = require("next/navigation");
+const image_1 = __importDefault(require("next/image"));
+const link_1 = __importDefault(require("next/link"));
+const lucide_react_1 = require("lucide-react");
+function MobileNavDrawer({ isOpen, onClose, navItems, customSections, basePath = '/account', onSignIn, signInCallbackUrl = '/dashboard', unauthActions, authFooter, }) {
+    const { data: session } = (0, react_2.useSession)();
+    const pathname = (0, navigation_1.usePathname)();
+    const isAuthenticated = !!session?.user;
+    const isActiveRoute = (0, react_1.useCallback)((href) => pathname?.startsWith(href) ?? false, [pathname]);
+    // Close on Escape key
+    (0, react_1.useEffect)(() => {
+        function handleEscape(event) {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        }
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+            return () => document.removeEventListener('keydown', handleEscape);
+        }
+    }, [isOpen, onClose]);
+    // Lock body scroll when open
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+            return () => {
+                document.body.style.overflow = '';
+            };
+        }
+    }, [isOpen]);
+    const handleSignIn = () => {
+        onClose();
+        if (onSignIn) {
+            onSignIn();
+        }
+        else {
+            (0, react_2.signIn)(undefined, { callbackUrl: signInCallbackUrl });
+        }
+    };
+    const handleSectionItemClick = (item) => {
+        onClose();
+        if (item.onClick) {
+            item.onClick();
+        }
+    };
+    // Derive display initial from name or email
+    const userName = session?.user?.name;
+    const userEmail = session?.user?.email;
+    const displaySource = userName || userEmail;
+    const userInitial = displaySource?.charAt(0).toUpperCase() || '?';
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `
+          fixed inset-0 bg-black/50 backdrop-blur-sm z-40 lg:hidden
+          transition-opacity duration-300
+          ${isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}
+        `, onClick: onClose, "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("div", { role: "dialog", "aria-modal": "true", "aria-label": "Navigation menu", "aria-expanded": isOpen, className: `
+          fixed top-0 right-0 bottom-0 w-80 max-w-[85vw]
+          bg-white dark:bg-slate-900
+          shadow-[-8px_0_32px_rgba(0,0,0,0.15)]
+          dark:shadow-[-8px_0_32px_rgba(0,0,0,0.4)]
+          z-50 lg:hidden
+          overflow-y-auto
+          transition-transform duration-300 ease-out
+          ${isOpen ? 'translate-x-0' : 'translate-x-full'}
+        `, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between p-4 border-b border-gray-200 dark:border-white/10", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Menu" }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: "\r\n              p-2 rounded-xl\r\n              text-gray-400 hover:text-gray-900\r\n              dark:hover:text-white\r\n              hover:bg-gray-100 dark:hover:bg-white/10\r\n              transition-colors\r\n            ", "aria-label": "Close menu", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }) })] }), isAuthenticated && session?.user && ((0, jsx_runtime_1.jsx)("div", { className: "p-4 border-b border-gray-200 dark:border-white/10", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [session.user.image ? ((0, jsx_runtime_1.jsx)(image_1.default, { src: session.user.image, alt: "", width: 48, height: 48, className: "w-12 h-12 rounded-full", unoptimized: true })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold text-lg", children: userInitial })), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [userName && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm font-semibold text-gray-900 dark:text-white truncate", children: userName })), userEmail && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-gray-500 dark:text-slate-400 truncate", children: userEmail }))] })] }) })), (0, jsx_runtime_1.jsx)("div", { className: "p-2", children: navItems.map((item) => ((0, jsx_runtime_1.jsxs)(link_1.default, { href: item.href, onClick: onClose, className: `
+                flex items-center gap-3 px-4 py-3.5 rounded-xl
+                transition-colors duration-200
+                ${isActiveRoute(item.href)
+                                ? 'bg-blue-500/10 text-blue-500'
+                                : 'text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-white/10'}
+              `, children: [item.icon && (0, jsx_runtime_1.jsx)("span", { className: "text-xl", children: item.icon }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: item.label }), isActiveRoute(item.href) && ((0, jsx_runtime_1.jsx)("span", { className: "ml-auto w-2 h-2 rounded-full bg-blue-500" }))] }, item.href))) }), customSections?.map((section, sectionIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: "p-2 border-t border-gray-200 dark:border-white/10", children: [section.title && ((0, jsx_runtime_1.jsx)("p", { className: "px-4 py-2 text-xs font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wider", children: section.title })), section.items.map((item, itemIndex) => item.href ? ((0, jsx_runtime_1.jsxs)(link_1.default, { href: item.href, onClick: onClose, className: "\r\n                    flex items-center gap-3 px-4 py-3 rounded-xl\r\n                    text-gray-900 dark:text-white\r\n                    hover:bg-gray-100 dark:hover:bg-white/10\r\n                    transition-colors\r\n                  ", children: [item.icon && (0, jsx_runtime_1.jsx)("span", { className: "text-xl", children: item.icon }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: item.label })] }, itemIndex)) : ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleSectionItemClick(item), className: "\r\n                    flex items-center gap-3 px-4 py-3 rounded-xl w-full text-left\r\n                    text-gray-900 dark:text-white\r\n                    hover:bg-gray-100 dark:hover:bg-white/10\r\n                    transition-colors\r\n                  ", children: [item.icon && (0, jsx_runtime_1.jsx)("span", { className: "text-xl", children: item.icon }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: item.label })] }, itemIndex)))] }, sectionIndex))), (0, jsx_runtime_1.jsx)("div", { className: "p-4 mt-auto border-t border-gray-200 dark:border-white/10", children: !isAuthenticated ? (unauthActions ?? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: (0, jsx_runtime_1.jsx)("button", { onClick: handleSignIn, className: "\r\n                    w-full px-4 py-3 rounded-xl\r\n                    text-blue-500 font-semibold\r\n                    border border-blue-500/30\r\n                    hover:bg-blue-500/10\r\n                    transition-colors\r\n                  ", children: "Login" }) }))) : (authFooter ?? ((0, jsx_runtime_1.jsx)(link_1.default, { href: basePath, onClick: onClose, className: "\r\n                  flex items-center justify-center gap-2\r\n                  w-full px-4 py-3 rounded-xl\r\n                  text-gray-500 dark:text-slate-400 font-medium\r\n                  hover:bg-gray-100 dark:hover:bg-white/10\r\n                  transition-colors\r\n                ", children: "Account Settings" }))) })] })] }));
+}

package/dist/components/account/UserAvatarMenu.js

@@ -1,11 +1,15 @@
 "use strict";
 'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UserAvatarMenu = UserAvatarMenu;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("next-auth/react");
 const navigation_1 = require("next/navigation");
+const image_1 = __importDefault(require("next/image"));
 const lucide_react_1 = require("lucide-react");
 function UserAvatarMenu({ basePath = '', showProfile = true, showSettings = true, showSecurity = true, customItems, onSignOut, }) {
     const { data: session, status } = (0, react_2.useSession)();
@@ -73,7 +77,7 @@ function UserAvatarMenu({ basePath = '', showProfile = true, showSettings = true
             router.push(item.href);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: menuRef, className: "relative", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setIsOpen(!isOpen), className: "flex items-center justify-center h-10 w-10 rounded-full bg-[#349AD5] text-white font-semibold text-lg hover:bg-[#2980b9] transition-colors focus:outline-none focus:ring-2 focus:ring-[#349AD5] focus:ring-offset-2 dark:focus:ring-offset-slate-900", "aria-label": "User menu", "aria-expanded": isOpen, "aria-haspopup": "true", children: userInitial }), isOpen && ((0, jsx_runtime_1.jsxs)("div", { className: "absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50\r\n            bg-white dark:bg-slate-900\r\n            border border-gray-200 dark:border-slate-700", role: "menu", "aria-orientation": "vertical", children: [(0, jsx_runtime_1.jsxs)("div", { className: "px-4 py-3 border-b border-gray-200 dark:border-slate-700", children: [userName && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-700 dark:text-slate-200 truncate", children: userName })), userEmail && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 dark:text-slate-400 truncate", children: userEmail })), !userName && !userEmail && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 dark:text-slate-400", children: "Signed in" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "py-1", children: [showProfile && ((0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.User, { className: "h-4 w-4" }), label: "Profile", onClick: () => handleNavigation(`${basePath}/profile`) })), showSettings && ((0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { className: "h-4 w-4" }), label: "Settings", onClick: () => handleNavigation(`${basePath}/settings`) })), showSecurity && ((0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Shield, { className: "h-4 w-4" }), label: "Security", onClick: () => handleNavigation(`${basePath}/security`) })), customItems?.map((item, index) => ((0, jsx_runtime_1.jsx)(MenuItem, { icon: item.icon, label: item.label, onClick: () => handleItemClick(item) }, index)))] }), (0, jsx_runtime_1.jsx)("div", { className: "border-t border-gray-200 dark:border-slate-700 py-1", children: (0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { className: "h-4 w-4" }), label: "Sign Out", onClick: handleSignOut, variant: "danger" }) })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: menuRef, className: "relative", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setIsOpen(!isOpen), className: "flex items-center justify-center h-10 w-10 rounded-full overflow-hidden bg-blue-500 text-white font-semibold text-lg hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900", "aria-label": "User menu", "aria-expanded": isOpen, "aria-haspopup": "true", children: session.user.image ? ((0, jsx_runtime_1.jsx)(image_1.default, { src: session.user.image, alt: "", width: 40, height: 40, className: "w-10 h-10 rounded-full object-cover", unoptimized: true })) : (userInitial) }), isOpen && ((0, jsx_runtime_1.jsxs)("div", { className: "absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50\r\n            bg-white dark:bg-slate-900\r\n            border border-gray-200 dark:border-slate-700", role: "menu", "aria-orientation": "vertical", children: [(0, jsx_runtime_1.jsx)("div", { className: "px-4 py-3 border-b border-gray-200 dark:border-slate-700", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [session.user.image ? ((0, jsx_runtime_1.jsx)(image_1.default, { src: session.user.image, alt: "", width: 32, height: 32, className: "w-8 h-8 rounded-full flex-shrink-0", unoptimized: true })) : ((0, jsx_runtime_1.jsx)("div", { className: "w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold text-sm flex-shrink-0", children: userInitial })), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0", children: [userName && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-700 dark:text-slate-200 truncate", children: userName })), userEmail && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 dark:text-slate-400 truncate", children: userEmail })), !userName && !userEmail && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 dark:text-slate-400", children: "Signed in" }))] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "py-1", children: [showProfile && ((0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.User, { className: "h-4 w-4" }), label: "Profile", onClick: () => handleNavigation(`${basePath}/profile`) })), showSettings && ((0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { className: "h-4 w-4" }), label: "Settings", onClick: () => handleNavigation(`${basePath}/settings`) })), showSecurity && ((0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Shield, { className: "h-4 w-4" }), label: "Security", onClick: () => handleNavigation(`${basePath}/security`) })), customItems?.map((item, index) => ((0, jsx_runtime_1.jsx)(MenuItem, { icon: item.icon, label: item.label, onClick: () => handleItemClick(item) }, index)))] }), (0, jsx_runtime_1.jsx)("div", { className: "border-t border-gray-200 dark:border-slate-700 py-1", children: (0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { className: "h-4 w-4" }), label: "Sign Out", onClick: handleSignOut, variant: "danger" }) })] }))] }));
 }
 function MenuItem({ icon, label, onClick, variant = 'default' }) {
     const baseClasses = "flex items-center w-full px-4 py-2 text-sm cursor-pointer transition-colors";

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

@@ -5,3 +5,5 @@
  */
 export { UserAvatarMenu } from './UserAvatarMenu';
 export type { UserAvatarMenuProps } from './UserAvatarMenu';
+export { MobileNavDrawer } from './MobileNavDrawer';
+export type { MobileNavDrawerProps, NavItem, NavSection } from './MobileNavDrawer';

package/dist/components/account/index.js

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

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export type { AuthConfig } from './types/auth';
 export { makeAuthDecision } from './auth/auth-decision';
 export { isUnauthenticatedRoute, configurePublicRoutes, getRouteConfig } from './auth/route-config';
 export { createMvpMiddleware } from './middleware/create-middleware';
-export { UserAvatarMenu } from './components/account';
-export type { UserAvatarMenuProps } from './components/account';
+export { UserAvatarMenu, MobileNavDrawer } from './components/account';
+export type { UserAvatarMenuProps, MobileNavDrawerProps, NavItem, NavSection } from './components/account';
 export { ErrorMetricsCard, HealthMetricsCard, AuditLogViewer, AdminAnalyticsLayout, useErrorMetrics, useHealthMetrics, useAuditLog, useAdminAnalytics, getErrorMetrics, getHealthMetrics, writeAuditLog, queryAuditLog, } from './logging';
 export type { ErrorMetrics, HealthMetrics, AuditLogEntry, AuditLogQuery, AuditLogResponse, TimeRange, RouteError, LevelCount, CategoryCount, ErrorDetail, EndpointHealth, SlowRequest, } from './logging';

package/dist/index.js

@@ -2,7 +2,7 @@
 // Type augmentation for NextAuth - included via ambient module declaration
 // Note: Type declarations are picked up automatically via tsconfig.json, no explicit import needed
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.queryAuditLog = exports.writeAuditLog = exports.getHealthMetrics = exports.getErrorMetrics = exports.useAdminAnalytics = exports.useAuditLog = exports.useHealthMetrics = exports.useErrorMetrics = exports.AdminAnalyticsLayout = exports.AuditLogViewer = exports.HealthMetricsCard = exports.ErrorMetricsCard = exports.UserAvatarMenu = exports.createMvpMiddleware = exports.getRouteConfig = exports.configurePublicRoutes = exports.isUnauthenticatedRoute = exports.makeAuthDecision = exports.useTraditionalAuthEnabled = exports.useFederatedAuthEnabled = exports.useFederatedProviders = exports.useAuthMode = exports.useAuthConfig = exports.AuthProvider = exports.useAnonSession = exports.fetchWithAuth = void 0;
+exports.queryAuditLog = exports.writeAuditLog = exports.getHealthMetrics = exports.getErrorMetrics = exports.useAdminAnalytics = exports.useAuditLog = exports.useHealthMetrics = exports.useErrorMetrics = exports.AdminAnalyticsLayout = exports.AuditLogViewer = exports.HealthMetricsCard = exports.ErrorMetricsCard = exports.MobileNavDrawer = exports.UserAvatarMenu = exports.createMvpMiddleware = exports.getRouteConfig = exports.configurePublicRoutes = exports.isUnauthenticatedRoute = exports.makeAuthDecision = exports.useTraditionalAuthEnabled = exports.useFederatedAuthEnabled = exports.useFederatedProviders = exports.useAuthMode = exports.useAuthConfig = exports.AuthProvider = exports.useAnonSession = exports.fetchWithAuth = void 0;
 // NOTE: Server-only exports are NOT exported from the root to prevent bundling Node.js modules in client code.
 // Server-side code should import from subpath exports:
 // - Session management: import { sessionStore } from '@payez/next-mvp/lib/session-store'
@@ -38,6 +38,7 @@ Object.defineProperty(exports, "createMvpMiddleware", { enumerable: true, get: f
 // Account Components
 var account_1 = require("./components/account");
 Object.defineProperty(exports, "UserAvatarMenu", { enumerable: true, get: function () { return account_1.UserAvatarMenu; } });
+Object.defineProperty(exports, "MobileNavDrawer", { enumerable: true, get: function () { return account_1.MobileNavDrawer; } });
 // Admin Logging & Analytics (client-side components and hooks)
 var logging_1 = require("./logging");
 Object.defineProperty(exports, "ErrorMetricsCard", { enumerable: true, get: function () { return logging_1.ErrorMetricsCard; } });

package/dist/pages/admin-page-permissions/PagePermissionsAdminPage.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Page Permissions Admin Page (/admin/page-permissions)
+ *
+ * Design: Aurum (DESIGN_SPEC.md)
+ * Control which roles can access which pages
+ *
+ * Three sections:
+ * 1. Search & Filters — Find pages by route or category
+ * 2. Pages & Role Requirements — Table showing pages and their role assignments
+ * 3. Change History — Audit log of permission changes
+ *
+ * Design Principles:
+ * - No shadows, gradients, or animation
+ * - One accent color (blue #0066cc)
+ * - Inline interactions (no modals)
+ * - Scan-friendly tables and lists
+ */
+export default function PagePermissionsAdminPage(): import("react/jsx-runtime").JSX.Element;

package/dist/pages/admin-page-permissions/PagePermissionsAdminPage.js

@@ -0,0 +1,276 @@
+"use strict";
+/**
+ * Page Permissions Admin Page (/admin/page-permissions)
+ *
+ * Design: Aurum (DESIGN_SPEC.md)
+ * Control which roles can access which pages
+ *
+ * Three sections:
+ * 1. Search & Filters — Find pages by route or category
+ * 2. Pages & Role Requirements — Table showing pages and their role assignments
+ * 3. Change History — Audit log of permission changes
+ *
+ * Design Principles:
+ * - No shadows, gradients, or animation
+ * - One accent color (blue #0066cc)
+ * - Inline interactions (no modals)
+ * - Scan-friendly tables and lists
+ */
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = PagePermissionsAdminPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// Mock data
+const MOCK_PAGES = [
+    {
+        id: 1,
+        route: '/dashboard',
+        displayName: 'Dashboard',
+        requires2fa: false,
+        roles: [],
+        category: 'user',
+    },
+    {
+        id: 2,
+        route: '/admin',
+        displayName: 'Admin Dashboard',
+        requires2fa: true,
+        roles: ['SiteAdmin', 'ClientAdmin'],
+        category: 'admin',
+    },
+    {
+        id: 3,
+        route: '/admin/users',
+        displayName: 'User Management',
+        requires2fa: true,
+        roles: ['SiteAdmin'],
+        category: 'admin',
+    },
+    {
+        id: 4,
+        route: '/account/security',
+        displayName: 'Security Settings',
+        requires2fa: true,
+        roles: [],
+        category: 'account',
+    },
+    {
+        id: 5,
+        route: '/interview-practice',
+        displayName: 'Interview Practice',
+        requires2fa: false,
+        roles: ['ClientAdmin'],
+        category: 'user',
+    },
+];
+const MOCK_CHANGES = [
+    {
+        timestamp: '3/10/2026, 10:30 AM',
+        event: '/admin/users role requirement changed: Added ClientAdmin by Admin User',
+    },
+    {
+        timestamp: '3/10/2026, 10:15 AM',
+        event: '/dashboard updated: 2FA requirement removed by Admin User',
+    },
+    {
+        timestamp: '3/9/2026, 3:45 PM',
+        event: '/interview-practice role requirement changed: Added SiteAdmin by Admin User',
+    },
+];
+const CATEGORIES = ['All Pages', 'Admin Pages', 'Account Pages', 'User Pages'];
+const categoryMap = {
+    'All Pages': '',
+    'Admin Pages': 'admin',
+    'Account Pages': 'account',
+    'User Pages': 'user',
+};
+function PagePermissionsAdminPage() {
+    const [pages, setPages] = (0, react_1.useState)(MOCK_PAGES);
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
+    const [activeFilter, setActiveFilter] = (0, react_1.useState)('All Pages');
+    const [message, setMessage] = (0, react_1.useState)(null);
+    const [editingPageId, setEditingPageId] = (0, react_1.useState)(null);
+    const [tempRoles, setTempRoles] = (0, react_1.useState)([]);
+    const filteredPages = pages.filter((page) => {
+        const matchesSearch = page.route.toLowerCase().includes(searchQuery.toLowerCase()) ||
+            page.displayName.toLowerCase().includes(searchQuery.toLowerCase());
+        const categoryFilter = categoryMap[activeFilter];
+        const matchesCategory = !categoryFilter || page.category === categoryFilter;
+        return matchesSearch && matchesCategory;
+    });
+    const handleEditRoles = (pageId, currentRoles) => {
+        setEditingPageId(pageId);
+        setTempRoles([...currentRoles]);
+    };
+    const handleToggleRole = (role) => {
+        setTempRoles((prev) => prev.includes(role) ? prev.filter((r) => r !== role) : [...prev, role]);
+    };
+    const handleSaveRoles = (pageId) => {
+        setPages((prev) => prev.map((p) => (p.id === pageId ? { ...p, roles: tempRoles } : p)));
+        setMessage('Page updated');
+        setEditingPageId(null);
+        setTimeout(() => setMessage(null), 3000);
+    };
+    const handleRemoveRole = (pageId, role) => {
+        setPages((prev) => prev.map((p) => p.id === pageId ? { ...p, roles: p.roles.filter((r) => r !== role) } : p));
+        setMessage('Role removed');
+        setTimeout(() => setMessage(null), 3000);
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { style: { background: '#f8f8f8', minHeight: '100vh', padding: '40px 20px' }, children: (0, jsx_runtime_1.jsxs)("div", { style: { maxWidth: '1200px', margin: '0 auto' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '40px' }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
+                                fontSize: '32px',
+                                fontWeight: 400,
+                                color: '#333',
+                                marginBottom: '8px',
+                            }, children: "Page Permissions" }), (0, jsx_runtime_1.jsx)("p", { style: { fontSize: '16px', color: '#666', fontWeight: 400 }, children: "Control which roles can access which pages" })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: '1px', background: '#e0e0e0', margin: '24px 0' } }), (0, jsx_runtime_1.jsxs)("section", { style: { marginBottom: '40px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '16px' }, children: (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Search pages...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), style: {
+                                    width: '100%',
+                                    padding: '10px 14px',
+                                    fontSize: '14px',
+                                    border: '1px solid #e0e0e0',
+                                    borderRadius: '4px',
+                                    background: 'white',
+                                    boxSizing: 'border-box',
+                                } }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: '8px', flexWrap: 'wrap' }, children: CATEGORIES.map((cat) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => setActiveFilter(cat), style: {
+                                    padding: '8px 14px',
+                                    fontSize: '13px',
+                                    border: activeFilter === cat ? 'none' : '1px solid #e0e0e0',
+                                    borderRadius: '4px',
+                                    background: activeFilter === cat ? '#0066cc' : 'white',
+                                    color: activeFilter === cat ? 'white' : '#333',
+                                    cursor: 'pointer',
+                                    transition: 'all 0.2s',
+                                }, onMouseEnter: (e) => {
+                                    if (activeFilter !== cat) {
+                                        e.currentTarget.style.background = '#f5f5f5';
+                                    }
+                                }, onMouseLeave: (e) => {
+                                    if (activeFilter !== cat) {
+                                        e.currentTarget.style.background = 'white';
+                                    }
+                                }, children: cat }, cat))) })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: '1px', background: '#e0e0e0', margin: '24px 0' } }), message && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                        padding: '8px 12px',
+                        background: '#e8f5e9',
+                        color: '#2e7d32',
+                        borderRadius: '4px',
+                        marginBottom: '12px',
+                        fontSize: '13px',
+                    }, children: ["\u2713 ", message] })), (0, jsx_runtime_1.jsxs)("section", { style: { marginBottom: '60px' }, children: [(0, jsx_runtime_1.jsx)("h2", { style: {
+                                fontSize: '18px',
+                                fontWeight: 400,
+                                color: '#666',
+                                marginBottom: '24px',
+                                textTransform: 'uppercase',
+                                letterSpacing: '1px',
+                            }, children: "Pages & Permissions" }), (0, jsx_runtime_1.jsxs)("table", { style: {
+                                width: '100%',
+                                borderCollapse: 'collapse',
+                                background: 'white',
+                                border: '1px solid #e0e0e0',
+                                borderRadius: '4px',
+                                overflow: 'hidden',
+                            }, children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { style: { background: '#f8f8f8', borderBottom: '1px solid #e0e0e0' }, children: [(0, jsx_runtime_1.jsx)("th", { style: {
+                                                    padding: '16px',
+                                                    textAlign: 'left',
+                                                    fontSize: '12px',
+                                                    color: '#999',
+                                                    textTransform: 'uppercase',
+                                                    letterSpacing: '0.5px',
+                                                    fontWeight: 'normal',
+                                                }, children: "Route" }), (0, jsx_runtime_1.jsx)("th", { style: {
+                                                    padding: '16px',
+                                                    textAlign: 'left',
+                                                    fontSize: '12px',
+                                                    color: '#999',
+                                                    textTransform: 'uppercase',
+                                                    letterSpacing: '0.5px',
+                                                    fontWeight: 'normal',
+                                                }, children: "Display Name" }), (0, jsx_runtime_1.jsx)("th", { style: {
+                                                    padding: '16px',
+                                                    textAlign: 'center',
+                                                    fontSize: '12px',
+                                                    color: '#999',
+                                                    textTransform: 'uppercase',
+                                                    letterSpacing: '0.5px',
+                                                    fontWeight: 'normal',
+                                                }, children: "2FA" }), (0, jsx_runtime_1.jsx)("th", { style: {
+                                                    padding: '16px',
+                                                    textAlign: 'left',
+                                                    fontSize: '12px',
+                                                    color: '#999',
+                                                    textTransform: 'uppercase',
+                                                    letterSpacing: '0.5px',
+                                                    fontWeight: 'normal',
+                                                }, children: "Roles" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: filteredPages.map((page) => ((0, jsx_runtime_1.jsxs)("tr", { style: {
+                                            borderBottom: '1px solid #e0e0e0',
+                                            height: '48px',
+                                        }, onMouseEnter: (e) => (e.currentTarget.style.background = '#f5f5f5'), onMouseLeave: (e) => (e.currentTarget.style.background = 'white'), children: [(0, jsx_runtime_1.jsx)("td", { style: {
+                                                    padding: '16px',
+                                                    fontSize: '12px',
+                                                    fontFamily: 'Courier New, monospace',
+                                                    color: '#333',
+                                                }, title: "Click to copy", children: page.route }), (0, jsx_runtime_1.jsx)("td", { style: { padding: '16px', fontSize: '14px', color: '#333' }, children: page.displayName }), (0, jsx_runtime_1.jsx)("td", { style: { padding: '16px', textAlign: 'center', fontSize: '14px' }, children: page.requires2fa ? '✓' : '✕' }), (0, jsx_runtime_1.jsx)("td", { style: { padding: '16px', fontSize: '13px' }, children: editingPageId === page.id ? ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '12px', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: '12px' }, children: ['SiteAdmin', 'ClientAdmin'].map((role) => ((0, jsx_runtime_1.jsxs)("label", { style: {
+                                                                    display: 'flex',
+                                                                    alignItems: 'center',
+                                                                    gap: '6px',
+                                                                    cursor: 'pointer',
+                                                                }, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: tempRoles.includes(role), onChange: () => handleToggleRole(role), style: { cursor: 'pointer' } }), (0, jsx_runtime_1.jsx)("span", { style: { fontSize: '12px', color: '#333' }, children: role })] }, role))) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '6px' }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => handleSaveRoles(page.id), style: {
+                                                                        padding: '6px 10px',
+                                                                        background: '#0066cc',
+                                                                        color: 'white',
+                                                                        border: 'none',
+                                                                        borderRadius: '4px',
+                                                                        cursor: 'pointer',
+                                                                        fontSize: '11px',
+                                                                    }, onMouseEnter: (e) => (e.currentTarget.style.background = '#0052a3'), onMouseLeave: (e) => (e.currentTarget.style.background = '#0066cc'), children: "Save" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setEditingPageId(null), style: {
+                                                                        padding: '6px 10px',
+                                                                        background: 'white',
+                                                                        color: '#333',
+                                                                        border: '1px solid #e0e0e0',
+                                                                        borderRadius: '4px',
+                                                                        cursor: 'pointer',
+                                                                        fontSize: '11px',
+                                                                    }, onMouseEnter: (e) => (e.currentTarget.style.background = '#f5f5f5'), onMouseLeave: (e) => (e.currentTarget.style.background = 'white'), children: "Cancel" })] })] })) : ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: '6px', alignItems: 'center' }, children: page.roles.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [page.roles.map((role) => ((0, jsx_runtime_1.jsxs)("span", { style: {
+                                                                    background: '#e3f2fd',
+                                                                    color: '#0066cc',
+                                                                    padding: '4px 8px',
+                                                                    borderRadius: '3px',
+                                                                    fontSize: '12px',
+                                                                    display: 'inline-flex',
+                                                                    alignItems: 'center',
+                                                                    gap: '4px',
+                                                                }, children: [role, (0, jsx_runtime_1.jsx)("button", { onClick: () => handleRemoveRole(page.id, role), style: {
+                                                                            background: 'none',
+                                                                            border: 'none',
+                                                                            color: '#0066cc',
+                                                                            cursor: 'pointer',
+                                                                            fontSize: '12px',
+                                                                            padding: '0',
+                                                                            lineHeight: '1',
+                                                                        }, children: "\u2715" })] }, role))), (0, jsx_runtime_1.jsx)("button", { onClick: () => handleEditRoles(page.id, page.roles), style: {
+                                                                    padding: '4px 8px',
+                                                                    background: 'white',
+                                                                    color: '#0066cc',
+                                                                    border: '1px solid #e0e0e0',
+                                                                    borderRadius: '3px',
+                                                                    cursor: 'pointer',
+                                                                    fontSize: '11px',
+                                                                }, onMouseEnter: (e) => (e.currentTarget.style.background = '#f5f5f5'), onMouseLeave: (e) => (e.currentTarget.style.background = 'white'), children: "+" })] })) : ((0, jsx_runtime_1.jsx)("button", { onClick: () => handleEditRoles(page.id, []), style: {
+                                                            padding: '4px 8px',
+                                                            background: 'white',
+                                                            color: '#0066cc',
+                                                            border: '1px solid #e0e0e0',
+                                                            borderRadius: '3px',
+                                                            cursor: 'pointer',
+                                                            fontSize: '11px',
+                                                        }, onMouseEnter: (e) => (e.currentTarget.style.background = '#f5f5f5'), onMouseLeave: (e) => (e.currentTarget.style.background = 'white'), children: "+ Add Role" })) })) })] }, page.id))) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginTop: '12px', fontSize: '12px', color: '#999' }, children: [filteredPages.length, " of ", pages.length, " pages shown"] })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: '1px', background: '#e0e0e0', margin: '24px 0' } }), (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("h2", { style: {
+                                fontSize: '18px',
+                                fontWeight: 400,
+                                color: '#666',
+                                marginBottom: '24px',
+                                textTransform: 'uppercase',
+                                letterSpacing: '1px',
+                            }, children: "Recent Changes" }), (0, jsx_runtime_1.jsx)("div", { style: { background: 'white', border: '1px solid #e0e0e0', borderRadius: '4px' }, children: MOCK_CHANGES.map((change, idx) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                    padding: '16px',
+                                    borderBottom: idx < MOCK_CHANGES.length - 1 ? '1px solid #e0e0e0' : 'none',
+                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: '12px', color: '#999', marginBottom: '4px' }, children: change.timestamp }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: '14px', color: '#333' }, children: change.event })] }, idx))) })] })] }) }));
+}

package/dist/pages/admin-page-permissions/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Page Permissions Admin exports
+ *
+ * - PagePermissionsAdminPage: Admin interface for managing page permissions (/admin/page-permissions)
+ */
+export { default as PagePermissionsAdminPage } from './PagePermissionsAdminPage';

package/dist/pages/admin-page-permissions/index.js

@@ -0,0 +1,13 @@
+"use strict";
+/**
+ * Page Permissions Admin exports
+ *
+ * - PagePermissionsAdminPage: Admin interface for managing page permissions (/admin/page-permissions)
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PagePermissionsAdminPage = void 0;
+var PagePermissionsAdminPage_1 = require("./PagePermissionsAdminPage");
+Object.defineProperty(exports, "PagePermissionsAdminPage", { enumerable: true, get: function () { return __importDefault(PagePermissionsAdminPage_1).default; } });

package/dist/pages/admin-roles/RolesAdminPage.d.ts

@@ -1,15 +1,16 @@
 /**
- * Roles Admin Page for @payez/next-mvp
+ * Role Management Admin Page (/admin/roles)
  *
- * Read-only admin interface for viewing roles and permissions (/admin/roles).
- * MVP scope: View IDP roles and their page permissions only.
- * Role creation/editing deferred to post-MVP.
+ * Design: Aurum (DESIGN_SPEC.md)
+ * Three sections:
+ * 1. Available Roles — Cards showing SiteAdmin, ClientAdmin
+ * 2. User Assignments — Table with inline role dropdowns
+ * 3. Change History — Audit log of role changes
  *
- * @see docs/specs/ROLES_MANAGEMENT_SPEC.md
+ * Design Principles:
+ * - No shadows, gradients, or animation
+ * - One accent color (blue #0066cc)
+ * - Inline interactions (no modals)
+ * - Scan-friendly tables and lists
  */
-interface RolesAdminPageProps {
-    rolesEndpoint?: string;
-    matrixEndpoint?: string;
-}
-export default function RolesAdminPage({ rolesEndpoint, matrixEndpoint, }: RolesAdminPageProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export default function RolesAdminPage(): import("react/jsx-runtime").JSX.Element;