@payez/next-mvp 3.6.0 → 3.6.1

package/dist/pages/admin-roles/RolesAdminPage.js

@@ -1,78 +1,261 @@
 "use strict";
 /**
- * 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
  */
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = RolesAdminPage;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const useTheme_1 = require("../../theme/useTheme");
-const components_1 = require("../roles/components");
-function RolesAdminPage({ rolesEndpoint = '/api/v1/admin/roles', matrixEndpoint = '/api/v1/admin/permissions-matrix', }) {
-    const layout = (0, useTheme_1.useLayout)();
-    const colors = (0, useTheme_1.useColors)();
-    const isDark = colors?.background?.includes('slate-9') ||
-        colors?.background?.includes('gray-9') ||
-        colors?.card?.includes('slate-8');
-    // State
-    const [viewMode, setViewMode] = (0, react_1.useState)('list');
-    const [roles, setRoles] = (0, react_1.useState)([]);
-    const [matrixData, setMatrixData] = (0, react_1.useState)(null);
-    const [loading, setLoading] = (0, react_1.useState)(true);
-    const [expandedRole, setExpandedRole] = (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';
-    const hoverBg = isDark ? 'hover:bg-slate-700' : 'hover:bg-gray-50';
-    // Fetch data
-    const fetchRoles = (0, react_1.useCallback)(async () => {
-        try {
-            const res = await fetch(rolesEndpoint, { credentials: 'include' });
-            if (res.ok) {
-                const data = await res.json();
-                setRoles(data.roles || data.idp_roles || []);
-            }
-        }
-        catch (err) {
-            console.error('Failed to fetch roles:', err);
-        }
-    }, [rolesEndpoint]);
-    const fetchMatrix = (0, react_1.useCallback)(async () => {
-        try {
-            const res = await fetch(matrixEndpoint, { credentials: 'include' });
-            if (res.ok) {
-                const data = await res.json();
-                setMatrixData(data);
-            }
-        }
-        catch (err) {
-            console.error('Failed to fetch matrix:', err);
-        }
-    }, [matrixEndpoint]);
-    (0, react_1.useEffect)(() => {
-        setLoading(true);
-        Promise.all([fetchRoles(), fetchMatrix()])
-            .finally(() => setLoading(false));
-    }, [fetchRoles, fetchMatrix]);
-    const toggleRoleExpanded = (roleName) => {
-        setExpandedRole(expandedRole === roleName ? null : roleName);
+// Mock data
+const MOCK_ROLES = [
+    {
+        id: 1,
+        name: 'SiteAdmin',
+        description: 'System-wide administrator. Manages all vibe_app features.',
+        userCount: 1,
+        lastChanged: '3/10/2026 by Admin',
+    },
+    {
+        id: 2,
+        name: 'ClientAdmin',
+        description: 'Resume admin for Ideal Resume. Manages users, resumes, audit logs.',
+        userCount: 2,
+        lastChanged: '3/9/2026 by Admin',
+    },
+];
+const MOCK_USERS = [
+    { id: 1, email: 'alice@example.com', role: 'ClientAdmin', assigned: '3/10/2026' },
+    { id: 2, email: 'bob@example.com', role: 'SiteAdmin', assigned: '2/28/2026' },
+    { id: 3, email: 'carol@example.com', role: null, assigned: null },
+    { id: 4, email: 'dave@example.com', role: 'ClientAdmin', assigned: '3/5/2026' },
+    { id: 5, email: 'eve@example.com', role: 'ClientAdmin', assigned: '3/8/2026' },
+];
+const MOCK_CHANGES = [
+    { timestamp: '3/10/2026, 10:15 AM', event: 'Alice assigned to ClientAdmin by Admin User' },
+    { timestamp: '3/9/2026, 2:30 PM', event: 'Bob assigned to SiteAdmin by Admin User' },
+    { timestamp: '3/8/2026, 4:45 PM', event: 'Carol removed from ClientAdmin by Admin User' },
+    { timestamp: '3/8/2026, 3:00 PM', event: 'SiteAdmin edited: Description changed by Admin User' },
+];
+function RolesAdminPage() {
+    const [users, setUsers] = (0, react_1.useState)(MOCK_USERS);
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
+    const [editingUserId, setEditingUserId] = (0, react_1.useState)(null);
+    const [tempRole, setTempRole] = (0, react_1.useState)(null);
+    const [message, setMessage] = (0, react_1.useState)(null);
+    const filteredUsers = users.filter((u) => u.email.toLowerCase().includes(searchQuery.toLowerCase()));
+    const handleEditRole = (userId, currentRole) => {
+        setEditingUserId(userId);
+        setTempRole(currentRole);
     };
-    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..." })] }) }));
-    }
-    return ((0, jsx_runtime_1.jsx)("div", { className: `min-h-screen ${bgColor}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `max-w-6xl 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: "Role Permissions" }), (0, jsx_runtime_1.jsx)("p", { className: `mt-1 ${textMuted}`, children: "View IDP roles and their page access permissions" })] }), (0, jsx_runtime_1.jsx)("a", { href: "/admin", className: `text-sm hover:underline ${textMuted}`, children: "Back to Admin" })] }), (0, jsx_runtime_1.jsxs)("div", { className: `flex border-b ${borderColor} mb-6`, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setViewMode('list'), className: `px-4 py-3 font-medium text-sm border-b-2 transition-colors ${viewMode === 'list'
-                                ? 'border-blue-500 text-blue-500'
-                                : `border-transparent ${textMuted} hover:text-blue-400`}`, children: "Role List" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setViewMode('matrix'), className: `px-4 py-3 font-medium text-sm border-b-2 transition-colors ${viewMode === 'matrix'
-                                ? 'border-blue-500 text-blue-500'
-                                : `border-transparent ${textMuted} hover:text-blue-400`}`, children: "Permissions Matrix" })] }), viewMode === 'list' && ((0, jsx_runtime_1.jsxs)("div", { className: `${cardBg} border ${borderColor} rounded-lg overflow-hidden`, children: [(0, jsx_runtime_1.jsx)("div", { className: `px-4 py-3 border-b ${borderColor}`, children: (0, jsx_runtime_1.jsx)("p", { className: `text-sm ${textMuted}`, children: "Click a role to see what pages it grants access to" }) }), (0, jsx_runtime_1.jsx)("div", { className: `divide-y ${borderColor}`, children: roles.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: `p-8 text-center ${textMuted}`, children: "No roles found" })) : (roles.map((role) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => toggleRoleExpanded(role.role_name), className: `w-full px-4 py-4 flex items-center justify-between ${hoverBg} transition-colors`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("svg", { className: `w-5 h-5 ${textMuted} transition-transform ${expandedRole === role.role_name ? 'rotate-90' : ''}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-left", children: [(0, jsx_runtime_1.jsx)("div", { className: `font-medium ${textPrimary}`, children: role.display_name || role.role_name }), (0, jsx_runtime_1.jsx)("div", { className: `text-sm ${textMuted}`, children: role.role_name })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(components_1.RoleBadge, { roleName: "IDP", source: "idp", size: "sm", isDark: isDark }), (0, jsx_runtime_1.jsxs)("span", { className: `text-sm ${textMuted}`, children: [role.permission_count ?? role.permissions?.length ?? 0, " pages"] })] })] }), expandedRole === role.role_name && ((0, jsx_runtime_1.jsx)("div", { className: `px-4 pb-4 ${isDark ? 'bg-slate-800/50' : 'bg-gray-50'}`, children: (0, jsx_runtime_1.jsx)("div", { className: "pl-8", children: role.permissions && role.permissions.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-2 pt-2", children: role.permissions.map((perm) => ((0, jsx_runtime_1.jsxs)("div", { className: `flex items-center justify-between py-2 px-3 rounded ${isDark ? 'bg-slate-700/50' : 'bg-white'} border ${borderColor}`, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: `font-mono text-sm ${textPrimary}`, children: perm.route_pattern }), perm.display_name && ((0, jsx_runtime_1.jsxs)("span", { className: `ml-2 text-sm ${textMuted}`, children: ["- ", perm.display_name] }))] }), perm.requires_2fa && ((0, jsx_runtime_1.jsx)("span", { className: "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800", children: "2FA Required" }))] }, perm.page_permission_id))) })) : ((0, jsx_runtime_1.jsx)("p", { className: `py-4 text-sm ${textMuted}`, children: "No page permissions assigned to this role" })) }) }))] }, role.role_name)))) }), (0, jsx_runtime_1.jsxs)("div", { className: `px-4 py-3 border-t ${borderColor} ${textMuted} text-sm`, children: [roles.length, " roles total"] })] })), viewMode === 'matrix' && matrixData && ((0, jsx_runtime_1.jsxs)("div", { className: `${cardBg} border ${borderColor} rounded-lg overflow-hidden`, children: [(0, jsx_runtime_1.jsx)("div", { className: `px-4 py-3 border-b ${borderColor}`, children: (0, jsx_runtime_1.jsx)("p", { className: `text-sm ${textMuted}`, children: "Read-only view of which roles have access to which pages" }) }), (0, jsx_runtime_1.jsx)("div", { className: "overflow-x-auto", children: (0, jsx_runtime_1.jsxs)("table", { className: "w-full", children: [(0, jsx_runtime_1.jsx)("thead", { className: isDark ? 'bg-slate-700/50' : 'bg-gray-50', children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { className: `px-4 py-3 text-left text-sm font-medium ${textMuted} sticky left-0 ${isDark ? 'bg-slate-700' : 'bg-gray-50'}`, children: "Page" }), matrixData.roles.map((role) => ((0, jsx_runtime_1.jsx)("th", { className: `px-4 py-3 text-center text-sm font-medium ${textMuted} whitespace-nowrap`, children: role }, role))), (0, jsx_runtime_1.jsx)("th", { className: `px-4 py-3 text-center text-sm font-medium ${textMuted}`, children: "2FA" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { className: `divide-y ${borderColor}`, children: matrixData.pages.map((page) => ((0, jsx_runtime_1.jsxs)("tr", { className: hoverBg, children: [(0, jsx_runtime_1.jsx)("td", { className: `px-4 py-3 ${textPrimary} sticky left-0 ${cardBg}`, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: "font-mono text-sm", children: page.route_pattern }), page.display_name && ((0, jsx_runtime_1.jsx)("span", { className: `block text-xs ${textMuted}`, children: page.display_name }))] }) }), matrixData.roles.map((role) => ((0, jsx_runtime_1.jsx)("td", { className: "px-4 py-3 text-center", children: page.role_access[role] ? ((0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5 mx-auto text-green-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })) : ((0, jsx_runtime_1.jsx)("svg", { className: `w-5 h-5 mx-auto ${textMuted}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })) }, role))), (0, jsx_runtime_1.jsx)("td", { className: "px-4 py-3 text-center", children: page.requires_2fa && ((0, jsx_runtime_1.jsx)("span", { className: "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800", children: "2FA" })) })] }, page.page_permission_id))) })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: `px-4 py-3 border-t ${borderColor} ${textMuted} text-sm flex items-center gap-4`, children: [(0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-4 h-4 text-green-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }), "Access granted"] }), (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-2", children: [(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: "M6 18L18 6M6 6l12 12" }) }), "No access"] })] })] })), viewMode === 'matrix' && !matrixData && ((0, jsx_runtime_1.jsx)("div", { className: `${cardBg} border ${borderColor} rounded-lg p-8 text-center ${textMuted}`, children: "Unable to load permissions matrix" })), (0, jsx_runtime_1.jsx)("div", { className: `mt-6 p-4 rounded-lg ${isDark ? 'bg-blue-900/20 border border-blue-700' : 'bg-blue-50 border border-blue-200'}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-3", children: [(0, jsx_runtime_1.jsx)("svg", { className: `w-5 h-5 mt-0.5 ${isDark ? 'text-blue-400' : 'text-blue-600'}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: `font-medium ${isDark ? 'text-blue-300' : 'text-blue-800'}`, children: "Roles are managed by your Identity Provider" }), (0, jsx_runtime_1.jsx)("p", { className: `text-sm mt-1 ${isDark ? 'text-blue-400' : 'text-blue-600'}`, children: "Role assignments are controlled through your organization's IDP. Contact your system administrator to request role changes." })] })] }) })] }) }));
+    const handleSaveRole = (userId) => {
+        setUsers((prev) => prev.map((u) => u.id === userId ? { ...u, role: tempRole, assigned: '3/10/2026' } : u));
+        setMessage(`Role updated`);
+        setEditingUserId(null);
+        setTimeout(() => setMessage(null), 3000);
+    };
+    const handleRemoveRole = (userId) => {
+        setUsers((prev) => prev.map((u) => (u.id === userId ? { ...u, role: null, assigned: null } : u)));
+        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: "Role Management" }), (0, jsx_runtime_1.jsx)("p", { style: { fontSize: '16px', color: '#666', fontWeight: 400 }, children: "Manage who has access to what role" })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: '1px', background: '#e0e0e0', margin: '24px 0' } }), (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: "Available Roles" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'grid',
+                                gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
+                                gap: '24px',
+                            }, children: MOCK_ROLES.map((role) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                    background: 'white',
+                                    border: '1px solid #e0e0e0',
+                                    borderRadius: '6px',
+                                    padding: '20px',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    transition: 'all 0.2s ease',
+                                    cursor: 'default',
+                                }, onMouseEnter: (e) => {
+                                    e.currentTarget.style.background = '#f9f9f9';
+                                    e.currentTarget.style.borderColor = '#d0d0d0';
+                                }, onMouseLeave: (e) => {
+                                    e.currentTarget.style.background = 'white';
+                                    e.currentTarget.style.borderColor = '#e0e0e0';
+                                }, children: [(0, jsx_runtime_1.jsx)("h3", { style: {
+                                            fontSize: '18px',
+                                            fontWeight: 600,
+                                            color: '#333',
+                                            marginBottom: '8px',
+                                        }, children: role.name }), (0, jsx_runtime_1.jsx)("p", { style: {
+                                            fontSize: '14px',
+                                            color: '#666',
+                                            marginBottom: '16px',
+                                            flex: 1,
+                                            lineHeight: 1.6,
+                                        }, children: role.description }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '16px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { fontSize: '12px', color: '#999' }, children: ["Users: ", role.userCount] }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: '12px', color: '#999' }, children: ["Last changed: ", role.lastChanged] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '8px' }, children: [(0, jsx_runtime_1.jsx)("button", { style: {
+                                                    padding: '8px 16px',
+                                                    fontSize: '13px',
+                                                    background: '#0066cc',
+                                                    color: 'white',
+                                                    border: 'none',
+                                                    borderRadius: '4px',
+                                                    cursor: 'pointer',
+                                                }, onMouseEnter: (e) => (e.currentTarget.style.background = '#0052a3'), onMouseLeave: (e) => (e.currentTarget.style.background = '#0066cc'), children: "Edit" }), (0, jsx_runtime_1.jsx)("button", { style: {
+                                                    padding: '8px 16px',
+                                                    fontSize: '13px',
+                                                    background: 'white',
+                                                    color: '#333',
+                                                    border: '1px solid #e0e0e0',
+                                                    borderRadius: '4px',
+                                                    cursor: 'pointer',
+                                                }, onMouseEnter: (e) => (e.currentTarget.style.background = '#f5f5f5'), onMouseLeave: (e) => (e.currentTarget.style.background = 'white'), children: "Remove" })] })] }, role.id))) })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: '1px', background: '#e0e0e0', margin: '24px 0' } }), (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: "User Assignments" }), (0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '24px' }, children: (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Search users...", 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',
+                                } }) }), 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)("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: "User" }), (0, jsx_runtime_1.jsx)("th", { style: {
+                                                    padding: '16px',
+                                                    textAlign: 'left',
+                                                    fontSize: '12px',
+                                                    color: '#999',
+                                                    textTransform: 'uppercase',
+                                                    letterSpacing: '0.5px',
+                                                    fontWeight: 'normal',
+                                                }, children: "Role" }), (0, jsx_runtime_1.jsx)("th", { style: {
+                                                    padding: '16px',
+                                                    textAlign: 'left',
+                                                    fontSize: '12px',
+                                                    color: '#999',
+                                                    textTransform: 'uppercase',
+                                                    letterSpacing: '0.5px',
+                                                    fontWeight: 'normal',
+                                                }, children: "Assigned" }), (0, jsx_runtime_1.jsx)("th", { style: {
+                                                    padding: '16px',
+                                                    textAlign: 'left',
+                                                    fontSize: '12px',
+                                                    color: '#999',
+                                                    textTransform: 'uppercase',
+                                                    letterSpacing: '0.5px',
+                                                    fontWeight: 'normal',
+                                                }, children: "Actions" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: filteredUsers.map((user) => ((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: '14px', color: '#333' }, children: user.email }), (0, jsx_runtime_1.jsx)("td", { style: { padding: '16px', fontSize: '14px' }, children: editingUserId === user.id ? ((0, jsx_runtime_1.jsxs)("select", { value: tempRole || '', onChange: (e) => setTempRole(e.target.value || null), style: {
+                                                        padding: '6px 10px',
+                                                        fontSize: '13px',
+                                                        border: '1px solid #0066cc',
+                                                        borderRadius: '4px',
+                                                        background: 'white',
+                                                        color: '#333',
+                                                    }, children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "\u2014 Remove role \u2014" }), (0, jsx_runtime_1.jsx)("option", { value: "SiteAdmin", children: "SiteAdmin" }), (0, jsx_runtime_1.jsx)("option", { value: "ClientAdmin", children: "ClientAdmin" })] })) : user.role ? ((0, jsx_runtime_1.jsx)("span", { style: {
+                                                        background: '#e3f2fd',
+                                                        color: '#0066cc',
+                                                        padding: '6px 10px',
+                                                        borderRadius: '4px',
+                                                        fontSize: '13px',
+                                                        display: 'inline-block',
+                                                    }, children: user.role })) : ((0, jsx_runtime_1.jsx)("span", { style: { color: '#999', fontStyle: 'italic' }, children: "(none)" })) }), (0, jsx_runtime_1.jsx)("td", { style: { padding: '16px', fontSize: '12px', color: '#999' }, children: user.assigned || '—' }), (0, jsx_runtime_1.jsx)("td", { style: { padding: '16px', fontSize: '13px' }, children: editingUserId === user.id ? ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '8px' }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => handleSaveRole(user.id), style: {
+                                                                padding: '6px 12px',
+                                                                background: '#0066cc',
+                                                                color: 'white',
+                                                                border: 'none',
+                                                                borderRadius: '4px',
+                                                                cursor: 'pointer',
+                                                                fontSize: '12px',
+                                                            }, onMouseEnter: (e) => (e.currentTarget.style.background = '#0052a3'), onMouseLeave: (e) => (e.currentTarget.style.background = '#0066cc'), children: "Save" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setEditingUserId(null), style: {
+                                                                padding: '6px 12px',
+                                                                background: 'white',
+                                                                color: '#333',
+                                                                border: '1px solid #e0e0e0',
+                                                                borderRadius: '4px',
+                                                                cursor: 'pointer',
+                                                                fontSize: '12px',
+                                                            }, onMouseEnter: (e) => (e.currentTarget.style.background = '#f5f5f5'), onMouseLeave: (e) => (e.currentTarget.style.background = 'white'), children: "Cancel" })] })) : ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '8px' }, children: [user.role && ((0, jsx_runtime_1.jsx)("button", { onClick: () => handleEditRole(user.id, user.role), style: {
+                                                                padding: '6px 10px',
+                                                                background: 'white',
+                                                                color: '#0066cc',
+                                                                border: '1px solid #e0e0e0',
+                                                                borderRadius: '4px',
+                                                                cursor: 'pointer',
+                                                                fontSize: '12px',
+                                                            }, onMouseEnter: (e) => (e.currentTarget.style.background = '#f5f5f5'), onMouseLeave: (e) => (e.currentTarget.style.background = 'white'), children: "\u2193" })), !user.role ? ((0, jsx_runtime_1.jsx)("button", { onClick: () => handleEditRole(user.id, null), style: {
+                                                                padding: '6px 10px',
+                                                                background: 'white',
+                                                                color: '#0066cc',
+                                                                border: '1px solid #e0e0e0',
+                                                                borderRadius: '4px',
+                                                                cursor: 'pointer',
+                                                                fontSize: '12px',
+                                                            }, onMouseEnter: (e) => (e.currentTarget.style.background = '#f5f5f5'), onMouseLeave: (e) => (e.currentTarget.style.background = 'white'), children: "+" })) : ((0, jsx_runtime_1.jsx)("button", { onClick: () => handleRemoveRole(user.id), style: {
+                                                                padding: '6px 10px',
+                                                                background: 'white',
+                                                                color: '#cc0000',
+                                                                border: '1px solid #e0e0e0',
+                                                                borderRadius: '4px',
+                                                                cursor: 'pointer',
+                                                                fontSize: '12px',
+                                                            }, onMouseEnter: (e) => (e.currentTarget.style.background = '#fff0f0'), onMouseLeave: (e) => (e.currentTarget.style.background = 'white'), children: "\u2715" }))] })) })] }, user.id))) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginTop: '12px', fontSize: '12px', color: '#999' }, children: [filteredUsers.length, " of ", users.length, " users 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/routes/auth/session.d.ts

@@ -21,36 +21,7 @@ import { NextRequest, NextResponse } from 'next/server';
  * - Token expiry status
  * - Session validity
  */
-export declare function GET(req: NextRequest): Promise<NextResponse<{
-    authenticated: boolean;
-    message: string;
-}> | NextResponse<{
-    user: {
-        id: string | undefined;
-        email: string | null | undefined;
-        name: string | null | undefined;
-        image: any;
-        roles: string[];
-        twoFactorSessionVerified: boolean;
-        requiresTwoFactor: boolean;
-        authenticationMethods: string[] | undefined;
-        authenticationLevel: string | undefined;
-        mfaCompletedAt: number | undefined;
-        mfaExpiresAt: number | undefined;
-        mfaValidityHours: number | undefined;
-        oauthProvider: string | undefined;
-        idpClientId: string | undefined;
-        merchantId: string | undefined;
-    };
-    sessionToken: any;
-    accessToken: string | undefined;
-    refreshToken: string | undefined;
-    accessTokenExpires: number | undefined;
-    expires: string;
-}> | NextResponse<{
-    error: string;
-    details: string;
-}>>;
+export declare function GET(req: NextRequest): Promise<NextResponse<{}>>;
 /**
  * POST /api/auth/session - Update session data
  *

package/dist/routes/auth/session.js

@@ -52,10 +52,9 @@ async function GET(req) {
         const token = await (0, jwt_1.getToken)({ req, secret, cookieName });
         if (!token) {
             console.warn('[SESSION_ROUTE] getToken returned null');
-            return server_1.NextResponse.json({
-                authenticated: false,
-                message: 'No session found'
-            }, { status: 200 });
+            // MUST return empty {} — NextAuth's useSession() treats any non-empty
+            // response object as "authenticated", causing redirect loops on login page.
+            return server_1.NextResponse.json({});
         }
         // Support both field names: sessionToken (auth.ts JWT) and redisSessionId (legacy)
         const redisSessionId = token.sessionToken || token.redisSessionId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payez/next-mvp",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "sideEffects": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -687,6 +687,11 @@
       "require": "./dist/components/account/UserAvatarMenu.js",
       "default": "./dist/components/account/UserAvatarMenu.js"
     },
+    "./components/account/MobileNavDrawer": {
+      "types": "./dist/components/account/MobileNavDrawer.d.ts",
+      "require": "./dist/components/account/MobileNavDrawer.js",
+      "default": "./dist/components/account/MobileNavDrawer.js"
+    },
     "./pages/security": {
       "import": "./dist/pages/security/index.js",
       "require": "./dist/pages/security/index.js",

package/src/auth/utils/idp-client.ts

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