@payez/next-mvp 4.0.0 → 4.0.1

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

@@ -1,261 +0,0 @@
-"use strict";
-/**
- * Role Management Admin Page (/admin/roles)
- *
- * 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
- *
- * 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");
-// 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);
-    };
-    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/pages/admin-roles/index.d.ts

@@ -1,8 +0,0 @@
-/**
- * Admin Roles Page exports
- *
- * - RolesAdminPage: Read-only admin interface for viewing roles and permissions (/admin/roles)
- *
- * MVP scope: Role creation/editing deferred to post-MVP.
- */
-export { default as RolesAdminPage } from './RolesAdminPage';

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

@@ -1,15 +0,0 @@
-"use strict";
-/**
- * Admin Roles Page exports
- *
- * - RolesAdminPage: Read-only admin interface for viewing roles and permissions (/admin/roles)
- *
- * MVP scope: Role creation/editing deferred to post-MVP.
- */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RolesAdminPage = void 0;
-var RolesAdminPage_1 = require("./RolesAdminPage");
-Object.defineProperty(exports, "RolesAdminPage", { enumerable: true, get: function () { return __importDefault(RolesAdminPage_1).default; } });

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

@@ -1,72 +0,0 @@
-/**
- * Admin Role Modals for @payez/next-mvp
- *
- * - RoleEditorModal: Create/edit roles with permissions
- * - UserRoleAssignerModal: Assign roles to users
- *
- * Security Addendum implemented:
- * - Role name validation (3-50 chars, lowercase alphanumeric + underscore, no payez_ prefix)
- * - Last admin warning
- * - IDP roles read-only
- * - Self-assignment warning
- *
- * @see docs/specs/ROLES_MANAGEMENT_SPEC.md
- */
-interface PagePermission {
-    page_permission_id: number;
-    route_pattern: string;
-    display_name: string;
-    requires_2fa: boolean;
-}
-interface Role {
-    role_id?: number;
-    role_name: string;
-    display_name?: string;
-    description?: string;
-    page_permissions?: string[];
-    requires_2fa?: boolean;
-    is_system_role?: boolean;
-}
-interface User {
-    user_id: number;
-    email: string;
-    full_name?: string;
-    roles: {
-        idp: string[];
-        app: string[];
-    };
-}
-/**
- * RoleEditorModal - Create or edit a role
- */
-export declare function RoleEditorModal({ role, pagePermissions, adminAccessiblePages, onSave, onClose, isDark, }: {
-    role?: Role;
-    pagePermissions: PagePermission[];
-    adminAccessiblePages?: string[];
-    onSave: (data: {
-        role_name: string;
-        display_name?: string;
-        description?: string;
-        page_permissions: string[];
-        requires_2fa: boolean;
-    }) => Promise<void>;
-    onClose: () => void;
-    isDark?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-/**
- * UserRoleAssignerModal - Assign roles to a user
- */
-export declare function UserRoleAssignerModal({ user, availableRoles, isLastAdmin, currentUserId, onSave, onClose, isDark, }: {
-    user: User;
-    availableRoles: {
-        role_name: string;
-        display_name?: string;
-        description?: string;
-    }[];
-    isLastAdmin?: boolean;
-    currentUserId?: number;
-    onSave: (userId: number, appRoles: string[]) => Promise<void>;
-    onClose: () => void;
-    isDark?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,154 +0,0 @@
-"use strict";
-/**
- * Admin Role Modals for @payez/next-mvp
- *
- * - RoleEditorModal: Create/edit roles with permissions
- * - UserRoleAssignerModal: Assign roles to users
- *
- * Security Addendum implemented:
- * - Role name validation (3-50 chars, lowercase alphanumeric + underscore, no payez_ prefix)
- * - Last admin warning
- * - IDP roles read-only
- * - Self-assignment warning
- *
- * @see docs/specs/ROLES_MANAGEMENT_SPEC.md
- */
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RoleEditorModal = RoleEditorModal;
-exports.UserRoleAssignerModal = UserRoleAssignerModal;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-// ============================================================================
-// VALIDATION
-// ============================================================================
-// Role name validation (Security Addendum)
-function validateRoleName(name) {
-    if (!name)
-        return { valid: false, error: 'Role name is required' };
-    if (name.length < 3)
-        return { valid: false, error: 'Role name must be at least 3 characters' };
-    if (name.length > 50)
-        return { valid: false, error: 'Role name must be at most 50 characters' };
-    if (!/^[a-z0-9_]+$/.test(name))
-        return { valid: false, error: 'Only lowercase letters, numbers, and underscores allowed' };
-    if (name.startsWith('payez_'))
-        return { valid: false, error: 'Role name cannot start with "payez_"' };
-    return { valid: true };
-}
-// ============================================================================
-// ROLE EDITOR MODAL
-// ============================================================================
-/**
- * RoleEditorModal - Create or edit a role
- */
-function RoleEditorModal({ role, pagePermissions, adminAccessiblePages, onSave, onClose, isDark = true, }) {
-    const isEditing = !!role?.role_id;
-    // Form state
-    const [roleName, setRoleName] = (0, react_1.useState)(role?.role_name || '');
-    const [displayName, setDisplayName] = (0, react_1.useState)(role?.display_name || '');
-    const [description, setDescription] = (0, react_1.useState)(role?.description || '');
-    const [selectedPermissions, setSelectedPermissions] = (0, react_1.useState)(role?.page_permissions || []);
-    const [requires2FA, setRequires2FA] = (0, react_1.useState)(role?.requires_2fa || false);
-    const [error, setError] = (0, react_1.useState)('');
-    const [saving, setSaving] = (0, react_1.useState)(false);
-    // Role name validation
-    const [nameValidation, setNameValidation] = (0, react_1.useState)({ valid: true });
-    (0, react_1.useEffect)(() => {
-        if (!isEditing && roleName) {
-            setNameValidation(validateRoleName(roleName));
-        }
-    }, [roleName, isEditing]);
-    // Filter permissions based on admin access (Security Addendum)
-    const availablePermissions = adminAccessiblePages
-        ? pagePermissions.filter((p) => adminAccessiblePages.some((ap) => p.route_pattern.startsWith(ap.replace('*', ''))))
-        : pagePermissions;
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        setError('');
-        if (!isEditing) {
-            const validation = validateRoleName(roleName);
-            if (!validation.valid) {
-                setError(validation.error || 'Invalid role name');
-                return;
-            }
-        }
-        try {
-            setSaving(true);
-            await onSave({
-                role_name: roleName,
-                display_name: displayName || undefined,
-                description: description || undefined,
-                page_permissions: selectedPermissions,
-                requires_2fa: requires2FA,
-            });
-            onClose();
-        }
-        catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to save role');
-        }
-        finally {
-            setSaving(false);
-        }
-    };
-    const togglePermission = (pattern) => {
-        setSelectedPermissions((prev) => prev.includes(pattern) ? prev.filter((p) => p !== pattern) : [...prev, pattern]);
-    };
-    // Theme colors
-    const modalBg = 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 inputBg = isDark ? 'bg-slate-700' : 'bg-white';
-    const inputBorder = isDark ? 'border-slate-600' : 'border-gray-300';
-    return ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: (0, jsx_runtime_1.jsxs)("div", { className: `w-full max-w-lg mx-4 rounded-lg shadow-xl ${modalBg} border ${borderColor} max-h-[90vh] overflow-hidden flex flex-col`, children: [(0, jsx_runtime_1.jsxs)("div", { className: `px-6 py-4 border-b ${borderColor} flex items-center justify-between`, children: [(0, jsx_runtime_1.jsx)("h3", { className: `text-lg font-semibold ${textPrimary}`, children: isEditing ? `Edit Role: ${role?.role_name}` : 'Create New Role' }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: textMuted, children: (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: "M6 18L18 6M6 6l12 12" }) }) })] }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: "flex-1 overflow-y-auto", children: [(0, jsx_runtime_1.jsxs)("div", { className: "px-6 py-4 space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("label", { className: `block text-sm font-medium mb-1 ${textMuted}`, children: ["Role Name ", (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: roleName, onChange: (e) => setRoleName(e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, '')), disabled: isEditing, className: `w-full px-3 py-2 rounded-md border ${inputBorder} ${inputBg} ${textPrimary} ${isEditing ? 'opacity-50 cursor-not-allowed' : ''} font-mono`, placeholder: "e.g., content_editor" }), !isEditing && roleName && !nameValidation.valid && ((0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm text-red-500", children: nameValidation.error })), !isEditing && ((0, jsx_runtime_1.jsx)("p", { className: `mt-1 text-xs ${textMuted}`, children: "3-50 characters, lowercase letters, numbers, underscores only" }))] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: `block text-sm font-medium mb-1 ${textMuted}`, children: "Display Name" }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: displayName, onChange: (e) => setDisplayName(e.target.value), className: `w-full px-3 py-2 rounded-md border ${inputBorder} ${inputBg} ${textPrimary}`, placeholder: "e.g., Content Editor" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: `block text-sm font-medium mb-1 ${textMuted}`, children: "Description" }), (0, jsx_runtime_1.jsx)("textarea", { value: description, onChange: (e) => setDescription(e.target.value), rows: 2, className: `w-full px-3 py-2 rounded-md border ${inputBorder} ${inputBg} ${textPrimary}`, placeholder: "What does this role do?" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: `block text-sm font-medium mb-2 ${textMuted}`, children: "Page Permissions" }), (0, jsx_runtime_1.jsx)("div", { className: `border ${borderColor} rounded-md max-h-48 overflow-y-auto`, children: availablePermissions.length === 0 ? ((0, jsx_runtime_1.jsx)("p", { className: `p-3 text-sm ${textMuted}`, children: "No page permissions available" })) : (availablePermissions.map((perm) => ((0, jsx_runtime_1.jsxs)("label", { className: `flex items-center px-3 py-2 border-b last:border-b-0 ${borderColor} cursor-pointer hover:${isDark ? 'bg-slate-700' : 'bg-gray-50'}`, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: selectedPermissions.includes(perm.route_pattern), onChange: () => togglePermission(perm.route_pattern), className: "mr-3" }), (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.jsx)("span", { className: `block text-xs ${textMuted}`, children: perm.display_name }))] })] }, perm.page_permission_id)))) })] }), (0, jsx_runtime_1.jsxs)("div", { className: `border-t ${borderColor} pt-4`, children: [(0, jsx_runtime_1.jsx)("label", { className: `block text-sm font-medium mb-2 ${textMuted}`, children: "Security Options" }), (0, jsx_runtime_1.jsxs)("label", { className: "flex items-center cursor-pointer", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: requires2FA, onChange: (e) => setRequires2FA(e.target.checked), className: "mr-3" }), (0, jsx_runtime_1.jsx)("span", { className: textPrimary, children: "Requires 2FA for all pages" })] })] }), error && ((0, jsx_runtime_1.jsx)("div", { className: "bg-red-900/30 border border-red-600 rounded-lg p-3", children: (0, jsx_runtime_1.jsx)("p", { className: "text-red-400 text-sm", children: error }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: `px-6 py-4 border-t ${borderColor} flex justify-end gap-3`, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClose, className: `px-4 py-2 rounded-md border ${borderColor} ${textMuted}`, children: "Cancel" }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: saving || (!isEditing && !nameValidation.valid), className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50", children: saving ? 'Saving...' : isEditing ? 'Save Changes' : 'Create Role' })] })] })] }) }));
-}
-// ============================================================================
-// USER ROLE ASSIGNER MODAL
-// ============================================================================
-/**
- * UserRoleAssignerModal - Assign roles to a user
- */
-function UserRoleAssignerModal({ user, availableRoles, isLastAdmin, currentUserId, onSave, onClose, isDark = true, }) {
-    const [selectedRoles, setSelectedRoles] = (0, react_1.useState)(user.roles.app);
-    const [saving, setSaving] = (0, react_1.useState)(false);
-    const [error, setError] = (0, react_1.useState)('');
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        setError('');
-        // Security: Self-assignment warning
-        if (user.user_id === currentUserId) {
-            if (!confirm('You are modifying your own roles. Changes take effect on next login. Continue?')) {
-                return;
-            }
-        }
-        // Security Addendum: Last admin warning
-        const hadAdmin = user.roles.app.some((r) => r.includes('admin'));
-        const hasAdmin = selectedRoles.some((r) => r.includes('admin'));
-        if (hadAdmin && !hasAdmin && isLastAdmin) {
-            if (!confirm('Warning: This is the last administrator. Removing admin access will lock out admin access. Continue?')) {
-                return;
-            }
-        }
-        try {
-            setSaving(true);
-            await onSave(user.user_id, selectedRoles);
-            onClose();
-        }
-        catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to update roles');
-        }
-        finally {
-            setSaving(false);
-        }
-    };
-    const toggleRole = (roleName) => {
-        setSelectedRoles((prev) => prev.includes(roleName) ? prev.filter((r) => r !== roleName) : [...prev, roleName]);
-    };
-    // Theme colors
-    const modalBg = 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';
-    return ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: (0, jsx_runtime_1.jsxs)("div", { className: `w-full max-w-md mx-4 rounded-lg shadow-xl ${modalBg} border ${borderColor}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: `px-6 py-4 border-b ${borderColor} flex items-center justify-between`, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { className: `text-lg font-semibold ${textPrimary}`, children: "Edit Roles" }), (0, jsx_runtime_1.jsx)("p", { className: `text-sm ${textMuted}`, children: user.full_name || user.email })] }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, className: textMuted, children: (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: "M6 18L18 6M6 6l12 12" }) }) })] }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, children: [(0, jsx_runtime_1.jsxs)("div", { className: "px-6 py-4 space-y-4", children: [user.roles.idp.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("label", { className: `block text-sm font-medium mb-2 ${textMuted}`, children: ["IDP Roles (read-only)", (0, jsx_runtime_1.jsx)("svg", { className: "inline w-4 h-4 ml-1", 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)("div", { className: "space-y-1", children: user.roles.idp.map((role) => ((0, jsx_runtime_1.jsxs)("div", { className: `flex items-center px-3 py-2 rounded ${isDark ? 'bg-slate-700/50' : 'bg-gray-100'}`, children: [(0, jsx_runtime_1.jsx)("span", { className: textMuted, children: role }), (0, jsx_runtime_1.jsx)("span", { className: `ml-auto text-xs ${textMuted}`, children: "assigned by IDP" })] }, role))) })] })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: `block text-sm font-medium mb-2 ${textMuted}`, children: "Application Roles" }), (0, jsx_runtime_1.jsx)("div", { className: `border ${borderColor} rounded-md`, children: availableRoles.map((role) => ((0, jsx_runtime_1.jsxs)("label", { className: `flex items-start px-3 py-2 border-b last:border-b-0 ${borderColor} cursor-pointer hover:${isDark ? 'bg-slate-700' : 'bg-gray-50'}`, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: selectedRoles.includes(role.role_name), onChange: () => toggleRole(role.role_name), className: "mt-1 mr-3" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: textPrimary, children: role.display_name || role.role_name }), role.description && ((0, jsx_runtime_1.jsx)("span", { className: `block text-xs ${textMuted}`, children: role.description }))] })] }, role.role_name))) })] }), error && ((0, jsx_runtime_1.jsx)("div", { className: "bg-red-900/30 border border-red-600 rounded-lg p-3", children: (0, jsx_runtime_1.jsx)("p", { className: "text-red-400 text-sm", children: error }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: `px-6 py-4 border-t ${borderColor} flex justify-end gap-3`, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClose, className: `px-4 py-2 rounded-md border ${borderColor} ${textMuted}`, children: "Cancel" }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: saving, className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50", children: saving ? 'Saving...' : 'Save Changes' })] })] })] }) }));
-}

package/dist/pages/client-admin/ClientSiteAdminPage.d.ts

@@ -1,79 +0,0 @@
-/**
- * =============================================================================
- * CLIENT SITE ADMIN - Your App's Admin Dashboard
- * =============================================================================
- *
- * This is the foundation for YOUR app-specific admin area.
- * The MVP admin (/admin) handles membership - this handles YOUR data.
- *
- * SEPARATION OF CONCERNS:
- * ┌─────────────────────────────────────────────────────────────────────┐
- * │  /admin (MVP Admin)              │  /admin/[your-area] (This)      │
- * │  ─────────────────               │  ────────────────────────       │
- * │  • User authentication           │  • Your app's collections       │
- * │  • Sessions management           │  • Your app's features          │
- * │  • Role assignments              │  • Content moderation           │
- * │  • Tier/subscription mgmt        │  • App-specific analytics       │
- * │  • Site-wide analytics           │  • Custom admin tools           │
- * │  • vibe_app collection           │  • your_app collection          │
- * └─────────────────────────────────────────────────────────────────────┘
- *
- * USAGE:
- * ```tsx
- * // app/admin/your-area/page.tsx
- * import { ClientSiteAdminPage } from '@payez/next-mvp/pages/client-admin';
- *
- * export default function YourAdminPage() {
- *   return (
- *     <ClientSiteAdminPage
- *       title="Your Admin"
- *       subtitle="Manage your app data"
- *       collectionName="your_collection"
- *       tabs={[
- *         { id: 'overview', label: 'Overview', icon: '📊' },
- *         { id: 'items', label: 'Items', icon: '📦', table: 'items' },
- *       ]}
- *       renderTabContent={(tab, data) => <YourCustomContent />}
- *     />
- *   );
- * }
- * ```
- *
- * =============================================================================
- */
-import React from 'react';
-export interface ClientAdminTab {
-    id: string;
-    label: string;
-    icon: string;
-    table?: string;
-}
-export interface TableStats {
-    table: string;
-    count: number;
-    label: string;
-}
-export interface ClientSiteAdminProps {
-    /** Admin area title */
-    title: string;
-    /** Subtitle shown under title */
-    subtitle?: string;
-    /** Vibe collection name for this admin area */
-    collectionName: string;
-    /** Tabs to display */
-    tabs: ClientAdminTab[];
-    /** Roles that can access (defaults to vibe_app_admin) */
-    allowedRoles?: string[];
-    /** Custom overview content renderer */
-    renderOverview?: (stats: TableStats[]) => React.ReactNode;
-    /** Custom tab content renderer */
-    renderTabContent?: (tab: ClientAdminTab, data: any[], loading: boolean) => React.ReactNode;
-    /** Theme detection function (optional) */
-    isDark?: boolean;
-    /** Back link URL (defaults to /) */
-    backUrl?: string;
-    /** Back link label (defaults to "Back to Site") */
-    backLabel?: string;
-}
-export declare function ClientSiteAdminPage({ title, subtitle, collectionName, tabs, allowedRoles, renderOverview, renderTabContent, isDark: isDarkProp, backUrl, backLabel, }: ClientSiteAdminProps): import("react/jsx-runtime").JSX.Element | null;
-export default ClientSiteAdminPage;