@payez/next-mvp 3.0.0

package/dist/pages/admin-login/page.js

@@ -0,0 +1,83 @@
+"use strict";
+/**
+ * Admin Login Page for @payez/next-mvp
+ *
+ * A standalone username/password login page for admin access.
+ * NOT linked from any navigation - only accessible via direct URL.
+ *
+ * USAGE:
+ * 1. Create app/account-auth/admin-login/page.tsx in your Next.js app
+ * 2. Re-export this component:
+ *    export { default } from '@payez/next-mvp/pages/admin-login';
+ *
+ * CUSTOMIZATION:
+ * - Override styles via CSS variables or wrap with your own component
+ * - Provide custom branding via ThemeProvider
+ */
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = AdminLoginPage;
+exports.AdminLoginForm = AdminLoginForm;
+exports.AdminLoginFallback = AdminLoginFallback;
+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 react_3 = require("react");
+const useTheme_1 = require("../../theme/useTheme");
+function AdminLoginForm({ title = 'Admin Login', subtitle = 'Authorized personnel only', callbackUrl: propCallbackUrl, logo, }) {
+    const searchParams = (0, navigation_1.useSearchParams)();
+    const callbackUrl = propCallbackUrl || searchParams?.get('callbackUrl') || '/dashboard';
+    const branding = (0, useTheme_1.useBranding)();
+    const colors = (0, useTheme_1.useColors)();
+    const [email, setEmail] = (0, react_1.useState)('');
+    const [password, setPassword] = (0, react_1.useState)('');
+    const [showPassword, setShowPassword] = (0, react_1.useState)(false);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setIsLoading(true);
+        setError(null);
+        try {
+            const result = await (0, react_2.signIn)('credentials', {
+                email,
+                password,
+                redirect: false,
+                callbackUrl,
+            });
+            if (result?.error) {
+                // Parse structured error if available
+                try {
+                    const errorData = JSON.parse(result.error);
+                    setError(errorData.message || errorData.error?.message || 'Invalid credentials');
+                }
+                catch {
+                    if (result.error === 'CredentialsSignin') {
+                        setError('Invalid email or password');
+                    }
+                    else {
+                        setError(result.error);
+                    }
+                }
+            }
+            else if (result?.ok) {
+                // Redirect to verify-code for 2FA or directly to callback
+                window.location.href = `/account-auth/verify-code?callbackUrl=${encodeURIComponent(callbackUrl)}`;
+            }
+        }
+        catch (err) {
+            setError('An unexpected error occurred');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-700 via-slate-800 to-slate-900 p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-white rounded-2xl shadow-2xl p-8 max-w-md w-full", children: [logo && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center mb-6", children: logo })), (0, jsx_runtime_1.jsx)("h1", { className: "text-2xl font-bold text-center mb-2 text-slate-900", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "text-center mb-8 text-slate-600", children: subtitle }), error && ((0, jsx_runtime_1.jsx)("div", { className: "mb-6 px-4 py-3 rounded-lg bg-red-500 text-white text-center text-sm", children: error })), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "admin-email", className: "block text-sm font-medium mb-2 text-slate-700", children: "Email" }), (0, jsx_runtime_1.jsx)("input", { id: "admin-email", type: "email", value: email, onChange: (e) => setEmail(e.target.value), required: true, disabled: isLoading, autoComplete: "email", className: "w-full px-4 py-3 rounded-lg border border-slate-300 bg-white text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed", placeholder: "admin@example.com" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "admin-password", className: "block text-sm font-medium mb-2 text-slate-700", children: "Password" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { id: "admin-password", type: showPassword ? 'text' : 'password', value: password, onChange: (e) => setPassword(e.target.value), required: true, disabled: isLoading, autoComplete: "current-password", className: "w-full px-4 py-3 pr-12 rounded-lg border border-slate-300 bg-white text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed", placeholder: "Enter your password" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setShowPassword(!showPassword), className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-slate-500 hover:text-slate-700", "aria-label": showPassword ? 'Hide password' : 'Show password', children: showPassword ? ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", className: "w-5 h-5", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L6.464 6.464m7.535 7.535l3.415 3.414M3 3l3.464 3.464M21 21l-3.415-3.414" }) })) : ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", className: "w-5 h-5", children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })] })) })] })] }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: isLoading, className: "w-full py-3 px-4 rounded-lg font-semibold text-white transition-colors bg-slate-700 hover:bg-slate-800 disabled:bg-slate-400 disabled:cursor-not-allowed", children: isLoading ? ((0, jsx_runtime_1.jsxs)("span", { className: "flex items-center justify-center", children: [(0, jsx_runtime_1.jsxs)("svg", { className: "animate-spin -ml-1 mr-3 h-5 w-5 text-white", fill: "none", viewBox: "0 0 24 24", 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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), "Signing in..."] })) : ('Sign In') })] }), (0, jsx_runtime_1.jsxs)("p", { className: "mt-6 text-center text-xs text-slate-500", children: ["This login is for authorized administrators only.", (0, jsx_runtime_1.jsx)("br", {}), "All access attempts are logged."] })] }) }));
+}
+function AdminLoginFallback() {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-700 via-slate-800 to-slate-900", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsxs)("svg", { className: "animate-spin h-10 w-10 mx-auto text-white", fill: "none", viewBox: "0 0 24 24", 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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), (0, jsx_runtime_1.jsx)("p", { className: "mt-4 text-slate-400", children: "Loading..." })] }) }));
+}
+function AdminLoginPage(props) {
+    return ((0, jsx_runtime_1.jsx)(react_3.Suspense, { fallback: (0, jsx_runtime_1.jsx)(AdminLoginFallback, {}), children: (0, jsx_runtime_1.jsx)(AdminLoginForm, { ...props }) }));
+}

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

@@ -0,0 +1,15 @@
+/**
+ * Roles Admin Page for @payez/next-mvp
+ *
+ * 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.
+ *
+ * @see docs/specs/ROLES_MANAGEMENT_SPEC.md
+ */
+interface RolesAdminPageProps {
+    rolesEndpoint?: string;
+    matrixEndpoint?: string;
+}
+export default function RolesAdminPage({ rolesEndpoint, matrixEndpoint, }: RolesAdminPageProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,78 @@
+"use strict";
+/**
+ * Roles Admin Page for @payez/next-mvp
+ *
+ * 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.
+ *
+ * @see docs/specs/ROLES_MANAGEMENT_SPEC.md
+ */
+'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);
+    };
+    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." })] })] }) })] }) }));
+}

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

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

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

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

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

@@ -0,0 +1,79 @@
+/**
+ * =============================================================================
+ * 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;