@loom-framework/core 0.1.0-alpha.151 → 0.1.0-alpha.153

package/dist/cli/templates/process-management-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"process-management-page.js","sourceRoot":"","sources":["../../../src/cli/templates/process-management-page.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,UAAU,6BAA6B;IAC3C,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8yBR,CAAC;AACF,CAAC"}

package/dist/cli/templates/user-management-page.d.ts

@@ -2,7 +2,8 @@
  * User Management page template
  *
  * Generates UserManagement page as a local source file.
- * Page imports useUsers hook and sub-components from @loom-framework/frontend-antd
+ * Contains Users tab and Roles tab with full CRUD.
+ * Page imports useUsers/useRoles hooks from @loom-framework/frontend-antd
  * and registers its own i18n keys via registerMessages().
  */
 export declare function userManagementPageTemplate(): string;

package/dist/cli/templates/user-management-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"user-management-page.d.ts","sourceRoot":"","sources":["../../../src/cli/templates/user-management-page.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,wBAAgB,0BAA0B,IAAI,MAAM,CAmOnD"}
+{"version":3,"file":"user-management-page.d.ts","sourceRoot":"","sources":["../../../src/cli/templates/user-management-page.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,wBAAgB,0BAA0B,IAAI,MAAM,CAqenD"}

package/dist/cli/templates/user-management-page.js

@@ -2,14 +2,15 @@
  * User Management page template
  *
  * Generates UserManagement page as a local source file.
- * Page imports useUsers hook and sub-components from @loom-framework/frontend-antd
+ * Contains Users tab and Roles tab with full CRUD.
+ * Page imports useUsers/useRoles hooks from @loom-framework/frontend-antd
  * and registers its own i18n keys via registerMessages().
  */
 export function userManagementPageTemplate() {
-    return `import React, { useState } from 'react';
-import { Card, Table, Button, Modal, Form, Input, Select, Space, message, Popconfirm, Tag, Typography, theme, Breadcrumb, Flex } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, UserOutlined, HomeOutlined } from '@ant-design/icons';
-import { useLocale, useAppShell, useUsers, registerMessages } from '@loom-framework/frontend-antd';
+    return `import React, { useState, useCallback, useEffect } from 'react';
+import { Card, Table, Button, Modal, Form, Input, Select, Space, message, Popconfirm, Tag, Typography, theme, Breadcrumb, Flex, Tabs, Descriptions } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, UserOutlined, HomeOutlined, SafetyOutlined } from '@ant-design/icons';
+import { useLocale, useAppShell, useUsers, useRoles, registerMessages } from '@loom-framework/frontend-antd';
 
 registerMessages('zh-CN', {
   'user.title': '用户管理',
@@ -32,6 +33,28 @@ registerMessages('zh-CN', {
   'user.passwordRequired': '请输入密码',
   'user.passwordMin': '密码至少8位',
   'user.leaveBlankToKeep': '留空则保持不变',
+  'user.permissions': '权限',
+  'user.users': '用户',
+  'user.roles': '角色',
+  'user.addRole': '添加角色',
+  'user.editRole': '编辑角色',
+  'user.roleName': '角色名称',
+  'user.roleNameInvalid': '角色名必须以小写字母开头，只能包含小写字母、数字、连字符或下划线（2-32位）',
+  'user.roleExists': '角色名已存在',
+  'user.roleCreated': '角色已创建',
+  'user.roleCreateFailed': '创建角色失败',
+  'user.roleUpdated': '角色已更新',
+  'user.roleUpdateFailed': '更新角色失败',
+  'user.roleDeleted': '角色已删除',
+  'user.deleteRoleConfirm': '确认删除角色 "{name}"？',
+  'user.deleteRoleInUse': '角色 "{name}" 下有 {count} 位用户，无法删除',
+  'user.cannotDeleteLastAdmin': '无法删除最后一个管理员角色',
+  'user.model': '模型',
+  'user.level': '级别',
+  'user.wildcard': '全部模型',
+  'user.permissionLevel': '权限级别',
+  'user.defaultPermissions': '默认权限',
+  'user.namePlaceholder': '例如 editor',
 });
 
 registerMessages('en-US', {
@@ -55,36 +78,101 @@ registerMessages('en-US', {
   'user.passwordRequired': 'Password is required',
   'user.passwordMin': 'Password must be at least 8 characters',
   'user.leaveBlankToKeep': 'Leave blank to keep current',
+  'user.permissions': 'Permissions',
+  'user.users': 'Users',
+  'user.roles': 'Roles',
+  'user.addRole': 'Add Role',
+  'user.editRole': 'Edit Role',
+  'user.roleName': 'Role Name',
+  'user.roleNameInvalid': 'Role name must start with a lowercase letter and contain only lowercase letters, digits, hyphens, or underscores (2-32 chars)',
+  'user.roleExists': 'Role name already exists',
+  'user.roleCreated': 'Role created',
+  'user.roleCreateFailed': 'Failed to create role',
+  'user.roleUpdated': 'Role updated',
+  'user.roleUpdateFailed': 'Failed to update role',
+  'user.roleDeleted': 'Role deleted',
+  'user.deleteRoleConfirm': 'Delete role "{name}"?',
+  'user.deleteRoleInUse': 'Role "{name}" has {count} user(s), cannot delete',
+  'user.cannotDeleteLastAdmin': 'Cannot delete the last admin role',
+  'user.model': 'Model',
+  'user.level': 'Level',
+  'user.wildcard': 'All Models',
+  'user.permissionLevel': 'Permission Level',
+  'user.defaultPermissions': 'Default Permissions',
+  'user.namePlaceholder': 'e.g. editor',
 });
 
-const ROLE_COLORS: Record<string, string> = {
+const LEVEL_COLORS: Record<string, string> = {
   admin: 'red',
-  editor: 'blue',
-  viewer: 'green',
+  write: 'blue',
+  read: 'green',
+  none: 'default',
 };
 
-const ROLE_OPTIONS = [
-  { value: 'admin', label: 'admin' },
-  { value: 'editor', label: 'editor' },
-  { value: 'viewer', label: 'viewer' },
+const LEVEL_OPTIONS = [
+  { value: 'none', label: 'None' },
+  { value: 'read', label: 'Read' },
+  { value: 'write', label: 'Write' },
+  { value: 'admin', label: 'Admin' },
 ];
 
 export default function UserManagementPage(): React.ReactElement {
   const { token } = theme.useToken();
   const { t } = useLocale();
   const { breadcrumbs, onNavClick } = useAppShell();
+  const [activeTab, setActiveTab] = useState('users');
+  const [addUserModalOpen, setAddUserModalOpen] = useState(false);
+  const [addRoleModalOpen, setAddRoleModalOpen] = useState(false);
+
+  const handleTabChange = (key: string) => {
+    setActiveTab(key);
+    setAddUserModalOpen(false);
+    setAddRoleModalOpen(false);
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
+      <Flex justify="space-between" align="center" style={{ marginBottom: 12 }}>
+        <Breadcrumb items={[{ title: <HomeOutlined onClick={() => onNavClick?.('')} style={{ cursor: 'pointer' }} /> }, ...(breadcrumbs || []).map(b => ({ title: b.path ? <a onClick={() => onNavClick?.(b.path!)}>{b.title}</a> : b.title }))]} />
+      </Flex>
+      <Tabs
+        activeKey={activeTab}
+        onChange={handleTabChange}
+        destroyInactiveTabPane
+        animated={{ inkBar: true, tabPane: false }}
+        tabBarStyle={{ marginLeft: 12 }}
+        tabBarExtraContent={activeTab === 'users'
+          ? <Button type="primary" icon={<PlusOutlined />} onClick={() => setAddUserModalOpen(true)}>{t('user.addUser') || 'Add User'}</Button>
+          : <Button type="primary" icon={<SafetyOutlined />} onClick={() => setAddRoleModalOpen(true)}>{t('user.addRole') || 'Add Role'}</Button>
+        }
+        items={[
+          { key: 'users', label: t('user.users') || 'Users', children: <div style={{ animation: 'loom-page-enter 0.25s ease both' }}><UsersTab addUserModalOpen={addUserModalOpen} onAddUserModalClose={() => setAddUserModalOpen(false)} /></div> },
+          { key: 'roles', label: t('user.roles') || 'Roles', children: <div style={{ animation: 'loom-page-enter 0.25s ease both' }}><RolesTab addRoleModalOpen={addRoleModalOpen} onAddRoleModalClose={() => setAddRoleModalOpen(false)} /></div> },
+        ]}
+      />
+    </div>
+  );
+}
+
+function UsersTab({ addUserModalOpen, onAddUserModalClose }: { addUserModalOpen: boolean; onAddUserModalClose: () => void }): React.ReactElement {
+  const { token } = theme.useToken();
+  const { t } = useLocale();
   const { users, loading, addUser, deleteUser, updateUser } = useUsers();
-  const [addModalOpen, setAddModalOpen] = useState(false);
+  const { rolesData } = useRoles();
   const [editModalOpen, setEditModalOpen] = useState(false);
-  const [editingUser, setEditingUser] = useState<{ id: string; username: string; role: string } | null>(null);
+  const [editingUser, setEditingUser] = useState<{ userId: string; username: string; role: string } | null>(null);
   const [addForm] = Form.useForm();
   const [editForm] = Form.useForm();
 
+  const roleOptions = rolesData
+    ? rolesData.roles.map(r => ({ value: r.role, label: r.role }))
+    : [];
+
   const handleAdd = async (values: { username: string; password: string; role: string }) => {
     const result = await addUser(values.username, values.password, values.role);
     if (result) {
       message.success(t('user.userAdded') || 'User added');
-      setAddModalOpen(false);
+      onAddUserModalClose();
       addForm.resetFields();
     } else {
       message.error(t('user.userAddFailed') || 'Failed to add user');
@@ -95,7 +183,7 @@ export default function UserManagementPage(): React.ReactElement {
     if (!editingUser) return;
     const updates: Partial<{ username: string; password: string; role: string }> = { role: values.role };
     if (values.password) updates.password = values.password;
-    const result = await updateUser(editingUser.id, updates);
+    const result = await updateUser(editingUser.userId, updates);
     if (result) {
       message.success(t('user.userUpdated') || 'User updated');
       setEditModalOpen(false);
@@ -117,7 +205,7 @@ export default function UserManagementPage(): React.ReactElement {
       dataIndex: 'role',
       key: 'role',
       width: 120,
-      render: (role: string) => <Tag color={ROLE_COLORS[role] || 'default'}>{role}</Tag>,
+      render: (role: string) => <Tag color={LEVEL_COLORS[role] || 'default'}>{role}</Tag>,
     },
     {
       title: t('user.createdAt') || 'Created At',
@@ -130,7 +218,7 @@ export default function UserManagementPage(): React.ReactElement {
       title: t('user.action') || 'Action',
       key: 'action',
       width: 120,
-      render: (_: unknown, record: { id: string; username: string; role: string }) => (
+      render: (_: unknown, record: { userId: string; username: string; role: string }) => (
         <Space size={0}>
           <Button type="text" size="small" icon={<EditOutlined />} onClick={() => {
             setEditingUser(record);
@@ -140,7 +228,7 @@ export default function UserManagementPage(): React.ReactElement {
           <Popconfirm
             title={t('user.deleteConfirm')?.replace('{name}', record.username) || \`Delete user "\${record.username}"?\`}
             onConfirm={async () => {
-              const ok = await deleteUser(record.id);
+              const ok = await deleteUser(record.userId);
               if (ok) message.success(t('user.userDeleted') || 'User deleted');
               else message.error(t('user.userDeleteFailed') || 'Failed to delete user');
             }}
@@ -153,59 +241,29 @@ export default function UserManagementPage(): React.ReactElement {
   ];
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
-      <Flex justify="space-between" align="center" style={{ marginBottom: 12 }}>
-        <Breadcrumb items={[{ title: <HomeOutlined onClick={() => onNavClick?.('')} style={{ cursor: 'pointer' }} /> }, ...(breadcrumbs || []).map(b => ({ title: b.path ? <a onClick={() => onNavClick?.(b.path!)}>{b.title}</a> : b.title }))]} />
-      </Flex>
-      <Card
-        title={
-          <Space>
-            <UserOutlined />
-            <span>{t('user.title') || 'User Management'}</span>
-          </Space>
-        }
-        extra={
-          <Button type="primary" size="small" icon={<PlusOutlined />} onClick={() => setAddModalOpen(true)}>
-            {t('user.addUser') || 'Add User'}
-          </Button>
-        }
-      >
-        <Table
-          dataSource={users}
-          columns={columns}
-          rowKey="id"
-          loading={loading}
-          pagination={false}
-          size="small"
-        />
+    <>
+      <Card>
+        <Table dataSource={users} columns={columns} rowKey="userId" loading={loading} pagination={false} size="small" />
       </Card>
 
       <Modal
         title={t('user.addUser') || 'Add User'}
-        open={addModalOpen}
+        open={addUserModalOpen}
         onOk={() => addForm.submit()}
-        onCancel={() => { setAddModalOpen(false); addForm.resetFields(); }}
+        onCancel={() => { onAddUserModalClose(); addForm.resetFields(); }}
         okText={t('common.save') || 'Save'}
         cancelText={t('common.cancel') || 'Cancel'}
-        destroyOnClose
+        destroyOnHidden
       >
         <Form form={addForm} onFinish={handleAdd} layout="vertical" style={{ marginTop: token.marginMD }}>
-          <Form.Item
-            name="username"
-            label={t('user.username') || 'Username'}
-            rules={[{ required: true, message: t('user.usernameRequired') || 'Username is required' }]}
-          >
+          <Form.Item name="username" label={t('user.username') || 'Username'} rules={[{ required: true, message: t('user.usernameRequired') || 'Username is required' }]}>
             <Input />
           </Form.Item>
-          <Form.Item
-            name="password"
-            label={t('user.password') || 'Password'}
-            rules={[{ required: true, min: 8, message: t('user.passwordMin') || 'Password must be at least 8 characters' }]}
-          >
+          <Form.Item name="password" label={t('user.password') || 'Password'} rules={[{ required: true, min: 8, message: t('user.passwordMin') || 'Password must be at least 8 characters' }]}>
             <Input.Password />
           </Form.Item>
-          <Form.Item name="role" label={t('user.role') || 'Role'} initialValue="viewer">
-            <Select options={ROLE_OPTIONS} />
+          <Form.Item name="role" label={t('user.role') || 'Role'} initialValue={roleOptions.length > 0 ? roleOptions[roleOptions.length - 1]?.value : undefined}>
+            <Select options={roleOptions} />
           </Form.Item>
         </Form>
       </Modal>
@@ -217,18 +275,219 @@ export default function UserManagementPage(): React.ReactElement {
         onCancel={() => { setEditModalOpen(false); setEditingUser(null); }}
         okText={t('common.save') || 'Save'}
         cancelText={t('common.cancel') || 'Cancel'}
-        destroyOnClose
+        destroyOnHidden
       >
         <Form form={editForm} onFinish={handleEdit} layout="vertical" style={{ marginTop: token.marginMD }}>
           <Form.Item name="role" label={t('user.role') || 'Role'}>
-            <Select options={ROLE_OPTIONS} />
+            <Select options={roleOptions} />
           </Form.Item>
           <Form.Item name="password" label={t('user.newPassword') || 'New Password'}>
             <Input.Password placeholder={t('user.leaveBlankToKeep') || 'Leave blank to keep current'} />
           </Form.Item>
         </Form>
       </Modal>
-    </div>
+    </>
+  );
+}
+
+function RolesTab({ addRoleModalOpen, onAddRoleModalClose }: { addRoleModalOpen: boolean; onAddRoleModalClose: () => void }): React.ReactElement {
+  const { token } = theme.useToken();
+  const { t } = useLocale();
+  const { users } = useUsers();
+  const { rolesData, loading, createRole, updateRole, deleteRole, refresh } = useRoles();
+  const [editModalOpen, setEditModalOpen] = useState(false);
+  const [editingRole, setEditingRole] = useState<{ role: string; permissions: Array<{ model: string; level: string }> } | null>(null);
+  const [roleForm] = Form.useForm();
+  const [permRows, setPermRows] = useState<Array<{ model: string; level: string }>>([]);
+
+  const modelOptions = rolesData
+    ? [...rolesData.models.map(m => ({ value: m, label: m })), { value: '*', label: t('user.wildcard') || 'All Models' }]
+    : [];
+
+  const buildPermRows = useCallback((permissions: Array<{ model: string; level: string }>, models: string[]) => {
+    const rows: Array<{ model: string; level: string }> = [];
+    const covered = new Set(permissions.map(p => p.model));
+    for (const m of models) {
+      const existing = permissions.find(p => p.model === m);
+      rows.push({ model: m, level: existing?.level || 'none' });
+    }
+    if (!covered.has('*')) {
+      const wildcard = permissions.find(p => p.model === '*');
+      rows.push({ model: '*', level: wildcard?.level || 'none' });
+    } else {
+      rows.push({ model: '*', level: permissions.find(p => p.model === '*')?.level || 'none' });
+    }
+    return rows;
+  }, []);
+
+  const handleAddRole = async (values: { role: string }) => {
+    const permissions = permRows.filter(p => p.level !== 'none');
+    const result = await createRole(values.role, permissions);
+    if (result) {
+      message.success(t('user.roleCreated') || 'Role created');
+      onAddRoleModalClose();
+      roleForm.resetFields();
+    }
+  };
+
+  const handleEditRole = async () => {
+    if (!editingRole) return;
+    const newName = roleForm.getFieldValue('role') as string;
+    const permissions = permRows.filter(p => p.level !== 'none');
+    const updates: { role?: string; permissions?: Array<{ model: string; level: string }> } = {};
+    if (newName !== editingRole.role) updates.role = newName;
+    updates.permissions = permissions;
+    const result = await updateRole(editingRole.role, updates);
+    if (result) {
+      message.success(t('user.roleUpdated') || 'Role updated');
+      setEditModalOpen(false);
+      setEditingRole(null);
+    }
+  };
+
+  const handleDelete = async (roleName: string) => {
+    const result = await deleteRole(roleName);
+    if (result.success) {
+      message.success(t('user.roleDeleted') || 'Role deleted');
+    } else if (result.affectedUsers && result.affectedUsers.length > 0) {
+      message.error(t('user.deleteRoleInUse')?.replace('{name}', roleName).replace('{count}', String(result.affectedUsers.length)) || \`Role "\${roleName}" has users, cannot delete\`);
+    } else {
+      message.error(result.error || t('user.cannotDeleteLastAdmin') || 'Cannot delete role');
+    }
+  };
+
+  const openAddModal = () => {
+    roleForm.resetFields();
+    const initPerms = rolesData ? buildPermRows([], rolesData.models) : [];
+    setPermRows(initPerms.map(p => ({ ...p, level: 'read' })));
+  };
+
+  useEffect(() => {
+    if (addRoleModalOpen) openAddModal();
+  }, [addRoleModalOpen]);
+
+  const openEditModal = (roleInfo: { role: string; permissions: Array<{ model: string; level: string }> }) => {
+    setEditingRole(roleInfo);
+    roleForm.setFieldsValue({ role: roleInfo.role });
+    const rows = rolesData ? buildPermRows(roleInfo.permissions, rolesData.models) : [];
+    setPermRows(rows);
+    setEditModalOpen(true);
+  };
+
+  const updatePermLevel = (model: string, level: string) => {
+    setPermRows(prev => prev.map(p => p.model === model ? { ...p, level } : p));
+  };
+
+  const roleColumns = [
+    {
+      title: t('user.roleName') || 'Role Name',
+      dataIndex: 'role',
+      key: 'role',
+      width: 150,
+      render: (role: string) => <Tag color={LEVEL_COLORS[role] || 'default'} style={{ fontSize: token.fontSizeSM }}>{role}</Tag>,
+    },
+    {
+      title: t('user.permissions') || 'Permissions',
+      key: 'permissions',
+      render: (_: unknown, record: { role: string; permissions: Array<{ model: string; level: string }> }) => (
+        <Space size={4} wrap>
+          {record.permissions.map(p => (
+            <Tag key={\`\${p.model}-\${p.level}\`} color={LEVEL_COLORS[p.level] || 'default'}>
+              {p.model === '*' ? (t('user.wildcard') || 'All') : p.model}: {p.level}
+            </Tag>
+          ))}
+        </Space>
+      ),
+    },
+    {
+      title: t('user.users') || 'Users',
+      key: 'userCount',
+      width: 80,
+      render: (_: unknown, record: { role: string }) => users.filter(u => u.role === record.role).length,
+    },
+    {
+      title: t('user.action') || 'Action',
+      key: 'action',
+      width: 100,
+      render: (_: unknown, record: { role: string }) => (
+        <Space size={0}>
+          <Button type="text" size="small" icon={<EditOutlined />} onClick={() => openEditModal(record as { role: string; permissions: Array<{ model: string; level: string }> })} />
+          <Popconfirm
+            title={t('user.deleteRoleConfirm')?.replace('{name}', record.role) || \`Delete role "\${record.role}"?\`}
+            onConfirm={() => handleDelete(record.role)}
+          >
+            <Button type="text" size="small" danger icon={<DeleteOutlined />} />
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+
+  const permColumns = [
+    {
+      title: t('user.model') || 'Model',
+      dataIndex: 'model',
+      key: 'model',
+      width: 200,
+      render: (model: string) => model === '*' ? <Tag>{t('user.wildcard') || 'All Models'}</Tag> : model,
+    },
+    {
+      title: t('user.level') || 'Level',
+      dataIndex: 'level',
+      key: 'level',
+      width: 150,
+      render: (level: string, record: { model: string }) => (
+        <Select value={level} onChange={v => updatePermLevel(record.model, v)} options={LEVEL_OPTIONS} style={{ width: 120 }} />
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <Card>
+        <Table dataSource={rolesData?.roles || []} columns={roleColumns} rowKey="role" loading={loading} pagination={false} size="small" />
+      </Card>
+
+      <Modal
+        title={t('user.addRole') || 'Add Role'}
+        open={addRoleModalOpen}
+        onOk={() => roleForm.submit()}
+        onCancel={() => { onAddRoleModalClose(); roleForm.resetFields(); }}
+        okText={t('common.save') || 'Save'}
+        cancelText={t('common.cancel') || 'Cancel'}
+        destroyOnHidden
+        width={560}
+      >
+        <Form form={roleForm} onFinish={handleAddRole} layout="vertical" style={{ marginTop: token.marginMD }}>
+          <Form.Item name="role" label={t('user.roleName') || 'Role Name'} rules={[{ required: true, message: t('user.roleNameInvalid') || 'Invalid role name' }]}>
+            <Input placeholder={t('user.namePlaceholder') || 'e.g. editor'} />
+          </Form.Item>
+          <Form.Item label={t('user.permissionLevel') || 'Permission Level'}>
+            <Table dataSource={permRows} columns={permColumns} rowKey="model" pagination={false} size="small" />
+          </Form.Item>
+        </Form>
+      </Modal>
+
+      <Modal
+        title={t('user.editRole') || 'Edit Role'}
+        open={editModalOpen}
+        onOk={handleEditRole}
+        onCancel={() => { setEditModalOpen(false); setEditingRole(null); }}
+        okText={t('common.save') || 'Save'}
+        cancelText={t('common.cancel') || 'Cancel'}
+        destroyOnHidden
+        width={560}
+      >
+        <Form form={roleForm} layout="vertical" style={{ marginTop: token.marginMD }}>
+          <Form.Item name="role" label={t('user.roleName') || 'Role Name'} rules={[{ required: true }]}>
+            <Input />
+          </Form.Item>
+          <Form.Item label={t('user.permissionLevel') || 'Permission Level'}>
+            <Table dataSource={permRows} columns={permColumns} rowKey="model" pagination={false} size="small" />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </>
   );
 }
 `;

package/dist/cli/templates/user-management-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-management-page.js","sourceRoot":"","sources":["../../../src/cli/templates/user-management-page.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,UAAU,0BAA0B;IACxC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiOR,CAAC;AACF,CAAC"}
+{"version":3,"file":"user-management-page.js","sourceRoot":"","sources":["../../../src/cli/templates/user-management-page.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,MAAM,UAAU,0BAA0B;IACxC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmeR,CAAC;AACF,CAAC"}