@rebasepro/auth 0.1.2 → 0.2.1

package/src/components/AdminViews.tsx

@@ -1,825 +0,0 @@
-
-import React, { useCallback, useMemo, useState } from "react";
-import {
-    useSnackbarController,
-    ConfirmationDialog,
-    useAuthController
-} from "@rebasepro/core";
-import { AppView, EntityCollection, Role, SecurityRule, User } from "@rebasepro/types";
-
-import { Button, Chip, Container, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Paper, Table, TableBody, TableCell, TableHeader, TableRow, TextField, Typography, CircularProgress, CenteredView, Tooltip, Checkbox, MultiSelect, MultiSelectItem, LoadingButton, getColorSchemeForSeed, ChipColorScheme, ChipColorKey } from "@rebasepro/ui";
-import { PlusIcon, Trash2Icon } from "lucide-react";
-import { UserManagement } from "../hooks/useBackendUserManagement";
-
-interface AdminViewsProps {
-    userManagement: UserManagement;
-    apiUrl: string;
-    getAuthToken: () => Promise<string>;
-    collections?: EntityCollection[];
-}
-
-/**
- * Create admin views for user and role management
- */
-export function createUserManagementAdminViews({ userManagement, apiUrl, getAuthToken, collections = [] }: AdminViewsProps): AppView[] {
-    return [
-        {
-            slug: "dev/users",
-            name: "CMS Users",
-            icon: "face",
-            view: <UsersView userManagement={userManagement} apiUrl={apiUrl} getAuthToken={getAuthToken}/>
-        },
-        {
-            slug: "dev/roles",
-            name: "Roles",
-            icon: "gpp_good",
-            view: <RolesView userManagement={userManagement} collections={collections}/>
-        }
-    ];
-}
-
-// ============================================
-// RoleChip Component (matches original)
-// ============================================
-function RoleChip({ role }: { role: Role }) {
-    let colorScheme: ChipColorScheme | ChipColorKey;
-    if (role.isAdmin) {
-        colorScheme = "blue";
-    } else if (role.id === "editor") {
-        colorScheme = "yellow";
-    } else if (role.id === "viewer") {
-        colorScheme = "gray";
-    } else {
-        colorScheme = getColorSchemeForSeed(role.id);
-    }
-
-    return (
-        <Chip colorScheme={colorScheme} key={role.id}>
-            {role.name}
-        </Chip>
-    );
-}
-
-// ============================================
-// UsersView Component
-// ============================================
-export function UsersView({ userManagement, apiUrl, getAuthToken }: {
-    userManagement: UserManagement;
-    apiUrl: string;
-    getAuthToken: () => Promise<string>;
-}) {
-    const { users, roles, saveUser, deleteUser, loading } = userManagement;
-    const usersError = 'usersError' in userManagement ? (userManagement as { usersError?: Error }).usersError : undefined;
-    const snackbarController = useSnackbarController();
-    const { user: loggedInUser } = useAuthController();
-
-    const [dialogOpen, setDialogOpen] = useState(false);
-    const [selectedUser, setSelectedUser] = useState<User | undefined>();
-    const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
-    const [userToDelete, setUserToDelete] = useState<User | undefined>();
-    const [deleteInProgress, setDeleteInProgress] = useState(false);
-    const [formKey, setFormKey] = useState(0);
-    const [bootstrapping, setBootstrapping] = useState(false);
-
-    // Check if any admin exists
-    const hasAdmin = users.some(u => u.roles?.includes("admin"));
-
-    const handleBootstrap = async () => {
-        setBootstrapping(true);
-        try {
-            const token = await getAuthToken();
-            const response = await fetch(`${apiUrl}/api/admin/bootstrap`, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                    "Authorization": `Bearer ${token}`
-                }
-            });
-            const data = await response.json();
-            if (!response.ok) {
-                throw new Error(data.error?.message || "Bootstrap failed");
-            }
-            snackbarController.open({ type: "success",
-message: "You are now an admin! Refreshing..." });
-            // Reload to get new roles
-            window.location.reload();
-        } catch (error: unknown) {
-            snackbarController.open({ type: "error",
-message: error instanceof Error ? error.message : "Failed to bootstrap admin" });
-        } finally {
-            setBootstrapping(false);
-        }
-    };
-
-    const handleAddUser = () => {
-        setSelectedUser(undefined);
-        setFormKey(k => k + 1);
-        setDialogOpen(true);
-    };
-
-    const handleEditUser = (user: User) => {
-        setSelectedUser(user);
-        setDialogOpen(true);
-    };
-
-    const handleClose = () => {
-        setDialogOpen(false);
-        setSelectedUser(undefined);
-    };
-
-    const handleDelete = async () => {
-        if (!userToDelete) return;
-        setDeleteInProgress(true);
-        try {
-            await deleteUser(userToDelete);
-            snackbarController.open({ type: "success",
-message: "User deleted successfully" });
-            setDeleteConfirmOpen(false);
-            setUserToDelete(undefined);
-        } catch (error: unknown) {
-            snackbarController.open({ type: "error",
-message: error instanceof Error ? error.message : "Error deleting user" });
-        } finally {
-            setDeleteInProgress(false);
-        }
-    };
-
-    if (loading) {
-        return <CenteredView><CircularProgress/></CenteredView>;
-    }
-
-    return (
-        <Container className="w-full flex flex-col py-4 gap-4" maxWidth={"6xl"}>
-            {/* Bootstrap warning when no admins */}
-            {!hasAdmin && loggedInUser && (
-                <div className="bg-yellow-100 dark:bg-yellow-900 border border-yellow-400 dark:border-yellow-700 rounded p-4 flex items-center justify-between">
-                    <div>
-                        <Typography variant="label" className="text-yellow-800 dark:text-yellow-200">
-                            No admin users exist. You can make yourself an admin.
-                        </Typography>
-                    </div>
-                    <Button
-                        onClick={handleBootstrap}
-                        disabled={bootstrapping}
-                    >
-                        {bootstrapping ? <CircularProgress size="small"/> : "Make me admin"}
-                    </Button>
-                </div>
-            )}
-
-            <div className="flex items-center mt-12">
-                <Typography gutterBottom variant="h4" className="grow" component="h4">
-                    Users
-                </Typography>
-                <Button startIcon={<PlusIcon/>} onClick={handleAddUser}>
-                    Add user
-                </Button>
-            </div>
-
-            <div className="overflow-auto">
-                <Table className="w-full">
-                    <TableHeader>
-                        <TableCell header className="truncate w-16"></TableCell>
-                        <TableCell header>Email</TableCell>
-                        <TableCell header>Name</TableCell>
-                        <TableCell header>Roles</TableCell>
-                    </TableHeader>
-                    <TableBody>
-                        {users.map(user => (
-                            <TableRow key={user.uid} onClick={() => handleEditUser(user)}>
-                                <TableCell style={{ width: "64px" }}>
-                                    <Tooltip asChild title="Delete this user">
-                                        <IconButton
-                                            size="small"
-                                            onClick={(e) => {
-                                                e.stopPropagation();
-                                                setUserToDelete(user);
-                                                setDeleteConfirmOpen(true);
-                                            }}>
-                                            <Trash2Icon/>
-                                        </IconButton>
-                                    </Tooltip>
-                                </TableCell>
-                                <TableCell>{user.email}</TableCell>
-                                <TableCell className="font-medium">{user.displayName}</TableCell>
-                                <TableCell>
-                                    <div className="flex flex-wrap gap-2">
-                                        {user.roles?.map((roleId: string) => {
-                                            const role = roles.find(r => r.id === roleId);
-                                            return role ? <RoleChip key={roleId} role={role}/> : <span key={roleId}>{roleId}</span>;
-                                        })}
-                                    </div>
-                                </TableCell>
-                            </TableRow>
-                        ))}
-
-                        {users.length === 0 && (
-                            <TableRow>
-                                <TableCell colspan={4}>
-                                    <CenteredView className="flex flex-col gap-4 my-8 items-center">
-                                        <Typography variant="label">
-                                            {usersError
-                                                ? "You don't have permission to view users"
-                                                : "There are no users yet"}
-                                        </Typography>
-                                        {usersError && (
-                                            <Typography variant="caption" className="text-surface-500">
-                                                Contact an administrator if you need access to this section.
-                                            </Typography>
-                                        )}
-                                    </CenteredView>
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </div>
-
-            {/* User Edit Dialog */}
-            <UserDetailsForm
-                key={selectedUser?.uid ?? `new-${formKey}`}
-                open={dialogOpen}
-                user={selectedUser}
-                roles={roles}
-                saveUser={saveUser}
-                handleClose={handleClose}
-            />
-
-            {/* Delete Confirmation */}
-            <ConfirmationDialog
-                open={deleteConfirmOpen}
-                loading={deleteInProgress}
-                onAccept={handleDelete}
-                onCancel={() => { setDeleteConfirmOpen(false); setUserToDelete(undefined); }}
-                title={<>Delete?</>}
-                body={<>Are you sure you want to delete this user?</>}
-            />
-        </Container>
-    );
-}
-
-// ============================================
-// UserDetailsForm Component (matches original)
-// ============================================
-function UserDetailsForm({
-    open,
-    user: userProp,
-    roles,
-    saveUser,
-    handleClose
-}: {
-    open: boolean;
-    user?: User;
-    roles: Role[];
-    saveUser: (user: User) => Promise<User>;
-    handleClose: () => void;
-}) {
-    const snackbarController = useSnackbarController();
-    const isNewUser = !userProp;
-
-    const [displayName, setDisplayName] = useState(userProp?.displayName || "");
-    const [email, setEmail] = useState(userProp?.email || "");
-    const [selectedRoleIds, setSelectedRoleIds] = useState<string[]>(
-        userProp?.roles || ["editor"]
-    );
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    const [errors, setErrors] = useState<{ displayName?: string; email?: string; roles?: string }>({});
-    const [submitCount, setSubmitCount] = useState(0);
-
-    const validate = () => {
-        const newErrors: typeof errors = {};
-        if (!displayName) newErrors.displayName = "Required";
-        if (!email) newErrors.email = "Required";
-        else if (!/\S+@\S+\.\S+/.test(email)) newErrors.email = "Invalid email";
-        if (selectedRoleIds.length === 0) newErrors.roles = "At least one role is required";
-        setErrors(newErrors);
-        return Object.keys(newErrors).length === 0;
-    };
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setSubmitCount(c => c + 1);
-
-        if (!validate()) return;
-
-        setIsSubmitting(true);
-        try {
-            const userToSave: User = {
-                uid: userProp?.uid || crypto.randomUUID(),
-                email,
-                displayName: displayName || null,
-                photoURL: userProp?.photoURL || null,
-                providerId: "custom",
-                isAnonymous: false,
-                roles: selectedRoleIds
-            };
-            await saveUser(userToSave);
-            handleClose();
-        } catch (error: unknown) {
-            snackbarController.open({ type: "error",
-message: error instanceof Error ? error.message : "Failed to save user" });
-        } finally {
-            setIsSubmitting(false);
-        }
-    };
-
-    const dirty = isNewUser ||
-        displayName !== (userProp?.displayName || "") ||
-        email !== (userProp?.email || "") ||
-        JSON.stringify(selectedRoleIds.sort()) !== JSON.stringify((userProp?.roles || []).sort());
-
-    return (
-        <Dialog open={open} onOpenChange={(open) => !open ? handleClose() : undefined} maxWidth="4xl">
-            <form onSubmit={handleSubmit} autoComplete="off" noValidate
-                style={{ display: "flex",
-flexDirection: "column",
-position: "relative",
-height: "100%" }}>
-
-                <DialogTitle variant="h4" gutterBottom={false}>
-                    User
-                </DialogTitle>
-
-                <DialogContent className="h-full grow">
-                    <div className="grid grid-cols-12 gap-4">
-                        <div className="col-span-12">
-                            <TextField
-                                name="displayName"
-                                required
-                                error={submitCount > 0 && Boolean(errors.displayName)}
-                                value={displayName}
-                                onChange={(e) => setDisplayName(e.target.value)}
-                                label="Name"
-                            />
-                            <FieldCaption>
-                                {submitCount > 0 && errors.displayName ? errors.displayName : "Name of this user"}
-                            </FieldCaption>
-                        </div>
-
-                        <div className="col-span-12">
-                            <TextField
-                                required
-                                error={submitCount > 0 && Boolean(errors.email)}
-                                name="email"
-                                value={email}
-                                onChange={(e) => setEmail(e.target.value)}
-                                label="Email"
-                                disabled={!isNewUser}
-                            />
-                            <FieldCaption>
-                                {submitCount > 0 && errors.email ? errors.email : "Email of this user"}
-                            </FieldCaption>
-                        </div>
-
-                        <div className="col-span-12">
-                            <MultiSelect
-                                className="w-full"
-                                label="Roles"
-                                value={selectedRoleIds}
-                                onValueChange={(value: string[]) => setSelectedRoleIds(value)}
-                            >
-                                {roles.map(role => (
-                                    <MultiSelectItem key={role.id} value={role.id}>
-                                        <RoleChip role={role}/>
-                                    </MultiSelectItem>
-                                ))}
-                            </MultiSelect>
-                        </div>
-                    </div>
-                </DialogContent>
-
-                <DialogActions>
-                    <Button variant="text" onClick={handleClose}>
-                        Cancel
-                    </Button>
-                    <LoadingButton
-                        variant="filled"
-                        type="submit"
-                        disabled={!dirty}
-                        loading={isSubmitting}
-                    >
-                        {isNewUser ? "Create user" : "Update"}
-                    </LoadingButton>
-                </DialogActions>
-            </form>
-        </Dialog>
-    );
-}
-
-// ============================================
-// RolesView Component
-// ============================================
-export function RolesView({ userManagement, collections = [] }: { userManagement: UserManagement, collections?: EntityCollection[] }) {
-    const { roles, saveRole, deleteRole, loading, allowDefaultRolesCreation } = userManagement;
-    const rolesError = 'rolesError' in userManagement ? (userManagement as { rolesError?: Error }).rolesError : undefined;
-    const snackbarController = useSnackbarController();
-
-    const [dialogOpen, setDialogOpen] = useState(false);
-    const [selectedRole, setSelectedRole] = useState<Role | undefined>();
-    const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
-    const [roleToDelete, setRoleToDelete] = useState<Role | undefined>();
-    const [deleteInProgress, setDeleteInProgress] = useState(false);
-
-    const handleAddRole = () => {
-        setSelectedRole(undefined);
-        setDialogOpen(true);
-    };
-
-    const handleEditRole = (role: Role) => {
-        setSelectedRole(role);
-        setDialogOpen(true);
-    };
-
-    const handleClose = () => {
-        setDialogOpen(false);
-        setSelectedRole(undefined);
-    };
-
-    const handleDelete = async () => {
-        if (!roleToDelete) return;
-        setDeleteInProgress(true);
-        try {
-            await deleteRole(roleToDelete);
-            snackbarController.open({ type: "success",
-message: "Role deleted successfully" });
-            setDeleteConfirmOpen(false);
-            setRoleToDelete(undefined);
-        } catch (error: unknown) {
-            snackbarController.open({ type: "error",
-message: error instanceof Error ? error.message : "Error deleting role" });
-        } finally {
-            setDeleteInProgress(false);
-        }
-    };
-
-    const createDefaultRoles = () => {
-        const defaultRoles: Role[] = [
-            { id: "admin",
-name: "Admin",
-isAdmin: true },
-            { id: "editor",
-name: "Editor",
-isAdmin: false },
-            { id: "viewer",
-name: "Viewer",
-isAdmin: false }
-        ];
-        defaultRoles.forEach(role => saveRole(role));
-    };
-
-    if (loading) {
-        return <CenteredView><CircularProgress/></CenteredView>;
-    }
-
-    return (
-        <Container className="w-full flex flex-col py-4 gap-4" maxWidth={"6xl"}>
-            <div className="flex items-center mt-12">
-                <Typography gutterBottom variant="h4" className="grow" component="h4">
-                    Roles
-                </Typography>
-                <Button startIcon={<PlusIcon/>} onClick={handleAddRole}>
-                    Add role
-                </Button>
-            </div>
-
-            <div className="w-full overflow-auto">
-                <Table className="w-full">
-                    <TableHeader>
-                        <TableCell header className="w-16"></TableCell>
-                        <TableCell header>Role</TableCell>
-                        <TableCell header className="items-center">Is Admin</TableCell>
-                    </TableHeader>
-                    <TableBody>
-                        {roles.map(role => {
-                            return (
-                                <TableRow key={role.id} onClick={() => handleEditRole(role)}>
-                                    <TableCell style={{ width: "64px" }}>
-                                        {!role.isAdmin && (
-                                            <Tooltip asChild title="Delete this role">
-                                                <IconButton
-                                                    size="small"
-                                                    onClick={(e) => {
-                                                        e.stopPropagation();
-                                                        setRoleToDelete(role);
-                                                        setDeleteConfirmOpen(true);
-                                                    }}>
-                                                    <Trash2Icon/>
-                                                </IconButton>
-                                            </Tooltip>
-                                        )}
-                                    </TableCell>
-                                    <TableCell>
-                                        <RoleChip role={role}/>
-                                    </TableCell>
-                                    <TableCell className="items-center">
-                                        <Checkbox checked={role.isAdmin ?? false}/>
-                                    </TableCell>
-                                </TableRow>
-                            );
-                        })}
-
-                        {roles.length === 0 && (
-                            <TableRow>
-                                <TableCell colspan={4}>
-                                    <CenteredView className="flex flex-col gap-4 my-8 items-center">
-                                        <Typography variant="label">
-                                            {rolesError
-                                                ? "You don't have permission to view roles"
-                                                : "You don\u0026apos;t have any roles yet."}
-                                        </Typography>
-                                        {rolesError && (
-                                            <Typography variant="caption" className="text-surface-500">
-                                                Contact an administrator if you need access to this section.
-                                            </Typography>
-                                        )}
-                                        {!rolesError && allowDefaultRolesCreation && (
-                                            <Button onClick={createDefaultRoles}>
-                                                Create default roles
-                                            </Button>
-                                        )}
-                                    </CenteredView>
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </div>
-
-            {/* Role Edit Dialog */}
-            <RoleDetailsForm
-                key={selectedRole?.id ?? "new"}
-                open={dialogOpen}
-                role={selectedRole}
-                saveRole={saveRole}
-                handleClose={handleClose}
-                collections={collections}
-            />
-
-            {/* Delete Confirmation */}
-            <ConfirmationDialog
-                open={deleteConfirmOpen}
-                loading={deleteInProgress}
-                onAccept={handleDelete}
-                onCancel={() => { setDeleteConfirmOpen(false); setRoleToDelete(undefined); }}
-                title={<>Delete?</>}
-                body={<>Are you sure you want to delete this role?</>}
-            />
-        </Container>
-    );
-}
-
-// ============================================
-// RoleDetailsForm Component
-// ============================================
-function RoleDetailsForm({
-    open,
-    role: roleProp,
-    saveRole,
-    handleClose,
-    collections = []
-}: {
-    open: boolean;
-    role?: Role;
-    saveRole: (role: Role) => Promise<void>;
-    handleClose: () => void;
-    collections?: EntityCollection[];
-}) {
-    const snackbarController = useSnackbarController();
-    const isNewRole = !roleProp;
-
-    const [roleId, setRoleId] = useState(roleProp?.id || "");
-    const [roleName, setRoleName] = useState(roleProp?.name || "");
-    const [isAdmin, setIsAdmin] = useState(roleProp?.isAdmin ?? false);
-
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    const [errors, setErrors] = useState<{ id?: string; name?: string }>({});
-    const [submitCount, setSubmitCount] = useState(0);
-
-    const validate = () => {
-        const newErrors: typeof errors = {};
-        if (!roleId) newErrors.id = "Required";
-        if (!roleName) newErrors.name = "Required";
-        setErrors(newErrors);
-        return Object.keys(newErrors).length === 0;
-    };
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setSubmitCount(c => c + 1);
-
-        if (!validate()) return;
-
-        setIsSubmitting(true);
-        try {
-            await saveRole({
-                id: roleId,
-                name: roleName,
-                isAdmin
-            });
-            handleClose();
-        } catch (error: unknown) {
-            snackbarController.open({ type: "error",
-message: error instanceof Error ? error.message : "Failed to save role" });
-        } finally {
-            setIsSubmitting(false);
-        }
-    };
-
-    return (
-        <Dialog open={open} onOpenChange={(open) => !open ? handleClose() : undefined} maxWidth="6xl">
-            <form onSubmit={handleSubmit} autoComplete="off" noValidate
-                style={{ display: "flex",
-flexDirection: "column",
-position: "relative",
-height: "100%" }}>
-
-                <DialogTitle variant="h4" gutterBottom={false}>
-                    Role
-                </DialogTitle>
-
-                <DialogContent className="h-full grow overflow-y-auto">
-                    <div className="grid grid-cols-12 gap-4">
-                        <div className="col-span-12 sm:col-span-4">
-                            <TextField
-                                name="id"
-                                required
-                                error={submitCount > 0 && Boolean(errors.id)}
-                                value={roleId}
-                                onChange={(e) => setRoleId(e.target.value)}
-                                label="Role ID"
-                                disabled={!isNewRole}
-                            />
-                            <FieldCaption>
-                                {submitCount > 0 && errors.id ? errors.id : "Unique identifier for this role"}
-                            </FieldCaption>
-                        </div>
-
-                        <div className="col-span-12 sm:col-span-4">
-                            <TextField
-                                name="name"
-                                required
-                                error={submitCount > 0 && Boolean(errors.name)}
-                                value={roleName}
-                                onChange={(e) => setRoleName(e.target.value)}
-                                label="Role Name"
-                            />
-                            <FieldCaption>
-                                {submitCount > 0 && errors.name ? errors.name : "Display name for this role"}
-                            </FieldCaption>
-                        </div>
-
-                        <div className="col-span-12 sm:col-span-4 flex items-start pt-2">
-                            <label className="flex items-center gap-2 cursor-pointer mt-3">
-                                <Checkbox
-                                    checked={isAdmin}
-                                    onCheckedChange={(checked) => setIsAdmin(Boolean(checked))}
-                                />
-                                <span className="font-medium">Is Admin</span>
-                            </label>
-                        </div>
-
-                        {/* Permissions matrix */}
-                        <div className="col-span-12">
-                            <CollectionPermissionsMatrix roleId={roleId} isAdmin={isAdmin} collections={collections}/>
-                        </div>
-                    </div>
-                </DialogContent>
-
-                <DialogActions>
-                    <Button variant="text" onClick={handleClose}>
-                        Cancel
-                    </Button>
-                    <LoadingButton
-                        variant="filled"
-                        type="submit"
-                        loading={isSubmitting}
-                    >
-                        {isNewRole ? "Create role" : "Update"}
-                    </LoadingButton>
-                </DialogActions>
-            </form>
-        </Dialog>
-    );
-}
-
-// ============================================
-// CollectionPermissionsMatrix Component
-// ============================================
-const CRUD_OPS = [
-    { op: "select" as const,
-label: "Read" },
-    { op: "insert" as const,
-label: "Create" },
-    { op: "update" as const,
-label: "Edit" },
-    { op: "delete" as const,
-label: "Delete" }
-];
-
-/** Inline check: does roleId have access for this operation on these securityRules? */
-function hasRoleAccess(
-    rules: SecurityRule[] | undefined,
-    roleId: string,
-    op: "select" | "insert" | "update" | "delete"
-): boolean {
-    if (!rules || rules.length === 0) return true; // no rules = unrestricted
-    const applicable = rules.filter(r =>
-        r.operation === op || r.operation === "all" ||
-        r.operations?.includes(op) || r.operations?.includes("all")
-    );
-    if (applicable.length === 0) return false;
-    const forRole = applicable.filter(r =>
-        !r.roles || r.roles.length === 0 || r.roles.includes(roleId) || r.roles.includes("public")
-    );
-    if (forRole.length === 0) return false;
-    // Restrictive rules: any failing one denies immediately
-    for (const r of forRole) {
-        if ((r.mode ?? "permissive") === "restrictive") return false;
-    }
-    return forRole.some(r => (r.mode ?? "permissive") === "permissive");
-}
-
-function PermCell({ granted }: { granted: boolean }) {
-    return (
-        <span className={granted
-            ? "text-green-500 dark:text-green-400 text-base select-none"
-            : "text-surface-300 dark:text-surface-600 text-base select-none"}
-        >
-            {granted ? "✓" : "✗"}
-        </span>
-    );
-}
-
-function CollectionPermissionsMatrix({ roleId, isAdmin, collections }: { roleId: string; isAdmin: boolean; collections: EntityCollection[] }) {
-    if (!collections || collections.length === 0) {
-        return (
-            <div className="mt-4">
-                <Typography variant="label" className="text-surface-400">No collections configured</Typography>
-            </div>
-        );
-    }
-
-    const topLevel = collections;
-
-    return (
-        <div className="mt-6">
-            <Typography variant="label" className="mb-2 block text-surface-600 dark:text-surface-400 uppercase tracking-wide text-xs">
-                Collection permissions
-            </Typography>
-            <div className="rounded-lg border border-surface-200 dark:border-surface-700 overflow-hidden">
-                <Table>
-                    <TableHeader>
-                        <TableRow>
-                            <TableCell header>Collection</TableCell>
-                            {CRUD_OPS.map(({ op, label }) => (
-                                <TableCell key={op} header className="text-center w-24">{label}</TableCell>
-                            ))}
-                        </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                        {topLevel.map((collection) => {
-                            const extCol = collection as EntityCollection & { securityRules?: SecurityRule[] };
-                            const noRules = !extCol.securityRules || extCol.securityRules.length === 0;
-                            return (
-                                <TableRow key={collection.slug}>
-                                    <TableCell>
-                                        <div className="flex items-center gap-2">
-                                            <span className="font-medium">{collection.name}</span>
-                                            {noRules && !isAdmin && (
-                                                <Tooltip title="No security rules — unrestricted">
-                                                    <Chip className="text-xs" colorScheme="yellow">No rules</Chip>
-                                                </Tooltip>
-                                            )}
-                                        </div>
-                                        <span className="text-xs text-surface-400 font-mono">{collection.slug}</span>
-                                    </TableCell>
-                                    {CRUD_OPS.map(({ op }) => (
-                                        <TableCell key={op} className="text-center">
-                                            <PermCell granted={isAdmin || hasRoleAccess(extCol.securityRules, roleId, op)}/>
-                                        </TableCell>
-                                    ))}
-                                </TableRow>
-                            );
-                        })}
-                    </TableBody>
-                </Table>
-            </div>
-            {!roleId && (
-                <Typography variant="caption" className="mt-2 text-surface-400 italic">
-                    Enter a role ID above to preview permissions
-                </Typography>
-            )}
-        </div>
-    );
-}
-
-// ============================================
-// Internal Components
-// ============================================
-function FieldCaption({ children }: React.PropsWithChildren) {
-    return (
-        <Typography variant="caption" className="text-surface-500 mt-1.5 ml-1 block">
-            {children}
-        </Typography>
-    );
-}